@epilot/zenith-react 0.2.0-next.6 → 0.2.0

package/dist/components/avatar/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Avatar,\n  AvatarGroupContext,\n  type AvatarColor,\n  type AvatarSize,\n} from \"./avatar\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  item: {\n    position: \"relative\",\n    marginLeft: \"-0.5rem\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":first-child\": { marginLeft: \"0\" },\n  },\n  itemBeforeActive: {\n    transform: \"translateX(-0.75rem)\",\n  },\n  itemAfterActive: {\n    transform: \"translateX(0.75rem)\",\n  },\n  itemActive: {\n    zIndex: 10,\n  },\n  overflow: {\n    ...boxModel,\n    position: \"relative\",\n    zIndex: 0,\n    ...shorthands.border(\"0\", \"solid\", \"transparent\"),\n    cursor: \"pointer\",\n  },\n  overflowPanel: {\n    ...boxModel,\n    position: \"absolute\",\n    top: \"100%\",\n    left: \"0\",\n    zIndex: 20,\n    width: \"max-content\",\n    maxWidth: \"20rem\",\n    padding: tokens.spacingElement2,\n    backgroundColor: tokens.body,\n    borderRadius: tokens.radiusMd,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  overflowList: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: tokens.spacingElement1,\n  },\n  overflowItem: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement2,\n  },\n  overflowName: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AvatarGroupProps = Omit<React.ComponentProps<\"div\">, \"color\"> & {\n  max?: number\n  size?: AvatarSize\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ max, size, className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n    const visible = typeof max === \"number\" ? items.slice(0, max) : items\n    const overflow = items.length - visible.length\n    const [active, setActive] = React.useState<number | null>(null)\n    const [open, setOpen] = React.useState(false)\n\n    return (\n      <AvatarGroupContext.Provider value={{ size }}>\n        <div\n          ref={ref}\n          data-slot=\"avatar-group\"\n          {...{ [SLOT_ATTR]: \"avatar-group\" }}\n          className={mergeClasses(styles.root, className)}\n          {...props}\n        >\n          {visible.map((child, index) => (\n            <div\n              key={index}\n              data-slot=\"avatar-group-item\"\n              {...{ [SLOT_ATTR]: \"avatar-group-item\" }}\n              onPointerEnter={() => setActive(index)}\n              onPointerLeave={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              onFocus={() => setActive(index)}\n              onBlur={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              className={mergeClasses(\n                styles.item,\n                active !== null && index < active && styles.itemBeforeActive,\n                active !== null && index > active && styles.itemAfterActive,\n                active === index && styles.itemActive\n              )}\n            >\n              {child}\n            </div>\n          ))}\n          {overflow > 0 && (\n            <div\n              data-slot=\"avatar-group-overflow-wrapper\"\n              {...{ [SLOT_ATTR]: \"avatar-group-overflow-wrapper\" }}\n              className={styles.item}\n            >\n              <Avatar\n                size={size}\n                color={\"gray\" as AvatarColor}\n                initials={`+${overflow}`}\n                aria-label={`${overflow} more`}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => setOpen((current) => !current)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault()\n                    setOpen((current) => !current)\n                  }\n                }}\n                className={styles.overflow}\n              />\n              {open && (\n                <div\n                  data-slot=\"avatar-group-overflow\"\n                  {...{ [SLOT_ATTR]: \"avatar-group-overflow\" }}\n                  className={styles.overflowPanel}\n                >\n                  <ul className={styles.overflowList}>\n                    {items.map((item, index) => (\n                      <li key={index} className={styles.overflowItem}>\n                        {item}\n                        {React.isValidElement<{ alt?: string }>(item) &&\n                          item.props.alt && (\n                            <span className={styles.overflowName}>\n                              {item.props.alt}\n                            </span>\n                          )}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </AvatarGroupContext.Provider>\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement2","tokens.body","tokens.radiusMd","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.grayA11","AvatarGroup","React","max","size","className","children","props","ref","styles","items","visible","overflow","active","setActive","open","setOpen","AvatarGroupContext","jsxs","SLOT_ATTR","mergeClasses","child","index","jsx","current","Avatar","event","item"],"mappings":"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"}
+{"version":3,"file":"avatar-group.js","sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Avatar,\n  AvatarGroupContext,\n  type AvatarColor,\n  type AvatarSize,\n} from \"./avatar\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  item: {\n    position: \"relative\",\n    marginLeft: \"-0.5rem\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":first-child\": { marginLeft: \"0\" },\n  },\n  itemBeforeActive: {\n    transform: \"translateX(-0.75rem)\",\n  },\n  itemAfterActive: {\n    transform: \"translateX(0.75rem)\",\n  },\n  itemActive: {\n    zIndex: 10,\n  },\n  overflow: {\n    ...boxModel,\n    position: \"relative\",\n    zIndex: 0,\n    ...shorthands.border(\"0\", \"solid\", \"transparent\"),\n    cursor: \"pointer\",\n  },\n  overflowPanel: {\n    ...boxModel,\n    position: \"absolute\",\n    top: \"100%\",\n    left: \"0\",\n    zIndex: 20,\n    width: \"max-content\",\n    maxWidth: \"20rem\",\n    padding: tokens.spacingElement2,\n    backgroundColor: tokens.body,\n    borderRadius: tokens.radiusMd,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  overflowList: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: tokens.spacingElement1,\n  },\n  overflowItem: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement2,\n  },\n  overflowName: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AvatarGroupProps = Omit<React.ComponentProps<\"div\">, \"color\"> & {\n  max?: number\n  size?: AvatarSize\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ max, size, className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n    const visible = typeof max === \"number\" ? items.slice(0, max) : items\n    const overflow = items.length - visible.length\n    const [active, setActive] = React.useState<number | null>(null)\n    const [open, setOpen] = React.useState(false)\n\n    return (\n      <AvatarGroupContext.Provider value={{ size }}>\n        <div\n          ref={ref}\n          data-slot=\"avatar-group\"\n          {...{ [SLOT_ATTR]: \"avatar-group\" }}\n          className={mergeClasses(styles.root, className)}\n          {...props}\n        >\n          {visible.map((child, index) => (\n            <div\n              key={index}\n              data-slot=\"avatar-group-item\"\n              {...{ [SLOT_ATTR]: \"avatar-group-item\" }}\n              onPointerEnter={() => setActive(index)}\n              onPointerLeave={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              onFocus={() => setActive(index)}\n              onBlur={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              className={mergeClasses(\n                styles.item,\n                active !== null && index < active && styles.itemBeforeActive,\n                active !== null && index > active && styles.itemAfterActive,\n                active === index && styles.itemActive\n              )}\n            >\n              {child}\n            </div>\n          ))}\n          {overflow > 0 && (\n            <div\n              data-slot=\"avatar-group-overflow-wrapper\"\n              {...{ [SLOT_ATTR]: \"avatar-group-overflow-wrapper\" }}\n              className={styles.item}\n            >\n              <Avatar\n                size={size}\n                color={\"gray\" as AvatarColor}\n                initials={`+${overflow}`}\n                aria-label={`${overflow} more`}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => setOpen((current) => !current)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault()\n                    setOpen((current) => !current)\n                  }\n                }}\n                className={styles.overflow}\n              />\n              {open && (\n                <div\n                  data-slot=\"avatar-group-overflow\"\n                  {...{ [SLOT_ATTR]: \"avatar-group-overflow\" }}\n                  className={styles.overflowPanel}\n                >\n                  <ul className={styles.overflowList}>\n                    {items.map((item, index) => (\n                      <li key={index} className={styles.overflowItem}>\n                        {item}\n                        {React.isValidElement<{ alt?: string }>(item) &&\n                          item.props.alt && (\n                            <span className={styles.overflowName}>\n                              {item.props.alt}\n                            </span>\n                          )}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </AvatarGroupContext.Provider>\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement2","tokens.body","tokens.radiusMd","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.grayA11","AvatarGroup","React","max","size","className","children","props","ref","styles","items","visible","overflow","active","setActive","open","setOpen","AvatarGroupContext","jsxs","SLOT_ATTR","mergeClasses","child","index","jsx","current","Avatar","event","item"],"mappings":"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"}

package/dist/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import { jsxs as A, jsx as u } from "react/jsx-runtime";
 import * as d from "react";
 import { Avatar as i } from "../../_virtual/_zenith-runtime-family_avatar.js";
