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

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

@@ -1,152 +1,31 @@
-import React from 'react';
-import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
-import { createContainer, focusRing, styled } from '@workday/canvas-kit-react/common';
-import { boxStyleFn, Flex } from '@workday/canvas-kit-react/layout';
-import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
-import { handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonStencil } from '@workday/canvas-kit-react/button';
+import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
+import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
+import { px2rem, createStencil, cssVar } from '@workday/canvas-kit-styling';
 import { usePillModel } from './usePillModel';
 import { PillIcon } from './PillIcon';
 import { PillIconButton } from './PillIconButton';
-import { PillCount } from './PillCount';
+import { PillCount, pillCountStencil } from './PillCount';
 import { PillAvatar } from './PillAvatar';
 import { PillLabel } from './PillLabel';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
-const StyledBasePill = styled(BaseButton)({
-    display: 'inline-flex',
-    alignItems: 'center',
-    borderRadius: borderRadius.m,
-    flexShrink: 0,
-    ...type.levels.subtext.large,
-    color: colors.blackPepper400,
-    boxShadow: 'none',
-    outline: 'none',
-    fontWeight: type.properties.fontWeights.medium,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    width: 'fit-content',
-    padding: `2px ${space.xxs}`,
-    height: space.m,
-    position: 'relative',
-    'span[data-count="ck-pill-count"]': {
-        borderTop: `${px2rem(1)} solid transparent`,
-        borderBottom: `${px2rem(1)} solid transparent`,
-        borderRight: `${px2rem(1)} solid transparent`,
-    },
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: colors.licorice200,
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    [systemIconStencil.vars.color]: colors.licorice200,
-    // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
-    button: {
-        [systemIconStencil.vars.color]: colors.licorice200,
-    },
-    '&:focus-visible, &.focus': {
-        [buttonStencil.vars.background]: colors.soap300,
-        [buttonStencil.vars.border]: colors.blueberry400,
-        [buttonStencil.vars.label]: colors.blackPepper400,
-        [systemIconStencil.vars.color]: colors.licorice500,
-        button: {
-            [systemIconStencil.vars.color]: colors.licorice500,
-        },
-        'span[data-count="ck-pill-count"]': {
-            borderColor: colors.blueberry400,
-        },
-    },
-    '&:hover, &.hover': {
-        [buttonStencil.vars.background]: colors.soap400,
-        [buttonStencil.vars.border]: colors.licorice400,
-        [buttonStencil.vars.label]: colors.blackPepper400,
-        [systemIconStencil.vars.color]: colors.licorice500,
-        button: {
-            [systemIconStencil.vars.color]: colors.licorice500,
-        },
-    },
-    '&:active, &.active': {
-        [buttonStencil.vars.background]: colors.soap500,
-        [buttonStencil.vars.border]: colors.licorice500,
-        [buttonStencil.vars.label]: colors.blackPepper400,
-        [systemIconStencil.vars.color]: colors.licorice500,
-        button: {
-            [buttonStencil.vars.background]: colors.soap500,
-            [systemIconStencil.vars.color]: colors.licorice500,
-        },
-        'span[data-count="ck-pill-count"]': {
-            backgroundColor: colors.soap600,
-            borderColor: 'transparent',
-        },
-    },
-    '&:disabled, &.disabled': {
-        [buttonStencil.vars.background]: colors.soap100,
-        [buttonStencil.vars.border]: colors.licorice100,
-        [buttonStencil.vars.label]: colors.licorice100,
-        [buttonStencil.vars.opacity]: '1',
-        [systemIconStencil.vars.color]: colors.licorice100,
-        button: {
-            [systemIconStencil.vars.color]: colors.licorice100,
-        },
-    },
-}, ({ variant }) => ({
-    '&:focus-visible, &.focus': {
-        borderColor: variant === 'removable' ? undefined : colors.blueberry400,
-        ...focusRing({
-            width: 0,
-            inset: 'inner',
-            innerColor: colors.blueberry400,
-            outerColor: colors.blueberry400,
-            separation: 1,
-        }),
-    },
-}), boxStyleFn);
-const StyledRemoveablePill = styled(StyledBasePill)({
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: colors.licorice200,
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    [systemIconStencil.vars.backgroundColor]: colors.soap100,
-    '&:focus-visible, &.focus': {
-        [buttonStencil.vars.background]: colors.soap300,
-        [buttonStencil.vars.border]: colors.licorice200,
-        [buttonStencil.vars.label]: colors.blackPepper400,
-        [systemIconStencil.vars.backgroundColor]: colors.soap300,
-        boxShadow: 'none',
-    },
-    '&:hover, &.hover': {
-        [buttonStencil.vars.background]: colors.soap300,
-        [buttonStencil.vars.border]: colors.licorice200,
-        [buttonStencil.vars.label]: colors.blackPepper400,
-        [systemIconStencil.vars.backgroundColor]: colors.soap300,
-    },
-    '&:active, &.active': {
-        [buttonStencil.vars.background]: colors.soap500,
-        [buttonStencil.vars.border]: colors.licorice500,
-        [buttonStencil.vars.label]: colors.blackPepper400,
-        [systemIconStencil.vars.backgroundColor]: colors.soap500,
-    },
-    '&:disabled, &.disabled': {
-        [buttonStencil.vars.background]: colors.soap100,
-        [buttonStencil.vars.label]: colors.licorice100,
-        [buttonStencil.vars.border]: colors.licorice100,
-        [systemIconStencil.vars.backgroundColor]: colors.soap100,
-    },
-    cursor: 'default',
-    overflow: 'revert',
-    position: 'relative',
-});
-const StyledReadOnlyPill = styled(StyledRemoveablePill)({
-    [buttonStencil.vars.background]: 'transparent',
-    '&:hover, &.hover': {
-        [buttonStencil.vars.background]: 'transparent',
-    },
-    '&:focus-visible, &.focus': {
-        [buttonStencil.vars.background]: 'transparent',
-    },
-    '&:active, &.active': {
-        [buttonStencil.vars.background]: 'transparent',
-    },
-    '&:disabled, &.disabled': {
-        [buttonStencil.vars.background]: 'transparent',
-    },
-    border: `${px2rem(1)} solid ${colors.licorice200}`,
-});
+import { base, system } from '@workday/canvas-tokens-web';
+export const pillStencil = createStencil({
+    extends: buttonStencil,
+    vars: {
+        maxWidth: '',
+    },
+    base: { name: "ndjk24", 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");
+export const removeablePillStencil = createStencil({
+    extends: pillStencil,
+    base: { name: "ndjk25", 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");
+export const readyOnlyPillStencil = createStencil({
+    extends: pillStencil,
+    base: { name: "ndjk26", 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
@@ -175,7 +54,7 @@ const StyledReadOnlyPill = 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>
  * ```
  *
@@ -186,7 +65,7 @@ const StyledReadOnlyPill = 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>
  * ```
  */
@@ -200,8 +79,8 @@ export const Pill = 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>
          * ```
          */
@@ -211,20 +90,19 @@ export const Pill = createContainer('button')({
          *
          * ```tsx
          * <Pill onClick={() => console.warn('clicked')}>
-         *   Shoes
+         *    <Pill.Label>Shoes</Pill.Label>
          *   <Pill.Count>30</Pill.Count>
          * </Pill>
          * ```
          */
         Count: 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>
          * ```
@@ -237,15 +115,15 @@ export const Pill = 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,
         /**
          * 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">
@@ -255,22 +133,17 @@ export const Pill = createContainer('button')({
          */
         Label: PillLabel,
     },
-})(({ variant = 'default', maxWidth, ...elemProps }, Element, model) => {
-    return (React.createElement(React.Fragment, null,
-        variant === 'readOnly' && (React.createElement(StyledReadOnlyPill, { as: Element !== 'button' ? Element : 'span', id: model.state.id, maxWidth: model.state.maxWidth, ...elemProps },
-            React.createElement(PillLabel, null, elemProps.children))),
-        variant === 'default' && (React.createElement(StyledBasePill, { as: Element, ...elemProps, disabled: model.state.disabled },
-            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, (child, index) => {
-                if (typeof child === 'string') {
-                    return React.createElement(PillLabel, { key: index }, child);
-                }
-                return (React.createElement(Flex.Item, { key: index, display: "inline-flex" }, child));
-            })))),
-        variant === 'removable' && (React.createElement(StyledRemoveablePill, { as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined, ...handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined]) },
-            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, (child, index) => {
-                if (typeof child === 'string') {
-                    return React.createElement(PillLabel, { key: index }, child);
-                }
-                return React.createElement(Flex.Item, { key: index }, child);
-            }))))));
+})(({ variant = 'default', maxWidth = 200, children, ...elemProps }, Element, model) => {
+    const maxWidthCSSValue = typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth;
+    return (_jsxs(_Fragment, { children: [variant === 'readOnly' && (_jsx(Box, { as: Element !== 'button' ? Element : 'span', id: model.state.id, ...mergeStyles(elemProps, readyOnlyPillStencil({
+                    maxWidth: maxWidthCSSValue,
+                })), children: _jsx(PillLabel, { children: children }) })), variant === 'default' && (_jsx(Element, { disabled: model.state.disabled, ...mergeStyles(elemProps, [
+                    model.state.disabled ? 'disabled' : undefined,
+                    pillStencil({
+                        maxWidth: maxWidthCSSValue,
+                    }),
+                ]), children: children })), variant === 'removable' && (_jsx(Box, { as: Element !== 'button' ? Element : 'span', ...mergeStyles(elemProps, [
+                    model.state.disabled ? 'disabled' : undefined,
+                    removeablePillStencil({ maxWidth: maxWidthCSSValue }),
+                ]), children: children }))] }));
 });

