@workday/canvas-kit-preview-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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,63 +87,179 @@ 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',
 });
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
 exports.Pill = common_1.createContainer('button')({
+    displayName: 'Pill',
     modelHook: usePillModel_1.usePillModel,
     subComponents: {
-        Icon: PillIcon_1.PillIcon,
+        /**
+         * This component renders an avatar. It supports all props of the `Avatar` component.
+         *
+         * ```tsx
+         * <Pill variant="removable">
+         *   <Pill.Avatar url={avatarUrl} />
+         *   Regina Skeltor
+         *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+         * </Pill>
+         * ```
+         */
         Avatar: PillAvatar_1.PillAvatar,
+        /**
+         * This component renders its `children` as the count.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *   Shoes
+         *   <Pill.Count>30</Pill.Count>
+         * </Pill>
+         * ```
+         */
         Count: PillCount_1.PillCount,
-        Label: PillLabel_1.PillLabel,
+        /**
+         * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
+         * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
+         * providing an icon to the `icon` prop.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *   <Pill.Icon />
+         *   <Pill.Label>Regina Skeltor</Pill.Label>
+         * </Pill>
+         * ```
+         */
+        Icon: PillIcon_1.PillIcon,
+        /**
+         * This component renders a custom icon button. It is only intended to be used with the
+         * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+         * an icon to the `icon` prop.
+         *
+         * ```tsx
+         * <Pill variant="removable">
+         *   Pink Shirts
+         *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+         * </Pill>
+         * ```
+         */
         IconButton: PillIconButton_1.PillIconButton,
+        /**
+         * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+         * There's no need to use this component directly since the overflow is handled for you automatically.
+         *
+         * ```tsx
+         * <Pill variant="readOnly">
+         *   <Pill.Label>Read-only</Pill.Label>
+         * </Pill>
+         * ```
+         */
+        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.HStack, { spacing: "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.Stack.Item, { key: index, display: "inline-flex" }, 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.HStack, { spacing: "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);
                 }
-                return react_1.default.createElement(layout_1.Stack.Item, { key: index }, child);
+                return react_1.default.createElement(layout_1.Flex.Item, { 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)));
 });

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

@@ -1,39 +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.PillIconButton = 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");
-var button_1 = require("@workday/canvas-kit-react/button");
-var getIconColors = function () {
+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");
+const button_1 = require("@workday/canvas-kit-react/button");
+const getIconColors = () => {
     return {
         default: {
             icon: tokens_1.colors.licorice200,
@@ -56,9 +34,9 @@ var getIconColors = function () {
         },
     };
 };
-var StyledIconButton = common_1.styled(button_1.BaseButton)({
+const StyledIconButton = common_1.styled(button_1.BaseButton)({
     marginInlineEnd: '-7px',
-    marginInlineStart: "-2px",
+    marginInlineStart: `-2px`,
     overflow: 'visible',
     '::after': {
         content: '""',
@@ -74,8 +52,7 @@ var StyledIconButton = common_1.styled(button_1.BaseButton)({
 });
 exports.PillIconButton = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,
-})(function (_a, Element, model) {
-    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.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_1.default.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_1.default.createElement(icon_1.SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: tokens_1.space.m, "aria-hidden": true, role: "img" })));
+})(({ size, icon = canvas_system_icons_web_1.xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps }, Element, model) => {
+    return (react_1.default.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_1.default.createElement(icon_1.SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon, size: tokens_1.space.m, "aria-hidden": true, role: "img" })));
 });

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

@@ -1,38 +1,16 @@
 "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.PillLabel = 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 tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var usePillModel_1 = require("./usePillModel");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var StyledLabelContainer = common_1.styled(layout_1.Box.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 tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const usePillModel_1 = require("./usePillModel");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const StyledLabelContainer = common_1.styled(layout_1.Box.as('span'))({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -40,8 +18,7 @@ var StyledLabelContainer = common_1.styled(layout_1.Box.as('span'))({
 });
 exports.PillLabel = common_1.createSubcomponent('span')({
     modelHook: usePillModel_1.usePillModel,
-})(function (_a, Element, model) {
-    var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
-    return (react_1.default.createElement(tooltip_1.OverflowTooltip, __assign({}, tooltipProps),
-        react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: "label-" + model.state.id }, elemProps), elemProps.children)));
+})(({ tooltipProps, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(tooltip_1.OverflowTooltip, Object.assign({}, tooltipProps),
+        react_1.default.createElement(StyledLabelContainer, Object.assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: `label-${model.state.id}` }, elemProps), elemProps.children)));
 });

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

@@ -1,18 +1,7 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePillModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
+const common_1 = require("@workday/canvas-kit-react/common");
 exports.usePillModel = common_1.createModelHook({
     defaultConfig: {
         /**
@@ -30,8 +19,11 @@ exports.usePillModel = common_1.createModelHook({
          */
         id: '',
     },
-})(function (config) {
-    var id = common_1.useUniqueId(config.id);
-    var state = __assign(__assign({}, config), { id: id });
-    return { state: state, events: {} };
+})(config => {
+    const id = common_1.useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return { state, events: {} };
 });

package/dist/commonjs/segmented-control/index.d.ts

@@ -1,3 +1,5 @@
 export * from './lib/SegmentedControl';
 export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export { useSegmentedControlList } from './lib/SegmentedControlList';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,4BAA4B,CAAC"}

package/dist/commonjs/segmented-control/index.js

@@ -10,5 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentedControlList = void 0;
 __exportStar(require("./lib/SegmentedControl"), exports);
 __exportStar(require("./lib/hooks/useSegmentedControlModel"), exports);
+__exportStar(require("./lib/hooks/useSegmentedControlItem"), exports);
+var SegmentedControlList_1 = require("./lib/SegmentedControlList");
+Object.defineProperty(exports, "useSegmentedControlList", { enumerable: true, get: function () { return SegmentedControlList_1.useSegmentedControlList; } });