@workday/canvas-kit-docs 6.9.0-next.0 → 6.9.0-next.4

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

@@ -13,7 +13,7 @@ import {
   useTransferOnFullscreenExit,
   useTransferOnFullscreenEnter,
 } from '@workday/canvas-kit-react/popup';
-import {HStack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {HStack, Flex} from '@workday/canvas-kit-react/layout';
 import {useIsFullscreen} from '@workday/canvas-kit-react/common';
 import screenfull from 'screenfull';
 

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

@@ -8,6 +8,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const initialFocusRef = React.useRef(null);
@@ -29,11 +30,12 @@ export default () => {
           <Popup.Heading>Confirmation</Popup.Heading>
           <Popup.Body>
             <p id="popup-message">Your message has been sent!</p>
-
+          </Popup.Body>
+          <HStack spacing="s">
             <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
               OK
             </Popup.CloseButton>
-          </Popup.Body>
+          </HStack>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

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

@@ -6,7 +6,7 @@ import {
   useCloseOnEscape,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const popup1 = usePopupModel();

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

@@ -10,7 +10,7 @@ import {
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const popup1 = usePopupModel();
@@ -37,24 +37,24 @@ export default () => {
             <Popup.CloseIcon aria-label="Close" size="small" />
             <Popup.Body>
               <p>Contents of Popup 1</p>
-              <Popup model={popup2}>
-                <Popup.Target>Open Popup 2</Popup.Target>
-                <Popup.Popper>
-                  <Popup.Card aria-label="Popup 2">
-                    <Popup.CloseIcon aria-label="Close" size="small" />
-                    <Popup.Body>
-                      <p>Contents of Popup 2</p>
-                      <HStack spacing="s">
-                        <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
-                          Close Both (as)
-                        </Popup.CloseButton>
-                        <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
-                      </HStack>
-                    </Popup.Body>
-                  </Popup.Card>
-                </Popup.Popper>
-              </Popup>
             </Popup.Body>
+            <Popup model={popup2}>
+              <Popup.Target>Open Popup 2</Popup.Target>
+              <Popup.Popper>
+                <Popup.Card aria-label="Popup 2">
+                  <Popup.CloseIcon aria-label="Close" size="small" />
+                  <Popup.Body>
+                    <p>Contents of Popup 2</p>
+                  </Popup.Body>
+                  <HStack spacing="s">
+                    <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
+                      Close Both (as)
+                    </Popup.CloseButton>
+                    <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
+                  </HStack>
+                </Popup.Card>
+              </Popup.Popper>
+            </Popup>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

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

@@ -3,6 +3,7 @@ import React from 'react';
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   return (
@@ -11,10 +12,12 @@ export default () => {
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>
         <Popup.Body>
-          <p style={{marginBottom: '24px'}}>האם ברצונך למחוק פריט זה</p>
-          <DeleteButton style={{marginLeft: '16px'}}>לִמְחוֹק</DeleteButton>
-          <SecondaryButton>לְבַטֵל</SecondaryButton>
+          <p>האם ברצונך למחוק פריט זה</p>
         </Popup.Body>
+        <HStack spacing="s">
+          <DeleteButton>לִמְחוֹק</DeleteButton>
+          <SecondaryButton>לְבַטֵל</SecondaryButton>
+        </HStack>
       </Popup.Card>
     </CanvasProvider>
   );

package/dist/mdx/react/radio/Radio.mdx

@@ -5,6 +5,7 @@ import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
+import Inverse from './examples/Inverse';
 import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import NoValue from './examples/NoValue';
@@ -41,6 +42,12 @@ Set the `disabled` prop of the Radio Button to prevent users from interacting wi
 
 <ExampleCodeBlock code={Disabled} />
 
+### Inverse
+
+Radio with inverse variant
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Radio Buttons with No Values
 
 The `value` prop may be omitted from Radio Buttons, in which case the `value` prop of the Radio

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>('deep-dish');
+
+  const handleChange = (value: string | number) => {
+    setValue(value);
+  };
+
+  return (
+    <Box backgroundColor="blueberry400" padding="s">
+      <RadioGroup name="crust" onChange={handleChange} value={value}>
+        <Radio variant="inverse" label="Deep dish" value="deep-dish" />
+        <Radio variant="inverse" label="Thin" value="thin" />
+        <Radio variant="inverse" label="Gluten free" value="gluten-free" />
+        <Radio variant="inverse" label="Cauliflower" value="cauliflower" />
+      </RadioGroup>
+    </Box>
+  );
+};

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

@@ -19,8 +19,8 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Here is a basic example of a Segmented Control with multiple nested `IconButton`s. **Note:** while
-managing state using a unique `value` for each `IconButton` child is encouraged, you can also use
+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.
 
 <ExampleCodeBlock code={Basic} />

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

@@ -6,7 +6,6 @@ import {
   deviceTabletIcon,
   percentageIcon,
 } from '@workday/canvas-system-icons-web';
-import {IconButton} from '@workday/canvas-kit-react/button';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
@@ -17,20 +16,23 @@ export default () => {
 
   return (
     <SegmentedControl value={value} onChange={handleToggle}>
-      <IconButton
+      <SegmentedControl.Button
         icon={listViewIcon}
         value="list-view"
-        aria-label="List View"
-        onClick={e => console.log('Existing IconButton onClick callback')}
+        onClick={e => console.log('Existing TertiaryButton onClick callback')}
+        id="test"
       />
-      <IconButton
-        icon={worksheetsIcon}
-        value="table-view"
-        aria-label="Table View"
-        disabled={true}
+      <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"
       />
-      <IconButton icon={deviceTabletIcon} value="device-view" aria-label="Device View" />
-      <IconButton icon={percentageIcon} value="percent-view" aria-label="Percent View" />
     </SegmentedControl>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {Box, Flex} from '@workday/canvas-kit-labs-react';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {

package/dist/mdx/react/skeleton/examples/Color.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {Box} from '@workday/canvas-kit-labs-react/common';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import {jsx, keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 
 import {
   Card,
@@ -9,13 +8,15 @@ import {
   SecondaryButton,
   SystemIconCircle,
   TextInput,
+  styled,
 } from '@workday/canvas-kit-react';
 
-import {Box, Flex} from '@workday/canvas-kit-labs-react';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 import {borderRadius, space, type} from '@workday/canvas-kit-react/tokens';
 import {patternIcon} from '@workday/canvas-system-icons-web';
+import {StyledType} from '@workday/canvas-kit-react/common';
 
 const fadeOut = keyframes`
   from {
@@ -27,6 +28,10 @@ const fadeOut = keyframes`
   }
 `;
 
+const StyledSimulation = styled(Box)<StyledType>({
+  pointerEvents: 'none',
+});
+
 export default () => {
   const [loading, setLoading] = React.useState(true);
   const [loadTime, setLoadTime] = React.useState('3000');
@@ -96,16 +101,12 @@ export default () => {
               </Box>
             )}
 
-            <Box
+            <StyledSimulation
               position="absolute"
               top={0}
               left={0}
               width="100%"
-              css={{
-                pointerEvents: 'none',
-                animation: !loading ? `${fadeOut} 150ms ease-out` : undefined,
-                animationFillMode: !loading ? 'forwards' : undefined,
-              }}
+              animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}
             >
               <Skeleton>
                 <Flex alignItems="center">
@@ -120,7 +121,7 @@ export default () => {
                 </Flex>
                 <Skeleton.Text lineCount={3} />
               </Skeleton>
-            </Box>
+            </StyledSimulation>
           </Box>
         </Card.Body>
       </Card>

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -3,6 +3,7 @@ import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
+import MaxWidth from './examples/MaxWidth';
 
 
 # Canvas Kit Status Indicator
@@ -54,6 +55,17 @@ label.
 
 <ExampleCodeBlock code={Icon} />
 
+### Max Width
+
+By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
+exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.
+
+Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
+truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
+when you do this, you should make the tooltip focusable with `tabIndex`.
+
+<ExampleCodeBlock code={MaxWidth} />
+
 ## Props
 
 Undocumented props are spread to the outermost element rendered by Status Indicator.

package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+const StatusIndicators = styled('div')({
+  '& > *': {
+    margin: space.xxs,
+  },
+});
+
+export default () => {
+  return (
+    <StatusIndicators>
+      <StatusIndicator
+        label="Longer Than Normal Ellipsized Status"
+        type={StatusIndicator.Type.Blue}
+        maxWidth={250}
+      />
+      <OverflowTooltip>
+        <StatusIndicator
+          label="Overflow Tooltip On Hover/Focus Status"
+          type={StatusIndicator.Type.Green}
+          tabIndex={0}
+        />
+      </OverflowTooltip>
+    </StatusIndicators>
+  );
+};

package/dist/mdx/react/tabs/Tabs.mdx

@@ -75,9 +75,9 @@ trigger an event to change the active tab.
 
 ### Named Tabs
 
-`Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
-`Tabs.Item` and `Tabs.Panel` subcomponents.
+`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the
+`onActivate` callback. This example is identical to the Basic Example, but with tabs named using
+`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.
 
 <ExampleCodeBlock code={NamedTabs} />
 
@@ -95,9 +95,7 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 ### Tab Icons
 
-Tabs can have icons. You must set `hasIcon` on the `Tabs.Item` and use the `Icon` and `Text`
-subcomponent. The `hasIcon` changes the `Tabs.Item` to change where overflow detection is from the
-`Tabs.Item` element to the `Tabs.Item.Text` element.
+Tabs can have icons. Use the `Icon` and `Text` subcomponents.
 
 <ExampleCodeBlock code={Icons} />
 
@@ -139,17 +137,15 @@ array.
 its subcomponents using React context. It does not represent a real element.
 
 ```tsx
-<Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}>
-  {/* Child components */}
-</Tabs>
+<Tabs onSelect={data => console.log('Activated tab', data.id)}>{/* Child components */}</Tabs>
 ```
 
 Alternatively, you may pass in a model using the hoisted model pattern.
 
 ```tsx
 const model = useTabsModel({
-  onActivate({data}) {
-    console.log('Activated Tab', data.tab);
+  onSelect(data) {
+    console.log('Activated Tab', data.id);
   },
 });
 
@@ -184,11 +180,11 @@ Undocumented props are spread to the underlying `<div>` element.
 #### Usage
 
 `Tabs.Item` is a `<button role="tab">` element. Each `Tabs.Item` is associated with a `Tabs.Panel`
-either by a `name` attribute or by the position in the list. If a `name` is provided, it must match
-the name passed to the corresponding `Tabs.Panel` component.
+either by a `data-id` attribute or by the position in the list. If a `data-id` is provided, it must
+match the `data-id` passed to the corresponding `Tabs.Panel` component.
 
 ```tsx
-<Tabs.Item name="first">First Tab</Tabs.Item>
+<Tabs.Item data-id="first">First Tab</Tabs.Item>
 ```
 
 #### Props
@@ -202,11 +198,12 @@ Undocumented props are spread to the underlying `button` element.
 #### Usage
 
 `Tabs.Panel` is a `<div role="tabpanel">` element. It is focusable by default. Each `Tabs.Panel` is
-controlled by a `Tabs.Item` either by a `name` attribute or by the position in the list. If a `name`
-is provided, it must match the name passed to the corresponding `Tabs.Item` component.
+controlled by a `Tabs.Item` either by a `data-id` attribute or by the position in the list. If a
+`data-id` is provided, it must match the `data-id` passed to the corresponding `Tabs.Item`
+component.
 
 ```tsx
-<Tabs.Panel name="first">{/* Contents of the tab panel */}</Tabs.Panel>
+<Tabs.Panel data-id="first">{/* Contents of the tab panel */}</Tabs.Panel>
 ```
 
 #### Props

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

@@ -1,8 +1,6 @@
 import React from 'react';
-import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
-import {SelectionModel} from '../../lib/selection';
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type Tab = {
   tab: string;
@@ -19,7 +17,7 @@ export default () => {
   const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
     items: tabs,
-    shouldSelect: ({data}) => data.id !== 'add',
+    shouldSelect: data => data.id !== 'add',
   });
 
   // A ref of the model for the render functions to work around the caching done to lists
@@ -33,9 +31,8 @@ export default () => {
    * * **Item is selected**: Selection will be moved to the next item in the list
    * @param id The id of the item that will be removed
    */
-  const removeItem = <T extends unknown>(id: string, model: SelectionModel<T>) => {
+  const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
     const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
-    console.log('index', index, id, model.state.cursorId, model.state.items);
     const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
     const nextId = model.getId(model.state.items[nextIndex]);
     if (model.state.selectedIds[0] === id) {
@@ -80,7 +77,7 @@ export default () => {
     <Tabs model={model}>
       <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
         {(item: Tab) => (
-          <Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
+          <Tabs.Item onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
             {item.tab}
           </Tabs.Item>
         )}
@@ -88,16 +85,12 @@ export default () => {
       <Tabs.Menu.Popper>
         <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
           <Tabs.Menu.List>
-            {(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
+            {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}
           </Tabs.Menu.List>
         </Tabs.Menu.Card>
       </Tabs.Menu.Popper>
       <Tabs.Panels>
-        {(item: Tab) => (
-          <Tabs.Panel marginTop="m" name={item.id}>
-            Contents of {item.tab}
-          </Tabs.Panel>
-        )}
+        {(item: Tab) => <Tabs.Panel marginTop="m">Contents of {item.tab}</Tabs.Panel>}
       </Tabs.Panels>
     </Tabs>
   );

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

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onSelect({data, prevState}) {
-      console.log('Selected Tab', data, prevState);
+    onSelect(data, prevState) {
+      console.log('Selected Tab', data.id, prevState);
     },
   });
 
@@ -15,14 +15,14 @@ export default () => {
     <>
       <Tabs model={model}>
         <Tabs.List>
-          <Tabs.Item name="first">First Tab</Tabs.Item>
-          <Tabs.Item name="second">Second Tab</Tabs.Item>
-          <Tabs.Item name="third">Third Tab</Tabs.Item>
+          <Tabs.Item data-id="first">First Tab</Tabs.Item>
+          <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+          <Tabs.Item data-id="third">Third Tab</Tabs.Item>
         </Tabs.List>
         <div style={{marginTop: space.m}}>
-          <Tabs.Panel name="first">Contents of First Tab</Tabs.Panel>
-          <Tabs.Panel name="second">Contents of Second Tab</Tabs.Panel>
-          <Tabs.Panel name="third">Contents of Third Tab</Tabs.Panel>
+          <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+          <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+          <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
         </div>
       </Tabs>
       <SecondaryButton

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

@@ -8,19 +8,19 @@ export default () => {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={starIcon} />
           <Tabs.Item.Text>First Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={searchIcon} />
           <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={selectIcon} />
           <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
         </Tabs.Item>
-        <Tabs.Item hasIcon>
+        <Tabs.Item>
           <Tabs.Item.Icon icon={shareIcon} />
           <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
         </Tabs.Item>

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

@@ -7,18 +7,18 @@ export default () => {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Item name="first">First Tab</Tabs.Item>
-        <Tabs.Item name="second">Second Tab</Tabs.Item>
-        <Tabs.Item name="third">Third Tab</Tabs.Item>
-        <Tabs.Item name="fourth">Fourth Tab</Tabs.Item>
-        <Tabs.Item name="fifth">Fifth Tab</Tabs.Item>
+        <Tabs.Item data-id="first">First Tab</Tabs.Item>
+        <Tabs.Item data-id="second">Second Tab</Tabs.Item>
+        <Tabs.Item data-id="third">Third Tab</Tabs.Item>
+        <Tabs.Item data-id="fourth">Fourth Tab</Tabs.Item>
+        <Tabs.Item data-id="fifth">Fifth Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>
-        <Tabs.Panel name="first">Contents of First Tab</Tabs.Panel>
-        <Tabs.Panel name="second">Contents of Second Tab</Tabs.Panel>
-        <Tabs.Panel name="third">Contents of Third Tab</Tabs.Panel>
-        <Tabs.Panel name="fourth">Contents of Fourth Tab</Tabs.Panel>
-        <Tabs.Panel name="fifth">Contents of Fifth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fourth">Contents of Fourth Tab</Tabs.Panel>
+        <Tabs.Panel data-id="fifth">Contents of Fifth Tab</Tabs.Panel>
       </div>
     </Tabs>
   );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 
 type MyTabItem = {
@@ -28,21 +28,17 @@ export default () => {
     <div style={{width: containerWidth}}>
       <Tabs model={model}>
         <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
-          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+          {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}
         </Tabs.List>
         <Tabs.Menu.Popper>
           <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
             <Tabs.Menu.List>
-              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+              {(item: MyTabItem) => <Tabs.Menu.Item>{item.text}</Tabs.Menu.Item>}
             </Tabs.Menu.List>
           </Tabs.Menu.Card>
         </Tabs.Menu.Popper>
         <Tabs.Panels>
-          {(item: MyTabItem) => (
-            <Tabs.Panel marginTop="m" name={item.id}>
-              {item.contents}
-            </Tabs.Panel>
-          )}
+          {(item: MyTabItem) => <Tabs.Panel marginTop="m">{item.contents}</Tabs.Panel>}
         </Tabs.Panels>
       </Tabs>
       <hr />

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

@@ -23,13 +23,13 @@ export default () => {
   return (
     <Tabs model={model}>
       <Tabs.List>
-        <Tabs.Item name="first" aria-controls="mytab-panel">
+        <Tabs.Item data-id="first" aria-controls="mytab-panel">
           First Tab
         </Tabs.Item>
-        <Tabs.Item name="second" aria-controls="mytab-panel">
+        <Tabs.Item data-id="second" aria-controls="mytab-panel">
           Second Tab
         </Tabs.Item>
-        <Tabs.Item name="third" aria-controls="mytab-panel">
+        <Tabs.Item data-id="third" aria-controls="mytab-panel">
           Third Tab
         </Tabs.Item>
       </Tabs.List>

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

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import {css, 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';