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

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

@@ -0,0 +1,80 @@
+import { AccessoryProps } from './Accessory';
+export interface AccessoryCalendarProps extends AccessoryProps {
+    /**
+     * The month label, such as `Apr`.
+     */
+    month: string;
+    /**
+     * The day of the month, such as `30`.
+     */
+    date: number | string;
+}
+/**
+ * Calendar treatment for `AccessoryCalendar`. The month uses a critical color. The day uses the
+ * default foreground color. `size` scales both. `color` overrides the month. `background`
+ * overrides the tile fill.
+ */
+export declare const accessoryCalendarStencil: import("@workday/canvas-kit-styling").Stencil<{
+    /**
+     * The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
+     * proportion. At `extraLarge` that is 10px and 16px (`subtext.sm` and `body.sm`). Type tokens
+     * do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
+     */
+    size: {
+        extraSmall: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            };
+        };
+        small: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            };
+        };
+        medium: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            };
+        };
+        large: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            };
+        };
+        extraLarge: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly month: "accessory-calendar-month";
+            readonly date: "accessory-calendar-date";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+            };
+        };
+    };
+}, {
+    readonly icon: "accessory-icon";
+    readonly month: "accessory-calendar-month";
+    readonly date: "accessory-calendar-date";
+}, {}, never, never>;
+/**
+ * `AccessoryCalendar` renders a month and day in an accessory tile. The month is critical and the
+ * day is the default foreground color. Both scale with `size`. Always decorative.
+ */
+export declare const AccessoryCalendar: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryCalendarProps>;
+//# sourceMappingURL=AccessoryCalendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryCalendar.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryCalendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAmB,MAAM,aAAa,CAAC;AAExE,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;IAoCjC;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsBL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,6FAuB5B,CAAC"}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { Accessory, accessoryStencil } from './Accessory';
+/**
+ * Calendar treatment for `AccessoryCalendar`. The month uses a critical color. The day uses the
+ * default foreground color. `size` scales both. `color` overrides the month. `background`
+ * overrides the tile fill.
+ */
+export const accessoryCalendarStencil = createStencil({
+    parts: {
+        icon: 'accessory-icon',
+        month: 'accessory-calendar-month',
+        date: 'accessory-calendar-date',
+    },
+    base: { name: "4d8j2e", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{flex-direction:column;gap:0.075em;overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-calendar-month\"]{color:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1))));font-size:0.25em;font-weight:var(--cnvs-sys-font-weight-medium);line-height:1;white-space:nowrap;}[data-part=\"accessory-calendar-date\"]{color:var(--cnvs-sys-color-fg-default);font-size:0.4em;font-weight:var(--cnvs-sys-font-weight-normal);line-height:1;white-space:nowrap;}" },
+    modifiers: {
+        /**
+         * The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
+         * proportion. At `extraLarge` that is 10px and 16px (`subtext.sm` and `body.sm`). Type tokens
+         * do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
+         */
+        size: {
+            extraSmall: { name: "1ditle", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));}" },
+            small: { name: "2s6myj", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));}" },
+            medium: { name: "3m80c5", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));}" },
+            large: { name: "2ij8js", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));}" },
+            extraLarge: { name: "3d450k", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));}" }
+        }
+    },
+    defaultModifiers: {
+        size: 'extraLarge',
+    }
+}, "accessory-calendar-63f1cc");
+/**
+ * `AccessoryCalendar` renders a month and day in an accessory tile. The month is critical and the
+ * day is the default foreground color. Both scale with `size`. Always decorative.
+ */
+export const AccessoryCalendar = createComponent('span')({
+    displayName: 'AccessoryCalendar',
+    Component: ({ month, date, size = 'extraLarge', color, background, ...elemProps }, ref, Element) => {
+        return (_jsx(Accessory, { as: Element, ref: ref, background: background, color: color, size: size, ...handleCsProp(elemProps, accessoryCalendarStencil({ size })), children: _jsxs("span", { ...accessoryStencil.parts.icon, children: [_jsx("span", { ...accessoryCalendarStencil.parts.month, children: month }), _jsx("span", { ...accessoryCalendarStencil.parts.date, children: date })] }) }));
+    },
+});

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

