@fanvue/ui 2.21.0 → 3.0.0

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/**\n * Size variant for the checkbox.\n *\n * - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n *   (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n */\nexport type CheckboxSize =\n  | \"20\"\n  | \"16\"\n  /** @deprecated Use `\"20\"` instead. */\n  | \"default\"\n  /** @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). */\n  | \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-5\",\n  \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-3\",\n  \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant. @default \"20\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n    const boxSize: \"20\" | \"16\" = size === \"16\" ? \"16\" : \"20\";\n    const useSmallLabelTypography = size === \"small\";\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex shrink-0\",\n          BOX_SIZE_CLASS[boxSize],\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex items-center justify-center rounded border-2\",\n            BOX_SIZE_CLASS[boxSize],\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex items-center justify-center text-content-primary-inverted\",\n              INDICATOR_SIZE_CLASS[boxSize],\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                useSmallLabelTypography\n                  ? \"typography-semibold-body-md\"\n                  : \"typography-semibold-body-lg\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              useSmallLabelTypography ? \"typography-regular-body-sm\" : \"typography-regular-body-md\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/**\n * Size variant for the checkbox.\n *\n * - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n *   (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n */\nexport type CheckboxSize =\n  | \"20\"\n  | \"16\"\n  /** @deprecated Use `\"20\"` instead. */\n  | \"default\"\n  /** @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). */\n  | \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-5\",\n  \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-3\",\n  \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant. @default \"20\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n    const boxSize: \"20\" | \"16\" = size === \"16\" ? \"16\" : \"20\";\n    const useSmallLabelTypography = size === \"small\";\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex shrink-0\",\n          BOX_SIZE_CLASS[boxSize],\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex items-center justify-center rounded border-2\",\n            BOX_SIZE_CLASS[boxSize],\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex items-center justify-center text-content-primary-inverted\",\n              INDICATOR_SIZE_CLASS[boxSize],\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                useSmallLabelTypography\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-body-default-16px-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              useSmallLabelTypography\n                ? \"typography-description-12px-regular\"\n                : \"typography-body-small-14px-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":"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"}

package/dist/components/Chip/Chip.mjs

@@ -29,14 +29,14 @@ const Chip = React.forwardRef(
         ref,
         "data-testid": "chip",
         className: cn(
-          "typography-semibold-body-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150",
+          "typography-description-12px-semibold relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150",
           // Shape
           variant === "square" ? "rounded-xs" : "rounded-full",
           // Size
           size === "32" && "h-8 py-1",
           size === "40" && "h-10 py-2.5",
           // Variant colors
-          isDark && "bg-neutral-alphas-150 text-content-on-brand-inverted",
+          isDark && "bg-neutral-alphas-150 text-content-always-white",
           !isDark && selected && "bg-brand-primary-muted text-neutral-alphas-900",
           !isDark && !selected && !dotted && "bg-neutral-alphas-50 text-neutral-alphas-900",
           !isDark && !selected && dotted && "border border-dashed border-border-primary bg-transparent text-neutral-alphas-900",
@@ -74,7 +74,7 @@ const Chip = React.forwardRef(
               }
             )
           ] }),
-          notificationLabel && /* @__PURE__ */ jsx("span", { className: "typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted", children: notificationLabel })
+          notificationLabel && /* @__PURE__ */ jsx("span", { className: "typography-description-12px-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted", children: notificationLabel })
         ] })
       }
     );

package/dist/components/Chip/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual variant of the chip. */\nexport type ChipVariant = \"rounded\" | \"square\" | \"dark\";\n/** Height of the chip in pixels. */\nexport type ChipSize = \"32\" | \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual variant of the chip. @default \"rounded\" */\n  variant?: ChipVariant;\n  /** Height of the chip in pixels. @default \"32\" */\n  size?: ChipSize;\n  /** Whether the chip is in a selected (pressed) state. @default false */\n  selected?: boolean;\n  /** Whether the chip is disabled. @default false */\n  disabled?: boolean;\n  /** Whether to show a coloured status dot at the leading edge. @default false */\n  leftDot?: boolean;\n  /**\n   * Whether the chip uses a dashed border for add/create affordances.\n   * Has no effect when `variant=\"dark\"` or `selected` is `true`.\n   * @default false\n   */\n  dotted?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Notification badge content (e.g. `\"99+\"`). Passed as a string for i18n support. */\n  notificationLabel?: string;\n  /** Click handler — when provided, the chip renders as a `<button>` for accessibility. */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Merge props onto a child element instead of rendering a wrapper. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A compact element for filters, tags, or toggleable actions. When an `onClick`\n * handler is provided, the chip renders as an interactive `<button>` with\n * `aria-pressed` support.\n *\n * @example\n * ```tsx\n * <Chip selected onClick={toggle}>Music</Chip>\n * ```\n */\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      className,\n      variant = \"rounded\",\n      size = \"32\",\n      selected = false,\n      disabled = false,\n      leftDot = false,\n      dotted = false,\n      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"typography-semibold-body-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n          // Shape\n          variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n          // Size\n          size === \"32\" && \"h-8 py-1\",\n          size === \"40\" && \"h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-neutral-alphas-150 text-content-on-brand-inverted\",\n          !isDark && selected && \"bg-brand-primary-muted text-neutral-alphas-900\",\n          !isDark && !selected && !dotted && \"bg-neutral-alphas-50 text-neutral-alphas-900\",\n          !isDark &&\n            !selected &&\n            dotted &&\n            \"border border-dashed border-border-primary bg-transparent text-neutral-alphas-900\",\n          // Interactive\n          isInteractive && !disabled && \"cursor-pointer\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            !dotted &&\n            \"hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            dotted &&\n            \"hover:border-neutral-alphas-500 hover:bg-neutral-alphas-50 active:border-neutral-alphas-500 active:bg-neutral-alphas-50\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-neutral-alphas-400\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <>\n            <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n              {leftDot && (\n                <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n              )}\n              {leftIcon && (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              <span className=\"min-w-0 truncate\">{children}</span>\n              {rightIcon && (\n                <span\n                  className=\"flex size-5 shrink-0 items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  {rightIcon}\n                </span>\n              )}\n            </span>\n            {notificationLabel && (\n              <span className=\"typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted\">\n                {notificationLabel}\n              </span>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":[],"mappings":";;;;;AAgDO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAU,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU;AAAA,UACnC,CAAC,UACC,CAAC,YACD,UACA;AAAA;AAAA,UAEF,iBAAiB,CAAC,YAAY;AAAA,UAC9B,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,CAAC,UACD;AAAA,UACF,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,UACA;AAAA;AAAA,UAEF;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA,UACC,oBAAC,WAAA,EAAW,SAAA,CAAS,IAErB,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,0DACb,UAAA;AAAA,YAAA,WACC,oBAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,YAE9E,YACC,oBAAC,QAAA,EAAK,WAAU,6CAA4C,eAAY,QACrE,UAAA,UACH;AAAA,YAEF,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,YAC5C,aACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,qBACC,oBAAC,QAAA,EAAK,WAAU,wKACb,UAAA,kBAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Chip.mjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual variant of the chip. */\nexport type ChipVariant = \"rounded\" | \"square\" | \"dark\";\n/** Height of the chip in pixels. */\nexport type ChipSize = \"32\" | \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual variant of the chip. @default \"rounded\" */\n  variant?: ChipVariant;\n  /** Height of the chip in pixels. @default \"32\" */\n  size?: ChipSize;\n  /** Whether the chip is in a selected (pressed) state. @default false */\n  selected?: boolean;\n  /** Whether the chip is disabled. @default false */\n  disabled?: boolean;\n  /** Whether to show a coloured status dot at the leading edge. @default false */\n  leftDot?: boolean;\n  /**\n   * Whether the chip uses a dashed border for add/create affordances.\n   * Has no effect when `variant=\"dark\"` or `selected` is `true`.\n   * @default false\n   */\n  dotted?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Notification badge content (e.g. `\"99+\"`). Passed as a string for i18n support. */\n  notificationLabel?: string;\n  /** Click handler — when provided, the chip renders as a `<button>` for accessibility. */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Merge props onto a child element instead of rendering a wrapper. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A compact element for filters, tags, or toggleable actions. When an `onClick`\n * handler is provided, the chip renders as an interactive `<button>` with\n * `aria-pressed` support.\n *\n * @example\n * ```tsx\n * <Chip selected onClick={toggle}>Music</Chip>\n * ```\n */\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      className,\n      variant = \"rounded\",\n      size = \"32\",\n      selected = false,\n      disabled = false,\n      leftDot = false,\n      dotted = false,\n      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"typography-description-12px-semibold relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n          // Shape\n          variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n          // Size\n          size === \"32\" && \"h-8 py-1\",\n          size === \"40\" && \"h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-neutral-alphas-150 text-content-always-white\",\n          !isDark && selected && \"bg-brand-primary-muted text-neutral-alphas-900\",\n          !isDark && !selected && !dotted && \"bg-neutral-alphas-50 text-neutral-alphas-900\",\n          !isDark &&\n            !selected &&\n            dotted &&\n            \"border border-dashed border-border-primary bg-transparent text-neutral-alphas-900\",\n          // Interactive\n          isInteractive && !disabled && \"cursor-pointer\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            !dotted &&\n            \"hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            dotted &&\n            \"hover:border-neutral-alphas-500 hover:bg-neutral-alphas-50 active:border-neutral-alphas-500 active:bg-neutral-alphas-50\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-neutral-alphas-400\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <>\n            <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n              {leftDot && (\n                <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n              )}\n              {leftIcon && (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              <span className=\"min-w-0 truncate\">{children}</span>\n              {rightIcon && (\n                <span\n                  className=\"flex size-5 shrink-0 items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  {rightIcon}\n                </span>\n              )}\n            </span>\n            {notificationLabel && (\n              <span className=\"typography-description-12px-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted\">\n                {notificationLabel}\n              </span>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":[],"mappings":";;;;;AAgDO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAU,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU;AAAA,UACnC,CAAC,UACC,CAAC,YACD,UACA;AAAA;AAAA,UAEF,iBAAiB,CAAC,YAAY;AAAA,UAC9B,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,CAAC,UACD;AAAA,UACF,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD,UACA;AAAA;AAAA,UAEF;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA,UACC,oBAAC,WAAA,EAAW,SAAA,CAAS,IAErB,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,0DACb,UAAA;AAAA,YAAA,WACC,oBAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,YAE9E,YACC,oBAAC,QAAA,EAAK,WAAU,6CAA4C,eAAY,QACrE,UAAA,UACH;AAAA,YAEF,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,YAC5C,aACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,qBACC,oBAAC,QAAA,EAAK,WAAU,iLACb,UAAA,kBAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/Count/Count.mjs

