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

package/dist/mdx/react/color-picker/color-preview/ColorPreview.mdx

@@ -1,9 +1,9 @@
 import {
   ExampleCodeBlock,
-  InformationHighlight,
-  SymbolDoc,
   Specifications,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
+
 import Basic from './examples/Basic';
 import LabelPosition from './examples/LabelPosition';
 import RefForwarding from './examples/RefForwarding';
@@ -47,4 +47,4 @@ input component. By default, the orientation will be set to `vertical`.
 
 ## Specifications
 
-<Specifications file="ColorPicker.spec.ts" name="ColorPreview" />
+<Specifications file="./cypress/component/ColorPicker.spec.tsx" name="ColorPreview" />

package/dist/mdx/react/color-picker/color-preview/examples/LabelPosition.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   return (

package/dist/mdx/react/color-picker/color-preview/examples/RefForwarding.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Subtext} from '@workday/canvas-kit-react/text';
 
 export default () => {
   const [width, setWidth] = React.useState(null);
@@ -20,7 +21,7 @@ export default () => {
           <FormField.Input as={ColorPreview} ref={ref} value="#00ffcc" />
         </FormField.Field>
       </FormField>
-      <p style={type.levels.subtext.large}>Width of Color Preview: {width}</p>
+      <Subtext size="large">Width of Color Preview: {width}</Subtext>
       <PrimaryButton onClick={handleClick}>Calculate Width of Color Preview</PrimaryButton>
     </>
   );

package/dist/mdx/react/combobox/examples/Autocomplete.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 
-import {
-  createElemPropsHook,
-  createSubcomponent,
-  composeHooks,
-} from '@workday/canvas-kit-react/common';
 import {LoadReturn} from '@workday/canvas-kit-react/collection';
 import {
   Combobox,
-  useComboboxModel,
-  useComboboxLoader,
   useComboboxInput,
   useComboboxInputArbitrary,
+  useComboboxLoader,
+  useComboboxModel,
 } from '@workday/canvas-kit-react/combobox';
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -28,6 +28,8 @@ const options = Array(1000)
     return `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`;
   });
 
