@workday/canvas-kit-react 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0076-next.0

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { Avatar, avatarStencil } from '@workday/canvas-kit-preview-react/avatar';
+import { usePillModel } from './usePillModel';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { system } from '@workday/canvas-tokens-web';
+export const pillAvatarStencil = createStencil({
+    extends: avatarStencil,
+    base: { name: "1jjjid", styles: "box-sizing:border-box;flex:0 0 auto;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}" }
+}, "pill-avatar-f960e5");
+export const PillAvatar = createSubcomponent('div')({
+    modelHook: usePillModel,
+})(({ size, ...elemProps }, Element, _model) => {
+    return (_jsx(Avatar, { isDecorative: true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [
+            pillAvatarStencil(),
+            _model.state.disabled ? 'disabled' : undefined,
+        ]) }));
+});

package/dist/es6/pill/lib/PillCount.d.ts

@@ -0,0 +1,12 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface PillCountProps extends FlexProps {
+}
+export declare const pillCountStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+    borderColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+    borderColor: string;
+}, never, never>;
+export declare const PillCount: import("@workday/canvas-kit-react/common").ElementComponent<"span", PillCountProps>;
+//# sourceMappingURL=PillCount.d.ts.map

package/dist/es6/pill/lib/PillCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillCount.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillCount.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAIxE,MAAM,WAAW,cAAe,SAAQ,SAAS;CAAG;AAEpD,eAAO,MAAM,gBAAgB;;;;;;gBAyB3B,CAAC;AAEH,eAAO,MAAM,SAAS,qFASpB,CAAC"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+export const pillCountStencil = createStencil({
+    vars: {
+        backgroundColor: '',
+        borderColor: '',
+    },
+    base: { name: "35toxf", styles: "box-sizing:border-box;border-start-start-radius:var(--cnvs-sys-shape-zero);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-zero);border-end-end-radius:var(--cnvs-sys-shape-x1);border-width:0.0625rem;border-inline-start-width:var(--cnvs-sys-space-zero);border-style:solid;border-color:var(--borderColor-pill-count-d52af1, var(--cnvs-sys-color-border-transparent));display:inline-flex;align-items:center;justify-content:center;height:1.375rem;width:var(--cnvs-sys-space-x6);padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);margin-inline-end:calc(var(--cnvs-sys-space-x2) * -1);margin-inline-start:var(--cnvs-sys-space-x1);background-color:var(--backgroundColor-pill-count-d52af1, var(--cnvs-sys-color-bg-alt-stronger));flex:0 0 auto;" }
+}, "pill-count-d52af1");
+export const PillCount = createComponent('span')({
+    displayName: 'Pill.Count',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, pillCountStencil()), children: children }));
+    },
+});

package/dist/es6/pill/lib/PillIcon.d.ts

@@ -0,0 +1,54 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface PillIconProps extends Partial<SystemIconProps> {
+}
+export declare const pillIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{}, {}, {
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: string;
+        };
+    };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+}, {}, {
+    width: string;
+    height: string;
+    size: string;
+}, never, never>, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{}, {}, {
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: string;
+        };
+    };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+}, {}, {
+    width: string;
+    height: string;
+    size: string;
+}, never, never>, never>, never>;
+export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
+    state: {
+        id: string;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillIcon.d.ts.map

package/dist/es6/pill/lib/PillIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAO9F,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,eAAe,CAAC;CAAG;AAElE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAO1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;EAWnB,CAAC"}

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { usePillModel } from './usePillModel';
+import { plusIcon } from '@workday/canvas-system-icons-web';
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+export const pillIconStencil = createStencil({
+    extends: systemIconStencil,
+    base: { name: "201cve", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-space-x1) * -1);--size-svg-8fcab8:1.25rem;flex:0 0 auto;" }
+}, "pill-icon-9c34c5");
+export const PillIcon = createSubcomponent('span')({
+    modelHook: usePillModel,
+})(({ icon, ...elemProps }, Element) => {
+    return (_jsx(SystemIcon, { as: Element, role: "img", icon: icon || plusIcon, ...mergeStyles(elemProps, pillIconStencil()) }));
+});

package/dist/es6/pill/lib/PillIconButton.d.ts

