@epilot/volt-ui-experimental-griffel 0.2.1 → 0.3.0

package/dist/components/option-card/option-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-card.js","sources":["../../../src/components/option-card/option-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst DEFAULT_LAYOUT = \"grid\" as const\n\nconst MISSING_VALUE_WARNING =\n  \"OptionCard: a card inside an OptionCardGroup is missing a `value`. \" +\n  \"Give each card a unique `value` so it can be selected and controlled.\"\n\n/** The trailing control glyph an {@link OptionCard} shows for its selected state. */\nexport type OptionCardControlType = \"radio\" | \"checkbox\" | \"switch\" | \"none\"\n\nexport type OptionCardLayout = \"grid\" | \"row\" | \"column\"\n\n// ── Group context ──────────────────────────────────────────────────────────\ntype OptionCardGroupContextValue = {\n  type?: \"single\" | \"multiple\"\n  layout: OptionCardLayout\n}\nconst OptionCardGroupContext =\n  React.createContext<OptionCardGroupContextValue | null>(null)\n\n// ── Card context ───────────────────────────────────────────────────────────\ntype OptionCardContextValue = {\n  controlType: OptionCardControlType\n  registerType: (type: OptionCardControlType) => void\n}\nconst OptionCardContext = React.createContext<OptionCardContextValue | null>(\n  null\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeVoltStyles({\n  // Group layouts\n  group: {\n    // The GROUP only lays out. v1's group base class is literally \"\" -- every border, padding and\n    // interaction style below used to live here, copied from v1's CARD class onto the wrong element,\n    // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for\n    // why tsc accepted that for as long as it did.\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n\n  // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]\n  grid: {\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n  },\n  // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read\n  // as equal-weight peers regardless of their content.\n  row: {\n    gridAutoFlow: \"column\",\n    gridAutoColumns: \"minmax(0, 1fr)\",\n  },\n  // v1: plain `grid` with no template. One column, stacked.\n  column: {},\n\n  card: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.\n    ...shorthands.gap(tokens.spacingElement3),\n    overflow: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.border(\"1px\", \"solid\", \"currentColor\"),\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.375rem\"),\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA12,\n    backgroundColor: \"transparent\",\n    transitionProperty: \"color, background-color, border-color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    height: \"auto\",\n    minWidth: \"0\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.semAccentSoft,\n      ...shorthands.borderColor(tokens.accentA8),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n      ...shorthands.borderColor(tokens.semAccentSolid),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-dot\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-outer\"]`]: {\n      ...shorthands.borderColor(\"transparent\"),\n      backgroundColor: tokens.semAccentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-check\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-track\"]`]: {\n      backgroundColor: tokens.semAccentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-thumb\"]`]: {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n  },\n\n  // Media\n  mediaRoot: {\n    flexShrink: 0,\n  },\n  mediaIcon: {\n    display: \"grid\",\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    placeContent: \"center\",\n    alignSelf: \"start\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentLight,\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n  mediaIllustration: {\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    alignSelf: \"stretch\",\n    overflow: \"hidden\",\n    \"& svg\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n    },\n    \"& img\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"contain\",\n    },\n  },\n\n  // Content\n  content: {\n    display: \"grid\",\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    gridAutoRows: \"min-content\",\n    alignItems: \"center\",\n    columnGap: tokens.spacingElement2,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    [`&:has([${SLOT_ATTR}=\"option-card-control\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n\n  // Title\n  title: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    minWidth: 0,\n    alignSelf: \"center\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  // Description\n  description: {\n    gridColumnStart: 1,\n    gridRowStart: 2,\n    minWidth: 0,\n    overflowWrap: \"break-word\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA11,\n  },\n\n  // Control\n  control: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    alignSelf: \"center\",\n    justifySelf: \"end\",\n  },\n\n  // Radio glyph\n  radioOuter: {\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    transitionProperty: \"border-color\",\n    transitionDuration: \"150ms\",\n  },\n  radioDot: {\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.semAccentSolid,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Checkbox glyph\n  checkboxOuter: {\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    ...shorthands.borderRadius(\"4px\"),\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.accentContrast,\n    transitionProperty: \"background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  checkboxCheck: {\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Switch glyph\n  switchTrack: {\n    display: \"inline-flex\",\n    height: \"1.25rem\",\n    width: \"2.125rem\",\n    flexShrink: 0,\n    alignItems: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    backgroundColor: tokens.grayA3,\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n  },\n  switchThumb: {\n    display: \"block\",\n    width: \"1rem\",\n    height: \"1rem\",\n    transform: \"translateX(1px)\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.grayContrast,\n    // v1 shadow-xs; no shadow tokens in this package.\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n  },\n})\n\n// ── Control Glyphs ─────────────────────────────────────────────────────────\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n  </svg>\n)\n\nconst RadioGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.radioOuter}\n      {...{ [SLOT_ATTR]: \"option-card-radio-outer\" }}\n    >\n      <span\n        className={styles.radioDot}\n        {...{ [SLOT_ATTR]: \"option-card-radio-dot\" }}\n      />\n    </span>\n  )\n}\n\nconst CheckboxGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.checkboxOuter}\n      {...{ [SLOT_ATTR]: \"option-card-checkbox-outer\" }}\n    >\n      <CheckIcon\n        className={styles.checkboxCheck}\n        {...{ [SLOT_ATTR]: \"option-card-checkbox-check\" }}\n      />\n    </span>\n  )\n}\n\nconst SwitchGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.switchTrack}\n      {...{ [SLOT_ATTR]: \"option-card-switch-track\" }}\n    >\n      <span\n        className={styles.switchThumb}\n        {...{ [SLOT_ATTR]: \"option-card-switch-thumb\" }}\n      />\n    </span>\n  )\n}\n\n// ── OptionCardGroup ────────────────────────────────────────────────────────\n\nexport type OptionCardGroupProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Root\n> & {\n  layout?: OptionCardLayout\n}\n\nexport const OptionCardGroup = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  OptionCardGroupProps\n>(function OptionCardGroup(\n  { className, layout = DEFAULT_LAYOUT, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <OptionCardGroupContext.Provider value={{ type: props.type, layout }}>\n      <ToggleGroupPrimitive.Root\n        ref={ref}\n        data-slot=\"option-card-group\"\n        {...{ [SLOT_ATTR]: \"option-card-group\" }}\n        data-layout={layout}\n        {...(props.type === \"single\" ? { role: \"radiogroup\" } : {})}\n        className={mergeClasses(styles.group, styles[layout], className)}\n        {...props}\n      />\n    </OptionCardGroupContext.Provider>\n  )\n})\n\n// ── OptionCardControl ──────────────────────────────────────────────────────\n\nexport type OptionCardControlProps = React.ComponentProps<\"span\"> & {\n  type?: OptionCardControlType\n}\n\nexport const OptionCardControl = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardControlProps\n>(function OptionCardControl({ className, type, ...props }, ref) {\n  const styles = useStyles()\n  const card = React.useContext(OptionCardContext)\n  const register = card?.registerType\n\n  React.useEffect(() => {\n    if (type && register) register(type)\n  }, [type, register])\n\n  const resolved = type ?? card?.controlType ?? \"checkbox\"\n  if (resolved === \"none\") return null\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-control\"\n      {...{ [SLOT_ATTR]: \"option-card-control\" }}\n      className={mergeClasses(styles.control, className)}\n      {...props}\n    >\n      {resolved === \"radio\" ? (\n        <RadioGlyph />\n      ) : resolved === \"switch\" ? (\n        <SwitchGlyph />\n      ) : (\n        <CheckboxGlyph />\n      )}\n    </span>\n  )\n})\n\n// ── OptionCardMedia ────────────────────────────────────────────────────────\n\nexport type OptionCardMediaVariant = \"icon\" | \"illustration\"\n\nexport type OptionCardMediaProps = React.ComponentProps<\"span\"> & {\n  variant?: OptionCardMediaVariant\n}\n\nexport const OptionCardMedia = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardMediaProps\n>(function OptionCardMedia({ className, variant = \"icon\", ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-media\"\n      {...{ [SLOT_ATTR]: \"option-card-media\" }}\n      data-variant={variant}\n      className={mergeClasses(\n        styles.mediaRoot,\n        variant === \"illustration\"\n          ? styles.mediaIllustration\n          : styles.mediaIcon,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardTitle ────────────────────────────────────────────────────────\n\nexport type OptionCardTitleProps = React.ComponentProps<\"span\">\n\nexport const OptionCardTitle = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardTitleProps\n>(function OptionCardTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-title\"\n      {...{ [SLOT_ATTR]: \"option-card-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardDescription ──────────────────────────────────────────────────\n\nexport type OptionCardDescriptionProps = React.ComponentProps<\"span\">\n\nexport const OptionCardDescription = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardDescriptionProps\n>(function OptionCardDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-description\"\n      {...{ [SLOT_ATTR]: \"option-card-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardContent ──────────────────────────────────────────────────────\n\nexport type OptionCardContentProps = React.ComponentProps<\"span\">\n\nconst hasControl = (children: React.ReactNode) =>\n  React.Children.toArray(children).some(\n    (c) => React.isValidElement(c) && c.type === OptionCardControl\n  )\n\nexport const OptionCardContent = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardContentProps\n>(function OptionCardContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-content\"\n      {...{ [SLOT_ATTR]: \"option-card-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    >\n      {children}\n      {!hasControl(children) && <OptionCardControl />}\n    </span>\n  )\n})\n\n// ── OptionCard ─────────────────────────────────────────────────────────────\n\nexport type OptionCardProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"onChange\" | \"title\"\n> & {\n  /** Value of this option. Required inside an {@link OptionCardGroup}. */\n  value?: string\n  /** Controlled selected state for a standalone (group-less) card. */\n  pressed?: boolean\n  /** Uncontrolled default selected state for a standalone card. */\n  defaultPressed?: boolean\n  /** Fired when a standalone card is toggled. */\n  onPressedChange?: (pressed: boolean) => void\n}\n\nconst isPart = (node: React.ReactNode, ...parts: React.ElementType[]) =>\n  React.isValidElement(node) && parts.includes(node.type as React.ElementType)\n\nexport const OptionCard = React.forwardRef<HTMLButtonElement, OptionCardProps>(\n  function OptionCard(\n    {\n      className,\n      children,\n      value,\n      pressed,\n      defaultPressed,\n      onPressedChange,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const group = React.useContext(OptionCardGroupContext)\n    const inGroup = group !== null\n\n    const fallbackId = React.useId()\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      inGroup &&\n      value === undefined\n    ) {\n      console.warn(MISSING_VALUE_WARNING)\n    }\n\n    const [internalPressed, setInternalPressed] = React.useState(\n      defaultPressed ?? false\n    )\n    const isControlled = pressed !== undefined\n    const currentPressed = isControlled ? pressed : internalPressed\n    const handlePressedChange = (next: boolean) => {\n      if (!isControlled) setInternalPressed(next)\n      onPressedChange?.(next)\n    }\n\n    const groupControlType: OptionCardControlType = inGroup\n      ? group.type === \"multiple\"\n        ? \"checkbox\"\n        : \"radio\"\n      : \"checkbox\"\n    const [controlType, setControlType] =\n      React.useState<OptionCardControlType>(groupControlType)\n    const ctx = React.useMemo<OptionCardContextValue>(\n      () => ({ controlType, registerType: setControlType }),\n      [controlType]\n    )\n\n    const childArray = React.Children.toArray(children)\n    const hasContentChild = childArray.some((c) => isPart(c, OptionCardContent))\n    const media = childArray.filter((c) => isPart(c, OptionCardMedia))\n    const rest = childArray.filter((c) => !isPart(c, OptionCardMedia))\n    const content = hasContentChild ? (\n      rest\n    ) : (\n      <OptionCardContent>\n        <OptionCardTitle>{rest}</OptionCardTitle>\n      </OptionCardContent>\n    )\n\n    const body = (\n      <>\n        {media}\n        {content}\n      </>\n    )\n\n    if (inGroup) {\n      return (\n        <OptionCardContext.Provider value={ctx}>\n          <ToggleGroupPrimitive.Item\n            ref={ref}\n            data-slot=\"option-card\"\n            {...{ [SLOT_ATTR]: \"option-card\" }}\n            value={value ?? fallbackId}\n            className={mergeClasses(styles.card, className)}\n            {...props}\n          >\n            {body}\n          </ToggleGroupPrimitive.Item>\n        </OptionCardContext.Provider>\n      )\n    }\n\n    const standaloneRole = controlType === \"switch\" ? \"switch\" : \"checkbox\"\n\n    return (\n      <OptionCardContext.Provider value={ctx}>\n        <TogglePrimitive.Root\n          ref={ref}\n          data-slot=\"option-card\"\n          {...{ [SLOT_ATTR]: \"option-card\" }}\n          pressed={currentPressed}\n          onPressedChange={handlePressedChange}\n          role={standaloneRole}\n          aria-checked={currentPressed}\n          aria-pressed={undefined}\n          className={mergeClasses(styles.card, className)}\n          {...props}\n        >\n          {body}\n        </TogglePrimitive.Root>\n      </OptionCardContext.Provider>\n    )\n  }\n)\n"],"names":["DEFAULT_LAYOUT","MISSING_VALUE_WARNING","OptionCardGroupContext","React","OptionCardContext","useStyles","makeVoltStyles","shorthands","tokens.spacingGroup1","tokens.spacingElement3","tokens.radiusLg","tokens.textSm","tokens.leadingSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.semAccentSoft","SLOT_ATTR","tokens.semAccentSolid","tokens.semAccentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","tokens.leadingXs","tokens.grayA11","tokens.accentA7","tokens.accentContrast","tokens.grayA3","tokens.grayContrast","CheckIcon","props","jsx","RadioGlyph","styles","CheckboxGlyph","SwitchGlyph","OptionCardGroup","className","layout","ref","ToggleGroupPrimitive.Root","mergeClasses","OptionCardControl","type","card","register","resolved","OptionCardMedia","variant","OptionCardTitle","OptionCardDescription","hasControl","children","c","OptionCardContent","jsxs","isPart","node","parts","OptionCard","value","pressed","defaultPressed","onPressedChange","group","inGroup","fallbackId","internalPressed","setInternalPressed","isControlled","currentPressed","handlePressedChange","next","groupControlType","controlType","setControlType","ctx","childArray","hasContentChild","media","rest","body","Fragment","ToggleGroupPrimitive.Item","standaloneRole","TogglePrimitive.Root"],"mappings":"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"}
+{"version":3,"file":"option-card.js","sources":["../../../src/components/option-card/option-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst DEFAULT_LAYOUT = \"grid\" as const\n\nconst MISSING_VALUE_WARNING =\n  \"OptionCard: a card inside an OptionCardGroup is missing a `value`. \" +\n  \"Give each card a unique `value` so it can be selected and controlled.\"\n\n/** The trailing control glyph an {@link OptionCard} shows for its selected state. */\nexport type OptionCardControlType = \"radio\" | \"checkbox\" | \"switch\" | \"none\"\n\nexport type OptionCardLayout = \"grid\" | \"row\" | \"column\"\n\n// ── Group context ──────────────────────────────────────────────────────────\ntype OptionCardGroupContextValue = {\n  type?: \"single\" | \"multiple\"\n  layout: OptionCardLayout\n}\nconst OptionCardGroupContext =\n  React.createContext<OptionCardGroupContextValue | null>(null)\n\n// ── Card context ───────────────────────────────────────────────────────────\ntype OptionCardContextValue = {\n  controlType: OptionCardControlType\n  registerType: (type: OptionCardControlType) => void\n}\nconst OptionCardContext = React.createContext<OptionCardContextValue | null>(\n  null\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeVoltStyles({\n  // Group layouts\n  group: {\n    // The GROUP only lays out. v1's group base class is literally \"\" -- every border, padding and\n    // interaction style below used to live here, copied from v1's CARD class onto the wrong element,\n    // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for\n    // why tsc accepted that for as long as it did.\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n\n  // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]\n  grid: {\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n  },\n  // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read\n  // as equal-weight peers regardless of their content.\n  row: {\n    gridAutoFlow: \"column\",\n    gridAutoColumns: \"minmax(0, 1fr)\",\n  },\n  // v1: plain `grid` with no template. One column, stacked.\n  column: {},\n\n  card: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.\n    ...shorthands.gap(tokens.spacingElement3),\n    overflow: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.border(\"1px\", \"solid\", \"currentColor\"),\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.375rem\"),\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA12,\n    backgroundColor: \"transparent\",\n    transitionProperty: \"color, background-color, border-color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    height: \"auto\",\n    minWidth: \"0\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.semAccentSoft,\n      ...shorthands.borderColor(tokens.accentA8),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n      ...shorthands.borderColor(tokens.semAccentSolid),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-dot\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-outer\"]`]: {\n      ...shorthands.borderColor(\"transparent\"),\n      backgroundColor: tokens.semAccentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-check\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-track\"]`]: {\n      backgroundColor: tokens.semAccentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-thumb\"]`]: {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n  },\n\n  // Media\n  mediaRoot: {\n    flexShrink: 0,\n  },\n  mediaIcon: {\n    display: \"grid\",\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    placeContent: \"center\",\n    alignSelf: \"start\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentLight,\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n  mediaIllustration: {\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    alignSelf: \"stretch\",\n    overflow: \"hidden\",\n    \"& svg\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n    },\n    \"& img\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"contain\",\n    },\n  },\n\n  // Content\n  content: {\n    display: \"grid\",\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    gridAutoRows: \"min-content\",\n    alignItems: \"center\",\n    columnGap: tokens.spacingElement2,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    [`&:has([${SLOT_ATTR}=\"option-card-control\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n\n  // Title\n  title: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    minWidth: 0,\n    alignSelf: \"center\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  // Description\n  description: {\n    gridColumnStart: 1,\n    gridRowStart: 2,\n    minWidth: 0,\n    overflowWrap: \"break-word\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA11,\n  },\n\n  // Control\n  control: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    alignSelf: \"center\",\n    justifySelf: \"end\",\n  },\n\n  // Radio glyph\n  radioOuter: {\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    transitionProperty: \"border-color\",\n    transitionDuration: \"150ms\",\n  },\n  radioDot: {\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.semAccentSolid,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Checkbox glyph\n  checkboxOuter: {\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    ...shorthands.borderRadius(\"4px\"),\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.accentContrast,\n    transitionProperty: \"background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  checkboxCheck: {\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Switch glyph\n  switchTrack: {\n    display: \"inline-flex\",\n    height: \"1.25rem\",\n    width: \"2.125rem\",\n    flexShrink: 0,\n    alignItems: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    backgroundColor: tokens.grayA3,\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n  },\n  switchThumb: {\n    display: \"block\",\n    width: \"1rem\",\n    height: \"1rem\",\n    transform: \"translateX(1px)\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.grayContrast,\n    // v1 shadow-xs; no shadow tokens in this package.\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n  },\n})\n\n// ── Control Glyphs ─────────────────────────────────────────────────────────\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n  </svg>\n)\n\nconst RadioGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.radioOuter}\n      {...{ [SLOT_ATTR]: \"option-card-radio-outer\" }}\n    >\n      <span\n        className={styles.radioDot}\n        {...{ [SLOT_ATTR]: \"option-card-radio-dot\" }}\n      />\n    </span>\n  )\n}\n\nconst CheckboxGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.checkboxOuter}\n      {...{ [SLOT_ATTR]: \"option-card-checkbox-outer\" }}\n    >\n      <CheckIcon\n        className={styles.checkboxCheck}\n        {...{ [SLOT_ATTR]: \"option-card-checkbox-check\" }}\n      />\n    </span>\n  )\n}\n\nconst SwitchGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.switchTrack}\n      {...{ [SLOT_ATTR]: \"option-card-switch-track\" }}\n    >\n      <span\n        className={styles.switchThumb}\n        {...{ [SLOT_ATTR]: \"option-card-switch-thumb\" }}\n      />\n    </span>\n  )\n}\n\n// ── OptionCardGroup ────────────────────────────────────────────────────────\n\nexport type OptionCardGroupProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Root\n> & {\n  layout?: OptionCardLayout\n}\n\nexport const OptionCardGroup = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  OptionCardGroupProps\n>(function OptionCardGroup(\n  { className, layout = DEFAULT_LAYOUT, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <OptionCardGroupContext.Provider value={{ type: props.type, layout }}>\n      <ToggleGroupPrimitive.Root\n        ref={ref}\n        data-slot=\"option-card-group\"\n        {...{ [SLOT_ATTR]: \"option-card-group\" }}\n        data-layout={layout}\n        {...(props.type === \"single\" ? { role: \"radiogroup\" } : {})}\n        className={mergeClasses(styles.group, styles[layout], className)}\n        {...props}\n      />\n    </OptionCardGroupContext.Provider>\n  )\n})\n\n// ── OptionCardControl ──────────────────────────────────────────────────────\n\nexport type OptionCardControlProps = React.ComponentProps<\"span\"> & {\n  type?: OptionCardControlType\n}\n\nexport const OptionCardControl = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardControlProps\n>(function OptionCardControl({ className, type, ...props }, ref) {\n  const styles = useStyles()\n  const card = React.useContext(OptionCardContext)\n  const register = card?.registerType\n\n  React.useEffect(() => {\n    if (type && register) register(type)\n  }, [type, register])\n\n  const resolved = type ?? card?.controlType ?? \"checkbox\"\n  if (resolved === \"none\") return null\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-control\"\n      {...{ [SLOT_ATTR]: \"option-card-control\" }}\n      className={mergeClasses(styles.control, className)}\n      {...props}\n    >\n      {resolved === \"radio\" ? (\n        <RadioGlyph />\n      ) : resolved === \"switch\" ? (\n        <SwitchGlyph />\n      ) : (\n        <CheckboxGlyph />\n      )}\n    </span>\n  )\n})\n\n// ── OptionCardMedia ────────────────────────────────────────────────────────\n\nexport type OptionCardMediaVariant = \"icon\" | \"illustration\"\n\nexport type OptionCardMediaProps = React.ComponentProps<\"span\"> & {\n  variant?: OptionCardMediaVariant\n}\n\nexport const OptionCardMedia = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardMediaProps\n>(function OptionCardMedia({ className, variant = \"icon\", ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-media\"\n      {...{ [SLOT_ATTR]: \"option-card-media\" }}\n      data-variant={variant}\n      className={mergeClasses(\n        styles.mediaRoot,\n        variant === \"illustration\"\n          ? styles.mediaIllustration\n          : styles.mediaIcon,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardTitle ────────────────────────────────────────────────────────\n\nexport type OptionCardTitleProps = React.ComponentProps<\"span\">\n\nexport const OptionCardTitle = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardTitleProps\n>(function OptionCardTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-title\"\n      {...{ [SLOT_ATTR]: \"option-card-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardDescription ──────────────────────────────────────────────────\n\nexport type OptionCardDescriptionProps = React.ComponentProps<\"span\">\n\nexport const OptionCardDescription = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardDescriptionProps\n>(function OptionCardDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-description\"\n      {...{ [SLOT_ATTR]: \"option-card-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardContent ──────────────────────────────────────────────────────\n\nexport type OptionCardContentProps = React.ComponentProps<\"span\">\n\nconst hasControl = (children: React.ReactNode) =>\n  React.Children.toArray(children).some(\n    (c) => React.isValidElement(c) && c.type === OptionCardControl\n  )\n\nexport const OptionCardContent = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardContentProps\n>(function OptionCardContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-content\"\n      {...{ [SLOT_ATTR]: \"option-card-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    >\n      {children}\n      {!hasControl(children) && <OptionCardControl />}\n    </span>\n  )\n})\n\n// ── OptionCard ─────────────────────────────────────────────────────────────\n\nexport type OptionCardProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"onChange\" | \"title\"\n> & {\n  /** Value of this option. Required inside an {@link OptionCardGroup}. */\n  value?: string\n  /** Controlled selected state for a standalone (group-less) card. */\n  pressed?: boolean\n  /** Uncontrolled default selected state for a standalone card. */\n  defaultPressed?: boolean\n  /** Fired when a standalone card is toggled. */\n  onPressedChange?: (pressed: boolean) => void\n}\n\nconst isPart = (node: React.ReactNode, ...parts: React.ElementType[]) =>\n  React.isValidElement(node) && parts.includes(node.type as React.ElementType)\n\nexport const OptionCard = React.forwardRef<HTMLButtonElement, OptionCardProps>(\n  function OptionCard(\n    {\n      className,\n      children,\n      value,\n      pressed,\n      defaultPressed,\n      onPressedChange,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const group = React.useContext(OptionCardGroupContext)\n    const inGroup = group !== null\n\n    const fallbackId = React.useId()\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      inGroup &&\n      value === undefined\n    ) {\n      console.warn(MISSING_VALUE_WARNING)\n    }\n\n    const [internalPressed, setInternalPressed] = React.useState(\n      defaultPressed ?? false\n    )\n    const isControlled = pressed !== undefined\n    const currentPressed = isControlled ? pressed : internalPressed\n    const handlePressedChange = (next: boolean) => {\n      if (!isControlled) setInternalPressed(next)\n      onPressedChange?.(next)\n    }\n\n    const groupControlType: OptionCardControlType = inGroup\n      ? group.type === \"multiple\"\n        ? \"checkbox\"\n        : \"radio\"\n      : \"checkbox\"\n    const [controlType, setControlType] =\n      React.useState<OptionCardControlType>(groupControlType)\n    const ctx = React.useMemo<OptionCardContextValue>(\n      () => ({ controlType, registerType: setControlType }),\n      [controlType]\n    )\n\n    const childArray = React.Children.toArray(children)\n    const hasContentChild = childArray.some((c) => isPart(c, OptionCardContent))\n    const media = childArray.filter((c) => isPart(c, OptionCardMedia))\n    const rest = childArray.filter((c) => !isPart(c, OptionCardMedia))\n    const content = hasContentChild ? (\n      rest\n    ) : (\n      <OptionCardContent>\n        <OptionCardTitle>{rest}</OptionCardTitle>\n      </OptionCardContent>\n    )\n\n    const body = (\n      <>\n        {media}\n        {content}\n      </>\n    )\n\n    if (inGroup) {\n      return (\n        <OptionCardContext.Provider value={ctx}>\n          <ToggleGroupPrimitive.Item\n            ref={ref}\n            data-slot=\"option-card\"\n            {...{ [SLOT_ATTR]: \"option-card\" }}\n            value={value ?? fallbackId}\n            className={mergeClasses(styles.card, className)}\n            {...props}\n          >\n            {body}\n          </ToggleGroupPrimitive.Item>\n        </OptionCardContext.Provider>\n      )\n    }\n\n    const standaloneRole = controlType === \"switch\" ? \"switch\" : \"checkbox\"\n\n    return (\n      <OptionCardContext.Provider value={ctx}>\n        <TogglePrimitive.Root\n          ref={ref}\n          data-slot=\"option-card\"\n          {...{ [SLOT_ATTR]: \"option-card\" }}\n          pressed={currentPressed}\n          onPressedChange={handlePressedChange}\n          role={standaloneRole}\n          aria-checked={currentPressed}\n          aria-pressed={undefined}\n          className={mergeClasses(styles.card, className)}\n          {...props}\n        >\n          {body}\n        </TogglePrimitive.Root>\n      </OptionCardContext.Provider>\n    )\n  }\n)\n"],"names":["DEFAULT_LAYOUT","MISSING_VALUE_WARNING","OptionCardGroupContext","React","OptionCardContext","useStyles","makeVoltStyles","shorthands","tokens.spacingGroup1","tokens.spacingElement3","tokens.radiusLg","tokens.textSm","tokens.leadingSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.semAccentSoft","SLOT_ATTR","tokens.semAccentSolid","tokens.semAccentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","tokens.leadingXs","tokens.grayA11","tokens.accentA7","tokens.accentContrast","tokens.grayA3","tokens.grayContrast","CheckIcon","props","jsxDEV","this","RadioGlyph","styles","CheckboxGlyph","SwitchGlyph","OptionCardGroup","className","layout","ref","ToggleGroupPrimitive.Root","mergeClasses","OptionCardControl","type","card","register","resolved","OptionCardMedia","variant","OptionCardTitle","OptionCardDescription","hasControl","children","c","OptionCardContent","isPart","node","parts","OptionCard","value","pressed","defaultPressed","onPressedChange","group","inGroup","fallbackId","internalPressed","setInternalPressed","isControlled","currentPressed","handlePressedChange","next","groupControlType","controlType","setControlType","ctx","childArray","hasContentChild","media","rest","content","body","Fragment","ToggleGroupPrimitive.Item","standaloneRole","TogglePrimitive.Root"],"mappings":"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"}

