@workday/canvas-kit-preview-react 13.0.0-alpha.998-next.0 → 13.0.0

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

@@ -1,14 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pill = void 0;
-const react_1 = __importDefault(require("react"));
+exports.Pill = exports.readyOnlyPillStencil = exports.removeablePillStencil = 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const usePillModel_1 = require("./usePillModel");
 const PillIcon_1 = require("./PillIcon");
@@ -17,142 +13,22 @@ 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 StyledBasePill = (0, common_1.styled)(button_1.BaseButton)({
-    display: 'inline-flex',
-    alignItems: 'center',
-    borderRadius: tokens_1.borderRadius.m,
-    flexShrink: 0,
-    ...tokens_1.type.levels.subtext.large,
-    color: tokens_1.colors.blackPepper400,
-    boxShadow: 'none',
-    outline: 'none',
-    fontWeight: tokens_1.type.properties.fontWeights.medium,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    width: 'fit-content',
-    padding: `2px ${tokens_1.space.xxs}`,
-    height: tokens_1.space.m,
-    position: 'relative',
-    'span[data-count="ck-pill-count"]': {
-        borderTop: `${(0, canvas_kit_styling_1.px2rem)(1)} solid transparent`,
-        borderBottom: `${(0, canvas_kit_styling_1.px2rem)(1)} solid transparent`,
-        borderRight: `${(0, canvas_kit_styling_1.px2rem)(1)} solid transparent`,
-    },
-    [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
-    [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
-    [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-    [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice200,
-    // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
-    button: {
-        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice200,
-    },
-    '&:focus-visible, &.focus': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.blueberry400,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
-        button: {
-            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
-        },
-        'span[data-count="ck-pill-count"]': {
-            borderColor: tokens_1.colors.blueberry400,
-        },
-    },
-    '&:hover, &.hover': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap400,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice400,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
-        button: {
-            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
-        },
-    },
-    '&:active, &.active': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice500,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
-        button: {
-            [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
-            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
-        },
-        'span[data-count="ck-pill-count"]': {
-            backgroundColor: tokens_1.colors.soap600,
-            borderColor: 'transparent',
-        },
-    },
-    '&:disabled, &.disabled': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap100,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice100,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.licorice100,
-        [button_1.buttonStencil.vars.opacity]: '1',
-        [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
-        button: {
-            [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
-        },
-    },
-}, ({ variant }) => ({
-    '&:focus-visible, &.focus': {
-        borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
-        ...(0, common_1.focusRing)({
-            width: 0,
-            inset: 'inner',
-            innerColor: tokens_1.colors.blueberry400,
-            outerColor: tokens_1.colors.blueberry400,
-            separation: 1,
-        }),
-    },
-}), layout_1.boxStyleFn);
-const StyledRemoveablePill = (0, common_1.styled)(StyledBasePill)({
-    [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
-    [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
-    [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-    [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap100,
-    '&:focus-visible, &.focus': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-        [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap300,
-        boxShadow: 'none',
-    },
-    '&:hover, &.hover': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-        [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap300,
-    },
-    '&:active, &.active': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice500,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
-        [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap500,
-    },
-    '&:disabled, &.disabled': {
-        [button_1.buttonStencil.vars.background]: tokens_1.colors.soap100,
-        [button_1.buttonStencil.vars.label]: tokens_1.colors.licorice100,
-        [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice100,
-        [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap100,
-    },
-    cursor: 'default',
-    overflow: 'revert',
-    position: 'relative',
-});
-const StyledReadOnlyPill = (0, common_1.styled)(StyledRemoveablePill)({
-    [button_1.buttonStencil.vars.background]: 'transparent',
-    '&:hover, &.hover': {
-        [button_1.buttonStencil.vars.background]: 'transparent',
-    },
-    '&:focus-visible, &.focus': {
-        [button_1.buttonStencil.vars.background]: 'transparent',
-    },
-    '&:active, &.active': {
-        [button_1.buttonStencil.vars.background]: 'transparent',
-    },
-    '&:disabled, &.disabled': {
-        [button_1.buttonStencil.vars.background]: 'transparent',
-    },
-    border: `${(0, canvas_kit_styling_1.px2rem)(1)} solid ${tokens_1.colors.licorice200}`,
-});
+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: "htmr24", 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-75789a);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-strong);border-color:var(--cnvs-sys-color-border-primary-default);--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);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-strong);--backgroundColor-pill-count-d778e9:var(--cnvs-base-palette-soap-600);--borderColor-pill-count-d778e9:transparent;}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-text-disabled);--opacity-button-65cb05:1;--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-soft);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-default);--borderColor-pill-count-d778e9:transparent;}" }
+}, "pill-75789a");
+exports.removeablePillStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: exports.pillStencil,
+    base: { name: "htmr25", styles: "box-sizing:border-box;&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-soft);}cursor:default;overflow:revert;position:relative;" }
+}, "removeable-pill-bb9137");
+exports.readyOnlyPillStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: exports.pillStencil,
+    base: { name: "htmr26", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" }
+}, "ready-only-pill-bb7606");
 /**
  * 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
@@ -181,7 +57,7 @@ const StyledReadOnlyPill = (0, common_1.styled)(StyledRemoveablePill)({
  * ```tsx
  * <Pill variant="removable">
  *   <Pill.Avatar /> Regina Skeltor
- *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
  * </Pill>
  * ```
  *
@@ -192,7 +68,7 @@ const StyledReadOnlyPill = (0, common_1.styled)(StyledRemoveablePill)({
  * ```tsx
  * <Pill variant="removable">
  *   Shoes
- *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
  * </Pill>
  * ```
  */