-import { SLOT_ATTR as l, mergeClasses as y } from "@epilot/zenith-runtime/v1/core.js";
+import { SLOT_ATTR as l, mergeClasses as y } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as x } from "../../styles/make-styles.js";
 import { boxModel as a } from "../../styles/host-reset.js";
 import { useZenithPaletteTokensFor as C } from "../../tokens/use-palette-tokens.js";

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    ...boxModel,\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    ...boxModel,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    ...boxModel,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentPropsWithoutRef<\"span\"> & React.RefAttributes<HTMLSpanElement>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  /**\n   * @deprecated Has no effect. The root's only children are the image and its fallback, so on\n   * Radix this tried to turn one of them into the avatar. Remove it.\n   */\n  asChild?: boolean\n  src?: string\n  /** Accessible name for the image, and the seed for the automatic colour. */\n  alt?: string\n  /** Shown when no `src` loads. Also seeds the automatic colour when `alt` is absent. */\n  initials?: string\n  /**\n   * Leave this unset and the colour is derived by hashing `alt`, falling back to\n   * `initials` — so the same person keeps the same colour everywhere, and two\n   * people rarely collide. Set it only to override that.\n   */\n  color?: AvatarColor\n  /** @default \"base\" */\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(\n    {\n      className,\n      src,\n      alt,\n      initials,\n      color,\n      size,\n      style,\n      asChild: _asChild,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const group = React.useContext(AvatarGroupContext)\n    const resolvedSize = size ?? group?.size ?? \"base\"\n    const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n    // Was a module-scope call, so merely IMPORTING Avatar installed 63 kB of palette CSS whether one\n    // ever rendered. Now it is per-instance and keyed on the resolved family, installed at commit\n    // time (WP2B2) via a hook called unconditionally every render. Every auto colour is decorative,\n    // so a seeded avatar still installs the sheet; an explicit `color=\"gray\"` no longer does, and\n    // neither does an import that never renders.\n    useZenithPaletteTokensFor(resolvedColor)\n\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        {...{ [SLOT_ATTR]: \"avatar\" }}\n        className={mergeClasses(styles.root, styles[resolvedSize], className)}\n        style={{ ...colorVars[resolvedColor], ...style }}\n        {...props}\n      >\n        <AvatarPrimitive.Image\n          data-slot=\"avatar-image\"\n          {...{ [SLOT_ATTR]: \"avatar-image\" }}\n          src={src}\n          alt={alt}\n          className={styles.image}\n        />\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n          className={styles.fallback}\n          aria-hidden=\"true\"\n        >\n          {initials}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  }\n)\n\nexport { AvatarGroupContext }\n"],"names":["AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeZenithStyles","boxModel","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","_asChild","props","ref","styles","group","resolvedSize","resolvedColor","useZenithPaletteTokensFor","jsxs","AvatarPrimitive","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    ...boxModel,\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    ...boxModel,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    ...boxModel,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentPropsWithoutRef<\"span\"> & React.RefAttributes<HTMLSpanElement>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  /**\n   * @deprecated Has no effect. The root's only children are the image and its fallback, so on\n   * Radix this tried to turn one of them into the avatar. Remove it.\n   */\n  asChild?: boolean\n  src?: string\n  /** Accessible name for the image, and the seed for the automatic colour. */\n  alt?: string\n  /** Shown when no `src` loads. Also seeds the automatic colour when `alt` is absent. */\n  initials?: string\n  /**\n   * Leave this unset and the colour is derived by hashing `alt`, falling back to\n   * `initials` — so the same person keeps the same colour everywhere, and two\n   * people rarely collide. Set it only to override that.\n   */\n  color?: AvatarColor\n  /** @default \"base\" */\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(\n    {\n      className,\n      src,\n      alt,\n      initials,\n      color,\n      size,\n      style,\n      asChild: _asChild,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const group = React.useContext(AvatarGroupContext)\n    const resolvedSize = size ?? group?.size ?? \"base\"\n    const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n    // Was a module-scope call, so merely IMPORTING Avatar installed 63 kB of palette CSS whether one\n    // ever rendered. Now it is per-instance and keyed on the resolved family, installed at commit\n    // time (WP2B2) via a hook called unconditionally every render. Every auto colour is decorative,\n    // so a seeded avatar still installs the sheet; an explicit `color=\"gray\"` no longer does, and\n    // neither does an import that never renders.\n    useZenithPaletteTokensFor(resolvedColor)\n\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        {...{ [SLOT_ATTR]: \"avatar\" }}\n        className={mergeClasses(styles.root, styles[resolvedSize], className)}\n        style={{ ...colorVars[resolvedColor], ...style }}\n        {...props}\n      >\n        <AvatarPrimitive.Image\n          data-slot=\"avatar-image\"\n          {...{ [SLOT_ATTR]: \"avatar-image\" }}\n          src={src}\n          alt={alt}\n          className={styles.image}\n        />\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n          className={styles.fallback}\n          aria-hidden=\"true\"\n        >\n          {initials}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  }\n)\n\nexport { AvatarGroupContext }\n"],"names":["AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeZenithStyles","boxModel","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","_asChild","props","ref","styles","group","resolvedSize","resolvedColor","useZenithPaletteTokensFor","jsxs","AvatarPrimitive","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}

package/dist/components/badge/badge.js

@@ -1,6 +1,6 @@
 import { jsx as b } from "react/jsx-runtime";
 import * as S from "react";
-import { mergeClasses as y, SLOT_ATTR as v, shorthands as x } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as y, SLOT_ATTR as v, shorthands as x } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as w } from "../../styles/make-styles.js";
 import { boxModel as o } from "../../styles/host-reset.js";
 import { radiusMd as $, spacingElement3 as z, spacingElement1 as i, textBase as C, radiusSm as R, spacingElement2 as O, textSm as T, textXs as k, errorA8 as A, accentA8 as B, fontWeightNormal as N } from "../../tokens/index.js";

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${step})`\n}\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    ...boxModel,\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    ...boxModel,\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...boxModel,\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\n  ) {\n    // A decorative family can still arrive from an expression the build cannot see, so this has to\n    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useZenithPaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","boxModel","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${step})`\n}\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    ...boxModel,\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    ...boxModel,\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...boxModel,\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\n  ) {\n    // A decorative family can still arrive from an expression the build cannot see, so this has to\n    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useZenithPaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","boxModel","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as W } from "react/jsx-runtime";
 import * as i from "react";
-import { mergeClasses as p, SLOT_ATTR as s, shorthands as l } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as p, SLOT_ATTR as s, shorthands as l } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as w } from "../../styles/make-styles.js";
 import { boxModel as k } from "../../styles/host-reset.js";
 import { grayDefault as v, fontWeightSemibold as S, accentA8 as A, grayLight as C, leadingBase as L, textBase as D, spacingElement1 as I, spacingElement2 as R } from "../../tokens/index.js";

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/** Breadcrumb — Card's compound pattern applied to the nav / ol / li structure. */\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this), which `React.Children.only` rejects. Radix's Slot normalised that.\nfunction onlyChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children)\n  return (elements.length === 1 ? elements[0] : children) as React.ReactElement\n}\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n  /**\n   * Accessible name of the navigation landmark, read by screen readers. Pass a translated string\n   * for any locale other than English. Defaults to \"Breadcrumb\".\n   */\n  \"aria-label\"?: string\n}\n\nconst useStyles = makeZenithStyles({\n  // A truncating crumb can only shrink if every box above it may shrink below its content too. The\n  // nav is the box a flex row (a view header) actually sizes, so it carries the rule; plain trails\n  // keep their content size.\n  root: {\n    [`&:has([${SLOT_ATTR}=\"breadcrumb-item\"][data-truncate])`]: {\n      minWidth: 0,\n    },\n  },\n  list: {\n    ...boxModel,\n    // A layout row, not a numbered list: reset the browser's markers and indent so the trail does\n    // not depend on the host shipping a CSS reset.\n    listStyleType: \"none\",\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    minWidth: 0,\n  },\n  separator: {\n    color: tokens.grayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  itemTruncate: {\n    ...boxModel,\n    minWidth: 0,\n  },\n  truncate: {\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  link: {\n    // A browser underlines a bare `<a>`; the underline is a hover affordance here.\n    textDecorationLine: \"none\",\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.grayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      separator = \"/\",\n      \"aria-label\": ariaLabel = \"Breadcrumb\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label={ariaLabel}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. The child must be one real element, not a Fragment.\n   */\n  asChild?: boolean\n  /**\n   * Keep the crumb on one line and cut it with an ellipsis when the trail runs out of room, with\n   * the full text as its `title`. Pass `title` yourself when the children are not plain text.\n   */\n  truncate?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  {\n    href,\n    isCurrent = false,\n    className,\n    children,\n    asChild = false,\n    truncate = false,\n    title,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const truncateClass = truncate ? styles.truncate : undefined\n  const fullText =\n    title ??\n    (truncate && (typeof children === \"string\" || typeof children === \"number\")\n      ? String(children)\n      : undefined)\n\n  const linkProps = {\n    \"data-slot\": \"breadcrumb-link\",\n    [SLOT_ATTR]: \"breadcrumb-link\",\n    ...(href ? { href } : {}),\n    ...(fullText !== undefined ? { title: fullText } : {}),\n    ...(isCurrent ? { \"aria-current\": \"page\" as const } : {}),\n    ...props,\n  }\n  const linkClassName = mergeClasses(styles.link, truncateClass, className)\n\n  const content = asChild ? (\n    <ComposeAsChild {...linkProps} className={linkClassName}>\n      {onlyChild(children)}\n    </ComposeAsChild>\n  ) : isLink ? (\n    <a {...linkProps} className={linkClassName}>\n      {children}\n    </a>\n  ) : (\n    <span\n      data-slot=\"breadcrumb-page\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n      className={mergeClasses(styles.page, truncateClass, className)}\n      {...(fullText !== undefined ? { title: fullText } : {})}\n      {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n    >\n      {children}\n    </span>\n  )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      {...(truncate ? { \"data-truncate\": \"\" } : {})}\n      className={mergeClasses(styles.item, truncate && styles.itemTruncate)}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["onlyChild","children","elements","React","useStyles","makeZenithStyles","SLOT_ATTR","boxModel","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.grayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.grayDefault","tokens.accentA8","Breadcrumb","separator","ariaLabel","className","props","ref","styles","items","jsx","mergeClasses","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","truncate","title","isLink","truncateClass","fullText","linkProps","linkClassName","content","ComposeAsChild"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/** Breadcrumb — Card's compound pattern applied to the nav / ol / li structure. */\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this), which `React.Children.only` rejects. Radix's Slot normalised that.\nfunction onlyChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children)\n  return (elements.length === 1 ? elements[0] : children) as React.ReactElement\n}\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n  /**\n   * Accessible name of the navigation landmark, read by screen readers. Pass a translated string\n   * for any locale other than English. Defaults to \"Breadcrumb\".\n   */\n  \"aria-label\"?: string\n}\n\nconst useStyles = makeZenithStyles({\n  // A truncating crumb can only shrink if every box above it may shrink below its content too. The\n  // nav is the box a flex row (a view header) actually sizes, so it carries the rule; plain trails\n  // keep their content size.\n  root: {\n    [`&:has([${SLOT_ATTR}=\"breadcrumb-item\"][data-truncate])`]: {\n      minWidth: 0,\n    },\n  },\n  list: {\n    ...boxModel,\n    // A layout row, not a numbered list: reset the browser's markers and indent so the trail does\n    // not depend on the host shipping a CSS reset.\n    listStyleType: \"none\",\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    minWidth: 0,\n  },\n  separator: {\n    color: tokens.grayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  itemTruncate: {\n    ...boxModel,\n    minWidth: 0,\n  },\n  truncate: {\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  link: {\n    // A browser underlines a bare `<a>`; the underline is a hover affordance here.\n    textDecorationLine: \"none\",\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.grayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      separator = \"/\",\n      \"aria-label\": ariaLabel = \"Breadcrumb\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label={ariaLabel}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. The child must be one real element, not a Fragment.\n   */\n  asChild?: boolean\n  /**\n   * Keep the crumb on one line and cut it with an ellipsis when the trail runs out of room, with\n   * the full text as its `title`. Pass `title` yourself when the children are not plain text.\n   */\n  truncate?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  {\n    href,\n    isCurrent = false,\n    className,\n    children,\n    asChild = false,\n    truncate = false,\n    title,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const truncateClass = truncate ? styles.truncate : undefined\n  const fullText =\n    title ??\n    (truncate && (typeof children === \"string\" || typeof children === \"number\")\n      ? String(children)\n      : undefined)\n\n  const linkProps = {\n    \"data-slot\": \"breadcrumb-link\",\n    [SLOT_ATTR]: \"breadcrumb-link\",\n    ...(href ? { href } : {}),\n    ...(fullText !== undefined ? { title: fullText } : {}),\n    ...(isCurrent ? { \"aria-current\": \"page\" as const } : {}),\n    ...props,\n  }\n  const linkClassName = mergeClasses(styles.link, truncateClass, className)\n\n  const content = asChild ? (\n    <ComposeAsChild {...linkProps} className={linkClassName}>\n      {onlyChild(children)}\n    </ComposeAsChild>\n  ) : isLink ? (\n    <a {...linkProps} className={linkClassName}>\n      {children}\n    </a>\n  ) : (\n    <span\n      data-slot=\"breadcrumb-page\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n      className={mergeClasses(styles.page, truncateClass, className)}\n      {...(fullText !== undefined ? { title: fullText } : {})}\n      {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n    >\n      {children}\n    </span>\n  )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      {...(truncate ? { \"data-truncate\": \"\" } : {})}\n      className={mergeClasses(styles.item, truncate && styles.itemTruncate)}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["onlyChild","children","elements","React","useStyles","makeZenithStyles","SLOT_ATTR","boxModel","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.grayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.grayDefault","tokens.accentA8","Breadcrumb","separator","ariaLabel","className","props","ref","styles","items","jsx","mergeClasses","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","truncate","title","isLink","truncateClass","fullText","linkProps","linkClassName","content","ComposeAsChild"],"mappings":"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"}

