@workday/canvas-kit-docs 13.0.0-alpha.998-next.0 → 13.0.0

package/dist/mdx/react/menu/examples/NestedDynamic.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+
+type Item = {
+  type?: 'item';
+  id: string;
+  label: string;
+};
+type SubmenuItem = {
+  id: string;
+  label: string;
+  type: 'submenu';
+  children: (Item | SubmenuItem)[];
+};
+
+// This is a user-defined object. The structure uses `id` for the item identifier which is the
+// default key used by the collection system and therefore doesn't require a `getId` function to be
+// passed to the model. The `label` isn't the standard text value used by the collection system, so
+// a `getTextValue` function is required. The `type` and `children` aren't important at all to the
+// menu and are used in the template by the user-defined `renderItem` function.
+const items: (SubmenuItem | Item)[] = [
+  {id: 'first-item', label: 'First Item'},
+  {
+    id: 'second-item',
+    label: 'Second Item',
+    type: 'submenu',
+    children: [
+      {id: 'first-sub-item', label: 'First Sub Item'},
+      {
+        id: 'second-sub-item',
+        label: 'Second Sub Item',
+        type: 'submenu',
+        children: [
+          {id: 'first-sub-sub-item', label: 'First Sub Sub Item'},
+          {
+            id: 'second-sub-sub-item',
+            type: 'submenu',
+            label: 'Second Sub Sub Item',
+            children: [
+              {id: 'first-sub-sub-sub-item', label: 'First Sub Sub Sub Item'},
+              {
+                id: 'second-sub-sub-sub-item',
+                label: 'Second Sub Sub Sub Item',
+              },
+              {id: 'third-sub-sub-sub-item', label: 'Third Sub Sub Sub Item'},
+              {id: 'fourth-sub-sub-sub-item', label: 'Fourth Sub Sub Sub Item'},
+            ],
+          },
+          {id: 'third-sub-sub-item', label: 'Third Sub Sub Item'},
+          {id: 'fourth-sub-sub-item', label: 'Fourth Sub Sub Item'},
+        ],
+      },
+      {id: 'third-sub-item', label: 'Third Sub Item'},
+      {id: 'fourth-sub-item', label: 'Fourth Sub Item'},
+    ],
+  },
+  {id: 'third-item', label: 'Third Item'},
+  {id: 'fourth-item', label: 'Fourth Item'},
+];
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+
+  // defining this inline function allows use to recurse any nesting level defined by the `items`
+  // array.
+  function renderItem(item: SubmenuItem | Item) {
+    if (item.type === 'submenu') {
+      return (
+        <Menu.Submenu id={item.id} items={item.children}>
+          <Menu.Submenu.TargetItem>{item.label}</Menu.Submenu.TargetItem>
+          <Menu.Submenu.Popper>
+            <Menu.Submenu.Card>
+              <Menu.Submenu.List>{renderItem}</Menu.Submenu.List>
+            </Menu.Submenu.Card>
+          </Menu.Submenu.Popper>
+        </Menu.Submenu>
+      );
+    }
+    return <Menu.Item>{item.label}</Menu.Item>;
+  }
+
+  return (
+    <Menu
+      items={items}
+      id="first-menu"
+      getTextValue={item => item.label}
+      onSelect={data => {
+        setSelected(data.id);
+      }}
+    >
+      <Menu.Target>Open Menu</Menu.Target>
+      <Menu.Popper>
+        <Menu.Card>
+          <Menu.List>{renderItem}</Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" cs={{marginBlockStart: system.space.x4}}>
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/modal/examples/IframeTest.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/modal/examples/ModalWithPopup.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {

package/dist/mdx/react/modal/examples/StackedModals.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/pagination/examples/CustomRange.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

package/dist/mdx/react/pagination/examples/GoToForm.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

package/dist/mdx/react/pagination/examples/JumpControls.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,

package/dist/mdx/react/popup/examples/CloseOnTargetHiddenTest.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Popup,
   useCloseOnEscape,

package/dist/mdx/react/popup/examples/ComboboxWithinPopup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Combobox} from '@workday/canvas-kit-react/combobox';

package/dist/mdx/react/popup/examples/MultiplePopups.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {
   Popup,
   useCloseOnOutsideClick,

package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,

package/dist/mdx/react/popup/examples/PopupWithNonHidablePopup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,

package/dist/mdx/react/popup/examples/ReturnFocusTest.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
   useCloseOnOutsideClick,
@@ -33,9 +32,12 @@ export default () => {
             <FormField.Label>Name</FormField.Label>
             <FormField.Input as={TextInput} />
           </FormField>
-          <Popup.Target style={{marginBottom: 400, marginLeft: 410}} data-testid="target">
-            Open Popup
-          </Popup.Target>
+          <Flex style={{marginBottom: 400, marginLeft: 410}}>
+            <SecondaryButton id="return-focus-button-tabindex" tabIndex={-1}>
+              Button with TabIndex=-1
+            </SecondaryButton>
+            <Popup.Target data-testid="target">Open Popup</Popup.Target>
+          </Flex>
           <Popup.Popper>
             <Popup.Card>
               <Popup.CloseIcon aria-label="Close" />

package/dist/mdx/react/popup/examples/TooltipReturnFocus.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {

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

@@ -22,6 +22,7 @@ export default () => {
   const [value, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('change', event.currentTarget.value);
     setValue(event.target.value);
   };
 

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';

package/dist/mdx/react/table/Table.mdx

@@ -3,13 +3,14 @@ import Basic from './examples/Basic';
 import BasicWithHeading from './examples/BasicWithHeading';
 import FixedColumn from './examples/FixedColumn';
 import RightToLeft from './examples/RightToLeft';
+import BaseHtmlTable from './examples/BaseHtmlTable'
 
 # Canvas Kit Table
 
 `Table` is a simple styled compound component that renders a
 [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
 present information in a two-dimensional table comprised of rows and columns of cells containing
-data.
+data. `Table` is built off of `BaseTable` and is using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
 
 ## Installation
 
@@ -50,6 +51,18 @@ Users may add styles to the `Table.Header` to render a fixed column. The example
 
 <ExampleCodeBlock code={FixedColumn} />
 
+### Base Html Table Example
+
+If a user needs a standard HTML [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can use the `BaseTable` component. 
+
+<ExampleCodeBlock code={BaseHtmlTable} />
+
+### Which Component Should I Use?
+
+> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [Table](/components/containers/table/) component.
+
+> If a user __does not__ want [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [BaseTable](/components/text/heading/) component. 
+
 ### Advanced
 
 You can also find several advanced Table examples in our Storybook Examples section.

package/dist/mdx/react/table/examples/BaseHtmlTable.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {BaseTable} from '@workday/canvas-kit-react/table';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
+
+export default () => {
+  return (
+    <BaseTable>
+      <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>
+      <BaseTable.Head>
+        <BaseTable.Row>
+          <BaseTable.Header scope="col" cs={tableHeaderStyles}>
+            Drink
+          </BaseTable.Header>
+          <BaseTable.Header scope="col" cs={tableHeaderStyles}>
+            Size
+          </BaseTable.Header>
+        </BaseTable.Row>
+      </BaseTable.Head>
+      <BaseTable.Body>
+        <BaseTable.Row>
+          <BaseTable.Cell>Espresso</BaseTable.Cell>
+          <BaseTable.Cell>1 oz</BaseTable.Cell>
+        </BaseTable.Row>
+        <BaseTable.Row>
+          <BaseTable.Cell>Macchiato</BaseTable.Cell>
+          <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>
+        </BaseTable.Row>
+        <BaseTable.Row>
+          <BaseTable.Cell>Cortado</BaseTable.Cell>
+          <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>
+        </BaseTable.Row>
+        <BaseTable.Row></BaseTable.Row>
+        <BaseTable.Row>
+          <BaseTable.Cell>Cappuccino</BaseTable.Cell>
+          <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>
+        </BaseTable.Row>
+      </BaseTable.Body>
+    </BaseTable>
+  );
+};

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 import {Tabs} from '@workday/canvas-kit-react/tabs';

package/dist/mdx/react/tabs/examples/DisabledTab.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 import {Tabs} from '@workday/canvas-kit-react/tabs';

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {isCursor} from '@workday/canvas-kit-react/collection';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type Tab = {
@@ -32,14 +33,14 @@ export default () => {
    * @param id The id of the item that will be removed
    */
   const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
-    const index = model.state.items.findIndex(item => item.id === model.state.cursorId);
+    const index = model.state.items.findIndex(item => isCursor(model.state, item.id));
     const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
     const nextId = model.state.items[nextIndex].id;
     if (model.state.selectedIds[0] === id) {
       // We're removing the currently selected item. Select next item
       model.events.select({id: nextId});
     }
-    if (model.state.cursorId === id) {
+    if (isCursor(model.state, id)) {
       // We're removing the currently focused item. Focus next item
       model.events.goTo({id: nextId});
 

package/dist/mdx/react/tabs/examples/NamedTabs.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 import {Tabs} from '@workday/canvas-kit-react/tabs';

package/dist/mdx/react/tabs/examples/RightToLeft.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/text-input/examples/Basic.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx} from '@emotion/react';
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 

package/dist/mdx/react/toast/examples/ToastAlert.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
 import {colors} from '@workday/canvas-kit-react/tokens';

package/dist/mdx/react/toast/examples/ToastDialog.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,5 +1,5 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,6 +1,9 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';import Default from './examples/Default';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
 import DelayedTooltip from './examples/DelayedTooltip';
+import DescriptionType from './examples/DescriptionType';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -62,6 +65,14 @@ and focus events.
 
 ### Describing an Element
 
+<InformationHighlight variant={'caution'} className='sb-unstyled'>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading> Caution: Describe type has been deprecated </InformationHighlight.Heading>
+  <InformationHighlight.Body>
+     Assistive technology may ignore <StatusIndicator variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="describe"</StatusIndicator.Label></StatusIndicator> techniques based on verbosity settings. Please use <StatusIndicator cs={{textTransform: 'lowercase'}} variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="description"</StatusIndicator.Label></StatusIndicator> on Tooltips.
+  </InformationHighlight.Body>
+</InformationHighlight>
+
 The default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to
 provide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`
 to the target element. This will allow screen reader users to hear the name of the control that is
@@ -69,6 +80,25 @@ being focused and the ancillary tooltip information.
 
 <ExampleCodeBlock code={DescribeType} />
 
+### Description of an Element
+
+The default mode for a tooltip is to assign a name to the target element with an `aria-label`
+string. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.
+This will add `aria-description` strings to the target element instead. This variant is useful on
+text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible. 
+
+> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.
+>
+> ```jsx
+> // The text will be understood as: You must accept terms and conditions
+> <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
+>
+> // This will render a string including the html and will not be properly understood by voice over.
+> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
+> <Tool
+
+<ExampleCodeBlock code={DescriptionType} />
+
 ### Muted Tooltips
 
 If a tooltip does not need to be visible to screen reader users, or you handle accessibility of the

package/dist/mdx/react/tooltip/examples/Default.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {xIcon} from '@workday/canvas-system-icons-web';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';

package/dist/mdx/react/tooltip/examples/DescribeType.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 

package/dist/mdx/react/tooltip/examples/DescriptionType.tsx

@@ -0,0 +1,20 @@
+import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {chartConfigIcon} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  return (
+    <Flex gap="s">
+      <Tooltip type="description" title="Search using additional criteria">
+        <TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>
+      </Tooltip>
+      <Tooltip type="description" title="Create saved search">
+        <SecondaryButton>Save</SecondaryButton>
+      </Tooltip>
+      <Tooltip type="description" title="The service will restart after this action">
+        <DeleteButton>Delete</DeleteButton>
+      </Tooltip>
+    </Flex>
+  );
+};

package/dist/mdx/react/tooltip/examples/Muted.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 export default () => {

package/dist/mdx/react/tooltip/examples/Placements.tsx

@@ -2,6 +2,17 @@ import React from 'react';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {Card} from '@workday/canvas-kit-react/card';
 import {Placement} from '@workday/canvas-kit-react/popup';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const placementCardStyles = createStyles({
+  display: 'flex',
+  width: 100,
+  height: 100,
+  justifyContent: 'space-around',
+  alignItems: 'center',
+  padding: system.space.x1,
+});
 
 export default () => {
   const placementStyles = {
@@ -12,15 +23,7 @@ export default () => {
   const createPlacement = (placement: string, index) => {
     return (
       <Tooltip title="Add" placement={placement as Placement} key={index}>
-        <Card
-          style={{
-            display: 'flex',
-            width: 80,
-            height: 80,
-            justifyContent: 'space-around',
-            alignItems: 'center',
-          }}
-        >
+        <Card cs={placementCardStyles}>
           <Card.Body>{placement}</Card.Body>
         </Card>
       </Tooltip>
@@ -32,8 +35,8 @@ export default () => {
       style={{
         padding: 100, // give enough room for the tooltips to fit around their targets
         display: 'grid',
-        gridTemplateColumns: '80px 320px 80px',
-        gridTemplateRows: '80px 320px 80px',
+        gridTemplateColumns: '100px 320px 100px',
+        gridTemplateRows: '100px 320px 100px',
       }}
     >
       <div />

package/dist/mdx/style-props/examples/Background.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {
@@ -12,7 +11,7 @@ const baseStyles = {
 
 export default () => {
   return (
-    <>
+    <div>
       <Box backgroundColor="cinnamon300" {...baseStyles}>
         Cinnamon 300
       </Box>
@@ -22,6 +21,6 @@ export default () => {
       <Box backgroundColor="blueberry300" {...baseStyles}>
         Blueberry 300
       </Box>
-    </>
+    </div>
   );
 };

package/dist/mdx/style-props/examples/Border.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {
@@ -11,7 +10,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box borderRadius="m" border="solid 4px" borderColor="cinnamon300" {...baseStyles}>
       Cinnamon 300
     </Box>
@@ -21,5 +20,5 @@ export default () => (
     <Box borderRadius="m" border="solid 4px" borderColor="blueberry300" {...baseStyles}>
       Blueberry 300
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Color.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {
@@ -10,7 +9,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box backgroundColor="cinnamon300" color="blackPepper500" {...baseStyles}>
       Cinnamon 300
     </Box>
@@ -20,5 +19,5 @@ export default () => (
     <Box backgroundColor="blueberry300" color="blackPepper500" {...baseStyles}>
       Blueberry 300
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Depth.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {
@@ -11,7 +10,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box backgroundColor="cinnamon300" depth={1} {...baseStyles}>
       Depth 1
     </Box>
@@ -21,5 +20,5 @@ export default () => (
     <Box backgroundColor="blueberry300" depth={3} {...baseStyles}>
       Depth 3
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Flex.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {

package/dist/mdx/style-props/examples/FlexItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {