@workday/canvas-kit-preview-react 13.0.0-alpha.998-next.0 → 13.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,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"}
+{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,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

@@ -48,7 +48,7 @@ exports.useSegmentedControlModel = (0, common_1.createModelHook)({
         items,
         onRegisterItem(data) {
             if (!initialSelectedRef.current) {
-                initialSelectedRef.current = getId(data.item);
+                initialSelectedRef.current = data.id;
                 events.select({ id: initialSelectedRef.current });
             }
         },

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

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = 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 SelectMenu_1 = require("./SelectMenu");
@@ -466,7 +467,7 @@ class SelectContainer extends React.Component {
                 onOptionSelection: this.handleOptionSelection,
             }
             : {};
-        return (React.createElement(SelectBase_1.SelectBase, { forwardedButtonRef: this.forwardedButtonRef, localButtonRef: this.localButtonRef, focusedOptionIndex: focusedOptionIndex, inputRef: this.inputRef, menuRef: this.menuRef, menuVisibility: menuVisibility, options: this.normalizedOptions, value: value, ...eventHandlers, ...elemProps }));
+        return ((0, jsx_runtime_1.jsx)(SelectBase_1.SelectBase, { forwardedButtonRef: this.forwardedButtonRef, localButtonRef: this.localButtonRef, focusedOptionIndex: focusedOptionIndex, inputRef: this.inputRef, menuRef: this.menuRef, menuVisibility: menuVisibility, options: this.normalizedOptions, value: value, ...eventHandlers, ...elemProps }));
     }
 }
 SelectContainer.ErrorType = common_1.ErrorType;
@@ -478,7 +479,7 @@ exports.Select = (0, common_1.createComponent)('button')({
     Component: (props, ref, Element) => (
     // Select is still a class component, so we render a renamed version of it
     // (SelectContainer) and pass it ref and Element
-    React.createElement(SelectContainer, { as: Element, buttonRef: ref, ...props })),
+    (0, jsx_runtime_1.jsx)(SelectContainer, { as: Element, buttonRef: ref, ...props })),
     subComponents: {
         ErrorType: common_1.ErrorType,
     },

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

@@ -160,6 +160,6 @@ export declare const buttonBorderWidth = 1;
 /**
  * @deprecated ⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
  */
-export declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onBlur, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => React.JSX.Element;
+export declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onBlur, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SelectBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EACL,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EAIV,MAAM,kCAAkC,CAAC;AAQ1C,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAGtD,UAAU,UAAU;IAIlB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AACD;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AACD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,MAAM;IAE9C,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AACD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC;CAC7C;AACD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC;CAC7C;AACD;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EAC7D,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC;;;;;;;;;;;;;;OAcG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,UAAU;IACtE;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAClD;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACpD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;;;;;OAOG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,IAAI,CAAC;AA4GnC;;GAEG;AACH,eAAO,MAAM,UAAU,sXA2BpB,eAAe,sBAwKjB,CAAC"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}

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

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectBase = exports.buttonBorderWidth = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -116,7 +117,7 @@ const SelectWrapper = (0, common_1.styled)('div')({
     },
 }));
 const defaultRenderOption = option => {
-    return react_1.default.createElement("div", null, defaultRenderSelected(option));
+    return (0, jsx_runtime_1.jsx)("div", { children: defaultRenderSelected(option) });
 };
 const defaultRenderSelected = option => {
     return option.label;
@@ -158,7 +159,7 @@ const SelectBase = ({ 'aria-labelledby': ariaLabelledBy, 'aria-required': ariaRe
                 focused: optionProps.focused,
                 selected: !!optionProps['aria-selected'],
             };
-            return react_1.default.createElement(SelectOption_1.SelectOption, { ...optionProps }, renderOption(normalizedOption));
+            return (0, jsx_runtime_1.jsx)(SelectOption_1.SelectOption, { ...optionProps, children: renderOption(normalizedOption) });
         });
     };
     // If the focused option changed, scroll the newly focused option into view (if
