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

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,wBAAwB;IAGjC;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAxBH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CL,CAAC"}

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentedControlModel = void 0;
+const react_1 = __importDefault(require("react"));
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const common_1 = require("@workday/canvas-kit-react/common");
+exports.useSegmentedControlModel = (0, common_1.createModelHook)({
+    defaultConfig: {
+        ...collection_1.useListModel.defaultConfig,
+        /**
+         * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
+         * @default useUniqueId()
+         */
+        id: '',
+        /**
+         * An initially selected value. This value must match the `data-id` of the `SegmentedControl.Item` component.
+         * If not provided, the first value will be selected.
+         */
+        initialValue: '',
+        /**
+         * Sets disabled state for all segmented control buttons
+         * @default false
+         */
+        disabled: false,
+        /**
+         * Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
+         * @default 'medium'
+         */
+        size: 'medium',
+        /**
+         * The SegmentedControl can rendered in a horizontal or vertical orientation.
+         * We suggest to use the `vertical` orientation only for icon only variant.
+         * @default 'horizontal'
+         */
+        orientation: 'horizontal',
+    },
+    requiredConfig: collection_1.useListModel.requiredConfig,
+})(config => {
+    var _a;
+    const getId = config.getId || collection_1.defaultGetId;
+    const initialSelectedRef = react_1.default.useRef(config.initialValue);
+    const items = config.items;
+    const model = (0, collection_1.useListModel)(collection_1.useListModel.mergeConfig(config, {
+        orientation: config.orientation || 'horizontal',
+        items,
+        onRegisterItem(data) {
+            if (!initialSelectedRef.current) {
+                initialSelectedRef.current = data.id;
+                events.select({ id: initialSelectedRef.current });
+            }
+        },
+        initialSelectedIds: config.initialValue
+            ? [config.initialValue]
+            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length)
+                ? [getId(config.items[0])]
+                : [],
+        shouldVirtualize: false,
+    }));
+    const state = {
+        ...model.state,
+        disabled: config.disabled,
+        size: config.size,
+    };
+    const events = {
+        ...model.events,
+    };
+    return {
+        ...model,
+        state,
+        events,
+    };
+});

package/dist/commonjs/select/lib/Select.d.ts

@@ -41,24 +41,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
     nonInteractiveIds: string[];
     orientation: import("../..").Orientation;
     defaultItemHeight: number;
