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

package/dist/commonjs/button/lib/ExternalHyperlink.js

@@ -1,52 +1,38 @@
 "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.ExternalHyperlink = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var Hyperlink_1 = require("./Hyperlink");
-var iconStyles = __assign({}, icon_1.systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }));
-var Anchor = common_1.styled(Hyperlink_1.Hyperlink)(__assign(__assign({}, iconStyles), { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' }));
-var iconSize = '1em';
-var minIconSize = '16px';
-var StyledSystemIcon = common_1.styled(icon_1.SystemIcon)(__assign(__assign({}, iconStyles), { width: "calc(" + iconSize + " - 1px)", minWidth: "calc(" + minIconSize + " - 1px)", marginLeft: '2px' }));
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const Hyperlink_1 = require("./Hyperlink");
+const iconStyles = {
+    ...icon_1.systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }),
+};
+const Anchor = common_1.styled(Hyperlink_1.Hyperlink)({
+    ...iconStyles,
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+});
+const iconSize = '1em';
+const minIconSize = '16px';
+const StyledSystemIcon = common_1.styled(icon_1.SystemIcon)({
+    ...iconStyles,
+    width: `calc(${iconSize} - 1px)`,
+    minWidth: `calc(${minIconSize} - 1px)`,
+    marginLeft: '2px',
+});
 /**
  * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
  * link on a dark or colorful background such as `blueberry400`.
  */
 exports.ExternalHyperlink = common_1.createComponent('a')({
     displayName: 'ExternalHyperlink',
-    Component: function (_a, ref) {
-        var _b;
-        var children = _a.children, _c = _a.iconLabel, iconLabel = _c === void 0 ? 'Opens link in new window' : _c, elemProps = __rest(_a, ["children", "iconLabel"]);
-        return (react_1.default.createElement(Anchor, __assign({ ref: ref, target: "_blank", rel: "noreferrer" }, elemProps),
-            react_1.default.createElement("span", null, children),
-            react_1.default.createElement(StyledSystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, styles: (_b = {}, _b['& svg'] = { minWidth: minIconSize, minHeight: minIconSize }, _b) })));
-    },
+    Component: ({ children, iconLabel = 'Opens link in new window', ...elemProps }, ref) => (react_1.default.createElement(Anchor, Object.assign({ ref: ref, target: "_blank", rel: "noreferrer" }, elemProps),
+        react_1.default.createElement("span", null, children),
+        react_1.default.createElement(StyledSystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, styles: { ['& svg']: { minWidth: minIconSize, minHeight: minIconSize } } }))),
 });

