@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/react/radio/examples/Caution.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');

package/dist/mdx/react/radio/examples/Disabled.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');

package/dist/mdx/react/radio/examples/Error.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');

package/dist/mdx/react/radio/examples/Inverse.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {Box} from '@workday/canvas-kit-react/layout';
+
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');

package/dist/mdx/react/radio/examples/LabelPosition.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');

package/dist/mdx/react/radio/examples/NoValue.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {Subtext} from '@workday/canvas-kit-react/text';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('');

package/dist/mdx/react/radio/examples/RefForwarding.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');

package/dist/mdx/react/radio/examples/Required.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>();

package/dist/mdx/react/segmented-control/SegmentedControl.mdx

@@ -5,25 +5,25 @@ import {
   Specifications,
 } from '@workday/canvas-kit-docs';
 
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 import Basic from './examples/Basic';
+import Disabled from './examples/Disabled';
+import TextAndIcon from './examples/TextAndIcon';
+import TextOnly from './examples/TextOnly';
+import Sizes from './examples/Sizes';
+import Vertical from './examples/Vertical';
+import RTL from './examples/RTL';
+import Dynamic from './examples/Dynamic';
 
-# Canvas Kit Segmented Control <StorybookStatusIndicator type="deprecated" />
 
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `SegmentedControl` in Main has been deprecated and will be removed in a future major version.
-    Please use `Segmented Control` in Preview instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs">
-    Segmented Control Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
+# Canvas Kit Segmented Control
 
