@workday/canvas-kit-labs-react 16.2.0-0648-next.0 → 16.2.0-0654-next.0

package/dist/commonjs/accessory/lib/AccessoryMedia.d.ts

@@ -0,0 +1,72 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+import { AccessoryProps } from './Accessory';
+export interface AccessoryMediaProps extends AccessoryProps {
+    /**
+     * The URL of the image.
+     */
+    src: string;
+    /**
+     * How the image is resized to fit the tile.
+     * @default 'cover'
+     */
+    objectFit?: 'contain' | 'cover';
+    /**
+     * The icon to display from `@workday/canvas-system-icons-web`, centered over the image. When
+     * set, a scrim is painted under the icon for contrast. Uses `color` from `Accessory` for the
+     * glyph (`base.legacy.neutral0` by default).
+     */
+    icon?: SystemIconProps['icon'];
+}
+/**
+ * Image treatment for `AccessoryMedia`. The image part stays hidden until `imageLoaded`. The scrim
+ * part sits under an optional icon. `background` overrides the tile fill.
+ */
+export declare const accessoryMediaStencil: import("@workday/canvas-kit-styling").Stencil<{
+    imageLoaded: {
+        false: ({ imagePart }: {
+            background: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly image: "accessory-media-image";
+            readonly scrim: "accessory-media-scrim";
+        }>) => {
+            "[data-part=\"accessory-media-image\"]": {
+                display: string;
+            };
+        };
+        true: {};
+    };
+    objectFit: {
+        cover: ({ imagePart }: {
+            background: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly image: "accessory-media-image";
+            readonly scrim: "accessory-media-scrim";
+        }>) => {
+            "[data-part=\"accessory-media-image\"]": {
+                objectFit: string;
+            };
+        };
+        contain: ({ imagePart }: {
+            background: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly image: "accessory-media-image";
+            readonly scrim: "accessory-media-scrim";
+        }>) => {
+            "[data-part=\"accessory-media-image\"]": {
+                objectFit: string;
+            };
+        };
+    };
+}, {
+    readonly image: "accessory-media-image";
+    readonly scrim: "accessory-media-scrim";
+}, {
+    background: string;
+}, never, never>;
+/**
+ * `AccessoryMedia` fills an accessory tile with an image. Pass `icon` to center a decorative icon
+ * on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile
+ * background. Always decorative.
+ */
+export declare const AccessoryMedia: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryMediaProps>;
+//# sourceMappingURL=AccessoryMedia.d.ts.map

package/dist/commonjs/accessory/lib/AccessoryMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryMedia.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryMedia.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,OAAO,EAAY,cAAc,EAAmB,MAAM,aAAa,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAmDhC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,cAAc,0FAoDzB,CAAC"}