package/dist/es6/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/es6/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/es6/pill/lib/PillAvatar.js

@@ -1,13 +1,18 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
-import { Avatar } from '@workday/canvas-kit-react/avatar';
+import { Avatar, avatarStencil } from '@workday/canvas-kit-react/avatar';
 import { usePillModel } from './usePillModel';
-import { px2rem } from '@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
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+export const pillAvatarStencil = createStencil({
+    extends: avatarStencil,
+    base: { name: "ndjk1h", styles: "box-sizing:border-box;cursor:pointer;flex:0 0 auto;" }
+}, "pill-avatar-348a6f");
 export const PillAvatar = createSubcomponent('div')({
     modelHook: usePillModel,
-})(({ ...elemProps }, Element, model) => {
-    return (React.createElement(Avatar, { style: { opacity: model.state.disabled ? '.7' : '1' }, size: px2rem(18), as: Element, altText: undefined, ...elemProps }));
+})(({ size, ...elemProps }, Element, _model) => {
+    return (_jsx(Avatar, { "aria-hidden": true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [
+            pillAvatarStencil(),
+            _model.state.disabled ? 'disabled' : undefined,
+        ]) }));
 });

package/dist/es6/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/es6/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/es6/pill/lib/PillCount.js

@@ -1,16 +1,18 @@
-import React from 'react';
-import { createComponent, styled } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
-import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
-const StyledCountContainer = styled(Flex.as('span'))({
-    borderTopLeftRadius: borderRadius.zero,
-    borderTopRightRadius: borderRadius.m,
-    borderBottomLeftRadius: borderRadius.zero,
-    borderBottomRightRadius: borderRadius.m,
-});
+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: "ndjkw", 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");
 export const PillCount = createComponent('span')({
-    displayName: 'Pill.Avatar',
+    displayName: 'Pill.Count',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(StyledCountContainer, { display: "inline-flex", alignItems: "center", justifyContent: "center", as: Element, height: 22, minWidth: 22, padding: `0  ${space.xxxs}`, marginInlineEnd: `-${space.xxs}`, marginInlineStart: `${space.xxxs}`, backgroundColor: colors.soap500, "data-count": "ck-pill-count", ref: ref, ...elemProps }, children));
+        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, pillCountStencil()), children: children }));
     },
 });

package/dist/es6/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: {};

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

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;;EAenB,CAAC"}
+{"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"}