+const simulatedDelay = (window as any).Cypress ? 5 : 300;
+
 const useAutocompleteInput = composeHooks(
   createElemPropsHook(useComboboxModel)(model => {
     return {
@@ -113,7 +115,7 @@ export default () => {
               items,
               total,
             });
-          }, 300);
+          }, simulatedDelay);
         });
       },
       onShow() {

package/dist/mdx/react/common/mdx/CompoundComponentUtilities.mdx

@@ -10,7 +10,7 @@ import CreateComponent from './examples/CreateComponent';
 # Compound Component Utilities
 
 The following utilities are used to create and compose
-[compound components](/getting-started/for-developers/resources/compound-components/).
+[compound components](/get-started/for-developers/documentation/compound-components/).
 
 ## Installation
 

package/dist/mdx/react/common/mdx/Theming.mdx

@@ -1,4 +1,5 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
 import RTL from './examples/RTL';
 import Theming from './examples/Theming';
 
@@ -7,9 +8,22 @@ import Theming from './examples/Theming';
 
 ## Overview
 
-Canvas Kit v14 introduces a significant shift in our approach to theming: we've moved away from
-JavaScript-based theme objects to CSS variables. This change provides better performance, improved
-developer experience, and greater flexibility for theming applications.
+Canvas Kit v14 and v15 introduce a significant shift in our approach to theming: we've moved away
+from JavaScript-based theme objects to CSS variables. This change provides better performance,
+improved developer experience, and greater flexibility for theming applications.
+
+> **📌 Quick Start:**
+>
+> 1. **Import CSS variables once** at the root level of your application (e.g., in `index.css`)
+> 2. **Override tokens at `:root`** for global theming — this is the recommended approach
+> 3. **Use `CanvasProvider` scoped theming only** for specific scenarios like multi-brand sections
+>    or embedded components
+>
+> If your application renders within an environment that already imports these CSS variables, **do
+> not re-import them**.
+
+View our latest tokens documentation
+[here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
 ## Migration from v10 Theme Prop to v14 CSS Variables
 
@@ -47,6 +61,8 @@ via a `className` scoping those brand variables to a wrapping div. In order for
 better solution to theming that is scalable and is more aligned with our CSS variables, we changed
 this approach.
 
+**Note:** While we support theme overrides, we advise to use global theming via CSS Variables.
+
 ## What is a Cascade Barrier?
 
 When we say "cascade barrier", we're talking about how
@@ -69,9 +85,59 @@ and scoped to the `div` that the `CanvasProvider` created. This meant that anyth
 or outside of the `CanvasProvider` would not be able to cascade down to the components within the
 `CanvasProvider`.
 
+If you provide a `theme` to the `CanvasProvider`, it will create a scoped theme. Note that in v14
+and v15, global CSS variables are the recommended way to theme Popups and Modals consistently.
+
+## Global vs Scoped Theming
+
+Canvas Kit v14 and v15 support two theming strategies: **global theming** and **scoped theming**.
+Understanding the difference is important to avoid unexpected behavior.
+
+### Global Theming
+
+Global theming applies CSS variables at the `:root` level, making them available throughout your
+entire application. This is the **recommended approach** for most use cases.
+
+```css
+@import '@workday/canvas-tokens-web/css/base/_variables.css';
+:root {
+	// This is showing how you can change the value of a token at the root level of your application.
+  --cnvs-brand-primary-600: var(--cnvs-base-palette-magenta-600);
+}
+```
+
+### Scoped Theming
+
+Scoped theming applies CSS variables to a specific section of your application using the
+`CanvasProvider` via the `theme` prop. The theme only affects components within that provider.
+
+```tsx
+// Using the theme prop for scoped theming. This will set the [brand.primary.**] tokens to shades of purple. This will also ensure that the Popup and Modal components are themed consistently.
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+  <ScopedSection />
+</CanvasProvider>
+```
+
+> **⚠️ Warning:** Scoped theming creates a cascade barrier that **will break global theming**. Any
+> CSS variables defined at `:root` will be overridden by the scoped theme. Only the tokens
+> explicitly defined in the `theme` prop will be changed - other tokens will use their default
+> values, not your global overrides.
+
+### When to Use Scoped Theming
+
+Only use scoped theming when you intentionally need a different theme for a specific section of your
+application, such as:
+
+- Embedding a Canvas Kit component in a third-party application with a different brand
+- Creating a preview panel that shows components with different themes
+- Supporting multi-tenant applications where sections have different branding
+
+For all other cases, use global theming at `:root` to ensure consistent theming throughout your
+application.
+
 ## ✅ Preferred Approach (v14+)
 
-Canvas Kit v14 promotes using CSS variables for theming, which can be applied in two ways:
+Canvas Kit v14 and v15 promote using CSS variables for theming, which can be applied in two ways:
 
 ### Method 1: Global CSS Variables (Recommended)
 
@@ -83,16 +149,16 @@ CSS:
 @import '@workday/canvas-tokens-web/css/base/_variables.css';
 @import '@workday/canvas-tokens-web/css/system/_variables.css';
 @import '@workday/canvas-tokens-web/css/brand/_variables.css';
+@import '@workday/canvas-tokens-web/css/component/_variables.css';
 
 :root {
   /* Override brand primary colors */
-  --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
-  --cnvs-brand-primary-light: var(--cnvs-base-palette-magenta-200);
-  --cnvs-brand-primary-lighter: var(--cnvs-base-palette-magenta-50);
-  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-magenta-25);
-  --cnvs-brand-primary-dark: var(--cnvs-base-palette-magenta-700);
-  --cnvs-brand-primary-darkest: var(--cnvs-base-palette-magenta-800);
-  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
+  --cnvs-brand-primary-600: var(--cnvs-base-palette-magenta-600);
+  --cnvs-brand-primary-200: var(--cnvs-base-palette-magenta-200);
+  --cnvs-brand-primary-50: var(--cnvs-base-palette-magenta-50);
+  --cnvs-brand-primary-25: var(--cnvs-base-palette-magenta-25);
+  --cnvs-brand-primary-700: var(--cnvs-base-palette-magenta-700);
+  --cnvs-brand-primary-800: var(--cnvs-base-palette-magenta-800);
 }
 ```
 
@@ -102,36 +168,16 @@ CSS:
 
 ### Method 2: Provider-Level CSS Variables
 
-Use Canvas Kit's `createStyles` utility to generate themed class names that can be applied to
-specific components or sections:
-
-> **Note:** Doing the following **will create a cascade barrier**. Only use this method if you
-> intentionally want to override the default theme.
+Use Canvas Kit's `CanvasProvider` and `theme` prop to generate themed class names that can be
+applied to specific components or sections:
 
 ```tsx
-import {createStyles}from "@workday/canvas-kit-styling"
-import {brand, base} from "@workday/canvas-tokens-web"
-import {CanvasProvider} from "@workday/canvas-kit-react/common"
-
-// You can import the CSS variables in a ts file or an index.css file. You do not need to do both.
-import '@workday/canvas-tokens-web/css/base/_variables.css';
-import '@workday/canvas-tokens-web/css/system/_variables.css';
-import '@workday/canvas-tokens-web/css/brand/_variables.css';
-
-// Generate a class name that defines CSS variables
-const themedBrand = createStyles({
-  [brand.primary.accent]: base.neutral0,
-  [brand.primary.darkest]: base.blue800,
-  [brand.primary.dark]: base.blue700,
-  [brand.primary.base]: base.blue600,
-  [brand.primary.light]: base.blue200,
-  [brand.primary.lighter]: base.blue50,
-  [brand.primary.lightest]: base.blue25,
-})
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
-<CanvasProvider className={themedBrand}>
-  <App/>
-</CanvasProvider>
+// This will set the [brand.primary.**] tokens to shades of purple. This will also ensure that the Popup and Modal components are themed consistently.
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+  <App />
+</CanvasProvider>;
 ```
 
 ## CSS Token Structure
@@ -154,10 +200,12 @@ Base tokens define foundation palette and design values.
 Brand tokens define semantic color assignments.
 
 ```css
---cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
---cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
---cnvs-brand-error-base: var(--cnvs-base-palette-red-600);
---cnvs-brand-success-base: var(--cnvs-base-palette-green-600);
+--cnvs-brand-primary-600: var(--cnvs-base-palette-blue-600);
+--cnvs-brand-primary-200: var(--cnvs-base-palette-blue-200);
+--cnvs-brand-primary-50: var(--cnvs-base-palette-blue-50);
+--cnvs-brand-primary-25: var(--cnvs-base-palette-blue-25);
+--cnvs-brand-primary-700: var(--cnvs-base-palette-blue-700);
+--cnvs-brand-primary-800: var(--cnvs-base-palette-blue-800);
 ```
 
 ### System Tokens (`system/_variables.css`)
@@ -165,9 +213,8 @@ Brand tokens define semantic color assignments.
 System tokens define component-specific values.
 
 ```css
---cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600);
---cnvs-sys-color-text-primary-default: var(--cnvs-base-palette-blue-600);
---cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4);
+--cnvs-sys-color-bg-default: var(--cnvs-base-palette-blue-600);
+--cnvs-sys-shape-sm: var(--cnvs-base-size-50);
 ```
 
 ## Practical Examples
@@ -182,59 +229,89 @@ System tokens define component-specific values.
 
 :root {
   /* Primary brand colors */
-  --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
-  --cnvs-brand-primary-light: var(--cnvs-base-palette-magenta-200);
-  --cnvs-brand-primary-lighter: var(--cnvs-base-palette-magenta-50);
-  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-magenta-25);
-  --cnvs-brand-primary-dark: var(--cnvs-base-palette-magenta-700);
-  --cnvs-brand-primary-darkest: var(--cnvs-base-palette-magenta-800);
-  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
+  --cnvs-brand-primary-600: var(--cnvs-base-palette-magenta-600);
+  --cnvs-brand-primary-200: var(--cnvs-base-palette-magenta-200);
+  --cnvs-brand-primary-50: var(--cnvs-base-palette-magenta-50);
+  --cnvs-brand-primary-25: var(--cnvs-base-palette-magenta-25);
+  --cnvs-brand-primary-700: var(--cnvs-base-palette-magenta-700);
+  --cnvs-brand-primary-800: var(--cnvs-base-palette-magenta-800);
 }
 ```
 
