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

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

@@ -1,29 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import { BaseButton } from '@workday/canvas-kit-react/button';
 import { createContainer, focusRing, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
-import { boxStyleFn, HStack, Stack } from '@workday/canvas-kit-react/layout';
+import { boxStyleFn, Flex } from '@workday/canvas-kit-react/layout';
 import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
 import { usePillModel } from './usePillModel';
 import { PillIcon } from './PillIcon';
@@ -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,63 +81,179 @@ 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',
 });
-export var Pill = createContainer('button')({
+/**
+ * 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>
+ * ```
+ */
+export const Pill = createContainer('button')({
+    displayName: 'Pill',
     modelHook: usePillModel,
     subComponents: {
-        Icon: 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,
+        /**
+         * This component renders its `children` as the count.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *   Shoes
+         *   <Pill.Count>30</Pill.Count>
+         * </Pill>
+         * ```
+         */
         Count: PillCount,
-        Label: 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,
+        /**
+         * 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,
+        /**
+         * 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,
     },
-})(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(HStack, { spacing: "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(Stack.Item, { key: index, display: "inline-flex" }, 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(HStack, { spacing: "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);
                 }
-                return React.createElement(Stack.Item, { key: index }, child);
+                return React.createElement(Flex.Item, { 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)));
 });

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

@@ -1,16 +1,5 @@
-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 { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
-export var usePillModel = createModelHook({
+export const usePillModel = createModelHook({
     defaultConfig: {
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
@@ -27,8 +16,11 @@ export var usePillModel = createModelHook({
          */
         id: '',
     },
-})(function (config) {
-    var id = useUniqueId(config.id);
-    var state = __assign(__assign({}, config), { id: id });
-    return { state: state, events: {} };
+})(config => {
+    const id = useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return { state, events: {} };
 });

package/dist/es6/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/es6/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/es6/segmented-control/index.js

@@ -1,2 +1,4 @@
 export * from './lib/SegmentedControl';
 export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export { useSegmentedControlList } from './lib/SegmentedControlList';