-A linear set of two or more segments, each of which functions as a mutually exclusive button. This
-is a [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
+Segmented Control is a
+[compound component](/getting-started/for-developers/resources/compound-components/) that represents
+a linear group of multiple buttons allowing the selection of a specific value.
+
+[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
 
 ## Installation
 
@@ -35,12 +35,113 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Here is a basic example of a Segmented Control with multiple nested `Button`s. **Note:** while
-managing state using a unique `value` for each `Button` child is encouraged, you can also use
-indexes and omit the `value` field. It is strongly recommended to not mix these two methods.
+`SegmentedControl` includes a container `SegmentedControl` component and the following
+subcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.
+
+The example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered
+using a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only
+one button can be active at a time.
 
 <ExampleCodeBlock code={Basic} />
 
+We **strongly** discourage including more than four buttons in a single `SegmentedControl`.
+
+### Accessibility
+
+Our `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,
+wrapped inside of a `<div>` with an explicit ARIA `role="group"`. This is equivalent to an HTML
+`<fieldset>` element, and useful for screen readers to describe the relationship between the
+buttons.
+
+- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current
+  state to screen readers.
+- Providing your own `aria-label` string to `SegmentedControl.List` is recommended for describing the
+  purpose of the component.
+
+#### Screen Reader Experience
+
+When users interact with a `SegmentedControl` using screen readers:
+
+- The group context is announced (e.g., "View options, group" when using
+  `aria-label="View options"`)
+- Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
+  "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
+- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
+  state
+- When a button is activated, screen readers should announce the new state
+
+Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about
+accessibility of these components.
+
+### Variations
+
+`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`
+components have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.
+
+All `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same
+variation.
+
+#### Icon-Only
+
+To render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do
+not provide it with text content. Refer to the [basic example](#basic-example) above for an instance
+of an icon-only `SegmentedControl`.
+
+The icon-only variation is the only variation which supports a vertical orientation in addition to
+the default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`
+to configure the component to render vertically.
+
+<ExampleCodeBlock code={Vertical} />
+
+#### Text-Only
+
+To render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and
+provide it with text content.
+
+<ExampleCodeBlock code={TextOnly} />
+
+#### Text-and-Icon
+
+To render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and
+provide it with text content.
+
+<ExampleCodeBlock code={TextAndIcon} />
+
+### Sizes
+
+`SegmentedControl` accepts a `size` prop which supports the following values:
+
+- `small`
+- `medium` (Default)
+- `large`
+
+<ExampleCodeBlock code={Sizes} />
+
+### Disabled
+
+Set the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Right-to-Left (RTL)
+
+`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RTL} />
+
+### Dynamic Items
+
+`SegmentedControl` supports a
+[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
+of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
+the `model` state and provide a render function to display the items.
+
+<ExampleCodeBlock code={Dynamic} />
+
 ## Component API
 
-<SymbolDoc name="SegmentedControl" fileName="/react/" />
+<SymbolDoc name="SegmentedControl" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="SegmentedControl.spec.ts" name="SegmentedControl" />

package/dist/mdx/react/segmented-control/examples/Basic.tsx

@@ -1,38 +1,42 @@
-import * as React from 'react';
+import React from 'react';
 
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {BodyText} from '@workday/canvas-kit-react/text';
 import {
+  gridIcon,
+  listDetailIcon,
   listViewIcon,
-  worksheetsIcon,
-  deviceTabletIcon,
-  percentageIcon,
+  pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
-  const [value, setValue] = React.useState<string | number>();
-  const handleToggle = (selectedValue: string | number) => {
-    setValue(selectedValue);
-  };
+  const [viewType, setViewType] = React.useState('table');
 
   return (
-    <SegmentedControl value={value} onChange={handleToggle}>
-      <SegmentedControl.Button
-        icon={listViewIcon}
-        value="list-view"
-        onClick={e => console.log('Existing TertiaryButton onClick callback')}
-        id="test"
-      />
-      <SegmentedControl.Button icon={worksheetsIcon} value="table-view" disabled={true} />
-      <SegmentedControl.Button
-        icon={deviceTabletIcon}
-        value="device-view"
-        aria-label="Device View"
-      />
-      <SegmentedControl.Button
-        icon={percentageIcon}
-        value="percent-view"
-        aria-label="Percent View"
-      />
-    </SegmentedControl>
+    <>
+      <SegmentedControl initialValue={viewType} onSelect={data => setViewType(data.id)}>
+        <SegmentedControl.List aria-label="View type">
+          <SegmentedControl.Item data-id="table" icon={gridIcon} tooltipProps={{title: 'Table'}} />
+          <SegmentedControl.Item
+            data-id="list-view"
+            icon={listViewIcon}
+            tooltipProps={{title: 'List'}}
+          />
+          <SegmentedControl.Item
+            data-id="list-detail"
+            icon={listDetailIcon}
+            tooltipProps={{title: 'Detail'}}
+          />
+          <SegmentedControl.Item
+            data-id="diagrams"
+            icon={pieChartIcon}
+            tooltipProps={{title: 'Diagram'}}
+          />
+        </SegmentedControl.List>
+      </SegmentedControl>
+      <BodyText size="small" marginTop="s">
+        Selected: {viewType}
+      </BodyText>
+    </>
   );
 };

package/dist/mdx/{preview-react → react}/segmented-control/examples/Disabled.tsx

@@ -1,8 +1,8 @@
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
-  listViewIcon,
   listDetailIcon,
+  listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
 

package/dist/mdx/{preview-react → react}/segmented-control/examples/Dynamic.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+
 import {
   SegmentedControl,
   useSegmentedControlModel,
-} from '@workday/canvas-kit-preview-react/segmented-control';
+} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
-  listViewIcon,
   listDetailIcon,
+  listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
 

package/dist/mdx/{preview-react → react}/segmented-control/examples/RTL.tsx

@@ -1,14 +1,14 @@
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
-  listViewIcon,
   listDetailIcon,
+  listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 
 export default () => (
-  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+  <CanvasProvider dir="rtl">
     <SegmentedControl initialValue="list-detail">
       <SegmentedControl.List aria-label="View type">
         <SegmentedControl.Item data-id="table" icon={gridIcon}>

package/dist/mdx/{preview-react → react}/segmented-control/examples/Sizes.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import {Box} from '@workday/canvas-kit-react/layout';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {BodyText} from '@workday/canvas-kit-react/text';
 import {
   gridIcon,
-  listViewIcon,
   listDetailIcon,
+  listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
-import {BodyText} from '@workday/canvas-kit-react/text';
 
 export default () => (
   <>

package/dist/mdx/{preview-react → react}/segmented-control/examples/TextAndIcon.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {gridIcon, listViewIcon, pieChartIcon} from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 
 export default () => (
   <SegmentedControl>

package/dist/mdx/{preview-react → react}/segmented-control/examples/TextOnly.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
   <SegmentedControl>

package/dist/mdx/{preview-react → react}/segmented-control/examples/Vertical.tsx

@@ -1,8 +1,8 @@
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
-  listViewIcon,
   listDetailIcon,
+  listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
 

package/dist/mdx/react/select/Select.mdx

@@ -1,26 +1,27 @@
 import {
   ExampleCodeBlock,
-  InformationHighlight,
-  SymbolDoc,
   Specifications,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
-import Caution from './examples/Caution';
+import {Table} from '@workday/canvas-kit-react/table';
 import Basic from './examples/Basic';
+import Caution from './examples/Caution';
 import Complex from './examples/Complex';
 import Controlled from './examples/Controlled';
 import Disabled from './examples/Disabled';
 import DisabledOptions from './examples/DisabledOption';
 import Error from './examples/Error';
+import FetchingDynamicItems from './examples/FetchingDynamicItems';
+import GroupedItems from './examples/GroupedItems';
 import Grow from './examples/Grow';
+import HoistedModel from './examples/HoistedModel';
+import InitialSelectedItem from './examples/InitialSelectedItem';
 import LabelPosition from './examples/LabelPosition';
-import WithIcons from './examples/WithIcons';
-import Required from './examples/Required';
 import MenuHeight from './examples/MenuHeight';
-import HoistedModel from './examples/HoistedModel';
-import RefForwarding from './examples/RefForwarding';
-import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
+import RefForwarding from './examples/RefForwarding';
+import Required from './examples/Required';
+import WithIcons from './examples/WithIcons';
 
 
 # Canvas Kit Select
@@ -40,11 +41,11 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Select` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where you
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you
 pass an array of items via the `items` prop and provide a render function to display the items. The
 items may be provided as an
-[array of strings](/getting-started/for-developers/resources/collection-api/#array-of-strings) or an
-[array of objects](/getting-started/for-developers/resources/collection-api/#array-of-objects).
+[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an
+[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).
 
 `Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
 `Select` wraps the `FormField` element and the `FormField` element wraps the children of `Select` to
@@ -74,7 +75,7 @@ value of the `Select`.
 By default, `Select` will create and use its own model internally. Alternatively, you may configure
 your own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is
 referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Select` component.
 
 In this example, we set up external observation of the model state and create an external button to
@@ -166,12 +167,11 @@ forward `ref` to its underlying `<input type="text" role="combobox">` element.
 
 ### Error States
 
-Set the `error` prop of the wrapping `FormField` to `"caution"` or
-`"error"` to set the `Select` to the caution 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
-`inputId` set on the `FormField` element. These attributes ensure that the caution message is
-associated to the `Select` and read out by voiceover.
+Set the `error` prop of the wrapping `FormField` to `"caution"` or `"error"` to set the `Select` to
+the caution 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 `inputId` set on the `FormField` element. These
+attributes ensure that the caution message is associated to the `Select` and read out by voiceover.
 
 **Note: The Select container component, `Select`, must wrap `FormField` to ensure `Select.Input` is
 styled correctly.**
@@ -301,6 +301,12 @@ prop as well as the `value` DOM property and will update the model accordingly.
   </Select>
   ```
 
+### Grouped Items
+
+In order to group items, you have to use the static API in combination of the `Menu.Group` component.
+
+<ExampleCodeBlock code={GroupedItems} />
+
 ### Custom Styles
 
 Select and its subcomponents support custom styling via the `cs` prop. For more information, check
@@ -313,4 +319,4 @@ our
 
 ## Specifications
 
-<Specifications file="Select.spec.ts" name="Select" />
+<Specifications file="./cypress/component/Select.spec.tsx" name="Select" />

package/dist/mdx/react/select/examples/Basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({

package/dist/mdx/react/select/examples/Caution.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({

package/dist/mdx/react/select/examples/Complex.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({

package/dist/mdx/react/select/examples/Controlled.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 
 const parentContainerStyles = createStyles({
   flexDirection: 'column',

package/dist/mdx/react/select/examples/Disabled.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({

package/dist/mdx/react/select/examples/DisabledOption.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({

package/dist/mdx/react/select/examples/Error.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({

package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
-import {Flex} from '@workday/canvas-kit-react/layout';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const parentContainerStyles = createStyles({