@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.384-next.3

package/dist/es6/menu/lib/MenuCard.js

@@ -1,48 +1,36 @@
-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);
-};
 import * as React from 'react';
 import { Card } from '@workday/canvas-kit-react/card';
 import { space, type } from '@workday/canvas-kit-react/tokens';
 import { styled, createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
 import { getTransformFromPlacement } from '@workday/canvas-kit-react/popup';
 import { useMenuModel } from './useMenuModel';
-var StyledCard = styled(Card)(type.levels.subtext.large, {
+const StyledCard = styled(Card)(type.levels.subtext.large, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-}, function (_a) {
-    var transformOrigin = _a.transformOrigin;
+}, ({ transformOrigin }) => {
     if (transformOrigin == null) {
         return {};
     }
     return {
-        transition: "transform ease-out 150ms",
-        transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal,
+        transition: `transform ease-out 150ms`,
+        transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
         // Allow overriding of animation in special cases
         '.wd-no-animation &': {
             animation: 'none',
         },
     };
 });
-export var useMenuCard = createElemPropsHook(useMenuModel)(function () {
+export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
     return {};
 });
-export var MenuCard = createSubcomponent('div')({
+export const MenuCard = createSubcomponent('div')({
     displayName: 'Menu.Card',
     modelHook: useMenuModel,
     elemPropsHook: useMenuCard,
-})(function (elemProps, Element, model) {
-    var transformOrigin = React.useMemo(function () {
+})((elemProps, Element, model) => {
+    const transformOrigin = React.useMemo(() => {
         return getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    return (React.createElement(StyledCard, __assign({ as: Element, maxWidth: "calc(100vw - " + space.l + ")", transformOrigin: transformOrigin, padding: "zero", depth: 3 }, elemProps), elemProps.children));
+    return (React.createElement(StyledCard, Object.assign({ as: Element, maxWidth: `calc(100vw - ${space.l})`, transformOrigin: transformOrigin, padding: "zero", depth: 3 }, elemProps), elemProps.children));
 });

package/dist/es6/menu/lib/MenuContextTarget.js

@@ -1,36 +1,14 @@
-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;
-};
 import * as React from 'react';
 import { composeHooks, createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
 import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import { usePopupTarget, usePopupTargetContext } from '@workday/canvas-kit-react/popup';
 import { useMenuModel } from './useMenuModel';
-var useMenuTargetBase = createElemPropsHook(useMenuModel)(function (model) {
+const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     return {
         id: model.state.id,
         'aria-haspopup': 'true',
         'aria-expanded': model.state.visibility === 'visible',
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             // eslint-disable-next-line default-case
             switch (event.key) {
                 case 'ArrowDown':
@@ -40,13 +18,12 @@ var useMenuTargetBase = createElemPropsHook(useMenuModel)(function (model) {
         },
     };
 });
-export var useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);
-export var useMenuTargetContext = composeHooks(useMenuTargetBase, usePopupTargetContext);
-export var MenuTarget = createSubcomponent(SecondaryButton)({
+export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);
+export const useMenuTargetContext = composeHooks(useMenuTargetBase, usePopupTargetContext);
+export const MenuTarget = createSubcomponent(SecondaryButton)({
     displayName: 'Menu.Target',
     modelHook: useMenuModel,
     elemPropsHook: useMenuTarget,
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Element, __assign({}, elemProps), children);
+})(({ children, ...elemProps }, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps), children);
 });

package/dist/es6/menu/lib/MenuDivider.js

@@ -1,28 +1,17 @@
-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);
-};
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { createComponent } from '@workday/canvas-kit-react/common';
-var Divider = styled('hr')({
+const Divider = styled('hr')({
     display: 'block',
     height: 1,
     border: 0,
-    borderTop: "1px solid " + colors.soap400,
-    margin: space.xxs + " 0",
+    borderTop: `1px solid ${colors.soap400}`,
+    margin: `${space.xxs} 0`,
 });
-export var MenuDivider = createComponent('hr')({
+export const MenuDivider = createComponent('hr')({
     displayName: 'Menu.Divider',
-    Component: function (elemProps, ref, Element) {
-        return React.createElement(Divider, __assign({ as: Element, ref: ref }, elemProps));
+    Component(elemProps, ref, Element) {
+        return React.createElement(Divider, Object.assign({ as: Element, ref: ref }, elemProps));
     },
 });

package/dist/es6/menu/lib/MenuItem.js

@@ -1,25 +1,3 @@
-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;
-};
 import * as React from 'react';
 import { colors, iconColors, typeColors, space, type } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, styled, composeHooks, createElemPropsHook, useLocalRef, } from '@workday/canvas-kit-react/common';
@@ -28,70 +6,85 @@ import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { useListItemRegister, useListItemRovingFocus, useListItemSelect, } from '@workday/canvas-kit-react/collection';
 import { useMenuModel } from './useMenuModel';
-var StyledItem = styled(Box.as('button'))(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return __assign(__assign({}, type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
-                marginLeft: space.xxs,
-            }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
-                backgroundColor: theme.canvas.palette.primary.lightest,
-                color: colors.blackPepper300,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: iconColors.hover,
-                },
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.hover,
-                },
-            }, '&:focus': {
-                outline: 'none',
-                backgroundColor: theme.canvas.palette.primary.main,
-                color: typeColors.inverse,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: iconColors.inverse,
-                },
-                '*:hover .wd-icon-fill': {
-                    fill: iconColors.inverse,
-                },
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: iconColors.inverse,
-                },
-            } }, _b["[data-whatinput]"] = {
-        backgroundColor: 'inherit',
+const StyledItem = styled(Box.as('button'))(({ theme }) => {
+    return {
+        ...type.levels.subtext.large,
+        '& > *:not(style) ~ *:not(style)': {
+            marginLeft: space.xxs,
+        },
+        display: 'block',
+        width: '100%',
+        padding: `${space.xxs} ${space.s}`,
+        boxSizing: 'border-box',
+        cursor: 'pointer',
         color: colors.blackPepper300,
+        borderWidth: 0,
+        textAlign: 'left',
+        transition: 'background-color 80ms, color 80ms',
         '&:hover, &[aria-selected=true]': {
             backgroundColor: theme.canvas.palette.primary.lightest,
+            color: colors.blackPepper300,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: iconColors.hover,
             },
-        },
-        '&:focus': {
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
                 fill: iconColors.hover,
             },
         },
-    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
-        color: colors.licorice100,
-        cursor: 'default',
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-            fill: iconColors.disabled,
-        },
         '&:focus': {
-            backgroundColor: colors.blueberry200,
+            outline: 'none',
+            backgroundColor: theme.canvas.palette.primary.main,
+            color: typeColors.inverse,
+            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+                fill: iconColors.inverse,
+            },
+            '*:hover .wd-icon-fill': {
+                fill: iconColors.inverse,
+            },
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.disabled,
+                fill: iconColors.inverse,
             },
         },
-        '&:hover, &[aria-selected=true]': {
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: iconColors.disabled,
+        // We want the focus styles no matter what
+        [`[data-whatinput]`]: {
+            backgroundColor: 'inherit',
+            color: colors.blackPepper300,
+            '&:hover, &[aria-selected=true]': {
+                backgroundColor: theme.canvas.palette.primary.lightest,
+                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+                    fill: iconColors.hover,
+                },
             },
-            '*:hover .wd-icon-fill': {
+            '&:focus': {
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: iconColors.hover,
+                },
+            },
+        },
+        backgroundColor: 'inherit',
+        '&:disabled, &[aria-disabled]': {
+            color: colors.licorice100,
+            cursor: 'default',
+            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: iconColors.disabled,
             },
+            '&:focus': {
+                backgroundColor: colors.blueberry200,
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: iconColors.disabled,
+                },
+            },
+            '&:hover, &[aria-selected=true]': {
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: iconColors.disabled,
+                },
+                '*:hover .wd-icon-fill': {
+                    fill: iconColors.disabled,
+                },
+            },
         },