package/dist/components/button/button.js

@@ -1,6 +1,6 @@
 import { jsx as g } from "react/jsx-runtime";
 import * as n from "react";
-import { mergeClasses as R, SLOT_ATTR as S, shorthands as l } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as R, SLOT_ATTR as S, shorthands as l } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as I } from "../../styles/make-styles.js";
 import { boxModel as a, nativeControl as L } from "../../styles/host-reset.js";
 import { capTrim as O } from "../../styles/text-box.js";

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport { capTrim } from \"../../styles/text-box\"\nimport * as tokens from \"../../tokens\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\n// `useRender` runs on every render to keep hook order stable; without an `asChild` child it is\n// disabled and this placeholder is never rendered.\nconst NO_SLOT_CHILD = <span />\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\nfunction onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    // Disabled keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  label: capTrim,\n  primary: {\n    backgroundColor: tokens.accentSolid,\n    color: tokens.accentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.errorSolid,\n    color: tokens.errorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.errorSoft,\n    color: tokens.errorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoft },\n  },\n  xs: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...boxModel,\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    ...boxModel,\n    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the\n    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block\n    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an\n    // explicit minHeight above the natural content box, same mechanism `lg` already uses).\n    ...shorthands.paddingInline(tokens.buttonBasePaddingInline),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: tokens.buttonBaseMinHeight,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    ...boxModel,\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    ...boxModel,\n    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable\n    // both move freely (DENSITY-SPEC.md §2.4).\n    width: tokens.buttonIconSize,\n    height: tokens.buttonIconSize,\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the single child element instead of a `button`, keeping Button's styling and slot\n   * markers. The child keeps its own semantics: a link stays a link. Without exactly one child\n   * element, Button renders its `button`.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      \"xs\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const rootClassName = mergeClasses(\n      styles.root,\n      styles[variantSlot],\n      styles[sizeSlot],\n      styles[shape],\n      className\n    )\n    const slotChild = asChild ? onlySlotChild(children) : undefined\n\n    // `asChild` decorates an element the caller owns, so it stays a plain prop merge as Radix's\n    // Slot was. Base UI's button would give that element `role=\"button\"`, a tabindex and\n    // Space-to-click, turning a link into a button for assistive technology.\n    const slotted = useRender({\n      render: slotChild ?? NO_SLOT_CHILD,\n      props: {\n        \"data-slot\": \"button\",\n        [SLOT_ATTR]: \"button\",\n        className: rootClassName,\n        ...props,\n      },\n      ref,\n      enabled: slotChild !== undefined,\n    })\n    if (slotted) return slotted\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={rootClassName}\n        // Base UI's button defaults to `type=\"button\"`; a bare `<button>` submits its form, as this\n        // component always did. A caller's or an overlay trigger's `type` still wins.\n        type=\"submit\"\n        {...props}\n      >\n        {wrapButtonTextRuns(children, styles.label)}\n      </ButtonPrimitive>\n    )\n  }\n)\n"],"names":["NO_SLOT_CHILD","onlySlotChild","children","elements","React","useStyles","makeZenithStyles","nativeControl","tokens.fontWeightSemibold","tokens.focusRing","capTrim","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","tokens.accentSoft","tokens.accentOnSoft","tokens.accentSoftHover","tokens.accentA11","tokens.grayA12","tokens.errorSolid","tokens.errorContrast","tokens.errorSolidHover","tokens.errorSoft","tokens.errorOnSoft","tokens.errorSoftHover","tokens.errorA11","boxModel","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.buttonBasePaddingInline","tokens.buttonBaseMinHeight","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.buttonIconSize","tokens.radiusLg","flattenButtonChildren","parentPath","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","rootClassName","mergeClasses","slotChild","slotted","useRender","SLOT_ATTR","ButtonPrimitive"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport { capTrim } from \"../../styles/text-box\"\nimport * as tokens from \"../../tokens\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\n// `useRender` runs on every render to keep hook order stable; without an `asChild` child it is\n// disabled and this placeholder is never rendered.\nconst NO_SLOT_CHILD = <span />\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\nfunction onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    // Disabled keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  label: capTrim,\n  primary: {\n    backgroundColor: tokens.accentSolid,\n    color: tokens.accentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.errorSolid,\n    color: tokens.errorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.errorSoft,\n    color: tokens.errorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoft },\n  },\n  xs: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...boxModel,\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    ...boxModel,\n    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the\n    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block\n    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an\n    // explicit minHeight above the natural content box, same mechanism `lg` already uses).\n    ...shorthands.paddingInline(tokens.buttonBasePaddingInline),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: tokens.buttonBaseMinHeight,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    ...boxModel,\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    ...boxModel,\n    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable\n    // both move freely (DENSITY-SPEC.md §2.4).\n    width: tokens.buttonIconSize,\n    height: tokens.buttonIconSize,\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the single child element instead of a `button`, keeping Button's styling and slot\n   * markers. The child keeps its own semantics: a link stays a link. Without exactly one child\n   * element, Button renders its `button`.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      \"xs\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const rootClassName = mergeClasses(\n      styles.root,\n      styles[variantSlot],\n      styles[sizeSlot],\n      styles[shape],\n      className\n    )\n    const slotChild = asChild ? onlySlotChild(children) : undefined\n\n    // `asChild` decorates an element the caller owns, so it stays a plain prop merge as Radix's\n    // Slot was. Base UI's button would give that element `role=\"button\"`, a tabindex and\n    // Space-to-click, turning a link into a button for assistive technology.\n    const slotted = useRender({\n      render: slotChild ?? NO_SLOT_CHILD,\n      props: {\n        \"data-slot\": \"button\",\n        [SLOT_ATTR]: \"button\",\n        className: rootClassName,\n        ...props,\n      },\n      ref,\n      enabled: slotChild !== undefined,\n    })\n    if (slotted) return slotted\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={rootClassName}\n        // Base UI's button defaults to `type=\"button\"`; a bare `<button>` submits its form, as this\n        // component always did. A caller's or an overlay trigger's `type` still wins.\n        type=\"submit\"\n        {...props}\n      >\n        {wrapButtonTextRuns(children, styles.label)}\n      </ButtonPrimitive>\n    )\n  }\n)\n"],"names":["NO_SLOT_CHILD","onlySlotChild","children","elements","React","useStyles","makeZenithStyles","nativeControl","tokens.fontWeightSemibold","tokens.focusRing","capTrim","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","tokens.accentSoft","tokens.accentOnSoft","tokens.accentSoftHover","tokens.accentA11","tokens.grayA12","tokens.errorSolid","tokens.errorContrast","tokens.errorSolidHover","tokens.errorSoft","tokens.errorOnSoft","tokens.errorSoftHover","tokens.errorA11","boxModel","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.buttonBasePaddingInline","tokens.buttonBaseMinHeight","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.buttonIconSize","tokens.radiusLg","flattenButtonChildren","parentPath","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","rootClassName","mergeClasses","slotChild","slotted","useRender","SLOT_ATTR","ButtonPrimitive"],"mappings":";;;;;;;;;AAcA,MAAMA,uBAAiB,QAAA,EAAK;AAI5B,SAASC,GAAcC,GAA2B;AAChD,QAAMC,IAAWC,EAAM,SAAS,QAAQF,CAAQ,EAAE,OAAOE,EAAM,cAAc;AAC7E,SAAOD,EAAS,WAAW,IAAIA,EAAS,CAAC,IAAI;AAC/C;AAEA,MAAME,KAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAYC;AAAAA,IACZ,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA;AAAA,IAGZ,aAAa,EAAE,SAAS,KAAK,QAAQ,cAAA;AAAA,IACrC,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,IAEvB,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,OAAOC;AAAA,EACP,SAAS;AAAA,IACP,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,IACnD,0BAA0B,EAAE,iBAAiBA,EAAO;AAAA,EAAiB;AAAA,EAEvE,WAAW;AAAA,IACT,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,EAAgB;AAAA,EAErE,UAAU;AAAA,IACR,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBH,EAAO;AAAA,EAAW;AAAA,EAEhE,OAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAOI;AAAAA,IACP,yBAAyB,EAAE,iBAAiBJ,EAAO;AAAA,EAAW;AAAA,EAEhE,oBAAoB;AAAA,IAClB,iBAAiBK;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,IACnD,0BAA0B,EAAE,iBAAiBA,EAAO;AAAA,EAAgB;AAAA,EAEtE,sBAAsB;AAAA,IACpB,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,EAAe;AAAA,EAEpE,qBAAqB;AAAA,IACnB,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBH,EAAO;AAAA,EAAU;AAAA,EAE/D,IAAI;AAAA,IACF,GAAGI;AAAA,IACH,GAAGC,EAAW,cAAc,QAAQ;AAAA,IACpC,GAAGA,EAAW,aAAa,SAAS;AAAA;AAAA;AAAA,IAGpC,WAAW;AAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEjD,IAAI;AAAA,IACF,GAAGH;AAAA,IACH,GAAGC,EAAW,cAAcG,EAAsB;AAAA,IAClD,GAAGH,EAAW,aAAa,SAAS;AAAA;AAAA,IAEpC,WAAW;AAAA,IACX,UAAUI;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,MAAM;AAAA,IACJ,GAAGN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKH,GAAGC,EAAW,cAAcM,EAA8B;AAAA,IAC1D,GAAGN,EAAW,aAAa,SAAS;AAAA,IACpC,WAAWO;AAAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE3C,IAAI;AAAA,IACF,GAAGV;AAAA,IACH,GAAGC,EAAW,cAAc,SAAS;AAAA,IACrC,GAAGA,EAAW,aAAa,SAAS;AAAA,IACpC,WAAW;AAAA,IACX,UAAUU;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE3C,QAAQ;AAAA,IACN,GAAGZ;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEjD,QAAQ;AAAA,IACN,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,MAAM;AAAA,IACJ,GAAGA;AAAA;AAAA;AAAA,IAGH,OAAOa;AAAAA,IACP,QAAQA;AAAAA,IACR,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,QAAQ;AAAA,IACN,GAAGb;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,UAAU,QAAQ,SAAA;AAAA,EAAS;AAAA,EAE/C,QAAQ,EAAE,cAAcc,EAAO;AAAA,EAC/B,SAAS,EAAE,cAAc,SAAA;AAC3B,CAAC;AAYD,SAASC,EACPvC,GACAwC,IAAa,UACM;AACnB,SAAOtC,EAAM,SAAS,QAAQF,CAAQ,EAAE,QAAQ,CAACyC,GAAMC,MAAU;AAC/D,UAAMC,IACJzC,EAAM,eAAeuC,CAAI,KAAKA,EAAK,QAAQ,OACvC,OAAOA,EAAK,GAAG,IACf,OAAOC,CAAK,GACZE,IAAU,GAAGJ,CAAU,IAAIG,CAAQ;AAEzC,WACEzC,EAAM,eAA+CuC,CAAI,KACzDA,EAAK,SAASvC,EAAM,WAEbqC,EAAsBE,EAAK,MAAM,UAAUG,CAAO,IAGpD,CAAC,EAAE,MAAAH,GAAM,SAAAG,GAAS;AAAA,EAC3B,CAAC;AACH;AAOA,SAASC,GACP7C,GACA8C,GACmB;AACnB,QAAMC,IAA4B,CAAA;AAClC,MAAIC,IAA6B,CAAA;AAEjC,QAAMC,IAAe,MAAM;AACzB,QAAI,CAACD,EAAQ,OAAQ;AAKrB,IAHuBA,EAAQ;AAAA,MAC7B,CAAC,EAAE,MAAAP,EAAA,MAAW,OAAOA,KAAS,YAAYA,EAAK,WAAW;AAAA,IAAA,IAG1DM,EAAO,KAAK,GAAGC,EAAQ,IAAI,CAAC,EAAE,MAAAP,EAAA,MAAWA,CAAI,CAAC,IAE9CM,EAAO;AAAA,MACL,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,aAAU;AAAA,UACV,WAAWJ;AAAA,UAEV,YAAQ,IAAI,CAAC,EAAE,MAAAL,EAAA,MAAWA,CAAI;AAAA,QAAA;AAAA,QAJ1B,gBAAgBO,EAAQ,CAAC,EAAE,OAAO;AAAA,MAAA;AAAA,IAKzC,GAGJA,IAAU,CAAA;AAAA,EACZ;AAEA,aAAWG,KAASZ,EAAsBvC,CAAQ,GAAG;AACnD,QAAI,OAAOmD,EAAM,QAAS,YAAY,OAAOA,EAAM,QAAS,UAAU;AACpE,MAAAH,EAAQ,KAAKG,CAAK;AAClB;AAAA,IACF;AAEA,IAAAF,EAAA,GACAF,EAAO;AAAA,MACL7C,EAAM,eAAeiD,EAAM,IAAI,IAC3BjD,EAAM,aAAaiD,EAAM,MAAM,EAAE,KAAKA,EAAM,QAAA,CAAS,IACrDA,EAAM;AAAA,IAAA;AAAA,EAEd;AACA,SAAAF,EAAA,GAEOF;AACT;AAwBO,MAAMK,KAASlD,EAAM;AAAA,EAC1B,SACE;AAAA,IACE,SAAAmD,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAA1D;AAAA,IACA,GAAG2D;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAS1D,GAAA,GACT2D,IAKJN,KAAeH,MAAY,UACtB,GAAGA,CAAO,gBAIXA,GACAU,IAEJ;AAAA,MACE,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAM;AAAA,MACN,WAAW;AAAA,IAAA,EAEbT,CAAI,GAEAU,IAAgBC;AAAA,MACpBJ,EAAO;AAAA,MACPA,EAAOC,CAAW;AAAA,MAClBD,EAAOE,CAAQ;AAAA,MACfF,EAAON,CAAK;AAAA,MACZE;AAAA,IAAA,GAEIS,IAAYR,IAAU3D,GAAcC,CAAQ,IAAI,QAKhDmE,IAAUC,GAAU;AAAA,MACxB,QAAQF,KAAapE;AAAA,MACrB,OAAO;AAAA,QACL,aAAa;AAAA,QACb,CAACuE,CAAS,GAAG;AAAA,QACb,WAAWL;AAAA,QACX,GAAGL;AAAA,MAAA;AAAA,MAEL,KAAAC;AAAA,MACA,SAASM,MAAc;AAAA,IAAA,CACxB;AACD,WAAIC,KAGF,gBAAAjB;AAAA,MAACoB;AAAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,aAAU;AAAA,QACJ,CAACS,CAAS,GAAG;AAAA,QACnB,WAAWL;AAAA,QAGX,MAAK;AAAA,QACJ,GAAGL;AAAA,QAEH,UAAAd,GAAmB7C,GAAU6D,EAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhD;AACF;"}