@@ -26,17 +26,17 @@ const Count = React.forwardRef(
       {
         ref,
         className: cn(
-          "typography-semibold-body-sm inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none",
+          "typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none",
           size === "16" && "h-3 min-w-3 px-0.5 text-[8px]",
           size === "24" && "h-4 min-w-4 px-1 text-[10px]",
           size === "32" && "h-5 min-w-5 px-1.5 text-[12px]",
           variant === "default" && "bg-content-primary text-content-primary-inverted",
-          variant === "alert" && "bg-error-content text-content-on-brand-inverted",
-          variant === "brand" && "bg-brand-primary-default text-content-on-brand",
-          variant === "pink" && "bg-brand-secondary-default text-content-on-brand",
-          variant === "info" && "bg-info-content text-content-on-brand-inverted",
-          variant === "success" && "bg-success-content text-content-on-brand-inverted",
-          variant === "warning" && "bg-warning-content text-content-on-brand",
+          variant === "alert" && "bg-error-content text-content-always-white",
+          variant === "brand" && "bg-brand-primary-default text-content-always-black",
+          variant === "pink" && "bg-brand-secondary-default text-content-always-black",
+          variant === "info" && "bg-info-content text-content-always-white",
+          variant === "success" && "bg-success-content text-content-always-white",
+          variant === "warning" && "bg-warning-content text-content-always-black",
           className
         ),
         ...props,

package/dist/components/Count/Count.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"alert\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-semibold-body-sm inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-content-primary text-content-primary-inverted\",\n          variant === \"alert\" && \"bg-error-content text-content-on-brand-inverted\",\n          variant === \"brand\" && \"bg-brand-primary-default text-content-on-brand\",\n          variant === \"pink\" && \"bg-brand-secondary-default text-content-on-brand\",\n          variant === \"info\" && \"bg-info-content text-content-on-brand-inverted\",\n          variant === \"success\" && \"bg-success-content text-content-on-brand-inverted\",\n          variant === \"warning\" && \"bg-warning-content text-content-on-brand\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"alert\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-content-primary text-content-primary-inverted\",\n          variant === \"alert\" && \"bg-error-content text-content-always-white\",\n          variant === \"brand\" && \"bg-brand-primary-default text-content-always-black\",\n          variant === \"pink\" && \"bg-brand-secondary-default text-content-always-black\",\n          variant === \"info\" && \"bg-info-content text-content-always-white\",\n          variant === \"success\" && \"bg-success-content text-content-always-white\",\n          variant === \"warning\" && \"bg-warning-content text-content-always-black\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/CreatorCard/CreatorCard.mjs

@@ -10,7 +10,7 @@ const CreatorCard = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-bg-primary",
+          "relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-background-primary",
           className
         ),
         ...props,
@@ -20,7 +20,7 @@ const CreatorCard = React.forwardRef(
             "div",
             {
               className: cn(
-                "pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-bg-primary via-bg-primary/90 to-transparent",
+                "pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-background-primary via-background-primary/90 to-transparent",
                 actions ? "h-3/5" : "h-1/3"
               )
             }
@@ -38,8 +38,8 @@ const CreatorCard = React.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "typography-bold-heading-sm truncate text-content-primary", children: name }),
-                description && /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-sm truncate text-content-secondary dark:text-brand-primary-default", children: description })
+                /* @__PURE__ */ jsx("p", { className: "typography-header-heading-sm truncate text-content-primary", children: name }),
+                description && /* @__PURE__ */ jsx("p", { className: "typography-description-12px-semibold truncate text-content-secondary dark:text-brand-primary-default", children: description })
               ] })
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: actions })

