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

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,66 +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,
-})
-
-<CanvasProvider className={themedBrand}>
-  <App/>
-</CanvasProvider>
-```
-
-### Theming Modals and Dialogs
-
-Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
-Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
-
-> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
-> and Dialogs. You can either pass a `className` or define CSS variables at the root.
-
-**Before in v13**
-
-```tsx
-// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
-<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
-  <Modal>//... rest of modal code</Modal>
-</CanvasProvider>
-```
-
-**After in v14**
-
-```tsx
-// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
-:root {
- --cnvs-brand-primary-base: blue;
-}
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
-<CanvasProvider>
-  <Modal>//... rest of modal code</Modal>
-</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
@@ -184,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`)
@@ -195,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
@@ -212,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} />
 
@@ -325,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
@@ -358,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;
@@ -368,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
 
@@ -384,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>
 
@@ -410,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:
@@ -446,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 {
@@ -474,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;