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

package/dist/es6/radio/lib/RadioText.js

@@ -1,33 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
-import { useRadioModel } from './hooks/useRadioModel';
-import { RadioLabelContext } from './RadioLabel';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { textStencil } from '@workday/canvas-kit-react/text';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { RadioLabelContext } from './RadioLabel';
+import { useRadioModel } from './hooks/useRadioModel';
 const radioTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "30ngxa", styles: "box-sizing:border-box;cursor:pointer;" },
+    base: { name: "147xoe", styles: "box-sizing:border-box;cursor:pointer;" },
     modifiers: {
         variant: {
-            inverse: { name: "1gyil6", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            inverse: { name: "21mxdx", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
         },
         disabled: {
-            true: { name: "bxs3v", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "3xf5p3", styles: "cursor:default;opacity:var(--cnvs-sys-opacity-disabled);" }
         }
     },
-    compound: [
-        {
-            modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "2vi81v", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
-        }
-    ],
     defaultModifiers: {
         typeLevel: 'subtext.large',
     }
-}, "radio-text-896bda");
+}, "radio-text-4a03cd");
 export const RadioText = createSubcomponent('span')({
     displayName: 'RadioButton.Text',
     modelHook: useRadioModel,

package/dist/es6/radio/lib/StyledRadioButton.d.ts

@@ -4,6 +4,77 @@ import { CSProps } from '@workday/canvas-kit-styling';
 export interface StyledRadioButtonProps extends CSProps {
     variant?: 'inverse' | undefined;
 }
+export declare const radioInputStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        inverse: ({ checkPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly check: "cnvs-radio-check";
+        }>) => {
+            [x: string]: {
+                backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
+                borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
+                opacity?: undefined;
+                boxShadow?: undefined;
+            } | {
+                [x: string]: "--cnvs-sys-opacity-disabled" | {
+                    backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
+                    borderColor: "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))";
+                } | {
+                    backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
+                    borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
+                };
+                opacity: "--cnvs-sys-opacity-disabled";
+                backgroundColor?: undefined;
+                borderColor?: undefined;
+                boxShadow?: undefined;
+            } | {
+                borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
+                backgroundColor?: undefined;
+                opacity?: undefined;
+                boxShadow?: undefined;
+            } | {
+                backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
+                borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
+                opacity?: undefined;
+                boxShadow?: undefined;
+            } | {
+                boxShadow: string;
+                backgroundColor?: undefined;
+                borderColor?: undefined;
+                opacity?: undefined;
+            };
+            '&:disabled, &.disabled': {
+                [x: string]: "--cnvs-sys-opacity-disabled" | {
+                    backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
+                    borderColor: "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))";
+                } | {
+                    backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
+                    borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
+                };
+                opacity: "--cnvs-sys-opacity-disabled";
+            };
+        };
+    };
+}, {
+    readonly check: "cnvs-radio-check";
+}, {}, never, never>;
+export declare const radioInputWrapperStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        inverse: {
+            '&:hover:before, &.hover:before': {
+                boxShadow: string;
+            };
+        };
+    };
+    disabled: {
+        true: {
+            opacity: "--cnvs-sys-opacity-disabled";
+            '&:hover:before, &.hover:before': {
+                boxShadow: string;
+                cursor: string;
+            };
+        };
+    };
+}, {}, {}, never, never>;
 export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'> {
     variant?: 'inverse' | undefined;
 }

package/dist/es6/radio/lib/StyledRadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAQ/F,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA6MD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAsB5B,CAAC"}
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAA8B,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAKzF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiH5B,CAAC;AASH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;wBAsCnC,CAAC;AAmBH,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAsB5B,CAAC"}

package/dist/es6/radio/lib/StyledRadioButton.js

@@ -1,42 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { focusRing, createComponent, } from '@workday/canvas-kit-react/common';
+import { createComponent } from '@workday/canvas-kit-react/common';
 import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
-import { calc, createStencil, px2rem, handleCsProp } from '@workday/canvas-kit-styling';
-import { brand, system } from '@workday/canvas-tokens-web';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
 import { RadioLabelContext } from './RadioLabel';
