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

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: "ddeax", 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: "eynmi", 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: "2xu3hy", 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: "3i8u7e", 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: "15m46v", styles: "" },
+            extraLarge: { name: "4x5si", 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: "3ruv0p", 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: "2e8yi0", 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: "3mdjnf", 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: "1cn0a8", 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: "1twrf1", 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: "sgf0d", 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: "3wi2oh", 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: "xtqa7", 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: "28bkv3", 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: "27ky9e", styles: "box-sizing:border-box;" },
+    modifiers: {
+        variant: {
+            grey: { name: "1ndba8", 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: "3bbrxz", 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: "4csff1", 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: "1t854z", 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: "27f6v1", 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: "4cuggm", 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: "1n558n", 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: "1g4u9r", 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: "leqho", 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: "48b1cs", styles: "" },
+            small: { name: "sahhq", styles: "" },
+            medium: { name: "39yqre", styles: "" },
+            large: { name: "1e0oxf", styles: "" },
+            extraLarge: { name: "18nuts", styles: "" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { size: 'extraSmall' },
+            styles: { name: "1g820g", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
+        },
+        {
+            modifiers: { size: 'small' },
+            styles: { name: "379rxz", 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 }) }));
+    },
+});

package/dist/es6/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/es6/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/es6/accessory/lib/AccessoryMedia.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { Accessory, accessoryStencil } from './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.
+ */
+export const accessoryMediaStencil = 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.
+ */
+export const AccessoryMedia = createComponent('span')({
+    displayName: 'AccessoryMedia',
+    Component: ({ src, size = 'extraLarge', objectFit = 'cover', icon, color = 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.useState(null);
+        const imageRef = React.useRef(null);
+        const imageLoaded = loadedSrc === src;
+        React.useEffect(() => {
+            const image = imageRef.current;
+            if ((image === null || image === void 0 ? void 0 : image.complete) && image.naturalWidth > 0) {
+                setLoadedSrc(src);
+            }
+        }, [src]);
+        return (_jsxs(Accessory, { as: Element, ref: ref, color: icon ? color : undefined, size: size, ...handleCsProp(elemProps, accessoryMediaStencil({ background, imageLoaded, objectFit })), children: [_jsx("img", { ref: imageRef, alt: "", onLoad: () => setLoadedSrc(src), src: src, ...accessoryMediaStencil.parts.image }), icon && (_jsxs(_Fragment, { children: [_jsx("span", { ...accessoryMediaStencil.parts.scrim }), _jsx(SystemIcon, { icon: icon, ...accessoryStencil.parts.icon })] }))] }));
+    },
+});

package/dist/es6/index.d.ts

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

package/dist/es6/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/es6/index.js

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

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "16.2.0-0652-next.0",
+  "version": "16.2.0-0654-next.0",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^16.2.0-0652-next.0",
-    "@workday/canvas-kit-styling": "^16.2.0-0652-next.0",
+    "@workday/canvas-kit-react": "^16.2.0-0654-next.0",
+    "@workday/canvas-kit-styling": "^16.2.0-0654-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "@workday/design-assets-types": "^0.3.0",
@@ -60,5 +60,5 @@
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "113813ec15455899fa94d617f8580a9e69e1cc7b"
+  "gitHead": "e022131cf84954c1a0dc8b47b4c32dd0bebb07ff"
 }