@@ -206,8 +82,8 @@ exports.Pill = (0, common_1.createContainer)('button')({
          * ```tsx
          * <Pill variant="removable">
          *   <Pill.Avatar url={avatarUrl} />
-         *   Regina Skeltor
-         *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+         *    <Pill.Label>Regina Skeltor</Pill.Label>
+         *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
          * </Pill>
          * ```
          */
@@ -217,20 +93,19 @@ exports.Pill = (0, common_1.createContainer)('button')({
          *
          * ```tsx
          * <Pill onClick={() => console.warn('clicked')}>
-         *   Shoes
+         *    <Pill.Label>Shoes</Pill.Label>
          *   <Pill.Count>30</Pill.Count>
          * </Pill>
          * ```
          */
         Count: PillCount_1.PillCount,
         /**
-         * 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.
+         * 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 />
+         *   <Pill.Icon aria-label='Add user' />
          *   <Pill.Label>Regina Skeltor</Pill.Label>
          * </Pill>
          * ```
@@ -243,15 +118,15 @@ exports.Pill = (0, common_1.createContainer)('button')({
          *
          * ```tsx
          * <Pill variant="removable">
-         *   Pink Shirts
-         *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+         *   <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.
+         * 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">
@@ -261,22 +136,17 @@ exports.Pill = (0, common_1.createContainer)('button')({
          */
         Label: PillLabel_1.PillLabel,
     },
-})(({ variant = 'default', maxWidth, ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        variant === 'readOnly' && (react_1.default.createElement(StyledReadOnlyPill, { as: Element !== 'button' ? Element : 'span', id: model.state.id, maxWidth: model.state.maxWidth, ...elemProps },
-            react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
-        variant === 'default' && (react_1.default.createElement(StyledBasePill, { as: Element, ...elemProps, disabled: model.state.disabled },
-            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
-                if (typeof child === 'string') {
-                    return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
-                }
-                return (react_1.default.createElement(layout_1.Flex.Item, { key: index, display: "inline-flex" }, child));
-            })))),
-        variant === 'removable' && (react_1.default.createElement(StyledRemoveablePill, { as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [model.state.disabled ? 'disabled' : undefined]) },
-            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
-                if (typeof child === 'string') {
-                    return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
-                }
-                return react_1.default.createElement(layout_1.Flex.Item, { key: index }, child);
-            }))))));
+})(({ variant = 'default', maxWidth = 200, children, ...elemProps }, Element, model) => {
+    const maxWidthCSSValue = typeof maxWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxWidth) : maxWidth;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [variant === 'readOnly' && ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', id: model.state.id, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.readyOnlyPillStencil)({
+                    maxWidth: maxWidthCSSValue,
+                })), children: (0, jsx_runtime_1.jsx)(PillLabel_1.PillLabel, { children: children }) })), variant === 'default' && ((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 })), variant === 'removable' && ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', ...(0, layout_1.mergeStyles)(elemProps, [
+                    model.state.disabled ? 'disabled' : undefined,
+                    (0, exports.removeablePillStencil)({ maxWidth: maxWidthCSSValue }),
+                ]), children: children }))] }));
 });

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

@@ -1,10 +1,231 @@
 import { AvatarProps } from '@workday/canvas-kit-react/avatar';
 export interface PillAvatarProps extends AvatarProps {
 }