@@ -0,0 +1,75 @@
+import { AccessoryProps } from './Accessory';
+export interface AccessoryFaviconProps extends AccessoryProps {
+    /**
+     * The site URL or bare domain, such as `https://design.workday.com` or `workday.com`. The hostname is
+     * used to resolve the favicon.
+     */
+    url: string;
+}
+/**
+ * Favicon treatment for `AccessoryFavicon`. At `large` and `extraLarge` the mark is inset in an
+ * outlined tile. At `medium` and smaller the mark fills the tile and the frame is removed.
+ * `background` overrides the tile fill.
+ */
+export declare const accessoryFaviconStencil: import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        extraSmall: ({ iconPart, imagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly image: "accessory-favicon-image";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            "[data-part=\"accessory-favicon-image\"]": {
+                width: string;
+                height: string;
+                borderRadius: number;
+            };
+        };
+        small: ({ iconPart, imagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly image: "accessory-favicon-image";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            "[data-part=\"accessory-favicon-image\"]": {
+                width: string;
+                height: string;
+                borderRadius: number;
+            };
+        };
+        medium: ({ iconPart, imagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+            readonly image: "accessory-favicon-image";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                backgroundColor: `var(--${string}, transparent)`;
+                borderWidth: number;
+            };
+            "[data-part=\"accessory-favicon-image\"]": {
+                width: string;
+                height: string;
+                borderRadius: number;
+            };
+        };
+        large: {};
+        extraLarge: {};
+    };
+}, {
+    readonly icon: "accessory-icon";
+    readonly image: "accessory-favicon-image";
+}, {}, never, never>;
+/**
+ * `AccessoryFavicon` renders a site favicon in an accessory tile. Pass a site URL or domain as
+ * `url`. The mark is inset in an outlined frame at `large` and `extraLarge`, and fills the tile at
+ * smaller sizes. Always decorative.
+ *
+ * The image is requested from the user's browser at `https://www.google.com/s2/favicons`. Google
+ * receives the hostname and the user's IP address. `referrerPolicy="no-referrer"` keeps the app
+ * origin off that request. It does not proxy the request.
+ */
+export declare const AccessoryFavicon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryFaviconProps>;
+//# sourceMappingURL=AccessoryFavicon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryFavicon.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAkC,MAAM,aAAa,CAAC;AA+BvF,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAkElC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { Accessory, accessoryStencil } from './Accessory';
+/** Hostname from a site URL or a bare domain such as `workday.com`. */
+function hostnameFromSiteUrl(siteUrl) {
+    const trimmed = siteUrl.trim();
+    if (!trimmed) {
+        return '';
+    }
+    try {
+        const withProtocol = /^[a-z][a-z0-9+.-]*:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+        return new URL(withProtocol).hostname || '';
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Brand favicon URL for a site, resolved through the public Google favicon endpoint. Tiles larger
+ * than 32px request a 180px source. Smaller tiles request 64px.
+ */
+function faviconSrcFromSiteUrl(siteUrl, size) {
+    const host = hostnameFromSiteUrl(siteUrl);
+    if (!host) {
+        return '';
+    }
+    const sourceSize = size === 'extraLarge' ? 180 : 64;
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=${sourceSize}`;
+}
+/**
+ * Favicon treatment for `AccessoryFavicon`. At `large` and `extraLarge` the mark is inset in an
+ * outlined tile. At `medium` and smaller the mark fills the tile and the frame is removed.
+ * `background` overrides the tile fill.
+ */
+export const accessoryFaviconStencil = createStencil({
+    parts: {
+        icon: 'accessory-icon',
+        image: 'accessory-favicon-image',
+    },
+    base: { name: "29b8tl", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-favicon-image\"]{width:calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));height:calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));object-fit:contain;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));corner-shape:superellipse(1.1);}" },
+    modifiers: {
+        size: {
+            extraSmall: { name: "1z0gca", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
+            small: { name: "37ajxg", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
+            medium: { name: "3j0w15", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
+            large: { name: "2c23tr", styles: "" },
+            extraLarge: { name: "3tbd1b", styles: "" }
+        }
+    },
+    defaultModifiers: {
+        size: 'extraLarge',
+    }
+}, "accessory-favicon-77a3ef");
+/**
+ * `AccessoryFavicon` renders a site favicon in an accessory tile. Pass a site URL or domain as
+ * `url`. The mark is inset in an outlined frame at `large` and `extraLarge`, and fills the tile at
+ * smaller sizes. Always decorative.
+ *
+ * The image is requested from the user's browser at `https://www.google.com/s2/favicons`. Google
+ * receives the hostname and the user's IP address. `referrerPolicy="no-referrer"` keeps the app
+ * origin off that request. It does not proxy the request.
+ */
+export const AccessoryFavicon = createComponent('span')({
+    displayName: 'AccessoryFavicon',
+    Component: ({ url, size = 'extraLarge', background, ...elemProps }, ref, Element) => {
+        const src = faviconSrcFromSiteUrl(url, size);
+        return (_jsx(Accessory, { as: Element, ref: ref, background: background, size: size, ...handleCsProp(elemProps, accessoryFaviconStencil({ size })), children: src ? (_jsx("span", { ...accessoryStencil.parts.icon, children: _jsx("img", { alt: "", src: src, ...accessoryFaviconStencil.parts.image, referrerPolicy: "no-referrer" }) })) : null }));
+    },
+});

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

@@ -0,0 +1,65 @@
+import { AccessoryProps } from './Accessory';
+/**
+ * The kind of file `AccessoryFile` represents.
+ */
+export type AccessoryFileType = 'pdf' | 'spreadsheet' | 'document' | 'presentation' | 'video' | 'file' | 'txt';
+export interface AccessoryFileProps extends AccessoryProps {
+    /**
+     * The file type. Chooses the glyph and sets the tile fill and icon color through a stencil
+     * modifier. Colored types keep their accent fill at every size. `file` and `txt` use
+     * `surface.alt` with a `border.default` stroke. `video` uses `surface.alt` and an inverse icon.
+     * `color` and `background` override the type colors.
+     * @default 'file'
+     */
+    type?: AccessoryFileType;
+}
+/**
+ * File-type treatment for `AccessoryFile`. Each `type` sets the tile fill and icon color.
+ * `outline` adds the default border used by `file` and `txt`. `color` and `background` on
+ * `Accessory` still override the type colors.
+ */
+export declare const accessoryFileStencil: import("@workday/canvas-kit-styling").Stencil<{
+    type: {
+        pdf: {
+            [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))";
+        };
+        spreadsheet: {
+            [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)))";
+        };
+        document: {
+            [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)))";
+        };
+        presentation: {
+            [x: string]: "var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84))" | "var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1))";
+        };
+        video: {
+            [x: string]: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))" | "--cnvs-sys-color-fg-default";
+        };
+        file: {
+            [x: string]: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))" | "--cnvs-sys-color-fg-default";
+        };
+        txt: {
+            [x: string]: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))" | "--cnvs-sys-color-fg-default";
+        };
+    };
+    outline: {
+        true: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
+            };
+        };
+    };
+}, {
+    readonly icon: "accessory-icon";
+}, {}, never, never>;
+/**
+ * `AccessoryFile` renders a file-type tile. `type` chooses the glyph and sets the fill and icon
+ * color. Colored types keep their fill at every size. Generic file and text use `surface.alt` and
+ * a `border.default` stroke. Always decorative.
+ */
+export declare const AccessoryFile: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryFileProps>;
+//# sourceMappingURL=AccessoryFile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryFile.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryFile.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,cAAc,EAAmB,MAAM,aAAa,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,KAAK,GACL,aAAa,GACb,UAAU,GACV,cAAc,GACd,OAAO,GACP,MAAM,GACN,KAAK,CAAC;AAEV,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAwD/B,CAAC;AAYH;;;;GAIG;AACH,eAAO,MAAM,aAAa,yFAuBxB,CAAC"}

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { documentIcon, pdfIcon, playCircleIcon, stackIcon, tableExpandIcon, txtIcon, } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
+import { Accessory, accessoryStencil } from './Accessory';
+/**
+ * File-type treatment for `AccessoryFile`. Each `type` sets the tile fill and icon color.
+ * `outline` adds the default border used by `file` and `txt`. `color` and `background` on
+ * `Accessory` still override the type colors.
+ */
+export const accessoryFileStencil = createStencil({
+    parts: {
+        icon: 'accessory-icon',
+    },
+    base: { name: "4bgcjs", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
+    modifiers: {
+        type: {
+            pdf: { name: "4cpm7x", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));" },
+            spreadsheet: { name: "2hxiqb", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));" },
+            document: { name: "2fxzmb", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));" },
+            presentation: { name: "1ky992", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84));--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));" },
+            video: { name: "1mgn37", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" },
+            file: { name: "419agi", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" },
+            txt: { name: "1qcw2", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" }
+        },
+        outline: {
+            true: { name: "2oh73y", styles: "[data-part=\"accessory-icon\"]{border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}" }
+        }
+    },
+    defaultModifiers: {
+        type: 'file',
+    }
+}, "accessory-file-3a7be4");
+const fileIcons = {
+    pdf: pdfIcon,
+    spreadsheet: tableExpandIcon,
+    document: documentIcon,
+    presentation: stackIcon,
+    video: playCircleIcon,
+    file: documentIcon,
+    txt: txtIcon,
+};
+/**
+ * `AccessoryFile` renders a file-type tile. `type` chooses the glyph and sets the fill and icon
+ * color. Colored types keep their fill at every size. Generic file and text use `surface.alt` and
+ * a `border.default` stroke. Always decorative.
+ */
+export const AccessoryFile = createComponent('span')({
+    displayName: 'AccessoryFile',
+    Component: ({ type = 'file', size = 'extraLarge', color, background, ...elemProps }, ref, Element) => {
+        return (_jsx(Accessory, { as: Element, ref: ref, background: background, color: color, size: size, ...handleCsProp(elemProps, accessoryFileStencil({ type, outline: type === 'file' || type === 'txt' })), children: _jsx(SystemIcon, { icon: fileIcons[type], ...accessoryStencil.parts.icon }) }));
+    },
+});

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

