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

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

@@ -5,27 +5,33 @@ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling
 import { system } from '@workday/canvas-tokens-web';
 import { SidePanelContext } from './hooks';
 import { SidePanelToggleButton } from './SidePanelToggleButton';
+/**
+ * @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: "2radwp", 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: "3wk1rr", 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: "mzzo2", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
-            standard: { name: "bb551", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+            alternate: { name: "52tip", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "1xp297", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
         },
         expanded: {
-            true: { name: "uru8c", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
-            false: { name: "2bwgmi", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
+            true: { name: "248qlf", styles: "width:var(--expandedWidth-panel-8771e1);max-width:var(--expandedWidth-panel-8771e1);" },
+            false: { name: "s8a9", styles: "width:var(--collapsedWidth-panel-8771e1);max-width:var(--collapsedWidth-panel-8771e1);" }
         },
         touched: {
-            true: { name: "6j7kr", styles: "" },
-            false: { name: "1sxcnq", styles: "animation:none;" }
+            true: { name: "dc6fy", styles: "" },
+            false: { name: "44byep", styles: "animation:none;" }
         }
     }
-}, "panel-bd9477");
+}, "panel-8771e1");
+/**
+ * @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.js

@@ -8,35 +8,35 @@ import { SidePanelContext } from './hooks';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const sidePanelToggleButtonStencil = createStencil({
-    base: { name: "2bxmsy", 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: "3pqj4r", 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);" },
     modifiers: {
         state: {
-            collapsing: { name: "31xhb9", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "mbj4m", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "245x3n", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "270t7v", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "47ocnw", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "197nbg", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "of5qn", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "1wz9uy", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            left: { name: "46m3mf", styles: "" },
-            right: { name: "6tbwn", styles: "" }
+            left: { name: "351l2q", styles: "" },
+            right: { name: "26noow", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "7lqxa", styles: "transform:scaleX(-1);" }
+            styles: { name: "te8m9", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "2nutw0", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "1s2s05", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanded', origin: 'right' },
-            styles: { name: "1t5i2l", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "4h0ab", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanding', origin: 'right' },
-            styles: { name: "293hsd", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "sx6q9", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         }
     ]
 }, "side-panel-toggle-button-da8098");

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;AAE/B,eAAO,MAAM,gBAAgB;;;;EAI3B,CAAC;AAGH;;;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

@@ -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.js

@@ -15,7 +15,7 @@ const deprecatedVariantsMap = {
     gray: 'neutral',
 };
 const statusIndicatorStencil = createStencil({
-    base: { name: "1b5wqr", 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: "3u1uei", 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;" },
     modifiers: {
         /**
          * Defines the color of the `StatusIndicator`.
@@ -30,13 +30,13 @@ const statusIndicatorStencil = createStencil({
          * @default 'neutral'
          */
         variant: {
-            info: { name: "33pylk", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
-            positive: { name: "372lln", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
-            caution: { name: "2cra6s", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
-            critical: { name: "1g1x7w", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
-            neutral: { name: "k8g4k", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
-            ai: { name: "2fx4h0", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
-            transparent: { name: "2w19a5", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
+            info: { name: "2tlm1a", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
+            positive: { name: "zz7mo", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
+            caution: { name: "3ypedd", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
+            critical: { name: "3nmkej", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
+            neutral: { name: "4dz17l", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
+            ai: { name: "3di9hq", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
+            transparent: { name: "3hsm6q", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
         },
         /**
          * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
@@ -49,8 +49,8 @@ const statusIndicatorStencil = createStencil({
          *
          */
         emphasis: {
-            low: { name: "enam1", styles: "" },
-            high: { name: "1wzj1w", styles: "" }
+            low: { name: "2dr78", styles: "" },
+            high: { name: "4186r6", styles: "" }
         }
     },
     compound: [
@@ -59,35 +59,35 @@ const statusIndicatorStencil = createStencil({
                 variant: 'info',
                 emphasis: 'high',
             },
-            styles: { name: "44ivn3", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "14x7g4", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'positive',
                 emphasis: 'high',
             },
-            styles: { name: "2xobhz", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "4e0x9s", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'caution',
                 emphasis: 'high',
             },
-            styles: { name: "3a9iyd", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
+            styles: { name: "1qaivm", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
         },
         {
             modifiers: {
                 variant: 'critical',
                 emphasis: 'high',
             },
-            styles: { name: "1ody6i", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1rfquo", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'neutral',
                 emphasis: 'high',
             },
-            styles: { name: "1d5r08", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "2bfcn8", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ],
     defaultModifiers: {

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js

@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 const statusIndicatorLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "1vrvsx", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
+    base: { name: "3bwvyy", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
     defaultModifiers: { typeLevel: 'subtext.large' }
 }, "status-indicator-label-63258e");
 export const StatusIndicatorLabel = createComponent('span')({

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '14.1.27';
+export const version = '14.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "15.0.0-alpha.0056-next.0",
+  "version": "15.0.0-alpha.0064-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0056-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0056-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0064-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0064-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
+  "gitHead": "74d356998c8a3fe27e6a54ef1db7128320b4b2ed"
 }

package/side-panel/lib/SidePanel.tsx

@@ -5,9 +5,18 @@ import {system} from '@workday/canvas-tokens-web';
 import {SidePanelContext} from './hooks';
 import {SidePanelToggleButton} from './SidePanelToggleButton';
 
+/**
+ * @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.
@@ -62,6 +71,9 @@ export interface SidePanelProps {
   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 const panelStencil = createStencil({
   vars: {
     expandedWidth: '',
@@ -103,6 +115,9 @@ export const panelStencil = createStencil({
   },
 });
 
+/**
+ * @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(

package/side-panel/lib/hooks.ts

@@ -9,6 +9,7 @@ export const SidePanelContext = React.createContext({
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 /**
  * 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 {
   /**
@@ -30,6 +31,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 {
   /**
@@ -53,6 +55,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`
@@ -61,6 +66,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
@@ -97,6 +105,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 const useSidePanel = (config?: UseSidePanelProps) => {
   const [touched, setTouched] = React.useState(false);