package/dist/components/pill/pill.js

@@ -1,14 +1,16 @@
-import { jsxs as $, jsx as O } from "react/jsx-runtime";
-import * as R from "react";
-import { shorthands as k } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as L } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as T } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as E } from "../../styles/make-styles.js";
-import { spacingGroup2 as v, spacingElement1 as g, accentA8 as I, radiusMd as P, spacingElement2 as z, fontWeightBold as A, leadingXs as B, textXs as N } from "../../tokens/index.js";
-import { ensurePaletteTokens as C } from "../../tokens/install.js";
-import { ClearButton as D } from "../../lib/clear-button.js";
-import { NS as h } from "../../tokens/core.generated.js";
-const J = [
+import { j as u } from "../../vendor/react/jsx-dev-runtime.js";
+import * as $ from "react";
+import { shorthands as R } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as k } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as E } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as O } from "../../styles/make-styles.js";
+import { spacingGroup2 as g, spacingElement1 as h, accentA8 as D, radiusMd as L, spacingElement2 as T, fontWeightBold as V, leadingXs as I, textXs as P } from "../../tokens/index.js";
+import { isCoreFamily as j } from "../../tokens/install.js";
+import { useVoltPaletteTokensFor as z } from "../../tokens/use-palette-tokens.js";
+import { ClearButton as A } from "../../lib/clear-button.js";
+import { NS as B } from "../../tokens/core.generated.js";
+import { NS as C } from "../../tokens/palette.generated.js";
+const ee = [
   "blue",
   "sky",
   "mint",
@@ -28,52 +30,52 @@ const J = [
   "warning",
   "success",
   "error"
-], p = "--volt2-pill-bg", d = "--volt2-pill-fg", c = "--volt2-pill-bd", l = "--volt2-pill-hov", e = (o, t) => `var(--volt2-${h}-sem-${o}-${t})`, G = (o, t) => `var(--volt2-${h}-${o}-${t})`, V = {
-  soft: (o) => ({
-    [p]: e(o, "soft"),
-    [d]: e(o, "light"),
+], m = "--volt2-pill-bg", p = "--volt2-pill-fg", c = "--volt2-pill-bd", n = "--volt2-pill-hov", x = (e) => j(e) ? B : C, o = (e, t) => `var(--volt2-${x(e)}-sem-${e}-${t})`, F = (e, t) => `var(--volt2-${x(e)}-${e}-${t})`, G = {
+  soft: (e) => ({
+    [m]: o(e, "soft"),
+    [p]: o(e, "light"),
     [c]: "transparent",
-    [l]: e(o, "soft-hover")
+    [n]: o(e, "soft-hover")
   }),
-  solid: (o) => ({
-    [p]: e(o, "solid"),
-    [d]: e(o, "contrast"),
+  solid: (e) => ({
+    [m]: o(e, "solid"),
+    [p]: o(e, "contrast"),
     [c]: "transparent",
-    [l]: e(o, "solid-hover")
+    [n]: o(e, "solid-hover")
   }),
-  surface: (o) => ({
-    [p]: e(o, "surface"),
-    [d]: e(o, "light"),
-    [c]: G(o, "a6"),
-    [l]: e(o, "surface-hover")
+  surface: (e) => ({
+    [m]: o(e, "surface"),
+    [p]: o(e, "light"),
+    [c]: F(e, "a6"),
+    [n]: o(e, "surface-hover")
   })
-}, W = E({
+}, W = O({
   root: {
     display: "inline-flex",
     alignItems: "center",
     // v1 `h-6` — a fixed height, not a minimum.
     height: "1.5rem",
-    gap: g,
+    gap: h,
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
-    fontSize: N,
-    lineHeight: B,
-    fontWeight: A,
-    paddingInline: z,
-    borderRadius: P,
+    fontSize: P,
+    lineHeight: I,
+    fontWeight: V,
+    paddingInline: T,
+    borderRadius: L,
     transitionProperty: "color, box-shadow, background-color",
     // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one
     // custom property; `border` and a later `borderColor` would both survive.
-    ...k.border("1px", "solid", `var(${c})`),
+    ...R.border("1px", "solid", `var(${c})`),
     // The whole point: one rule each, colour supplied per instance.
-    backgroundColor: `var(${p})`,
-    color: `var(${d})`,
+    backgroundColor: `var(${m})`,
+    color: `var(${p})`,
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: I
+      outlineColor: D
     },
     // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.
     "& > svg": {
@@ -89,72 +91,89 @@ const J = [
     cursor: "pointer",
     // The one hover rule. It reads the fourth custom property, line-picked per colour and variant
     // by VARIANT_SLOTS — never per-colour hover rules.
-    ":hover": { backgroundColor: `var(${l})` }
+    ":hover": { backgroundColor: `var(${n})` }
   },
   hasRemove: {
     // v1's `pr-1` when a clear button is present.
-    paddingRight: g
+    paddingRight: h
   },
   disabled: {
     pointerEvents: "none"
   },
   removeSize: {
     // v1's `size-4` on the composed ClearButton.
-    width: v,
-    height: v
+    width: g,
+    height: g
   }
-}), U = R.forwardRef(function({
+}), oe = $.forwardRef(function({
   className: t,
-  color: u = "accent",
-  variant: y = "soft",
+  color: y = "accent",
+  variant: S = "soft",
   disabled: r,
-  onRemove: m,
+  onRemove: f,
   onClick: i,
-  children: S,
-  ...b
-}, x) {
-  C();
-  const n = W(), w = r ? "gray" : u, s = !!i && !r, f = V[y](w);
-  return s || delete f[l], /* @__PURE__ */ $(
+  children: b,
+  ...w
+}, N) {
+  const s = W(), d = r ? "gray" : y;
+  z(d);
+  const l = !!i && !r, v = G[S](d);
+  return l || delete v[n], /* @__PURE__ */ u.jsxDEV(
     "span",
     {
-      ref: x,
+      ref: N,
       "data-slot": "pill",
-      [L]: "pill",
+      [k]: "pill",
       "data-disabled": r || void 0,
-      role: s ? "button" : void 0,
-      tabIndex: s ? 0 : void 0,
+      role: l ? "button" : void 0,
+      tabIndex: l ? 0 : void 0,
       onClick: i,
-      onKeyDown: s ? (a) => {
+      onKeyDown: l ? (a) => {
         (a.key === "Enter" || a.key === " ") && (a.preventDefault(), i == null || i(a));
       } : void 0,
-      className: T(
-        n.root,
-        s && n.interactive,
-        m && n.hasRemove,
-        r && n.disabled,
+      className: E(
+        s.root,
+        l && s.interactive,
+        f && s.hasRemove,
+        r && s.disabled,
         t
       ),
-      style: { ...f },
-      ...b,
+      style: { ...v },
+      ...w,
       children: [
-        S,
-        m && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
+        b,
+        f && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
         // fallback all live in the lib, not inline.
-        /* @__PURE__ */ O(
-          D,
+        /* @__PURE__ */ u.jsxDEV(
+          A,
           {
-            className: n.removeSize,
-            onClick: m,
+            className: s.removeSize,
+            onClick: f,
             disabled: r
-          }
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/pill/pill.tsx",
+            lineNumber: 233,
+            columnNumber: 9
+          },
+          this
         )
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/pill/pill.tsx",
+      lineNumber: 201,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  J as PILL_COLORS,
-  U as Pill
+  ee as PILL_COLORS,
+  oe as Pill
 };
 //# sourceMappingURL=pill.js.map

package/dist/components/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS } from \"../../tokens\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\n\nconst COLORS = [\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  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-pill-bg\"\nconst FG = \"--volt2-pill-fg\"\nconst BD = \"--volt2-pill-bd\"\nconst HOV = \"--volt2-pill-hov\"\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--volt2-${NS}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\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    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  // A decorative family can arrive from an expression the build cannot see, so the palette has to\n  // be present whenever this component renders at all.\n  ensurePaletteTokens()\n\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","semantic","color","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","ensurePaletteTokens","styles","resolvedColor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}
+{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useVoltPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\n\nconst COLORS = [\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  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-pill-bg\"\nconst FG = \"--volt2-pill-fg\"\nconst BD = \"--volt2-pill-bd\"\nconst HOV = \"--volt2-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it. See BADGE-PILL-NAMESPACE-FIX.md.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--volt2-${namespaceFor(color)}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--volt2-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\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    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\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) — but\n  // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n  // warning, success, error) need no palette sheet at all.\n  useVoltPaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useVoltPaletteTokensFor","interactive","jsxDEV","SLOT_ATTR","e","mergeClasses","ClearButton"],"mappings":"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"}