-const radioWidth = 18;
-const radioHeight = 18;
-const radioInputStencil = createStencil({
-    base: { name: "q18z8", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+export const radioInputStencil = createStencil({
+    parts: {
+        check: 'cnvs-radio-check',
+    },
+    base: { name: "1choh2", styles: "box-sizing:border-box;cursor:pointer;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;opacity:var(--cnvs-sys-opacity-disabled);&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-default);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{outline:transparent;border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 0.25rem  var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}" },
     modifiers: {
         variant: {
-            inverse: { name: "3kijhl", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
+            inverse: { name: "34b3y4", styles: "+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}}&:hover + [data-part=\"cnvs-radio-check\"], &.hover + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"], &.focus:hover + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:focus-visible:checked + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover:checked + [data-part=\"cnvs-radio-check\"], &.focus:checked + [data-part=\"cnvs-radio-check\"], &.focus:hover:checked + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}" }
         }
     }
-}, "radio-input-f05aaa");
+}, "radio-input-edcf25");
 const StyledRadioInput = createComponent('input')({
     displayName: 'StyledRadioInput',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
         return _jsx(Element, { ref: ref, ...mergeStyles(elemProps, radioInputStencil({ variant })) });
     },
 });
-const radioInputWrapperStyles = createStencil({
-    base: { name: "1thwmw", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
+export const radioInputWrapperStencil = createStencil({
+    base: { name: "1i5gux", styles: "box-sizing:border-box;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:var(--cnvs-base-size-225, 1.125rem);transition:box-shadow 150ms ease-out;width:var(--cnvs-base-size-225, 1.125rem);pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}" },
     modifiers: {
         variant: {
-            inverse: { name: "2wq5ey", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            inverse: { name: "2k26p3", styles: "&:hover:before, &.hover:before{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}" }
         },
         disabled: {
-            true: { name: "2cl611", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+            true: { name: "3k861o", styles: "opacity:var(--cnvs-sys-opacity-disabled);&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
         }
     }
-}, "radio-input-wrapper-styles-fce2c4");
+}, "radio-input-wrapper-7ebbb3");
 const RadioInputWrapper = createComponent(Flex)({
     displayName: 'RadioInputWrapper',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
         const { disabled } = React.useContext(RadioLabelContext);
-        return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, radioInputWrapperStyles({ variant, disabled })), children: children }));
+        return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, radioInputWrapperStencil({ variant, disabled })), children: children }));
     },
 });
 /**
@@ -46,6 +47,6 @@ const RadioInputWrapper = createComponent(Flex)({
 export const StyledRadioButton = createComponent('input')({
     displayName: 'Radio',
     Component: ({ className, variant, disabled, ...elemProps }, ref, Element) => {
-        return (_jsxs(RadioInputWrapper, { className: className, variant: variant, disabled: disabled, children: [_jsx(StyledRadioInput, { as: Element, ref: ref, type: "radio", className: className, variant: variant, disabled: disabled, ...elemProps }), _jsx("span", { className: "cnvs-radio-check" })] }));
+        return (_jsxs(RadioInputWrapper, { className: className, variant: variant, disabled: disabled, children: [_jsx(StyledRadioInput, { as: Element, ref: ref, type: "radio", className: className, variant: variant, disabled: disabled, ...elemProps }), _jsx("span", { ...radioInputStencil.parts.check, className: "cnvs-radio-check" })] }));
     },
 });

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -1,6 +1,15 @@
 import * as React from 'react';
+/**
+ * @deprecated ⚠️ `SidePanelVariant` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export type SidePanelVariant = 'standard' | 'alternate';
+/**
+ * @deprecated ⚠️ `SidePanelTransitionStates` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
+/**
+ * @deprecated ⚠️ `SidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export interface SidePanelProps {
     /**
      * The width of the component (in `px` if it's a `number`) when it is collapsed.
@@ -54,6 +63,9 @@ export interface SidePanelProps {
     children?: React.ReactNode;
     onAnimationEnd?: React.TransitionEvent<HTMLElement>;
 }
+/**
+ * @deprecated ⚠️ `panelStencil` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
     variant: {
         alternate: {
@@ -61,7 +73,7 @@ export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil
             boxShadow: "--cnvs-sys-depth-5";
         };
         standard: {
-            backgroundColor: "--cnvs-sys-color-bg-alt-softer";
+            backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
         };
     };
     expanded: {
@@ -90,6 +102,9 @@ export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil
     expandedWidth: string;
     collapsedWidth: string;
 }, never, never>;
+/**
+ * @deprecated ⚠️ `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponent<"section", SidePanelProps> & {
     /**
      * `SidePanel.ToggleButton` is a control that is meant to toggle between `expanded = true` and

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAuCvB,CAAC;AAEH,eAAO,MAAM,SAAS;IAkFlB;;;;;;;;OAQG;;CAGL,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;CACrD;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAuCvB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,SAAS;IAkFlB;;;;;;;;OAQG;;CAGL,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -3,29 +3,35 @@ import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-import { SidePanelContext } from './hooks';
 import { SidePanelToggleButton } from './SidePanelToggleButton';
+import { SidePanelContext } from './hooks';
+/**
+ * @deprecated ⚠️ `panelStencil` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export const panelStencil = createStencil({
     vars: {
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "wo7c2", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    base: { name: "2fr2p3", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
     modifiers: {
         variant: {
-            alternate: { name: "3pjpkw", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
-            standard: { name: "3mi3tp", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+            alternate: { name: "1q0j5j", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "3oo7mq", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
         },
         expanded: {
-            true: { name: "3du83n", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
-            false: { name: "4719tu", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
+            true: { name: "37rk45", styles: "width:var(--expandedWidth-panel-cea5fb);max-width:var(--expandedWidth-panel-cea5fb);" },
+            false: { name: "4e345z", styles: "width:var(--collapsedWidth-panel-cea5fb);max-width:var(--collapsedWidth-panel-cea5fb);" }
         },
         touched: {
-            true: { name: "2lcqq6", styles: "" },
-            false: { name: "3oldao", styles: "animation:none;" }
+            true: { name: "40gw4u", styles: "" },
+            false: { name: "30yobx", styles: "animation:none;" }
         }
     }
-}, "panel-bd9477");
+}, "panel-cea5fb");
+/**
+ * @deprecated ⚠️ `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export const SidePanel = createComponent('section')({
     displayName: 'SidePanel',
     Component({ children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }, ref, Element) {

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts

@@ -1,5 +1,5 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
 export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton, never> {
     /**
      * The tooltip text to expand the side panel

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAQhE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IAC5F;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2EvC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,mGAoChC,CAAC"}
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAS/E,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IAC5F;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2EvC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,mGAoChC,CAAC"}

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -1,51 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { transformationImportIcon } from '@workday/canvas-system-icons-web';
+import { createComponent } from '@workday/canvas-kit-react/common';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { SidePanelContext } from './hooks';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { extendIcon } from '@workday/canvas-system-icons-web';
 import { system } from '@workday/canvas-tokens-web';
+import { SidePanelContext } from './hooks';
 export const sidePanelToggleButtonStencil = createStencil({
-    base: { name: "25w5z1", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    base: { name: "1x6djz", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));inset-inline-end:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" },
     modifiers: {
         state: {
-            collapsing: { name: "nbq9q", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "2nomue", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "3f478n", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "46761v", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "2yv516", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "1xx4w2", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "32m1lg", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "y7g9x", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            left: { name: "j1vjc", styles: "" },
-            right: { name: "1d9oot", styles: "" }
+            left: { name: "2odq1i", styles: "" },
+            right: { name: "27kea8", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "3m46r", styles: "transform:scaleX(-1);" }
+            styles: { name: "203e32", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "24c125", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "25l4em", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
         },
         {
             modifiers: { state: 'expanded', origin: 'right' },
-            styles: { name: "11e9yq", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "17qnqb", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
         },
         {
             modifiers: { state: 'expanding', origin: 'right' },
-            styles: { name: "40xvq6", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "1qpio8", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
         }
     ]
-}, "side-panel-toggle-button-da8098");
+}, "side-panel-toggle-button-eaff77");
 /**
  * A toggle button styled specifically for the side panel container.
  */
 export const SidePanelToggleButton = createComponent('button')({
     displayName: 'SidePanel.ToggleButton',
-    Component({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
+    Component({ variant = undefined, icon = extendIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
         const context = React.useContext(SidePanelContext);
         return (_jsx(Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted", children: _jsx(TertiaryButton, { type: "button", icon: icon, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
                     state: context.state,

package/dist/es6/side-panel/lib/hooks.d.ts

@@ -6,6 +6,7 @@ export declare const SidePanelContext: React.Context<{
 }>;
 /**
  * The optional config options for the `useSidePanel` hook
+ * @deprecated ⚠️ `UseSidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export interface UseSidePanelProps {
     /**
@@ -26,6 +27,7 @@ export interface UseSidePanelProps {
 }
 /**
  * The `panelProps` provided by the `useSidePanel` hook
+ * @deprecated ⚠️ `PanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export interface PanelProps {
     /**
@@ -48,6 +50,9 @@ export interface PanelProps {
      */
     touched: boolean;
 }
+/**
+ * @deprecated ⚠️ `LabelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export interface LabelProps {
     /**
      * the accessible `id`
@@ -55,6 +60,9 @@ export interface LabelProps {
      */
     id: string;
 }
+/**
+ * @deprecated ⚠️ `ControlProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
+ */
 export interface ControlProps {
     /**
      * the accessible `id` that connects the panel to this control
@@ -90,6 +98,7 @@ export interface ControlProps {
  *   labelId: 'custom-label-id',
  * });
  * ```
+ * @deprecated ⚠️ `useSidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export declare const useSidePanel: (config?: UseSidePanelProps) => {
     expanded: boolean;

package/dist/es6/side-panel/lib/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,gBAAgB;;;;EAI3B,CAAC;AAGH;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,YAAa,iBAAiB;;oCA2BR,OAAO;;;;CA8BrD,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB;;;;EAI3B,CAAC;AAEH;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,YAAa,iBAAiB;;oCA2BR,OAAO;;;;CA8BrD,CAAC"}

package/dist/es6/side-panel/lib/hooks.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { useUniqueId } from '@workday/canvas-kit-react/common';
 export const SidePanelContext = React.createContext({
     state: 'expanded',
     origin: 'left',
     handleAnimationStart: () => undefined,
 });
-import { useUniqueId } from '@workday/canvas-kit-react/common';
 /**
  *
  * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
@@ -19,6 +19,7 @@ import { useUniqueId } from '@workday/canvas-kit-react/common';
  *   labelId: 'custom-label-id',
  * });
  * ```
+ * @deprecated ⚠️ `useSidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.
  */
 export const useSidePanel = (config) => {
     const [touched, setTouched] = React.useState(false);

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { ExtractStencilProps } from '@workday/canvas-kit-styling';
 import { Flex } from '@workday/canvas-kit-react/layout';
+import { ExtractStencilProps } from '@workday/canvas-kit-styling';
 /**
  * @deprecated This is being deprecated and will be removed in a future release. Use
  * `StatusIndicatorProps['variant']` instead.
  */
-export type StatusIndicatorVariant = 'info' | 'neutral' | 'caution' | 'positive' | 'critical' | 'ai' | 'transparent' | 'blue' | 'green' | 'orange' | 'red' | 'gray';
+export type StatusIndicatorVariant = 'info' | 'neutral' | 'caution' | 'positive' | 'critical' | 'transparent' | 'blue' | 'green' | 'orange' | 'red' | 'gray';
 export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never>, Omit<ExtractStencilProps<typeof statusIndicatorStencil>, 'variant'> {
     /**
      * Defines the color of the `StatusIndicator`.
@@ -41,32 +41,28 @@ declare const statusIndicatorStencil: import("@workday/canvas-kit-styling").Sten
      */
     variant: {
         info: {
-            color: "--cnvs-sys-color-fg-info-strong";
-            backgroundColor: "--cnvs-sys-color-bg-info-softer";
+            color: "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))";
+            backgroundColor: "var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)))";
         };
         positive: {
-            color: "--cnvs-sys-color-fg-positive-strong";
-            backgroundColor: "--cnvs-sys-color-fg-positive-softer";
+            color: "var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1))";
+            backgroundColor: "var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15))";
         };
         caution: {
-            color: "--cnvs-sys-color-fg-caution-soft";
-            backgroundColor: "--cnvs-sys-color-bg-caution-softer";
+            color: "var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1))";
+            backgroundColor: "var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)))";
         };
         critical: {
-            color: "--cnvs-sys-color-fg-critical-strong";
-            backgroundColor: "--cnvs-sys-color-bg-critical-softer";
+            color: "var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)))";
+            backgroundColor: "var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1))";
         };
         neutral: {
             color: "--cnvs-sys-color-fg-muted-strong";
-            backgroundColor: "--cnvs-sys-color-bg-alt-default";
-        };
-        ai: {
-            color: "--cnvs-sys-color-fg-ai";
-            backgroundColor: "--cnvs-sys-color-bg-ai-default";
+            backgroundColor: "var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)))";
         };
         transparent: {
             color: "--cnvs-sys-color-fg-inverse";
-            backgroundColor: "--cnvs-sys-color-bg-translucent";
+            backgroundColor: "var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)))";
         };
     };
     /**

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAEvF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,IAAI,GACJ,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BH;;;;;;;;;OASG;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAMvF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BH;;;;;;;;;OASG;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}