@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/commonjs/menu/lib/MenuItem.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,91 +18,95 @@ 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.MenuItem = exports.useMenuItem = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useMenuModel_1 = require("./useMenuModel");
-var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return __assign(__assign({}, tokens_1.type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
-                marginLeft: tokens_1.space.xxs,
-            }, display: 'block', width: '100%', padding: tokens_1.space.xxs + " " + tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
-                backgroundColor: theme.canvas.palette.primary.lightest,
-                color: tokens_1.colors.blackPepper300,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.hover,
-                },
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.hover,
-                },
-            }, '&:focus': {
-                outline: 'none',
-                backgroundColor: theme.canvas.palette.primary.main,
-                color: tokens_1.typeColors.inverse,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-                '*:hover .wd-icon-fill': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-            } }, _b["[data-whatinput]"] = {
-        backgroundColor: 'inherit',
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useMenuModel_1 = require("./useMenuModel");
+const StyledItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) => {
+    return {
+        ...tokens_1.type.levels.subtext.large,
+        '& > *:not(style) ~ *:not(style)': {
+            marginLeft: tokens_1.space.xxs,
+        },
+        display: 'block',
+        width: '100%',
+        padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`,
+        boxSizing: 'border-box',
+        cursor: 'pointer',
         color: tokens_1.colors.blackPepper300,
+        borderWidth: 0,
+        textAlign: 'left',
+        transition: 'background-color 80ms, color 80ms',
         '&:hover, &[aria-selected=true]': {
             backgroundColor: theme.canvas.palette.primary.lightest,
+            color: tokens_1.colors.blackPepper300,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: tokens_1.iconColors.hover,
             },
-        },
-        '&:focus': {
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
                 fill: tokens_1.iconColors.hover,
             },
         },
-    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
-        color: tokens_1.colors.licorice100,
-        cursor: 'default',
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-            fill: tokens_1.iconColors.disabled,
-        },
         '&:focus': {
-            backgroundColor: tokens_1.colors.blueberry200,
+            outline: 'none',
+            backgroundColor: theme.canvas.palette.primary.main,
+            color: tokens_1.typeColors.inverse,
+            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+                fill: tokens_1.iconColors.inverse,
+            },
+            '*:hover .wd-icon-fill': {
+                fill: tokens_1.iconColors.inverse,
+            },
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.disabled,
+                fill: tokens_1.iconColors.inverse,
             },
         },
-        '&:hover, &[aria-selected=true]': {
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.disabled,
+        // We want the focus styles no matter what
+        [`[data-whatinput]`]: {
+            backgroundColor: 'inherit',
+            color: tokens_1.colors.blackPepper300,
+            '&:hover, &[aria-selected=true]': {
+                backgroundColor: theme.canvas.palette.primary.lightest,
+                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.hover,
+                },
             },
-            '*:hover .wd-icon-fill': {
+            '&:focus': {
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.hover,
+                },
+            },
+        },
+        backgroundColor: 'inherit',
+        '&:disabled, &[aria-disabled]': {
+            color: tokens_1.colors.licorice100,
+            cursor: 'default',
+            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: tokens_1.iconColors.disabled,
             },
+            '&:focus': {
+                backgroundColor: tokens_1.colors.blueberry200,
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.disabled,
+                },
+            },
+            '&:hover, &[aria-selected=true]': {
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.disabled,
+                },
+                '*:hover .wd-icon-fill': {
+                    fill: tokens_1.iconColors.disabled,
+                },
+            },
         },
-    }, _b));
-}, function (_a) {
-    var children = _a.children;
+    };
+}, ({ children }) => {
     if (typeof children === 'string') {
         return {};
     }
@@ -123,16 +116,15 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
         };
     }
 });
-exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(function (model, ref, elemProps) {
-    if (elemProps === void 0) { elemProps = { 'data-id': '' }; }
-    var _a = common_1.useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
-    var id = elemProps['data-id'];
+exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenuModel_1.useMenuModel)((model, ref, elemProps = { 'data-id': '' }) => {
+    const { localRef, elementRef } = common_1.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();
                 });
             }
@@ -145,7 +137,7 @@ exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenu
         ref: elementRef,
         role: 'menuitem',
         onClick: model.state.mode === 'single'
-            ? function (event) {
+            ? (event) => {
                 model.events.hide(event);
             }
             : undefined,
@@ -159,8 +151,7 @@ exports.MenuItem = common_1.createSubcomponent('button')({
         Icon: icon_1.SystemIcon,
         Text: common_1.styled('span')({ flexGrow: 1, alignSelf: 'center' }),
     },
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
+})(({ children, ...elemProps }, Element) => {
     return (React.createElement(tooltip_1.OverflowTooltip, { placement: "left" },
-        React.createElement(StyledItem, __assign({ minHeight: tokens_1.space.xl, as: Element }, elemProps), children)));
+        React.createElement(StyledItem, Object.assign({ minHeight: tokens_1.space.xl, as: Element }, elemProps), children)));
 });

package/dist/commonjs/menu/lib/MenuList.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,25 +18,14 @@ 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.MenuList = exports.useMenuList = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useMenuModel_1 = require("./useMenuModel");
-exports.useMenuList = common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(function (model) {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useMenuModel_1 = require("./useMenuModel");
+exports.useMenuList = common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(model => {
     return {
         role: 'menu',
         'aria-labelledby': model.state.id,
@@ -57,7 +35,6 @@ exports.MenuList = common_1.createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.useMenuList,
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(collection_1.ListBox, __assign({ as: Element, model: model, background: tokens_1.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(collection_1.ListBox, Object.assign({ as: Element, model: model, background: tokens_1.commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto", flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row' }, elemProps), children));
 });

package/dist/commonjs/menu/lib/MenuPopper.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,29 +18,17 @@ 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.MenuPopper = exports.useMenuPopper = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var useMenuModel_1 = require("./useMenuModel");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const useMenuModel_1 = require("./useMenuModel");
 exports.useMenuPopper = popup_1.usePopupPopper;
 exports.MenuPopper = common_1.createSubcomponent('div')({
     displayName: 'Menu.Popper',
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.useMenuPopper,
-})(function (_a) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(popup_1.Popper, __assign({ placement: "bottom-start" }, elemProps), children));
+})(({ children, ...elemProps }) => {
+    return (React.createElement(popup_1.Popper, Object.assign({ placement: "bottom-start" }, elemProps), children));
 });

package/dist/commonjs/menu/lib/MenuTarget.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,30 +18,19 @@ 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.MenuTargetContext = exports.MenuTarget = exports.useMenuTargetContext = exports.useMenuTarget = exports.useMenuTargetBase = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var button_1 = require("@workday/canvas-kit-react/button");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var useMenuModel_1 = require("./useMenuModel");
-exports.useMenuTargetBase = common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(function (model) {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const useMenuModel_1 = require("./useMenuModel");
+exports.useMenuTargetBase = common_1.createElemPropsHook(useMenuModel_1.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':
@@ -68,15 +46,13 @@ exports.MenuTarget = common_1.createSubcomponent(button_1.SecondaryButton)({
     displayName: 'Menu.Target',
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.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);
 });
 exports.MenuTargetContext = common_1.createSubcomponent(button_1.SecondaryButton)({
     displayName: 'Menu.Target',
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.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/commonjs/menu/lib/useMenuModel.js

@@ -1,33 +1,28 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenuModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var collection_1 = require("@workday/canvas-kit-react/collection");
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const collection_1 = require("@workday/canvas-kit-react/collection");
 exports.useMenuModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign(__assign({}, collection_1.useListModel.defaultConfig), popup_1.usePopupModel.defaultConfig), { 
+    defaultConfig: {
+        ...collection_1.useListModel.defaultConfig,
+        ...popup_1.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({}, collection_1.useListModel.requiredConfig), popup_1.usePopupModel.requiredConfig),
-})(function (config) {
+        mode: 'single',
+    },
+    requiredConfig: {
+        ...collection_1.useListModel.requiredConfig,
+        ...popup_1.usePopupModel.requiredConfig,
+    },
+})(config => {
     // don't virtualize menus by default to avoid oddities with card width
-    var list = collection_1.useListModel(collection_1.useListModel.mergeConfig(config, {
+    const list = collection_1.useListModel(collection_1.useListModel.mergeConfig(config, {
         shouldVirtualize: false,
         selection: config.mode === 'single' ? collection_1.singleSelectionManager : collection_1.multiSelectionManager,
     }));
-    var popup = popup_1.usePopupModel(popup_1.usePopupModel.mergeConfig(config, {
-        onHide: function () {
+    const popup = popup_1.usePopupModel(popup_1.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;
         },
@@ -36,7 +31,10 @@ exports.useMenuModel = common_1.createModelHook({
     popup_1.useCloseOnEscape(popup);
     popup_1.useReturnFocus(popup);
     popup_1.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/commonjs/modal/lib/Modal.js

@@ -20,15 +20,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var ModalOverlay_1 = require("./ModalOverlay");
-var ModalCard_1 = require("./ModalCard");
-var hooks_1 = require("./hooks");
-var ModalHeading_1 = require("./ModalHeading");
-var ModalOverflowOverlay_1 = require("./ModalOverflowOverlay");
-var ModalBody_1 = require("./ModalBody");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const ModalOverlay_1 = require("./ModalOverlay");
+const ModalCard_1 = require("./ModalCard");
+const hooks_1 = require("./hooks");
+const ModalHeading_1 = require("./ModalHeading");
+const ModalOverflowOverlay_1 = require("./ModalOverflowOverlay");
+const ModalBody_1 = require("./ModalBody");
 /**
  * This component is the container component and does not render any semantic elements. It provides
  * a React Context model for the `Modal` subcomponents. If you manually pass a `model` to all
@@ -113,6 +113,6 @@ exports.Modal = common_1.createContainer()({
          */
         OverflowOverlay: ModalOverflowOverlay_1.ModalOverflowOverlay,
     },
-})(function (elemProps) {
+})(elemProps => {
     return React.createElement(React.Fragment, null, elemProps.children);
 });

package/dist/commonjs/modal/lib/ModalBody.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]; } });
@@ -31,25 +20,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalBody = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var hooks_1 = require("./hooks");
-var ResponsiveModalBody = common_1.styled(popup_1.Popup.Body)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var canvasTheme = common_1.getCanvasTheme(theme);
-    return _b = {},
-        _b[canvasTheme.breakpoints.down('s')] = {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const hooks_1 = require("./hooks");
+const ResponsiveModalBody = common_1.styled(popup_1.Popup.Body)(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        [canvasTheme.breakpoints.down('s')]: {
             marginBottom: tokens_1.space.zero,
-            padding: tokens_1.space.xxxs + " " + tokens_1.space.xxs + " " + tokens_1.space.xxs + " " + tokens_1.space.xxs,
+            padding: `${tokens_1.space.xxxs} ${tokens_1.space.xxs} ${tokens_1.space.xxs} ${tokens_1.space.xxs}`,
         },
-        _b;
+    };
 });
 exports.ModalBody = common_1.createSubcomponent('div')({
     displayName: 'Modal.Body',
     modelHook: hooks_1.useModalModel,
-})(function (elemProps, Element) {
-    return React.createElement(ResponsiveModalBody, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(ResponsiveModalBody, Object.assign({ as: Element }, elemProps));
 });

package/dist/commonjs/modal/lib/ModalCard.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]; } });
@@ -31,29 +20,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalCard = 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 popup_1 = require("@workday/canvas-kit-react/popup");
-var hooks_1 = require("./hooks");
-var ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var canvasTheme = common_1.getCanvasTheme(theme);
-    return _b = {
-            margin: tokens_1.space.xl
-        },
-        _b[canvasTheme.breakpoints.down('s')] = {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const hooks_1 = require("./hooks");
+const ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        margin: tokens_1.space.xl,
+        [canvasTheme.breakpoints.down('s')]: {
             margin: tokens_1.space.s,
             padding: tokens_1.space.s,
             borderRadius: tokens_1.space.m, // 24px border radius on smaller devices.
         },
-        _b;
+    };
 });
 exports.ModalCard = common_1.createSubcomponent('div')({
     displayName: 'Modal.Card',
     modelHook: hooks_1.useModalModel,
     elemPropsHook: hooks_1.useModalCard,
-})(function (elemProps, Element) {
-    return React.createElement(ResponsiveModalCard, __assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(ResponsiveModalCard, Object.assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
 });