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

package/dist/es6/button/lib/DeleteButton.js

@@ -1,66 +1,35 @@
-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 { BaseButton, getMinWidthStyles, getPaddingStyles } from './BaseButton';
 import { useTheme, createComponent, } from '@workday/canvas-kit-react/common';
-var getDeleteButtonColors = function (_a) {
-    var themeError = _a.canvas.palette.error;
-    return ({
-        default: {
-            background: themeError.main,
-            label: themeError.contrast,
-        },
-        hover: {
-            background: themeError.dark,
-        },
-        active: {
-            background: themeError.darkest,
-        },
-        focus: {
-            background: themeError.main,
-        },
-        disabled: {
-            background: themeError.light,
-            opacity: '1', // allows for overriding the default opacity of 0.4
-        },
-    });
-};
+const getDeleteButtonColors = ({ canvas: { palette: { error: themeError }, }, }) => ({
+    default: {
+        background: themeError.main,
+        label: themeError.contrast,
+    },
+    hover: {
+        background: themeError.dark,
+    },
+    active: {
+        background: themeError.darkest,
+    },
+    focus: {
+        background: themeError.main,
+    },
+    disabled: {
+        background: themeError.light,
+        opacity: '1', // allows for overriding the default opacity of 0.4
+    },
+});
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
  * have significant consequences. They commonly appear in confirmation dialogs as the final
  * confirmation before deleting.
  */
