fix: Update docs

modules/docs/mdx/10.0-UPGRADE_GUIDE.mdx

@@ -15,6 +15,8 @@ any questions.
 - [Token Updates](#token-updates)
   - [Space and Depth](#space-and-depth)
 - [Component Updates](#component-updates)
+	- [Select](#select)
+	- [Popups](#popups)
 - [Glossary](#glossary)
   - [Main](#main)
   - [Preview](#preview)
@@ -118,6 +120,51 @@ these sizes should change along with it. Since `px` are a fixed unit and do not
 
 ## Component Updates
 
+### Popups
+
+All Popup components including `Menu`, `Dialog`, 
+
+### Select (Main)
+
+**PR:** [#2309](https://github.com/Workday/canvas-kit/pull/2309)
+
+We've converted `Select` into a [compound component](/getting-started/for-developers/resources/compound-components/)
+which provides a flexible API and access to its internals via its subcomponents.
+```tsx
+// v9
+<FormField label="Pizza Size">
+	<Select onChange={handleChange} value={value}>
+		<SelectOption label="Small" value="small" />
+		<SelectOption label="Medium" value="medium" />
+		<SelectOption label="Large" value="large" />
+	</Select>
+</FormField>
+```
+
+```tsx
+// v10
+<Select items={['Small', 'Medium', 'Large']}>
+	<FormField label="Pizza Size" inputId="pizza">
+		<Select.Input onChange={e => handleChange(e)} id="pizza" />
+		<Select.Popper>
+			<Select.Card maxHeight="200px">
+				<Select.List>
+					{item => {
+						return (
+							<Select.Item>
+								{item}
+							</Select.Item>
+						);
+					}}
+				</Select.List>
+			</Select.Card>
+		</Select.Popper>
+	</FormField>
+</Select>
+```
+
+
+
 ## Glossary
 
 ### Main

modules/preview-react/radio/stories/Radio.stories.mdx

@@ -26,7 +26,7 @@ Radio Buttons allow a user to select one value from a predefined list of 7 or fe
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-react
+yarn add @workday/canvas-kit-preview-react
 ```
 
 ## Usage

modules/react/form-field/lib/FormField.tsx

@@ -233,7 +233,6 @@ export class FormField extends React.Component<React.PropsWithChildren<FormField
     } else {
       return (
         <FormFieldContainer
-          id="foo"
           useFieldset={useFieldset}
           labelPosition={labelPosition}
           grow={grow}

modules/react/select/stories/Select.stories.mdx

@@ -35,9 +35,9 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
-`inputId` prop matches an `id` on the `<Select.Input/>` to meet accessibility standards. This
-ensures the `label` text from `FormField` is attached to the `<Select.Input/>` and read out as a
-group for voiceover.
+`inputId` prop matches an `id` on the `Select.Input` to meet accessibility standards. This ensures
+the `label` text from `FormField` is attached to the `Select.Input` and read out as a group for
+voiceover.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -63,7 +63,7 @@ required. Labels for required fields are suffixed by a red asterisk.
 
 ### Disabled
 
-Set the `disabled` prop of `<Select.Input/>` to prevent users from interacting with it.
+Set the `disabled` prop of `Select.Input` to prevent users from interacting with it.
 
 <ExampleCodeBlock code={Disabled} />
 
@@ -74,49 +74,49 @@ To disable items and prevent them from being interactive, you must set two prope
 Set `nonInteractiveIds` to an array of `id`s that you want to disable interaction as well as
 searchability when typing into the `Select`.
 
-You will also need to set the aria attribute `aria-disabled` on the
-`<Select.Item aria-disabled={item.disabled ? item.disabled : undefined}/>` if the item is disabled,
-otherwise set the attribute to `undefined`. `disabled` in this case is a property on the item's
-object. This ensures that the item is styled as disabled.
+You will also need to set the aria attribute `aria-disabled` on the `Select.Item` if the item is
+disabled, otherwise set the attribute to `undefined`. `disabled` in this case is a property on the
+item's object. This ensures that the item is styled as disabled.
 
 <ExampleCodeBlock code={DisabledOptions} />
 
 ### With Icons
 
-Add `<Select.Item.Icon icon={yourIcon}/>` as a sub component of `<Select.Item/>` if you want to
-render an icon for each item. The `<Select.Item.Icon/>` takes in an `icon` prop of type
-`CanvasSystemIcon`. You can import icons from `@workday/canvas-system-icons-web`.
+Add `Select.Item.Icon` as a sub component of `Select.Item` if you want to render an icon for each
+item. The `Select.Item.Icon` takes in an `icon` prop of type `CanvasSystemIcon`. You can import
+icons from `@workday/canvas-system-icons-web`.
 
-If you want to render the selected item's icon in the `<Select.Input/>` add the `inputStartIcon` prop.
+If you want to render the selected item's icon in the `Select.Input` add the `inputStartIcon` prop.
 
 To get the current selected item's icon:
+
 - Register your `items` with the `useSelectModel`
 - Get current item by
   `const currentItem = model.navigation.getItem(model.state.selectedIds[0], model)`
 - Pass the value to the input in the following way:
   `<Select.Input inputStartIcon={currentItem.value.icon} id="form-field-input-id" />`
 
-**Notes: The `<Select.Input/>` will only render an icon when there is an item selected.**
+**Notes: The `Select.Input` will only render an icon when there is an item selected.**
 
 <ExampleCodeBlock code={WithIcons} />
 
 ### Grow
 
-Set the `grow` prop of the wrapping `FormField` to `true` to configure the `<Select.Input/>` to
-expand to the width of its container.
+Set the `grow` prop of the wrapping `FormField` to `true` to configure the `Select.Input` to expand
+to the width of its container.
 
 <ExampleCodeBlock code={Grow} />
 
 ### Scrollable
 
-Set `maxHeight` prop on the `<Select.Card>` to determine the height of the dropdown menu. This will
+Set `maxHeight` prop on the `Select.Card` to determine the height of the dropdown menu. This will
 allow the menu to scroll if there are enough items.
 
 <ExampleCodeBlock code={Scrollable} />
 
 ### Ref Forwarding
 
-`<Select.Input/>` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will
+`Select.Input` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will
 forward `ref` to its underlying `<input type="text" role="combobox">` element.
 
 <ExampleCodeBlock code={RefForwarding} />
@@ -200,12 +200,12 @@ Selected Value: {model.state.selectedIds[0]}
 Set the error prop of the wrapping `FormField` to `FormField.ErrorType.Alert` or
 `FormField.ErrorType.Error` to set the `<Select>` to the alert or error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility
-standards. You must set an `id` attribute on the `<Select.Input/>` element that matches the value of
+standards. You must set an `id` attribute on the `Select.Input` element that matches the value of
 `inputId` set on the `FormField` element. These attributes ensure that the alert message is
-associated to the `<Select>` and read out by voiceover.
+associated to the `Select` and read out by voiceover.
 
-**Note: The Select container component, `<Select>` must wrap the `FormField` element to ensure correct styling on the `<Select.Input/>`
-element.**
+**Note: The Select container component, `Select` must wrap the `FormField` element to ensure correct
+styling on the `Select.Input` element.**
 
 ```tsx
 <Select items={options}>