package/dist/commonjs/accessory/lib/AccessoryMedia.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccessoryMedia = exports.accessoryMediaStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Accessory_1 = require("./Accessory");
+/**
+ * Image treatment for `AccessoryMedia`. The image part stays hidden until `imageLoaded`. The scrim
+ * part sits under an optional icon. `background` overrides the tile fill.
+ */
+exports.accessoryMediaStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        background: '',
+    },
+    parts: {
+        image: 'accessory-media-image',
+        scrim: 'accessory-media-scrim',
+    },
+    base: { name: "3wew7z", styles: "box-sizing:border-box;background-color:var(--background-accessory-media-9cf347, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));[data-part=\"accessory-media-image\"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);}[data-part=\"accessory-media-scrim\"]{position:absolute;inset:0;background-color:var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);pointer-events:none;}" },
+    modifiers: {
+        imageLoaded: {
+            false: { name: "ruy4j", styles: "[data-part=\"accessory-media-image\"]{display:none;}" },
+            true: { name: "2yeyuo", styles: "" }
+        },
+        objectFit: {
+            cover: { name: "2tjew2", styles: "[data-part=\"accessory-media-image\"]{object-fit:cover;}" },
+            contain: { name: "1hjptw", styles: "[data-part=\"accessory-media-image\"]{object-fit:contain;}" }
+        }
+    }
+}, "accessory-media-9cf347");
+/**
+ * `AccessoryMedia` fills an accessory tile with an image. Pass `icon` to center a decorative icon
+ * on a contrast scrim. The image stays hidden until it loads; a failed load keeps the tile
+ * background. Always decorative.
+ */
+exports.AccessoryMedia = (0, common_1.createComponent)('span')({
+    displayName: 'AccessoryMedia',
+    Component: ({ src, size = 'extraLarge', objectFit = 'cover', icon, color = canvas_tokens_web_1.base.legacy.neutral0, background, ...elemProps }, ref, Element) => {
+        // Track the loaded URL so a `src` change hides the image again without a mount effect that
+        // can race a synchronous `onLoad` (cached images and data URLs).
+        const [loadedSrc, setLoadedSrc] = react_1.default.useState(null);
+        const imageRef = react_1.default.useRef(null);
+        const imageLoaded = loadedSrc === src;
+        react_1.default.useEffect(() => {
+            const image = imageRef.current;
+            if ((image === null || image === void 0 ? void 0 : image.complete) && image.naturalWidth > 0) {
+                setLoadedSrc(src);
+            }
+        }, [src]);
+        return ((0, jsx_runtime_1.jsxs)(Accessory_1.Accessory, { as: Element, ref: ref, color: icon ? color : undefined, size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.accessoryMediaStencil)({ background, imageLoaded, objectFit })), children: [(0, jsx_runtime_1.jsx)("img", { ref: imageRef, alt: "", onLoad: () => setLoadedSrc(src), src: src, ...exports.accessoryMediaStencil.parts.image }), icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ...exports.accessoryMediaStencil.parts.scrim }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: icon, ...Accessory_1.accessoryStencil.parts.icon })] }))] }));
+    },
+});

package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js

@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.legacy.orange400; //'#FD7E00';
 const glowThumbtack = canvas_tokens_web_1.base.legacy.coral500; //'#FC5B05';
 exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.buttonStencil,
-    base: { name: "1qefsu", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "1xs6ft", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         variant: {
-            inverse: { name: "13sraf", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
+            inverse: { name: "1i4f5c", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
         },
         toggled: {
-            true: { name: "2iawbg", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
-            false: { name: "nnx75", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
+            true: { name: "s9s7", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
+            false: { name: "2d3v5r", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
         }
     },
     compound: [
         {
             modifiers: { toggled: true, variant: 'inverse' },
-            styles: { name: "34uoie", styles: "--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
+            styles: { name: "2sn4rk", styles: "--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
         }
     ]
 }, "a-i-ingress-button-5576f1");

package/dist/commonjs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accessory';
 export * from './ai-ingress-button';
 export * from './kbd';
 export * from './selection-group';

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}

package/dist/commonjs/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./accessory"), exports);
 __exportStar(require("./ai-ingress-button"), exports);
 __exportStar(require("./kbd"), exports);
 __exportStar(require("./selection-group"), exports);

package/dist/commonjs/kbd/lib/KBD.js

@@ -9,16 +9,16 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const KBDItem_1 = require("./KBDItem");
 const useKBDModel_1 = require("./useKBDModel");
 exports.kbdStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "13j78l", styles: "box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
+    base: { name: "43kp2b", styles: "box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
     modifiers: {
         variant: {
-            plain: { name: "3x7pyf", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
-            default: { name: "19nkoo", styles: "color:var(--cnvs-sys-color-fg-muted-strong);" }
+            plain: { name: "3x75b3", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
+            default: { name: "2i1v99", styles: "color:var(--cnvs-sys-color-fg-muted-strong);" }
         },
         size: {
-            large: { name: "22twib", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg);font-size:var(--cnvs-sys-font-size-subtext-lg);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg);}" },
-            medium: { name: "1kjkfx", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-md);font-size:var(--cnvs-sys-font-size-subtext-md);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md);}" },
-            small: { name: "34j8mp", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm);font-size:var(--cnvs-sys-font-size-subtext-sm);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm);}" }
+            large: { name: "2ngwuf", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg);font-size:var(--cnvs-sys-font-size-subtext-lg);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg);}" },
+            medium: { name: "rya8x", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-md);font-size:var(--cnvs-sys-font-size-subtext-md);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md);}" },
+            small: { name: "ucsek", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm);font-size:var(--cnvs-sys-font-size-subtext-sm);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm);}" }
         }
     }
 }, "kbd-482771");