-export var DeleteButton = createComponent('button')({
+export const DeleteButton = createComponent('button')({
     displayName: 'DeleteButton',
-    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 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, children = _a.children, elemProps = __rest(_a, ["theme", "size", "children"]);
-        return (React.createElement(BaseButton, __assign({ padding: getPaddingStyles(children, size, undefined, undefined), minWidth: getMinWidthStyles(children, size), ref: ref, as: Element, colors: getDeleteButtonColors(theme), size: size }, elemProps),
-            React.createElement(BaseButton.Label, null, children)));
-    },
+    Component: ({ 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = useTheme(), size = 'medium', children, ...elemProps }, ref, Element) => (React.createElement(BaseButton, Object.assign({ padding: getPaddingStyles(children, size, undefined, undefined), minWidth: getMinWidthStyles(children, size), ref: ref, as: Element, colors: getDeleteButtonColors(theme), size: size }, elemProps),
+        React.createElement(BaseButton.Label, null, children))),
 });

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

@@ -1,46 +1,32 @@
-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 React from 'react';
 import { styled, createComponent } from '@workday/canvas-kit-react/common';
 import { extLinkIcon } from '@workday/canvas-system-icons-web';
 import { SystemIcon, systemIconStyles } from '@workday/canvas-kit-react/icon';
 import { Hyperlink } from './Hyperlink';
-var iconStyles = __assign({}, systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }));
-var Anchor = styled(Hyperlink)(__assign(__assign({}, iconStyles), { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' }));
-var iconSize = '1em';
-var minIconSize = '16px';
-var StyledSystemIcon = styled(SystemIcon)(__assign(__assign({}, iconStyles), { width: "calc(" + iconSize + " - 1px)", minWidth: "calc(" + minIconSize + " - 1px)", marginLeft: '2px' }));
+const iconStyles = {
+    ...systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }),
+};
+const Anchor = styled(Hyperlink)({
+    ...iconStyles,
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+});
+const iconSize = '1em';
+const minIconSize = '16px';
+const StyledSystemIcon = styled(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`.
  */
-export var ExternalHyperlink = createComponent('a')({
+export const ExternalHyperlink = 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.createElement(Anchor, __assign({ ref: ref, target: "_blank", rel: "noreferrer" }, elemProps),
-            React.createElement("span", null, children),
-            React.createElement(StyledSystemIcon, { icon: 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.createElement(Anchor, Object.assign({ ref: ref, target: "_blank", rel: "noreferrer" }, elemProps),
+        React.createElement("span", null, children),
+        React.createElement(StyledSystemIcon, { icon: extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, styles: { ['& svg']: { minWidth: minIconSize, minHeight: minIconSize } } }))),
 });

package/dist/es6/button/lib/Hyperlink.js

@@ -1,29 +1,7 @@
-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 { borderRadius, colors, type } from '@workday/canvas-kit-react/tokens';
 import { styled, createComponent } from '@workday/canvas-kit-react/common';
-var variantStyles = {
+const variantStyles = {
     inverse: {
         color: colors.frenchVanilla100,
         '&:hover': {
@@ -31,7 +9,7 @@ var variantStyles = {
             background: 'rgba(255, 255, 255, 0.1)',
         },
         '&:focus': {
-            boxShadow: "0 0 0 2px " + colors.frenchVanilla100,
+            boxShadow: `0 0 0 2px ${colors.frenchVanilla100}`,
         },
         '&:active': {
             color: colors.blueberry600,
@@ -39,13 +17,13 @@ var variantStyles = {
         },
     },
 };
-var anchorVariants = function (props) {
+const anchorVariants = (props) => {
     if (props.variant === 'inverse') {
         return variantStyles.inverse;
     }
     return {};
 };
-var Anchor = styled('a')({
+const Anchor = styled('a')({
     fontFamily: type.properties.fontFamilies.default,
     textDecoration: 'underline',
     color: colors.blueberry400,
@@ -60,7 +38,7 @@ var Anchor = styled('a')({
         background: colors.soap200,
     },
     '&:focus': {
-        boxShadow: "0 0 0 2px " + colors.blueberry400,
+        boxShadow: `0 0 0 2px ${colors.blueberry400}`,
         outline: 'none',
     },
     '&:active': {
@@ -72,10 +50,7 @@ var Anchor = styled('a')({
  * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
  * on the current page.
  */
-export var Hyperlink = createComponent('a')({
+export const Hyperlink = 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/es6/button/lib/PrimaryButton.js

@@ -1,31 +1,9 @@
-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 { useTheme, createComponent, focusRing, } from '@workday/canvas-kit-react/common';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { BaseButton, getMinWidthStyles, getPaddingStyles } from './BaseButton';
-var getPrimaryButtonColors = function (variant, theme) {
-    var themePrimary = theme.canvas.palette.primary;
+const getPrimaryButtonColors = (variant, theme) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     switch (variant) {
         case undefined:
         default:
@@ -94,12 +72,11 @@ var getPrimaryButtonColors = function (variant, theme) {
  * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
  * prop.
  */
-export var PrimaryButton = createComponent('button')({
+export const PrimaryButton = 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 = useTheme();
-        return (React.createElement(BaseButton, __assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: getPaddingStyles(children, size, icon, iconPosition), minWidth: getMinWidthStyles(children, size), as: Element }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        const theme = useTheme();
+        return (React.createElement(BaseButton, Object.assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: getPaddingStyles(children, size, icon, iconPosition), minWidth: getMinWidthStyles(children, size), as: Element }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(BaseButton.Label, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));

package/dist/es6/button/lib/SecondaryButton.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 } from '@workday/canvas-kit-react/tokens';
 import { useTheme, createComponent, focusRing, } from '@workday/canvas-kit-react/common';
@@ -33,19 +11,18 @@ import { BaseButton, getMinWidthStyles, getPaddingStyles } from './BaseButton';
  * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
  * prop.
  */
-export var SecondaryButton = createComponent('button')({
+export const SecondaryButton = 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 = useTheme();
-        return (React.createElement(BaseButton, __assign({ ref: ref, size: size, colors: getSecondaryButtonColors(variant, theme), padding: getPaddingStyles(children, size, icon, iconPosition), minWidth: getMinWidthStyles(children, size), as: Element }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        const theme = useTheme();
+        return (React.createElement(BaseButton, Object.assign({ ref: ref, size: size, colors: getSecondaryButtonColors(variant, theme), padding: getPaddingStyles(children, size, icon, iconPosition), minWidth: getMinWidthStyles(children, size), as: Element }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(BaseButton.Label, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
-export var getSecondaryButtonColors = function (variant, theme) {
-    var themePrimary = theme.canvas.palette.primary;
+export const getSecondaryButtonColors = (variant, theme) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     switch (variant) {
         case undefined:
         default:

package/dist/es6/button/lib/TertiaryButton.js

@@ -1,31 +1,9 @@
-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 { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
 import { BaseButton } from './BaseButton';
-var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
-    var themePrimary = theme.canvas.palette.primary;
+const getTertiaryButtonColors = (variant, theme, hasThemeStyles) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     if (variant === 'inverse') {
         return {
             default: {
@@ -90,42 +68,39 @@ var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
         };
     }
 };
-var StyledButtonLabel = styled(BaseButton.Label)({
+const StyledButtonLabel = styled(BaseButton.Label)({
     textDecoration: 'underline',
 });
-var StyledTertiaryButtonContainer = styled(BaseButton)({
+const StyledTertiaryButtonContainer = styled(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 " + space.xxs + " 0 " + space.xxxs;
+                return `0 ${space.xxs} 0 ${space.xxxs}`;
             }
-            return "0 " + space.xs + " 0 " + space.xxs;
+            return `0 ${space.xs} 0 ${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 " + space.xxxs + " 0 " + space.xxs;
+                return `0 ${space.xxxs} 0 ${space.xxs}`;
             }
-            return "0 " + space.xxs + " 0 " + space.xs;
+            return `0 ${space.xxs} 0 ${space.xs}`;
         }
         // if there is no icon, return the default padding
-        return "0 " + space.xxs;
+        return `0 ${space.xxs}`;
     }
     else {
         return '0';
     }
 };
