docs: fix props table and paragraph on selection

packages/paste-website/src/pages/components/display-pill-group/index.mdx

@@ -201,11 +201,11 @@ export const Basic = () => {
 
 `DisplayPillGroup` will take any Global HTML Attribute for an HTML List element, plus the following:
 
-###### `aria-label`: `string`
+###### `aria-label: string`
 
 Defines a string value that labels the current element.
 
-###### `element`: `string`
+###### `element?: string`
 
 Set a custom element name.
 
@@ -215,11 +215,11 @@ Set a custom element name.
 
 `DisplayPill` will take any Global HTML Attribute for an HTML Anchor element, plus the following:
 
-###### `element`: `string`
+###### `element?: string`
 
 Set a custom element name.
 
-###### `href`: `string`
+###### `href?: string`
 
 URL the pill is to link to.
 

packages/paste-website/src/pages/components/form-pill-group/index.mdx

@@ -134,9 +134,9 @@ This will provide you with some internal state management and keyboard navigatio
 
 ### Selectable Form Pill Group
 
-Outside of keyboard navigation, Form Pills are presentational. If you would like to make the Pill Group provide selection options, you can manage the state of those pills and seemlessly merge it with the state return from the `useFormPillState` hook.
+If you would like to make the Pill Group have selectable pill, you should manage the selection state yourself and combine it with the state returned from the `useFormPillState` hook.
 
-Track which pill is selected in a separate store of state. When rendering the Pill Group, cross reference the pills with the selected state, and conditoinally set `selected` on each `FormPill` that requires it.
+To do so, track which pill is selected in a separate store of state. When rendering the Pill Group, cross reference the rendered pills with the selection state, and conditoinally set `selected` on each `FormPill` that requires it.
 
 The `onSelect` event handler will fire when ever the pill is clicked, or the spacebar or enter key is pressed. Use this to respond to your users selection interactions.
 
@@ -217,211 +217,223 @@ export const Basic = () => {
 
 ##### FormPillGroup
 
-###### `aria-label`: `string`
+**N.B:** Most required props are provided by spreading the returned state from `useFormPillState`.
+
+###### `aria-label: string`
 
 Defines a string value that labels the current element.
 
-###### `move`: `(id: string | null) => void`
+###### `move: (id: string | null) => void`
 
 Moves focus to a given item ID.
 
-###### `first`: `() => void`
+###### `first: () => void`
 
 Moves focus to the first item.
 
-###### `last`: `() => void`
+###### `last: () => void`
 
 Moves focus to the first item.
 
-###### `items`: `Item[]`
+###### `items: Item[]`
 
 Lists all the pill items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.
 
-###### `setCurrentId`: `Dispatch<SetStateAction<string | null | undefined>>`
+###### `setCurrentId: Dispatch<SetStateAction<string | null | undefined>>`
 
 Lists all the pill items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.
 
-###### `element`?: `string`
+###### `element?: string`
 
 default: `FORM_PILL_GROUP`
 
-###### `focusable`?: `boolean`
+###### `focusable?: boolean`
 
 When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.
 
-###### `disabled`?: `boolean`
+###### `disabled?: boolean`
 
 Same as the HTML attribute.
 
-###### `baseId`?: `string`
+###### `baseId?: string`
 
 ID that will serve as a base for all the items IDs.
 
-###### `currentId`?: `string`
+###### `currentId?: string`
 
 The current focused item id. - undefined will automatically focus the first enabled composite item. - null will focus the base composite element and users will be able to navigate out of it using arrow keys. - If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.
 
-###### `groups`?: `Group[]`
+###### `groups?: Group[]`
 
 Lists all the composite groups with their id and DOM ref. This state is automatically updated when registerGroup and unregisterGroup are called.
 
 ---
 
 ##### FormPill
 
-###### `selected`: `boolean`
-
-Set if a pill is in a selected state.
-
-###### `element`: `string`
-
-Set a custom element name.
-
-###### `onSelect`: `() => void`
-
-Event handler called when a pill is selected.
-
-###### `onDismiss`: `() => void`
-
-Event handler called when a pill is dismised.
+**N.B:** Most required props are provided by spreading the returned state from `useFormPillState`.
 
-###### `onFocus`: `() => void`
+###### `baseId: string`
 
-Event handler called when a pill is focused.
+ID that will serve as a base for all the items IDs.
 
-###### `onBlur`: `() => void`
+###### `setBaseId: string`
 
-Event handler called when a pill is blurred.
+Sets baseId
 
-###### `rtl`: `boolean`
+###### `rtl: boolean`
 
 Determines how next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.
 
-###### `items`: `Item[]`
+###### `items: Item[]`
 
 Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.
 
-###### `groups`: `Group[]`
+###### `groups: Group[]`
 
 Lists all the composite groups with their id and DOM ref. This state is automatically updated when registerGroup and unregisterGroup are called.
 
-###### `currentId`: `string`
-
-The current focused item id. - undefined will automatically focus the first enabled composite item. - null will focus the base composite element and users will be able to navigate out of it using arrow keys. - If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.
-
-###### `orientation`: `horizontal | vertical`
-
-Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus: - undefined: all arrow keys work. - horizontal: only left and right arrow keys work. - vertical: only up and down arrow keys work.
-
-###### `loop`: `boolean`
+###### `loop: boolean`
 
 On one-dimensional composites: - true loops from the last item to the first item and vice-versa. - horizontal loops only if orientation is horizontal or not set. - vertical loops only if orientation is vertical or not set. - If currentId is initially set to null, the composite element will be focused in between the last and first items.
 
-###### `wrap`: `boolean`
+###### `wrap: boolean`
 
 Has effect only on two-dimensional composites. If enabled, moving to the next item from the last one in a row or column will focus the first item in the next row or column and vice-versa. - true wraps between rows and columns. - horizontal wraps only between rows. - vertical wraps only between columns. - If loop matches the value of wrap, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.
 
-###### `shift`: `boolean`
+###### `shift: boolean`
 
 Has effect only on two-dimensional composites. If enabled, moving up or down when there's no next item or the next item is disabled will shift to the item right before it.
 
-###### `registerItem`: `(item: Item) => void`
+###### `registerItem: (item: Item) => void`
 
 Registers a composite item.
 
-###### `unregisterItem`: `(item: Item) => void`
+###### `unregisterItem: (item: Item) => void`
 
 Unregisters a composite item.
 
-###### `registerGroup`: `(group: Group) => void`
+###### `registerGroup: (group: Group) => void`
 
 Registers a composite group.
 
-###### `unregisterGroup`: `(group: Group) => void`
+###### `unregisterGroup: (group: Group) => void`
 
 Unregisters a composite group.
 
-###### `move`: `(id: string | null) => void`
+###### `move: (id: string | null) => void`
 
 Moves focus to a given item ID.
 
-###### `next`: `() => void`
+###### `next: () => void`
 
 Moves focus to the next item.
 
-###### `previous`: `() => void`
+###### `previous: () => void`
 
 Moves focus to the previous item.
 
-###### `up`: `() => void`
+###### `up: () => void`
 
 Moves focus to the item above.
 
-###### `down`: `() => void`
+###### `down: () => void`
 
 Moves focus to the item below.
 
-###### `first`: `() => void`
+###### `first: () => void`
 
 Moves focus to the first item.
 
-###### `last`: `() => void`
+###### `last: () => void`
 
 Moves focus to the last item.
 
-###### `sort`: `() => void`
+###### `sort: () => void`
 
 Sorts the composite.items based on the items position in the DOM. This is especially useful after modifying the composite items order in the DOM. Most of the time, though, you don't need to manually call this function as the re-ordering happens automatically.
 
-###### `setRTL`: `boolean>`
+###### `setRTL: boolean>`
 
 Sets rtl.
 
-###### `setOrientation`: `"horizontal" | "vertical" | undefined`
+###### `setOrientation: "horizontal" | "vertical" | undefined`
 
 Sets orientation.
 
-###### `setCurrentId`: `string | null | undefined`
+###### `setCurrentId: string | null | undefined`
 
 Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.
 
-###### `setLoop`: `boolean | "horizontal" | "vertical"`
+###### `setLoop: boolean | "horizontal" | "vertical"`
 
 Sets loop.
 
-###### `setWrap`: `boolean | "horizontal" | "vertical"`
+###### `setWrap: boolean | "horizontal" | "vertical"`
 
 Sets wrap.
 
-###### `seShift: `boolean>`
+###### `seShift: boolean>`
 
 Sets shift.
 
-###### `reset: `() => void`
+###### `reset: () => void`
 
 Resets to initial state.
 
+###### `selected?: boolean`
+
+Set if a pill is in a selected state.
+
+###### `element?: string`
+
+Set a custom element name.
+
+###### `onSelect?: () => void`
+
+Event handler called when a pill is selected.
+
+###### `onDismiss?: () => void`
+
+Event handler called when a pill is dismised.
+
+###### `onFocus?: () => void`
+
+Event handler called when a pill is focused.
+
+###### `onBlur?: () => void`
+
+Event handler called when a pill is blurred.
+
+###### `currentId?: string`
+
+The current focused item id. - undefined will automatically focus the first enabled composite item. - null will focus the base composite element and users will be able to navigate out of it using arrow keys. - If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.
+
+###### `orientation?: horizontal | vertical`
+
+Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus: - undefined: all arrow keys work. - horizontal: only left and right arrow keys work. - vertical: only up and down arrow keys work.
+
 ---
 
 ##### useFormPillState
 
-###### `baseId`?: `string`
+###### `baseId?: string`
 
 ID that will serve as a base for all the items IDs.
 
-###### `rtl`?: `boolean`
+###### `rtl?: boolean`
 
 Determines how next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.
 
-###### `wrap`?: `boolean`
+###### `wrap?: boolean`
 
 Has effect only on two-dimensional composites. If enabled, moving to the next item from the last one in a row or column will focus the first item in the next row or column and vice-versa. - true wraps between rows and columns. - horizontal wraps only between rows. - vertical wraps only between columns. - If loop matches the value of wrap, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.
 
-###### `shift`?: `boolean`
+###### `shift?: boolean`
 
 Has effect only on two-dimensional composites. If enabled, moving up or down when there's no next item or the next item is disabled will shift to the item right before it.
 
-###### `currentId`: `string`
+###### `currentId?: string`
 
 The current focused item id. - undefined will automatically focus the first enabled composite item. - null will focus the base composite element and users will be able to navigate out of it using arrow keys. - If currentId is initially set to null, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.