-### App-Specific Theming
+### Scoped Theming
+
+<ExampleCodeBlock code={Theming} />
+
+### RTL Support
+
+Canvas Kit supports RTL out of the box. Our components are styled to use
+[CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
+If you want to add additional styles based on RTL, you can also use the `:dir`
+[pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
+
+#### Setting RTL Direction
+
+Use the native HTML `dir` attribute to set the text direction. The `CanvasProvider` accepts a `dir`
+prop which sets this attribute on its wrapper element:
 
 ```tsx
-import {createStyles} from '@workday/canvas-kit-styling';
-import {brand, base} from '@workday/canvas-tokens-web';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
-const greenTheme = createStyles({
-  [brand.primary.base]: base.green600,
-  [brand.primary.dark]: base.green700,
-  [brand.primary.darkest]: base.green800,
-  [brand.primary.light]: base.green200,
-  [brand.primary.lighter]: base.green50,
-  [brand.primary.lightest]: base.green25,
-  [brand.primary.accent]: base.neutral0,
-});
-
-<CanvasProvider className={greenTheme}>
-  <PrimaryButton>Click me</PrimaryButton>
+// Set RTL direction
+<CanvasProvider dir="rtl">
+  <App />
 </CanvasProvider>;
 ```
 
-<ExampleCodeBlock code={Theming} />
+You can also set it on any HTML element:
 
-### Dark Mode Implementation
+```tsx
+<div dir="rtl">
+  <MyComponent />
+</div>
+```
+
+> **Note:** The `dir` attribute is the standard HTML way to set text direction. It's preferred over
+> the deprecated `theme.canvas.direction` approach because it works natively with CSS logical
+> properties and the `:dir()` pseudo-class.
+
+#### Using CSS Logical Properties
+
+CSS logical properties automatically adapt to the text direction. Use these instead of physical
+properties:
 
 ```css
-/* Dark mode theming */
-[data-theme='dark'] {
-  --cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-950);
-  --cnvs-sys-color-text-default: var(--cnvs-base-palette-neutral-50);
-  --cnvs-sys-color-border-container: var(--cnvs-base-palette-slate-700);
-  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-800);
+/* Physical properties (don't adapt to RTL) */
+.my-component {
+  margin-left: 1rem;
+  padding-right: 1rem;
+  border-left: 1px solid;
+}
+
+/* Logical properties (adapt to RTL automatically) */
+.my-component {
+  margin-inline-start: 1rem;
+  padding-inline-end: 1rem;
+  border-inline-start: 1px solid;
 }
 ```
 
-### RTL Support
+#### Conditional RTL Styles with `:dir()`
 
-Canvas Kit supports RTL out of the box. Our components are styled to use
-[CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
-If you want to add additional styles based on RTL, you can also use the `:dir`
-[pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
+For styles that need to change based on direction (like rotating icons), use the `:dir()`
+pseudo-class:
+
+```tsx
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const rtlButtonStyles = createStyles({
+  ':dir(rtl)': {
+    svg: {
+      transform: 'rotate(180deg)',
+    },
+  },
+});
+```
 
 <ExampleCodeBlock code={RTL} />
 
@@ -295,31 +372,11 @@ const theme = {
 Replace theme-based `CanvasProvider` usage with CSS class-based theming.
 
 ```tsx
-// Before:
-<CanvasProvider theme={customTheme}>
-  <App />
-</CanvasProvider>
-
-// After:
-<CanvasProvider className={customThemeClass}>
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'green'}}}}}>
   <App />
 </CanvasProvider>
 ```
 
-> **Note:** Using a class means you will need to define each property of the palette for full
-> control over theming.
-
-### Step 4: Test Component Rendering
-
-Verify that Canvas Kit components (like `PrimaryButton`) correctly use the new CSS variables.
-
-```tsx
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-
-// This should automatically use your CSS variable overrides
-<PrimaryButton>Themed Button</PrimaryButton>;
-```
-
 ## Best Practices
 
 ### 1. Use Semantic Token Names
@@ -328,7 +385,7 @@ Use brand tokens instead of base tokens for better maintainability.
 
 ```css
 /* ✅ Good - semantic meaning */
---cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
+--cnvs-brand-primary-600: var(--cnvs-base-palette-blue-600);
 
 /* ❌ Avoid - direct base token usage */
 --cnvs-base-palette-blue-600: blue;
@@ -338,13 +395,8 @@ Use brand tokens instead of base tokens for better maintainability.
 
 Ensure color combinations meet accessibility standards.
 
-```css
-/* Verify contrast ratios for text/background combinations */
-:root {
-  --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
-  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0); /* White text */
-}
-```
+For a full list of color contrast pairs, view our
+[Color Contrast](https://canvas.workday.com/guidelines/color/color-contrast) documentation.
 
 ### 3. Avoid Component Level Theming
 
@@ -354,15 +406,11 @@ component level.
 ```tsx
 /* ✅ Good - App level theming */
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {base, brand} from '@workday/canvas-tokens-web';
 
-const myCustomTheme = createStyles({
-  [brand.primary.base]: base.magenta600
-})
+import {base, brand} from '@workday/canvas-tokens-web';
 
 
-<CanvasProvider className={myCustomTheme}>
+<CanvasProvider theme={{canvas: {palette: {primary: {main: base.magenta600}}}}}>
   <App/>
 </CanvasProvider>
 
@@ -380,18 +428,6 @@ const myCustomTheme = createStyles({
 
 ```
 
-## Component Compatibility
-
-All Canvas Kit components in v14 automatically consume CSS variables. No component-level changes are
-required when switching from the theme prop approach to CSS variables.
-
-### Supported Components
-
-- ✅ All Button variants (`PrimaryButton`, `SecondaryButton`, etc.)
-- ✅ Form components (`TextInput`, `FormField`, etc.)
-- ✅ Layout components (`Card`, `Modal`, etc.)
-- ✅ Navigation components (`Tabs`, `SidePanel`, etc.)
-
 ## Performance Benefits
 
 The CSS variable approach provides several performance improvements:
@@ -416,6 +452,7 @@ Ensure CSS variable files are imported in the correct order.
 @import '@workday/canvas-tokens-web/css/base/_variables.css';
 @import '@workday/canvas-tokens-web/css/system/_variables.css';
 @import '@workday/canvas-tokens-web/css/brand/_variables.css';
+@import '@workday/canvas-tokens-web/css/component/_variables.css';
 
 /* Your overrides after imports */
 :root {
@@ -444,7 +481,7 @@ Check for CSS specificity issues.
 Verify all required CSS token files are imported and token names are correct.
 
 ```tsx
-import {brand, base, system} from '@workday/canvas-tokens-web';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
 // Check token availability in development
 console.log(brand.primary.base); // Should output CSS variable name

package/dist/mdx/react/common/mdx/examples/CreateComponent.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 // Extend Heading Props and omitting size since we've added a default
 interface CardHeadingProps extends Omit<ExtractProps<typeof Heading>, 'size'> {}
@@ -33,9 +33,15 @@ export default createComponent('div')({
   },
 });
 
+const cardStyles = createStyles({
+  boxShadow: system.depth[2],
+  border: `1px solid ${system.color.border.default}`,
+  padding: system.padding.sm,
+});
+
 export default () => {
   return (
-    <Card depth={2} border={`1px solid ${colors.soap400}`} padding="s" as="section">
+    <Card cs={cardStyles} as="section">
       <Card.Heading>Card Heading</Card.Heading>
     </Card>
   );

package/dist/mdx/react/common/mdx/examples/CreateContainer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createContainer, createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
 export type Visibility = 'hidden' | 'visible';

package/dist/mdx/react/common/mdx/examples/CreateElemPropsHook.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+
+import {PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 import {
   createContainer,
+  createElemPropsHook,
   createModelHook,
   createSubcomponent,
-  createElemPropsHook,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 type Visibility = 'hidden' | 'visible';

package/dist/mdx/react/common/mdx/examples/CreateModelHook.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createContainer, createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
 export type Visibility = 'hidden' | 'visible';

package/dist/mdx/react/common/mdx/examples/CreateSubcomponent.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+
+import {PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 import {
   createContainer,
   createModelHook,
   createSubcomponent,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 
 export type Visibility = 'hidden' | 'visible';
 

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

@@ -1,16 +1,15 @@
 import React from 'react';
-import {createStyles} from '@workday/canvas-kit-styling';
 
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-import {Card} from '@workday/canvas-kit-react/card';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {arrowRightSmallIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
 
 const rtlStyles = createStyles({
-  paddingInlineStart: system.space.x16,
+  paddingInlineStart: px2rem(64),
 });
 
 const rtlButtonStyles = createStyles({

package/dist/mdx/react/common/mdx/examples/ResponsiveStyles.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import {Box, Grid, Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {useResponsiveContainerStyles, useResizeObserver} from '@workday/canvas-kit-react/common';
+
+import {useResizeObserver, useResponsiveContainerStyles} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Box, Flex, Grid} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';
+import {Text} from '@workday/canvas-kit-react/text';
 
 const HeadingText = ({children, ...props}) => (
   <Text as="p" fontSize={20} fontWeight="bold" color="frenchVanilla100" margin={0} {...props}>

package/dist/mdx/react/common/mdx/examples/ResponsiveViewport.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
-import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import styled from '@emotion/styled';
-import {type, space, colors, borderRadius} from '@workday/canvas-kit-react/tokens';
+import * as React from 'react';
+
 import {getTheme} from '@workday/canvas-kit-react/common';
+import {Box, Grid} from '@workday/canvas-kit-react/layout';
+import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
 
 const theme = getTheme();
 const {up, down} = theme.canvas.breakpoints;