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

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

@@ -1,30 +1,4 @@
 "use strict";
-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 __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]; } });
@@ -44,34 +18,32 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeprecatedMenuItem = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { padding: tokens_1.space.xxs + " " + tokens_1.space.s, height: tokens_1.space.xl, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const Item = styled_1.default('li')({
+    ...tokens_1.type.levels.subtext.large,
+    padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`,
+    height: tokens_1.space.xl,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: tokens_1.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',
@@ -92,25 +64,26 @@ var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.sub
     }
     else {
         // Is focused or focused and disabled
-        return _b = {
-                backgroundColor: isDisabled ? tokens_1.colors.blueberry200 : tokens_1.commonColors.focusBackground,
-                color: tokens_1.typeColors.inverse,
-                'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        return {
+            backgroundColor: isDisabled ? tokens_1.colors.blueberry200 : tokens_1.commonColors.focusBackground,
+            color: tokens_1.typeColors.inverse,
+            'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
+            },
+            '&:hover': {
+                'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.inverse,
+                },
+                'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
                     fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
                 },
-                '&:hover': {
-                    'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
-                        fill: tokens_1.iconColors.inverse,
-                    },
-                    'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
-                        fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
-                    },
-                    'span .wd-icon-background': {
-                        fill: tokens_1.iconColors.inverse,
-                    },
-                }
+                'span .wd-icon-background': {
+                    fill: tokens_1.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: tokens_1.colors.blackPepper300,
                 'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
@@ -126,55 +99,67 @@ var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.sub
                     fill: tokens_1.iconColors.standard,
                 },
             },
-            _b;
+        };
     }
 });
-var LabelContainer = styled_1.default('span')({
+const LabelContainer = styled_1.default('span')({
     flex: '1 1 auto',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
 });
-var Divider = styled_1.default('hr')({
+const Divider = styled_1.default('hr')({
     display: 'block',
     height: 1,
     border: 0,
-    borderTop: "1px solid " + tokens_1.colors.soap400,
-    margin: tokens_1.space.xxs + " 0",
+    borderTop: `1px solid ${tokens_1.colors.soap400}`,
+    margin: `${tokens_1.space.xxs} 0`,
 });
-var iconSize = 24;
-var iconPadding = 16;
-var StyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
+const iconSize = 24;
+const iconPadding = 16;
+const StyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
     minWidth: iconSize + iconPadding, // gives padding between LabelContainer, no matter the direction
 });
-var SecondaryStyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
-    display: "flex",
+const SecondaryStyledSystemIcon = styled_1.default(icon_1.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: tokens_1.iconColors.disabled, fillHover: tokens_1.iconColors.disabled, accent: tokens_1.iconColors.disabled, accentHover: tokens_1.iconColors.disabled });
+        props = {
+            ...props,
+            fill: tokens_1.iconColors.disabled,
+            fillHover: tokens_1.iconColors.disabled,
+            accent: tokens_1.iconColors.disabled,
+            accentHover: tokens_1.iconColors.disabled,
+        };
     }
     if (isFocused) {
-        props = __assign(__assign({}, props), { fill: tokens_1.iconColors.inverse, fillHover: tokens_1.iconColors.inverse, accent: tokens_1.iconColors.inverse, accentHover: tokens_1.iconColors.inverse, background: tokens_1.iconColors.inverse });
+        props = {
+            ...props,
+            fill: tokens_1.iconColors.inverse,
+            fillHover: tokens_1.iconColors.inverse,
+            accent: tokens_1.iconColors.inverse,
+            accentHover: tokens_1.iconColors.inverse,
+            background: tokens_1.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) {
@@ -216,44 +201,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);
+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));
+                secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, Object.assign({}, secondaryIconProps))))));
+    }
+}
 exports.DeprecatedMenuItem = DeprecatedMenuItem;
 /**
  * If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.

package/dist/commonjs/pill/lib/Pill.js

@@ -1,43 +1,21 @@
 "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.Pill = void 0;
-var react_1 = __importDefault(require("react"));
-var button_1 = require("@workday/canvas-kit-react/button");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var usePillModel_1 = require("./usePillModel");
-var PillIcon_1 = require("./PillIcon");
-var PillIconButton_1 = require("./PillIconButton");
-var PillCount_1 = require("./PillCount");
-var PillAvatar_1 = require("./PillAvatar");
-var PillLabel_1 = require("./PillLabel");
-var getButtonPillColors = function () {
+const react_1 = __importDefault(require("react"));
+const button_1 = require("@workday/canvas-kit-react/button");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const usePillModel_1 = require("./usePillModel");
+const PillIcon_1 = require("./PillIcon");
+const PillIconButton_1 = require("./PillIconButton");
+const PillCount_1 = require("./PillCount");
+const PillAvatar_1 = require("./PillAvatar");
+const PillLabel_1 = require("./PillLabel");
+const getButtonPillColors = () => {
     return {
         default: {
             background: tokens_1.colors.soap300,
@@ -76,7 +54,7 @@ var getButtonPillColors = function () {
         },
     };
 };
-var getRemovablePillColors = function (disabled) {
+const getRemovablePillColors = (disabled) => {
     return {
         default: {
             background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap300,
@@ -109,33 +87,51 @@ var getRemovablePillColors = function (disabled) {
         disabled: {},
     };
 };
-var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: tokens_1.borderRadius.m, flexShrink: 0 }, tokens_1.type.levels.subtext.large), { color: tokens_1.colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: tokens_1.type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + tokens_1.space.xxs, height: tokens_1.space.m, position: 'relative' });
-var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
+const pillBaseStyles = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: tokens_1.borderRadius.m,
+    flexShrink: 0,
+    ...tokens_1.type.levels.subtext.large,
+    color: tokens_1.colors.blackPepper400,
+    boxShadow: 'none',
+    outline: 'none',
+    fontWeight: tokens_1.type.properties.fontWeights.medium,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    width: 'fit-content',
+    padding: `2px ${tokens_1.space.xxs}`,
+    height: tokens_1.space.m,
+    position: 'relative',
+};
+const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
+    ...pillBaseStyles,
+    '&:focus': {
         'span[data-count="ck-pill-count"]': {
-            borderTop: "1px solid " + tokens_1.colors.blueberry400,
-            borderBottom: "1px solid " + tokens_1.colors.blueberry400,
-            borderRight: "1px solid " + tokens_1.colors.blueberry400,
+            borderTop: `1px solid ${tokens_1.colors.blueberry400}`,
+            borderBottom: `1px solid ${tokens_1.colors.blueberry400}`,
+            borderRight: `1px solid ${tokens_1.colors.blueberry400}`,
         },
-    }, '&:active, &:active:hover, &:active:focus': {
+    },
+    '&:active, &:active:hover, &:active:focus': {
         'span[data-count="ck-pill-count"]': {
             backgroundColor: tokens_1.colors.soap600,
             border: 'none',
         },
-    } }), common_1.mouseFocusBehavior({
-    '&:focus': {
-        'span[data-count="ck-pill-count"]': {
-            border: 'none',
-        },
     },
-})), function (_a) {
-    var variant = _a.variant;
-    return ({
+    ...common_1.mouseFocusBehavior({
         '&:focus': {
-            borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
+            'span[data-count="ck-pill-count"]': {
+                border: 'none',
+            },
         },
-    });
-}, layout_1.boxStyleFn);
-var StyledNonInteractivePill = common_1.styled(StyledBasePill)({
+    }),
+}, ({ variant }) => ({
+    '&:focus': {
+        borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
+    },
+}), layout_1.boxStyleFn);
+const StyledNonInteractivePill = common_1.styled(StyledBasePill)({
     cursor: 'default',
     overflow: 'revert',
     position: 'relative',
@@ -248,20 +244,19 @@ exports.Pill = common_1.createContainer('button')({
          */
         Label: PillLabel_1.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_1.default.createElement(react_1.default.Fragment, null,
-        variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200, id: model.state.id }, elemProps),
+        variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, Object.assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: `1px solid ${tokens_1.colors.licorice200}`, id: model.state.id }, elemProps),
             react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
-        variant === 'default' && (react_1.default.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
-            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
+        variant === 'default' && (react_1.default.createElement(StyledBasePill, Object.assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
+            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
                 if (typeof child === 'string') {
                     return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
                 }
                 return (react_1.default.createElement(layout_1.Flex.Item, { key: index, display: "inline-flex" }, child));
             })))),
-        variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
-            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
+        variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, Object.assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
+            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
                 if (typeof child === 'string') {
                     return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
                 }

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

@@ -1,29 +1,18 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillAvatar = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var avatar_1 = require("@workday/canvas-kit-react/avatar");
-var usePillModel_1 = require("./usePillModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const avatar_1 = require("@workday/canvas-kit-react/avatar");
+const usePillModel_1 = require("./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
 exports.PillAvatar = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,
-})(function (elemProps, Element, model) {
-    return (react_1.default.createElement(avatar_1.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_1.default.createElement(avatar_1.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/commonjs/pill/lib/PillCount.js

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

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

@@ -1,40 +1,17 @@
 "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.PillIcon = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var usePillModel_1 = require("./usePillModel");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const usePillModel_1 = require("./usePillModel");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 exports.PillIcon = common_1.createSubcomponent('span')({
     modelHook: usePillModel_1.usePillModel,
-})(function (_a, Element) {
-    var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
-    return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
+})(({ size, icon, ...elemProps }, Element) => {
+    return (react_1.default.createElement(icon_1.SystemIcon, Object.assign({ marginInlineStart: `-${tokens_1.space.xxxs}`, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
 });