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

package/dist/es6/lib/docs.js

@@ -94957,7 +94957,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/banner/lib/hooks/useThemedPalette.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `getPaletteColors` is deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "function",
       "parameters": [
@@ -95069,7 +95071,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/banner/lib/hooks/useThemedPalette.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `useThemedPalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "function",
       "parameters": [
@@ -202378,7 +202382,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "deprecated": "⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+          }
         },
         {
           "kind": "parameter",
@@ -202478,7 +202484,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "deprecated": "⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+          }
         }
       ]
     }
@@ -212752,7 +212760,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "param": "target\n \nA partial object with up to the same shape as the `fallback` object\nfallback\n \nA fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used"
+      "param": "target\n \nA partial object with up to the same shape as the `fallback` object\nfallback\n \nA fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used",
+      "deprecated": "⚠️ `getObjectProxy` is deprecated. This utility was used for theme object fallbacks. Now that we're shifting to a global theming approach based on CSS variables, this is no longer needed. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
     },
     "type": {
       "kind": "function",
@@ -213121,7 +213130,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)."
+    },
     "type": {
       "kind": "object",
       "typeParameters": [],
@@ -213156,7 +213167,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `CanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -213653,7 +213666,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `PartialCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -213674,7 +213689,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `PartialCanvasThemePalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "type",
       "typeParameters": [],
@@ -213695,7 +213712,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `PartialEmotionCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -213765,7 +213784,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `EmotionCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "object",
       "properties": [
@@ -214680,7 +214701,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/colorUtils.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "⚠️ `pickForegroundColor` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
+    },
     "type": {
       "kind": "function",
       "parameters": [

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/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/segmented-control/examples/RTL.tsx

@@ -1,4 +1,4 @@
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {
   gridIcon,
   listViewIcon,
@@ -8,7 +8,7 @@ import {
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 
 export default () => (
-  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+  <CanvasProvider dir="rtl">
     <SegmentedControl initialValue="list-detail">
       <SegmentedControl.List aria-label="View type">
         <SegmentedControl.Item data-id="table" icon={gridIcon}>

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/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/RTL.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 import {Box} from '@workday/canvas-kit-react/layout';
 
@@ -10,12 +10,6 @@ export interface Breadcrumb {
 }
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
-
   const [items] = React.useState<Breadcrumb[]>([
     {id: '1', text: 'תנ״ך', link: '/tanakh'},
     {id: '2', text: 'כתובים', link: '/ketuvim'},
@@ -26,7 +20,7 @@ export default () => {
   ]);
 
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <Box maxWidth="300px">
         <Breadcrumbs items={items} aria-label="Breadcrumbs">
           <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>

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

@@ -5,6 +5,8 @@ import Theming from './examples/Theming';
 
 # Canvas Kit Theming Guide
 
+> **Deprecation Notice:** The `theme` prop on `CanvasProvider` and all associated theming utilities (`useTheme`, `getTheme`, `styled`, `defaultCanvasTheme`, etc.) are deprecated. Please use CSS variables from `@workday/canvas-tokens-web` for theming. See the [Preferred Approach](#-preferred-approach-v14) section below.
+
 ## Overview
 
 Canvas Kit v14 introduces a significant shift in our approach to theming: we've moved away from
@@ -266,6 +268,65 @@ Canvas Kit supports RTL out of the box. Our components are styled to use
 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 {CanvasProvider} from '@workday/canvas-kit-react/common';
+
+// Set RTL direction
+<CanvasProvider dir="rtl">
+  <App />
+</CanvasProvider>
+```
+
+You can also set it on any HTML element:
+
+```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
+/* 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;
+}
+```
+
+#### Conditional RTL Styles with `: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} />
 
 ### Resetting to Default Brand Theme

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

@@ -1,14 +1,9 @@
 import {Expandable} from '@workday/canvas-kit-react/expandable';
-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">
       <Expandable>
         <Expandable.Target headingLevel="h4">
           <Expandable.Icon iconPosition="start" />

package/dist/mdx/react/loading-dots/examples/RTL.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-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">
       <LoadingDots />
     </CanvasProvider>
   );

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

@@ -7,7 +7,7 @@ import {
   usePaginationModel,
 } from '@workday/canvas-kit-react/pagination';
 
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const resultCount = 10;
@@ -15,7 +15,7 @@ export default () => {
   const lastPage = getLastPage(resultCount, totalCount);
 
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Pagination aria-label="Pagination" lastPage={lastPage}>
         <Pagination.Controls>
           <Pagination.JumpToFirstButton aria-label="First" />

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

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Popup.Card width={400}>
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>

package/dist/mdx/react/table/examples/RightToLeft.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -11,7 +11,7 @@ const tableHeaderStyles = createStyles({
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Table>
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>

package/dist/mdx/react/tabs/examples/RightToLeft.tsx

@@ -1,11 +1,11 @@
 import {space} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 import {Tabs} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Tabs>
         <Tabs.List>
           <Tabs.Item>ראשון</Tabs.Item>

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

@@ -3,13 +3,13 @@ import React from 'react';
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 import {colors} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const handleClose = () => console.log('close button clicked');
 
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Toast>
         <Toast.Icon icon={checkIcon} color="greenApple400" />
         <Toast.Body>

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0008-next.0",
+  "version": "15.0.0-alpha.0010-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0010-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0010-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0010-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0010-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
+  "gitHead": "596c44d0fd4c67d54185ce1a91b1ab3517981dd2"
 }