@@ -0,0 +1,148 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface PillIconButtonProps extends Partial<SystemIconProps> {
+    /**
+     * The aria label for the removable icon. You must provide a valid string to represent the action.
+     */
+    'aria-label'?: string;
+}
+export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-xl, 3rem)";
+            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
+            minWidth: "--cnvs-base-size-1400";
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
+        };
+        medium: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            minWidth: "--cnvs-base-size-1200";
+            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
+            height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
+        };
+        small: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
+            minWidth: "--cnvs-base-size-1000";
+            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
+        };
+        extraSmall: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
+            minWidth: string;
+            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
+        };
+    };
+    grow: {
+        true: {
+            width: string;
+            maxWidth: string;
+        };
+    };
+    iconPosition: {
+        only: {
+            padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
+        };
+        start: {};
+        end: {};
+    };
+}, {}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-xl, 3rem)";
+            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
+            minWidth: "--cnvs-base-size-1400";
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
+        };
+        medium: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            minWidth: "--cnvs-base-size-1200";
+            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
+            height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
+        };
+        small: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
+            minWidth: "--cnvs-base-size-1000";
+            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
+        };
+        extraSmall: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
+            minWidth: string;
+            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
+            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
+        };
+    };
+    grow: {
+        true: {
+            width: string;
+            maxWidth: string;
+        };
+    };
+    iconPosition: {
+        only: {
+            padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
+        };
+        start: {};
+        end: {};
+    };
+}, {}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>, never>;
+export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
+    state: {
+        id: string;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillIconButton.d.ts.map

package/dist/es6/pill/lib/PillIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRing, createSubcomponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { usePillModel } from './usePillModel';
+import { xSmallIcon } from '@workday/canvas-system-icons-web';
+import { buttonStencil } from '@workday/canvas-kit-react/button';
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+export const pillIconButtonStencil = createStencil({
+    extends: buttonStencil,
+    base: { name: "1cihdw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
+}, "pill-icon-button-c3ae9d");
+export const PillIconButton = createSubcomponent('button')({
+    modelHook: usePillModel,
+})(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
+    return (_jsx(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...mergeStyles(elemProps, pillIconButtonStencil()), children: _jsx(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || xSmallIcon, "aria-hidden": true, role: "img" }) }));
+});

package/dist/es6/pill/lib/PillLabel.d.ts

@@ -0,0 +1,14 @@
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
+export interface PillLabelProps extends BoxProps {
+    tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
+}
+export declare const pillLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
+export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
+    state: {
+        id: string;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillLabel.d.ts.map

package/dist/es6/pill/lib/PillLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,iJAO3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;EAUpB,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
+import { usePillModel } from './usePillModel';
+import { createStencil } from '@workday/canvas-kit-styling';
+export const pillLabelStencil = createStencil({
+    base: { name: "3j86df", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
+}, "pill-label-2b9705");
+export const PillLabel = createSubcomponent('span')({
+    modelHook: usePillModel,
+})(({ tooltipProps, children, ...elemProps }, Element, model) => {
+    return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Element, { id: `label-${model.state.id}`, ...mergeStyles(elemProps, pillLabelStencil()), children: children }) }));
+});

package/dist/es6/pill/lib/usePillModel.d.ts

@@ -0,0 +1,46 @@
+export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Used to disable a pill and apply the correct styles.
+     */
+    disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * Used to disable a pill and apply the correct styles.
+         */
+        disabled: boolean;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Used to disable a pill and apply the correct styles.
+     */
+    disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
+}, {}, {
+    id: string;
+    /**
+     * Used to disable a pill and apply the correct styles.
+     */
+    disabled: boolean;
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * Used to disable a pill and apply the correct styles.
+         */
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=usePillModel.d.ts.map

package/dist/es6/pill/lib/usePillModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;OAEG;;IAEH;;;OAGG;;;;;QAPH;;WAEG;;;;;IAFH;;OAEG;;IAEH;;;OAGG;;;;IAPH;;OAEG;;;;;QAFH;;WAEG;;;;EAgBL,CAAC"}

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

@@ -0,0 +1,21 @@
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
+export const usePillModel = createModelHook({
+    defaultConfig: {
+        /**
+         * Used to disable a pill and apply the correct styles.
+         */
+        disabled: false,
+        /**
+         * ID used to add accessibility labels to pill elements.
+         * @default `useUniqueId()`
+         */
+        id: '',
+    },
+})(config => {
+    const id = useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return { state, events: {} };
+});

package/dist/es6/segmented-control/lib/SegmentedControl.d.ts

@@ -19,7 +19,7 @@ export interface SegmentedControlProps {
  *   items: [],
  * });
  *
- * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>
  * ```
  */
 export declare const SegmentedControl: import("@workday/canvas-kit-react/common").ComponentM<SegmentedControlProps & Partial<{

package/dist/es6/segmented-control/lib/SegmentedControl.js

@@ -20,7 +20,7 @@ import { SegmentedControlItem } from './SegmentedControlItem';
  *   items: [],
  * });
  *
- * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>
  * ```
  */
 export const SegmentedControl = createContainer()({

package/index.ts

@@ -20,6 +20,7 @@ export * from './layout';
 export * from './loading-dots';
 export * from './menu';
 export * from './modal';
+export * from './pill';
 export * from './pagination';
 export * from './popup';
 export * from './radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.0074-next.0",
+  "version": "15.0.0-alpha.0076-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,9 +52,9 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0074-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0074-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0074-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0076-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "3fbdd82f3f92e4c6aaebd87c84fcdcd6b39f87cc"
+  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
 }

package/pill/index.ts

@@ -0,0 +1,7 @@
+export * from './lib/Pill';
+export * from './lib/usePillModel';
+export * from './lib/PillCount';
+export * from './lib/PillIconButton';
+export * from './lib/PillIcon';
+export * from './lib/PillLabel';
+export * from './lib/Pill';