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

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

@@ -1,52 +1,24 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 styled from '@emotion/styled';
 import { colors, commonColors, iconColors, typeColors, space, type, } from '@workday/canvas-kit-react/tokens';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-var Item = styled('li')(__assign(__assign({}, type.levels.subtext.large), { padding: space.xxs + " " + space.s, height: space.xl, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
+const Item = styled('li')({
+    ...type.levels.subtext.large,
+    padding: `${space.xxs} ${space.s}`,
+    height: space.xl,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: colors.blackPepper300,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    transition: 'background-color 80ms, color 80ms',
+    '&:focus': {
         outline: 'none',
-    } }), function (_a) {
-    var isHeader = _a.isHeader;
+    },
+}, ({ isHeader }) => {
     return { pointerEvents: isHeader ? 'none' : 'all' };
-}, function (_a) {
-    var _b;
-    var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
+}, ({ isFocused, isDisabled }) => {
     if (!isFocused && !isDisabled) {
         return {
             backgroundColor: 'inherit',
@@ -67,25 +39,26 @@ var Item = styled('li')(__assign(__assign({}, type.levels.subtext.large), { padd
     }
     else {
         // Is focused or focused and disabled
-        return _b = {
-                backgroundColor: isDisabled ? colors.blueberry200 : commonColors.focusBackground,
-                color: typeColors.inverse,
-                'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        return {
+            backgroundColor: isDisabled ? colors.blueberry200 : commonColors.focusBackground,
+            color: typeColors.inverse,
+            'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                fill: isDisabled ? iconColors.disabled : iconColors.active,
+            },
+            '&:hover': {
+                'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
+                    fill: iconColors.inverse,
+                },
+                'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
                     fill: isDisabled ? iconColors.disabled : iconColors.active,
                 },
-                '&:hover': {
-                    'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
-                        fill: iconColors.inverse,
-                    },
-                    'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
-                        fill: isDisabled ? iconColors.disabled : iconColors.active,
-                    },
-                    'span .wd-icon-background': {
-                        fill: iconColors.inverse,
-                    },
-                }
+                'span .wd-icon-background': {
+                    fill: iconColors.inverse,
+                },
             },
-            _b["[data-whatinput='mouse'] &,\n          [data-whatinput='touch'] &,\n          [data-whatinput='pointer'] &"] = {
+            [`[data-whatinput='mouse'] &,
+          [data-whatinput='touch'] &,
+          [data-whatinput='pointer'] &`]: {
                 backgroundColor: 'inherit',
                 color: colors.blackPepper300,
                 'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
@@ -101,55 +74,67 @@ var Item = styled('li')(__assign(__assign({}, type.levels.subtext.large), { padd
                     fill: iconColors.standard,
                 },
             },
-            _b;
+        };
     }
 });
-var LabelContainer = styled('span')({
+const LabelContainer = styled('span')({
     flex: '1 1 auto',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
 });
-var Divider = styled('hr')({
+const Divider = styled('hr')({
     display: 'block',
     height: 1,
     border: 0,
-    borderTop: "1px solid " + colors.soap400,
-    margin: space.xxs + " 0",
+    borderTop: `1px solid ${colors.soap400}`,
+    margin: `${space.xxs} 0`,
 });
-var iconSize = 24;
-var iconPadding = 16;
-var StyledSystemIcon = styled(SystemIcon)({
+const iconSize = 24;
+const iconPadding = 16;
+const StyledSystemIcon = styled(SystemIcon)({
     minWidth: iconSize + iconPadding, // gives padding between LabelContainer, no matter the direction
 });
-var SecondaryStyledSystemIcon = styled(SystemIcon)({
-    display: "flex",
+const SecondaryStyledSystemIcon = styled(SystemIcon)({
+    display: `flex`,
     minWidth: iconSize + iconPadding,
-    justifyContent: "flex-end",
+    justifyContent: `flex-end`,
 });
-var iconProps = null;
-var secondaryIconProps = null;
-var setIconProps = function (icon, isDisabled, isFocused) {
+let iconProps = null;
+let secondaryIconProps = null;
+const setIconProps = (icon, isDisabled, isFocused) => {
     if (!icon) {
         return null;
     }
-    var props = {
+    let props = {
         icon: icon,
         size: iconSize,
     };
     if (isDisabled) {
-        props = __assign(__assign({}, props), { fill: iconColors.disabled, fillHover: iconColors.disabled, accent: iconColors.disabled, accentHover: iconColors.disabled });
+        props = {
+            ...props,
+            fill: iconColors.disabled,
+            fillHover: iconColors.disabled,
+            accent: iconColors.disabled,
+            accentHover: iconColors.disabled,
+        };
     }
     if (isFocused) {
-        props = __assign(__assign({}, props), { fill: iconColors.inverse, fillHover: iconColors.inverse, accent: iconColors.inverse, accentHover: iconColors.inverse, background: iconColors.inverse });
+        props = {
+            ...props,
+            fill: iconColors.inverse,
+            fillHover: iconColors.inverse,
+            accent: iconColors.inverse,
+            accentHover: iconColors.inverse,
+            background: iconColors.inverse,
+        };
     }
     return props;
 };
-var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
-    if (centerIfNeeded === void 0) { centerIfNeeded = true; }
-    var parent = elem.parentElement;
+const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
+    const parent = elem.parentElement;
     if (elem && parent) {
-        var parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth >
+        const parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth >
             parent.scrollTop + parent.clientHeight, overLeft = elem.offsetLeft - parent.offsetLeft < parent.scrollLeft, overRight = elem.offsetLeft - parent.offsetLeft + elem.clientWidth - parentBorderLeftWidth >
             parent.scrollLeft + parent.clientWidth, alignWithTop = overTop && !overBottom;
         if ((overTop || overBottom) && centerIfNeeded) {
@@ -191,45 +176,44 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
  *
  * @deprecated
  */
-var DeprecatedMenuItem = /** @class */ (function (_super) {
-    __extends(DeprecatedMenuItem, _super);
-    function DeprecatedMenuItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.ref = React.createRef();
-        _this.componentDidUpdate = function (prevProps) {
-            if (!prevProps.isFocused && _this.props.isFocused) {
-                if (_this.ref.current) {
-                    scrollIntoViewIfNeeded(_this.ref.current);
+export class DeprecatedMenuItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = React.createRef();
+        this.componentDidUpdate = (prevProps) => {
+            if (!prevProps.isFocused && this.props.isFocused) {
+                if (this.ref.current) {
+                    scrollIntoViewIfNeeded(this.ref.current);
                 }
             }
         };
-        _this.handleClick = function (event) {
-            if (_this.props.isDisabled) {
+        this.handleClick = (event) => {
+            if (this.props.isDisabled) {
                 return;
             }
-            if (_this.props.onClick) {
-                _this.props.onClick(event);
+            if (this.props.onClick) {
+                this.props.onClick(event);
             }
         };
-        return _this;
     }
-    DeprecatedMenuItem.prototype.componentDidMount = function () {
-        console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n      For more information, please see the V8 upgrade guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n      ");
-    };
-    DeprecatedMenuItem.prototype.render = function () {
-        var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, isHeader = _a.isHeader, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "isHeader", "role"]);
+    componentDidMount() {
+        console.warn(`This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `);
+    }
+    render() {
+        const { onClick, children, id, icon, secondaryIcon, hasDivider, isDisabled, isFocused, isHeader, role, ...elemProps } = this.props;
         iconProps = setIconProps(icon, isDisabled, isFocused);
         secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
         return (React.createElement(React.Fragment, null,
             hasDivider && React.createElement(Divider, { "aria-hidden": "true" }),
-            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, "aria-hidden": isHeader ? true : undefined, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
-                icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
+            React.createElement(Item, Object.assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, "aria-hidden": isHeader ? true : undefined, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
+                icon && iconProps && React.createElement(StyledSystemIcon, Object.assign({}, iconProps)),
                 React.createElement(LabelContainer, null, children),
-                secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
-    };
-    return DeprecatedMenuItem;
-}(React.Component));
-export { DeprecatedMenuItem };
+                secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, Object.assign({}, secondaryIconProps))))));
+    }
+}
 /**
  * If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
  * We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.

package/dist/es6/pill/lib/Pill.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 React from 'react';
 import { BaseButton } from '@workday/canvas-kit-react/button';
 import { createContainer, focusRing, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
@@ -31,7 +9,7 @@ import { PillIconButton } from './PillIconButton';
 import { PillCount } from './PillCount';
 import { PillAvatar } from './PillAvatar';
 import { PillLabel } from './PillLabel';
-var getButtonPillColors = function () {
+const getButtonPillColors = () => {
     return {
         default: {
             background: colors.soap300,
@@ -70,7 +48,7 @@ var getButtonPillColors = function () {
         },
     };
 };
-var getRemovablePillColors = function (disabled) {
+const getRemovablePillColors = (disabled) => {
     return {
         default: {
             background: disabled ? colors.soap100 : colors.soap300,
@@ -103,33 +81,51 @@ var getRemovablePillColors = function (disabled) {
         disabled: {},
     };
 };
-var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: borderRadius.m, flexShrink: 0 }, type.levels.subtext.large), { color: colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + space.xxs, height: space.m, position: 'relative' });
-var StyledBasePill = styled(BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
+const pillBaseStyles = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: borderRadius.m,
+    flexShrink: 0,
+    ...type.levels.subtext.large,
+    color: colors.blackPepper400,
+    boxShadow: 'none',
+    outline: 'none',
+    fontWeight: type.properties.fontWeights.medium,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    width: 'fit-content',
+    padding: `2px ${space.xxs}`,
+    height: space.m,
+    position: 'relative',
+};
+const StyledBasePill = styled(BaseButton.as('button'))({
+    ...pillBaseStyles,
+    '&:focus': {
         'span[data-count="ck-pill-count"]': {
-            borderTop: "1px solid " + colors.blueberry400,
-            borderBottom: "1px solid " + colors.blueberry400,
-            borderRight: "1px solid " + colors.blueberry400,
+            borderTop: `1px solid ${colors.blueberry400}`,
+            borderBottom: `1px solid ${colors.blueberry400}`,
+            borderRight: `1px solid ${colors.blueberry400}`,
         },
-    }, '&:active, &:active:hover, &:active:focus': {
+    },
+    '&:active, &:active:hover, &:active:focus': {
         'span[data-count="ck-pill-count"]': {
             backgroundColor: colors.soap600,
             border: 'none',
         },
-    } }), mouseFocusBehavior({
-    '&:focus': {
-        'span[data-count="ck-pill-count"]': {
-            border: 'none',
-        },
     },
-})), function (_a) {
-    var variant = _a.variant;
-    return ({
+    ...mouseFocusBehavior({
         '&:focus': {
-            borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+            'span[data-count="ck-pill-count"]': {
+                border: 'none',
+            },
         },
-    });
-}, boxStyleFn);
-var StyledNonInteractivePill = styled(StyledBasePill)({
+    }),
+}, ({ variant }) => ({
+    '&:focus': {
+        borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+    },
+}), boxStyleFn);
+const StyledNonInteractivePill = styled(StyledBasePill)({
     cursor: 'default',
     overflow: 'revert',
     position: 'relative',
@@ -177,7 +173,7 @@ var StyledNonInteractivePill = styled(StyledBasePill)({
  * </Pill>
  * ```
  */
-export var Pill = createContainer('button')({
+export const Pill = createContainer('button')({
     displayName: 'Pill',
     modelHook: usePillModel,
     subComponents: {
@@ -242,20 +238,19 @@ export var Pill = createContainer('button')({
          */
         Label: PillLabel,
     },
-})(function (_a, Element, model) {
-    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);
+})(({ variant = 'default', maxWidth, ...elemProps }, Element, model) => {
     return (React.createElement(React.Fragment, null,
-        variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + colors.licorice200, id: model.state.id }, elemProps),
+        variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, Object.assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: `1px solid ${colors.licorice200}`, id: model.state.id }, elemProps),
             React.createElement(PillLabel, null, elemProps.children))),
-        variant === 'default' && (React.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
-            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, function (child, index) {
+        variant === 'default' && (React.createElement(StyledBasePill, Object.assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
+            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, (child, index) => {
                 if (typeof child === 'string') {
                     return React.createElement(PillLabel, { key: index }, child);
                 }
                 return (React.createElement(Flex.Item, { key: index, display: "inline-flex" }, child));
             })))),
-        variant === 'removable' && (React.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
-            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, function (child, index) {
+        variant === 'removable' && (React.createElement(StyledNonInteractivePill, Object.assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
+            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, (child, index) => {
                 if (typeof child === 'string') {
                     return React.createElement(PillLabel, { key: index }, child);
                 }

package/dist/es6/pill/lib/PillAvatar.js

@@ -1,14 +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);
-};
 import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { Avatar } from '@workday/canvas-kit-react/avatar';
@@ -16,8 +5,8 @@ import { usePillModel } from './usePillModel';
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`
 // and the types should be properly extracted
-export var PillAvatar = createSubcomponent('button')({
+export const PillAvatar = createSubcomponent('button')({
     modelHook: usePillModel,
-})(function (elemProps, Element, model) {
-    return (React.createElement(Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
+})((elemProps, Element, model) => {
+    return (React.createElement(Avatar, Object.assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
 });

package/dist/es6/pill/lib/PillCount.js

@@ -1,39 +1,16 @@
-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 { createComponent, styled } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
-var StyledCountContainer = styled(Flex.as('span'))({
+const StyledCountContainer = styled(Flex.as('span'))({
     borderTopLeftRadius: borderRadius.zero,
     borderTopRightRadius: borderRadius.m,
     borderBottomLeftRadius: borderRadius.zero,
     borderBottomRightRadius: borderRadius.m,
 });
-export var PillCount = createComponent('span')({
+export const PillCount = createComponent('span')({
     displayName: 'Pill.Avatar',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledCountContainer, __assign({ display: "inline-flex", alignItems: "center", justifyContent: "center", as: Element, height: 22, minWidth: 22, padding: "0  " + space.xxxs, marginInlineEnd: "-" + space.xxs, marginInlineStart: "" + space.xxxs, backgroundColor: colors.soap500, "data-count": "ck-pill-count", ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledCountContainer, Object.assign({ display: "inline-flex", alignItems: "center", justifyContent: "center", as: Element, height: 22, minWidth: 22, padding: `0  ${space.xxxs}`, marginInlineEnd: `-${space.xxs}`, marginInlineStart: `${space.xxxs}`, backgroundColor: colors.soap500, "data-count": "ck-pill-count", ref: ref }, elemProps), children));
     },
 });

package/dist/es6/pill/lib/PillIcon.js

@@ -1,34 +1,11 @@
-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 { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { usePillModel } from './usePillModel';
 import { plusIcon } from '@workday/canvas-system-icons-web';
 import { space } from '@workday/canvas-kit-react/tokens';
-export var PillIcon = createSubcomponent('span')({
+export const PillIcon = createSubcomponent('span')({
     modelHook: usePillModel,
-})(function (_a, Element) {
-    var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
-    return (React.createElement(SystemIcon, __assign({ marginInlineStart: "-" + space.xxxs, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || plusIcon }, elemProps)));
+})(({ size, icon, ...elemProps }, Element) => {
+    return (React.createElement(SystemIcon, Object.assign({ marginInlineStart: `-${space.xxxs}`, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || plusIcon }, elemProps)));
 });

package/dist/es6/pill/lib/PillIconButton.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 React from 'react';
 import { focusRing, styled, createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
@@ -27,7 +5,7 @@ import { usePillModel } from './usePillModel';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
 import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { BaseButton } from '@workday/canvas-kit-react/button';
-var getIconColors = function () {
+const getIconColors = () => {
     return {
         default: {
             icon: colors.licorice200,
@@ -50,9 +28,9 @@ var getIconColors = function () {
         },
     };
 };
-var StyledIconButton = styled(BaseButton)({
+const StyledIconButton = styled(BaseButton)({
     marginInlineEnd: '-7px',
-    marginInlineStart: "-2px",
+    marginInlineStart: `-2px`,
     overflow: 'visible',
     '::after': {
         content: '""',
@@ -66,10 +44,9 @@ var StyledIconButton = styled(BaseButton)({
         cursor: 'pointer',
     },
 });
-export var PillIconButton = createSubcomponent('button')({
+export const PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,
-})(function (_a, Element, model) {
-    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, _c = _a["aria-label"], ariaLabel = _c === void 0 ? 'remove' : _c, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children", 'aria-label']);
-    return (React.createElement(StyledIconButton, __assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), "aria-labelledby": "removable-" + model.state.id + " label-" + model.state.id, as: Element, position: "relative" }, elemProps),
-        React.createElement(SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: space.m, "aria-hidden": true, role: "img" })));
+})(({ size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps }, Element, model) => {
+    return (React.createElement(StyledIconButton, Object.assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, as: Element, position: "relative" }, elemProps),
+        React.createElement(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon, size: space.m, "aria-hidden": true, role: "img" })));
 });

package/dist/es6/pill/lib/PillLabel.js

@@ -1,41 +1,18 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import { createSubcomponent, styled } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { usePillModel } from './usePillModel';
 import { colors } from '@workday/canvas-kit-react/tokens';
-var StyledLabelContainer = styled(Box.as('span'))({
+const StyledLabelContainer = styled(Box.as('span'))({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     display: 'block',
 });
-export var PillLabel = createSubcomponent('span')({
+export const PillLabel = createSubcomponent('span')({
     modelHook: usePillModel,
-})(function (_a, Element, model) {
-    var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
-    return (React.createElement(OverflowTooltip, __assign({}, tooltipProps),
-        React.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: "label-" + model.state.id }, elemProps), elemProps.children)));
+})(({ tooltipProps, ...elemProps }, Element, model) => {
+    return (React.createElement(OverflowTooltip, Object.assign({}, tooltipProps),
+        React.createElement(StyledLabelContainer, Object.assign({ color: model.state.disabled ? colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: `label-${model.state.id}` }, elemProps), elemProps.children)));
 });