package/dist/components/CreatorCard/CreatorCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CreatorCard.mjs","sources":["../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Decorative background media rendered behind the creator content. */\n  background: React.ReactNode;\n  /** Creator display name shown as the heading. */\n  name: string;\n  /** Optional secondary line shown below the name (e.g. role or tagline). */\n  description?: string;\n  /** Avatar props forwarded to the inner {@link Avatar}. */\n  avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n  /**\n   * Action buttons rendered at the bottom of the card. Pass zero, one, or two\n   * `Button` elements to render variants with no, one, or two CTAs.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * A portrait media card highlighting a creator with avatar, name, optional\n * tagline, and up to two stacked action buttons over a background image.\n *\n * Pass zero, one, or two {@link Button} elements via `actions` to render the\n * no-button, single-button, or two-button variants.\n *\n * @example\n * ```tsx\n * <CreatorCard\n *   background={<img src=\"/creator.jpg\" alt=\"\" />}\n *   name=\"Jane Doe\"\n *   description=\"MODEL & PODCASTER\"\n *   avatar={{ src: \"/avatar.jpg\", alt: \"Jane Doe\", fallback: \"JD\" }}\n *   actions={\n *     <>\n *       <Button variant=\"brand\" fullWidth>Join for free for 3 days</Button>\n *       <Button variant=\"primary\" fullWidth>Follow for Free</Button>\n *     </>\n *   }\n * />\n * ```\n */\nexport const CreatorCard = React.forwardRef<HTMLDivElement, CreatorCardProps>(\n  ({ className, background, name, description, avatar, actions, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-bg-primary\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"pointer-events-none absolute inset-0 h-full w-full select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n          {background}\n        </div>\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-bg-primary via-bg-primary/90 to-transparent\",\n            actions ? \"h-3/5\" : \"h-1/3\",\n          )}\n        />\n        <div className=\"relative flex flex-col gap-4 p-4\">\n          <div className=\"flex items-center gap-4\">\n            <Avatar\n              size={48}\n              src={avatar?.src}\n              alt={avatar?.alt ?? name}\n              fallback={avatar?.fallback}\n              {...avatar}\n            />\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"typography-bold-heading-sm truncate text-content-primary\">{name}</p>\n              {description && (\n                <p className=\"typography-semibold-body-sm truncate text-content-secondary dark:text-brand-primary-default\">\n                  {description}\n                </p>\n              )}\n            </div>\n          </div>\n          {actions && <div className=\"flex flex-col gap-2\">{actions}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorCard.displayName = \"CreatorCard\";\n"],"names":[],"mappings":";;;;;AA2CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,QAAQ,SAAS,GAAG,MAAA,GAAS,QAAQ;AAChF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,gIACZ,UAAA,YACH;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,UAAU;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAEF,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,OAAO;AAAA,kBACpB,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,gBAAA,oBAAC,KAAA,EAAE,WAAU,4DAA4D,UAAA,MAAK;AAAA,gBAC7E,eACC,oBAAC,KAAA,EAAE,WAAU,+FACV,UAAA,YAAA,CACH;AAAA,cAAA,EAAA,CAEJ;AAAA,YAAA,GACF;AAAA,YACC,WAAW,oBAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"CreatorCard.mjs","sources":["../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Decorative background media rendered behind the creator content. */\n  background: React.ReactNode;\n  /** Creator display name shown as the heading. */\n  name: string;\n  /** Optional secondary line shown below the name (e.g. role or tagline). */\n  description?: string;\n  /** Avatar props forwarded to the inner {@link Avatar}. */\n  avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n  /**\n   * Action buttons rendered at the bottom of the card. Pass zero, one, or two\n   * `Button` elements to render variants with no, one, or two CTAs.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * A portrait media card highlighting a creator with avatar, name, optional\n * tagline, and up to two stacked action buttons over a background image.\n *\n * Pass zero, one, or two {@link Button} elements via `actions` to render the\n * no-button, single-button, or two-button variants.\n *\n * @example\n * ```tsx\n * <CreatorCard\n *   background={<img src=\"/creator.jpg\" alt=\"\" />}\n *   name=\"Jane Doe\"\n *   description=\"MODEL & PODCASTER\"\n *   avatar={{ src: \"/avatar.jpg\", alt: \"Jane Doe\", fallback: \"JD\" }}\n *   actions={\n *     <>\n *       <Button variant=\"brand\" fullWidth>Join for free for 3 days</Button>\n *       <Button variant=\"primary\" fullWidth>Follow for Free</Button>\n *     </>\n *   }\n * />\n * ```\n */\nexport const CreatorCard = React.forwardRef<HTMLDivElement, CreatorCardProps>(\n  ({ className, background, name, description, avatar, actions, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-background-primary\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"pointer-events-none absolute inset-0 h-full w-full select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n          {background}\n        </div>\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-background-primary via-background-primary/90 to-transparent\",\n            actions ? \"h-3/5\" : \"h-1/3\",\n          )}\n        />\n        <div className=\"relative flex flex-col gap-4 p-4\">\n          <div className=\"flex items-center gap-4\">\n            <Avatar\n              size={48}\n              src={avatar?.src}\n              alt={avatar?.alt ?? name}\n              fallback={avatar?.fallback}\n              {...avatar}\n            />\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"typography-header-heading-sm truncate text-content-primary\">{name}</p>\n              {description && (\n                <p className=\"typography-description-12px-semibold truncate text-content-secondary dark:text-brand-primary-default\">\n                  {description}\n                </p>\n              )}\n            </div>\n          </div>\n          {actions && <div className=\"flex flex-col gap-2\">{actions}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorCard.displayName = \"CreatorCard\";\n"],"names":[],"mappings":";;;;;AA2CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,QAAQ,SAAS,GAAG,MAAA,GAAS,QAAQ;AAChF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,gIACZ,UAAA,YACH;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,UAAU;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAEF,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,OAAO;AAAA,kBACpB,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,gBAAA,oBAAC,KAAA,EAAE,WAAU,8DAA8D,UAAA,MAAK;AAAA,gBAC/E,eACC,oBAAC,KAAA,EAAE,WAAU,wGACV,UAAA,YAAA,CACH;AAAA,cAAA,EAAA,CAEJ;AAAA,YAAA,GACF;AAAA,YACC,WAAW,oBAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/CreatorCover/CreatorCover.mjs

@@ -17,7 +17,7 @@ const CreatorCover = React.forwardRef(
         "aria-labelledby": headingId,
         "data-testid": "creator-cover",
         className: cn(
-          "relative isolate w-full overflow-hidden bg-white dark:bg-bg-primary",
+          "relative isolate w-full overflow-hidden bg-white dark:bg-background-primary",
           className
         ),
         ...props,
@@ -32,8 +32,8 @@ const CreatorCover = React.forwardRef(
                 className: "size-full scale-110 object-cover blur-3xl"
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-white/30 to-white/15 dark:from-bg-primary/30 dark:to-bg-primary/15" }),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-white dark:to-bg-primary" })
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-white/30 to-white/15 dark:from-background-primary/30 dark:to-background-primary/15" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-white dark:to-background-primary" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-90 flex-col items-center gap-4 px-4 pt-17 pb-16"), children: [
             /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -49,8 +49,8 @@ const CreatorCover = React.forwardRef(
               renderedTag ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2", children: renderedTag }) : null
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 pt-4 text-center", children: [
-              /* @__PURE__ */ jsx("h2", { id: headingId, className: "typography-bold-heading-md m-0 text-white", children: name }),
-              tagline ? /* @__PURE__ */ jsx("p", { className: "typography-semibold-badge m-0 text-brand-primary-default uppercase", children: tagline }) : null
+              /* @__PURE__ */ jsx("h2", { id: headingId, className: "typography-header-heading-md m-0 text-white", children: name }),
+              tagline ? /* @__PURE__ */ jsx("p", { className: "typography-badge-badgecaps m-0 text-brand-primary-default uppercase", children: tagline }) : null
             ] }),
             action ? /* @__PURE__ */ jsx("div", { className: "w-full pt-2", children: action }) : null
           ] })