@@ -0,0 +1,119 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+import { AccessoryProps } from './Accessory';
+/**
+ * The color treatment of `AccessoryIcon`.
+ */
+export type AccessoryIconVariant = 'grey' | 'green' | 'blue' | 'purple' | 'amber' | 'magenta' | 'red' | 'orange' | 'outline';
+export interface AccessoryIconProps extends AccessoryProps {
+    /**
+     * The icon to display from `@workday/canvas-system-icons-web`.
+     */
+    icon: SystemIconProps['icon'];
+    /**
+     * The color treatment of the icon and, at `medium` and above, the tile fill. `color` and
+     * `background` from `Accessory` override these. Variant fills stay hidden at `small` and
+     * `extraSmall` unless `background` is set.
+     * @default 'grey'
+     */
+    variant?: AccessoryIconVariant;
+}
+/**
+ * Color treatment for `AccessoryIcon`. `variant` paints the icon part. `extraSmall` and `small`
+ * clear that fill and border unless `background` sets the tile variable. `color` and `background`
+ * on `Accessory` still override the variant.
+ */
+export declare const accessoryIconStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        grey: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))))` | `var(--${string}, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)))`;
+                backgroundColor: `var(--${string}, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))))`;
+            };
+        };
+        green: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15)))` | `var(--${string}, var(--cnvs-base-palette-green-800, oklch(0.3955 0.1156 147.66 / 1)))`;
+                backgroundColor: `var(--${string}, var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15)))`;
+            };
+        };
+        blue: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11))))` | `var(--${string}, var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1))))`;
+                backgroundColor: `var(--${string}, var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11))))`;
+            };
+        };
+        purple: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-base-palette-purple-a50, oklch(0.5645 0.2935 302.36 / 0.09)))` | `var(--${string}, var(--cnvs-base-palette-purple-700, oklch(0.476 0.156 313.2 / 1)))`;
+                backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-a50, oklch(0.5645 0.2935 302.36 / 0.09)))`;
+            };
+        };
+        amber: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22))))` | `var(--${string}, var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1)))`;
+                backgroundColor: `var(--${string}, var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22))))`;
+            };
+        };
+        magenta: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-base-palette-magenta-a50, oklch(0.7044 0.3188 328.33 / 0.08)))` | `var(--${string}, var(--cnvs-base-palette-magenta-800, oklch(0.4011 0.1269 344.4 / 1)))`;
+                backgroundColor: `var(--${string}, var(--cnvs-base-palette-magenta-a50, oklch(0.7044 0.3188 328.33 / 0.08)))`;
+            };
+        };
+        red: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1)))` | `var(--${string}, var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1))))`;
+                backgroundColor: `var(--${string}, var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1)))`;
+            };
+        };
+        orange: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: `var(--${string}, var(--cnvs-base-palette-orange-a50, oklch(0.7555 0.1769 59.35 / 0.17)))` | `var(--${string}, var(--cnvs-base-palette-orange-700, oklch(0.4689 0.1456 40.5 / 1)))`;
+                backgroundColor: `var(--${string}, var(--cnvs-base-palette-orange-a50, oklch(0.7555 0.1769 59.35 / 0.17)))`;
+            };
+        };
+        outline: ({ iconPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly icon: "accessory-icon";
+        }>) => {
+            "[data-part=\"accessory-icon\"]": {
+                [x: string]: string;
+                backgroundColor: `var(--${string}, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))))`;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
+            };
+        };
+    };
+    size: {
+        extraSmall: {};
+        small: {};
+        medium: {};
+        large: {};
+        extraLarge: {};
+    };
+}, {
+    readonly icon: "accessory-icon";
+}, Record<string, string> | Record<string, Record<string, string>>, never, never>;
+/**
+ * `AccessoryIcon` renders a system icon in an accessory tile. `variant` sets the tile fill and
+ * icon color. `color` and `background` on the shared `Accessory` props override the variant. The
+ * glyph size comes from `size` on `Accessory` through the icon `data-part`. Always decorative.
+ */
+export declare const AccessoryIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccessoryIconProps>;
+//# sourceMappingURL=AccessoryIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryIcon.d.ts","sourceRoot":"","sources":["../../../../accessory/lib/AccessoryIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAI9F,OAAO,EAAY,cAAc,EAAmB,MAAM,aAAa,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,KAAK,GACL,QAAQ,GACR,SAAS,CAAC;AAEd,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iFA0I/B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,yFA2BxB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { Accessory, accessoryStencil } from './Accessory';
+/**
+ * Color treatment for `AccessoryIcon`. `variant` paints the icon part. `extraSmall` and `small`
+ * clear that fill and border unless `background` sets the tile variable. `color` and `background`
+ * on `Accessory` still override the variant.
+ */
+export const accessoryIconStencil = createStencil({
+    parts: {
+        icon: 'accessory-icon',
+    },
+    base: { name: "2s7ez2", styles: "box-sizing:border-box;" },
+    modifiers: {
+        variant: {
+            grey: { name: "g74z5", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));}" },
+            green: { name: "1mud8r", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-green-800, oklch(0.3955 0.1156 147.66 / 1)));}" },
+            blue: { name: "3iocgz", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1))));}" },
+            purple: { name: "2mo4l6", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-purple-a50, oklch(0.5645 0.2935 302.36 / 0.09)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-purple-700, oklch(0.476 0.156 313.2 / 1)));}" },
+            amber: { name: "1ocl8c", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1)));}" },
+            magenta: { name: "2cl0k0", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-magenta-a50, oklch(0.7044 0.3188 328.33 / 0.08)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-magenta-800, oklch(0.4011 0.1269 344.4 / 1)));}" },
+            red: { name: "efcts", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1))));}" },
+            orange: { name: "46543d", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-orange-a50, oklch(0.7555 0.1769 59.35 / 0.17)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-orange-700, oklch(0.4689 0.1456 40.5 / 1)));}" },
+            outline: { name: "ptq8f", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}" }
+        },
+        size: {
+            extraSmall: { name: "3ltait", styles: "" },
+            small: { name: "3c3m26", styles: "" },
+            medium: { name: "10gyd9", styles: "" },
+            large: { name: "1400i", styles: "" },
+            extraLarge: { name: "16bn4a", styles: "" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { size: 'extraSmall' },
+            styles: { name: "1wn8kx", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
+        },
+        {
+            modifiers: { size: 'small' },
+            styles: { name: "3s7fcb", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
+        }
+    ]
+}, "accessory-icon-b2d5b9");
+/**
+ * `AccessoryIcon` renders a system icon in an accessory tile. `variant` sets the tile fill and
+ * icon color. `color` and `background` on the shared `Accessory` props override the variant. The
+ * glyph size comes from `size` on `Accessory` through the icon `data-part`. Always decorative.
+ */
+export const AccessoryIcon = createComponent('span')({
+    displayName: 'AccessoryIcon',
+    Component: ({ icon, size = 'extraLarge', variant = 'grey', color, background, ...elemProps }, ref, Element) => {
+        return (_jsx(Accessory, { as: Element, ref: ref, background: background, color: color, size: size, ...handleCsProp(elemProps, accessoryIconStencil({ size, variant })), children: _jsx(SystemIcon, { icon: icon, ...accessoryStencil.parts.icon }) }));
+    },
+});