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

package/dist/commonjs/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/commonjs/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/commonjs/radio/lib/StyledRadioButton.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledRadioButton = void 0;
+exports.StyledRadioButton = exports.radioInputWrapperStencil = exports.radioInputStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
@@ -11,38 +11,39 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const RadioLabel_1 = require("./RadioLabel");
-const radioWidth = 18;
-const radioHeight = 18;
-const radioInputStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2twxxz", 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);}" },
+exports.radioInputStencil = (0, canvas_kit_styling_1.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: "1bfo4s", 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 = (0, common_1.createComponent)('input')({
     displayName: 'StyledRadioInput',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
-        return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, radioInputStencil({ variant })) });
+        return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.radioInputStencil)({ variant })) });
     },
 });
-const radioInputWrapperStyles = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "x6882", 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);}" },
+exports.radioInputWrapperStencil = (0, canvas_kit_styling_1.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: "voqtg", 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: "33nghx", 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 = (0, common_1.createComponent)(layout_1.Flex)({
     displayName: 'RadioInputWrapper',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
         const { disabled } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
-        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, radioInputWrapperStyles({ variant, disabled })), children: children }));
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.radioInputWrapperStencil)({ variant, disabled })), children: children }));
     },
 });
 /**
@@ -52,6 +53,6 @@ const RadioInputWrapper = (0, common_1.createComponent)(layout_1.Flex)({
 exports.StyledRadioButton = (0, common_1.createComponent)('input')({
     displayName: 'Radio',
     Component: ({ className, variant, disabled, ...elemProps }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsxs)(RadioInputWrapper, { className: className, variant: variant, disabled: disabled, children: [(0, jsx_runtime_1.jsx)(StyledRadioInput, { as: Element, ref: ref, type: "radio", className: className, variant: variant, disabled: disabled, ...elemProps }), (0, jsx_runtime_1.jsx)("span", { className: "cnvs-radio-check" })] }));
+        return ((0, jsx_runtime_1.jsxs)(RadioInputWrapper, { className: className, variant: variant, disabled: disabled, children: [(0, jsx_runtime_1.jsx)(StyledRadioInput, { as: Element, ref: ref, type: "radio", className: className, variant: variant, disabled: disabled, ...elemProps }), (0, jsx_runtime_1.jsx)("span", { ...exports.radioInputStencil.parts.check, className: "cnvs-radio-check" })] }));
     },
 });

package/dist/commonjs/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/commonjs/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/commonjs/side-panel/lib/SidePanel.js

@@ -29,29 +29,35 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const hooks_1 = require("./hooks");
 const SidePanelToggleButton_1 = require("./SidePanelToggleButton");
+const hooks_1 = require("./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.
+ */
 exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "43ju33", 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: "fej6f", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
-            standard: { name: "21eyoi", 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: "3d524k", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
-            false: { name: "46gj4q", 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: "75k3p", styles: "" },
-            false: { name: "403jwq", 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.
+ */
 exports.SidePanel = (0, common_1.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/commonjs/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/commonjs/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/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -26,52 +26,52 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePanelToggleButton = exports.sidePanelToggleButtonStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const common_1 = require("@workday/canvas-kit-react/common");
 const button_1 = require("@workday/canvas-kit-react/button");
-const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const common_1 = require("@workday/canvas-kit-react/common");
 const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const hooks_1 = require("./hooks");
 exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "wtkxa", 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: "4179lu", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "1qtmtb", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "3o5uao", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "f9ybb", 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: "16qghg", styles: "" },
-            right: { name: "1c3o12", styles: "" }
+            left: { name: "2odq1i", styles: "" },
+            right: { name: "27kea8", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "19fml8", styles: "transform:scaleX(-1);" }
+            styles: { name: "203e32", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "1w5g0", 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: "2aq5uj", 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: "brw22", 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.
  */
 exports.SidePanelToggleButton = (0, common_1.createComponent)('button')({
     displayName: 'SidePanel.ToggleButton',
-    Component({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
+    Component({ variant = undefined, icon = canvas_system_icons_web_1.extendIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
         const context = React.useContext(hooks_1.SidePanelContext);
         return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted", children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { type: "button", icon: icon, variant: variant, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
                     state: context.state,

package/dist/commonjs/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/commonjs/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/commonjs/side-panel/lib/hooks.js

@@ -25,12 +25,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSidePanel = exports.SidePanelContext = void 0;
 const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
 exports.SidePanelContext = React.createContext({
     state: 'expanded',
     origin: 'left',
     handleAnimationStart: () => undefined,
 });
-const common_1 = require("@workday/canvas-kit-react/common");
 /**
  *
  * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
@@ -45,6 +45,7 @@ const common_1 = require("@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.
  */
 const useSidePanel = (config) => {
     const [touched, setTouched] = React.useState(false);

package/dist/commonjs/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/commonjs/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"}

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const layout_1 = require("@workday/canvas-kit-react/layout");
-const icon_1 = require("@workday/canvas-kit-react/icon");
 const StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
 const StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
 // TODO: Remove this in a future release
@@ -18,7 +18,7 @@ const deprecatedVariantsMap = {
     gray: 'neutral',
 };
 const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3f4qvc", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-round);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);outline:0.0625rem solid transparent;--color-system-icon-3a4847:currentColor;" },
+    base: { name: "3476o5", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
     modifiers: {
         /**
          * Defines the color of the `StatusIndicator`.
@@ -33,13 +33,12 @@ const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
          * @default 'neutral'
          */
         variant: {
-            info: { name: "1s61y8", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
-            positive: { name: "3tfvkp", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
-            caution: { name: "12an3t", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
-            critical: { name: "20dtg7", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
-            neutral: { name: "vjzzy", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
-            ai: { name: "2krgei", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
-            transparent: { name: "37vfbo", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
+            info: { name: "b4eki", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
+            positive: { name: "16j92m", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
+            caution: { name: "3ujgu0", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
+            critical: { name: "3gofff", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
+            neutral: { name: "4c7hpn", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
+            transparent: { name: "1rcrsa", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
         },
         /**
          * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
@@ -52,8 +51,8 @@ const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
          *
          */
         emphasis: {
-            low: { name: "1lsruo", styles: "" },
-            high: { name: "3l5psq", styles: "" }
+            low: { name: "1k8y8s", styles: "" },
+            high: { name: "2i6rok", styles: "" }
         }
     },
     compound: [
@@ -62,42 +61,42 @@ const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
                 variant: 'info',
                 emphasis: 'high',
             },
-            styles: { name: "3p9u4h", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "392z83", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'positive',
                 emphasis: 'high',
             },
-            styles: { name: "1t7ehj", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "28kltp", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'caution',
                 emphasis: 'high',
             },
-            styles: { name: "1tyluv", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
+            styles: { name: "3bkx75", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
         },
         {
             modifiers: {
                 variant: 'critical',
                 emphasis: 'high',
             },
-            styles: { name: "4empw0", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "3k3ozm", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'neutral',
                 emphasis: 'high',
             },
-            styles: { name: "zsqv7", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1p86nc", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ],
     defaultModifiers: {
         variant: 'neutral',
         emphasis: 'low',
     }
-}, "status-indicator-c55f02");
+}, "status-indicator-dc1ecc");
 /**
  * `StatusIndicator` is a container component has a default maximum width of `200px`.
  *