-var getMinWidthStyles = function (children, size) {
-    var minWidthNum;
+const getMinWidthStyles = (children, size) => {
+    let minWidthNum;
     switch (size) {
         case 'large':
             minWidthNum = '48px';
@@ -155,13 +130,12 @@ var getMinWidthStyles = function (children, size) {
  * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
  * prop.
  */
-export var TertiaryButton = createComponent('button')({
+export const TertiaryButton = 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 = 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 ? borderRadius.m : borderRadius.circle }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', isThemeable = false, variant, children, icon, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
+        const theme = 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 ? borderRadius.m : borderRadius.circle }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(StyledButtonLabel, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));

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

@@ -1,31 +1,9 @@
-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 React from 'react';
 import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
 import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
 import { BaseButton } from './BaseButton';
 import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
-var StyledToolbarDropdownButton = styled(BaseButton)({
+const StyledToolbarDropdownButton = styled(BaseButton)({
     padding: space.zero,
     minWidth: space.l,
     width: 'auto',
@@ -41,27 +19,23 @@ var StyledToolbarDropdownButton = styled(BaseButton)({
         margin: '0 2px 0 0',
     },
     '& .wdc-toolbar-dropdown-btn-custom-icon': {
-        marginLeft: "" + space.xxxs,
+        marginLeft: `${space.xxxs}`,
         marginRight: 0,
         width: 18, // decrease the space between a custom icon and the chevron per design
     },
 });
-export var ToolbarDropdownButton = createComponent('button')({
+export const ToolbarDropdownButton = 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 ? 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.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 = useTheme(), icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledToolbarDropdownButton, Object.assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme) }, elemProps),
             icon ? (React.createElement(BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children),
             React.createElement(BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon })));
     },
 });
-var getToolbarDropdownButtonColors = function (theme) {
+const getToolbarDropdownButtonColors = (theme) => {
     return {
         default: {
             icon: colors.licorice200,

package/dist/es6/button/lib/ToolbarIconButton.js

@@ -1,51 +1,24 @@
-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 _a;
 import * as React from 'react';
 import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
 import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
 import { BaseButton } from './BaseButton';
-var StyledToolbarIconButton = styled(BaseButton)((_a = {},
-    _a['& .wd-icon'] = {
+const StyledToolbarIconButton = styled(BaseButton)({
+    ['& .wd-icon']: {
         display: 'inline-block',
         verticalAlign: 'middle',
         width: 20,
         height: 20,
     },
-    _a));
-export var ToolbarIconButton = createComponent('button')({
+});
+export const ToolbarIconButton = 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 ? 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 = 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;
             }
@@ -55,11 +28,11 @@ export var ToolbarIconButton = 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: space.l, width: space.l, height: space.l, borderRadius: borderRadius.m }, elemProps), icon ? React.createElement(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: space.l, width: space.l, height: space.l, borderRadius: borderRadius.m }, elemProps), icon ? React.createElement(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 : colors.licorice200,