@@ -215,24 +216,20 @@ const SelectBase = ({ 'aria-labelledby': ariaLabelledBy, 'aria-required': ariaRe
     const hasOptions = options.length > 0;
     const selectedOption = hasOptions ? options[(0, utils_1.getCorrectedIndexByValue)(options, value)] : null;
     const selectedOptionValue = selectedOption ? selectedOption.value : '';
-    return (react_1.default.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-        react_1.default.createElement(SelectButton, { "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, onBlur: event => {
-                if (menuVisibility === 'closed') {
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-                }
-                else {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            }, 
-            // Prevent Firefox from triggering click handler on spacebar during
-            // type-ahead when the menu is closed (and, thus, incorrectly displaying
-            // the menu)
-            onKeyUp: e => {
-                e.preventDefault();
-            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue, ...elemProps }, !!selectedOption && renderSelected(selectedOption)),
-        react_1.default.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),
-        hasOptions && menuVisibility !== 'closed' && (react_1.default.createElement(SelectMenu_1.SelectMenu, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility }, renderOptions(renderOption))),
-        react_1.default.createElement(SelectMenuIcon, { className: "menu-icon", icon: canvas_system_icons_web_1.caretDownSmallIcon, color: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200, colorHover: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500, size: `${menuIconSize}rem` })));
+    return ((0, jsx_runtime_1.jsxs)(SelectWrapper, { grow: grow, disabled: disabled, children: [(0, jsx_runtime_1.jsx)(SelectButton, { "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, onBlur: event => {
+                    if (menuVisibility === 'closed') {
+                        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                    }
+                    else {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }, 
+                // Prevent Firefox from triggering click handler on spacebar during
+                // type-ahead when the menu is closed (and, thus, incorrectly displaying
+                // the menu)
+                onKeyUp: e => {
+                    e.preventDefault();
+                }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue, ...elemProps, children: !!selectedOption && renderSelected(selectedOption) }), (0, jsx_runtime_1.jsx)(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }), hasOptions && menuVisibility !== 'closed' && ((0, jsx_runtime_1.jsx)(SelectMenu_1.SelectMenu, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility, children: renderOptions(renderOption) })), (0, jsx_runtime_1.jsx)(SelectMenuIcon, { className: "menu-icon", icon: canvas_system_icons_web_1.caretDownSmallIcon, color: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200, colorHover: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500, size: `${menuIconSize}rem` })] }));
 };
 exports.SelectBase = SelectBase;

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

@@ -40,6 +40,6 @@ export declare const menuAnimationDuration = 200;
 /**
  * @deprecated ⚠️ `SelectMenu` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
  */
-export declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => React.JSX.Element;
+export declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SelectMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AA8KzC;;GAEG;AACH,eAAO,MAAM,UAAU,2HAWpB,eAAe,sBA2DjB,CAAC"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AA8KzC;;GAEG;AACH,eAAO,MAAM,UAAU,2HAWpB,eAAe,4CA2DjB,CAAC"}

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

@@ -1,30 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectMenu = exports.menuAnimationDuration = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -207,13 +185,11 @@ const SelectMenu = ({ buttonRef, children, error, menuRef, onClose, placement =
     (0, popup_1.useCloseOnOutsideClick)(model);
     (0, popup_1.useReturnFocus)(model);
     (0, popup_1.useTransferOnFullscreenExit)(model);
-    return (react_1.default.createElement(popup_1.Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
+    return ((0, jsx_runtime_1.jsx)(popup_1.Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
             menuRef,
             placement,
             shouldAutoFlip,
             shouldAutoFocus,
-        }), ref: model.state.stackRef },
-        react_1.default.createElement(Menu, { error: error, visibility: visibility, width: width },
-            react_1.default.createElement(MenuList, { error: error, ref: menuRef, role: "listbox", tabIndex: -1, ...elemProps }, children))));
+        }), ref: model.state.stackRef, children: (0, jsx_runtime_1.jsx)(Menu, { error: error, visibility: visibility, width: width, children: (0, jsx_runtime_1.jsx)(MenuList, { error: error, ref: menuRef, role: "listbox", tabIndex: -1, ...elemProps, children: children }) }) }));
 };
 exports.SelectMenu = SelectMenu;

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

@@ -34,5 +34,5 @@ export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTM
 /**
  * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
  */
-export declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => React.JSX.Element;
+export declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SelectOption.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED;;GAEG;AACH,eAAO,MAAM,YAAY,uEAOtB,iBAAiB,sBAanB,CAAC"}
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED;;GAEG;AACH,eAAO,MAAM,YAAY,uEAOtB,iBAAiB,4CAanB,CAAC"}

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

@@ -1,30 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectOption = void 0;
-const React = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const optionPadding = 6;
@@ -91,6 +68,6 @@ const Option = (0, common_1.styled)('li')({
  * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
  */
 const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
-    return (React.createElement(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps }, children));
+    return ((0, jsx_runtime_1.jsx)(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps, children: children }));
 };
 exports.SelectOption = SelectOption;

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

@@ -1,5 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
 import * as React from 'react';
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -54,9 +52,44 @@ export interface SidePanelProps {
      */
     touched: boolean;
     children?: React.ReactNode;
-    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.TransitionEvent<HTMLElement>;
 }