package/dist/components/CreatorCover/CreatorCover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CreatorCover.mjs","sources":["../../../src/components/CreatorCover/CreatorCover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Pill } from \"../Pill/Pill\";\n\n/** Slot that accepts a string (rendered as default styling) or a node for full control. */\nexport type CreatorCoverSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n  return typeof value === \"string\" && value.length > 0;\n}\n\nexport interface CreatorCoverProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** URL of the creator image displayed in the centre card. Also used as the blurred backdrop unless `backgroundSrc` is provided. */\n  imageSrc: string;\n  /** Alt text for the centre cover image. @default \"\" */\n  imageAlt?: string;\n  /** Override URL used for the blurred background image. @default `imageSrc` */\n  backgroundSrc?: string;\n  /** Creator's name, rendered as the heading. */\n  name: string;\n  /** Smaller subtitle below the name (e.g. \"GLOBAL POPSTAR\"). Rendered uppercase in the brand colour. */\n  tagline?: string;\n  /**\n   * Status label rendered as a pill overlapping the bottom of the cover image (e.g. \"New Joiner\").\n   * Strings render with default green pill styling; pass a node for custom markup.\n   */\n  tag?: CreatorCoverSlot;\n  /**\n   * Primary call to action displayed below the title.\n   */\n  action?: React.ReactNode;\n  /** When `true`, fades the bottom of the component to transparent and increases bottom padding to 64px. @default false */\n  fadeBottom?: boolean;\n}\n\n/**\n * A creator profile hero with a stylised blurred backdrop, central cover image,\n * status pill, name, tagline, and primary call to action.\n *\n * @example\n * ```tsx\n * <CreatorCover\n *   imageSrc=\"/creator.jpg\"\n *   imageAlt=\"Jane Doe\"\n *   name=\"JANE DOE\"\n *   tagline=\"GLOBAL POPSTAR\"\n *   tag=\"New Joiner\"\n *   action={<Button variant=\"primary\" size=\"48\" fullWidth>Join for free for 7 days</Button>}\n * />\n * ```\n */\nexport const CreatorCover = React.forwardRef<HTMLElement, CreatorCoverProps>(\n  (\n    { className, imageSrc, imageAlt = \"\", backgroundSrc, name, tagline, tag, action, ...props },\n    ref,\n  ) => {\n    const headingId = React.useId();\n\n    const renderedTag = isNonEmptyString(tag) ? <Pill variant=\"brand\">{tag}</Pill> : tag;\n\n    return (\n      <section\n        ref={ref}\n        aria-labelledby={headingId}\n        data-testid=\"creator-cover\"\n        className={cn(\n          \"relative isolate w-full overflow-hidden bg-white dark:bg-bg-primary\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"absolute inset-0 -z-10\">\n          <img\n            src={backgroundSrc ?? imageSrc}\n            alt=\"\"\n            loading=\"lazy\"\n            className=\"size-full scale-110 object-cover blur-3xl\"\n          />\n          <div className=\"absolute inset-0 bg-linear-to-b from-white/30 to-white/15 dark:from-bg-primary/30 dark:to-bg-primary/15\" />\n          <div className=\"absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-white dark:to-bg-primary\" />\n        </div>\n        <div className={cn(\"mx-auto flex max-w-90 flex-col items-center gap-4 px-4 pt-17 pb-16\")}>\n          <div className=\"relative\">\n            <img\n              src={imageSrc}\n              alt={imageAlt}\n              loading=\"lazy\"\n              className=\"block h-55 w-37.5 rounded-lg object-cover\"\n            />\n            {renderedTag ? (\n              <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2\">\n                {renderedTag}\n              </div>\n            ) : null}\n          </div>\n          <div className=\"flex flex-col items-center gap-1 pt-4 text-center\">\n            <h2 id={headingId} className=\"typography-bold-heading-md m-0 text-white\">\n              {name}\n            </h2>\n            {tagline ? (\n              <p className=\"typography-semibold-badge m-0 text-brand-primary-default uppercase\">\n                {tagline}\n              </p>\n            ) : null}\n          </div>\n          {action ? <div className=\"w-full pt-2\">{action}</div> : null}\n        </div>\n      </section>\n    );\n  },\n);\n\nCreatorCover.displayName = \"CreatorCover\";\n"],"names":[],"mappings":";;;;;AAOA,SAAS,iBAAiB,OAAiC;AACzD,SAAO,OAAO,UAAU,YAAY,MAAM,SAAS;AACrD;AA0CO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE,EAAE,WAAW,UAAU,WAAW,IAAI,eAAe,MAAM,SAAS,KAAK,QAAQ,GAAG,MAAA,GACpF,QACG;AACH,UAAM,YAAY,MAAM,MAAA;AAExB,UAAM,cAAc,iBAAiB,GAAG,wBAAK,MAAA,EAAK,SAAQ,SAAS,UAAA,IAAA,CAAI,IAAU;AAEjF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,mBAAiB;AAAA,QACjB,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,iBAAiB;AAAA,gBACtB,KAAI;AAAA,gBACJ,SAAQ;AAAA,gBACR,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZ,oBAAC,OAAA,EAAI,WAAU,0GAAA,CAA0G;AAAA,YACzH,oBAAC,OAAA,EAAI,WAAU,gGAAA,CAAgG;AAAA,UAAA,GACjH;AAAA,UACA,qBAAC,OAAA,EAAI,WAAW,GAAG,oEAAoE,GACrF,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,cACC,oBAAC,OAAA,EAAI,WAAU,+DACZ,uBACH,IACE;AAAA,YAAA,GACN;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,cAAA,oBAAC,MAAA,EAAG,IAAI,WAAW,WAAU,6CAC1B,UAAA,MACH;AAAA,cACC,UACC,oBAAC,KAAA,EAAE,WAAU,sEACV,mBACH,IACE;AAAA,YAAA,GACN;AAAA,YACC,SAAS,oBAAC,OAAA,EAAI,WAAU,eAAe,kBAAO,IAAS;AAAA,UAAA,EAAA,CAC1D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"CreatorCover.mjs","sources":["../../../src/components/CreatorCover/CreatorCover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Pill } from \"../Pill/Pill\";\n\n/** Slot that accepts a string (rendered as default styling) or a node for full control. */\nexport type CreatorCoverSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n  return typeof value === \"string\" && value.length > 0;\n}\n\nexport interface CreatorCoverProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** URL of the creator image displayed in the centre card. Also used as the blurred backdrop unless `backgroundSrc` is provided. */\n  imageSrc: string;\n  /** Alt text for the centre cover image. @default \"\" */\n  imageAlt?: string;\n  /** Override URL used for the blurred background image. @default `imageSrc` */\n  backgroundSrc?: string;\n  /** Creator's name, rendered as the heading. */\n  name: string;\n  /** Smaller subtitle below the name (e.g. \"GLOBAL POPSTAR\"). Rendered uppercase in the brand colour. */\n  tagline?: string;\n  /**\n   * Status label rendered as a pill overlapping the bottom of the cover image (e.g. \"New Joiner\").\n   * Strings render with default green pill styling; pass a node for custom markup.\n   */\n  tag?: CreatorCoverSlot;\n  /**\n   * Primary call to action displayed below the title.\n   */\n  action?: React.ReactNode;\n  /** When `true`, fades the bottom of the component to transparent and increases bottom padding to 64px. @default false */\n  fadeBottom?: boolean;\n}\n\n/**\n * A creator profile hero with a stylised blurred backdrop, central cover image,\n * status pill, name, tagline, and primary call to action.\n *\n * @example\n * ```tsx\n * <CreatorCover\n *   imageSrc=\"/creator.jpg\"\n *   imageAlt=\"Jane Doe\"\n *   name=\"JANE DOE\"\n *   tagline=\"GLOBAL POPSTAR\"\n *   tag=\"New Joiner\"\n *   action={<Button variant=\"primary\" size=\"48\" fullWidth>Join for free for 7 days</Button>}\n * />\n * ```\n */\nexport const CreatorCover = React.forwardRef<HTMLElement, CreatorCoverProps>(\n  (\n    { className, imageSrc, imageAlt = \"\", backgroundSrc, name, tagline, tag, action, ...props },\n    ref,\n  ) => {\n    const headingId = React.useId();\n\n    const renderedTag = isNonEmptyString(tag) ? <Pill variant=\"brand\">{tag}</Pill> : tag;\n\n    return (\n      <section\n        ref={ref}\n        aria-labelledby={headingId}\n        data-testid=\"creator-cover\"\n        className={cn(\n          \"relative isolate w-full overflow-hidden bg-white dark:bg-background-primary\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"absolute inset-0 -z-10\">\n          <img\n            src={backgroundSrc ?? imageSrc}\n            alt=\"\"\n            loading=\"lazy\"\n            className=\"size-full scale-110 object-cover blur-3xl\"\n          />\n          <div className=\"absolute inset-0 bg-linear-to-b from-white/30 to-white/15 dark:from-background-primary/30 dark:to-background-primary/15\" />\n          <div className=\"absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-white dark:to-background-primary\" />\n        </div>\n        <div className={cn(\"mx-auto flex max-w-90 flex-col items-center gap-4 px-4 pt-17 pb-16\")}>\n          <div className=\"relative\">\n            <img\n              src={imageSrc}\n              alt={imageAlt}\n              loading=\"lazy\"\n              className=\"block h-55 w-37.5 rounded-lg object-cover\"\n            />\n            {renderedTag ? (\n              <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2\">\n                {renderedTag}\n              </div>\n            ) : null}\n          </div>\n          <div className=\"flex flex-col items-center gap-1 pt-4 text-center\">\n            <h2 id={headingId} className=\"typography-header-heading-md m-0 text-white\">\n              {name}\n            </h2>\n            {tagline ? (\n              <p className=\"typography-badge-badgecaps m-0 text-brand-primary-default uppercase\">\n                {tagline}\n              </p>\n            ) : null}\n          </div>\n          {action ? <div className=\"w-full pt-2\">{action}</div> : null}\n        </div>\n      </section>\n    );\n  },\n);\n\nCreatorCover.displayName = \"CreatorCover\";\n"],"names":[],"mappings":";;;;;AAOA,SAAS,iBAAiB,OAAiC;AACzD,SAAO,OAAO,UAAU,YAAY,MAAM,SAAS;AACrD;AA0CO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE,EAAE,WAAW,UAAU,WAAW,IAAI,eAAe,MAAM,SAAS,KAAK,QAAQ,GAAG,MAAA,GACpF,QACG;AACH,UAAM,YAAY,MAAM,MAAA;AAExB,UAAM,cAAc,iBAAiB,GAAG,wBAAK,MAAA,EAAK,SAAQ,SAAS,UAAA,IAAA,CAAI,IAAU;AAEjF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,mBAAiB;AAAA,QACjB,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,iBAAiB;AAAA,gBACtB,KAAI;AAAA,gBACJ,SAAQ;AAAA,gBACR,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZ,oBAAC,OAAA,EAAI,WAAU,0HAAA,CAA0H;AAAA,YACzI,oBAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,UAAA,GACzH;AAAA,UACA,qBAAC,OAAA,EAAI,WAAW,GAAG,oEAAoE,GACrF,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,cACC,oBAAC,OAAA,EAAI,WAAU,+DACZ,uBACH,IACE;AAAA,YAAA,GACN;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,cAAA,oBAAC,MAAA,EAAG,IAAI,WAAW,WAAU,+CAC1B,UAAA,MACH;AAAA,cACC,UACC,oBAAC,KAAA,EAAE,WAAU,uEACV,mBACH,IACE;AAAA,YAAA,GACN;AAAA,YACC,SAAS,oBAAC,OAAA,EAAI,WAAU,eAAe,kBAAO,IAAS;AAAA,UAAA,EAAA,CAC1D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}