package/dist/commonjs/kbd/lib/KBDItem.js

@@ -9,11 +9,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useKBDModel_1 = require("./useKBDModel");
 exports.kbdItemStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "3mmvho", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));text-align:center;display:flex;align-items:center;justify-content:center;" },
+    base: { name: "28esir", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));text-align:center;display:flex;align-items:center;justify-content:center;" },
     modifiers: {
         variant: {
-            plain: { name: "498htq", styles: "background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:0;corner-shape:unset;" },
-            default: { name: "496o6d", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, oklch(0 0 0 / 0.0392));" }
+            plain: { name: "241q0w", styles: "background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:0;corner-shape:unset;" },
+            default: { name: "3528jp", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, oklch(0 0 0 / 0.0392));" }
         }
     },
     compound: [
@@ -22,21 +22,21 @@ exports.kbdItemStencil = (0, canvas_kit_styling_1.createStencil)({
                 size: 'large',
                 variant: 'default',
             },
-            styles: { name: "462w2g", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
+            styles: { name: "aq3un", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
         },
         {
             modifiers: {
                 size: 'medium',
                 variant: 'default',
             },
-            styles: { name: "1j7224", styles: "min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
+            styles: { name: "1cp8cq", styles: "min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
         },
         {
             modifiers: {
                 size: 'small',
                 variant: 'default',
             },
-            styles: { name: "1twzv6", styles: "min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding-inline:0.125rem;" }
+            styles: { name: "41a7ec", styles: "min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding-inline:0.125rem;" }
         }
     ]
 }, "kbd-item-9a5f62");

package/dist/commonjs/selection-group/lib/SelectionGroupIcon.js

@@ -7,7 +7,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 exports.selectionGroupIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "30jwgx", styles: "box-sizing:border-box;flex-shrink:0;" }
+    base: { name: "497s0y", styles: "box-sizing:border-box;flex-shrink:0;" }
 }, "selection-group-icon-6bc986");
 /**
  * The icon is always rendered, in both modes and in both selected states, so items never shift

package/dist/commonjs/selection-group/lib/SelectionGroupItem.js

@@ -15,12 +15,12 @@ exports.selectionGroupItemStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         label: 'selection-group-item-label',
     },
-    base: { name: "1m70rb", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;align-items:center;gap:var(--cnvs-base-size-75, 0.375rem);border:0.0625rem solid var(--cnvs-sys-color-border-default);padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);cursor:pointer;text-align:start;transition:background-color 80ms ease, color 80ms ease, border-color 80ms ease;--color-system-icon-c9acc3:currentColor;--accentColor-system-icon-c9acc3:currentColor;[data-part=\"selection-group-item-label\"]{white-space:nowrap;}&:not([aria-checked=\"true\"]):is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not([aria-checked=\"true\"]):is(:active, .active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(:focus-visible, .focus){box-shadow:0 0 0 1px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 3px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:is(:disabled, .disabled){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}}&[aria-checked=\"true\"]{background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));border:0.0625rem solid transparent;color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));&:is(:hover, .hover){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:active, .active){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" },
+    base: { name: "2auntm", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;align-items:center;gap:var(--cnvs-base-size-75, 0.375rem);border:0.0625rem solid var(--cnvs-sys-color-border-default);padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);cursor:pointer;text-align:start;transition:background-color 80ms ease, color 80ms ease, border-color 80ms ease;--color-system-icon-c9acc3:currentColor;--accentColor-system-icon-c9acc3:currentColor;[data-part=\"selection-group-item-label\"]{white-space:nowrap;}&:not([aria-checked=\"true\"]):is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not([aria-checked=\"true\"]):is(:active, .active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(:focus-visible, .focus){box-shadow:0 0 0 1px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 3px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:is(:disabled, .disabled){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}}&[aria-checked=\"true\"]{background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));border:0.0625rem solid transparent;color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));&:is(:hover, .hover){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:active, .active){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" },
     modifiers: {
         width: {
-            content: { name: "4disq6", styles: "width:fit-content;" },
-            equal: { name: "3bnww2", styles: "width:100%;" },
-            column: { name: "4z848", styles: "width:100%;" }
+            content: { name: "3r20nx", styles: "width:fit-content;" },
+            equal: { name: "y2v8k", styles: "width:100%;" },
+            column: { name: "3lj57s", styles: "width:100%;" }
         }
     }
 }, "selection-group-item-15e2bc");

package/dist/commonjs/selection-group/lib/SelectionGroupList.js

@@ -9,18 +9,18 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useSelectionGroupModel_1 = require("./hooks/useSelectionGroupModel");
 exports.selectionGroupListStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "1teqzm", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-wrap:wrap;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));width:fit-content;border:0.125rem solid transparent;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));transition:100ms border-color;" },
+    base: { name: "1fzd68", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-wrap:wrap;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));width:fit-content;border:0.125rem solid transparent;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));transition:100ms border-color;" },
     modifiers: {
         width: {
-            content: { name: "1vlim9", styles: "" },
+            content: { name: "3twysa", styles: "" },
             // `1fr` auto columns inside a `fit-content` grid all resolve to the widest item's
             // max-content width, which sizes every item to the longest label without measuring the DOM.
-            equal: { name: "1i2y5c", styles: "display:grid;grid-auto-flow:column;grid-auto-columns:1fr;" },
-            column: { name: "96bi7", styles: "flex-direction:column;flex-wrap:nowrap;width:100%;" }
+            equal: { name: "39aeb7", styles: "display:grid;grid-auto-flow:column;grid-auto-columns:1fr;" },
+            column: { name: "skjsk", styles: "flex-direction:column;flex-wrap:nowrap;width:100%;" }
         },
         error: {
-            error: { name: "2m7j55", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
-            caution: { name: "2lf7k5", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
+            error: { name: "1fm3hb", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
+            caution: { name: "2frcnm", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
         }
     }
 }, "selection-group-list-25bb89");

package/dist/commonjs/version/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = '16.1.11';
+exports.version = '16.1.12';

package/dist/es6/accessory/index.d.ts

@@ -0,0 +1,7 @@
+export * from './lib/Accessory';
+export * from './lib/AccessoryCalendar';
+export * from './lib/AccessoryFavicon';
+export * from './lib/AccessoryFile';
+export * from './lib/AccessoryIcon';
+export * from './lib/AccessoryMedia';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/accessory/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../accessory/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/es6/accessory/index.js

@@ -0,0 +1,6 @@
+export * from './lib/Accessory';
+export * from './lib/AccessoryCalendar';
+export * from './lib/AccessoryFavicon';
+export * from './lib/AccessoryFile';
+export * from './lib/AccessoryIcon';
+export * from './lib/AccessoryMedia';

package/dist/es6/accessory/lib/Accessory.d.ts

@@ -0,0 +1,157 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+/**
+ * The size of an `Accessory` tile.
+ *
+ * * `extraSmall` — 16px tile, 16px icon
+ * * `small` — 20px tile, 18px icon
+ * * `medium` — 24px tile, 16px icon
+ * * `large` — 32px tile, 18px icon
+ * * `extraLarge` — 40px tile, 20px icon
+ */
+export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
+export interface AccessoryProps extends CSProps {
+    /**
+     * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 16px,
+     * 18px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`.
+     *
+     * * `extraSmall` — 16px
+     * * `small` — 20px
+     * * `medium` — 24px
+     * * `large` — 32px
+     * * `extraLarge` — 40px
+     *
+     * @default 'extraLarge'
+     */
+    size?: AccessorySize;
+    /**
+     * The color of the icon. When set, this overrides the icon color from `variant` on
+     * `AccessoryIcon`. Inherited by the icon `data-part` via a CSS variable.
+     */
+    color?: string;
+    /**
+     * The background color of the icon tile. When set, this overrides the fill from `variant` and is
+     * painted at every size, including `small` and `extraSmall`. Inherited by the icon `data-part`
+     * via a CSS variable.
+     */
+    background?: string;
+}
+/**
+ * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon
+ * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or
+ * `AccessoryMedia`, which render this shell.
+ */
+export declare const accessoryStencil: import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        extraSmall: ({ iconPart, tileBackground }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))" | "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))" | {
+                [x: string]: number | "var(--cnvs-base-size-200, 1rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            width: "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))";
+            height: "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: number | "var(--cnvs-base-size-200, 1rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+        };
+        small: ({ iconPart, tileBackground }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))" | "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))" | {
+                [x: string]: number | "var(--cnvs-base-size-225, 1.125rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            width: "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))";
+            height: "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: number | "var(--cnvs-base-size-225, 1.125rem)" | `var(--${string}, transparent)`;
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+        };
+        medium: ({ iconPart }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))" | "var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem))" | {
+                [x: string]: "var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem))";
+            };
+            width: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: "var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem))";
+            };
+        };
+        large: ({ iconPart }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-base-size-125, 0.625rem)" | "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))" | {
+                [x: string]: "var(--cnvs-component-system-icon-size-sm, 1.125rem)";
+            };
+            width: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: "var(--cnvs-component-system-icon-size-sm, 1.125rem)";
+            };
+        };
+        extraLarge: ({ iconPart }: {
+            shape: `--${string}`;
+            iconColor: `--${string}`;
+            tileBackground: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            [x: string]: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))" | "var(--cnvs-sys-shape-lg, 0.75rem)" | {
+                [x: string]: "var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem))";
+            };
+            width: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: "var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem))";
+            };
+        };
+    };
+}, {
+    readonly icon: "accessory-icon";
+}, {
+    iconColor: string;
+    tileBackground: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
+/**
+ * `Accessory` is the small rounded visual that sits beside text, most often the leading element in
+ * a list item or other row. It owns the tile size and corner radius so a system icon, file type,
+ * image, site favicon, calendar date, or custom content stays one consistent shape.
+ * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar`
+ * render this shell. Accessories are
+ * decorative and always hidden from assistive technology.
+ *
+ * ```tsx
+ * <AccessoryIcon icon={activityIcon} />
+ * ```
+ */
+export declare const Accessory: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryProps>;
+//# sourceMappingURL=Accessory.d.ts.map

package/dist/es6/accessory/lib/Accessory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accessory.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/Accessory.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAEvF,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2E3B,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,qFAkBpB,CAAC"}

package/dist/es6/accessory/lib/Accessory.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
+import { systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
+import { base, component, system } from '@workday/canvas-tokens-web';
+/**
+ * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon
+ * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or
+ * `AccessoryMedia`, which render this shell.
+ */
+export const accessoryStencil = createStencil({
+    extends: cornerShapeStencil,
+    vars: {
+        iconColor: '',
+        tileBackground: '',
+    },
+    parts: {
+        icon: 'accessory-icon',
+    },
+    base: { name: "3hvhdg", styles: "box-sizing:border-box;display:inline-flex;position:relative;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;[data-part=\"accessory-icon\"]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
+    modifiers: {
+        size: {
+            extraSmall: { name: "x75h2", styles: "width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-200, 1rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
+            small: { name: "r0g8q", styles: "width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-225, 1.125rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
+            medium: { name: "poysy", styles: "width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));}" },
+            large: { name: "49ozl6", styles: "width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--shape-corner-shape-ccab68:var(--cnvs-base-size-125, 0.625rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);}" },
+            extraLarge: { name: "4ds3t1", styles: "width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));}" }
+        }
+    }
+}, "accessory-05fc46");
+/**
+ * `Accessory` is the small rounded visual that sits beside text, most often the leading element in
+ * a list item or other row. It owns the tile size and corner radius so a system icon, file type,
+ * image, site favicon, calendar date, or custom content stays one consistent shape.
+ * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar`
+ * render this shell. Accessories are
+ * decorative and always hidden from assistive technology.
+ *
+ * ```tsx
+ * <AccessoryIcon icon={activityIcon} />
+ * ```
+ */
+export const Accessory = createComponent('span')({
+    displayName: 'Accessory',
+    Component: ({ size = 'extraLarge', color, background, ...elemProps }, ref, Element) => {
+        return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, accessoryStencil({ size, iconColor: color, tileBackground: background })), "aria-hidden": true }));
+    },
+});