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

package/dist/es6/lib/stackblitzFiles/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/App.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,GAAG,+CAiBf,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/App.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,GAAG,+CAUf,CAAC"}

package/dist/es6/lib/stackblitzFiles/App.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { CanvasProvider, ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
+import { CanvasProvider } from '@workday/canvas-kit-react/common';
 import { createStyles } from '@workday/canvas-kit-styling';
 import { Demo } from './Demo';
 import { system } from '@workday/canvas-tokens-web';
@@ -7,11 +7,5 @@ const mainContentStyles = createStyles({
     padding: system.space.x4,
 });
 export const App = () => {
-    // useTheme is filling in the Canvas theme object if any keys are missing
-    const canvasTheme = useTheme({
-        canvas: {
-            direction: ContentDirection.LTR,
-        },
-    });
-    return (_jsx(CanvasProvider, { theme: canvasTheme, children: _jsx(_Fragment, { children: _jsx("main", { className: mainContentStyles, children: _jsx(Demo, {}) }) }) }));
+    return (_jsx(CanvasProvider, { children: _jsx(_Fragment, { children: _jsx("main", { className: mainContentStyles, children: _jsx(Demo, {}) }) }) }));
 };

package/dist/es6/lib/stackblitzFiles/App.tsx

@@ -1,9 +1,4 @@
-import {
-  CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 import {Demo} from './Demo';
@@ -14,15 +9,8 @@ const mainContentStyles = createStyles({
 });
 
 export const App = () => {
-  // useTheme is filling in the Canvas theme object if any keys are missing
-  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
-    canvas: {
-      direction: ContentDirection.LTR,
-    },
-  });
-
   return (
-    <CanvasProvider theme={canvasTheme}>
+    <CanvasProvider>
       <>
         <main className={mainContentStyles}>
           <Demo />

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.19",
-    "@workday/canvas-kit-preview-react": "14.1.19",
-    "@workday/canvas-kit-react": "14.1.19",
-    "@workday/canvas-kit-react-fonts": "^14.1.19",
-    "@workday/canvas-kit-styling": "14.1.19",
+    "@workday/canvas-kit-labs-react": "14.1.21",
+    "@workday/canvas-kit-preview-react": "14.1.21",
+    "@workday/canvas-kit-react": "14.1.21",
+    "@workday/canvas-kit-react-fonts": "^14.1.21",
+    "@workday/canvas-kit-styling": "14.1.21",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.19",
-    "@workday/canvas-kit-preview-react": "14.1.19",
-    "@workday/canvas-kit-react": "14.1.19",
-    "@workday/canvas-kit-react-fonts": "^14.1.19",
-    "@workday/canvas-kit-styling": "14.1.19",
+    "@workday/canvas-kit-labs-react": "14.1.21",
+    "@workday/canvas-kit-preview-react": "14.1.21",
+    "@workday/canvas-kit-react": "14.1.21",
+    "@workday/canvas-kit-react-fonts": "^14.1.21",
+    "@workday/canvas-kit-styling": "14.1.21",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/mdx/15.0-UPGRADE-GUIDE.mdx

@@ -15,8 +15,179 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 
 ## Table of Contents
 
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [Component Promotions](#component-promotions)
+  - [Segmented Control](#segmented-control-)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
+- [Removals](#removals)
+  - [Segmented Control (Deprecated)](#segmented-control-deprecated)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+
+## Codemod
+
+We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
+automatically update your code to work with most of the breaking changes in v15. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+AST, identifying patterns, and making prescribed changes. This greatly decreases opportunities for
+error and reduces the number of manual updates, which allows you to focus on changes that need your
+attention. **We highly recommend you use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v13 of Canvas Kit,
+  you'll need to run the v14 codemod before you run v15.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in v15. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.
+
+```sh
+npx @workday/canvas-kit-codemod v15 [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v15 [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note:** The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+## Component Promotions
+
+### Segmented Control ⚡️
+
+We've promoted `SegmentedControl` from [Preview](/components/buttons/segmented-control/) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
+
+**Before in v14**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+```
+
+**After in v15**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+```
+
+> 🤖 The codemod will handle the change of imports as shown above.
+
+#### API Differences
+
+The new `SegmentedControl` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+with a different API than the deprecated version.
+
+##### Structure Changes
+
+| Deprecated (Old Main) | New (Promoted from Preview)         |
+| --------------------- | ----------------------------------- |
+| `SegmentedControl`    | `SegmentedControl`                  |
+| `SegmentedControl.Button` | `SegmentedControl.List` + `SegmentedControl.Item` |
+
+##### Prop Changes
+
+| Feature          | Deprecated (Old Main)                      | New (Promoted from Preview)                      |
+| ---------------- | ------------------------------------------ | ------------------------------------------------ |
+| Selection        | `value` prop on container                  | `initialValue` prop on container                 |
+| Change handler   | `onChange={(value) => {}}`                 | `onSelect={(data) => setSelected(data.id)}`      |
+| Item identifier  | `value` prop on Button                     | `data-id` prop on Item                           |
+| Disabled (all)   | Not supported                              | `disabled` prop on container model               |
+| Size             | Not supported                              | `size` prop (`small`, `medium`, `large`)         |
+| Orientation      | Not supported                              | `orientation` prop (`horizontal`, `vertical`)    |
+| Text labels      | Not supported                              | `children` on Item                               |
+| Tooltips         | Not supported                              | `tooltipProps` on Item                           |
+| Accessibility    | Manual                                     | Built-in `aria-label` on List                    |
+
+##### Code Migration
+
+**Deprecated API (Old Main)**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+
+const [value, setValue] = React.useState<string | number>('list-view');
+
+<SegmentedControl value={value} onChange={setValue}>
+  <SegmentedControl.Button icon={listViewIcon} value="list-view" />
+  <SegmentedControl.Button icon={worksheetsIcon} value="table-view" />
+  <SegmentedControl.Button icon={deviceTabletIcon} value="device-view" />
+</SegmentedControl>
+```
+
+**New API (v15)**
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+
+const [value, setValue] = React.useState('list-view');
+
+<SegmentedControl initialValue={value} onSelect={data => setValue(data.id)}>
+  <SegmentedControl.List aria-label="View type">
+    <SegmentedControl.Item data-id="list-view" icon={listViewIcon} tooltipProps={{title: 'List'}} />
+    <SegmentedControl.Item data-id="table-view" icon={worksheetsIcon} tooltipProps={{title: 'Table'}} />
+    <SegmentedControl.Item data-id="device-view" icon={deviceTabletIcon} tooltipProps={{title: 'Device'}} />
+  </SegmentedControl.List>
+</SegmentedControl>
+```
+
+##### New Features
+
+The promoted `SegmentedControl` includes several new features:
+
+- **Text and icon support**: Items can display text, icons, or both
+- **Size variants**: `small`, `medium`, and `large` sizes
+- **Vertical orientation**: Use `orientation="vertical"` for vertical layouts
+- **Built-in tooltips**: Add tooltips via `tooltipProps` on items
+- **Disabled state**: Disable all items via the model or individual items
+- **Dynamic items**: Render items dynamically using the collection API
+
+```tsx
+// Text only
+<SegmentedControl.Item data-id="yearly">Yearly</SegmentedControl.Item>
+
+// Icon with text
+<SegmentedControl.Item data-id="list" icon={listViewIcon}>List View</SegmentedControl.Item>
+
+// With size and orientation
+<SegmentedControl size="large" orientation="vertical">
+  ...
+</SegmentedControl>
+```
 
 ## Component Updates
 
@@ -28,4 +199,29 @@ The Following components have been updated to use our new `size`, `padding`, `ga
 tokens. These changes are **only visual**.
 
 `PrimaryButton`, `SecondaryButton`, `DeleteButton`, `TertiaryButton`, `ToolbarButton`,
-`ToolbarDropdownButton`, `Hyperlink`, `ExternalHyperlink`, and `ActionBar`.
+`ToolbarDropdownButton`, `Hyperlink`, `ExternalHyperlink`, and `ActionBar`.
+
+## Removals
+
+### Segmented Control (Deprecated)
+
+The deprecated `SegmentedControl` that was previously in `@workday/canvas-kit-react/segmented-control`
+has been removed. This was the older implementation that used `SegmentedControl.Button` subcomponents.
+
+Please migrate to the new `SegmentedControl` component (promoted from Preview) which uses a compound
+component pattern with `SegmentedControl.List` and `SegmentedControl.Item`. See the
+[API Differences](#api-differences) section above for migration guidance.
+
+## Glossary
+
+For an overview of the different packages we provide, please view our docs
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).
+
+### Main
+
+Components in the Main package are stable and ready for production use.
+
+### Preview
+
+Components in the Preview package are mostly stable but may still receive breaking changes before
+being promoted to Main.

package/dist/mdx/labs-react/combobox/examples/RTL.tsx

@@ -7,7 +7,7 @@ import {
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {CanvasProvider, ContentDirection, ExtractProps} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, ExtractProps} from '@workday/canvas-kit-react/common';
 
 const autocompleteResult = (
   textModifier: number,
@@ -78,7 +78,7 @@ const Autocomplete: FC<
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <FormField id="rtl-autocomplete-123">
         <FormField.Label>RTL Autocomplete example</FormField.Label>
         <FormField.Field>

package/dist/mdx/labs-react/search-form/examples/RTL.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 const initialWineList = [
   'Beaujolais',
@@ -52,14 +52,8 @@ export default () => {
     console.log(`Searching for: ${searchInput}`);
   };
 
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
-
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <Flex minHeight={200} alignItems="flex-start" padding="xs">
         <SearchForm
           autocompleteItems={menuItems}

package/dist/mdx/preview-react/information-highlight/InformationHighlight.mdx

@@ -1,8 +1,4 @@
-import {
-  ExampleCodeBlock,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import * as InformationHighlight from './InformationHighlight.stories.ts';
 import Basic from './examples/Basic';
@@ -17,7 +13,8 @@ import RTL from './examples/RTL';
 
 # Canvas Kit Information Highlight
 
-A container to call out important information on a page or a section of a page that the user should be aware of.
+A container to call out important information on a page or a section of a page that the user should
+be aware of.
 
 ## Installation
 
@@ -27,59 +24,76 @@ yarn add @workday/canvas-kit-preview-react
 
 ## Usage
 
-`InformationHighlight` should be used to call out important information to the user and are paired with a meaningful
- icon and color to differentiate information type. It should not be removed from the interface until some system or admin level action has been taken to do so.
+`InformationHighlight` should be used to call out important information to the user and are paired
+with a meaningful icon and color to differentiate information type. It should not be removed from
+the interface until some system or admin level action has been taken to do so.
 
 You can use an `InformationHighlight` to:
+
 - Prevent unwanted consequences from destructive actions
 - Reassure users in their next steps
 - Provide detail into information on the page
 - Show changes in page content
 
 ### When to Consider Something Else
-- Consider a [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if the message is about system-wide errors or alerts, or if the message appears in response to user action.
-- Consider a [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the message is critical and requires user action or decision before proceeding
-- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs) if the message is timely, such as communicating updates on the process of an application.
+
+- Consider a
+  [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if
+  the message is about system-wide errors or alerts, or if the message appears in response to user
+  action.
+- Consider a
+  [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the
+  message is critical and requires user action or decision before proceeding
+- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs)
+  if the message is timely, such as communicating updates on the process of an application.
+
 ### Basic Example
-<ExampleCodeBlock code={Basic} />
 
+<ExampleCodeBlock code={Basic} />
 
 ## Variants
-`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.
 
+`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.
 
 Variants: `informational`, `caution`, `critical`
 
 Emphasis: `low`, `high`
 
+The variants have different icons and colors to convey severity and the emphasis changes the
+background color to have a lower or higher contrast. If no `variant` or `emphasis` is selected the
+layout will default to `Variant: informational, Emphasis: low`.
 
-The variants have different icons and colors to convey severity and the emphasis changes the background color to have a
- lower or higher contrast. If no `variant` or `emphasis` is selected the layout will default to
-  `Variant: informational, Emphasis: low`.
+The following examples will show the `low` and `high` emphasis of the three variants. `low` Emphasis
+will be shown first and should be used when there is other more important information on the page.
+`high` Emphasis will be shown second, and should be used when the highlight is not competing with
+other, more important information.
 
+### Informational
 
-The following examples will show the `low` and `high` emphasis of the three variants.
-`low` Emphasis will be shown first and should be used when there is other more important information on the page.
-`high` Emphasis will be shown second, and should be used when the highlight is not competing with other, more important information.
+The informational variant is for _nice to have_ information, such as related features or
+opportunities.
 
-### Informational
-The informational variant is for _nice to have_ information, such as related features or opportunities.
 <ExampleCodeBlock code={Informational} />
 
 ### Caution
-The caution variant is for _important to know_ information, such as the potential consequences of specific actions.
 
-<ExampleCodeBlock code={Caution} />
+The caution variant is for _important to know_ information, such as the potential consequences of
+specific actions.
 
+<ExampleCodeBlock code={Caution} />
 
 ### Critical
-The critical variant is for _must know_ information that could otherwise cause failure if the user is unaware
 
-<ExampleCodeBlock code={Critical} />
+The critical variant is for _must know_ information that could otherwise cause failure if the user
+is unaware
 
+<ExampleCodeBlock code={Critical} />
 
 ### RTL Example
- Information Highlight also supports RTL Languages. To enable RTL, add a custom theme with direction set to 'ContentDirection.RTL'
+
+Information Highlight also supports RTL Languages. To enable RTL, set the `dir` attribute on the
+parent dom element that renders your application.
+
 <ExampleCodeBlock code={RTL} />
 
 ## Partial and Custom Information Highlights
@@ -87,18 +101,23 @@ The critical variant is for _must know_ information that could otherwise cause f
 `InformationHighlight` can use custom icons or be designed to only use some of its components.
 
 ### Custom Icon: Critical
+
 <ExampleCodeBlock code={IconCritical} />
 
 ### Body Only Example
+
 <ExampleCodeBlock code={Body} />
 
 ### Heading Only Example
+
 <ExampleCodeBlock code={Heading} />
 
 ### Accessible Use of the `as` Prop
-Like many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop, which lets you change
-the underlying semantic element. For `InformationHighlight.Heading`, you can change the heading level if you were
-needing to define a different level of importance. This should be done with caution to ensure the best accessibility.
+
+Like many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop,
+which lets you change the underlying semantic element. For `InformationHighlight.Heading`, you can
+change the heading level if you were needing to define a different level of importance. This should
+be done with caution to ensure the best accessibility.
 
 ## Component API
 

package/dist/mdx/preview-react/information-highlight/examples/RTL.tsx

@@ -1,17 +1,12 @@
 import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {system} from '@workday/canvas-tokens-web';
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
   return (
     <Flex flexDirection={'column'} gap={system.space.x2}>
-      <CanvasProvider theme={theme}>
+      <CanvasProvider dir="rtl">
         <InformationHighlight variant={'caution'} emphasis={'low'}>
           <InformationHighlight.Icon />
           <InformationHighlight.Heading>
@@ -24,7 +19,7 @@ export default () => {
           <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
         </InformationHighlight>
       </CanvasProvider>
-      <CanvasProvider theme={theme}>
+      <CanvasProvider dir="rtl">
         <InformationHighlight variant={'caution'} emphasis={'high'}>
           <InformationHighlight.Icon />
           <InformationHighlight.Heading>

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

@@ -1,15 +1,10 @@
 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/side-panel/examples/Basic.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {
-  SidePanel,
-  useSidePanel,
-  SidePanelTransitionStates,
-} from '@workday/canvas-kit-preview-react/side-panel';
+import {SidePanel, useSidePanel} 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';
@@ -40,7 +36,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} />

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

@@ -51,7 +51,7 @@ export default () => {
   const {direction, toggleDirection} = useDirection();
 
   return (
-    <CanvasProvider theme={{canvas: {direction}}}>
+    <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewport}>
         <Flex as="main" cs={stylesOverride.main}>
           <Text as="p" typeLevel="body.large">

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

@@ -34,7 +34,7 @@ export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
 
   return (
-    <CanvasProvider theme={{canvas: {direction}}}>
+    <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewport}>
         <SidePanel {...panelProps} variant="alternate">
           <SidePanel.ToggleButton {...controlProps} />

package/dist/mdx/react/_examples/mdx/examples/Density.tsx

@@ -4,7 +4,7 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Switch} from '@workday/canvas-kit-react/switch';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {calc, createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 

package/dist/mdx/react/_examples/mdx/examples/layout/ResponsiveColumns.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {Grid, Box} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
   const [screen, setScreen] = React.useState('100%');

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {breakpoints} from '@workday/canvas-kit-react/common';
 import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 type MyActionItem = {

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -1,20 +1,9 @@
 import React from 'react';
 
 import {Box} from '@workday/canvas-kit-react/layout';
-import {
-  CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  styled,
-} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
 
-const theme: PartialEmotionCanvasTheme = {
-  canvas: {
-    direction: ContentDirection.RTL,
-  },
-};
-
 const StyledStickyBanner = styled(Banner)({
   position: 'absolute',
   right: 0,
@@ -22,7 +11,7 @@ const StyledStickyBanner = styled(Banner)({
 
 export default () => {
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <Box height={64}>
         <StyledStickyBanner isSticky={true}>
           <Banner.Icon />

package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Breadcrumbs, useBreadcrumbsModel} from '@workday/canvas-kit-react/breadcrumbs';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export interface Breadcrumb {
   id: string;