package/dist/components/button-group/button-group.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import * as p from "react";
-import { mergeClasses as u, SLOT_ATTR as s, shorthands as o } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as u, SLOT_ATTR as s, shorthands as o } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as m } from "../../styles/make-styles.js";
 import { boxModel as n } from "../../styles/host-reset.js";
 import { fontWeightMedium as f, leadingSm as h, textSm as b, grayA4 as x, spacingElement3 as R, spacingGroup2 as S, grayA5 as v, radiusMd as B, spacingElement2 as g } from "../../tokens/index.js";

package/dist/components/button-group/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Separator, type SeparatorProps } from \"../separator/separator\"\n\n/**\n * ButtonGroup — compound component family for grouping buttons, text, and separators. One\n * `makeZenithStyles` call for the whole family, one slot per sub-component (following `card.tsx`).\n */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"fit-content\",\n    alignItems: \"stretch\",\n    \"& > *:focus-visible\": {\n      zIndex: 10,\n      position: \"relative\",\n    },\n    [`&:has(> [${SLOT_ATTR}=\"button-group\"])`]: {\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  horizontal: {\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      borderLeftWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  vertical: {\n    flexDirection: \"column\",\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderTopRightRadius: 0,\n      borderTopWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderBottomLeftRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  text: {\n    ...boxModel,\n    backgroundColor: tokens.grayA4,\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightMedium,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    \"& svg\": {\n      pointerEvents: \"none\",\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  separator: {\n    ...shorthands.margin(0),\n    position: \"relative\",\n    alignSelf: \"stretch\",\n    backgroundColor: \"transparent\",\n  },\n  separatorVertical: {\n    ...boxModel,\n    height: \"1px\",\n  },\n})\n\nexport type ButtonGroupProps = React.ComponentProps<\"div\"> & {\n  orientation?: ButtonGroupOrientation\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { className, orientation = \"horizontal\", ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"button-group\"\n        {...{ [SLOT_ATTR]: \"button-group\" }}\n        data-orientation={orientation}\n        className={mergeClasses(styles.root, styles[orientation], className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type ButtonGroupTextProps = React.ComponentProps<\"div\">\n\nexport const ButtonGroupText = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupTextProps\n>(function ButtonGroupText({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"button-group-text\"\n      {...{ [SLOT_ATTR]: \"button-group-text\" }}\n      className={mergeClasses(styles.text, className)}\n      {...props}\n    />\n  )\n})\n\nexport type ButtonGroupSeparatorProps = SeparatorProps\n\nexport const ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupSeparatorProps\n>(function ButtonGroupSeparator(\n  { className, orientation = \"vertical\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Separator\n      ref={ref}\n      data-slot=\"button-group-separator\"\n      {...{ [SLOT_ATTR]: \"button-group-separator\" }}\n      orientation={orientation}\n      className={mergeClasses(\n        styles.separator,\n        orientation === \"vertical\" && styles.separatorVertical,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","SLOT_ATTR","shorthands","tokens.spacingElement2","tokens.grayA4","tokens.radiusMd","tokens.grayA5","tokens.spacingElement3","tokens.spacingGroup2","tokens.textSm","tokens.leadingSm","tokens.fontWeightMedium","ButtonGroup","React","className","orientation","props","ref","styles","jsx","mergeClasses","ButtonGroupText","ButtonGroupSeparator","Separator"],"mappings":"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"}
+{"version":3,"file":"button-group.js","sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Separator, type SeparatorProps } from \"../separator/separator\"\n\n/**\n * ButtonGroup — compound component family for grouping buttons, text, and separators. One\n * `makeZenithStyles` call for the whole family, one slot per sub-component (following `card.tsx`).\n */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"fit-content\",\n    alignItems: \"stretch\",\n    \"& > *:focus-visible\": {\n      zIndex: 10,\n      position: \"relative\",\n    },\n    [`&:has(> [${SLOT_ATTR}=\"button-group\"])`]: {\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  horizontal: {\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      borderLeftWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  vertical: {\n    flexDirection: \"column\",\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderTopRightRadius: 0,\n      borderTopWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderBottomLeftRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  text: {\n    ...boxModel,\n    backgroundColor: tokens.grayA4,\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightMedium,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    \"& svg\": {\n      pointerEvents: \"none\",\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  separator: {\n    ...shorthands.margin(0),\n    position: \"relative\",\n    alignSelf: \"stretch\",\n    backgroundColor: \"transparent\",\n  },\n  separatorVertical: {\n    ...boxModel,\n    height: \"1px\",\n  },\n})\n\nexport type ButtonGroupProps = React.ComponentProps<\"div\"> & {\n  orientation?: ButtonGroupOrientation\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { className, orientation = \"horizontal\", ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"button-group\"\n        {...{ [SLOT_ATTR]: \"button-group\" }}\n        data-orientation={orientation}\n        className={mergeClasses(styles.root, styles[orientation], className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type ButtonGroupTextProps = React.ComponentProps<\"div\">\n\nexport const ButtonGroupText = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupTextProps\n>(function ButtonGroupText({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"button-group-text\"\n      {...{ [SLOT_ATTR]: \"button-group-text\" }}\n      className={mergeClasses(styles.text, className)}\n      {...props}\n    />\n  )\n})\n\nexport type ButtonGroupSeparatorProps = SeparatorProps\n\nexport const ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupSeparatorProps\n>(function ButtonGroupSeparator(\n  { className, orientation = \"vertical\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Separator\n      ref={ref}\n      data-slot=\"button-group-separator\"\n      {...{ [SLOT_ATTR]: \"button-group-separator\" }}\n      orientation={orientation}\n      className={mergeClasses(\n        styles.separator,\n        orientation === \"vertical\" && styles.separatorVertical,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","SLOT_ATTR","shorthands","tokens.spacingElement2","tokens.grayA4","tokens.radiusMd","tokens.grayA5","tokens.spacingElement3","tokens.spacingGroup2","tokens.textSm","tokens.leadingSm","tokens.fontWeightMedium","ButtonGroup","React","className","orientation","props","ref","styles","jsx","mergeClasses","ButtonGroupText","ButtonGroupSeparator","Separator"],"mappings":"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"}