-    }, _b));
-}, function (_a) {
-    var children = _a.children;
+    };
+}, ({ children }) => {
     if (typeof children === 'string') {
         return {};
     }
@@ -101,16 +94,15 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
         };
     }
 });
-export var useMenuItem = composeHooks(createElemPropsHook(useMenuModel)(function (model, ref, elemProps) {
-    if (elemProps === void 0) { elemProps = { 'data-id': '' }; }
-    var _a = useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
-    var id = elemProps['data-id'];
+export const useMenuItem = composeHooks(createElemPropsHook(useMenuModel)((model, ref, elemProps = { 'data-id': '' }) => {
+    const { localRef, elementRef } = useLocalRef(ref);
+    const id = elemProps['data-id'];
     // focus on the item with the cursor
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         if (model.state.mode === 'single') {
             if (model.state.cursorId === id) {
                 // delay focus changes to allow PopperJS to position
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     localRef.current.focus();
                 });
             }
@@ -123,13 +115,13 @@ export var useMenuItem = composeHooks(createElemPropsHook(useMenuModel)(function
         ref: elementRef,
         role: 'menuitem',
         onClick: model.state.mode === 'single'
-            ? function (event) {
+            ? (event) => {
                 model.events.hide(event);
             }
             : undefined,
     };
 }), useListItemSelect, useListItemRovingFocus, useListItemRegister);
-export var MenuItem = createSubcomponent('button')({
+export const MenuItem = createSubcomponent('button')({
     displayName: 'Menu.Item',
     modelHook: useMenuModel,
     elemPropsHook: useMenuItem,
@@ -137,8 +129,7 @@ export var MenuItem = createSubcomponent('button')({
         Icon: SystemIcon,
         Text: styled('span')({ flexGrow: 1, alignSelf: 'center' }),
     },
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
+})(({ children, ...elemProps }, Element) => {
     return (React.createElement(OverflowTooltip, { placement: "left" },
-        React.createElement(StyledItem, __assign({ minHeight: space.xl, as: Element }, elemProps), children)));
+        React.createElement(StyledItem, Object.assign({ minHeight: space.xl, as: Element }, elemProps), children)));
 });

package/dist/es6/menu/lib/MenuList.js

@@ -1,41 +1,18 @@
-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;
-};
 import * as React from 'react';
 import { commonColors } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
 import { ListBox } from '@workday/canvas-kit-react/collection';
 import { useMenuModel } from './useMenuModel';
-export var useMenuList = createElemPropsHook(useMenuModel)(function (model) {
+export const useMenuList = createElemPropsHook(useMenuModel)(model => {
     return {
         role: 'menu',
         'aria-labelledby': model.state.id,
     };
 });
-export var MenuList = createSubcomponent('div')({
+export const MenuList = createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel,
     elemPropsHook: useMenuList,
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(ListBox, __assign({ as: Element, model: model, background: commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto", flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row' }, elemProps), children));
+})(({ children, ...elemProps }, Element, model) => {
+    return (React.createElement(ListBox, Object.assign({ as: Element, model: model, background: commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto", flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row' }, elemProps), children));
 });

package/dist/es6/menu/lib/MenuPopper.js

@@ -1,35 +1,12 @@
-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;
-};
 import * as React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { usePopupPopper, Popper } from '@workday/canvas-kit-react/popup';
 import { useMenuModel } from './useMenuModel';
-export var useMenuPopper = usePopupPopper;
-export var MenuPopper = createSubcomponent('div')({
+export const useMenuPopper = usePopupPopper;
+export const MenuPopper = createSubcomponent('div')({
     displayName: 'Menu.Popper',
     modelHook: useMenuModel,
     elemPropsHook: useMenuPopper,
-})(function (_a) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(Popper, __assign({ placement: "bottom-start" }, elemProps), children));
+})(({ children, ...elemProps }) => {
+    return (React.createElement(Popper, Object.assign({ placement: "bottom-start" }, elemProps), children));
 });

package/dist/es6/menu/lib/MenuTarget.js

@@ -1,36 +1,14 @@
-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;
-};
 import * as React from 'react';
 import { composeHooks, createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
 import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import { usePopupTarget, usePopupTargetContext } from '@workday/canvas-kit-react/popup';
 import { useMenuModel } from './useMenuModel';
-export var useMenuTargetBase = createElemPropsHook(useMenuModel)(function (model) {
+export const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     return {
         id: model.state.id,
         'aria-haspopup': 'true',
         'aria-expanded': model.state.visibility === 'visible',
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             // eslint-disable-next-line default-case
             switch (event.key) {
                 case 'ArrowDown':
@@ -40,21 +18,19 @@ export var useMenuTargetBase = createElemPropsHook(useMenuModel)(function (model
         },
     };
 });
-export var useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);
-export var useMenuTargetContext = composeHooks(useMenuTargetBase, usePopupTargetContext);
-export var MenuTarget = createSubcomponent(SecondaryButton)({
+export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);
+export const useMenuTargetContext = composeHooks(useMenuTargetBase, usePopupTargetContext);
+export const MenuTarget = createSubcomponent(SecondaryButton)({
     displayName: 'Menu.Target',
     modelHook: useMenuModel,
     elemPropsHook: useMenuTarget,
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Element, __assign({}, elemProps), children);
+})(({ children, ...elemProps }, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps), children);
 });
-export var MenuTargetContext = createSubcomponent(SecondaryButton)({
+export const MenuTargetContext = createSubcomponent(SecondaryButton)({
     displayName: 'Menu.Target',
     modelHook: useMenuModel,
     elemPropsHook: useMenuTargetContext,
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Element, __assign({}, elemProps), children);
+})(({ children, ...elemProps }, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps), children);
 });

package/dist/es6/menu/lib/useMenuModel.js

@@ -1,30 +1,25 @@
-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);
-};
 import { createModelHook } from '@workday/canvas-kit-react/common';
 import { useAlwaysCloseOnOutsideClick, useCloseOnEscape, useFocusRedirect, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
 import { multiSelectionManager, singleSelectionManager, useListModel, } from '@workday/canvas-kit-react/collection';
-export var useMenuModel = createModelHook({
-    defaultConfig: __assign(__assign(__assign({}, useListModel.defaultConfig), usePopupModel.defaultConfig), { 
+export const useMenuModel = createModelHook({
+    defaultConfig: {
+        ...useListModel.defaultConfig,
+        ...usePopupModel.defaultConfig,
         /** Determines the default selection manager used as well as if the menu closes when an item is selected */
-        mode: 'single' }),
-    requiredConfig: __assign(__assign({}, useListModel.requiredConfig), usePopupModel.requiredConfig),
-})(function (config) {
+        mode: 'single',
+    },
+    requiredConfig: {
+        ...useListModel.requiredConfig,
+        ...usePopupModel.requiredConfig,
+    },
+})(config => {
     // don't virtualize menus by default to avoid oddities with card width
-    var list = useListModel(useListModel.mergeConfig(config, {
+    const list = useListModel(useListModel.mergeConfig(config, {
         shouldVirtualize: false,
         selection: config.mode === 'single' ? singleSelectionManager : multiSelectionManager,
     }));
-    var popup = usePopupModel(usePopupModel.mergeConfig(config, {
-        onHide: function () {
+    const popup = usePopupModel(usePopupModel.mergeConfig(config, {
+        onHide() {
             // reset the index ref to 0 again so registration doesn't start where it left off
             list.state.indexRef.current = 0;
         },
@@ -33,7 +28,10 @@ export var useMenuModel = createModelHook({
     useCloseOnEscape(popup);
     useReturnFocus(popup);
     useFocusRedirect(popup);
-    var state = __assign(__assign({ mode: config.mode }, list.state), popup.state);
-    var events = __assign(__assign({}, list.events), popup.events);
-    return __assign(__assign({}, list), { state: state, events: events });
+    const state = { mode: config.mode, ...list.state, ...popup.state };
+    const events = {
+        ...list.events,
+        ...popup.events,
+    };
+    return { ...list, state, events };
 });

package/dist/es6/modal/lib/Modal.js

@@ -14,7 +14,7 @@ import { ModalBody } from './ModalBody';
  * container component will build a default one using `useModalModel`. `Modal` is a composition of a
  * {@link Popup} component and has a similar structure to `Popup`.
  */
-export var Modal = createContainer()({
+export const Modal = createContainer()({
     displayName: 'Modal',
     modelHook: useModalModel,
     subComponents: {
@@ -91,6 +91,6 @@ export var Modal = createContainer()({
          */
         OverflowOverlay: ModalOverflowOverlay,
     },
-})(function (elemProps) {
+})(elemProps => {
     return React.createElement(React.Fragment, null, elemProps.children);
 });

package/dist/es6/modal/lib/ModalBody.js

@@ -1,33 +1,20 @@
-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);
-};
 import * as React from 'react';
-import { createSubcomponent, getCanvasTheme, styled, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, getTheme, styled, } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { space } from '@workday/canvas-kit-react/tokens';
 import { useModalModel } from './hooks';
-var ResponsiveModalBody = styled(Popup.Body)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var canvasTheme = getCanvasTheme(theme);
-    return _b = {},
-        _b[canvasTheme.breakpoints.down('s')] = {
+const ResponsiveModalBody = styled(Popup.Body)(({ theme }) => {
+    const { canvas: canvasTheme } = getTheme(theme);
+    return {
+        [canvasTheme.breakpoints.down('s')]: {
             marginBottom: space.zero,
-            padding: space.xxxs + " " + space.xxs + " " + space.xxs + " " + space.xxs,
+            padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`,
         },
-        _b;
+    };
 });
-export var ModalBody = createSubcomponent('div')({
+export const ModalBody = createSubcomponent('div')({
     displayName: 'Modal.Body',
     modelHook: useModalModel,
-})(function (elemProps, Element) {
-    return React.createElement(ResponsiveModalBody, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(ResponsiveModalBody, Object.assign({ as: Element }, elemProps));
 });