+export declare const pillAvatarStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        light: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            backgroundColor: "--cnvs-sys-color-bg-alt-default";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: "--cnvs-sys-color-fg-default";
+            };
+        };
+        dark: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            backgroundColor: "--cnvs-sys-color-bg-primary-default";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: "--cnvs-sys-color-fg-inverse";
+            };
+        };
+    };
+    size: {
+        extraSmall: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            width: "--cnvs-sys-space-x4";
+            height: "--cnvs-sys-space-x4";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        small: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            width: "--cnvs-sys-space-x6";
+            height: "--cnvs-sys-space-x6";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        medium: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            width: "--cnvs-sys-space-x8";
+            height: "--cnvs-sys-space-x8";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        large: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            width: "--cnvs-sys-space-x10";
+            height: "--cnvs-sys-space-x10";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        extraLarge: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            width: "--cnvs-sys-space-x16";
+            height: "--cnvs-sys-space-x16";
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        extraExtraLarge: ({ iconPart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            width: string;
+            height: string;
+            "[data-part=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+    };
+    objectFit: {
+        contain: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "contain";
+            };
+        };
+        fill: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "fill";
+            };
+        };
+        cover: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "cover";
+            };
+        };
+        "scale-down": ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "scale-down";
+            };
+        };
+        none: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "none";
+            };
+        };
+        "-moz-initial": ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "-moz-initial";
+            };
+        };
+        initial: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "initial";
+            };
+        };
+        inherit: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "inherit";
+            };
+        };
+        revert: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "revert";
+            };
+        };
+        unset: ({ imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "unset";
+            };
+        };
+    };
+    isImageLoaded: {
+        true: ({ iconPart, imagePart }: {
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "avatar-icon";
+            readonly image: "avatar-image";
+        }>) => {
+            "[data-part=\"avatar-icon\"]": {
+                opacity: number;
+            };
+            "[data-part=\"avatar-image\"]": {
+                opacity: number;
+            };
+        };
+    };
+}, {
+    readonly icon: "avatar-icon";
+    readonly image: "avatar-image";
+}, {
+    size: string;
+}, never, never>, never>;
 export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PillAvatarProps, {
     state: {
         id: string;
-        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAIrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;;EAYrB,CAAC"}
+{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,kCAAkC,CAAC;AAKpF,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAM5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}

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

@@ -1,19 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PillAvatar = void 0;
-const react_1 = __importDefault(require("react"));
+exports.PillAvatar = exports.pillAvatarStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const avatar_1 = require("@workday/canvas-kit-react/avatar");
 const usePillModel_1 = require("./usePillModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-// 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
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.pillAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: avatar_1.avatarStencil,
+    base: { name: "htmr1h", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
+}, "pill-avatar-348a6f");
 exports.PillAvatar = (0, common_1.createSubcomponent)('div')({
     modelHook: usePillModel_1.usePillModel,
-})(({ ...elemProps }, Element, model) => {
-    return (react_1.default.createElement(avatar_1.Avatar, { style: { opacity: model.state.disabled ? '.7' : '1' }, size: (0, canvas_kit_styling_1.px2rem)(18), as: Element, altText: undefined, ...elemProps }));
+})(({ size, ...elemProps }, Element, _model) => {
+    return ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { "aria-hidden": true, as: Element, size: (0, canvas_kit_styling_1.px2rem)(18), ...(0, layout_1.mergeStyles)(elemProps, [
+            (0, exports.pillAvatarStencil)(),
+            _model.state.disabled ? 'disabled' : undefined,
+        ]) }));
 });

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

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

@@ -1 +1 @@
-{"version":3,"file":"PillCount.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillCount.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,cAAe,SAAQ,SAAS;CAAG;AASpD,eAAO,MAAM,SAAS,qFAuBpB,CAAC"}
+{"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/commonjs/pill/lib/PillCount.js

@@ -1,22 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PillCount = void 0;
-const react_1 = __importDefault(require("react"));
+exports.PillCount = exports.pillCountStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const StyledCountContainer = (0, common_1.styled)(layout_1.Flex.as('span'))({
-    borderTopLeftRadius: tokens_1.borderRadius.zero,
-    borderTopRightRadius: tokens_1.borderRadius.m,
-    borderBottomLeftRadius: tokens_1.borderRadius.zero,
-    borderBottomRightRadius: tokens_1.borderRadius.m,
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.pillCountStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        backgroundColor: '',
+        borderColor: '',
+    },
+    base: { name: "htmrw", 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-d778e9, 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-d778e9, var(--cnvs-sys-color-bg-alt-stronger));flex:0 0 auto;" }
+}, "pill-count-d778e9");
 exports.PillCount = (0, common_1.createComponent)('span')({
-    displayName: 'Pill.Avatar',
+    displayName: 'Pill.Count',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(StyledCountContainer, { display: "inline-flex", alignItems: "center", justifyContent: "center", as: Element, height: 22, minWidth: 22, padding: `0  ${tokens_1.space.xxxs}`, marginInlineEnd: `-${tokens_1.space.xxs}`, marginInlineStart: `${tokens_1.space.xxxs}`, backgroundColor: tokens_1.colors.soap500, "data-count": "ck-pill-count", ref: ref, ...elemProps }, children));
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.pillCountStencil)()), children: children }));
     },
 });

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

@@ -1,16 +1,24 @@
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
-    /**
-     * The system icon rendered by the component
-     * @default `plusIcon`
-     */
-    icon?: CanvasSystemIcon;
+export interface PillIconProps extends Partial<SystemIconProps> {
 }
+export declare const pillIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{}, {}, {
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {}, {
+    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;
-        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};