package/dist/commonjs/button/lib/Hyperlink.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,23 +18,12 @@ 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.Hyperlink = 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 variantStyles = {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const variantStyles = {
     inverse: {
         color: tokens_1.colors.frenchVanilla100,
         '&:hover': {
@@ -53,7 +31,7 @@ var variantStyles = {
             background: 'rgba(255, 255, 255, 0.1)',
         },
         '&:focus': {
-            boxShadow: "0 0 0 2px " + tokens_1.colors.frenchVanilla100,
+            boxShadow: `0 0 0 2px ${tokens_1.colors.frenchVanilla100}`,
         },
         '&:active': {
             color: tokens_1.colors.blueberry600,
@@ -61,13 +39,13 @@ var variantStyles = {
         },
     },
 };
-var anchorVariants = function (props) {
+const anchorVariants = (props) => {
     if (props.variant === 'inverse') {
         return variantStyles.inverse;
     }
     return {};
 };
-var Anchor = common_1.styled('a')({
+const Anchor = common_1.styled('a')({
     fontFamily: tokens_1.type.properties.fontFamilies.default,
     textDecoration: 'underline',
     color: tokens_1.colors.blueberry400,
@@ -82,7 +60,7 @@ var Anchor = common_1.styled('a')({
         background: tokens_1.colors.soap200,
     },
     '&:focus': {
-        boxShadow: "0 0 0 2px " + tokens_1.colors.blueberry400,
+        boxShadow: `0 0 0 2px ${tokens_1.colors.blueberry400}`,
         outline: 'none',
     },
     '&:active': {
@@ -96,8 +74,5 @@ var Anchor = common_1.styled('a')({
  */
 exports.Hyperlink = common_1.createComponent('a')({
     displayName: 'Hyperlink',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Anchor, __assign({ ref: ref, as: Element }, elemProps), children));
-    },
+    Component: ({ children, ...elemProps }, ref, Element) => (React.createElement(Anchor, Object.assign({ ref: ref, as: Element }, elemProps), children)),
 });

package/dist/commonjs/button/lib/PrimaryButton.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.PrimaryButton = 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 BaseButton_1 = require("./BaseButton");
-var getPrimaryButtonColors = function (variant, theme) {
-    var themePrimary = theme.canvas.palette.primary;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const BaseButton_1 = require("./BaseButton");
+const getPrimaryButtonColors = (variant, theme) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     switch (variant) {
         case undefined:
         default:
@@ -118,10 +96,9 @@ var getPrimaryButtonColors = function (variant, theme) {
  */
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, icon = _a.icon, _d = _a.shouldMirrorIcon, shouldMirrorIcon = _d === void 0 ? false : _d, children = _a.children, elemProps = __rest(_a, ["size", "iconPosition", "variant", "icon", "shouldMirrorIcon", "children"]);
-        var theme = common_1.useTheme();
-        return (React.createElement(BaseButton_1.BaseButton, __assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        const theme = common_1.useTheme();
+        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));

package/dist/commonjs/button/lib/SecondaryButton.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,23 +18,12 @@ 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.getSecondaryButtonColors = exports.SecondaryButton = 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 BaseButton_1 = require("./BaseButton");
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const BaseButton_1 = require("./BaseButton");
 /**
  * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
  * Buttons can be used on most pages without restrictions and work well for multiple actions of
@@ -57,17 +35,16 @@ var BaseButton_1 = require("./BaseButton");
  */
 exports.SecondaryButton = common_1.createComponent('button')({
     displayName: 'SecondaryButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, icon = _a.icon, _d = _a.shouldMirrorIcon, shouldMirrorIcon = _d === void 0 ? false : _d, children = _a.children, elemProps = __rest(_a, ["size", "iconPosition", "variant", "icon", "shouldMirrorIcon", "children"]);
-        var theme = common_1.useTheme();
-        return (React.createElement(BaseButton_1.BaseButton, __assign({ ref: ref, size: size, colors: exports.getSecondaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        const theme = common_1.useTheme();
+        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ ref: ref, size: size, colors: exports.getSecondaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
-var getSecondaryButtonColors = function (variant, theme) {
-    var themePrimary = theme.canvas.palette.primary;
+const getSecondaryButtonColors = (variant, theme) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     switch (variant) {
         case undefined:
         default:

package/dist/commonjs/button/lib/TertiaryButton.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.TertiaryButton = 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 BaseButton_1 = require("./BaseButton");
-var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
-    var themePrimary = theme.canvas.palette.primary;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const BaseButton_1 = require("./BaseButton");
+const getTertiaryButtonColors = (variant, theme, hasThemeStyles) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     if (variant === 'inverse') {
         return {
             default: {
@@ -112,42 +90,39 @@ var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
         };
     }
 };
-var StyledButtonLabel = common_1.styled(BaseButton_1.BaseButton.Label)({
+const StyledButtonLabel = common_1.styled(BaseButton_1.BaseButton.Label)({
     textDecoration: 'underline',
 });
-var StyledTertiaryButtonContainer = common_1.styled(BaseButton_1.BaseButton)({
+const StyledTertiaryButtonContainer = common_1.styled(BaseButton_1.BaseButton)({
     border: '0',
-}, function (_a) {
-    var allCaps = _a.allCaps;
-    return ({
-        textTransform: allCaps ? 'uppercase' : undefined,
-    });
-});
-var getPaddingStyles = function (icon, iconPosition, children, size) {
+}, ({ allCaps }) => ({
+    textTransform: allCaps ? 'uppercase' : undefined,
+}));
+const getPaddingStyles = (icon, iconPosition, children, size) => {
     if (children) {
         // if there is an icon on the left, add 4px extra padding to the right for visual balance
         if (icon && iconPosition === 'start') {
             if (size === 'extraSmall') {
-                return "0 " + tokens_1.space.xxs + " 0 " + tokens_1.space.xxxs;
+                return `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xxxs}`;
             }
-            return "0 " + tokens_1.space.xs + " 0 " + tokens_1.space.xxs;
+            return `0 ${tokens_1.space.xs} 0 ${tokens_1.space.xxs}`;
         }
         // if there is an icon on the right, add 4px extra padding to the left for visual balance
         if (icon && iconPosition === 'end') {
             if (size === 'extraSmall') {
-                return "0 " + tokens_1.space.xxxs + " 0 " + tokens_1.space.xxs;
+                return `0 ${tokens_1.space.xxxs} 0 ${tokens_1.space.xxs}`;
             }
-            return "0 " + tokens_1.space.xxs + " 0 " + tokens_1.space.xs;
+            return `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xs}`;
         }
         // if there is no icon, return the default padding
-        return "0 " + tokens_1.space.xxs;
+        return `0 ${tokens_1.space.xxs}`;
     }
     else {
         return '0';
     }
 };
-var getMinWidthStyles = function (children, size) {
-    var minWidthNum;
+const getMinWidthStyles = (children, size) => {
+    let minWidthNum;
     switch (size) {
         case 'large':
             minWidthNum = '48px';
@@ -179,11 +154,10 @@ var getMinWidthStyles = function (children, size) {
  */
 exports.TertiaryButton = common_1.createComponent('button')({
     displayName: 'TertiaryButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, _d = _a.isThemeable, isThemeable = _d === void 0 ? false : _d, variant = _a.variant, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, elemProps = __rest(_a, ["size", "iconPosition", "isThemeable", "variant", "children", "icon", "shouldMirrorIcon"]);
-        var theme = common_1.useTheme();
-        var hasThemeStyles = !!children || isThemeable;
-        return (React.createElement(StyledTertiaryButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), borderRadius: children ? tokens_1.borderRadius.m : tokens_1.borderRadius.circle }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', isThemeable = false, variant, children, icon, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
+        const theme = common_1.useTheme();
+        const hasThemeStyles = !!children || isThemeable;
+        return (React.createElement(StyledTertiaryButtonContainer, Object.assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), borderRadius: children ? tokens_1.borderRadius.m : tokens_1.borderRadius.circle }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(StyledButtonLabel, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));

package/dist/commonjs/button/lib/ToolbarDropdownButton.js

@@ -1,37 +1,15 @@
 "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.ToolbarDropdownButton = void 0;
-var react_1 = __importDefault(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var BaseButton_1 = require("./BaseButton");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
+const react_1 = __importDefault(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const BaseButton_1 = require("./BaseButton");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
     padding: tokens_1.space.zero,
     minWidth: tokens_1.space.l,
     width: 'auto',
@@ -47,27 +25,23 @@ var StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
         margin: '0 2px 0 0',
     },
     '& .wdc-toolbar-dropdown-btn-custom-icon': {
-        marginLeft: "" + tokens_1.space.xxxs,
+        marginLeft: `${tokens_1.space.xxxs}`,
         marginRight: 0,
         width: 18, // decrease the space between a custom icon and the chevron per design
     },
 });
 exports.ToolbarDropdownButton = common_1.createComponent('button')({
     displayName: 'ToolbarDropdownButton',
-    Component: function (_a, ref, Element) {
-        var 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _b = _a.theme, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "shouldMirrorIcon", "children"]);
-        return (react_1.default.createElement(StyledToolbarDropdownButton, __assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme) }, elemProps),
+    Component: ({ 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = common_1.useTheme(), icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(StyledToolbarDropdownButton, Object.assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme) }, elemProps),
             icon ? (react_1.default.createElement(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children),
             react_1.default.createElement(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: canvas_system_icons_web_1.chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon })));
     },
 });
-var getToolbarDropdownButtonColors = function (theme) {
+const getToolbarDropdownButtonColors = (theme) => {
     return {
         default: {
             icon: tokens_1.colors.licorice200,

package/dist/commonjs/button/lib/ToolbarIconButton.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,45 +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;
-};
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarIconButton = 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 BaseButton_1 = require("./BaseButton");
-var StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)((_a = {},
-    _a['& .wd-icon'] = {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const BaseButton_1 = require("./BaseButton");
+const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
+    ['& .wd-icon']: {
         display: 'inline-block',
         verticalAlign: 'middle',
         width: 20,
         height: 20,
     },
-    _a));
+});
 exports.ToolbarIconButton = common_1.createComponent('button')({
     displayName: 'ToolbarIconButton',
-    Component: function (_a, ref, Element) {
-        var 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _b = _a.theme, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, onToggleChange = _a.onToggleChange, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "onToggleChange", "icon", "shouldMirrorIcon", "toggled", "children"]);
-        var isInitialMount = React.useRef(true);
+    Component: ({ 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = common_1.useTheme(), onToggleChange, icon, shouldMirrorIcon = false, toggled, children, ...elemProps }, ref, Element) => {
+        const isInitialMount = React.useRef(true);
         // Only call onToggleChange on update - not on first mount
-        React.useEffect(function () {
+        React.useEffect(() => {
             if (isInitialMount.current) {
                 isInitialMount.current = false;
             }
@@ -77,11 +50,11 @@ exports.ToolbarIconButton = common_1.createComponent('button')({
                 }
             }
         }, [toggled, onToggleChange]);
-        return (React.createElement(StyledToolbarIconButton, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, "aria-pressed": toggled, padding: "zero", minWidth: tokens_1.space.l, width: tokens_1.space.l, height: tokens_1.space.l, borderRadius: tokens_1.borderRadius.m }, elemProps), icon ? React.createElement(BaseButton_1.BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon }) : children));
+        return (React.createElement(StyledToolbarIconButton, Object.assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, "aria-pressed": toggled, padding: "zero", minWidth: tokens_1.space.l, width: tokens_1.space.l, height: tokens_1.space.l, borderRadius: tokens_1.borderRadius.m }, elemProps), icon ? React.createElement(BaseButton_1.BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon }) : children));
     },
 });
-var getToolbarIconButtonColors = function (theme, toggled) {
-    var themePrimary = theme.canvas.palette.primary;
+const getToolbarIconButtonColors = (theme, toggled) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     return {
         default: {
             icon: toggled ? themePrimary.main : tokens_1.colors.licorice200,