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

package/accessory/lib/AccessoryIcon.tsx

@@ -0,0 +1,213 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps, 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, AccessoryProps, accessoryStencil} 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 const accessoryIconStencil = createStencil({
+  parts: {
+    icon: 'accessory-icon',
+  },
+  base: {},
+  modifiers: {
+    variant: {
+      grey: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(
+            accessoryStencil.vars.tileBackground,
+            system.legacy.color.surface.alt.strong
+          ),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            base.legacy.slate800
+          ),
+        },
+      }),
+      green: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(
+            accessoryStencil.vars.tileBackground,
+            system.legacy.color.surface.success.strong
+          ),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            base.legacy.green800
+          ),
+        },
+      }),
+      blue: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(
+            accessoryStencil.vars.tileBackground,
+            system.legacy.color.surface.info.strong
+          ),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            system.legacy.color.fg.info.strong
+          ),
+        },
+      }),
+      purple: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.purpleA50),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            base.legacy.purple700
+          ),
+        },
+      }),
+      amber: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(
+            accessoryStencil.vars.tileBackground,
+            system.legacy.color.surface.warning.strong
+          ),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            system.legacy.color.fg.warning.strong
+          ),
+        },
+      }),
+      magenta: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.magentaA50),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            base.legacy.magenta800
+          ),
+        },
+      }),
+      red: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(
+            accessoryStencil.vars.tileBackground,
+            system.legacy.color.surface.danger.strong
+          ),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            system.legacy.color.fg.danger.strong
+          ),
+        },
+      }),
+      orange: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, base.legacy.orangeA50),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            base.legacy.orange700
+          ),
+        },
+      }),
+      outline: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(
+            accessoryStencil.vars.tileBackground,
+            system.legacy.color.surface.transparent
+          ),
+          [systemIconStencil.vars.color]: cssVar(
+            accessoryStencil.vars.iconColor,
+            base.legacy.slate800
+          ),
+          borderWidth: px2rem(1),
+          borderStyle: 'solid',
+          borderColor: system.legacy.color.border.default,
+        },
+      }),
+    },
+    size: {
+      extraSmall: {},
+      small: {},
+      medium: {},
+      large: {},
+      extraLarge: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {size: 'extraSmall'},
+      styles: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+      }),
+    },
+    {
+      modifiers: {size: 'small'},
+      styles: ({iconPart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+      }),
+    },
+  ],
+});
+
+/**
+ * `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
+    }: AccessoryIconProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Accessory
+        as={Element}
+        ref={ref}
+        background={background}
+        color={color}
+        size={size}
+        {...handleCsProp(elemProps, accessoryIconStencil({size, variant}))}
+      >
+        <SystemIcon icon={icon} {...accessoryStencil.parts.icon} />
+      </Accessory>
+    );
+  },
+});

package/accessory/lib/AccessoryMedia.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+
+import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps} 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, AccessoryProps, accessoryStencil} 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 const accessoryMediaStencil = createStencil({
+  vars: {
+    background: '',
+  },
+  parts: {
+    image: 'accessory-media-image',
+    scrim: 'accessory-media-scrim',
+  },
+  base: ({background, imagePart, scrimPart}) => ({
+    backgroundColor: cssVar(background, system.legacy.color.surface.alt.default),
+    [imagePart]: {
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      overflow: 'hidden',
+      borderRadius: cornerShapeStencil.vars.shape,
+      cornerShape: 'superellipse(1.1)',
+    },
+    [scrimPart]: {
+      position: 'absolute',
+      inset: 0,
+      backgroundColor: system.legacy.color.surface.overlay.scrim,
+      borderRadius: cornerShapeStencil.vars.shape,
+      cornerShape: 'superellipse(1.1)',
+      pointerEvents: 'none',
+    },
+  }),
+  modifiers: {
+    imageLoaded: {
+      false: ({imagePart}) => ({
+        [imagePart]: {
+          display: 'none',
+        },
+      }),
+      true: {},
+    },
+    objectFit: {
+      cover: ({imagePart}) => ({
+        [imagePart]: {
+          objectFit: 'cover',
+        },
+      }),
+      contain: ({imagePart}) => ({
+        [imagePart]: {
+          objectFit: 'contain',
+        },
+      }),
+    },
+  },
+});
+
+/**
+ * `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
+    }: AccessoryMediaProps,
+    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<string | null>(null);
+    const imageRef = React.useRef<HTMLImageElement>(null);
+    const imageLoaded = loadedSrc === src;
+
+    React.useEffect(() => {
+      const image = imageRef.current;
+      if (image?.complete && image.naturalWidth > 0) {
+        setLoadedSrc(src);
+      }
+    }, [src]);
+
+    return (
+      <Accessory
+        as={Element}
+        ref={ref}
+        color={icon ? color : undefined}
+        size={size}
+        {...handleCsProp(elemProps, accessoryMediaStencil({background, imageLoaded, objectFit}))}
+      >
+        <img
+          ref={imageRef}
+          alt=""
+          onLoad={() => setLoadedSrc(src)}
+          src={src}
+          {...accessoryMediaStencil.parts.image}
+        />
+        {icon && (
+          <>
+            <span {...accessoryMediaStencil.parts.scrim} />
+            <SystemIcon icon={icon} {...accessoryStencil.parts.icon} />
+          </>
+        )}
+      </Accessory>
+    );
+  },
+});

package/accessory/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/accessory",
+  "module": "../dist/es6/accessory",
+  "sideEffects": false,
+  "types": "../dist/es6/accessory"
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./lib/Accessory"), exports);
+__exportStar(require("./lib/AccessoryCalendar"), exports);
+__exportStar(require("./lib/AccessoryFavicon"), exports);
+__exportStar(require("./lib/AccessoryFile"), exports);
+__exportStar(require("./lib/AccessoryIcon"), exports);
+__exportStar(require("./lib/AccessoryMedia"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/accessory/lib/Accessory.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accessory = exports.accessoryStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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");
+/**
+ * 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.
+ */
+exports.accessoryStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: common_1.cornerShapeStencil,
+    vars: {
+        iconColor: '',
+        tileBackground: '',
+    },
+    parts: {
+        icon: 'accessory-icon',
+    },
+    base: { name: "gv5qf", 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: "3n1ci6", 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: "1bphix", 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: "yrqbg", 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: "i7ht8", 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: "3zn1qe", 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} />
+ * ```
+ */
+exports.Accessory = (0, common_1.createComponent)('span')({
+    displayName: 'Accessory',
+    Component: ({ size = 'extraLarge', color, background, ...elemProps }, ref, Element) => {
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.accessoryStencil)({ size, iconColor: color, tileBackground: background })), "aria-hidden": true }));
+    },
+});