package/dist/components/CreatorTile/CreatorTile.mjs

@@ -38,8 +38,8 @@ const CreatorTile = React.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-lg m-0 truncate text-white", children: name }),
-                tagline ? /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-md m-0 truncate text-white/50", children: tagline }) : null
+                /* @__PURE__ */ jsx("p", { className: "typography-body-default-16px-semibold m-0 truncate text-white", children: name }),
+                tagline ? /* @__PURE__ */ jsx("p", { className: "typography-body-small-14px-semibold m-0 truncate text-white/50", children: tagline }) : null
               ] })
             ] }),
             action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null

package/dist/components/CreatorTile/CreatorTile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CreatorTile.mjs","sources":["../../../src/components/CreatorTile/CreatorTile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\n/** Width-to-height ratio preset for the tile. */\nexport type CreatorTileAspectRatio = \"tall\" | \"medium\" | \"short\";\n\nconst ASPECT_RATIO_CLASSES: Record<CreatorTileAspectRatio, string> = {\n  tall: \"aspect-5/4\",\n  medium: \"aspect-3/2\",\n  short: \"aspect-9/5\",\n};\n\nexport interface CreatorTileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Decorative background media rendered behind the creator content. */\n  background: React.ReactNode;\n  /** Creator display name shown as the prominent heading. */\n  name: React.ReactNode;\n  /** Optional secondary line shown under the name (e.g. handle or tagline). */\n  tagline?: React.ReactNode;\n  /** Avatar props forwarded to the inner {@link Avatar}. */\n  avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n  /**\n   * Action element rendered on the right of the profile row (e.g. a `Button`\n   * for following the creator).\n   */\n  action?: React.ReactNode;\n  /**\n   * Width-to-height ratio preset.\n   *\n   * - `tall` – 1:2 narrow portrait\n   * - `medium` – 361:200 landscape banner (default)\n   * - `short` – 4:5 closer to square\n   *\n   * @default \"medium\"\n   */\n  aspectRatio?: CreatorTileAspectRatio;\n}\n\n/**\n * A visual highlight tile showcasing a creator with a full-bleed background\n * media and an overlaid profile row containing an avatar, name, optional\n * tagline and an action element.\n *\n * @example\n * ```tsx\n * <CreatorTile\n *   background={<img src=\"/creator.jpg\" alt=\"\" />}\n *   avatar={{ src: \"/avatar.jpg\", alt: \"Aitana Lopez\", fallback: \"AL\" }}\n *   name=\"Aitana Lopez\"\n *   tagline=\"@fit_aitana\"\n *   action={<Button variant=\"primary\">Follow</Button>}\n * />\n * ```\n */\nexport const CreatorTile = React.forwardRef<HTMLDivElement, CreatorTileProps>(\n  (\n    { className, background, name, tagline, avatar, action, aspectRatio = \"medium\", ...props },\n    ref,\n  ) => {\n    const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex w-full flex-col justify-end overflow-hidden\",\n          aspectClass,\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n          {background}\n        </div>\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 rounded-b-[inherit] bg-linear-to-t from-black/60 to-transparent\" />\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden rounded-b-[inherit] backdrop-blur-md [-webkit-mask-image:linear-gradient(to_top,black,transparent)] [mask-image:linear-gradient(to_top,black,transparent)]\" />\n        <div className=\"relative flex items-center justify-between gap-4 p-4\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <Avatar\n              size={40}\n              src={avatar?.src}\n              alt={avatar?.alt ?? (typeof name === \"string\" ? name : undefined)}\n              fallback={avatar?.fallback}\n              {...avatar}\n            />\n            <div className=\"flex min-w-0 flex-col\">\n              <p className=\"typography-semibold-body-lg m-0 truncate text-white\">{name}</p>\n              {tagline ? (\n                <p className=\"typography-semibold-body-md m-0 truncate text-white/50\">{tagline}</p>\n              ) : null}\n            </div>\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorTile.displayName = \"CreatorTile\";\n"],"names":[],"mappings":";;;;;AAOA,MAAM,uBAA+D;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AA4CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,WAAW,YAAY,MAAM,SAAS,QAAQ,QAAQ,cAAc,UAAU,GAAG,MAAA,GACnF,QACG;AACH,UAAM,cAAc,qBAAqB,WAAW;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kHACZ,UAAA,YACH;AAAA,UACA,oBAAC,OAAA,EAAI,WAAU,wHAAA,CAAwH;AAAA,UACvI,oBAAC,OAAA,EAAI,WAAU,mOAAA,CAAmO;AAAA,UAClP,qBAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;AAAA,kBACvD,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,gBAAA,oBAAC,KAAA,EAAE,WAAU,uDAAuD,UAAA,MAAK;AAAA,gBACxE,UACC,oBAAC,KAAA,EAAE,WAAU,0DAA0D,mBAAQ,IAC7E;AAAA,cAAA,EAAA,CACN;AAAA,YAAA,GACF;AAAA,YACC,SAAS,oBAAC,OAAA,EAAI,WAAU,YAAY,kBAAO,IAAS;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"CreatorTile.mjs","sources":["../../../src/components/CreatorTile/CreatorTile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\n/** Width-to-height ratio preset for the tile. */\nexport type CreatorTileAspectRatio = \"tall\" | \"medium\" | \"short\";\n\nconst ASPECT_RATIO_CLASSES: Record<CreatorTileAspectRatio, string> = {\n  tall: \"aspect-5/4\",\n  medium: \"aspect-3/2\",\n  short: \"aspect-9/5\",\n};\n\nexport interface CreatorTileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Decorative background media rendered behind the creator content. */\n  background: React.ReactNode;\n  /** Creator display name shown as the prominent heading. */\n  name: React.ReactNode;\n  /** Optional secondary line shown under the name (e.g. handle or tagline). */\n  tagline?: React.ReactNode;\n  /** Avatar props forwarded to the inner {@link Avatar}. */\n  avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n  /**\n   * Action element rendered on the right of the profile row (e.g. a `Button`\n   * for following the creator).\n   */\n  action?: React.ReactNode;\n  /**\n   * Width-to-height ratio preset.\n   *\n   * - `tall` – 1:2 narrow portrait\n   * - `medium` – 361:200 landscape banner (default)\n   * - `short` – 4:5 closer to square\n   *\n   * @default \"medium\"\n   */\n  aspectRatio?: CreatorTileAspectRatio;\n}\n\n/**\n * A visual highlight tile showcasing a creator with a full-bleed background\n * media and an overlaid profile row containing an avatar, name, optional\n * tagline and an action element.\n *\n * @example\n * ```tsx\n * <CreatorTile\n *   background={<img src=\"/creator.jpg\" alt=\"\" />}\n *   avatar={{ src: \"/avatar.jpg\", alt: \"Aitana Lopez\", fallback: \"AL\" }}\n *   name=\"Aitana Lopez\"\n *   tagline=\"@fit_aitana\"\n *   action={<Button variant=\"primary\">Follow</Button>}\n * />\n * ```\n */\nexport const CreatorTile = React.forwardRef<HTMLDivElement, CreatorTileProps>(\n  (\n    { className, background, name, tagline, avatar, action, aspectRatio = \"medium\", ...props },\n    ref,\n  ) => {\n    const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex w-full flex-col justify-end overflow-hidden\",\n          aspectClass,\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n          {background}\n        </div>\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 rounded-b-[inherit] bg-linear-to-t from-black/60 to-transparent\" />\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden rounded-b-[inherit] backdrop-blur-md [-webkit-mask-image:linear-gradient(to_top,black,transparent)] [mask-image:linear-gradient(to_top,black,transparent)]\" />\n        <div className=\"relative flex items-center justify-between gap-4 p-4\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <Avatar\n              size={40}\n              src={avatar?.src}\n              alt={avatar?.alt ?? (typeof name === \"string\" ? name : undefined)}\n              fallback={avatar?.fallback}\n              {...avatar}\n            />\n            <div className=\"flex min-w-0 flex-col\">\n              <p className=\"typography-body-default-16px-semibold m-0 truncate text-white\">\n                {name}\n              </p>\n              {tagline ? (\n                <p className=\"typography-body-small-14px-semibold m-0 truncate text-white/50\">\n                  {tagline}\n                </p>\n              ) : null}\n            </div>\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorTile.displayName = \"CreatorTile\";\n"],"names":[],"mappings":";;;;;AAOA,MAAM,uBAA+D;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AA4CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,WAAW,YAAY,MAAM,SAAS,QAAQ,QAAQ,cAAc,UAAU,GAAG,MAAA,GACnF,QACG;AACH,UAAM,cAAc,qBAAqB,WAAW;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kHACZ,UAAA,YACH;AAAA,UACA,oBAAC,OAAA,EAAI,WAAU,wHAAA,CAAwH;AAAA,UACvI,oBAAC,OAAA,EAAI,WAAU,mOAAA,CAAmO;AAAA,UAClP,qBAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;AAAA,kBACvD,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,gBAAA,oBAAC,KAAA,EAAE,WAAU,iEACV,UAAA,MACH;AAAA,gBACC,UACC,oBAAC,KAAA,EAAE,WAAU,kEACV,mBACH,IACE;AAAA,cAAA,EAAA,CACN;AAAA,YAAA,GACF;AAAA,YACC,SAAS,oBAAC,OAAA,EAAI,WAAU,YAAY,kBAAO,IAAS;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/DatePicker/DatePicker.mjs