-    items: any[]; /**
-     * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
-     *
-     * ```tsx
-     * <Select items={options}>
-     *  <FormField label="Your Label">
-     *    <Select.Input onChange={(event) => handleChange(event)}>
-     *    <Select.Popper>
-     *      <Select.Card>
-     *        <Select.List>
-     *          {(item) => <Select.Item>{item}</Select.Item>}
-     *        </Select.List
-     *      </Select.Card>
-     *    </Select.Popper>
-     *  </FormField>
-     * </Select>
-     * ```
-     */
+    items: any[];
     UNSTABLE_parentModel: {
         state: {
             selectedIds: string[] | "all";

package/dist/commonjs/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAK/E,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AACrE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;kBAoDf;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAjEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAO/E,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AACrE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}

package/dist/commonjs/select/lib/Select.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
-const useSelectModel_1 = require("./hooks/useSelectModel");
 const common_1 = require("@workday/canvas-kit-react/common");
-const SelectInput_1 = require("./SelectInput");
 const SelectCard_1 = require("./SelectCard");
+const SelectInput_1 = require("./SelectInput");
 const SelectItem_1 = require("./SelectItem");
+const useSelectModel_1 = require("./hooks/useSelectModel");
 /**
  * Use `Select` to allow users to choose an option from a list or type characters to select a matching option.
  *

package/dist/commonjs/select/lib/SelectCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCard.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectCard.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,iJAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC"}
+{"version":3,"file":"SelectCard.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectCard.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,iJAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC"}

package/dist/commonjs/select/lib/SelectCard.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectCard = exports.selectCardStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
+const common_1 = require("@workday/canvas-kit-react/common");
+const menu_1 = require("@workday/canvas-kit-react/menu");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const useSelectCard_1 = require("./hooks/useSelectCard");
 const useSelectModel_1 = require("./hooks/useSelectModel");
-const common_1 = require("@workday/canvas-kit-react/common");
-const menu_1 = require("@workday/canvas-kit-react/menu");
 exports.selectCardStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "52i5t", styles: "box-sizing:border-box;--maxHeight-menu-card-379062:18.75rem;" }
-}, "select-card-40598d");
+    base: { name: "r6a3x", styles: "box-sizing:border-box;--maxHeight-menu-card-88fe55:18.75rem;" }
+}, "select-card-249ab5");
 exports.SelectCard = (0, common_1.createSubcomponent)('div')({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectCard_1.useSelectCard,

package/dist/commonjs/select/lib/SelectInput.d.ts

@@ -1,7 +1,7 @@
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { CSProps } from '@workday/canvas-kit-styling';
-import { TextInput } from '@workday/canvas-kit-react/text-input';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { CSProps } from '@workday/canvas-kit-styling';
+import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
 export interface SelectInputProps extends ExtractProps<typeof TextInput, never>, CSProps {
     /**
      * The Icon to render at the start of the `input`. Use this prop if your options
@@ -22,7 +22,7 @@ export declare const selectInputStencil: import("@workday/canvas-kit-styling").S
             readonly visualInput: "select-visual-input";
         }>) => {
             "[data-part=\"select-visual-input\"]": {
-                backgroundColor: "--cnvs-brand-error-lightest";
+                backgroundColor: "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))";
             };
         };
         caution: ({ visualInputPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
@@ -35,7 +35,7 @@ export declare const selectInputStencil: import("@workday/canvas-kit-styling").S
             readonly visualInput: "select-visual-input";
         }>) => {
             "[data-part=\"select-visual-input\"]": {
-                backgroundColor: "--cnvs-brand-alert-lightest";
+                backgroundColor: "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))";
             };
         };
     };

package/dist/commonjs/select/lib/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAgB,OAAO,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAK3E,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAGlF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAoE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,gBAAgB,EAAqB,MAAM,kCAAkC,CAAC;AAMtF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}

package/dist/commonjs/select/lib/SelectInput.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectInput = exports.selectInputStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const text_input_1 = require("@workday/canvas-kit-react/text-input");
+const common_1 = require("@workday/canvas-kit-react/common");
 const icon_1 = require("@workday/canvas-kit-react/icon");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
+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 useSelectInput_1 = require("./hooks/useSelectInput");
 const useSelectModel_1 = require("./hooks/useSelectModel");
-const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         caret: 'select-caret-icon',
@@ -20,14 +20,14 @@ exports.selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
         hiddenInput: 'select-hidden-input',
         visualInput: 'select-visual-input',
     },
-    base: { name: "1ndv07", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-text-default);}&::selection{background-color:transparent;}}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}" },
+    base: { name: "3h4nh", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
     modifiers: {
         error: {
-            error: { name: "2lgtfs", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-error-lightest);}" },
-            caution: { name: "1yc8fj", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-alert-lightest);}" }
+            error: { name: "30pfjb", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
+            caution: { name: "i38v9", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
         }
     }
-}, "select-input-9444aa");
+}, "select-input-8483f2");
 exports.SelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectInput_1.useSelectInput,

package/dist/commonjs/select/lib/SelectItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectItem.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC"}
+{"version":3,"file":"SelectItem.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectItem.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC"}

package/dist/commonjs/select/lib/SelectItem.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
-const useSelectModel_1 = require("./hooks/useSelectModel");
 const common_1 = require("@workday/canvas-kit-react/common");
+const useSelectModel_1 = require("./hooks/useSelectModel");
 exports.SelectItem = (0, common_1.createSubcomponent)('li')({
     modelHook: useSelectModel_1.useSelectModel,
     subComponents: {

package/dist/commonjs/select/lib/hooks/useSelectCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectCard.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectCard.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIxB,CAAC"}
+{"version":3,"file":"useSelectCard.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectCard.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIxB,CAAC"}

package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2CF,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsC3C,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2CF,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsC3C,CAAC"}

package/dist/commonjs/select/lib/hooks/useSelectInput.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectInput = void 0;
 const react_1 = __importDefault(require("react"));
-const common_1 = require("@workday/canvas-kit-react/common");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
+const common_1 = require("@workday/canvas-kit-react/common");
 const useSelectModel_1 = require("./useSelectModel");
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).

package/dist/commonjs/select/lib/hooks/useSelectModel.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectModel = void 0;
-const common_1 = require("@workday/canvas-kit-react/common");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
+const common_1 = require("@workday/canvas-kit-react/common");
 /**
  * `SelectModel` extends the {@link ComboboxModel}. Selecting items from
  * the menu will dispatch an

package/dist/commonjs/side-panel/index.d.ts

@@ -1,2 +1,4 @@
 export * from './lib/SidePanel';
+export * from './lib/SidePanelToggleButton';
+export * from './lib/useSidePanelModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/side-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/side-panel/index.js

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/SidePanel"), exports);
+__exportStar(require("./lib/SidePanelToggleButton"), exports);
+__exportStar(require("./lib/useSidePanelModel"), exports);

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

@@ -1,97 +1,227 @@
 import * as React from 'react';
-import { CanvasSpaceValues } from '@workday/canvas-kit-react/tokens';
+import { CSProps } from '@workday/canvas-kit-styling';
 /**
- * @deprecated ⚠️ `SidePanelProps` in Main has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-side-panel--docs) instead.
+ * Adds the necessary props to the SidePanel container element.
+ * This includes the `id` and `aria-labelledby` attributes for accessibility.
  */
-export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * If true, set the SidePanel to the open state.
-     * @default false;
-     */
-    open: boolean;
-    /**
-     * The function called when the toggle button is clicked. The toggle button is only shown if this prop is defined.
-     */
-    onToggleClick?: () => void;
-    /**
-     * The text or element to display as the SidePanel header.
-     */
-    header?: string | React.ReactNode;
-    /**
-     * The side from which the SidePanel opens. Accepts `Left` or `Right`.
-     * @default SidePanelOpenDirection.Left
-     */
-    openDirection?: SidePanelOpenDirection;
-    /**
-     * The function called when the window width changes and reaches a width equivalent to `breakpoint`. For example, if the window is resized from a width of `1000px`, this will be called when the window reaches a width equivalent to `breakpoint`. The `aboveBreakpoint` argument passed to the callback function indicates whether the current window width is above or below `breakpoint` so you can control `open` based on the change.
-     */
-    onBreakpointChange?: (aboveBreakpoint: boolean) => void;
-    /**
-     * The padding of the SidePanel when it's open.
-     */
-    padding?: CanvasSpaceValues;
+export declare const useSidePanelContainer: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}, {
+    readonly id: string;
+    readonly 'aria-labelledby': string;
+    readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
+}>;
+export type SidePanelVariant = 'standard' | 'alternate';
+export interface SidePanelProps extends CSProps {
     /**
-     * The window width at which the SidePanel triggers `onBreakPointChange`.
-     * @default 768px
+     * The width of the component (in `px` if it's a `number`) when it is collapsed.
+     *
+     * @default 64
      */
-    breakpoint?: number;
+    collapsedWidth?: number | string;
     /**
-     * The width of the SidePanel when it's open.
-     * @default 300px
+     * The width of the component (in `px` if it's a `number`) when it is expanded.
+     *
+     * @default 320
      */
-    openWidth?: number;
+    expandedWidth?: number | string;
     /**
-     * The background color of the SidePanel when it's open.
-     * @default SidePanelBackgroundColor.White
+     * The style variant of the side panel. 'standard' uses a lighter gray background (`system.color.bg.alt.softer`), no depth. 'alternate' uses a white background with depth (`system.color.bg.default` and level 3 depth).
+     *
+     * @default 'standard'
      */
-    backgroundColor?: SidePanelBackgroundColor;
+    variant?: SidePanelVariant;
+    children?: React.ReactNode;
+}
+export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        alternate: {
+            backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
+            boxShadow: "--cnvs-sys-depth-3";
+        };
+        standard: {
+            backgroundColor: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
+        };
+    };
+    expanded: {
+        expanded: ({ expandedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        collapsed: ({ collapsedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        expanding: ({ expandedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        collapsing: ({ collapsedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+    };
+}, {}, {
+    expandedWidth: string;
+    collapsedWidth: string;
+}, never, never>;
+export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponentM<"section", SidePanelProps & Partial<{
+    initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+    origin: "end" | "start";
+    panelId: string;
+    labelId: string;
+    onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+}> & {
+    onExpand?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onCollapse?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationStart?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+} & {
+    shouldExpand?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldCollapse?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationStart?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+}, {
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}> & {
     /**
-     * The `aria-label` that describes closing the navigation.
-     * @default 'close navigation'
+     * `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
+     * It must be used within the `SidePanel` component as a child. For accessibility purposes,
+     * it should be the first focusable element in the panel.
+     *
+     * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
+     * attributes from the model.
      */
-    closeNavigationAriaLabel?: string;
+    ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
+        state: {
+            panelId: string;
+            labelId: string;
+            transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+            initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+            origin: "end" | "start";
+            onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+        };
+        events: {
+            expand(): void;
+            collapse(): void;
+            handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+            handleAnimationStart(): undefined;
+        };
+    }>;
     /**
-     * The `aria-label` that describes opening the navigation.
-     * @default 'open navigation'
+     * `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
+     * The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
+     * By default, the heading is hidden when the panel is collapsed.
      */
-    openNavigationAriaLabel?: string;
-}
-/**
- * @deprecated ⚠️ `SidePanelState` in Main has been deprecated and will be removed in a future major version.
- */
-export interface SidePanelState {
-    screenSize: number;
-}
-/**
- * @deprecated ⚠️ `SidePanelOpenDirection` in Main has been deprecated and will be removed in a future major version.
- */
-export declare enum SidePanelOpenDirection {
-    Left = 0,
-    Right = 1
-}
-/**
- * @deprecated ⚠️ `SidePanelBackgroundColor` in Main has been deprecated and will be removed in a future major version.
- */
-export declare enum SidePanelBackgroundColor {
-    White = 0,
-    Transparent = 1,
-    Gray = 2
-}
-/**
- * @deprecated ⚠️ `SidePanel` in Main has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-side-panel--docs) instead.
- */
-export declare class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
-    static OpenDirection: typeof SidePanelOpenDirection;
-    static BackgroundColor: typeof SidePanelBackgroundColor;
-    constructor(props: SidePanelProps);
-    state: {
-        screenSize: number;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    private handleResize;
-    private onToggleClick;
-    private toggleButtonDirection;
-}
+    Heading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("../..").TypeLevelProps>, import("./SidePanelHeading").SidePanelHeadingProps, {
+        state: {
+            panelId: string;
+            labelId: string;
+            transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+            initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+            origin: "end" | "start";
+            onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+        };
+        events: {
+            expand(): void;
+            collapse(): void;
+            handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+            handleAnimationStart(): undefined;
+        };
+    }>;
+};
 //# sourceMappingURL=SidePanel.d.ts.map