package/dist/components/callout/callout.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as V } from "react/jsx-runtime";
 import * as a from "react";
-import { mergeClasses as h, SLOT_ATTR as C, shorthands as v } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as h, SLOT_ATTR as C, shorthands as v } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as E } from "../../styles/make-styles.js";
 import { boxModel as c } from "../../styles/host-reset.js";
 import { spacingGroup2 as x, spacingLayout1 as S, spacingElement2 as I, spacingLayout2 as N, leadingSm as R, textSm as L, fontWeightSemibold as $, leadingBase as j, textBase as z, spacingElement3 as u, spacingElement1 as G, surfaceRadiusContainer as H } from "../../tokens/index.js";

package/dist/components/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/components/callout/callout.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { NS } from \"../../tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\nimport { CloseIcon } from \"../../lib/icons\"\n\n/**\n * Callout — Badge's colour collapse applied to Card's compound pattern, in one makeZenithStyles\n * call. v1 hardcodes two variants per family as class strings (`bg-accent-soft text-accent-a12`,\n * ...).\n */\n\nconst InfoIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function InfoIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9997 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst WarningIcon = React.forwardRef<\n  SVGSVGElement,\n  React.ComponentProps<\"svg\">\n>(function WarningIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z\" />\n    </svg>\n  )\n})\n\nconst CheckIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CheckIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M10.5808 14.1463L8.25775 11.823C8.11925 11.6847 7.94517 11.6138 7.7355 11.6105C7.526 11.6073 7.34875 11.6782 7.20375 11.823C7.05892 11.968 6.9865 12.1437 6.9865 12.35C6.9865 12.5563 7.05892 12.732 7.20375 12.877L9.948 15.6212C10.1288 15.8019 10.3398 15.8922 10.5808 15.8922C10.8218 15.8922 11.0327 15.8019 11.2135 15.6212L16.777 10.0577C16.9153 9.91925 16.9862 9.74517 16.9895 9.5355C16.9927 9.326 16.9218 9.14875 16.777 9.00375C16.632 8.85892 16.4563 8.7865 16.25 8.7865C16.0437 8.7865 15.868 8.85892 15.723 9.00375L10.5808 14.1463ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst ErrorIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function ErrorIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12 16.7307C12.2288 16.7307 12.4207 16.6533 12.5755 16.4985C12.7303 16.3437 12.8077 16.1518 12.8077 15.923C12.8077 15.6942 12.7303 15.5023 12.5755 15.3475C12.4207 15.1928 12.2288 15.1155 12 15.1155C11.7712 15.1155 11.5793 15.1928 11.4245 15.3475C11.2697 15.5023 11.1923 15.6942 11.1923 15.923C11.1923 16.1518 11.2697 16.3437 11.4245 16.4985C11.5793 16.6533 11.7712 16.7307 12 16.7307ZM12.0003 13.077C12.2129 13.077 12.391 13.0051 12.5345 12.8613C12.6782 12.7176 12.75 12.5395 12.75 12.327V7.827C12.75 7.6145 12.6781 7.43633 12.5343 7.2925C12.3904 7.14883 12.2122 7.077 11.9997 7.077C11.7871 7.077 11.609 7.14883 11.4655 7.2925C11.3218 7.43633 11.25 7.6145 11.25 7.827V12.327C11.25 12.5395 11.3219 12.7176 11.4658 12.8613C11.6096 13.0051 11.7878 13.077 12.0003 13.077ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nexport type CalloutVariant =\n  \"info\" | \"gray\" | \"success\" | \"warning\" | \"destructive\"\n\ntype CalloutContextValue = {\n  variant: CalloutVariant\n  hideIcon: boolean\n}\n\nconst CalloutContext = React.createContext<CalloutContextValue>({\n  variant: \"info\",\n  hideIcon: false,\n})\n\n/**\n * The two slots a variant paints. Set inline; read by the root's atoms. Every variant is the same\n * style shape (soft background, default-graded text), so the five entries are data about five\n * families, not five class strings.\n */\nconst BG = \"--zenith-callout-bg\"\nconst FG = \"--zenith-callout-fg\"\n\nconst semantic = (family: string, slot: string): string =>\n  `var(--zenith-${NS}-${family}-${slot})`\n\nconst VARIANT_SLOTS: Record<CalloutVariant, () => Record<string, string>> = {\n  info: () => ({\n    [BG]: semantic(\"accent\", \"soft\"),\n    [FG]: semantic(\"accent\", \"default\"),\n  }),\n  gray: () => ({\n    [BG]: semantic(\"gray\", \"soft\"),\n    [FG]: semantic(\"gray\", \"default\"),\n  }),\n  success: () => ({\n    [BG]: semantic(\"success\", \"soft\"),\n    [FG]: semantic(\"success\", \"default\"),\n  }),\n  warning: () => ({\n    [BG]: semantic(\"warning\", \"soft\"),\n    [FG]: semantic(\"warning\", \"default\"),\n  }),\n  destructive: () => ({\n    [BG]: semantic(\"error\", \"soft\"),\n    [FG]: semantic(\"error\", \"default\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    width: \"100%\",\n    // The container radius, the same as Card so the two agree side by side (#25).\n    ...shorthands.borderRadius(tokens.surfaceRadiusContainer),\n    // p-3 — no token for 0.75rem.\n    paddingTop: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    paddingLeft: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    // `items-center`: present in every state, like v1's base string.\n    alignItems: \"center\",\n    // v1's `data-[hide-icon=false]:` block — the icon grid kicks in only when an icon renders.\n    \"&[data-hide-icon='false']\": {\n      display: \"grid\",\n      gridTemplateColumns: \"0 1fr auto\",\n      // gap-y-0.5 — no token for 0.125rem.\n      rowGap: \"0.125rem\",\n      // `has-[>svg]` and `has-data-[slot=callout-icon]` collapse to the same re-laid-out grid.\n      \"&:has(>svg)\": {\n        gridTemplateColumns: \"1rem 1fr\",\n        // gap-x-3 — no token for 0.75rem.\n        columnGap: tokens.spacingElement3,\n      },\n      [`&:has([${SLOT_ATTR}=\"callout-icon\"])`]: {\n        gridTemplateColumns: \"1rem 1fr\",\n        columnGap: tokens.spacingElement3,\n      },\n    },\n    // v1 `[&>[data-slot=callout-icon]]` — SLOT_ATTR, never data-slot (CONVENTIONS rule 4).\n    [`& > [${SLOT_ATTR}=\"callout-icon\"]`]: {\n      // size-5 — no token for 1.25rem.\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n      flexShrink: 0,\n    },\n  },\n  dismissible: {\n    ...boxModel,\n    // pr-10 — no token for 2.5rem.\n    paddingRight: \"2.5rem\",\n  },\n  title: {\n    ...boxModel,\n    gridColumnStart: 2,\n    ...shorthands.overflow(\"hidden\"),\n    display: \"-webkit-box\",\n    WebkitBoxOrient: \"vertical\",\n    WebkitLineClamp: 1,\n    // min-h-4\n    minHeight: tokens.spacingGroup2,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    gridColumnStart: 2,\n    display: \"grid\",\n    justifyItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement1),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    \"& p\": {\n      // leading-relaxed — no token for a 1.625 line-height.\n      lineHeight: 1.625,\n    },\n  },\n  action: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"100%\",\n    gridColumnEnd: \"span 3\",\n    // mt-2\n    marginTop: tokens.spacingElement2,\n  },\n  actionStart: {\n    justifyContent: \"flex-start\",\n  },\n  actionStartIcon: {\n    justifyContent: \"flex-start\",\n    // ml-8\n    marginLeft: tokens.spacingLayout2,\n  },\n  actionEnd: {\n    justifyContent: \"flex-end\",\n  },\n  dismiss: {\n    ...boxModel,\n    position: \"absolute\",\n    // top-2 right-2\n    top: tokens.spacingElement2,\n    right: tokens.spacingElement2,\n    // size-6 — the ClearButton itself supplies centering, rounding, hover and focus.\n    width: tokens.spacingLayout1,\n    height: tokens.spacingLayout1,\n  },\n  dismissIcon: {\n    ...boxModel,\n    // size-4\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type CalloutProps = React.ComponentProps<\"div\"> & {\n  variant?: CalloutVariant\n  hideIcon?: boolean\n  customIcon?: React.ReactNode\n  /** Shows a top-right close button that dismisses the callout. */\n  dismissible?: boolean\n  /** Called when the close button is clicked, after the callout hides itself. */\n  onDismiss?: () => void\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout(\n    {\n      className,\n      variant = \"info\",\n      hideIcon = false,\n      customIcon,\n      dismissible = false,\n      onDismiss,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const [open, setOpen] = React.useState(true)\n    const styles = useStyles()\n\n    if (!open) {\n      return null\n    }\n\n    const handleDismiss = () => {\n      setOpen(false)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutContext.Provider value={{ variant, hideIcon }}>\n        <div\n          ref={ref}\n          data-callout-variant={variant}\n          data-slot=\"callout\"\n          data-hide-icon={hideIcon ? \"true\" : \"false\"}\n          data-dismissible={dismissible ? \"true\" : \"false\"}\n          role=\"alert\"\n          {...{ [SLOT_ATTR]: \"callout\" }}\n          className={mergeClasses(\n            styles.root,\n            dismissible && styles.dismissible,\n            className\n          )}\n          style={\n            { ...VARIANT_SLOTS[variant](), ...style } as React.CSSProperties\n          }\n          {...props}\n        >\n          {!hideIcon && <CalloutIcon customIcon={customIcon} />}\n          {children}\n          {dismissible && (\n            <ClearButton\n              label=\"Dismiss\"\n              onClick={handleDismiss}\n              className={styles.dismiss}\n            >\n              <CloseIcon className={styles.dismissIcon} />\n            </ClearButton>\n          )}\n        </div>\n      </CalloutContext.Provider>\n    )\n  }\n)\n\nexport type CalloutTitleProps = React.ComponentProps<\"div\">\n\nexport const CalloutTitle = React.forwardRef<HTMLDivElement, CalloutTitleProps>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"callout-title\"\n        {...{ [SLOT_ATTR]: \"callout-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type CalloutDescriptionProps = React.ComponentProps<\"div\">\n\nexport const CalloutDescription = React.forwardRef<\n  HTMLDivElement,\n  CalloutDescriptionProps\n>(function CalloutDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-description\"\n      {...{ [SLOT_ATTR]: \"callout-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CalloutActionProps = React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\"\n}\n\nexport const CalloutAction = React.forwardRef<\n  HTMLDivElement,\n  CalloutActionProps\n>(function CalloutAction({ className, align = \"start\", ...props }, ref) {\n  const { hideIcon } = React.useContext(CalloutContext)\n  const styles = useStyles()\n\n  const alignment =\n    align === \"end\"\n      ? styles.actionEnd\n      : hideIcon\n        ? styles.actionStart\n        : styles.actionStartIcon\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-action\"\n      data-align={align}\n      {...{ [SLOT_ATTR]: \"callout-action\" }}\n      className={mergeClasses(styles.action, alignment, className)}\n      {...props}\n    />\n  )\n})\n\ntype CalloutVariantIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutVariantIcon = React.forwardRef<\n  SVGSVGElement,\n  CalloutVariantIconProps\n>(function CalloutVariantIcon({ customIcon, ...props }, ref) {\n  const { variant } = React.useContext(CalloutContext)\n\n  if (customIcon) {\n    return customIcon\n  }\n\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon ref={ref} {...props} />\n    case \"success\":\n      return <CheckIcon ref={ref} {...props} />\n    case \"warning\":\n      return <WarningIcon ref={ref} {...props} />\n    case \"destructive\":\n      return <ErrorIcon ref={ref} {...props} />\n  }\n\n  // gray has no default icon; v1 renders nothing for it.\n  return null\n})\n\nexport type CalloutIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutIcon = React.forwardRef<SVGSVGElement, CalloutIconProps>(\n  function CalloutIcon({ className, customIcon, ...props }, ref) {\n    return (\n      <CalloutVariantIcon\n        ref={ref}\n        data-slot=\"callout-icon\"\n        {...{ [SLOT_ATTR]: \"callout-icon\" }}\n        customIcon={customIcon}\n        className={className}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["InfoIcon","React","props","ref","jsx","WarningIcon","CheckIcon","ErrorIcon","CalloutContext","BG","FG","semantic","family","slot","NS","VARIANT_SLOTS","useStyles","makeZenithStyles","boxModel","shorthands","tokens.surfaceRadiusContainer","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","SLOT_ATTR","tokens.spacingGroup2","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.spacingElement1","tokens.spacingElement2","tokens.spacingLayout2","tokens.spacingLayout1","Callout","className","variant","hideIcon","customIcon","dismissible","onDismiss","style","children","open","setOpen","styles","handleDismiss","jsxs","mergeClasses","CalloutIcon","ClearButton","CloseIcon","CalloutTitle","CalloutDescription","CalloutAction","align","alignment","CalloutVariantIcon"],"mappings":"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"}
+{"version":3,"file":"callout.js","sources":["../../../src/components/callout/callout.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { NS } from \"../../tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\nimport { CloseIcon } from \"../../lib/icons\"\n\n/**\n * Callout — Badge's colour collapse applied to Card's compound pattern, in one makeZenithStyles\n * call. v1 hardcodes two variants per family as class strings (`bg-accent-soft text-accent-a12`,\n * ...).\n */\n\nconst InfoIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function InfoIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9997 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst WarningIcon = React.forwardRef<\n  SVGSVGElement,\n  React.ComponentProps<\"svg\">\n>(function WarningIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z\" />\n    </svg>\n  )\n})\n\nconst CheckIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CheckIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M10.5808 14.1463L8.25775 11.823C8.11925 11.6847 7.94517 11.6138 7.7355 11.6105C7.526 11.6073 7.34875 11.6782 7.20375 11.823C7.05892 11.968 6.9865 12.1437 6.9865 12.35C6.9865 12.5563 7.05892 12.732 7.20375 12.877L9.948 15.6212C10.1288 15.8019 10.3398 15.8922 10.5808 15.8922C10.8218 15.8922 11.0327 15.8019 11.2135 15.6212L16.777 10.0577C16.9153 9.91925 16.9862 9.74517 16.9895 9.5355C16.9927 9.326 16.9218 9.14875 16.777 9.00375C16.632 8.85892 16.4563 8.7865 16.25 8.7865C16.0437 8.7865 15.868 8.85892 15.723 9.00375L10.5808 14.1463ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nconst ErrorIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function ErrorIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        {...props}\n      >\n        <path d=\"M12 16.7307C12.2288 16.7307 12.4207 16.6533 12.5755 16.4985C12.7303 16.3437 12.8077 16.1518 12.8077 15.923C12.8077 15.6942 12.7303 15.5023 12.5755 15.3475C12.4207 15.1928 12.2288 15.1155 12 15.1155C11.7712 15.1155 11.5793 15.1928 11.4245 15.3475C11.2697 15.5023 11.1923 15.6942 11.1923 15.923C11.1923 16.1518 11.2697 16.3437 11.4245 16.4985C11.5793 16.6533 11.7712 16.7307 12 16.7307ZM12.0003 13.077C12.2129 13.077 12.391 13.0051 12.5345 12.8613C12.6782 12.7176 12.75 12.5395 12.75 12.327V7.827C12.75 7.6145 12.6781 7.43633 12.5343 7.2925C12.3904 7.14883 12.2122 7.077 11.9997 7.077C11.7871 7.077 11.609 7.14883 11.4655 7.2925C11.3218 7.43633 11.25 7.6145 11.25 7.827V12.327C11.25 12.5395 11.3219 12.7176 11.4658 12.8613C11.6096 13.0051 11.7878 13.077 12.0003 13.077ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n      </svg>\n    )\n  }\n)\n\nexport type CalloutVariant =\n  \"info\" | \"gray\" | \"success\" | \"warning\" | \"destructive\"\n\ntype CalloutContextValue = {\n  variant: CalloutVariant\n  hideIcon: boolean\n}\n\nconst CalloutContext = React.createContext<CalloutContextValue>({\n  variant: \"info\",\n  hideIcon: false,\n})\n\n/**\n * The two slots a variant paints. Set inline; read by the root's atoms. Every variant is the same\n * style shape (soft background, default-graded text), so the five entries are data about five\n * families, not five class strings.\n */\nconst BG = \"--zenith-callout-bg\"\nconst FG = \"--zenith-callout-fg\"\n\nconst semantic = (family: string, slot: string): string =>\n  `var(--zenith-${NS}-${family}-${slot})`\n\nconst VARIANT_SLOTS: Record<CalloutVariant, () => Record<string, string>> = {\n  info: () => ({\n    [BG]: semantic(\"accent\", \"soft\"),\n    [FG]: semantic(\"accent\", \"default\"),\n  }),\n  gray: () => ({\n    [BG]: semantic(\"gray\", \"soft\"),\n    [FG]: semantic(\"gray\", \"default\"),\n  }),\n  success: () => ({\n    [BG]: semantic(\"success\", \"soft\"),\n    [FG]: semantic(\"success\", \"default\"),\n  }),\n  warning: () => ({\n    [BG]: semantic(\"warning\", \"soft\"),\n    [FG]: semantic(\"warning\", \"default\"),\n  }),\n  destructive: () => ({\n    [BG]: semantic(\"error\", \"soft\"),\n    [FG]: semantic(\"error\", \"default\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    width: \"100%\",\n    // The container radius, the same as Card so the two agree side by side (#25).\n    ...shorthands.borderRadius(tokens.surfaceRadiusContainer),\n    // p-3 — no token for 0.75rem.\n    paddingTop: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    paddingLeft: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    // `items-center`: present in every state, like v1's base string.\n    alignItems: \"center\",\n    // v1's `data-[hide-icon=false]:` block — the icon grid kicks in only when an icon renders.\n    \"&[data-hide-icon='false']\": {\n      display: \"grid\",\n      gridTemplateColumns: \"0 1fr auto\",\n      // gap-y-0.5 — no token for 0.125rem.\n      rowGap: \"0.125rem\",\n      // `has-[>svg]` and `has-data-[slot=callout-icon]` collapse to the same re-laid-out grid.\n      \"&:has(>svg)\": {\n        gridTemplateColumns: \"1rem 1fr\",\n        // gap-x-3 — no token for 0.75rem.\n        columnGap: tokens.spacingElement3,\n      },\n      [`&:has([${SLOT_ATTR}=\"callout-icon\"])`]: {\n        gridTemplateColumns: \"1rem 1fr\",\n        columnGap: tokens.spacingElement3,\n      },\n    },\n    // v1 `[&>[data-slot=callout-icon]]` — SLOT_ATTR, never data-slot (CONVENTIONS rule 4).\n    [`& > [${SLOT_ATTR}=\"callout-icon\"]`]: {\n      // size-5 — no token for 1.25rem.\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n      flexShrink: 0,\n    },\n  },\n  dismissible: {\n    ...boxModel,\n    // pr-10 — no token for 2.5rem.\n    paddingRight: \"2.5rem\",\n  },\n  title: {\n    ...boxModel,\n    gridColumnStart: 2,\n    ...shorthands.overflow(\"hidden\"),\n    display: \"-webkit-box\",\n    WebkitBoxOrient: \"vertical\",\n    WebkitLineClamp: 1,\n    // min-h-4\n    minHeight: tokens.spacingGroup2,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    gridColumnStart: 2,\n    display: \"grid\",\n    justifyItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement1),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    \"& p\": {\n      // leading-relaxed — no token for a 1.625 line-height.\n      lineHeight: 1.625,\n    },\n  },\n  action: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"100%\",\n    gridColumnEnd: \"span 3\",\n    // mt-2\n    marginTop: tokens.spacingElement2,\n  },\n  actionStart: {\n    justifyContent: \"flex-start\",\n  },\n  actionStartIcon: {\n    justifyContent: \"flex-start\",\n    // ml-8\n    marginLeft: tokens.spacingLayout2,\n  },\n  actionEnd: {\n    justifyContent: \"flex-end\",\n  },\n  dismiss: {\n    ...boxModel,\n    position: \"absolute\",\n    // top-2 right-2\n    top: tokens.spacingElement2,\n    right: tokens.spacingElement2,\n    // size-6 — the ClearButton itself supplies centering, rounding, hover and focus.\n    width: tokens.spacingLayout1,\n    height: tokens.spacingLayout1,\n  },\n  dismissIcon: {\n    ...boxModel,\n    // size-4\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type CalloutProps = React.ComponentProps<\"div\"> & {\n  variant?: CalloutVariant\n  hideIcon?: boolean\n  customIcon?: React.ReactNode\n  /** Shows a top-right close button that dismisses the callout. */\n  dismissible?: boolean\n  /** Called when the close button is clicked, after the callout hides itself. */\n  onDismiss?: () => void\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout(\n    {\n      className,\n      variant = \"info\",\n      hideIcon = false,\n      customIcon,\n      dismissible = false,\n      onDismiss,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const [open, setOpen] = React.useState(true)\n    const styles = useStyles()\n\n    if (!open) {\n      return null\n    }\n\n    const handleDismiss = () => {\n      setOpen(false)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutContext.Provider value={{ variant, hideIcon }}>\n        <div\n          ref={ref}\n          data-callout-variant={variant}\n          data-slot=\"callout\"\n          data-hide-icon={hideIcon ? \"true\" : \"false\"}\n          data-dismissible={dismissible ? \"true\" : \"false\"}\n          role=\"alert\"\n          {...{ [SLOT_ATTR]: \"callout\" }}\n          className={mergeClasses(\n            styles.root,\n            dismissible && styles.dismissible,\n            className\n          )}\n          style={\n            { ...VARIANT_SLOTS[variant](), ...style } as React.CSSProperties\n          }\n          {...props}\n        >\n          {!hideIcon && <CalloutIcon customIcon={customIcon} />}\n          {children}\n          {dismissible && (\n            <ClearButton\n              label=\"Dismiss\"\n              onClick={handleDismiss}\n              className={styles.dismiss}\n            >\n              <CloseIcon className={styles.dismissIcon} />\n            </ClearButton>\n          )}\n        </div>\n      </CalloutContext.Provider>\n    )\n  }\n)\n\nexport type CalloutTitleProps = React.ComponentProps<\"div\">\n\nexport const CalloutTitle = React.forwardRef<HTMLDivElement, CalloutTitleProps>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"callout-title\"\n        {...{ [SLOT_ATTR]: \"callout-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type CalloutDescriptionProps = React.ComponentProps<\"div\">\n\nexport const CalloutDescription = React.forwardRef<\n  HTMLDivElement,\n  CalloutDescriptionProps\n>(function CalloutDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-description\"\n      {...{ [SLOT_ATTR]: \"callout-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CalloutActionProps = React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\"\n}\n\nexport const CalloutAction = React.forwardRef<\n  HTMLDivElement,\n  CalloutActionProps\n>(function CalloutAction({ className, align = \"start\", ...props }, ref) {\n  const { hideIcon } = React.useContext(CalloutContext)\n  const styles = useStyles()\n\n  const alignment =\n    align === \"end\"\n      ? styles.actionEnd\n      : hideIcon\n        ? styles.actionStart\n        : styles.actionStartIcon\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"callout-action\"\n      data-align={align}\n      {...{ [SLOT_ATTR]: \"callout-action\" }}\n      className={mergeClasses(styles.action, alignment, className)}\n      {...props}\n    />\n  )\n})\n\ntype CalloutVariantIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutVariantIcon = React.forwardRef<\n  SVGSVGElement,\n  CalloutVariantIconProps\n>(function CalloutVariantIcon({ customIcon, ...props }, ref) {\n  const { variant } = React.useContext(CalloutContext)\n\n  if (customIcon) {\n    return customIcon\n  }\n\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon ref={ref} {...props} />\n    case \"success\":\n      return <CheckIcon ref={ref} {...props} />\n    case \"warning\":\n      return <WarningIcon ref={ref} {...props} />\n    case \"destructive\":\n      return <ErrorIcon ref={ref} {...props} />\n  }\n\n  // gray has no default icon; v1 renders nothing for it.\n  return null\n})\n\nexport type CalloutIconProps = React.ComponentProps<\"svg\"> & {\n  customIcon?: React.ReactNode\n}\n\nconst CalloutIcon = React.forwardRef<SVGSVGElement, CalloutIconProps>(\n  function CalloutIcon({ className, customIcon, ...props }, ref) {\n    return (\n      <CalloutVariantIcon\n        ref={ref}\n        data-slot=\"callout-icon\"\n        {...{ [SLOT_ATTR]: \"callout-icon\" }}\n        customIcon={customIcon}\n        className={className}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["InfoIcon","React","props","ref","jsx","WarningIcon","CheckIcon","ErrorIcon","CalloutContext","BG","FG","semantic","family","slot","NS","VARIANT_SLOTS","useStyles","makeZenithStyles","boxModel","shorthands","tokens.surfaceRadiusContainer","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","SLOT_ATTR","tokens.spacingGroup2","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.spacingElement1","tokens.spacingElement2","tokens.spacingLayout2","tokens.spacingLayout1","Callout","className","variant","hideIcon","customIcon","dismissible","onDismiss","style","children","open","setOpen","styles","handleDismiss","jsxs","mergeClasses","CalloutIcon","ClearButton","CloseIcon","CalloutTitle","CalloutDescription","CalloutAction","align","alignment","CalloutVariantIcon"],"mappings":";;;;;;;;;AAkBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,SAAkBC,GAAOC,GAAK;AAC5B,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACJ,GAAGD;AAAA,QAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,m8CAAA,CAAm8C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGj9C;AACF,GAEMC,IAAcJ,EAAM,WAGxB,SAAqBC,GAAOC,GAAK;AACjC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAGD;AAAA,MAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,i1CAAA,CAAi1C;AAAA,IAAA;AAAA,EAAA;AAG/1C,CAAC,GAEKE,IAAYL,EAAM;AAAA,EACtB,SAAmBC,GAAOC,GAAK;AAC7B,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACJ,GAAGD;AAAA,QAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,4uCAAA,CAA4uC;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1vC;AACF,GAEMG,IAAYN,EAAM;AAAA,EACtB,SAAmBC,GAAOC,GAAK;AAC7B,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACJ,GAAGD;AAAA,QAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,s9CAAA,CAAs9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGp+C;AACF,GAUMI,IAAiBP,EAAM,cAAmC;AAAA,EAC9D,SAAS;AAAA,EACT,UAAU;AACZ,CAAC,GAOKQ,IAAK,uBACLC,IAAK,uBAELC,IAAW,CAACC,GAAgBC,MAChC,gBAAgBC,CAAE,IAAIF,CAAM,IAAIC,CAAI,KAEhCE,IAAsE;AAAA,EAC1E,MAAM,OAAO;AAAA,IACX,CAACN,CAAE,GAAGE,EAAS,UAAU,MAAM;AAAA,IAC/B,CAACD,CAAE,GAAGC,EAAS,UAAU,SAAS;AAAA,EAAA;AAAA,EAEpC,MAAM,OAAO;AAAA,IACX,CAACF,CAAE,GAAGE,EAAS,QAAQ,MAAM;AAAA,IAC7B,CAACD,CAAE,GAAGC,EAAS,QAAQ,SAAS;AAAA,EAAA;AAAA,EAElC,SAAS,OAAO;AAAA,IACd,CAACF,CAAE,GAAGE,EAAS,WAAW,MAAM;AAAA,IAChC,CAACD,CAAE,GAAGC,EAAS,WAAW,SAAS;AAAA,EAAA;AAAA,EAErC,SAAS,OAAO;AAAA,IACd,CAACF,CAAE,GAAGE,EAAS,WAAW,MAAM;AAAA,IAChC,CAACD,CAAE,GAAGC,EAAS,WAAW,SAAS;AAAA,EAAA;AAAA,EAErC,aAAa,OAAO;AAAA,IAClB,CAACF,CAAE,GAAGE,EAAS,SAAS,MAAM;AAAA,IAC9B,CAACD,CAAE,GAAGC,EAAS,SAAS,SAAS;AAAA,EAAA;AAErC,GAEMK,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA;AAAA,IAEP,GAAGC,EAAW,aAAaC,CAA6B;AAAA;AAAA,IAExD,YAAYC;AAAAA,IACZ,cAAcA;AAAAA,IACd,eAAeA;AAAAA,IACf,aAAaA;AAAAA,IACb,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,iBAAiB,OAAOd,CAAE;AAAA,IAC1B,OAAO,OAAOC,CAAE;AAAA;AAAA,IAEhB,YAAY;AAAA;AAAA,IAEZ,6BAA6B;AAAA,MAC3B,SAAS;AAAA,MACT,qBAAqB;AAAA;AAAA,MAErB,QAAQ;AAAA;AAAA,MAER,eAAe;AAAA,QACb,qBAAqB;AAAA;AAAA,QAErB,WAAWW;AAAAA,MAAO;AAAA,MAEpB,CAAC,UAAUG,CAAS,mBAAmB,GAAG;AAAA,QACxC,qBAAqB;AAAA,QACrB,WAAWH;AAAAA,MAAO;AAAA,IACpB;AAAA;AAAA,IAGF,CAAC,QAAQG,CAAS,kBAAkB,GAAG;AAAA;AAAA,MAErC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,aAAa;AAAA,IACX,GAAGN;AAAA;AAAA,IAEH,cAAc;AAAA,EAAA;AAAA,EAEhB,OAAO;AAAA,IACL,GAAGA;AAAA,IACH,iBAAiB;AAAA,IACjB,GAAGC,EAAW,SAAS,QAAQ;AAAA,IAC/B,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,iBAAiB;AAAA;AAAA,IAEjB,WAAWM;AAAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,EAAO;AAAA,EAErB,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,GAAGT,EAAW,IAAIU,CAAsB;AAAA,IACxC,UAAUP;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAO;AAAA;AAAA,MAEL,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,QAAQ;AAAA,IACN,GAAGL;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA;AAAA,IAEf,WAAWY;AAAAA,EAAO;AAAA,EAEpB,aAAa;AAAA,IACX,gBAAgB;AAAA,EAAA;AAAA,EAElB,iBAAiB;AAAA,IACf,gBAAgB;AAAA;AAAA,IAEhB,YAAYC;AAAAA,EAAO;AAAA,EAErB,WAAW;AAAA,IACT,gBAAgB;AAAA,EAAA;AAAA,EAElB,SAAS;AAAA,IACP,GAAGb;AAAA,IACH,UAAU;AAAA;AAAA,IAEV,KAAKY;AAAAA,IACL,OAAOA;AAAAA;AAAAA,IAEP,OAAOE;AAAAA,IACP,QAAQA;AAAAA,EAAO;AAAA,EAEjB,aAAa;AAAA,IACX,GAAGd;AAAA;AAAA,IAEH,OAAOO;AAAAA,IACP,QAAQA;AAAAA,EAAO;AAEnB,CAAC,GAYYQ,KAAUhC,EAAM;AAAA,EAC3B,SACE;AAAA,IACE,WAAAiC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGvC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,CAACuC,GAAMC,CAAO,IAAI1C,EAAM,SAAS,EAAI,GACrC2C,IAAS5B,EAAA;AAEf,QAAI,CAAC0B;AACH,aAAO;AAGT,UAAMG,IAAgB,MAAM;AAC1B,MAAAF,EAAQ,EAAK,GACbJ,KAAA,QAAAA;AAAA,IACF;AAEA,WACE,gBAAAnC,EAACI,EAAe,UAAf,EAAwB,OAAO,EAAE,SAAA2B,GAAS,UAAAC,KACzC,UAAA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAA3C;AAAA,QACA,wBAAsBgC;AAAA,QACtB,aAAU;AAAA,QACV,kBAAgBC,IAAW,SAAS;AAAA,QACpC,oBAAkBE,IAAc,SAAS;AAAA,QACzC,MAAK;AAAA,QACC,CAACd,CAAS,GAAG;AAAA,QACnB,WAAWuB;AAAA,UACTH,EAAO;AAAA,UACPN,KAAeM,EAAO;AAAA,UACtBV;AAAA,QAAA;AAAA,QAEF,OACE,EAAE,GAAGnB,EAAcoB,CAAO,EAAA,GAAK,GAAGK,EAAA;AAAA,QAEnC,GAAGtC;AAAA,QAEH,UAAA;AAAA,UAAA,CAACkC,KAAY,gBAAAhC,EAAC4C,GAAA,EAAY,YAAAX,EAAA,CAAwB;AAAA,UAClDI;AAAA,UACAH,KACC,gBAAAlC;AAAA,YAAC6C;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,SAASJ;AAAA,cACT,WAAWD,EAAO;AAAA,cAElB,UAAA,gBAAAxC,EAAC8C,GAAA,EAAU,WAAWN,EAAO,YAAA,CAAa;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5C;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF,GAIaO,KAAelD,EAAM;AAAA,EAChC,SAAsB,EAAE,WAAAiC,GAAW,GAAGhC,EAAA,GAASC,GAAK;AAClD,UAAMyC,IAAS5B,EAAA;AAEf,WACE,gBAAAZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,aAAU;AAAA,QACJ,CAACqB,CAAS,GAAG;AAAA,QACnB,WAAWuB,EAAaH,EAAO,OAAOV,CAAS;AAAA,QAC9C,GAAGhC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF,GAIakD,KAAqBnD,EAAM,WAGtC,SAA4B,EAAE,WAAAiC,GAAW,GAAGhC,EAAA,GAASC,GAAK;AAC1D,QAAMyC,IAAS5B,EAAA;AAEf,SACE,gBAAAZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACJ,CAACqB,CAAS,GAAG;AAAA,MACnB,WAAWuB,EAAaH,EAAO,aAAaV,CAAS;AAAA,MACpD,GAAGhC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAMYmD,KAAgBpD,EAAM,WAGjC,SAAuB,EAAE,WAAAiC,GAAW,OAAAoB,IAAQ,SAAS,GAAGpD,EAAA,GAASC,GAAK;AACtE,QAAM,EAAE,UAAAiC,EAAA,IAAanC,EAAM,WAAWO,CAAc,GAC9CoC,IAAS5B,EAAA,GAETuC,IACJD,MAAU,QACNV,EAAO,YACPR,IACEQ,EAAO,cACPA,EAAO;AAEf,SACE,gBAAAxC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,cAAYmD;AAAA,MACN,CAAC9B,CAAS,GAAG;AAAA,MACnB,WAAWuB,EAAaH,EAAO,QAAQW,GAAWrB,CAAS;AAAA,MAC1D,GAAGhC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAMKsD,IAAqBvD,EAAM,WAG/B,SAA4B,EAAE,YAAAoC,GAAY,GAAGnC,EAAA,GAASC,GAAK;AAC3D,QAAM,EAAE,SAAAgC,EAAA,IAAYlC,EAAM,WAAWO,CAAc;AAEnD,MAAI6B;AACF,WAAOA;AAGT,UAAQF,GAAA;AAAA,IACN,KAAK;AACH,aAAO,gBAAA/B,EAACJ,GAAA,EAAS,KAAAG,GAAW,GAAGD,EAAA,CAAO;AAAA,IACxC,KAAK;AACH,aAAO,gBAAAE,EAACE,GAAA,EAAU,KAAAH,GAAW,GAAGD,EAAA,CAAO;AAAA,IACzC,KAAK;AACH,aAAO,gBAAAE,EAACC,GAAA,EAAY,KAAAF,GAAW,GAAGD,EAAA,CAAO;AAAA,IAC3C,KAAK;AACH,aAAO,gBAAAE,EAACG,GAAA,EAAU,KAAAJ,GAAW,GAAGD,EAAA,CAAO;AAAA,EAAA;AAI3C,SAAO;AACT,CAAC,GAMK8C,IAAc/C,EAAM;AAAA,EACxB,SAAqB,EAAE,WAAAiC,GAAW,YAAAG,GAAY,GAAGnC,EAAA,GAASC,GAAK;AAC7D,WACE,gBAAAC;AAAA,MAACoD;AAAA,MAAA;AAAA,QACC,KAAArD;AAAA,QACA,aAAU;AAAA,QACJ,CAACqB,CAAS,GAAG;AAAA,QACnB,YAAAa;AAAA,QACA,WAAAH;AAAA,QACC,GAAGhC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/components/card/card.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as i from "react";
-import { mergeClasses as s, SLOT_ATTR as d, shorthands as f } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as s, SLOT_ATTR as d, shorthands as f } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as m } from "../../styles/make-styles.js";
 import { boxModel as p } from "../../styles/host-reset.js";
 import { spacingGroup2 as e, leadingSm as g, textSm as u, grayA11 as C, fontWeightSemibold as h, shadowContainer as R, surfaceContainer as y, spacingElement2 as b, borderContainer as w, borderWidthContainer as S, surfaceRadiusContainer as T } from "../../tokens/index.js";