@@ -34,12 +34,12 @@ function DayButton({ day, modifiers, className, ...buttonProps }) {
       type: "button",
       className: cn(
         "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-xs",
-        "typography-regular-body-md",
+        "typography-body-small-14px-regular",
         "transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted",
         "focus-visible:outline-2 focus-visible:outline-brand-secondary-default focus-visible:outline-offset-[-2px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         modifiers.today && !modifiers.selected && "border border-brand-primary-default",
-        modifiers.selected && !modifiers.range_middle ? "bg-brand-primary-default text-content-on-brand hover:bg-brand-primary-default" : "text-content-primary",
+        modifiers.selected && !modifiers.range_middle ? "bg-brand-primary-default text-content-always-black hover:bg-brand-primary-default" : "text-content-primary",
         modifiers.range_middle && "rounded-none bg-transparent",
         modifiers.outside && "pointer-events-none opacity-50"
       ),
@@ -89,7 +89,7 @@ const DatePicker = forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-bg-primary shadow-blur-menu backdrop-blur-sm",
+          "inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-background-primary shadow-blur-menu backdrop-blur-sm",
           className
         ),
         children: [
@@ -107,7 +107,7 @@ const DatePicker = forwardRef(
                 months: "relative flex",
                 month: "flex flex-1 flex-col",
                 month_caption: cn("flex items-center py-4", isMulti ? "justify-center px-2" : "px-5"),
-                caption_label: "typography-semibold-body-lg text-content-primary",
+                caption_label: "typography-body-default-16px-semibold text-content-primary",
                 nav: cn(
                   "absolute top-4 z-20 flex",
                   isMulti ? "pointer-events-none inset-x-3 justify-between" : "right-3 gap-1"
@@ -118,7 +118,7 @@ const DatePicker = forwardRef(
                 // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
                 month_grid: cn("mb-4", isMulti ? "mx-2" : "mx-4"),
                 weekdays: "flex",
-                weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-regular-body-md text-content-secondary",
+                weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary",
                 week: "flex overflow-hidden rounded-xs",
                 day: "relative flex w-10 flex-1 items-center justify-center",
                 range_middle: "bg-brand-primary-muted",

package/dist/components/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport {\n  type ChevronProps,\n  type DateRange,\n  type DayButtonProps,\n  DayPicker,\n  type DayPickerProps,\n  type DayProps,\n  type Modifiers,\n  type MonthGridProps,\n  type WeekdayProps,\n  type WeekdaysProps,\n  type WeekProps,\n  type WeeksProps,\n} from \"react-day-picker\";\nimport { cn } from \"../../utils/cn\";\nimport type { OmitDistributed } from \"../../utils/types\";\nimport { Button } from \"../Button/Button\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport type { DateRange }; // Needed by consumers when passing props\n\n/** Layout variant — single or side-by-side month display. */\nexport type DatePickerVariant = \"single\" | \"double\";\n\n/** Props specific to the DatePicker wrapper (not inherited from react-day-picker). */\nexport interface DatePickerOwnProps {\n  /** Display one month or two side-by-side. @default \"single\" */\n  variant?: DatePickerVariant;\n  /** Callback fired when the Apply button is clicked. */\n  onApply?: () => void;\n  /** Callback fired when the Cancel button is clicked. */\n  onCancel?: () => void;\n  /** Label for the cancel button. @default \"Cancel\" */\n  cancelLabel?: string;\n  /** Label for the apply button. @default \"Apply\" */\n  applyLabel?: string;\n  /** Whether to render the cancel / apply footer buttons. @default true */\n  showFooter?: boolean;\n  /** Additional CSS class name for the outer container. */\n  className?: string;\n}\n\nfunction Day({ day, modifiers, className, ...divProps }: DayProps) {\n  const { range_start, range_end } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n\n  return (\n    <div\n      className={cn(\n        className,\n        (range_start || range_end) && !isSingleDayRange && \"from-50% from-transparent to-50%\",\n        range_start && !isSingleDayRange && \"bg-linear-to-r to-brand-primary-muted\",\n        range_end && !isSingleDayRange && \"bg-linear-to-l to-brand-primary-muted\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-xs\",\n        \"typography-regular-body-md\",\n        \"transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted\",\n        \"focus-visible:outline-2 focus-visible:outline-brand-secondary-default focus-visible:outline-offset-[-2px]\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        modifiers.today && !modifiers.selected && \"border border-brand-primary-default\",\n        modifiers.selected && !modifiers.range_middle\n          ? \"bg-brand-primary-default text-content-on-brand hover:bg-brand-primary-default\"\n          : \"text-content-primary\",\n        modifiers.range_middle && \"rounded-none bg-transparent\",\n        modifiers.outside && \"pointer-events-none opacity-50\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\n/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\n/**\n * A calendar date picker supporting single-date and date-range selection with\n * optional side-by-side month display and footer action buttons.\n *\n * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all\n * `DayPickerProps` (except `numberOfMonths`) are forwarded.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   mode=\"range\"\n *   type=\"double\"\n *   selected={range}\n *   onSelect={setRange}\n *   onApply={save}\n *   onCancel={close}\n * />\n * ```\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      variant = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = variant === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    // Wrap onSelect for range mode: when clicking inside a complete range,\n    // move the nearest boundary instead of always resetting the end date.\n    const resolvedDayPickerProps = (() => {\n      if (dayPickerProps.mode !== \"range\") return dayPickerProps;\n\n      const { selected, onSelect } = dayPickerProps as {\n        selected?: DateRange;\n        onSelect?: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => void;\n      };\n\n      if (!onSelect || !selected?.from || !selected?.to) return dayPickerProps;\n\n      const { from, to } = selected;\n\n      return {\n        ...dayPickerProps,\n        onSelect: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => {\n          const clickedTime = triggerDate.getTime();\n          const fromTime = from.getTime();\n          const toTime = to.getTime();\n\n          if (clickedTime > fromTime && clickedTime < toTime) {\n            if (clickedTime - fromTime <= toTime - clickedTime) {\n              onSelect({ from: triggerDate, to }, triggerDate, modifiers, e);\n            } else {\n              onSelect({ from, to: triggerDate }, triggerDate, modifiers, e);\n            }\n            return;\n          }\n\n          onSelect(range, triggerDate, modifiers, e);\n        },\n      } as typeof dayPickerProps;\n    })();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-bg-primary shadow-blur-menu backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: \"relative flex\",\n            month: \"flex flex-1 flex-col\",\n            month_caption: cn(\"flex items-center py-4\", isMulti ? \"justify-center px-2\" : \"px-5\"),\n            caption_label: \"typography-semibold-body-lg text-content-primary\",\n            nav: cn(\n              \"absolute top-4 z-20 flex\",\n              isMulti ? \"pointer-events-none inset-x-3 justify-between\" : \"right-3 gap-1\",\n            ),\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            month_grid: cn(\"mb-4\", isMulti ? \"mx-2\" : \"mx-4\"),\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-regular-body-md text-content-secondary\",\n            week: \"flex overflow-hidden rounded-xs\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            range_middle: \"bg-brand-primary-muted\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...resolvedDayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-4 px-5 pb-4\">\n            <Button variant=\"secondary\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.mjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport {\n  type ChevronProps,\n  type DateRange,\n  type DayButtonProps,\n  DayPicker,\n  type DayPickerProps,\n  type DayProps,\n  type Modifiers,\n  type MonthGridProps,\n  type WeekdayProps,\n  type WeekdaysProps,\n  type WeekProps,\n  type WeeksProps,\n} from \"react-day-picker\";\nimport { cn } from \"../../utils/cn\";\nimport type { OmitDistributed } from \"../../utils/types\";\nimport { Button } from \"../Button/Button\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport type { DateRange }; // Needed by consumers when passing props\n\n/** Layout variant — single or side-by-side month display. */\nexport type DatePickerVariant = \"single\" | \"double\";\n\n/** Props specific to the DatePicker wrapper (not inherited from react-day-picker). */\nexport interface DatePickerOwnProps {\n  /** Display one month or two side-by-side. @default \"single\" */\n  variant?: DatePickerVariant;\n  /** Callback fired when the Apply button is clicked. */\n  onApply?: () => void;\n  /** Callback fired when the Cancel button is clicked. */\n  onCancel?: () => void;\n  /** Label for the cancel button. @default \"Cancel\" */\n  cancelLabel?: string;\n  /** Label for the apply button. @default \"Apply\" */\n  applyLabel?: string;\n  /** Whether to render the cancel / apply footer buttons. @default true */\n  showFooter?: boolean;\n  /** Additional CSS class name for the outer container. */\n  className?: string;\n}\n\nfunction Day({ day, modifiers, className, ...divProps }: DayProps) {\n  const { range_start, range_end } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n\n  return (\n    <div\n      className={cn(\n        className,\n        (range_start || range_end) && !isSingleDayRange && \"from-50% from-transparent to-50%\",\n        range_start && !isSingleDayRange && \"bg-linear-to-r to-brand-primary-muted\",\n        range_end && !isSingleDayRange && \"bg-linear-to-l to-brand-primary-muted\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-xs\",\n        \"typography-body-small-14px-regular\",\n        \"transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted\",\n        \"focus-visible:outline-2 focus-visible:outline-brand-secondary-default focus-visible:outline-offset-[-2px]\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        modifiers.today && !modifiers.selected && \"border border-brand-primary-default\",\n        modifiers.selected && !modifiers.range_middle\n          ? \"bg-brand-primary-default text-content-always-black hover:bg-brand-primary-default\"\n          : \"text-content-primary\",\n        modifiers.range_middle && \"rounded-none bg-transparent\",\n        modifiers.outside && \"pointer-events-none opacity-50\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\n/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\n/**\n * A calendar date picker supporting single-date and date-range selection with\n * optional side-by-side month display and footer action buttons.\n *\n * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all\n * `DayPickerProps` (except `numberOfMonths`) are forwarded.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   mode=\"range\"\n *   type=\"double\"\n *   selected={range}\n *   onSelect={setRange}\n *   onApply={save}\n *   onCancel={close}\n * />\n * ```\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      variant = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = variant === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    // Wrap onSelect for range mode: when clicking inside a complete range,\n    // move the nearest boundary instead of always resetting the end date.\n    const resolvedDayPickerProps = (() => {\n      if (dayPickerProps.mode !== \"range\") return dayPickerProps;\n\n      const { selected, onSelect } = dayPickerProps as {\n        selected?: DateRange;\n        onSelect?: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => void;\n      };\n\n      if (!onSelect || !selected?.from || !selected?.to) return dayPickerProps;\n\n      const { from, to } = selected;\n\n      return {\n        ...dayPickerProps,\n        onSelect: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => {\n          const clickedTime = triggerDate.getTime();\n          const fromTime = from.getTime();\n          const toTime = to.getTime();\n\n          if (clickedTime > fromTime && clickedTime < toTime) {\n            if (clickedTime - fromTime <= toTime - clickedTime) {\n              onSelect({ from: triggerDate, to }, triggerDate, modifiers, e);\n            } else {\n              onSelect({ from, to: triggerDate }, triggerDate, modifiers, e);\n            }\n            return;\n          }\n\n          onSelect(range, triggerDate, modifiers, e);\n        },\n      } as typeof dayPickerProps;\n    })();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-background-primary shadow-blur-menu backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: \"relative flex\",\n            month: \"flex flex-1 flex-col\",\n            month_caption: cn(\"flex items-center py-4\", isMulti ? \"justify-center px-2\" : \"px-5\"),\n            caption_label: \"typography-body-default-16px-semibold text-content-primary\",\n            nav: cn(\n              \"absolute top-4 z-20 flex\",\n              isMulti ? \"pointer-events-none inset-x-3 justify-between\" : \"right-3 gap-1\",\n            ),\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            month_grid: cn(\"mb-4\", isMulti ? \"mx-2\" : \"mx-4\"),\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary\",\n            week: \"flex overflow-hidden rounded-xs\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            range_middle: \"bg-brand-primary-muted\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...resolvedDayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-4 px-5 pb-4\">\n            <Button variant=\"secondary\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":"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"}

package/dist/components/Dialog/Dialog.mjs

@@ -16,7 +16,7 @@ const DialogOverlay = React.forwardRef(({ className, style, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-bg-overlay data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-background-overlay-default data-[state=closed]:animate-out data-[state=open]:animate-in",
       className
     ),
     style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
@@ -46,7 +46,7 @@ const DialogContent = React.forwardRef(({ className, children, size = "md", over
       },
       className: cn(
         // Base
-        "fixed flex flex-col overflow-hidden bg-bg-primary shadow-lg focus:outline-none dark:bg-surface-primary",
+        "fixed flex flex-col overflow-hidden bg-background-primary shadow-lg focus:outline-none dark:bg-surface-primary",
         // Mobile: bottom sheet
         "inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-lg",
         // Animation (shared)
@@ -114,7 +114,7 @@ const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("typography-bold-heading-xs truncate text-content-primary", className),
+    className: cn("typography-header-heading-xs truncate text-content-primary", className),
     ...props
   }
 ));
@@ -123,7 +123,7 @@ const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("typography-regular-body-lg text-content-secondary", className),
+    className: cn("typography-body-default-16px-regular text-content-secondary", className),
     ...props
   }
 ));

package/dist/components/Dialog/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/**\n * The element that opens the dialog when clicked.\n *\n * On touch / pen, a press-and-release that crosses a small movement threshold\n * is treated as a drag and the resulting synthetic click is suppressed —\n * defends against Android Chrome opening the dialog on a scroll-drag-end.\n */\nexport const DialogTrigger = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Trigger>,\n  DialogTriggerProps\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nDialogTrigger.displayName = \"DialogTrigger\";\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered inside a portal automatically by {@link DialogContent}.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-bg-overlay data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel rendered inside a portal. Includes the overlay by default.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius. On larger viewports it renders centered with\n * full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, size = \"md\", overlay = true, style, onOpenAutoFocus, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    {overlay && <DialogOverlay />}\n    <DialogPrimitive.Content\n      ref={ref}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      onOpenAutoFocus={(e) => {\n        if (onOpenAutoFocus) {\n          onOpenAutoFocus(e);\n          return;\n        }\n        e.preventDefault();\n        (e.currentTarget as HTMLElement).focus();\n      }}\n      className={cn(\n        // Base\n        \"fixed flex flex-col overflow-hidden bg-bg-primary shadow-lg focus:outline-none dark:bg-surface-primary\",\n        // Mobile: bottom sheet\n        \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-lg\",\n        // Animation (shared)\n        \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n        // Mobile: slide up from bottom\n        \"data-[state=open]:slide-in-from-bottom-full\",\n        \"data-[state=closed]:slide-out-to-bottom-full\",\n        // Desktop: centered dialog\n        \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg\",\n        // Desktop: scale in/out (cancel mobile slide)\n        \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n        \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n        // Duration\n        \"duration-200\",\n        // Size\n        SIZE_CLASSES[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex h-16 shrink-0 items-center gap-2 px-6 py-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"tertiary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton variant=\"tertiary\" size=\"32\" icon={<CloseIcon />} aria-label={closeLabel} />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-bold-heading-xs truncate text-content-primary\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-lg text-content-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto px-6 py-4\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex shrink-0 items-center gap-3 px-6 pt-3 pb-6\",\n        \"[&>*]:min-w-0 [&>*]:flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":[],"mappings":";;;;;;;;;AAmBO,MAAM,SAAS,gBAAgB;AAY/B,MAAM,gBAAgB,MAAM,WAGjC,CAAC,OAAO,QAAQ,oBAAC,gBAAgB,SAAhB,EAAwB,KAAW,GAAG,0BAA0B,KAAK,GAAG,CAAE;AAC7F,cAAc,cAAc;AAGrB,MAAM,cAAc,gBAAgB;AAYpC,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,OAAO,GAAG,SAAS,QACjC;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,IAC1D,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;AAiB5B,MAAM,eAAwE;AAAA,EAC5E,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BO,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,UAAU,OAAO,MAAM,UAAU,MAAM,OAAO,iBAAiB,GAAG,SAAS,QACzF,qBAAC,gBAAgB,QAAhB,EACE,UAAA;AAAA,EAAA,+BAAY,eAAA,EAAc;AAAA,EAC3B;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,MAC3D,iBAAiB,CAAC,MAAM;AACtB,YAAI,iBAAiB;AACnB,0BAAgB,CAAC;AACjB;AAAA,QACF;AACA,UAAE,eAAA;AACD,UAAE,cAA8B,MAAA;AAAA,MACnC;AAAA,MACA,WAAW;AAAA;AAAA,QAET;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,aAAa,IAAI;AAAA,QACjB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AACH,GACF,CACD;AACD,cAAc,cAAc;AA8BrB,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,YAAY,CAAC,CAAC;AAErC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mDAAmD,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,kBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,0BAAO,eAAA,EAAc;AAAA,cACrB,SAAS;AAAA,cACT,UAAU,CAAC;AAAA,cACX,cAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhB,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,UACzC,aACC,oBAAC,gBAAgB,OAAhB,EAAsB,SAAO,MAC5B,UAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,MAAK,MAAK,MAAM,oBAAC,aAAU,GAAI,cAAY,YAAY,EAAA,CACxF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA,aAAa,cAAc;AASpB,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,4DAA4D,SAAS;AAAA,IAClF,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAc;AAQnB,MAAM,oBAAoB,MAAM,WAGrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,qDAAqD,SAAS;AAAA,IAC3E,GAAG;AAAA,EAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAQzB,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,oCAAoC,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5F;AACA,WAAW,cAAc;AAQlB,MAAM,eAAe,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,aAAa,cAAc;"}
+{"version":3,"file":"Dialog.mjs","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/**\n * The element that opens the dialog when clicked.\n *\n * On touch / pen, a press-and-release that crosses a small movement threshold\n * is treated as a drag and the resulting synthetic click is suppressed —\n * defends against Android Chrome opening the dialog on a scroll-drag-end.\n */\nexport const DialogTrigger = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Trigger>,\n  DialogTriggerProps\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nDialogTrigger.displayName = \"DialogTrigger\";\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered inside a portal automatically by {@link DialogContent}.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-background-overlay-default data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel rendered inside a portal. Includes the overlay by default.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius. On larger viewports it renders centered with\n * full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, size = \"md\", overlay = true, style, onOpenAutoFocus, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    {overlay && <DialogOverlay />}\n    <DialogPrimitive.Content\n      ref={ref}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      onOpenAutoFocus={(e) => {\n        if (onOpenAutoFocus) {\n          onOpenAutoFocus(e);\n          return;\n        }\n        e.preventDefault();\n        (e.currentTarget as HTMLElement).focus();\n      }}\n      className={cn(\n        // Base\n        \"fixed flex flex-col overflow-hidden bg-background-primary shadow-lg focus:outline-none dark:bg-surface-primary\",\n        // Mobile: bottom sheet\n        \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-lg\",\n        // Animation (shared)\n        \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n        // Mobile: slide up from bottom\n        \"data-[state=open]:slide-in-from-bottom-full\",\n        \"data-[state=closed]:slide-out-to-bottom-full\",\n        // Desktop: centered dialog\n        \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg\",\n        // Desktop: scale in/out (cancel mobile slide)\n        \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n        \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n        // Duration\n        \"duration-200\",\n        // Size\n        SIZE_CLASSES[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex h-16 shrink-0 items-center gap-2 px-6 py-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"tertiary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton variant=\"tertiary\" size=\"32\" icon={<CloseIcon />} aria-label={closeLabel} />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-header-heading-xs truncate text-content-primary\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-body-default-16px-regular text-content-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto px-6 py-4\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex shrink-0 items-center gap-3 px-6 pt-3 pb-6\",\n        \"[&>*]:min-w-0 [&>*]:flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":[],"mappings":"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"}

package/dist/components/Divider/Divider.mjs

@@ -20,7 +20,7 @@ const Divider = React.forwardRef(({ label, className, ...props }, ref) => {
               ...props
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "typography-regular-body-md shrink-0 text-content-primary", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "typography-body-small-14px-regular shrink-0 text-content-primary", children: label }),
           /* @__PURE__ */ jsx(
             SeparatorPrimitive.Root,
             {