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

package/dist/mdx/preview-react/_examples/mdx/examples/TextInputWithReactHookForm.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
+import {FieldErrorsImpl, useForm} from 'react-hook-form';
+import {SchemaOf, object, string} from 'yup';
 
-import {useForm, FieldErrorsImpl} from 'react-hook-form';
-import {object, SchemaOf, string} from 'yup';
-
-import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {PrimaryButton, TertiaryButton} 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 {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Select} from '@workday/canvas-kit-react/select';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {visibleIcon, visibleStrikethroughIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = createStyles({
-  gap: system.space.x3,
+  gap: system.gap.md,
   flexDirection: 'column',
   alignItems: 'flex-start',
 });
@@ -151,7 +150,7 @@ export default () => {
           error={!!errors.password ? 'error' : undefined}
         >
           <FormField.Label>Password</FormField.Label>
-          <Flex cs={{gap: cssVar(system.space.x2)}}>
+          <Flex cs={{gap: system.gap.md}}>
             <FormField.Field>
               <FormField.Input
                 as={TextInput}
@@ -164,7 +163,7 @@ export default () => {
             </FormField.Field>
             <TertiaryButton
               type="button"
-              icon={showPassword ? invisibleIcon : visibleIcon}
+              icon={showPassword ? visibleStrikethroughIcon : visibleIcon}
               aria-label={showPassword ? 'Hide Password' : 'Show Password'}
               aria-controls={`input-${passwordId}`}
               onClick={() => {

package/dist/mdx/preview-react/divider/examples/Basic.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
 import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
 
 const sectionStyles = createStyles({
   display: 'flex',
   flexDirection: 'column',
-  gap: system.space.x4,
+  gap: system.gap.md,
   maxWidth: '40rem',
 });
 
@@ -18,7 +17,7 @@ export default () => {
       {maintainerList.map((maintainerData, index) => (
         <>
           <ProfileCard {...maintainerData} />
-          {index !== lastIndex && <Divider space={system.space.x1} />}
+          {index !== lastIndex && <Divider space={system.gap.xs} />}
         </>
       ))}
     </section>
@@ -71,7 +70,7 @@ const profileCardAvatarStyles = createStyles({
 });
 
 const profileCardHeadingStyles = createStyles({
-  ...system.type.body.large,
+  ...system.type.body.lg,
   fontWeight: system.fontWeight.bold,
   gridColumn: '2/3',
   gridRow: '1',
@@ -79,7 +78,7 @@ const profileCardHeadingStyles = createStyles({
 });
 
 const profileCardBodyStyles = createStyles({
-  ...system.type.body.small,
+  ...system.type.body.sm,
   gridColumn: '2',
   gridRow: '2',
   margin: 0,
@@ -96,7 +95,7 @@ const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
     <Avatar
       size="extraLarge"
       url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
-      altText={`${name}'s avatar`}
+      name={`${name}'s avatar`}
       className={profileCardAvatarStyles}
     />
     <h3 className={profileCardHeadingStyles}>{name}</h3>

package/dist/mdx/preview-react/divider/examples/CustomSpace.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
+
 import {Divider} from '@workday/canvas-kit-preview-react/divider';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const headingStyles = createStyles({
-  ...system.type.body.large,
+  ...system.type.body.lg,
   fontWeight: system.fontWeight.bold,
   margin: 0,
 });
 
 const bodyStyles = createStyles({
-  ...system.type.body.small,
+  ...system.type.body.sm,
   margin: 0,
 });
 
 const customDividerSpace = createStyles({
-  margin: `0 0 ${system.space.x4}`,
+  margin: `0 0 ${system.gap.md}`,
 });
 
 export default () => {

package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx

@@ -1,5 +1,5 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import { LoadingSparkles } from '@workday/canvas-kit-preview-react/loading-sparkles';
 import Basic from './examples/Basic';
 import RTL from './examples/RTL';
 

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {Text} from '@workday/canvas-kit-react/text';
+
 import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const containerStyles = createStyles({

package/dist/mdx/preview-react/loading-sparkles/examples/RTL.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
+
 import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <LoadingSparkles />
     </CanvasProvider>
   );

package/dist/mdx/preview-react/multi-select/MultiSelect.mdx

@@ -1,6 +1,5 @@
 import {
   ExampleCodeBlock,
-  InformationHighlight,
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
@@ -30,11 +29,11 @@ yarn add @workday/canvas-kit-preview-react
 ### Basic Example
 
 `MultiSelect` 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).
 
 `MultiSelect` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
 `MultiSelect` wraps the `FormField` element and the `FormField` element wraps the children of

package/dist/mdx/preview-react/multi-select/examples/Basic.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
 

package/dist/mdx/preview-react/multi-select/examples/Complex.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-
+import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
-
 const mainContentStyles = createStyles({
-  padding: system.space.x4,
+  padding: system.padding.md,
 });
 
 const items = [

package/dist/mdx/preview-react/multi-select/examples/Controlled.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
-
 const items = [
   {id: '1', text: 'Cheese'},
   {id: '2', text: 'Olives'},

package/dist/mdx/preview-react/multi-select/examples/Disabled.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
 

package/dist/mdx/preview-react/multi-select/examples/Error.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
 
@@ -19,8 +19,8 @@ export default () => {
             model.state.selectedIds.length < 1
               ? 'error'
               : model.state.selectedIds.length > 3
-              ? 'caution'
-              : undefined
+                ? 'caution'
+                : undefined
           }
         >
           <FormField.Label>Toppings</FormField.Label>
@@ -46,8 +46,8 @@ export default () => {
               {model.state.selectedIds.length < 1
                 ? 'Select at least one topping.'
                 : model.state.selectedIds.length > 3
-                ? 'More than 3 toppings cost extra.'
-                : undefined}
+                  ? 'More than 3 toppings cost extra.'
+                  : undefined}
             </FormField.Hint>
           </FormField.Field>
         </FormField>

package/dist/mdx/preview-react/multi-select/examples/Icons.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {
-  mediaPauseIcon,
-  mediaPlayIcon,
-  mediaTopicsIcon,
-  skipIcon,
+  dashboardGridFillIcon,
+  pauseIcon,
+  playIcon,
   previousIcon,
+  skipIcon,
 } from '@workday/canvas-system-icons-web';
 
-import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
-
 const items = [
-  {id: '1', text: 'Pause', icon: mediaPauseIcon},
-  {id: '2', text: 'Play', icon: mediaPlayIcon},
+  {id: '1', text: 'Pause', icon: pauseIcon},
+  {id: '2', text: 'Play', icon: playIcon},
   {id: '3', text: 'Skip', icon: skipIcon},
   {id: '4', text: 'Previous', icon: previousIcon},
 ];
@@ -35,7 +34,7 @@ export default () => {
                 <MultiSelect.Item data-id={item.id}>
                   <MultiSelect.Item.Icon icon={item.icon} />
                   <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
-                  <MultiSelect.Item.Icon icon={mediaTopicsIcon} />
+                  <MultiSelect.Item.Icon icon={dashboardGridFillIcon} />
                 </MultiSelect.Item>
               )}
             </MultiSelect.List>

package/dist/mdx/preview-react/multi-select/examples/InitialSelectedItems.tsx

@@ -1,18 +1,16 @@
 import React, {useEffect} from 'react';
 
-import {system} from '@workday/canvas-tokens-web';
-
-import {createStyles} from '@workday/canvas-kit-styling';
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
 import {LoadReturn} from '@workday/canvas-kit-react/collection';
-import {CanvasProvider, useMountLayout} from '@workday/canvas-kit-react/common';
 import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-
-import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const mainContentStyles = createStyles({
-  padding: system.space.x4,
+  padding: system.padding.md,
 });
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
@@ -106,7 +104,7 @@ export default () => {
                       <StyledMenuItem as="span">No Results Found</StyledMenuItem>
                     )}
                     {model.state.items.length > 0 && (
-                      <MultiSelect.List maxHeight={200}>
+                      <MultiSelect.List cs={{maxHeight: 200}}>
                         {item =>
                           item ? (
                             <MultiSelect.Item data-id={item.id}>

package/dist/mdx/preview-react/multi-select/examples/Searching.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 
-import {system} from '@workday/canvas-tokens-web';
-
-import {createStyles} from '@workday/canvas-kit-styling';
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
 import {LoadReturn} from '@workday/canvas-kit-react/collection';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-
-import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const mainContentStyles = createStyles({
-  padding: system.space.x4,
+  padding: system.padding.md,
 });
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
@@ -101,7 +99,7 @@ export default () => {
                       <StyledMenuItem as="span">No Results Found</StyledMenuItem>
                     )}
                     {model.state.items.length > 0 && (
-                      <MultiSelect.List maxHeight={200}>
+                      <MultiSelect.List cs={{maxHeight: 200}}>
                         {item =>
                           item ? (
                             <MultiSelect.Item data-id={item.id}>

package/dist/mdx/preview-react/radio/examples/Basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 

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

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

package/dist/mdx/preview-react/radio/examples/Custom.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';

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

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

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

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

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

@@ -1,17 +1,18 @@
 import React from 'react';
-import {Box} from '@workday/canvas-kit-react/layout';
+
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   containerStyles: createStyles({
-    backgroundColor: system.color.bg.primary.default,
-    padding: system.space.x4,
+    backgroundColor: system.color.surface.contrast.default,
+    padding: system.padding.md,
   }),
   formFieldStyles: createStyles({
     legend: {
-      color: system.color.text.inverse,
+      color: system.color.fg.inverse,
     },
   }),
 };

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

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

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

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

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

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

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

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

package/dist/mdx/preview-react/radio/examples/StandaloneRadio.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+
 import {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {

package/dist/mdx/preview-react/side-panel/SidePanel.mdx

@@ -1,17 +1,29 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications, StorybookStatusIndicator} from '@workday/canvas-kit-docs';import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight'
+
+import AlwaysOpen from './examples/AlwaysOpen';
 import Basic from './examples/Basic';
-import HiddenName from './examples/HiddenName';
-import AlternatePanel from './examples/Variant';
 import ExternalControl from './examples/ExternalControl';
-import RightOrigin from './examples/RightOrigin';
-import AlwaysOpen from './examples/AlwaysOpen';
+import HiddenName from './examples/HiddenName';
 import OnExpandedChange from './examples/OnExpandedChange';
 import OnStateTransition from './examples/OnStateTransition';
+import RightOrigin from './examples/RightOrigin';
+import AlternatePanel from './examples/Variant';
+
 
+# Canvas Kit Side Panel <StorybookStatusIndicator type="deprecated" />
 
-# Canvas Kit Side Panel
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please
+    use `SidePanel` in Labs instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs">
+    View SidePanel Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
-`SidePanel` is a collaspible container that anchors to the left or right side of the screen.
+`SidePanel` is a collapsible container that anchors to the left or right side of the screen.
 
 [> Workday Design Reference](https://design.workday.com/components/containers/side-panel)
 
@@ -135,4 +147,4 @@ is an example:
 
 ## Specifications
 
-<Specifications file="SidePanelPreview.spec.ts" name="Side Panel" />
+<Specifications file="./cypress/component/SidePanelPreview.spec.tsx" name="Side Panel" />

package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx

@@ -1,24 +1,22 @@
-import * as React from 'react';
-import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const stylesOverride = {
   accentIcon: createStyles({
-    marginRight: system.space.x4,
+    marginRight: system.gap.md,
   }),
   pageContainer: createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
     height: px2rem(320),
   }),
   panelContainer: createStyles({
     alignItems: 'center',
-    paddingY: system.space.x4,
-    paddingX: system.space.x4,
+    padding: system.padding.md,
   }),
   panelHeading: createStyles({
     color: system.color.fg.default,

package/dist/mdx/preview-react/side-panel/examples/Basic.tsx

@@ -1,18 +1,14 @@
-import * as React from 'react';
+import {rocketIcon} from '@workday/canvas-accent-icons-web';
+import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {
-  SidePanel,
-  useSidePanel,
-  SidePanelTransitionStates,
-} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
-import {rocketIcon} from '@workday/canvas-accent-icons-web';
-import {useDirection} from './useDirection';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system, base} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {useDirection} from './useDirection';
 
 const stylesOverride = {
   viewPortContainer: createStyles({
@@ -20,11 +16,10 @@ const stylesOverride = {
   }),
   panel: createStyles({
     alignItems: 'center',
-    paddingY: system.space.x4,
-    paddingX: system.space.x4,
+    padding: system.padding.md,
   }),
   accentIcon: createStyles({
-    marginInlineEnd: system.space.x4,
+    marginInlineEnd: system.gap.md,
   }),
   mainContent: createStyles({
     alignItems: 'center',
@@ -40,7 +35,7 @@ export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
 
   return (
-    <CanvasProvider theme={{canvas: {direction}}}>
+    <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewPortContainer}>
         <SidePanel {...panelProps}>
           <SidePanel.ToggleButton {...controlProps} />