@workday/canvas-kit-preview-react 15.0.0-alpha.1326-next.0 → 15.0.0

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

@@ -1,147 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pill = exports.pillStencil = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-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 canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-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 icon_1 = require("@workday/canvas-kit-react/icon");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
-    extends: button_1.buttonStencil,
-    vars: {
-        maxWidth: '',
-    },
-    base: { name: "3o21no", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-primary-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-disabled);--label-button-85bf0e:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
-    modifiers: {
-        variant: {
-            readOnly: { name: "4cgv1b", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-85bf0e:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}" },
-            removable: { name: "35y6xa", styles: "&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
-        }
-    }
-}, "pill-02eca5");
-/**
- * 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 aria-label='Remove user' 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 aria-label='Remove user' onClick={() => console.log('handle remove')} />
- * </Pill>
- * ```
- */
-exports.Pill = (0, common_1.createContainer)('button')({
-    displayName: 'Pill',
-    modelHook: usePillModel_1.usePillModel,
-    subComponents: {
-        /**
-         * This component renders an avatar. It supports all props of the `Avatar` component.
-         *
-         * ```tsx
-         * <Pill variant="removable">
-         *   <Pill.Avatar url={avatarUrl} />
-         *    <Pill.Label>Regina Skeltor</Pill.Label>
-         *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
-         * </Pill>
-         * ```
-         */
-        Avatar: PillAvatar_1.PillAvatar,
-        /**
-         * This component renders its `children` as the count.
-         *
-         * ```tsx
-         * <Pill onClick={() => console.warn('clicked')}>
-         *    <Pill.Label>Shoes</Pill.Label>
-         *   <Pill.Count>30</Pill.Count>
-         * </Pill>
-         * ```
-         */
-        Count: PillCount_1.PillCount,
-        /**
-         * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
-         * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
-         *
-         * ```tsx
-         * <Pill onClick={() => console.warn('clicked')}>
-         *   <Pill.Icon aria-label='Add user' />
-         *   <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">
-         *   <Pill.Label>Pink Shirts</Pill.Label>
-         *   <Pill.IconButton aria-label='Remove item' 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 unless you have an icon or other element.
-         *
-         * ```tsx
-         * <Pill variant="readOnly">
-         *   <Pill.Label>Read-only</Pill.Label>
-         * </Pill>
-         * ```
-         */
-        Label: PillLabel_1.PillLabel,
-    },
-})(({ variant, maxWidth = 200, children, ...elemProps }, Element, model) => {
-    const maxWidthCSSValue = typeof maxWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxWidth) : maxWidth;
-    const isReadOnly = variant === 'readOnly';
-    return (variant === null || variant === void 0 ? void 0 : variant.match(/^(readOnly|removable)$/)) ? ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', id: isReadOnly ? model.state.id : undefined, ...(0, layout_1.mergeStyles)(elemProps, [
-            model.state.disabled ? 'disabled' : undefined,
-            (0, exports.pillStencil)({ maxWidth: maxWidthCSSValue, variant }),
-        ]), children: isReadOnly ? (0, jsx_runtime_1.jsx)(PillLabel_1.PillLabel, { children: children }) : children })) : ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, ...(0, layout_1.mergeStyles)(elemProps, [
-            model.state.disabled ? 'disabled' : undefined,
-            (0, exports.pillStencil)({ maxWidth: maxWidthCSSValue }),
-        ]), children: children }));
-});

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

@@ -1,526 +0,0 @@
-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/commonjs/pill/lib/PillAvatar.d.ts.map

@@ -1 +0,0 @@
-{"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"}