@workday/canvas-kit-react 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0075-next.0

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

@@ -0,0 +1,526 @@
+import { AvatarProps } from '@workday/canvas-kit-preview-react/avatar';
+export interface PillAvatarProps extends AvatarProps {
+}
+export declare const pillAvatarStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    imageLoaded: {
+        false: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                display: string;
+            };
+        };
+        true: {
+            backgroundColor: "--cnvs-sys-color-bg-default";
+        };
+    };
+    objectFit: {
+        contain: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        cover: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        fill: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        none: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        "scale-down": ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        initial: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        inherit: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        unset: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        "-moz-initial": ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        revert: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+    };
+}, {
+    readonly avatarImage: "avatar-image";
+    readonly avatarName: "avatar-name";
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        blue: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
+        };
+    };
+    size: {
+        extraExtraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-small";
+            fontSize: "--cnvs-sys-font-size-subtext-small";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+        extraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-medium";
+            fontSize: "--cnvs-sys-font-size-subtext-medium";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        small: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-small";
+            fontSize: "--cnvs-sys-font-size-body-small";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        medium: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-medium";
+            fontSize: "--cnvs-sys-font-size-body-medium";
+        };
+        large: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-heading-medium";
+            fontSize: "--cnvs-sys-font-size-heading-medium";
+        };
+        extraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-small";
+            fontSize: "--cnvs-sys-font-size-title-small";
+        };
+        extraExtraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-medium";
+            fontSize: "--cnvs-sys-font-size-title-medium";
+        };
+    };
+}, {}, {
+    backgroundColor: string;
+    color: string;
+    size: string;
+}, never, never>, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    imageLoaded: {
+        false: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                display: string;
+            };
+        };
+        true: {
+            backgroundColor: "--cnvs-sys-color-bg-default";
+        };
+    };
+    objectFit: {
+        contain: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        cover: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        fill: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        none: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        "scale-down": ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        initial: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        inherit: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        unset: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        "-moz-initial": ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+        revert: ({ avatarImagePart }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: string;
+            };
+        };
+    };
+}, {
+    readonly avatarImage: "avatar-image";
+    readonly avatarName: "avatar-name";
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        blue: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
+            color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
+            color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
+        };
+    };
+    size: {
+        extraExtraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-small";
+            fontSize: "--cnvs-sys-font-size-subtext-small";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+        extraSmall: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-medium";
+            fontSize: "--cnvs-sys-font-size-subtext-medium";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        small: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-small";
+            fontSize: "--cnvs-sys-font-size-body-small";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        medium: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-medium";
+            fontSize: "--cnvs-sys-font-size-body-medium";
+        };
+        large: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-heading-medium";
+            fontSize: "--cnvs-sys-font-size-heading-medium";
+        };
+        extraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-small";
+            fontSize: "--cnvs-sys-font-size-title-small";
+        };
+        extraExtraLarge: ({ size }: {
+            backgroundColor: `--${string}`;
+            color: `--${string}`;
+            size: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-medium";
+            fontSize: "--cnvs-sys-font-size-title-medium";
+        };
+    };
+}, {}, {
+    backgroundColor: string;
+    color: string;
+    size: string;
+}, never, never>, never>, never>;
+export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PillAvatarProps, {
+    state: {
+        id: string;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,0CAA0C,CAAC;AAM5F,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAS5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}

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()) }));
+});