@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,37 +18,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectOption = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var optionPadding = 6;
-var activeStyles = function (theme) {
-    var activeBgColor = theme.canvas.palette.primary.main;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const optionPadding = 6;
+const activeStyles = (theme) => {
+    const activeBgColor = theme.canvas.palette.primary.main;
     return {
         backgroundColor: activeBgColor,
         color: common_1.pickForegroundColor(activeBgColor),
     };
 };
-var Option = common_1.styled('li')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { cursor: 'default', 
+const Option = common_1.styled('li')({
+    ...tokens_1.type.levels.subtext.large,
+    cursor: 'default',
     // Apply listStyle at the list item style to ensure it's styled properly
     // in Visual Testing States
-    listStyle: 'none', 
+    listStyle: 'none',
     // In case the content of the option is empty/undefined for some reason
-    minHeight: tokens_1.type.levels.subtext.large.lineHeight, textAlign: 'left' }), function (_a) {
-    var disabled = _a["aria-disabled"], focused = _a.focused, interactive = _a.interactive, theme = _a.theme;
+    minHeight: tokens_1.type.levels.subtext.large.lineHeight,
+    textAlign: 'left',
+}, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
     if (disabled) {
         // If the option is disabled, return disabled styles...
         return {
@@ -68,36 +49,41 @@ var Option = common_1.styled('li')(__assign(__assign({}, tokens_1.type.levels.su
     }
     else if (focused) {
         // ...else if the option is focused, return focused styles...
-        return __assign({}, activeStyles(theme));
+        return {
+            ...activeStyles(theme),
+        };
     }
     else {
         // ...else return hover and selected (via aria-selected) styles
-        var selectedBgColor = theme.canvas.palette.primary.lightest;
-        var selectedStyles = {
+        const selectedBgColor = theme.canvas.palette.primary.lightest;
+        const selectedStyles = {
             '&[aria-selected="true"]': {
                 backgroundColor: selectedBgColor,
                 color: common_1.pickForegroundColor(selectedBgColor),
             },
         };
         // Only display interactive (hover/active) styles if the option is interactive
-        var interactiveStyles = interactive
+        const interactiveStyles = interactive
             ? {
                 '&:hover': {
                     backgroundColor: tokens_1.commonColors.hoverBackground,
                 },
-                '&:active, &:active[aria-selected="true"]': __assign({}, activeStyles(theme)),
+                '&:active, &:active[aria-selected="true"]': {
+                    ...activeStyles(theme),
+                },
             }
             : {};
-        return __assign(__assign({}, interactiveStyles), selectedStyles);
+        return {
+            // Place selected styles after interactive styles to have selected styles
+            // override interactive styles (subject to CSS specificity rules)
+            ...interactiveStyles,
+            ...selectedStyles,
+        };
     }
-}, function (_a) {
-    var error = _a.error;
-    return ({
-        padding: optionPadding + "px " + (error === common_1.ErrorType.Alert ? optionPadding - 1 : optionPadding) + "px",
-    });
-});
-var SelectOption = function (_a) {
-    var children = _a.children, _b = _a.focused, focused = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, optionRef = _a.optionRef, value = _a.value, elemProps = __rest(_a, ["children", "focused", "interactive", "optionRef", "value"]);
-    return (React.createElement(Option, __assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
+}, ({ error }) => ({
+    padding: `${optionPadding}px ${error === common_1.ErrorType.Alert ? optionPadding - 1 : optionPadding}px`,
+}));
+const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
+    return (React.createElement(Option, Object.assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
 };
 exports.SelectOption = SelectOption;

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

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollIntoViewIfNeeded = void 0;
 // Modified from https://gist.github.com/hsablonniere/2581101
-var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
-    if (centerIfNeeded === void 0) { centerIfNeeded = true; }
-    var parent = elem.parentElement;
+const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
+    const parent = elem.parentElement;
     if (elem && parent) {
-        var parentComputedStyle = window.getComputedStyle(parent, null);
-        var parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
+        const parentComputedStyle = window.getComputedStyle(parent, null);
+        const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
         // Check if elem is out of view at the top edge of the parent's viewport
-        var overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
+        const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
         // Check if elem is out of view at the bottom edge of the parent's viewport
-        var overBottom = elem.offsetTop + elem.offsetHeight >
+        const overBottom = elem.offsetTop + elem.offsetHeight >
             parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
         if ((overTop || overBottom) && centerIfNeeded) {
             parent.scrollTop = Math.floor(elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2);

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCorrectedIndexByValue = exports.getIndexByValue = void 0;
-var getIndexByValue = function (options, value) {
+const getIndexByValue = (options, value) => {
     if (!options || value === undefined) {
         return -1;
     }
-    for (var i = 0; i < options.length; i++) {
+    for (let i = 0; i < options.length; i++) {
         if (options[i].value === value) {
             return i;
         }
@@ -14,8 +14,8 @@ var getIndexByValue = function (options, value) {
 };
 exports.getIndexByValue = getIndexByValue;
 // If the value doesn't exist in the options, return index 0
-var getCorrectedIndexByValue = function (options, value) {
-    var indexByValue = exports.getIndexByValue(options, value);
+const getCorrectedIndexByValue = (options, value) => {
+    const indexByValue = exports.getIndexByValue(options, value);
     return indexByValue === -1 ? 0 : indexByValue;
 };
 exports.getCorrectedIndexByValue = getCorrectedIndexByValue;

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

@@ -1,19 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -33,41 +18,43 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePanel = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var react_1 = require("@emotion/react");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var hooks_1 = require("./hooks");
-var SidePanelToggleButton_1 = require("./SidePanelToggleButton");
-var createKeyframes = function (from, to) {
-    var normalized = {
+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 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 react_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "], ["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
+    return 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};
+    }
+  `;
 };
-var containerVariantStyle = {
-    alternate: __assign({ backgroundColor: tokens_1.colors.frenchVanilla100 }, tokens_1.depth[5]),
+const containerVariantStyle = {
+    alternate: {
+        backgroundColor: tokens_1.colors.frenchVanilla100,
+        ...tokens_1.depth[5],
+    },
     standard: {
         backgroundColor: tokens_1.colors.soap100,
     },
 };
-var Panel = common_1.styled('section')({
+const Panel = common_1.styled('section')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
@@ -75,24 +62,23 @@ var Panel = common_1.styled('section')({
 });
 exports.SidePanel = common_1.createComponent('section')({
     displayName: 'SidePanel',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.collapsedWidth, collapsedWidth = _b === void 0 ? 64 : _b, _c = _a.expanded, expanded = _c === void 0 ? true : _c, _d = _a.expandedWidth, expandedWidth = _d === void 0 ? 320 : _d, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _e = _a.origin, origin = _e === void 0 ? 'left' : _e, _f = _a.variant, variant = _f === void 0 ? 'standard' : _f, touched = _a.touched, elemProps = __rest(_a, ["children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
-        var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
-        React.useEffect(function () {
+    Component({ children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }, ref, Element) {
+        const [state, setState] = React.useState(expanded ? 'expanded' : 'collapsed');
+        React.useEffect(() => {
             if (typeof onExpandedChange !== 'undefined') {
                 onExpandedChange(expanded);
             }
         }, [expanded, onExpandedChange]);
-        React.useEffect(function () {
+        React.useEffect(() => {
             if (typeof onStateTransition !== 'undefined') {
                 onStateTransition(state);
             }
         }, [state, onStateTransition]);
-        var motion = {
+        const motion = {
             collapse: createKeyframes(expandedWidth, collapsedWidth),
             expand: createKeyframes(collapsedWidth, expandedWidth),
         };
-        var handleAnimationEnd = function (event) {
+        const handleAnimationEnd = (event) => {
             if (event.currentTarget === event.target) {
                 if (event.animationName === motion.collapse.name) {
                     setState('collapsed');
@@ -105,7 +91,7 @@ exports.SidePanel = common_1.createComponent('section')({
                 onAnimationEnd(event);
             }
         };
-        var handleAnimationStart = function (event) {
+        const handleAnimationStart = (event) => {
             if (event.currentTarget === event.target) {
                 if (event.animationName === motion.collapse.name ||
                     event.animationName === motion.expand.name) {
@@ -116,21 +102,21 @@ exports.SidePanel = common_1.createComponent('section')({
                 onAnimationStart(event);
             }
         };
-        return (react_1.jsx(Panel, __assign({ ref: ref, as: Element, css: [
+        return (react_1.jsx(Panel, Object.assign({ 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"
+                        ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
                         : undefined,
                 },
                 containerVariantStyle[variant],
             ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
             react_1.jsx(hooks_1.SidePanelContext.Provider, { value: {
-                    state: state,
-                    origin: origin,
+                    state,
+                    origin,
                 } }, children)));
     },
     subComponents: {
@@ -146,4 +132,3 @@ exports.SidePanel = common_1.createComponent('section')({
         ToggleButton: SidePanelToggleButton_1.SidePanelToggleButton,
     },
 });
-var templateObject_1;

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,39 +18,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePanelToggleButton = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var react_1 = require("@emotion/react");
-var button_1 = require("@workday/canvas-kit-react/button");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var hooks_1 = require("./hooks");
+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");
 /**
  * A toggle button styled specifically for the side panel container.
  */
 exports.SidePanelToggleButton = common_1.createComponent('button')({
     displayName: 'SidePanel.ToggleButton',
-    Component: function (_a) {
-        var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, tooltipTextExpand = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, tooltipTextCollapse = _e === void 0 ? 'Collapse' : _e, elemProps = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
-        var context = React.useContext(hooks_1.SidePanelContext);
-        var useRTLOrigin = function () {
-            var isRTL = common_1.useIsRTL();
+    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 = common_1.useIsRTL();
             // if the direction is set to RTl, flip the origin
             if (isRTL) {
                 return context.origin === 'left' ? 'right' : 'left';
@@ -69,9 +46,9 @@ exports.SidePanelToggleButton = common_1.createComponent('button')({
             // Otherwise, default to returning the origin
             return context.origin;
         };
-        var rtlOrigin = useRTLOrigin();
+        const rtlOrigin = useRTLOrigin();
         // Note: Depending on the collapsed width, the button could "jump" to it's final position.
-        var buttonStyle = react_1.css({
+        const buttonStyle = react_1.css({
             position: 'absolute',
             top: tokens_1.space.m,
             width: tokens_1.space.l,
@@ -79,10 +56,10 @@ exports.SidePanelToggleButton = common_1.createComponent('button')({
             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') + ")",
+                ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
+                : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
         });
         return (react_1.jsx(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted" },
-            react_1.jsx(button_1.TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, elemProps))));
+            react_1.jsx(button_1.TertiaryButton, Object.assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, elemProps))));
     },
 });

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

@@ -20,12 +20,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSidePanel = exports.SidePanelContext = void 0;
-var React = __importStar(require("react"));
+const React = __importStar(require("react"));
 exports.SidePanelContext = React.createContext({
     state: 'expanded',
     origin: 'left',
 });
-var common_1 = require("@workday/canvas-kit-react/common");
+const common_1 = require("@workday/canvas-kit-react/common");
 /**
  *
  * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
@@ -41,53 +41,53 @@ var common_1 = require("@workday/canvas-kit-react/common");
  * });
  * ```
  */
-var useSidePanel = function (config) {
-    var _a = React.useState(false), touched = _a[0], setTouched = _a[1];
-    var configParams = config
+const useSidePanel = (config) => {
+    const [touched, setTouched] = React.useState(false);
+    const configParams = config
         ? config
         : {
             initialExpanded: true,
             panelId: undefined,
             labelId: undefined,
         };
-    var _b = configParams.initialExpanded, initialExpanded = _b === void 0 ? true : _b, panelIdParam = configParams.panelId, labelIdParam = configParams.labelId;
-    var _c = React.useState(initialExpanded), expanded = _c[0], setExpanded = _c[1];
-    var panelId = common_1.useUniqueId(panelIdParam);
-    var labelId = common_1.useUniqueId(labelIdParam);
+    const { initialExpanded = true, panelId: panelIdParam, labelId: labelIdParam } = configParams;
+    const [expanded, setExpanded] = React.useState(initialExpanded);
+    const panelId = common_1.useUniqueId(panelIdParam);
+    const labelId = common_1.useUniqueId(labelIdParam);
     // This prevents keyframes animations from rendering prematurely
-    var handleSetTouched = function () {
+    const handleSetTouched = () => {
         if (touched === false) {
             setTouched(true);
         }
     };
-    var handleClick = function () {
+    const handleClick = () => {
         handleSetExpanded(!expanded);
     };
-    var handleSetExpanded = function (newExpandedState) {
+    const handleSetExpanded = (newExpandedState) => {
         handleSetTouched();
         setExpanded(newExpandedState);
     };
-    var panelProps = {
+    const panelProps = {
         expanded: expanded,
         id: panelId,
         'aria-labelledby': labelId,
-        touched: touched,
+        touched,
     };
-    var labelProps = {
+    const labelProps = {
         id: labelId,
     };
-    var controlProps = {
+    const controlProps = {
         'aria-controls': panelId,
         'aria-expanded': expanded,
         'aria-labelledby': labelId,
         onClick: handleClick,
     };
     return {
-        expanded: expanded,
+        expanded,
         setExpanded: handleSetExpanded,
-        panelProps: panelProps,
-        labelProps: labelProps,
-        controlProps: controlProps,
+        panelProps,
+        labelProps,
+        controlProps,
     };
 };
 exports.useSidePanel = useSidePanel;

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

@@ -1,40 +1,17 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusIndicator = exports.useStatusIndicator = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
-var StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
-var hooks_1 = require("./hooks");
-exports.useStatusIndicator = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(function (_a) {
-    var state = _a.state;
-    var colors = StatusIndicatorIcon_1.statusIndicatorColors[state.variant][state.emphasis];
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
+const StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
+const hooks_1 = require("./hooks");
+exports.useStatusIndicator = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(({ state }) => {
+    const colors = StatusIndicatorIcon_1.statusIndicatorColors[state.variant][state.emphasis];
     return {
         opacity: state.variant === 'transparent' ? '0.85' : undefined,
         color: colors.text,
@@ -75,7 +52,6 @@ exports.StatusIndicator = common_1.createContainer('div')({
          */
         Icon: StatusIndicatorIcon_1.StatusIndicatorIcon,
     },
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (react_1.default.createElement(layout_1.Flex, __assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+})(({ children, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
 });

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

@@ -1,25 +1,14 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusIndicatorIcon = exports.useStatusIndicatorIcon = exports.statusIndicatorColors = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var hooks_1 = require("./hooks");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const hooks_1 = require("./hooks");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 exports.statusIndicatorColors = {
     gray: {
         high: {
@@ -82,9 +71,8 @@ exports.statusIndicatorColors = {
         },
     },
 };
-exports.useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(function (_a) {
-    var state = _a.state;
-    var colors = exports.statusIndicatorColors[state.variant][state.emphasis];
+exports.useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(({ state }) => {
+    const colors = exports.statusIndicatorColors[state.variant][state.emphasis];
     return {
         color: colors.text,
         colorHover: colors.background,
@@ -93,6 +81,6 @@ exports.useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusI
 exports.StatusIndicatorIcon = common_1.createSubcomponent('span')({
     modelHook: hooks_1.useStatusIndicatorModel,
     elemPropsHook: exports.useStatusIndicatorIcon,
-})(function (elemProps, Element, model) {
-    return react_1.default.createElement(icon_1.SystemIcon, __assign({ as: Element, size: 20, role: "img" }, elemProps));
+})((elemProps, Element, model) => {
+    return react_1.default.createElement(icon_1.SystemIcon, Object.assign({ as: Element, size: 20, role: "img" }, elemProps));
 });