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

package/dist/es6/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/es6/segmented-control/lib/hooks/useSegmentedControlModel.js

@@ -42,7 +42,7 @@ export const useSegmentedControlModel = createModelHook({
         items,
         onRegisterItem(data) {
             if (!initialSelectedRef.current) {
-                initialSelectedRef.current = getId(data.item);
+                initialSelectedRef.current = data.id;
                 events.select({ id: initialSelectedRef.current });
             }
         },

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ErrorType, createComponent, useForkRef, generateUniqueId, } from '@workday/canvas-kit-react/common';
 import { menuAnimationDuration } from './SelectMenu';
@@ -440,7 +441,7 @@ class SelectContainer extends React.Component {
                 onOptionSelection: this.handleOptionSelection,
             }
             : {};
-        return (React.createElement(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 (_jsx(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 = ErrorType;
@@ -452,7 +453,7 @@ export const Select = 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 })),
+    _jsx(SelectContainer, { as: Element, buttonRef: ref, ...props })),
     subComponents: {
         ErrorType,
     },

package/dist/es6/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/es6/select/lib/SelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useLayoutEffect } from 'react';
 import { errorRing, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
 import { colors, borderRadius, inputColors, type, space } from '@workday/canvas-kit-react/tokens';
@@ -90,7 +91,7 @@ const SelectWrapper = styled('div')({
     },
 }));
 const defaultRenderOption = option => {
-    return React.createElement("div", null, defaultRenderSelected(option));
+    return _jsx("div", { children: defaultRenderSelected(option) });
 };
 const defaultRenderSelected = option => {
     return option.label;
@@ -132,7 +133,7 @@ export const SelectBase = ({ 'aria-labelledby': ariaLabelledBy, 'aria-required':
                 focused: optionProps.focused,
                 selected: !!optionProps['aria-selected'],
             };
-            return React.createElement(SelectOption, { ...optionProps }, renderOption(normalizedOption));
+            return _jsx(SelectOption, { ...optionProps, children: renderOption(normalizedOption) });
         });
     };
     // If the focused option changed, scroll the newly focused option into view (if
@@ -189,23 +190,19 @@ export const SelectBase = ({ 'aria-labelledby': ariaLabelledBy, 'aria-required':
     const hasOptions = options.length > 0;
     const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
     const selectedOptionValue = selectedOption ? selectedOption.value : '';
-    return (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-        React.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.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),
-        hasOptions && menuVisibility !== 'closed' && (React.createElement(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.createElement(SelectMenuIcon, { className: "menu-icon", icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500, size: `${menuIconSize}rem` })));
+    return (_jsxs(SelectWrapper, { grow: grow, disabled: disabled, children: [_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) }), _jsx(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }), hasOptions && menuVisibility !== 'closed' && (_jsx(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) })), _jsx(SelectMenuIcon, { className: "menu-icon", icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500, size: `${menuIconSize}rem` })] }));
 };

package/dist/es6/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/es6/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/es6/select/lib/SelectMenu.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import { ErrorType, styled } from '@workday/canvas-kit-react/common';
 import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, useTransferOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
 import { colors, borderRadius, inputColors } from '@workday/canvas-kit-react/tokens';
@@ -181,12 +182,10 @@ export const SelectMenu = ({ buttonRef, children, error, menuRef, onClose, place
     useCloseOnOutsideClick(model);
     useReturnFocus(model);
     useTransferOnFullscreenExit(model);
-    return (React.createElement(Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
+    return (_jsx(Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
             menuRef,
             placement,
             shouldAutoFlip,
             shouldAutoFocus,
-        }), ref: model.state.stackRef },
-        React.createElement(Menu, { error: error, visibility: visibility, width: width },
-            React.createElement(MenuList, { error: error, ref: menuRef, role: "listbox", tabIndex: -1, ...elemProps }, children))));
+        }), ref: model.state.stackRef, children: _jsx(Menu, { error: error, visibility: visibility, width: width, children: _jsx(MenuList, { error: error, ref: menuRef, role: "listbox", tabIndex: -1, ...elemProps, children: children }) }) }));
 };

package/dist/es6/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/es6/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/es6/select/lib/SelectOption.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorType, pickForegroundColor, styled, } from '@workday/canvas-kit-react/common';
 import { colors, commonColors, type } from '@workday/canvas-kit-react/tokens';
 const optionPadding = 6;
@@ -65,5 +65,5 @@ const Option = 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.
  */
 export 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 (_jsx(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps, children: children }));
 };

package/dist/es6/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/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,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/es6/side-panel/lib/SidePanel.js

@@ -1,46 +1,34 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { createComponent, styled } from '@workday/canvas-kit-react/common';
-import { jsx, keyframes } from '@emotion/react';
-import { colors, depth } from '@workday/canvas-kit-react/tokens';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 import { SidePanelContext } from './hooks';
 import { SidePanelToggleButton } from './SidePanelToggleButton';
-const createKeyframes = (from, to) => {
-    const normalized = {
-        from: typeof from === 'number' ? from + 'px' : from,
-        to: typeof to === 'number' ? to + 'px' : to,
-    };
-    return 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: colors.frenchVanilla100,
-        ...depth[5],
-    },
-    standard: {
-        backgroundColor: colors.soap100,
+export const panelStencil = createStencil({
+    vars: {
+        expandedWidth: '',
+        collapsedWidth: '',
     },
-};
-const Panel = styled('section')({
-    overflow: 'hidden',
-    position: 'relative',
-    boxSizing: 'border-box',
-    height: '100%',
-});
+    base: { name: "r0ey3b", 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: "r0ey3c", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "r0ey3d", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+        },
+        expanded: {
+            true: { name: "r0ey3e", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
+            false: { name: "r0ey3f", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
+        },
+        touched: {
+            true: { name: "r0ey3g", styles: "" },
+            false: { name: "r0ey3h", styles: "animation:none;" }
+        }
+    }
+}, "panel-bd9477");
 export const SidePanel = 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') {
@@ -52,50 +40,37 @@ export const SidePanel = 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 (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 },
-            jsx(SidePanelContext.Provider, { value: {
+        return (_jsx(Element, { ref: ref, onTransitionEnd: handleAnimationEnd, ...handleCsProp(elemProps, [
+                panelStencil({
+                    expanded,
+                    variant,
+                    expandedWidth: typeof expandedWidth === 'number' ? px2rem(expandedWidth) : expandedWidth,
+                    collapsedWidth: typeof collapsedWidth === 'number' ? px2rem(collapsedWidth) : collapsedWidth,
+                }),
+            ]), children: _jsx(SidePanelContext.Provider, { value: {
                     state,
                     origin,
-                } }, children)));
+                    handleAnimationStart,
+                }, children: children }) }));
     },
     subComponents: {
         /**

package/dist/es6/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/es6/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"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/es6/side-panel/lib/SidePanelToggleButton.js

@@ -1,13 +1,45 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { createComponent, useIsRTL } from '@workday/canvas-kit-react/common';
-import { css, jsx } from '@emotion/react';
+import { createComponent } from '@workday/canvas-kit-react/common';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { space } from '@workday/canvas-kit-react/tokens';
 import { transformationImportIcon } from '@workday/canvas-system-icons-web';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 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: "r0ey30", 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: "r0ey31", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "r0ey32", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "r0ey33", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "r0ey34", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        origin: {
+            left: { name: "r0ey35", styles: "" },
+            right: { name: "r0ey36", styles: "" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { state: 'collapsed', origin: 'right' },
+            styles: { name: "r0ey37", styles: "transform:scaleX(-1);" }
+        },
+        {
+            modifiers: { state: 'collapsing', origin: 'right' },
+            styles: { name: "r0ey38", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+        },
+        {
+            modifiers: { state: 'expanded', origin: 'right' },
+            styles: { name: "r0ey39", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+        },
+        {
+            modifiers: { state: 'expanding', origin: 'right' },
+            styles: { name: "r0ey3a", 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.
  */
@@ -15,29 +47,14 @@ export const SidePanelToggleButton = createComponent('button')({
     displayName: 'SidePanel.ToggleButton',
     Component({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
         const context = React.useContext(SidePanelContext);
-        const useRTLOrigin = () => {
-            const isRTL = 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 = css({
-            position: 'absolute',
-            top: space.m,
-            width: space.l,
-            right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
-            left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? 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 (jsx(Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted" },
-            jsx(TertiaryButton, { type: "button", css: buttonStyle, icon: icon, variant: variant, ...elemProps })));
+        return (_jsx(Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted", children: _jsx(TertiaryButton, { type: "button", icon: icon, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
+                    state: context.state,
+                    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();
+                } }) }));
     },
 });

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 export declare const SidePanelContext: React.Context<{
     state: string;
-    origin: string;
+    origin: "left" | "right";
+    handleAnimationStart: () => undefined;
 }>;
 /**
  * The optional config options for the `useSidePanel` hook

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;;;EAG3B,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;;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"}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 export const SidePanelContext = React.createContext({
     state: 'expanded',
     origin: 'left',
+    handleAnimationStart: () => undefined,
 });
 import { useUniqueId } from '@workday/canvas-kit-react/common';
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAC;AAElG,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwFD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAcL,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAC;AAElG,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAyFD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAcL,CAAC"}