+export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        alternate: {
+            backgroundColor: "--cnvs-sys-color-bg-default";
+            boxShadow: "--cnvs-sys-depth-5";
+        };
+        standard: {
+            backgroundColor: "--cnvs-sys-color-bg-alt-softer";
+        };
+    };
+    expanded: {
+        true: ({ expandedWidth }: {
+            expandedWidth: string;
+            collapsedWidth: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: string;
+            maxWidth: string;
+        };
+        false: ({ collapsedWidth }: {
+            expandedWidth: string;
+            collapsedWidth: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: string;
+            maxWidth: string;
+        };
+    };
+    touched: {
+        true: {};
+        false: {
+            animation: "none";
+        };
+    };
+}, {}, {
+    expandedWidth: string;
+    collapsedWidth: string;
+}, never, never>;
 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,0BAA0B;AAC1B,eAAe;AACf,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,gBAAgB,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC;CAC3D;AAsCD,eAAO,MAAM,SAAS;IAwGlB;;;;;;;;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;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"}

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

@@ -23,50 +23,38 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePanel = void 0;
-/** @jsxRuntime classic */
-/** @jsx jsx */
+exports.SidePanel = exports.panelStencil = 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 react_1 = require("@emotion/react");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
+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 createKeyframes = (from, to) => {
-    const normalized = {
-        from: typeof from === 'number' ? from + 'px' : from,
-        to: typeof to === 'number' ? to + 'px' : to,
-    };
-    return (0, react_1.keyframes) `
-    from {
-      width: ${normalized.from};
-      min-width: ${normalized.from};
-      max-width: ${normalized.from};
-    } to {
-      width: ${normalized.to};
-      min-width: ${normalized.to};
-      max-width: ${normalized.to};
-    }
-  `;
-};
-const containerVariantStyle = {
-    alternate: {
-        backgroundColor: tokens_1.colors.frenchVanilla100,
-        ...tokens_1.depth[5],
+exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        expandedWidth: '',
+        collapsedWidth: '',
     },
-    standard: {
-        backgroundColor: tokens_1.colors.soap100,
-    },
-};
-const Panel = (0, common_1.styled)('section')({
-    overflow: 'hidden',
-    position: 'relative',
-    boxSizing: 'border-box',
-    height: '100%',
-});
+    base: { name: "htmr3b", 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: "htmr3c", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "htmr3d", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+        },
+        expanded: {
+            true: { name: "htmr3e", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
+            false: { name: "htmr3f", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
+        },
+        touched: {
+            true: { name: "htmr3g", styles: "" },
+            false: { name: "htmr3h", styles: "animation:none;" }
+        }
+    }
+}, "panel-bd9477");
 exports.SidePanel = (0, common_1.createComponent)('section')({
     displayName: 'SidePanel',
-    Component({ children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }, ref, Element) {
+    Component({ children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }, ref, Element) {
         const [state, setState] = React.useState(expanded ? 'expanded' : 'collapsed');
         React.useEffect(() => {
             if (typeof onExpandedChange !== 'undefined') {
@@ -78,50 +66,37 @@ exports.SidePanel = (0, common_1.createComponent)('section')({
                 onStateTransition(state);
             }
         }, [state, onStateTransition]);
-        const motion = {
-            collapse: createKeyframes(expandedWidth, collapsedWidth),
-            expand: createKeyframes(collapsedWidth, expandedWidth),
-        };
         const handleAnimationEnd = (event) => {
-            if (event.currentTarget === event.target) {
-                if (event.animationName === motion.collapse.name) {
-                    setState('collapsed');
-                }
-                if (event.animationName === motion.expand.name) {
+            if (event.propertyName === 'width') {
+                if (state === 'expanding') {
                     setState('expanded');
                 }
-            }
-            if (typeof onAnimationEnd !== 'undefined') {
-                onAnimationEnd(event);
+                else if (state === 'collapsing') {
+                    setState('collapsed');
+                }
             }
         };
-        const handleAnimationStart = (event) => {
-            if (event.currentTarget === event.target) {
-                if (event.animationName === motion.collapse.name ||
-                    event.animationName === motion.expand.name) {
-                    setState(expanded ? 'expanding' : 'collapsing');
-                }
+        const handleAnimationStart = () => {
+            if (state === 'collapsed' || state === 'collapsing') {
+                setState('expanding');
             }
-            if (typeof onAnimationStart !== 'undefined') {
-                onAnimationStart(event);
+            else if (state === 'expanded' || state === 'expanding') {
+                setState('collapsing');
             }
+            return undefined;
         };
-        return ((0, react_1.jsx)(Panel, { ref: ref, as: Element, css: [
-                {
-                    width: expanded ? expandedWidth : collapsedWidth,
-                    maxWidth: expanded ? expandedWidth : collapsedWidth,
-                    // mounted.current will be false on the first render, thus you won't get an unwanted animation here
-                    // Will animate again if you force a re-render (like in Storybook)
-                    animation: touched
-                        ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
-                        : undefined,
-                },
-                containerVariantStyle[variant],
-            ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart, ...elemProps },
-            (0, react_1.jsx)(hooks_1.SidePanelContext.Provider, { value: {
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, onTransitionEnd: handleAnimationEnd, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
+                (0, exports.panelStencil)({
+                    expanded,
+                    variant,
+                    expandedWidth: typeof expandedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(expandedWidth) : expandedWidth,
+                    collapsedWidth: typeof collapsedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(collapsedWidth) : collapsedWidth,
+                }),
+            ]), children: (0, jsx_runtime_1.jsx)(hooks_1.SidePanelContext.Provider, { value: {
                     state,
                     origin,
-                } }, children)));
+                    handleAnimationStart,
+                }, children: children }) }));
     },
     subComponents: {
         /**

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

@@ -10,6 +10,44 @@ export interface SidePanelToggleButtonProps extends ExtractProps<typeof Tertiary
      */
     tooltipTextCollapse?: string;
 }
+export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
+    state: {
+        collapsing: {
+            margin: number;
+            transform: "scaleX(1)";
+            ':dir(rtl)': {
+                transform: "scaleX(-1)";
+            };
+        };
+        collapsed: {
+            margin: string;
+            insetInlineStart: number;
+            insetInlineEnd: number;
+            transform: "scaleX(1)";
+            ':dir(rtl)': {
+                transform: "scaleX(-1)";
+            };
+        };
+        expanded: {
+            margin: number;
+            transform: "scaleX(-1)";
+            ':dir(rtl)': {
+                transform: "scaleX(1)";
+            };
+        };
+        expanding: {
+            margin: number;
+            transform: "scaleX(-1)";
+            ':dir(rtl)': {
+                transform: "scaleX(1)";
+            };
+        };
+    };
+    origin: {
+        left: {};
+        right: {};
+    };
+}, {}, {}, never, never>;
 /**
  * A toggle button styled specifically for the side panel container.
  */

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":"AAGA,OAAO,EAAkB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAEzF,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAMhE,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;;GAEG;AACH,eAAO,MAAM,qBAAqB,mGAoDhC,CAAC"}
+{"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"}

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

@@ -23,17 +23,49 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePanelToggleButton = void 0;
-/** @jsxRuntime classic */
-/** @jsx jsx */
+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 react_1 = require("@emotion/react");
 const button_1 = require("@workday/canvas-kit-react/button");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 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_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "htmr30", 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: "htmr31", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "htmr32", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "htmr33", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "htmr34", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        origin: {
+            left: { name: "htmr35", styles: "" },
+            right: { name: "htmr36", styles: "" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { state: 'collapsed', origin: 'right' },
+            styles: { name: "htmr37", styles: "transform:scaleX(-1);" }
+        },
+        {
+            modifiers: { state: 'collapsing', origin: 'right' },
+            styles: { name: "htmr38", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+        },
+        {
+            modifiers: { state: 'expanded', origin: 'right' },
+            styles: { name: "htmr39", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+        },
+        {
+            modifiers: { state: 'expanding', origin: 'right' },
+            styles: { name: "htmr3a", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+        }
+    ]
+}, "side-panel-toggle-button-da8098");
 /**
  * A toggle button styled specifically for the side panel container.
  */
@@ -41,29 +73,14 @@ 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 }) {
         const context = React.useContext(hooks_1.SidePanelContext);
-        const useRTLOrigin = () => {
-            const isRTL = (0, common_1.useIsRTL)();
-            // if the direction is set to RTl, flip the origin
-            if (isRTL) {
-                return context.origin === 'left' ? 'right' : 'left';
-            }
-            // Otherwise, default to returning the origin
-            return context.origin;
-        };
-        const rtlOrigin = useRTLOrigin();
-        // Note: Depending on the collapsed width, the button could "jump" to it's final position.
-        const buttonStyle = (0, react_1.css)({
-            position: 'absolute',
-            top: tokens_1.space.m,
-            width: tokens_1.space.l,
-            right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? tokens_1.space.s : undefined,
-            left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? tokens_1.space.s : undefined,
-            margin: context.state === 'collapsed' ? 'auto' : 0,
-            transform: context.state === 'collapsed' || context.state === 'collapsing'
-                ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
-                : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
-        });
-        return ((0, react_1.jsx)(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted" },
-            (0, react_1.jsx)(button_1.TertiaryButton, { type: "button", css: buttonStyle, icon: icon, variant: variant, ...elemProps })));
+        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,
+                    origin: context.origin,
+                })), onClick: event => {
+                    var _a;
+                    //@ts-ignore this gets called from the useSidePanel hook.
+                    (_a = elemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(elemProps, event);
+                    context.handleAnimationStart();
+                } }) }));
     },
 });