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

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

@@ -1,16 +1,43 @@
 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 {Flex} from '@workday/canvas-kit-react/layout';
 import {
+  Popup,
   useCloseOnEscape,
   useCloseOnOutsideClick,
-  Popup,
-  usePopupModel,
+  useFocusRedirect,
   useInitialFocus,
+  usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-export default () => {
+const cardStyles = createStyles({
+  width: px2rem(400),
+});
+
+const bodyStyles = createStyles({
+  marginBlock: '0',
+});
+
+const flexStyles = createStyles({
+  gap: system.gap.md,
+  padding: system.padding.xs,
+});
+
+const columnStyles = createStyles({
+  gap: system.gap.md,
+  alignItems: 'flex-start',
+});
+
+const InitialFocusOnButton = () => {
+  const messageId = useUniqueId();
   const initialFocusRef = React.useRef(null);
   const model = usePopupModel({
     initialFocusRef,
@@ -20,21 +47,21 @@ export default () => {
   useCloseOnEscape(model);
   useInitialFocus(model);
   useReturnFocus(model);
+  useFocusRedirect(model);
 
   return (
     <Popup model={model}>
-      <Popup.Target>Send Message</Popup.Target>
+      <Popup.Target>Initial focus: OK button</Popup.Target>
       <Popup.Popper placement={'bottom'}>
-        <Popup.Card width={400}>
-          <Popup.CloseIcon aria-label="Close" />
+        <Popup.Card cs={cardStyles} aria-describedby={messageId}>
           <Popup.Heading>Confirmation</Popup.Heading>
           <Popup.Body>
-            <Box as="p" marginY="zero" id="popup-message">
+            <Text cs={bodyStyles} id={messageId}>
               Your message has been sent!
-            </Box>
+            </Text>
           </Popup.Body>
-          <Flex gap="s" padding="xxs">
-            <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
+          <Flex cs={flexStyles}>
+            <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>
               OK
             </Popup.CloseButton>
           </Flex>
@@ -43,3 +70,80 @@ export default () => {
     </Popup>
   );
 };
+
+const InitialFocusOnTextInput = () => {
+  const descriptionId = useUniqueId();
+  const initialFocusRef = React.useRef<HTMLInputElement>(null);
+  const model = usePopupModel({
+    initialFocusRef,
+  });
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusRedirect(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target>Initial focus: text input</Popup.Target>
+      <Popup.Popper placement={'bottom'}>
+        <Popup.Card cs={cardStyles} aria-describedby={descriptionId}>
+          <Popup.Heading>Quick reply</Popup.Heading>
+          <Popup.Body>
+            <FormField>
+              <FormField.Label>Message</FormField.Label>
+              <FormField.Input as={TextInput} ref={initialFocusRef} />
+            </FormField>
+          </Popup.Body>
+          <Flex cs={flexStyles}>
+            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>
+            <Popup.CloseButton>Cancel</Popup.CloseButton>
+          </Flex>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+const InitialFocusOnHeading = () => {
+  const headingFocusRef = React.useRef<HTMLHeadingElement>(null);
+  const model = usePopupModel({
+    initialFocusRef: headingFocusRef,
+  });
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusRedirect(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target>Initial focus: heading</Popup.Target>
+      <Popup.Popper placement={'bottom'}>
+        <Popup.Card cs={cardStyles}>
+          <Popup.Heading ref={headingFocusRef} tabIndex={-1}>
+            Important notice
+          </Popup.Heading>
+          <Popup.Body>
+            <Text cs={bodyStyles}>Review the summary below before continuing.</Text>
+          </Popup.Body>
+          <Flex cs={flexStyles}>
+            <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>
+          </Flex>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+export default () => {
+  return (
+    <Flex cs={columnStyles}>
+      <InitialFocusOnButton />
+      <InitialFocusOnTextInput />
+      <InitialFocusOnHeading />
+    </Flex>
+  );
+};

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

@@ -0,0 +1,126 @@
+import React from 'react';
+
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {
+  Popup,
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useFocusRedirect,
+  useInitialFocus,
+  usePopupModel,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const headingStyles = createStyles({
+  marginTop: '0',
+});
+
+const cardStyles = createStyles({
+  width: px2rem(320),
+});
+
+const flexStyles = createStyles({
+  gap: system.gap.md,
+  padding: system.padding.xs,
+});
+
+const clipContainerStyles = createStyles({
+  padding: system.padding.md,
+  border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+  height: px2rem(200),
+  position: 'relative',
+  overflow: 'clip',
+});
+
+const visibleContainerStyles = createStyles({
+  padding: system.padding.md,
+  border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+  height: px2rem(200),
+  position: 'relative',
+  overflow: 'visible',
+});
+
+const scrollContainerStyles = createStyles({
+  padding: system.padding.md,
+  border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+  height: px2rem(200),
+  position: 'relative',
+  overflow: 'scroll',
+});
+
+const comparisonLayoutStyles = createStyles({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+  gap: system.gap.lg,
+  marginBottom: system.gap.lg,
+});
+
+function SingleInlinePopup({
+  overflowLabel,
+  containerStyles,
+}: {
+  overflowLabel: string;
+  containerStyles: string;
+}) {
+  const initialFocusRef = React.useRef(null);
+  const model = usePopupModel({
+    initialFocusRef,
+  });
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusRedirect(model);
+
+  return (
+    <Box cs={containerStyles}>
+      <Heading size="small" as="h4" cs={headingStyles}>
+        {overflowLabel}
+      </Heading>
+      <Popup model={model}>
+        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
+        <Popup.Popper placement="top" portal={false}>
+          <Popup.Card cs={cardStyles}>
+            <Popup.Heading>Delete Item</Popup.Heading>
+            <Popup.Body>
+              <Box as="p">Are you sure you'd like to delete the item titled 'My Item'?</Box>
+            </Popup.Body>
+            <Flex cs={flexStyles}>
+              <Popup.CloseButton ref={initialFocusRef}>Cancel</Popup.CloseButton>
+              <Popup.CloseButton as={DeleteButton}>Delete</Popup.CloseButton>
+            </Flex>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+    </Box>
+  );
+}
+
+export default () => {
+  return (
+    <>
+      <Flex cs={comparisonLayoutStyles}>
+        <SingleInlinePopup overflowLabel="overflow: clip" containerStyles={clipContainerStyles} />
+        <SingleInlinePopup
+          overflowLabel="overflow: scroll"
+          containerStyles={scrollContainerStyles}
+        />
+        <SingleInlinePopup
+          overflowLabel="overflow: visible"
+          containerStyles={visibleContainerStyles}
+        />
+      </Flex>
+      <p>
+        With <code>overflow: visible</code>, the popup can extend past the dashed border. With{' '}
+        <code>overflow: scroll</code> (or <code>hidden</code> / <code>clip</code>), the popup is
+        constrained and any overflow is clipped. The container uses <code>position: relative</code>{' '}
+        so it establishes a containing block for the positioned popup.
+      </p>
+    </>
+  );
+};

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
 import {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
 import {
   Popup,
-  useCloseOnOutsideClick,
+  useBringToTopOnClick,
   useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useInitialFocus,
   usePopupModel,
   usePopupStack,
-  useBringToTopOnClick,
-  useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 interface WindowProps {
   top: number;

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

@@ -1,42 +1,54 @@
-import {
-  Popup,
-  useCloseOnOutsideClick,
-  useCloseOnEscape,
-  usePopupModel,
-} from '@workday/canvas-kit-react/popup';
+import {useDialogModel} from '@workday/canvas-kit-react/dialog';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {useModalModel} from '@workday/canvas-kit-react/modal';
+import {Popup} from '@workday/canvas-kit-react/popup';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-export default () => {
-  const popup1 = usePopupModel();
-  const popup2 = usePopupModel();
+const flexStyles = createStyles({
+  gap: system.gap.md,
+});
 
-  useCloseOnOutsideClick(popup1);
-  useCloseOnEscape(popup1);
+const popupStyles = createStyles({
+  width: px2rem(400),
+});
 
-  useCloseOnOutsideClick(popup2);
-  useCloseOnEscape(popup2);
+export default () => {
+  const dialogModel = useDialogModel();
+  const modalModel = useModalModel();
 
   return (
-    <Flex gap="s">
-      <Popup model={popup1}>
-        <Popup.Target>Open Popup 1</Popup.Target>
+    <Flex cs={flexStyles}>
+      <Popup model={dialogModel}>
+        <Popup.Target>Focus Redirect Popup</Popup.Target>
         <Popup.Popper>
-          <Popup.Card aria-label="Popup 1">
+          <Popup.Card cs={popupStyles}>
             <Popup.CloseIcon aria-label="Close" size="small" />
+            <Popup.Heading>Focus Redirect Popup</Popup.Heading>
             <Popup.Body>
-              <p>Contents of Popup 1</p>
+              <p>
+                This popup uses the dialog model and will allow keyboard focus to escape when users
+                press Tab or Shift + Tab.
+              </p>
             </Popup.Body>
           </Popup.Card>
         </Popup.Popper>
       </Popup>
-      <Popup model={popup2}>
-        <Popup.Target>Open Popup 2</Popup.Target>
+      <Popup model={modalModel}>
+        <Popup.Target>Focus Trap Popup</Popup.Target>
         <Popup.Popper>
-          <Popup.Card aria-label="Popup 2">
+          <Popup.Card cs={popupStyles}>
             <Popup.CloseIcon aria-label="Close" size="small" />
+            <Popup.Heading>Focus Trap Popup</Popup.Heading>
             <Popup.Body>
-              <p>Contents of Popup 2</p>
+              <p>
+                This popup uses the modal model and will trap keyboard focus when users press Tab or
+                Shift + Tab.
+              </p>
             </Popup.Body>
+            <Flex>
+              <Popup.CloseButton>OK</Popup.CloseButton>
+            </Flex>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
-  useCloseOnOutsideClick,
   useCloseOnEscape,
-  usePopupModel,
-  usePopupCloseButton,
+  useCloseOnOutsideClick,
   useInitialFocus,
+  usePopupCloseButton,
+  usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const popup1 = usePopupModel();

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

@@ -1,15 +1,15 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex, Grid} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
-  usePopupModel,
   useCloseOnEscape,
   useCloseOnOutsideClick,
   useInitialFocus,
+  usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {Flex, Grid} from '@workday/canvas-kit-react/layout';
-import {createStyles, calc} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const model = usePopupModel();
@@ -25,8 +25,8 @@ export default () => {
 
   const grid = createStyles({
     gridTemplateAreas: "'topButton topButton''leftButton rightButton''bottomButton bottomButton'",
-    height: calc.subtract('100vh', system.space.x16),
-    width: calc.subtract('100vw', system.space.x20),
+    height: calc.subtract('100vh', system.size.xxl),
+    width: calc.subtract('100vw', base.size1000),
   });
 
   const topButton = createStyles({
@@ -57,11 +57,13 @@ export default () => {
             Placement Top
           </Popup.Target>
           <Popup.Popper placement="top">
-            <Popup.Card width={400}>
+            <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+                This is Popup heading
+              </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs">
+              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -75,11 +77,13 @@ export default () => {
             Placement Left
           </Popup.Target>
           <Popup.Popper placement="left">
-            <Popup.Card width={400}>
+            <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+                This is Popup heading
+              </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs">
+              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -93,11 +97,13 @@ export default () => {
             Placement Right
           </Popup.Target>
           <Popup.Popper placement="right">
-            <Popup.Card width={400}>
+            <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+                This is Popup heading
+              </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs">
+              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -111,11 +117,13 @@ export default () => {
             Placement Bottom
           </Popup.Target>
           <Popup.Popper placement="bottom">
-            <Popup.Card width={400}>
+            <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+                This is Popup heading
+              </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs">
+              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>

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

@@ -1,8 +1,8 @@
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
-  useCloseOnOutsideClick,
   useCloseOnEscape,
+  useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
 

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

@@ -1,22 +1,22 @@
-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 {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Popup} from '@workday/canvas-kit-react/popup';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <Popup.Card width={400}>
+    <CanvasProvider dir="rtl">
+      <Popup.Card cs={{width: px2rem(400)}}>
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>
         <Popup.Body>
-          <Box as="p" marginY="zero">
+          <Box as="p" cs={{marginBlock: '0'}}>
             האם ברצונך למחוק פריט זה
           </Box>
         </Popup.Body>
-        <Flex gap="s" padding="xxs">
+        <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
           <DeleteButton>לִמְחוֹק</DeleteButton>
           <SecondaryButton>לְבַטֵל</SecondaryButton>
         </Flex>

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

@@ -1,15 +1,15 @@
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
-  useCloseOnOutsideClick,
   useCloseOnEscape,
-  usePopupModel,
+  useCloseOnOutsideClick,
   useInitialFocus,
+  usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
   const model = usePopupModel();

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

@@ -1,14 +1,14 @@
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,
-  useCloseOnOutsideClick,
   useCloseOnEscape,
-  usePopupModel,
+  useCloseOnOutsideClick,
   useInitialFocus,
+  usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {menuGroupIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {stackIcon} from '@workday/canvas-system-icons-web';
 
 export default () => {
   const model = usePopupModel();
@@ -21,7 +21,7 @@ export default () => {
   return (
     <Popup model={model}>
       <Tooltip title="Open Popup">
-        <Popup.Target as={TertiaryButton} icon={menuGroupIcon} />
+        <Popup.Target as={TertiaryButton} icon={stackIcon} />
       </Tooltip>
       <Popup.Popper>
         <Popup.Card>

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

@@ -1,17 +1,17 @@
 import {
   ExampleCodeBlock,
+  Specifications,
   StorybookStatusIndicator,
   SymbolDoc,
-  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 Caution from './examples/Caution';
 import Basic from './examples/Basic';
+import Caution from './examples/Caution';
 import Disabled from './examples/Disabled';
-import Inverse from './examples/Inverse';
 import Error from './examples/Error';
+import Inverse from './examples/Inverse';
 import LabelPosition from './examples/LabelPosition';
 import NoValue from './examples/NoValue';
 import RefForwarding from './examples/RefForwarding';
@@ -96,10 +96,9 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or
-`"error"` to set the Radio Group to the Caution or Error state, respectively. You
-will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
-standards.
+Set the `error` prop of the wrapping Form Field to `"caution"` or `"error"` to set the Radio Group
+to the Caution or Error state, respectively. You will also need to set the `hintId` and `hintText`
+props on the Form Field to meet accessibility standards.
 
 #### Caution
 
@@ -119,4 +118,4 @@ standards.
 
 ## Specifications
 
-<Specifications file="Radio.spec.ts" name="Radio" />
+<Specifications file="./cypress/component/Radio.spec.tsx" name="Radio" />

package/dist/mdx/react/radio/examples/Basic.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 {useUniqueId} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -12,7 +13,7 @@ export default () => {
   };
 
   return (
-    <FormField as="fieldset" cs={{width: space.xl}}>
+    <FormField as="fieldset" cs={{width: system.size.md}}>
       <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
       <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />