@proyecto-viviana/ui 0.6.3 → 0.8.0-rc.1

package/dist/_chunk/card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.jsx","names":[],"sources":["../../src/card/mesh-field.ts","../../src/card/index.tsx"],"sourcesContent":["/* The mesh card's cursor field. Ported from the frozen external design\n * repository's framework-neutral `glasselated.js` (`onMove` + `align`; see\n * CREDITS.md, \"Glasselated design lane\"), which drove it off a document-wide\n * `.mesh-card` query; here each Card owns its own listener so the primitive\n * needs no registry and cleans up with the component.\n *\n * Two jobs, both pure paint:\n *   • `--mx` / `--my` — the cursor position in the card's own coordinates, which\n *     positions the hover spotlight and the spreading border ring.\n *   • `background-position` / `--gl-pos` — the weave is anchored to the page,\n *     not to the card, so neighbouring cards read as windows onto one continuous\n *     mesh rather than as tiles that each restart the pattern. That alignment\n *     has to be re-run whenever layout moves the card.\n *\n * Nothing here runs on the server: the resting values are the CSS fallbacks\n * (`50%`, `0 0`), so a server render and its hydration pass agree. */\nimport { createEffect, onCleanup, createTrackedEffect } from \"solid-js\";\n\nexport function createMeshField(\n  getElement: () => HTMLElement | undefined,\n  isEnabled: () => boolean,\n): void {\n  const align = (): void => {\n    const element = getElement();\n    if (!element) return;\n    const rect = element.getBoundingClientRect();\n    const position = `${String(-(rect.left + window.scrollX))}px ${String(-(rect.top + window.scrollY))}px`;\n    element.style.backgroundPosition = position;\n    element.style.setProperty(\"--gl-pos\", position);\n  };\n\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    if (!isEnabled()) return;\n    let frame = 0;\n    const onMove = (event: MouseEvent): void => {\n      if (frame) return;\n      frame = requestAnimationFrame(() => {\n        frame = 0;\n        const element = getElement();\n        if (!element) return;\n        const rect = element.getBoundingClientRect();\n        element.style.setProperty(\"--mx\", `${String(event.clientX - rect.left)}px`);\n        element.style.setProperty(\"--my\", `${String(event.clientY - rect.top)}px`);\n      });\n    };\n    document.addEventListener(\"mousemove\", onMove);\n    window.addEventListener(\"resize\", align);\n    align();\n    // Fonts and images settle after first paint and move the card under the weave.\n    const settle = window.setTimeout(align, 400);\n    _s2Cleanups.push(() => {\n      document.removeEventListener(\"mousemove\", onMove);\n      window.removeEventListener(\"resize\", align);\n      window.clearTimeout(settle);\n      if (frame) cancelAnimationFrame(frame);\n    });\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n}\n","// @ts-nocheck\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Card.tsx\n\n// Port of packages/@react-spectrum/s2/src/Card.tsx.\n\nimport {\n  Show,\n  createContext,\n  createMemo,\n  createRoot,\n  createSignal,\n  getOwner,\n  onCleanup,\n  runWithOwner,\n  useContext,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport { isServer } from \"@solidjs/web\";\nimport type { JSX } from \"@solidjs/web\";\nimport { FocusableContext } from \"@proyecto-viviana/solidaria/interactions\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  GridListItem as HeadlessGridListItem,\n  GridListSelectionCheckbox,\n  Link as HeadlessLink,\n  filterDOMProps,\n  evaluateRenderChildren,\n  type GridListItemProps as HeadlessGridListItemProps,\n  type GridListItemRenderProps,\n  type LinkRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { ActionMenuContext } from \"../menu/ActionMenu\";\nimport { AvatarContext } from \"../avatar\";\nimport { ButtonContext, LinkButtonContext } from \"../button/context\";\nimport { ContentContext, FooterContext, TextContext } from \"../text\";\nimport { DividerContext } from \"../divider\";\nimport { IconContext, IllustrationContext } from \"../icon\";\nimport { Image, ImageContext, ImageCoordinator } from \"../image\";\nimport { SkeletonContext, SkeletonWrapper, useInertAttribute, useIsSkeleton } from \"../skeleton\";\nimport { pressScale } from \"../pressScale\";\nimport { useProviderProps } from \"../provider\";\nimport type { StyleString } from \"../style\";\nimport { color, focusRing, lightDark, space, style } from \"../style\" with { type: \"macro\" };\nimport { meshStrip } from \"../style/meshStrip\";\nimport { createMeshField } from \"./mesh-field\";\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type CardSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type CardDensity = \"compact\" | \"regular\" | \"spacious\";\nexport type CardVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"quiet\";\nexport type CardMeshVariant = \"ambient\" | \"signal\";\n\nexport interface CardRenderProps {\n  /** The size of the Card. */\n  size: CardSize;\n}\n\nexport interface CardProps extends Omit<\n  HeadlessGridListItemProps<object>,\n  \"class\" | \"style\" | \"children\" | \"ref\"\n> {\n  /** The children of the Card. */\n  children?: JSX.Element | ((renderProps: CardRenderProps) => JSX.Element);\n  /** The size of the Card. @default 'M' */\n  size?: CardSize;\n  /** The amount of internal padding within the Card. @default 'regular' */\n  density?: CardDensity;\n  /** The visual style of the Card. @default 'primary' */\n  variant?: CardVariant;\n  /**\n   * The register's woven hex-mesh weave, painted behind the glass fill —\n   * `ambient` is the quiet mixed slate/blue/fuchsia weave, `signal` the\n   * single-hue detail-yellow one. Only the filled variants take it; `tertiary` and\n   * `quiet` have no fill for a weave to sit under.\n   */\n  mesh?: CardMeshVariant;\n  /** Seed for the mesh weave, so neighboring cards don't repeat the same pattern. @default 42 */\n  meshSeed?: number;\n  /** Link target for standalone navigable cards. */\n  href?: string;\n  download?: boolean | string;\n  target?: string;\n  rel?: string;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the rendered card element. */\n  ref?: RefLike<HTMLElement>;\n}\n\nexport interface CardPreviewProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children?: JSX.Element;\n  /**\n   * Recessed fill behind the preview. `inset` sits the region on\n   * `--surface-inset` — the register's console-strip treatment, where the\n   * full-bleed header bar reads sunk into the card rather than flush with it.\n   */\n  background?: \"inset\";\n  /**\n   * Local addition — no S2 counterpart. A corner tag pinned over the top-start of\n   * the media, drawn on the register's glass scrim: the media card's category\n   * stamp (TerminalGlassLab.tsx, §06). It cannot be a plain child because the\n   * preview clips its content to the card radius and the tag has to float above\n   * that clip; and it cannot be a context-styled `Badge`, because\n   * `getAllowedOverrides()` admits only positioning properties, so the scrim fill\n   * could not ride a `styles` override.\n   */\n  tag?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface AssetCardProps extends Omit<CardProps, \"density\"> {}\nexport interface UserCardProps extends Omit<CardProps, \"density\" | \"variant\"> {\n  variant?: Exclude<CardVariant, \"quiet\">;\n}\nexport interface ProductCardProps extends Omit<CardProps, \"density\" | \"variant\"> {\n  variant?: Exclude<CardVariant, \"quiet\">;\n}\n\n/* Glasselated: the handoff draws one card corner (12px, primitives.tsx:35) and does\n * not shrink it for small cards. The size ramp is kept anyway — an XS card with a\n * 12px corner is nearly a lozenge — but rebased on the register: `card` at the\n * normal sizes, the control corner for the two smallest. */\nconst borderRadius = {\n  default: \"card\",\n  size: {\n    XS: \"control\",\n    S: \"control\",\n  },\n} as const;\n\ntype CardStyleState = Partial<GridListItemRenderProps | LinkRenderProps> & {\n  size: CardSize;\n  density: CardDensity;\n  variant: CardVariant;\n  isCardView?: boolean;\n  isLink?: boolean;\n  /* The weave variant, so the signal card can take its own edge. Only the paint\n   * layers read `data-mesh`; the border is a real declared property, so it has to\n   * come through the style call rather than off the attribute. */\n  mesh?: CardMeshVariant;\n};\n\n/* Film grain, 180×180. The hover spotlight is seen through it, so the weave\n * lights up as grains rather than as a clean radial wash. Verbatim from the\n * handoff's `GRAIN` (glasselated.js). */\nconst GRAIN = `url(\"data:image/svg+xml,${encodeURIComponent(\n  \"<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'>\" +\n    \"<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\" +\n    \"<feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -0.3'/></filter>\" +\n    \"<rect width='100%' height='100%' filter='url(#n)' fill='#fff'/></svg>\",\n)}\")`;\n\n/* The mesh card's two signature layers, a port of the handoff's `.mesh-card`\n * rules. They are `css()` and not `style()` because both are pseudo-elements\n * with multi-layer masks and an animated registered property — none of which\n * the style macro can express.\n *   ::after  — the cursor spotlight: an accent pool plus a brighter copy of the\n *              card's own weave (`--gl-weave`), masked by the film grain so the\n *              light reads as pixels. `z-index: -1` keeps it under the content,\n *              which is why the root needs `isolation: isolate`.\n *   ::before — the border ring, a radial mask on the padding box whose diameter\n *              (`--bd`) steps outward from the cursor on hover.\n * Both hover rules exclude a card that contains a hovered card, so nesting one\n * mesh card inside another lights only the innermost one. */\nconst meshField = css(`\n  position: relative;\n  isolation: isolate;\n  --ring-c: color-mix(in srgb, var(--accent-primary) 70%, transparent);\n  --scan-c: var(--accent-primary);\n\n  &[data-mesh=\"signal\"] {\n    --ring-c: color-mix(in srgb, var(--yellow-500) 70%, transparent);\n    --scan-c: var(--yellow-500);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -1;\n    border-radius: inherit;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.25s ease;\n    background:\n      radial-gradient(circle var(--spot-r, 160px) at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--scan-c) 22%, transparent), transparent 100%),\n      var(--gl-weave, none);\n    background-position: 0 0, var(--gl-pos, 0 0);\n    mask-image:\n      var(--gl-grain, linear-gradient(#000, #000)),\n      radial-gradient(circle var(--spot-m, 150px) at var(--mx, 50%) var(--my, 50%), #000, transparent);\n    mask-size: 180px 180px, 100% 100%;\n    mask-composite: intersect;\n  }\n\n  &:hover:not(:has([data-mesh]:hover))::after {\n    opacity: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -1px;\n    border-radius: inherit;\n    padding: calc(var(--ring-w, 1px) + 1px);\n    pointer-events: none;\n    background: var(--ring-c);\n    transition:\n      --bd 0.6s steps(10, end),\n      padding 0.15s ease;\n    mask:\n      radial-gradient(ellipse var(--bd) var(--bd) at var(--mx, 50%) var(--my, 50%), #000 0% 66%, rgba(0, 0, 0, 0.55) 66% 84%, rgba(0, 0, 0, 0.25) 84% 94%, transparent 94%),\n      linear-gradient(#000 0 0) content-box,\n      linear-gradient(#000 0 0);\n    mask-composite: intersect, exclude;\n  }\n\n  &:hover:not(:has([data-mesh]:hover))::before {\n    --bd: 175%;\n    --ring-w: 2px;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &::after,\n    &::before {\n      transition: none;\n    }\n  }\n`);\n\nconst card = style<CardStyleState>(\n  {\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    borderRadius,\n    \"--s2-container-bg\": {\n      type: \"backgroundColor\",\n      value: {\n        variant: {\n          primary: \"elevated\",\n          secondary: \"layer-1\",\n        },\n        forcedColors: \"ButtonFace\",\n      },\n    },\n    backgroundColor: {\n      default: \"--s2-container-bg\",\n      variant: {\n        tertiary: \"transparent\",\n        quiet: \"transparent\",\n      },\n    },\n    /* Glasselated: a card is the handoff's `MeshCard surface=\"card\"` (primitives.tsx:35)\n     * — translucent fill, 14px backdrop blur, a 1px `--border-subtle` edge and the\n     * inset rim. The surface token is already translucent, so without the blur the\n     * card just looks washed out; translucency plus blur is what reads as glass, and\n     * the blur can only ride on the element, never on a background-color. The two\n     * transparent variants opt out — there is no fill for a blur to sit under. */\n    backdropFilter: {\n      default: \"var(--blur-card)\",\n      variant: {\n        tertiary: \"none\",\n        quiet: \"none\",\n      },\n    },\n    borderStyle: {\n      default: \"solid\",\n      variant: {\n        tertiary: \"none\",\n        quiet: \"none\",\n      },\n    },\n    borderWidth: 1,\n    borderColor: {\n      default: \"border-subtle\",\n      /* The signal card is the register's one \"look here\" surface: the yellow detail\n       * weave behind the glass, and the edge tinted to match it so the card reads as a\n       * single yellow object rather than a neutral card with a yellow interior\n       * (TerminalGlassLab.tsx:248, the `ring-signal` card in §06). `detail-soft` is the\n       * 14%-alpha yellow the handoff draws — a tint of the edge, not a second border\n       * weight. Yellow, never fuchsia: fuchsia is reserved for the filled ask. */\n      mesh: {\n        signal: \"detail-soft\",\n      },\n      variant: {\n        tertiary: \"transparent\",\n        quiet: \"transparent\",\n      },\n    },\n    boxShadow: {\n      /* The rim carries resting elevation instead of Spectrum's cast shadow — the\n       * handoff lifts surfaces with blur plus the inset highlight, and declares\n       * `--shadow-*` tokens it then never references. Interactive states keep a real\n       * lift, composed *with* the rim rather than replacing it, so the glass edge\n       * doesn't blink out from under the pointer. */\n      default: \"edge-glass-surface\",\n      isHovered: \"[var(--edge-glass-surface), 0 4px 14px rgb(0 0 0 / 0.22)]\",\n      isFocusVisible: \"[var(--edge-glass-surface), 0 4px 14px rgb(0 0 0 / 0.22)]\",\n      isSelected: \"[var(--edge-glass-surface), 0 4px 14px rgb(0 0 0 / 0.22)]\",\n      forcedColors: \"[0 0 0 1px var(--hcm-buttonborder, ButtonBorder)]\",\n      variant: {\n        tertiary: {\n          default: `[0 0 0 2px ${color(\"gray-100\")}]`,\n          isHovered: `[0 0 0 2px ${color(\"gray-200\")}]`,\n          isFocusVisible: `[0 0 0 2px ${color(\"gray-200\")}]`,\n          isSelected: \"none\",\n          forcedColors: \"[0 0 0 2px var(--hcm-buttonborder, ButtonBorder)]\",\n        },\n        quiet: \"none\",\n      },\n    },\n    forcedColorAdjust: \"none\",\n    transition: \"default\",\n    fontFamily: \"sans\",\n    textDecoration: \"none\",\n    overflow: {\n      default: \"clip\",\n      variant: {\n        quiet: \"visible\",\n      },\n    },\n    contain: \"layout\",\n    disableTapHighlight: true,\n    userSelect: {\n      isCardView: \"none\",\n    },\n    cursor: {\n      isLink: \"pointer\",\n    },\n    width: {\n      size: {\n        XS: 112,\n        S: 192,\n        M: 240,\n        L: 320,\n        XL: 400,\n      },\n      isCardView: \"full\",\n    },\n    /* `height: full` only makes sense inside a CardView, where the grid cell is\n     * definitely sized and the card should fill it. A standalone card in a flex\n     * row must hug its content — a percentage there resolves against the row's\n     * final height (all wrapped lines included), ballooning every card to the\n     * full band. */\n    height: {\n      default: \"auto\",\n      isCardView: \"full\",\n    },\n    \"--card-spacing\": {\n      type: \"paddingTop\",\n      value: {\n        density: {\n          compact: {\n            size: {\n              XS: \"[6px]\",\n              S: 8,\n              M: 12,\n              L: 16,\n              XL: 20,\n            },\n          },\n          regular: {\n            size: {\n              XS: 8,\n              S: 12,\n              M: 16,\n              L: 20,\n              XL: 24,\n            },\n          },\n          spacious: {\n            size: {\n              XS: 12,\n              S: 16,\n              M: 20,\n              L: 24,\n              XL: 28,\n            },\n          },\n        },\n      },\n    },\n    \"--card-padding-y\": {\n      type: \"paddingTop\",\n      value: {\n        default: \"--card-spacing\",\n        variant: {\n          quiet: 0,\n        },\n      },\n    },\n    \"--card-padding-x\": {\n      type: \"paddingStart\",\n      value: {\n        default: \"--card-spacing\",\n        variant: {\n          quiet: 0,\n        },\n      },\n    },\n    paddingY: \"--card-padding-y\",\n    paddingX: \"--card-padding-x\",\n    boxSizing: \"border-box\",\n    ...focusRing(),\n    outlineStyle: {\n      default: \"none\",\n      isFocusVisible: \"solid\",\n      variant: {\n        quiet: \"none\",\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nconst selectionIndicator = style({\n  position: \"absolute\",\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: \"none\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"gray-1000\",\n  transition: \"default\",\n  opacity: {\n    default: 0,\n    isSelected: 1,\n  },\n  outlineColor: lightDark(\"transparent-white-600\", \"transparent-black-600\"),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: \"none\",\n    isStrokeInner: \"solid\",\n  },\n  outlineWidth: 2,\n});\n\nconst preview = style({\n  position: \"relative\",\n  transition: \"default\",\n  overflow: \"clip\",\n  backgroundColor: {\n    background: {\n      inset: \"pasteboard\",\n    },\n  },\n  marginX: \"calc(var(--card-padding-x) * -1)\",\n  marginTop: \"calc(var(--card-padding-y) * -1)\",\n  marginBottom: {\n    \":last-child\": \"calc(var(--card-padding-y) * -1)\",\n  },\n  borderRadius: {\n    isQuiet: borderRadius,\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: \"elevated\",\n      isFocusVisible: \"elevated\",\n      isSelected: \"elevated\",\n    },\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: \"none\",\n    isQuiet: {\n      isFocusVisible: \"solid\",\n    },\n  },\n});\n\nconst image = style({\n  width: \"full\",\n  aspectRatio: {\n    layout: {\n      grid: \"3/2\",\n    },\n  },\n  objectFit: \"cover\",\n  userSelect: \"none\",\n  pointerEvents: \"none\",\n});\n\nconst title = style({\n  font: \"title\",\n  fontSize: {\n    size: {\n      XS: \"title-xs\",\n      S: \"title-xs\",\n      M: \"title-sm\",\n      L: \"title\",\n      XL: \"title-lg\",\n    },\n  },\n  lineClamp: 3,\n  gridArea: \"title\",\n});\n\nconst description = style({\n  font: \"body\",\n  fontSize: {\n    size: {\n      XS: \"body-2xs\",\n      S: \"body-2xs\",\n      M: \"body-xs\",\n      L: \"body-sm\",\n      XL: \"body\",\n    },\n  },\n  lineClamp: 3,\n  gridArea: \"description\",\n});\n\nconst content = style({\n  display: \"grid\",\n  gridTemplateColumns: {\n    default: [\"1fr\"],\n    \":has([data-slot=menu])\": [\"minmax(0, 1fr)\", \"auto\"],\n  },\n  gridTemplateAreas: {\n    default: [\"title\", \"description\"],\n    \":has([data-slot=menu])\": [\"title menu\", \"description description\"],\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: \"baseline\",\n  /* Top-packed, not `space-between`. Cards in a row stretch to the tallest sibling, and\n   * with `flexGrow: 1` the content grid inherits all that slack; `space-between` then spent\n   * it BETWEEN the title and the description, so a short card in a tall row rendered its\n   * title at the top, its body pushed to the bottom, and a growing hole in the middle. The\n   * register packs card content to the top and lets the slack fall below it, which is also\n   * what makes a row of uneven cards read as one band of text rather than as text scattered\n   * down each card's own height. The slack still exists — it just collects at the end. */\n  alignContent: \"start\",\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8,\n    },\n  },\n  paddingTop: {\n    default: \"--card-spacing\",\n    \":first-child\": 0,\n  },\n  paddingBottom: {\n    default: \"calc(var(--card-spacing) * 1.5 / 2)\",\n    \":last-child\": 0,\n  },\n});\n\nconst actionMenu = style({\n  gridArea: \"menu\",\n  marginY: \"calc(-1 * self(height))\",\n});\n\nconst footer = style({\n  display: \"flex\",\n  flexDirection: \"row\",\n  alignItems: \"end\",\n  justifyContent: \"space-between\",\n  gap: 8,\n  paddingTop: \"calc(var(--card-spacing) * 1.5 / 2)\",\n});\n\nconst displayContents = style({\n  display: \"contents\",\n});\n\nconst cardCheckboxContainer = style({\n  position: \"absolute\",\n  top: \"--card-spacing\",\n  insetStart: \"--card-spacing\",\n  zIndex: 2,\n  padding: 4,\n  backgroundColor: lightDark(\"transparent-white-600\", \"transparent-black-600\"),\n  borderRadius: \"default\",\n  boxShadow: \"emphasized\",\n});\n\nconst cardCheckboxInput = style({\n  display: \"block\",\n  margin: 0,\n  size: {\n    size: {\n      XS: 16,\n      S: 16,\n      M: 18,\n      L: 20,\n      XL: 22,\n    },\n  },\n});\n\nconst previewClip = style({\n  borderRadius: \"inherit\",\n  overflow: \"clip\",\n});\n\n/* The media card's corner stamp. Pinned 10px in from the top-start corner over a\n * blurred black scrim so it stays legible on any cover art, in the same micro-mono\n * track the badge takes (`badge/index.tsx`): the theme's tracking scale stops at\n * 0.1em, which is the rung it declares for this mono micro role, so the tag takes it\n * rather than minting a rung for the drawn 0.12em. White ink on\n * `transparent-black-700` (rgba(0,0,0,.69)) clears AA on any underlying image and\n * does not flip by scheme — the scrim, not the page, is the ground. */\nconst previewTag = style({\n  position: \"absolute\",\n  top: \"[10px]\",\n  insetStart: \"[10px]\",\n  zIndex: 1,\n  fontFamily: \"code\",\n  fontSize: \"ui-xs\",\n  fontWeight: \"bold\",\n  letterSpacing: \"0.1em\",\n  color: \"white\",\n  backgroundColor: \"transparent-black-700\",\n  backdropFilter: \"blur(6px)\",\n  borderRadius: \"control\",\n  paddingX: \"[8px]\",\n  paddingY: \"[3px]\",\n  pointerEvents: \"none\",\n});\n\nconst collection = style({\n  display: \"grid\",\n  gridTemplateColumns: \"repeat(3, 1fr)\",\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2,\n    },\n  },\n});\n\nconst collectionImage = style({\n  width: \"full\",\n  aspectRatio: {\n    default: \"square\",\n    \":nth-last-child(4):first-child\": \"3/2\",\n  },\n  gridColumnEnd: {\n    \":nth-last-child(4):first-child\": \"span 3\",\n  },\n  objectFit: \"cover\",\n  pointerEvents: \"none\",\n  userSelect: \"none\",\n});\n\n/* The register draws the asset card as a media card: a fixed 110px cover band with\n * the art cropped to fill it (TerminalGlassLab.tsx, §06), not S2's square\n * letterboxed thumbnail. The height is the same in both card-view layouts because\n * the band is a property of the card, not of the layout that packs it. */\nconst assetImage = style({\n  width: \"full\",\n  height: \"[110px]\",\n  objectFit: \"cover\",\n  pointerEvents: \"none\",\n  userSelect: \"none\",\n});\n\nconst assetIllustrationWrapper = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  backgroundColor: \"gray-100\",\n  height: \"[110px]\",\n});\n\nconst assetIllustration = style({\n  height: \"auto\",\n  maxSize: 160,\n  width: \"50%\",\n});\n\nconst userImage = style({\n  width: \"full\",\n  aspectRatio: \"3/1\",\n  objectFit: \"cover\",\n  pointerEvents: \"none\",\n  userSelect: \"none\",\n});\n\nconst userAvatar = style({\n  position: \"relative\",\n  marginTop: {\n    default: 0,\n    \":is([slot=preview] + *)\": \"calc(var(--size) / -2)\",\n  },\n});\n\nconst productPreviewImage = style({\n  width: \"full\",\n  aspectRatio: \"5/1\",\n  objectFit: \"cover\",\n  pointerEvents: \"none\",\n  userSelect: \"none\",\n});\n\nconst productThumbnail = style({\n  position: \"relative\",\n  pointerEvents: \"none\",\n  userSelect: \"none\",\n  size: {\n    size: {\n      XS: 24,\n      S: 36,\n      M: 40,\n      L: 44,\n      XL: 56,\n    },\n  },\n  borderRadius: {\n    default: \"default\",\n    size: {\n      XS: \"sm\",\n      S: \"sm\",\n    },\n  },\n  objectFit: \"cover\",\n  marginTop: {\n    default: 0,\n    \":is([slot=preview] + *)\": \"calc(self(height) / -2)\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: {\n    default: 2,\n    size: {\n      XS: 1,\n    },\n  },\n  outlineColor: \"--s2-container-bg\",\n});\n\nconst productFooter = style({\n  justifyContent: \"end\",\n});\n\nexport const InternalCardViewContext = createContext({\n  ElementType: \"div\" as \"div\" | typeof HeadlessGridListItem,\n  layout: \"grid\" as \"grid\" | \"waterfall\",\n});\n\nexport const CardContext = createContext<SpectrumContextValue<CardProps>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean;\n  size: CardSize;\n  itemKey?: Key;\n  isSelected: boolean;\n  isHovered: boolean;\n  isFocusVisible: boolean;\n  isPressed: boolean;\n  isCheckboxSelection: boolean;\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: \"M\",\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true,\n});\n\n/* AssetCard previews accept an icon standing in for an illustration (viviana-ui\n * ships no illustration set yet). The square-wrapper treatment must apply ONLY\n * inside the preview slot — providing IconContext at the card level would leak\n * the wrapper into the Content ActionMenu's own icon — so AssetCard raises this\n * flag and CardPreview scopes the provider to its children. */\nconst InternalAssetPreviewContext = createContext(false);\n\nconst actionButtonSize = {\n  XS: \"XS\",\n  S: \"XS\",\n  M: \"S\",\n  L: \"M\",\n  XL: \"L\",\n} as const;\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80,\n} as const;\n\nconst buttonSize = {\n  XS: \"S\",\n  S: \"S\",\n  M: \"M\",\n  L: \"L\",\n  XL: \"XL\",\n} as const;\n\nfunction renderCardChildren(\n  children: CardProps[\"children\"],\n  renderProps: CardRenderProps,\n): JSX.Element {\n  return evaluateRenderChildren(children, renderProps);\n}\n\nfunction CardProviders(props: {\n  size: CardSize;\n  layout: \"grid\" | \"waterfall\";\n  isSkeleton: Accessor<boolean>;\n  children: JSX.Element;\n}): JSX.Element {\n  return (\n    <ImageContext value={{ alt: \"\", styles: image({ layout: props.layout }) }}>\n      <TextContext\n        value={{\n          slots: {\n            default: {},\n            title: { styles: title({ size: props.size }) },\n            description: { styles: description({ size: props.size }) },\n          },\n        }}\n      >\n        <ContentContext value={{ styles: content({ size: props.size }) }}>\n          <DividerContext value={{ size: \"S\" }}>\n            <FooterContext value={{ styles: footer }}>\n              <ActionMenuContext\n                value={{\n                  isQuiet: true,\n                  size: actionButtonSize[props.size],\n                  isDisabled: props.isSkeleton(),\n                  \"data-slot\": \"menu\",\n                  styles: actionMenu,\n                }}\n              >\n                <SkeletonContext value={props.isSkeleton}>\n                  <ImageCoordinator>{props.children}</ImageCoordinator>\n                </SkeletonContext>\n              </ActionMenuContext>\n            </FooterContext>\n          </DividerContext>\n        </ContentContext>\n      </TextContext>\n    </ImageContext>\n  );\n}\n\nfunction SelectionIndicator(): JSX.Element {\n  const context = useContext(InternalCardContext);\n  return (\n    <div\n      class={selectionIndicator({\n        size: context.size,\n        isSelected: context.isSelected,\n        isStrokeInner: context.isQuiet && !context.isCheckboxSelection,\n      })}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction CardCheckbox(): JSX.Element {\n  const context = useContext(InternalCardContext);\n\n  if (context.itemKey == null) {\n    return null as unknown as JSX.Element;\n  }\n\n  return (\n    <div\n      class={cardCheckboxContainer}\n      onClick={(event) => event.stopPropagation()}\n      onKeyDown={(event) => event.stopPropagation()}\n    >\n      <GridListSelectionCheckbox\n        itemKey={context.itemKey}\n        class={cardCheckboxInput({ size: context.size })}\n        excludeFromTabOrder\n      />\n    </div>\n  );\n}\n\nfunction cardClassName(\n  local: Pick<CardProps, \"UNSAFE_className\" | \"class\" | \"styles\">,\n  renderProps: Partial<GridListItemRenderProps | LinkRenderProps> & {\n    size: CardSize;\n    density: CardDensity;\n    variant: CardVariant;\n    isCardView?: boolean;\n    isLink?: boolean;\n    mesh?: CardMeshVariant;\n    hasMesh?: boolean;\n  },\n): string {\n  return [\n    renderProps.hasMesh === true ? meshField : undefined,\n    local.UNSAFE_className,\n    local.class,\n    card(renderProps, local.styles),\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction toInternalCardContext(input: {\n  size: CardSize;\n  itemKey?: Key;\n  isQuiet: boolean;\n  isSelected?: boolean;\n  isHovered?: boolean;\n  isFocusVisible?: boolean;\n  isPressed?: boolean;\n  isCheckboxSelection?: boolean;\n}): InternalCardContextValue {\n  return {\n    size: input.size,\n    itemKey: input.itemKey,\n    isQuiet: input.isQuiet,\n    isSelected: input.isSelected ?? false,\n    isHovered: input.isHovered ?? false,\n    isFocusVisible: input.isFocusVisible ?? false,\n    isPressed: input.isPressed ?? false,\n    isCheckboxSelection: input.isCheckboxSelection ?? false,\n  };\n}\n\n/**\n * A Card summarizes an object that a user can select or navigate to.\n */\nexport function Card(props: CardProps): JSX.Element {\n  const outerFocusableContext = useContext(FocusableContext);\n  const providerProps = useProviderProps(props);\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useContext(CardContext), props.slot);\n  const merged = mergeProps(\n    { size: \"M\" as CardSize, density: \"regular\" as CardDensity, variant: \"primary\" as CardVariant },\n    flags,\n    contextProps ?? {},\n    props,\n  ) as CardProps;\n  const [local, otherProps] = splitProps(merged, [\n    \"children\",\n    \"size\",\n    \"density\",\n    \"variant\",\n    \"mesh\",\n    \"meshSeed\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"textValue\",\n    \"href\",\n    \"download\",\n    \"target\",\n    \"rel\",\n    \"slot\",\n    \"ref\",\n    \"isDisabled\",\n  ]);\n  const { ElementType, layout } = useContext(InternalCardViewContext);\n  const isSkeleton = useIsSkeleton();\n  const inertRef = useInertAttribute(isSkeleton);\n  let rootElement: HTMLElement | undefined;\n  const assignRootRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLElement> } | null)?.ref,\n    props.ref,\n    inertRef,\n    (element: HTMLElement) => {\n      rootElement = element;\n    },\n  );\n  const size = () => local.size ?? \"M\";\n  const density = () => local.density ?? \"regular\";\n  const variant = () => local.variant ?? \"primary\";\n  const isQuiet = () => variant() === \"quiet\";\n  const itemKey = () => local.id as Key | undefined;\n  /* The weave is a seeded runtime data URI with per-scheme hues, so neither the\n   * style macro (build-time classes) nor light-dark() (colors only) can carry\n   * it. It rides the same space-toggle atoms every compiled color already\n   * flips on — `initial` fires a slot's var() fallback, `\" \"` suppresses it —\n   * which setColorScheme() maintains on every Provider root. */\n  const meshBackground = createMemo(() => {\n    const mesh = local.mesh;\n    if (mesh == null || variant() === \"tertiary\" || variant() === \"quiet\") {\n      return undefined;\n    }\n    const light = meshStrip({ dark: false, variant: mesh, seed: local.meshSeed });\n    const dark = meshStrip({ dark: true, variant: mesh, seed: local.meshSeed });\n    return `var(--lightningcss-light, ${light}) var(--lightningcss-dark, ${dark})`;\n  });\n  const meshVariant = () => (meshBackground() != null ? local.mesh : undefined);\n  /* The spotlight paints a brighter copy of the same weave, so it has to be the\n   * same seeded string boosted — a second, unrelated weave would shear against\n   * the resting one under the cursor. Both ride the space-toggle atoms, like\n   * meshBackground(), and both are deterministic so SSR and hydration agree. */\n  const meshSpotlight = createMemo(() => {\n    const mesh = meshVariant();\n    if (mesh == null) return undefined;\n    const options = { variant: mesh, seed: local.meshSeed, boost: 2.4 } as const;\n    const light = meshStrip({ dark: false, ...options });\n    const dark = meshStrip({ dark: true, ...options });\n    return `var(--lightningcss-light, ${light}) var(--lightningcss-dark, ${dark})`;\n  });\n  const rootStyle = () => {\n    const backgroundImage = meshBackground();\n    return backgroundImage == null\n      ? local.UNSAFE_style\n      : {\n          \"background-image\": backgroundImage,\n          \"--gl-weave\": meshSpotlight(),\n          \"--gl-grain\": GRAIN,\n          ...local.UNSAFE_style,\n        };\n  };\n  createMeshField(\n    () => rootElement,\n    () => meshVariant() != null,\n  );\n  const children = () => (\n    <CardProviders size={size()} layout={layout} isSkeleton={isSkeleton}>\n      {renderCardChildren(local.children, {\n        get size() {\n          return size();\n        },\n      })}\n    </CardProviders>\n  );\n  const press = () => pressScale(() => rootElement, rootStyle());\n  // Same once-per-card build as solid-spectrum. This file is diverged (mesh,\n  // root style); the hover render prop must still return one element.\n  // Capture a stable child scope before deferred SSR children leave their For row.\n  const cardScope = createRoot((dispose) => ({ owner: getOwner(), dispose }));\n  onCleanup(cardScope.dispose);\n  // The grid/link callback runs inside the item render computation. These\n  // signals mirror that snapshot for children; ownedWrite is the supported\n  // opt-in for a write that has to happen there.\n  const [hovered, setHovered] = createSignal(false, { ownedWrite: true });\n  const [pressed, setPressed] = createSignal(false, { ownedWrite: true });\n  const [focusVisible, setFocusVisible] = createSignal(false, { ownedWrite: true });\n  const [selected, setSelected] = createSignal(false, { ownedWrite: true });\n  const [checkboxSelection, setCheckboxSelection] = createSignal(false, { ownedWrite: true });\n  const interactionContext: InternalCardContextValue = {\n    get isQuiet() {\n      return isQuiet();\n    },\n    get size() {\n      return size();\n    },\n    get itemKey() {\n      return itemKey();\n    },\n    get isSelected() {\n      return selected();\n    },\n    get isHovered() {\n      return hovered();\n    },\n    get isFocusVisible() {\n      return focusVisible();\n    },\n    get isPressed() {\n      return pressed();\n    },\n    get isCheckboxSelection() {\n      return checkboxSelection();\n    },\n  };\n  const applyInteraction = (renderProps: {\n    isHovered: boolean;\n    isPressed: boolean;\n    isFocusVisible: boolean;\n    isSelected?: boolean;\n    selectionMode?: string;\n    selectionBehavior?: string;\n  }) => {\n    setHovered(renderProps.isHovered);\n    setPressed(renderProps.isPressed);\n    setFocusVisible(renderProps.isFocusVisible);\n    setSelected(renderProps.isSelected ?? false);\n    setCheckboxSelection(\n      renderProps.selectionMode !== \"none\" && renderProps.selectionBehavior === \"toggle\",\n    );\n  };\n  const mountOnce = (build: () => JSX.Element): JSX.Element =>\n    cardScope.owner ? runWithOwner(cardScope.owner, build) : build();\n  let linkSurface: JSX.Element | undefined;\n  let linkBuilt = false;\n  let gridSurface: JSX.Element | undefined;\n  let gridBuilt = false;\n\n  // Keep the caller fallback out of disabled links; outer context retains precedence.\n  const linkFocusableContext = mergeProps(\n    {\n      get tabIndex() {\n        return local.isDisabled ? undefined : otherProps.tabindex;\n      },\n    },\n    outerFocusableContext ?? {},\n  );\n  if (ElementType === \"div\" && !isSkeleton() && local.href) {\n    return (\n      <FocusableContext value={linkFocusableContext}>\n        <HeadlessLink\n          {...filterDOMProps(otherProps as Record<string, unknown>, { global: true })}\n          href={local.href}\n          download={local.download}\n          target={local.target}\n          rel={local.rel}\n          isDisabled={local.isDisabled}\n          ref={(element: HTMLElement) => assignRootRef(element)}\n          class={(renderProps) =>\n            cardClassName(local, {\n              ...renderProps,\n              size: size(),\n              density: density(),\n              variant: variant(),\n              isCardView: false,\n              isLink: true,\n              mesh: meshVariant(),\n              hasMesh: meshVariant() != null,\n            })\n          }\n          style={(renderProps) => (isQuiet() ? (local.UNSAFE_style ?? {}) : press()(renderProps))}\n          data-size={size()}\n          data-density={density()}\n          data-variant={variant()}\n          data-mesh={meshVariant()}\n        >\n          {(renderProps: LinkRenderProps) => {\n            if (!isServer) applyInteraction(renderProps);\n            if (!linkBuilt) {\n              linkBuilt = true;\n              linkSurface = mountOnce(() => (\n                <InternalCardContext value={interactionContext}>{children()}</InternalCardContext>\n              ));\n            }\n            return linkSurface;\n          }}\n        </HeadlessLink>\n      </FocusableContext>\n    );\n  }\n\n  if (ElementType === \"div\" || isSkeleton()) {\n    return (\n      <div\n        {...filterDOMProps(otherProps as Record<string, unknown>, { global: true })}\n        tabindex={otherProps.tabindex}\n        id={local.id != null ? String(local.id) : undefined}\n        ref={(element) => assignRootRef(element)}\n        class={cardClassName(local, {\n          size: size(),\n          density: density(),\n          variant: variant(),\n          isCardView: ElementType !== \"div\",\n          mesh: meshVariant(),\n          hasMesh: meshVariant() != null,\n        })}\n        style={rootStyle()}\n        data-size={size()}\n        data-density={density()}\n        data-variant={variant()}\n        data-mesh={meshVariant()}\n      >\n        <InternalCardContext\n          value={toInternalCardContext({\n            size: size(),\n            itemKey: itemKey(),\n            isQuiet: isQuiet(),\n          })}\n        >\n          {children()}\n        </InternalCardContext>\n      </div>\n    );\n  }\n\n  return (\n    <HeadlessGridListItem\n      {...otherProps}\n      id={local.id}\n      textValue={local.textValue}\n      ref={(element: HTMLElement) => assignRootRef(element)}\n      class={(renderProps) =>\n        cardClassName(local, {\n          ...renderProps,\n          size: size(),\n          density: density(),\n          variant: variant(),\n          isCardView: true,\n          isLink: !!local.href,\n          mesh: meshVariant(),\n          hasMesh: meshVariant() != null,\n        })\n      }\n      style={(renderProps) => (isQuiet() ? (local.UNSAFE_style ?? {}) : press()(renderProps))}\n      data-size={size()}\n      data-density={density()}\n      data-variant={variant()}\n      data-mesh={meshVariant()}\n    >\n      {(renderProps: GridListItemRenderProps) => {\n        applyInteraction(renderProps);\n        if (!gridBuilt) {\n          gridBuilt = true;\n          gridSurface = mountOnce(() => (\n            <InternalCardContext value={interactionContext}>\n              <Show when={!isQuiet()}>\n                <SelectionIndicator />\n              </Show>\n              <Show when={!isQuiet() && checkboxSelection()}>\n                <CardCheckbox />\n              </Show>\n              <div class={displayContents}>{children()}</div>\n            </InternalCardContext>\n          ));\n        }\n        return gridSurface;\n      }}\n    </HeadlessGridListItem>\n  );\n}\n\nexport function CardPreview(props: CardPreviewProps): JSX.Element {\n  const context = useContext(InternalCardContext);\n  const isAssetPreview = useContext(InternalAssetPreviewContext);\n  const [local, domProps] = splitProps(props, [\n    \"children\",\n    \"background\",\n    \"tag\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"ref\",\n  ]);\n  let previewElement: HTMLDivElement | undefined;\n  const assignPreviewRef = mergeContextRefs(props.ref, (element: HTMLDivElement) => {\n    previewElement = element;\n  });\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      preview(\n        {\n          size: context.size,\n          isQuiet: context.isQuiet,\n          isHovered: context.isHovered,\n          isFocusVisible: context.isFocusVisible,\n          isSelected: context.isSelected,\n          background: local.background,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <div\n      {...filterDOMProps(domProps as Record<string, unknown>, { global: true })}\n      slot=\"preview\"\n      ref={(element) => assignPreviewRef(element)}\n      class={className()}\n      style={\n        context.isQuiet\n          ? pressScale(() => previewElement, local.UNSAFE_style)({ isPressed: context.isPressed })\n          : local.UNSAFE_style\n      }\n    >\n      {context.isQuiet && <SelectionIndicator />}\n      {context.isQuiet && context.isCheckboxSelection && <CardCheckbox />}\n      <Show when={local.tag}>{(tag) => <div class={previewTag}>{tag()}</div>}</Show>\n      <div class={previewClip}>\n        {isAssetPreview ? (\n          <IconContext\n            value={{\n              render: (icon) => (\n                <SkeletonWrapper>\n                  <div class={assetIllustrationWrapper}>{icon}</div>\n                </SkeletonWrapper>\n              ),\n              styles: assetIllustration,\n            }}\n          >\n            {local.children}\n          </IconContext>\n        ) : (\n          local.children\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function CollectionCardPreview(props: CardPreviewProps): JSX.Element {\n  const context = useContext(InternalCardContext);\n  return (\n    <CardPreview {...props}>\n      <div class={collection({ size: context.size })}>\n        {/* `collectionImage` takes no size condition, so the macro bakes it to a class string,\n            not a selector function — passing `size` here threw at render. Inherited from the\n            port; unnoticed because nothing rendered a collection preview until now. */}\n        <ImageContext value={{ styles: collectionImage }}>{props.children}</ImageContext>\n      </div>\n    </CardPreview>\n  );\n}\n\nexport function AssetCard(props: AssetCardProps): JSX.Element {\n  return (\n    <Card {...props} density=\"regular\">\n      {(renderProps) => (\n        /* `assetImage` no longer takes a `layout` condition — the register's cover band\n           is one height in both card-view layouts — so the macro bakes it to a class\n           string rather than a selector function, and calling it would throw. Same trap\n           `collectionImage` documents a few components up. */\n        <ImageContext value={{ alt: \"\", styles: assetImage }}>\n          <IllustrationContext\n            value={{\n              render: (icon) => (\n                <SkeletonWrapper>\n                  <div class={assetIllustrationWrapper}>{icon}</div>\n                </SkeletonWrapper>\n              ),\n              styles: assetIllustration,\n            }}\n          >\n            <InternalAssetPreviewContext value={true}>\n              {renderCardChildren(props.children, renderProps)}\n            </InternalAssetPreviewContext>\n          </IllustrationContext>\n        </ImageContext>\n      )}\n    </Card>\n  );\n}\n\nexport function UserCard(props: UserCardProps): JSX.Element {\n  return (\n    <Card {...props} density=\"spacious\">\n      {(renderProps) => (\n        <ImageContext value={{ alt: \"\", styles: userImage }}>\n          <AvatarContext\n            value={{\n              size: avatarSize[renderProps.size],\n              UNSAFE_style: {\n                \"--size\": `${avatarSize[renderProps.size] / 16}rem`,\n              },\n              styles: userAvatar,\n              isOverBackground: true,\n            }}\n          >\n            {renderCardChildren(props.children, renderProps)}\n          </AvatarContext>\n        </ImageContext>\n      )}\n    </Card>\n  );\n}\n\nexport function ProductCard(props: ProductCardProps): JSX.Element {\n  return (\n    <Card {...props} density=\"spacious\">\n      {(renderProps) => (\n        <ImageContext\n          value={{\n            slots: {\n              preview: {\n                alt: \"\",\n                styles: productPreviewImage,\n              },\n              thumbnail: {\n                alt: \"\",\n                styles: productThumbnail({ size: renderProps.size }),\n              },\n            },\n          }}\n        >\n          <FooterContext value={{ styles: mergeStyles(footer, productFooter) }}>\n            <ButtonContext value={{ size: buttonSize[renderProps.size] }}>\n              <LinkButtonContext value={{ size: buttonSize[renderProps.size] }}>\n                {renderCardChildren(props.children, renderProps)}\n              </LinkButtonContext>\n            </ButtonContext>\n          </FooterContext>\n        </ImageContext>\n      )}\n    </Card>\n  );\n}\n\nexport { Image };\n"],"mappings":"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"}