@fanvue/ui 2.20.1 → 3.0.0

package/dist/cjs/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = {\n  variant: {\n    default: \"bg-neutral-alphas-50 text-content-secondary\",\n    dark: \"bg-neutral-alphas-150 text-content-on-brand-inverted\",\n    success: \"bg-neutral-alphas-50 text-content-secondary\",\n    warning: \"bg-neutral-alphas-50 text-content-secondary\",\n    error: \"bg-neutral-alphas-50 text-content-secondary\",\n    special: \"bg-neutral-alphas-50 text-content-secondary\",\n    info: \"bg-neutral-alphas-50 text-content-secondary\",\n    online: \"bg-bg-primary text-brand-primary-default\",\n    brand: \"bg-brand-primary-default text-content-on-brand\",\n    pink: \"bg-brand-secondary-default text-content-on-brand\",\n    brandLight: \"bg-brand-primary-muted text-content-on-brand\",\n    pinkLight: \"bg-brand-secondary-muted text-content-on-brand\",\n  },\n  dotColor: {\n    default: \"bg-content-on-brand\",\n    dark: \"bg-content-primary-inverted\",\n    success: \"bg-success-content\",\n    warning: \"bg-warning-content\",\n    error: \"bg-error-content\",\n    special: \"bg-special-default\",\n    info: \"bg-info-content\",\n    online: \"bg-brand-primary-default\",\n    brand: \"bg-content-on-brand\",\n    pink: \"bg-content-on-brand\",\n    brandLight: \"bg-content-on-brand\",\n    pinkLight: \"bg-content-on-brand\",\n  },\n} as const;\n\n/** Visual style variant of the badge. */\nexport type BadgeVariant =\n  | \"default\"\n  | \"dark\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"special\"\n  | \"info\"\n  | \"online\"\n  | \"brand\"\n  | \"pink\"\n  | \"brandLight\"\n  | \"pinkLight\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the badge. @default \"default\" */\n  variant?: BadgeVariant;\n  /** Whether to show a coloured status dot at the leading edge. @default true */\n  leftDot?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small inline label for status, category, or metadata information.\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * ```\n */\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      leftDot = true,\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"badge\"\n        className={cn(\n          // Base styles\n          \"typography-semibold-body-sm inline-flex h-5 min-w-0 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex size-3\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {leftDot && (\n          <span\n            className={cn(\"size-1 shrink-0 rounded-full\", badgeVariants.dotColor[variant])}\n            aria-hidden=\"true\"\n          />\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex size-3\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":["React","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AAsCO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA,cAAc,QAAQ,OAAO;AAAA;AAAA,UAE7B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,UAAA,UACH;AAAA,UAED,WACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGf,yCACEE,qBAAA,EAAW,SAAA,CAAS,IAErBD,+BAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = {\n  variant: {\n    default: \"bg-neutral-alphas-50 text-content-secondary\",\n    dark: \"bg-neutral-alphas-150 text-content-always-white\",\n    success: \"bg-neutral-alphas-50 text-content-secondary\",\n    warning: \"bg-neutral-alphas-50 text-content-secondary\",\n    error: \"bg-neutral-alphas-50 text-content-secondary\",\n    special: \"bg-neutral-alphas-50 text-content-secondary\",\n    info: \"bg-neutral-alphas-50 text-content-secondary\",\n    online: \"bg-background-primary text-brand-primary-default\",\n    brand: \"bg-brand-primary-default text-content-always-black\",\n    pink: \"bg-brand-secondary-default text-content-always-black\",\n    brandLight: \"bg-brand-primary-muted text-content-always-black\",\n    pinkLight: \"bg-brand-secondary-muted text-content-always-black\",\n  },\n  dotColor: {\n    default: \"bg-content-always-black\",\n    dark: \"bg-content-primary-inverted\",\n    success: \"bg-success-content\",\n    warning: \"bg-warning-content\",\n    error: \"bg-error-content\",\n    special: \"bg-special-default\",\n    info: \"bg-info-content\",\n    online: \"bg-brand-primary-default\",\n    brand: \"bg-content-always-black\",\n    pink: \"bg-content-always-black\",\n    brandLight: \"bg-content-always-black\",\n    pinkLight: \"bg-content-always-black\",\n  },\n} as const;\n\n/** Visual style variant of the badge. */\nexport type BadgeVariant =\n  | \"default\"\n  | \"dark\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"special\"\n  | \"info\"\n  | \"online\"\n  | \"brand\"\n  | \"pink\"\n  | \"brandLight\"\n  | \"pinkLight\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the badge. @default \"default\" */\n  variant?: BadgeVariant;\n  /** Whether to show a coloured status dot at the leading edge. @default true */\n  leftDot?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small inline label for status, category, or metadata information.\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * ```\n */\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      leftDot = true,\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"badge\"\n        className={cn(\n          // Base styles\n          \"typography-description-12px-semibold inline-flex h-5 min-w-0 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex size-3\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {leftDot && (\n          <span\n            className={cn(\"size-1 shrink-0 rounded-full\", badgeVariants.dotColor[variant])}\n            aria-hidden=\"true\"\n          />\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex size-3\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":["React","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AAsCO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA,cAAc,QAAQ,OAAO;AAAA;AAAA,UAE7B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,UAAA,UACH;AAAA,UAED,WACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGf,yCACEE,qBAAA,EAAW,SAAA,CAAS,IAErBD,+BAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/Banner/Banner.cjs

@@ -116,12 +116,12 @@ function BannerGuideBody({
       {
         variant: GUIDE_BADGE_VARIANT[appStoreVariant],
         leftDot: false,
-        className: "typography-semibold-badge self-start",
+        className: "typography-badge-badgecaps self-start",
         children: eyebrow
       }
     ),
-    title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelledBy, className: "typography-semibold-body-lg text-content-primary", children: title }),
-    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description }),
+    title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelledBy, className: "typography-body-default-16px-semibold text-content-primary", children: title }),
+    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-small-14px-regular text-content-secondary", children: description }),
     textAction
   ] });
 }
@@ -133,7 +133,7 @@ function BannerFeatureBody({
   textAction,
   labelledBy
 }) {
-  const titleClass = layout === "vertical" ? "typography-semibold-body-lg text-content-primary" : "typography-semibold-body-lg text-[18px] leading-6 text-content-primary";
+  const titleClass = layout === "vertical" ? "typography-body-default-16px-semibold text-content-primary" : "typography-body-default-16px-semibold text-[18px] leading-6 text-content-primary";
   const mediaWrap = layout === "compact" ? "size-20 shrink-0 overflow-hidden rounded-sm" : "size-[132px] shrink-0 overflow-hidden rounded-sm";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     media !== void 0 && media !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(mediaWrap, layout === "vertical" && "w-full [&>*]:mx-auto"), children: media }),
@@ -146,7 +146,7 @@ function BannerFeatureBody({
         ),
         children: [
           title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: titleClass, children: title }),
-          description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description }),
+          description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-small-14px-regular text-content-secondary", children: description }),
           textAction
         ]
       }
@@ -171,10 +171,10 @@ function BannerSubtleBody({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
         leadBadge !== void 0 && leadBadge !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: leadBadge }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-          title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: "typography-bold-heading-xs text-content-primary", children: title }),
+          title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: "typography-header-heading-xs text-content-primary", children: title }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-            description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-primary", children: description }),
-            secondaryLine !== void 0 && secondaryLine !== null && secondaryLine !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-sm text-content-primary", children: secondaryLine })
+            description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-small-14px-regular text-content-primary", children: description }),
+            secondaryLine !== void 0 && secondaryLine !== null && secondaryLine !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-description-12px-regular text-content-primary", children: secondaryLine })
           ] })
         ] }),
         stackedAction !== void 0 && stackedAction !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end self-start", children: stackedAction }),
@@ -195,11 +195,11 @@ function BannerInverseBody({
   dismissSlot
 }) {
   const mediaSizeDefault = "size-12 shrink-0 overflow-hidden rounded-xl";
-  const titleClassInverse = "typography-bold-heading-xs text-content-primary-inverted";
+  const titleClassInverse = "typography-header-heading-xs text-content-primary-inverted";
   const textColumn = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-    eyebrow !== void 0 && eyebrow !== null && eyebrow !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-sm text-content-primary-inverted", children: eyebrow }),
+    eyebrow !== void 0 && eyebrow !== null && eyebrow !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-description-12px-semibold text-content-primary-inverted", children: eyebrow }),
     title !== void 0 && title !== null && title !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelledBy, className: titleClassInverse, children: title }),
-    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-primary-inverted", children: description })
+    description !== void 0 && description !== null && description !== false && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-small-14px-regular text-content-primary-inverted", children: description })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     media !== void 0 && media !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: mediaSizeDefault, children: media }),

package/dist/cjs/components/Banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Badge, type BadgeVariant } from \"../Badge/Badge\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/**\n * Matches the Fanvue Library Banner Figma component property `Type`\n * (`Default`, `Subtle`, `whatsNew`, `appStore1`, `appStore2`, `appStore3`).\n */\nexport type BannerVariant =\n  | \"Default\"\n  | \"Subtle\"\n  | \"whatsNew\"\n  | \"appStore1\"\n  | \"appStore2\"\n  | \"appStore3\";\n\n/** Layout (`Vertical` / `Horizontal` / `HorizontalSmall` in Figma). Ignored for `Subtle` and app store types. */\nexport type BannerLayout = \"vertical\" | \"horizontal\" | \"compact\";\n\ntype AppStoreVariant = \"appStore1\" | \"appStore2\" | \"appStore3\";\n\nconst APP_STORE_VARIANTS: readonly AppStoreVariant[] = [\"appStore1\", \"appStore2\", \"appStore3\"];\n\nfunction isAppStoreVariant(variant: BannerVariant): variant is AppStoreVariant {\n  return (APP_STORE_VARIANTS as readonly string[]).includes(variant);\n}\n\nconst GUIDE_BADGE_VARIANT: Record<AppStoreVariant, BadgeVariant> = {\n  appStore1: \"dark\",\n  appStore2: \"default\",\n  appStore3: \"default\",\n};\n\nconst BANNER_SHADOW = \"shadow-sm\";\n\nconst guideGradient: Record<AppStoreVariant, React.CSSProperties> = {\n  appStore1: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-primary-muted) 0%, var(--color-neutral-alphas-50) 100%)\",\n  },\n  appStore2: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, var(--color-brand-secondary-muted) 100%)\",\n  },\n  appStore3: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, color-mix(in srgb, var(--color-info-surface) 80%, transparent) 100%)\",\n  },\n};\n\nexport interface BannerProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Figma `Type` — selects structure, surfaces, and app store gradient. */\n  variant: BannerVariant;\n  /**\n   * Figma `Orientation`. Ignored when `variant` is `Subtle` (horizontal) or an app store type (vertical).\n   * @default `\"vertical\"` for `Default`, `\"horizontal\"` for `whatsNew`\n   */\n  layout?: BannerLayout;\n  /** Leading visual (image, illustration, or composite). */\n  media?: React.ReactNode;\n  /** Small uppercase label (e.g. HOW TO). */\n  eyebrow?: React.ReactNode;\n  /** Top badge row (e.g. NEW pill) — mainly for `Subtle`. */\n  leadBadge?: React.ReactNode;\n  /** Main heading. */\n  title?: React.ReactNode;\n  /** Primary body copy. */\n  description?: React.ReactNode;\n  /** Extra line under description (`Subtle`). */\n  secondaryLine?: React.ReactNode;\n  /** Left-stacked pill action (`Subtle`). */\n  stackedAction?: React.ReactNode;\n  /** Row under stacked action (`Subtle`). */\n  statusRow?: React.ReactNode;\n  /** Primary button (e.g. Learn more). */\n  primaryAction?: React.ReactNode;\n  /** Text-style CTA (`whatsNew` / app store). */\n  textAction?: React.ReactNode;\n  /** When set, shows a dismiss control (`Default` only). */\n  onDismiss?: () => void;\n  /** Accessible label for dismiss. @default \"Dismiss banner\" */\n  dismissLabel?: string;\n}\n\nfunction BannerDismiss({\n  onDismiss,\n  dismissLabel,\n}: {\n  onDismiss: () => void;\n  dismissLabel: string;\n}) {\n  return (\n    <IconButton\n      variant=\"contrast\"\n      size=\"24\"\n      icon={<CrossIcon />}\n      onClick={onDismiss}\n      aria-label={dismissLabel}\n      className=\"hover:bg-white/10 active:bg-white/15\"\n    />\n  );\n}\n\nfunction resolveLayout(variant: BannerVariant, layoutProp: BannerLayout | undefined): BannerLayout {\n  if (variant === \"Subtle\") {\n    return \"horizontal\";\n  }\n  if (isAppStoreVariant(variant)) {\n    return \"vertical\";\n  }\n  if (variant === \"whatsNew\") {\n    return layoutProp ?? \"horizontal\";\n  }\n  return layoutProp ?? \"vertical\";\n}\n\nfunction bannerRootClass(variant: BannerVariant, layout: BannerLayout, className?: string): string {\n  return cn(\n    \"flex rounded-md\",\n    BANNER_SHADOW,\n    variant === \"Default\" && \"gap-3 bg-surface-primary-inverted p-4 text-content-primary-inverted\",\n    variant === \"Subtle\" &&\n      \"w-full max-w-[600px] items-start gap-3 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"horizontal\" &&\n      \"w-full max-w-[446px] items-center gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"vertical\" &&\n      \"w-full max-w-[220px] flex-col items-stretch gap-4 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"compact\" &&\n      \"w-full max-w-[446px] items-start gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    isAppStoreVariant(variant) && \"w-full max-w-[280px] flex-col gap-4 p-6\",\n    layout === \"vertical\" && variant === \"Default\" && \"max-w-[360px]\",\n    layout === \"horizontal\" && variant === \"Default\" && \"w-full max-w-[600px] items-start\",\n    className,\n  );\n}\n\ntype BannerSectionProps = React.ComponentPropsWithoutRef<\"section\"> & {\n  labelledBy?: string;\n};\n\nconst BannerSection = React.forwardRef<HTMLElement, BannerSectionProps>(\n  ({ className, labelledBy, children, ...rest }, ref) => (\n    <section\n      ref={ref}\n      aria-labelledby={labelledBy}\n      data-testid=\"banner\"\n      className={className}\n      {...rest}\n    >\n      {children}\n    </section>\n  ),\n);\nBannerSection.displayName = \"BannerSection\";\n\ntype GuideBodyProps = Pick<BannerProps, \"eyebrow\" | \"title\" | \"description\" | \"textAction\"> & {\n  appStoreVariant: AppStoreVariant;\n  labelledBy?: string;\n};\n\nfunction BannerGuideBody({\n  appStoreVariant,\n  eyebrow,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: GuideBodyProps) {\n  return (\n    <>\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <Badge\n          variant={GUIDE_BADGE_VARIANT[appStoreVariant]}\n          leftDot={false}\n          className=\"typography-semibold-badge self-start\"\n        >\n          {eyebrow}\n        </Badge>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <p id={labelledBy} className=\"typography-semibold-body-lg text-content-primary\">\n          {title}\n        </p>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n      )}\n      {textAction}\n    </>\n  );\n}\n\ntype FeatureBodyProps = Pick<BannerProps, \"title\" | \"description\" | \"textAction\" | \"media\"> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n};\n\nfunction BannerFeatureBody({\n  layout,\n  media,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: FeatureBodyProps) {\n  const titleClass =\n    layout === \"vertical\"\n      ? \"typography-semibold-body-lg text-content-primary\"\n      : \"typography-semibold-body-lg text-[18px] leading-6 text-content-primary\";\n  const mediaWrap =\n    layout === \"compact\"\n      ? \"size-20 shrink-0 overflow-hidden rounded-sm\"\n      : \"size-[132px] shrink-0 overflow-hidden rounded-sm\";\n\n  return (\n    <>\n      {media !== undefined && media !== null && (\n        <div className={cn(mediaWrap, layout === \"vertical\" && \"w-full [&>*]:mx-auto\")}>\n          {media}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-col gap-2\",\n          layout === \"horizontal\" || layout === \"compact\" ? \"flex-1 justify-end\" : \"w-full\",\n        )}\n      >\n        {title !== undefined && title !== null && title !== false && (\n          <div id={labelledBy} className={titleClass}>\n            {title}\n          </div>\n        )}\n        {description !== undefined && description !== null && description !== false && (\n          <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n        )}\n        {textAction}\n      </div>\n    </>\n  );\n}\n\ntype SubtleBodyProps = Pick<\n  BannerProps,\n  | \"media\"\n  | \"leadBadge\"\n  | \"title\"\n  | \"description\"\n  | \"secondaryLine\"\n  | \"stackedAction\"\n  | \"statusRow\"\n  | \"primaryAction\"\n> & { labelledBy?: string };\n\nfunction BannerSubtleBody({\n  media,\n  leadBadge,\n  title,\n  description,\n  secondaryLine,\n  stackedAction,\n  statusRow,\n  primaryAction,\n  labelledBy,\n}: SubtleBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n          {leadBadge !== undefined && leadBadge !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{leadBadge}</div>\n          )}\n          <div className=\"flex flex-col gap-1\">\n            {title !== undefined && title !== null && title !== false && (\n              <div id={labelledBy} className=\"typography-bold-heading-xs text-content-primary\">\n                {title}\n              </div>\n            )}\n            <div className=\"flex flex-col gap-2\">\n              {description !== undefined && description !== null && description !== false && (\n                <p className=\"typography-regular-body-md text-content-primary\">{description}</p>\n              )}\n              {secondaryLine !== undefined && secondaryLine !== null && secondaryLine !== false && (\n                <p className=\"typography-regular-body-sm text-content-primary\">{secondaryLine}</p>\n              )}\n            </div>\n          </div>\n          {stackedAction !== undefined && stackedAction !== null && (\n            <div className=\"flex flex-col items-end self-start\">{stackedAction}</div>\n          )}\n          {statusRow !== undefined && statusRow !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{statusRow}</div>\n          )}\n        </div>\n        {primaryAction !== undefined && primaryAction !== null && (\n          <div className=\"shrink-0 self-center\">{primaryAction}</div>\n        )}\n      </div>\n    </>\n  );\n}\n\ntype InverseBodyProps = Pick<\n  BannerProps,\n  \"media\" | \"eyebrow\" | \"title\" | \"description\" | \"primaryAction\"\n> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n  dismissSlot: React.ReactNode;\n};\n\nfunction BannerInverseBody({\n  layout,\n  media,\n  eyebrow,\n  title,\n  description,\n  primaryAction,\n  labelledBy,\n  dismissSlot,\n}: InverseBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  const titleClassInverse = \"typography-bold-heading-xs text-content-primary-inverted\";\n  const textColumn = (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <p className=\"typography-semibold-body-sm text-content-primary-inverted\">{eyebrow}</p>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <div id={labelledBy} className={titleClassInverse}>\n          {title}\n        </div>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-regular-body-md text-content-primary-inverted\">{description}</p>\n      )}\n    </div>\n  );\n\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      {layout === \"horizontal\" ? (\n        <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && (\n            <div className=\"shrink-0\">{primaryAction}</div>\n          )}\n        </div>\n      ) : (\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && <div>{primaryAction}</div>}\n        </div>\n      )}\n      {dismissSlot}\n    </>\n  );\n}\n\nexport const Banner = React.forwardRef<HTMLElement, BannerProps>(\n  (\n    {\n      className,\n      variant,\n      layout: layoutProp,\n      media,\n      eyebrow,\n      leadBadge,\n      title,\n      description,\n      secondaryLine,\n      stackedAction,\n      statusRow,\n      primaryAction,\n      textAction,\n      onDismiss,\n      dismissLabel = \"Dismiss banner\",\n      ...props\n    },\n    ref,\n  ) => {\n    const layout = resolveLayout(variant, layoutProp);\n    const showDismiss = onDismiss !== undefined && variant === \"Default\";\n    const titleId = React.useId();\n    const regionLabelledBy =\n      title !== undefined && title !== null && title !== false ? titleId : undefined;\n\n    const rootClass = bannerRootClass(variant, layout, className);\n\n    if (isAppStoreVariant(variant)) {\n      return (\n        <BannerSection\n          ref={ref}\n          labelledBy={regionLabelledBy}\n          style={guideGradient[variant]}\n          className={rootClass}\n          {...props}\n        >\n          <BannerGuideBody\n            appStoreVariant={variant}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"whatsNew\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerFeatureBody\n            layout={layout}\n            media={media}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"Subtle\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerSubtleBody\n            media={media}\n            leadBadge={leadBadge}\n            title={title}\n            description={description}\n            secondaryLine={secondaryLine}\n            stackedAction={stackedAction}\n            statusRow={statusRow}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    const dismissSlot =\n      showDismiss && onDismiss !== undefined ? (\n        <BannerDismiss onDismiss={onDismiss} dismissLabel={dismissLabel} />\n      ) : null;\n\n    return (\n      <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n        <div className=\"flex w-full items-start gap-3\">\n          <BannerInverseBody\n            layout={layout}\n            media={media}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n            dismissSlot={dismissSlot}\n          />\n        </div>\n      </BannerSection>\n    );\n  },\n);\n\nBanner.displayName = \"Banner\";\n"],"names":["jsx","IconButton","CrossIcon","cn","React","jsxs","Fragment","Badge"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Badge, type BadgeVariant } from \"../Badge/Badge\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/**\n * Matches the Fanvue Library Banner Figma component property `Type`\n * (`Default`, `Subtle`, `whatsNew`, `appStore1`, `appStore2`, `appStore3`).\n */\nexport type BannerVariant =\n  | \"Default\"\n  | \"Subtle\"\n  | \"whatsNew\"\n  | \"appStore1\"\n  | \"appStore2\"\n  | \"appStore3\";\n\n/** Layout (`Vertical` / `Horizontal` / `HorizontalSmall` in Figma). Ignored for `Subtle` and app store types. */\nexport type BannerLayout = \"vertical\" | \"horizontal\" | \"compact\";\n\ntype AppStoreVariant = \"appStore1\" | \"appStore2\" | \"appStore3\";\n\nconst APP_STORE_VARIANTS: readonly AppStoreVariant[] = [\"appStore1\", \"appStore2\", \"appStore3\"];\n\nfunction isAppStoreVariant(variant: BannerVariant): variant is AppStoreVariant {\n  return (APP_STORE_VARIANTS as readonly string[]).includes(variant);\n}\n\nconst GUIDE_BADGE_VARIANT: Record<AppStoreVariant, BadgeVariant> = {\n  appStore1: \"dark\",\n  appStore2: \"default\",\n  appStore3: \"default\",\n};\n\nconst BANNER_SHADOW = \"shadow-sm\";\n\nconst guideGradient: Record<AppStoreVariant, React.CSSProperties> = {\n  appStore1: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-primary-muted) 0%, var(--color-neutral-alphas-50) 100%)\",\n  },\n  appStore2: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, var(--color-brand-secondary-muted) 100%)\",\n  },\n  appStore3: {\n    backgroundImage:\n      \"linear-gradient(125.54deg, var(--color-brand-secondary-muted) 0%, color-mix(in srgb, var(--color-info-surface) 80%, transparent) 100%)\",\n  },\n};\n\nexport interface BannerProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Figma `Type` — selects structure, surfaces, and app store gradient. */\n  variant: BannerVariant;\n  /**\n   * Figma `Orientation`. Ignored when `variant` is `Subtle` (horizontal) or an app store type (vertical).\n   * @default `\"vertical\"` for `Default`, `\"horizontal\"` for `whatsNew`\n   */\n  layout?: BannerLayout;\n  /** Leading visual (image, illustration, or composite). */\n  media?: React.ReactNode;\n  /** Small uppercase label (e.g. HOW TO). */\n  eyebrow?: React.ReactNode;\n  /** Top badge row (e.g. NEW pill) — mainly for `Subtle`. */\n  leadBadge?: React.ReactNode;\n  /** Main heading. */\n  title?: React.ReactNode;\n  /** Primary body copy. */\n  description?: React.ReactNode;\n  /** Extra line under description (`Subtle`). */\n  secondaryLine?: React.ReactNode;\n  /** Left-stacked pill action (`Subtle`). */\n  stackedAction?: React.ReactNode;\n  /** Row under stacked action (`Subtle`). */\n  statusRow?: React.ReactNode;\n  /** Primary button (e.g. Learn more). */\n  primaryAction?: React.ReactNode;\n  /** Text-style CTA (`whatsNew` / app store). */\n  textAction?: React.ReactNode;\n  /** When set, shows a dismiss control (`Default` only). */\n  onDismiss?: () => void;\n  /** Accessible label for dismiss. @default \"Dismiss banner\" */\n  dismissLabel?: string;\n}\n\nfunction BannerDismiss({\n  onDismiss,\n  dismissLabel,\n}: {\n  onDismiss: () => void;\n  dismissLabel: string;\n}) {\n  return (\n    <IconButton\n      variant=\"contrast\"\n      size=\"24\"\n      icon={<CrossIcon />}\n      onClick={onDismiss}\n      aria-label={dismissLabel}\n      className=\"hover:bg-white/10 active:bg-white/15\"\n    />\n  );\n}\n\nfunction resolveLayout(variant: BannerVariant, layoutProp: BannerLayout | undefined): BannerLayout {\n  if (variant === \"Subtle\") {\n    return \"horizontal\";\n  }\n  if (isAppStoreVariant(variant)) {\n    return \"vertical\";\n  }\n  if (variant === \"whatsNew\") {\n    return layoutProp ?? \"horizontal\";\n  }\n  return layoutProp ?? \"vertical\";\n}\n\nfunction bannerRootClass(variant: BannerVariant, layout: BannerLayout, className?: string): string {\n  return cn(\n    \"flex rounded-md\",\n    BANNER_SHADOW,\n    variant === \"Default\" && \"gap-3 bg-surface-primary-inverted p-4 text-content-primary-inverted\",\n    variant === \"Subtle\" &&\n      \"w-full max-w-[600px] items-start gap-3 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"horizontal\" &&\n      \"w-full max-w-[446px] items-center gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"vertical\" &&\n      \"w-full max-w-[220px] flex-col items-stretch gap-4 border border-border-primary bg-surface-secondary p-4 text-content-primary\",\n    variant === \"whatsNew\" &&\n      layout === \"compact\" &&\n      \"w-full max-w-[446px] items-start gap-4 bg-surface-purple-muted p-4 text-content-primary\",\n    isAppStoreVariant(variant) && \"w-full max-w-[280px] flex-col gap-4 p-6\",\n    layout === \"vertical\" && variant === \"Default\" && \"max-w-[360px]\",\n    layout === \"horizontal\" && variant === \"Default\" && \"w-full max-w-[600px] items-start\",\n    className,\n  );\n}\n\ntype BannerSectionProps = React.ComponentPropsWithoutRef<\"section\"> & {\n  labelledBy?: string;\n};\n\nconst BannerSection = React.forwardRef<HTMLElement, BannerSectionProps>(\n  ({ className, labelledBy, children, ...rest }, ref) => (\n    <section\n      ref={ref}\n      aria-labelledby={labelledBy}\n      data-testid=\"banner\"\n      className={className}\n      {...rest}\n    >\n      {children}\n    </section>\n  ),\n);\nBannerSection.displayName = \"BannerSection\";\n\ntype GuideBodyProps = Pick<BannerProps, \"eyebrow\" | \"title\" | \"description\" | \"textAction\"> & {\n  appStoreVariant: AppStoreVariant;\n  labelledBy?: string;\n};\n\nfunction BannerGuideBody({\n  appStoreVariant,\n  eyebrow,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: GuideBodyProps) {\n  return (\n    <>\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <Badge\n          variant={GUIDE_BADGE_VARIANT[appStoreVariant]}\n          leftDot={false}\n          className=\"typography-badge-badgecaps self-start\"\n        >\n          {eyebrow}\n        </Badge>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <p id={labelledBy} className=\"typography-body-default-16px-semibold text-content-primary\">\n          {title}\n        </p>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-body-small-14px-regular text-content-secondary\">{description}</p>\n      )}\n      {textAction}\n    </>\n  );\n}\n\ntype FeatureBodyProps = Pick<BannerProps, \"title\" | \"description\" | \"textAction\" | \"media\"> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n};\n\nfunction BannerFeatureBody({\n  layout,\n  media,\n  title,\n  description,\n  textAction,\n  labelledBy,\n}: FeatureBodyProps) {\n  const titleClass =\n    layout === \"vertical\"\n      ? \"typography-body-default-16px-semibold text-content-primary\"\n      : \"typography-body-default-16px-semibold text-[18px] leading-6 text-content-primary\";\n  const mediaWrap =\n    layout === \"compact\"\n      ? \"size-20 shrink-0 overflow-hidden rounded-sm\"\n      : \"size-[132px] shrink-0 overflow-hidden rounded-sm\";\n\n  return (\n    <>\n      {media !== undefined && media !== null && (\n        <div className={cn(mediaWrap, layout === \"vertical\" && \"w-full [&>*]:mx-auto\")}>\n          {media}\n        </div>\n      )}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-col gap-2\",\n          layout === \"horizontal\" || layout === \"compact\" ? \"flex-1 justify-end\" : \"w-full\",\n        )}\n      >\n        {title !== undefined && title !== null && title !== false && (\n          <div id={labelledBy} className={titleClass}>\n            {title}\n          </div>\n        )}\n        {description !== undefined && description !== null && description !== false && (\n          <p className=\"typography-body-small-14px-regular text-content-secondary\">{description}</p>\n        )}\n        {textAction}\n      </div>\n    </>\n  );\n}\n\ntype SubtleBodyProps = Pick<\n  BannerProps,\n  | \"media\"\n  | \"leadBadge\"\n  | \"title\"\n  | \"description\"\n  | \"secondaryLine\"\n  | \"stackedAction\"\n  | \"statusRow\"\n  | \"primaryAction\"\n> & { labelledBy?: string };\n\nfunction BannerSubtleBody({\n  media,\n  leadBadge,\n  title,\n  description,\n  secondaryLine,\n  stackedAction,\n  statusRow,\n  primaryAction,\n  labelledBy,\n}: SubtleBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n          {leadBadge !== undefined && leadBadge !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{leadBadge}</div>\n          )}\n          <div className=\"flex flex-col gap-1\">\n            {title !== undefined && title !== null && title !== false && (\n              <div id={labelledBy} className=\"typography-header-heading-xs text-content-primary\">\n                {title}\n              </div>\n            )}\n            <div className=\"flex flex-col gap-2\">\n              {description !== undefined && description !== null && description !== false && (\n                <p className=\"typography-body-small-14px-regular text-content-primary\">\n                  {description}\n                </p>\n              )}\n              {secondaryLine !== undefined && secondaryLine !== null && secondaryLine !== false && (\n                <p className=\"typography-description-12px-regular text-content-primary\">\n                  {secondaryLine}\n                </p>\n              )}\n            </div>\n          </div>\n          {stackedAction !== undefined && stackedAction !== null && (\n            <div className=\"flex flex-col items-end self-start\">{stackedAction}</div>\n          )}\n          {statusRow !== undefined && statusRow !== null && (\n            <div className=\"flex flex-wrap items-center gap-2\">{statusRow}</div>\n          )}\n        </div>\n        {primaryAction !== undefined && primaryAction !== null && (\n          <div className=\"shrink-0 self-center\">{primaryAction}</div>\n        )}\n      </div>\n    </>\n  );\n}\n\ntype InverseBodyProps = Pick<\n  BannerProps,\n  \"media\" | \"eyebrow\" | \"title\" | \"description\" | \"primaryAction\"\n> & {\n  layout: BannerLayout;\n  labelledBy?: string;\n  dismissSlot: React.ReactNode;\n};\n\nfunction BannerInverseBody({\n  layout,\n  media,\n  eyebrow,\n  title,\n  description,\n  primaryAction,\n  labelledBy,\n  dismissSlot,\n}: InverseBodyProps) {\n  const mediaSizeDefault = \"size-12 shrink-0 overflow-hidden rounded-xl\";\n  const titleClassInverse = \"typography-header-heading-xs text-content-primary-inverted\";\n  const textColumn = (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n      {eyebrow !== undefined && eyebrow !== null && eyebrow !== false && (\n        <p className=\"typography-description-12px-semibold text-content-primary-inverted\">\n          {eyebrow}\n        </p>\n      )}\n      {title !== undefined && title !== null && title !== false && (\n        <div id={labelledBy} className={titleClassInverse}>\n          {title}\n        </div>\n      )}\n      {description !== undefined && description !== null && description !== false && (\n        <p className=\"typography-body-small-14px-regular text-content-primary-inverted\">\n          {description}\n        </p>\n      )}\n    </div>\n  );\n\n  return (\n    <>\n      {media !== undefined && media !== null && <div className={mediaSizeDefault}>{media}</div>}\n      {layout === \"horizontal\" ? (\n        <div className=\"flex min-w-0 flex-1 items-end gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && (\n            <div className=\"shrink-0\">{primaryAction}</div>\n          )}\n        </div>\n      ) : (\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          {textColumn}\n          {primaryAction !== undefined && primaryAction !== null && <div>{primaryAction}</div>}\n        </div>\n      )}\n      {dismissSlot}\n    </>\n  );\n}\n\nexport const Banner = React.forwardRef<HTMLElement, BannerProps>(\n  (\n    {\n      className,\n      variant,\n      layout: layoutProp,\n      media,\n      eyebrow,\n      leadBadge,\n      title,\n      description,\n      secondaryLine,\n      stackedAction,\n      statusRow,\n      primaryAction,\n      textAction,\n      onDismiss,\n      dismissLabel = \"Dismiss banner\",\n      ...props\n    },\n    ref,\n  ) => {\n    const layout = resolveLayout(variant, layoutProp);\n    const showDismiss = onDismiss !== undefined && variant === \"Default\";\n    const titleId = React.useId();\n    const regionLabelledBy =\n      title !== undefined && title !== null && title !== false ? titleId : undefined;\n\n    const rootClass = bannerRootClass(variant, layout, className);\n\n    if (isAppStoreVariant(variant)) {\n      return (\n        <BannerSection\n          ref={ref}\n          labelledBy={regionLabelledBy}\n          style={guideGradient[variant]}\n          className={rootClass}\n          {...props}\n        >\n          <BannerGuideBody\n            appStoreVariant={variant}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"whatsNew\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerFeatureBody\n            layout={layout}\n            media={media}\n            title={title}\n            description={description}\n            textAction={textAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    if (variant === \"Subtle\") {\n      return (\n        <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n          <BannerSubtleBody\n            media={media}\n            leadBadge={leadBadge}\n            title={title}\n            description={description}\n            secondaryLine={secondaryLine}\n            stackedAction={stackedAction}\n            statusRow={statusRow}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n          />\n        </BannerSection>\n      );\n    }\n\n    const dismissSlot =\n      showDismiss && onDismiss !== undefined ? (\n        <BannerDismiss onDismiss={onDismiss} dismissLabel={dismissLabel} />\n      ) : null;\n\n    return (\n      <BannerSection ref={ref} labelledBy={regionLabelledBy} className={rootClass} {...props}>\n        <div className=\"flex w-full items-start gap-3\">\n          <BannerInverseBody\n            layout={layout}\n            media={media}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            primaryAction={primaryAction}\n            labelledBy={regionLabelledBy}\n            dismissSlot={dismissSlot}\n          />\n        </div>\n      </BannerSection>\n    );\n  },\n);\n\nBanner.displayName = \"Banner\";\n"],"names":["jsx","IconButton","CrossIcon","cn","React","jsxs","Fragment","Badge"],"mappings":"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"}

package/dist/cjs/components/BottomNavigation/BottomNavigation.cjs

@@ -61,7 +61,7 @@ const BottomNavigation = React__namespace.forwardRef(
           ...restProps,
           className: cn.cn(
             "fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]",
-            "border-neutral-alphas-200 border-t bg-bg-primary",
+            "border-neutral-alphas-200 border-t bg-background-primary",
             hideOnDesktop && "md:hidden",
             className
           ),
@@ -101,7 +101,7 @@ const BottomNavigation = React__namespace.forwardRef(
         className: cn.cn(
           "fixed inset-x-0 bottom-0",
           "flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around",
-          "border-neutral-alphas-200 border-t bg-bg-primary",
+          "border-neutral-alphas-200 border-t bg-background-primary",
           "pb-[env(safe-area-inset-bottom,0px)]",
           hideOnDesktop && "md:hidden",
           className

package/dist/cjs/components/BottomNavigation/BottomNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigation.cjs","sources":["../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n  /** The currently selected action value. */\n  value?: string;\n  /** Called when the selected action changes. */\n  onValueChange?: (value: string) => void;\n  /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n  hideOnDesktop?: boolean;\n  /** When `true`, renders the information-architecture style with visible labels and a sliding active indicator. @default false */\n  hasInformationArchitectureNav?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  hasInformationArchitectureNav: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n  hasInformationArchitectureNav: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n  return React.useContext(BottomNavigationContext);\n}\n\nfunction resolveChildren(children: React.ReactNode, value: string | undefined) {\n  const items = React.Children.toArray(children);\n  for (let i = 0; i < items.length; i++) {\n    const child = items[i];\n    if (React.isValidElement<{ value?: string }>(child) && child.props.value === value) {\n      return { count: items.length, activeIndex: i };\n    }\n  }\n  return { count: items.length, activeIndex: undefined };\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      onValueChange,\n      hasInformationArchitectureNav = false,\n      hideOnDesktop = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const contextValue = React.useMemo<BottomNavigationContextValue>(\n      () => ({ value, onValueChange, hasInformationArchitectureNav }),\n      [value, onValueChange, hasInformationArchitectureNav],\n    );\n\n    if (hasInformationArchitectureNav) {\n      const { count: itemCount, activeIndex } = resolveChildren(children, value);\n      const { style, ...restProps } = props;\n\n      return (\n        <BottomNavigationContext.Provider value={contextValue}>\n          <nav\n            ref={ref}\n            {...restProps}\n            className={cn(\n              \"fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]\",\n              \"border-neutral-alphas-200 border-t bg-bg-primary\",\n              hideOnDesktop && \"md:hidden\",\n              className,\n            )}\n            style={\n              { zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style } as React.CSSProperties\n            }\n          >\n            {activeIndex != null && (\n              <div\n                aria-hidden=\"true\"\n                data-part=\"indicator\"\n                className=\"pointer-events-none absolute inset-x-0 -top-px h-0\"\n              >\n                <div\n                  className=\"absolute top-0 flex -translate-x-1/2 flex-col items-center motion-safe:transition-[left] motion-safe:duration-300 motion-safe:ease-in-out\"\n                  style={{\n                    left: `calc((${activeIndex} + 0.5) * (100% / ${itemCount}))`,\n                    width: `calc(100% / ${itemCount})`,\n                  }}\n                >\n                  <div className=\"h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent\" />\n                  <div className=\"@container h-20 w-full overflow-hidden\">\n                    <div className=\"mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] @max-[80px]:w-[calc(70%-10px)] dark:opacity-15\" />\n                  </div>\n                </div>\n              </div>\n            )}\n            {children}\n          </nav>\n        </BottomNavigationContext.Provider>\n      );\n    }\n\n    return (\n      <BottomNavigationContext.Provider value={contextValue}>\n        <nav\n          ref={ref}\n          className={cn(\n            \"fixed inset-x-0 bottom-0\",\n            \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n            \"border-neutral-alphas-200 border-t bg-bg-primary\",\n            \"pb-[env(safe-area-inset-bottom,0px)]\",\n            hideOnDesktop && \"md:hidden\",\n            className,\n          )}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n          {...props}\n        >\n          {children}\n        </nav>\n      </BottomNavigationContext.Provider>\n    );\n  },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":["React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,0BAA0BA,iBAAM,cAA4C;AAAA,EAChF,+BAA+B;AACjC,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAOA,iBAAM,WAAW,uBAAuB;AACjD;AAEA,SAAS,gBAAgB,UAA2B,OAA2B;AAC7E,QAAM,QAAQA,iBAAM,SAAS,QAAQ,QAAQ;AAC7C,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,QAAQ,MAAM,CAAC;AACrB,QAAIA,iBAAM,eAAmC,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAClF,aAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,EAAA;AAAA,IAC7C;AAAA,EACF;AACA,SAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,OAAA;AAC7C;AAEO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAeA,iBAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe;MAC/B,CAAC,OAAO,eAAe,6BAA6B;AAAA,IAAA;AAGtD,QAAI,+BAA+B;AACjC,YAAM,EAAE,OAAO,WAAW,gBAAgB,gBAAgB,UAAU,KAAK;AACzE,YAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAEhC,aACEC,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACJ,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,UAEF,OACE,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,UAGrD,UAAA;AAAA,YAAA,eAAe,QACdF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV,UAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,MAAM,SAAS,WAAW,qBAAqB,SAAS;AAAA,sBACxD,OAAO,eAAe,SAAS;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,sBACvHA,2BAAAA,IAAC,SAAI,WAAU,0CACb,yCAAC,OAAA,EAAI,WAAU,qMAAoM,EAAA,CACrN;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAGH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,IAEJ;AAEA,WACEA,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;"}
+{"version":3,"file":"BottomNavigation.cjs","sources":["../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n  /** The currently selected action value. */\n  value?: string;\n  /** Called when the selected action changes. */\n  onValueChange?: (value: string) => void;\n  /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n  hideOnDesktop?: boolean;\n  /** When `true`, renders the information-architecture style with visible labels and a sliding active indicator. @default false */\n  hasInformationArchitectureNav?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  hasInformationArchitectureNav: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n  hasInformationArchitectureNav: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n  return React.useContext(BottomNavigationContext);\n}\n\nfunction resolveChildren(children: React.ReactNode, value: string | undefined) {\n  const items = React.Children.toArray(children);\n  for (let i = 0; i < items.length; i++) {\n    const child = items[i];\n    if (React.isValidElement<{ value?: string }>(child) && child.props.value === value) {\n      return { count: items.length, activeIndex: i };\n    }\n  }\n  return { count: items.length, activeIndex: undefined };\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      onValueChange,\n      hasInformationArchitectureNav = false,\n      hideOnDesktop = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const contextValue = React.useMemo<BottomNavigationContextValue>(\n      () => ({ value, onValueChange, hasInformationArchitectureNav }),\n      [value, onValueChange, hasInformationArchitectureNav],\n    );\n\n    if (hasInformationArchitectureNav) {\n      const { count: itemCount, activeIndex } = resolveChildren(children, value);\n      const { style, ...restProps } = props;\n\n      return (\n        <BottomNavigationContext.Provider value={contextValue}>\n          <nav\n            ref={ref}\n            {...restProps}\n            className={cn(\n              \"fixed inset-x-0 bottom-0 flex h-[calc(env(safe-area-inset-bottom,0px)+80px)] items-stretch justify-around pb-[env(safe-area-inset-bottom,0px)]\",\n              \"border-neutral-alphas-200 border-t bg-background-primary\",\n              hideOnDesktop && \"md:hidden\",\n              className,\n            )}\n            style={\n              { zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style } as React.CSSProperties\n            }\n          >\n            {activeIndex != null && (\n              <div\n                aria-hidden=\"true\"\n                data-part=\"indicator\"\n                className=\"pointer-events-none absolute inset-x-0 -top-px h-0\"\n              >\n                <div\n                  className=\"absolute top-0 flex -translate-x-1/2 flex-col items-center motion-safe:transition-[left] motion-safe:duration-300 motion-safe:ease-in-out\"\n                  style={{\n                    left: `calc((${activeIndex} + 0.5) * (100% / ${itemCount}))`,\n                    width: `calc(100% / ${itemCount})`,\n                  }}\n                >\n                  <div className=\"h-px w-full bg-linear-to-r from-transparent via-(--color-special-bottom-nav-highlight) to-transparent\" />\n                  <div className=\"@container h-20 w-full overflow-hidden\">\n                    <div className=\"mx-auto aspect-square w-[70%] max-w-[70px] -translate-y-1/2 rounded-full bg-(--color-special-bottom-nav-highlight) opacity-30 blur-[min(20px,2vw)] @max-[80px]:w-[calc(70%-10px)] dark:opacity-15\" />\n                  </div>\n                </div>\n              </div>\n            )}\n            {children}\n          </nav>\n        </BottomNavigationContext.Provider>\n      );\n    }\n\n    return (\n      <BottomNavigationContext.Provider value={contextValue}>\n        <nav\n          ref={ref}\n          className={cn(\n            \"fixed inset-x-0 bottom-0\",\n            \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n            \"border-neutral-alphas-200 border-t bg-background-primary\",\n            \"pb-[env(safe-area-inset-bottom,0px)]\",\n            hideOnDesktop && \"md:hidden\",\n            className,\n          )}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n          {...props}\n        >\n          {children}\n        </nav>\n      </BottomNavigationContext.Provider>\n    );\n  },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":["React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,0BAA0BA,iBAAM,cAA4C;AAAA,EAChF,+BAA+B;AACjC,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAOA,iBAAM,WAAW,uBAAuB;AACjD;AAEA,SAAS,gBAAgB,UAA2B,OAA2B;AAC7E,QAAM,QAAQA,iBAAM,SAAS,QAAQ,QAAQ;AAC7C,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,QAAQ,MAAM,CAAC;AACrB,QAAIA,iBAAM,eAAmC,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAClF,aAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,EAAA;AAAA,IAC7C;AAAA,EACF;AACA,SAAO,EAAE,OAAO,MAAM,QAAQ,aAAa,OAAA;AAC7C;AAEO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAeA,iBAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe;MAC/B,CAAC,OAAO,eAAe,6BAA6B;AAAA,IAAA;AAGtD,QAAI,+BAA+B;AACjC,YAAM,EAAE,OAAO,WAAW,gBAAgB,gBAAgB,UAAU,KAAK;AACzE,YAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAEhC,aACEC,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACJ,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,UAEF,OACE,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,UAGrD,UAAA;AAAA,YAAA,eAAe,QACdF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV,UAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,MAAM,SAAS,WAAW,qBAAqB,SAAS;AAAA,sBACxD,OAAO,eAAe,SAAS;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,wGAAA,CAAwG;AAAA,sBACvHA,2BAAAA,IAAC,SAAI,WAAU,0CACb,yCAAC,OAAA,EAAI,WAAU,qMAAoM,EAAA,CACrN;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAGH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,IAEJ;AAEA,WACEA,2BAAAA,IAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;"}

package/dist/cjs/components/BottomNavigation/BottomNavigationAction.cjs

@@ -49,7 +49,7 @@ const BottomNavigationAction = React__namespace.forwardRef(({ className, value,
           "relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1",
           isActive ? "text-icons-primary" : "text-icons-tertiary",
           "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
           className
         ),
         children: [
@@ -84,7 +84,7 @@ const BottomNavigationAction = React__namespace.forwardRef(({ className, value,
         "relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2",
         "text-content-primary",
         "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
         className
       ),
       onClick: handleClick,

package/dist/cjs/components/BottomNavigation/BottomNavigationAction.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigationAction.cjs","sources":["../../../../src/components/BottomNavigation/BottomNavigationAction.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useBottomNavigationContext } from \"./BottomNavigation\";\n\nexport interface BottomNavigationActionProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** Unique value that identifies this action. */\n  value: string;\n  /** Icon element displayed in the action. */\n  icon: React.ReactElement;\n  /** Accessible label applied as `aria-label`. */\n  label?: string;\n  /** Optional badge element (e.g. {@link Count}) rendered at the top-end corner of the icon. */\n  badge?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n}\n\nexport const BottomNavigationAction = React.forwardRef<\n  HTMLButtonElement,\n  BottomNavigationActionProps\n>(({ className, value, icon, label, badge, onClick, asChild = false, children, ...props }, ref) => {\n  const {\n    value: selectedValue,\n    onValueChange,\n    hasInformationArchitectureNav,\n  } = useBottomNavigationContext();\n\n  const isActive = selectedValue === value;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onValueChange?.(value);\n    onClick?.(e);\n  };\n\n  const Comp = asChild ? Slot : \"button\";\n\n  if (hasInformationArchitectureNav) {\n    return (\n      <Comp\n        ref={ref}\n        {...(!asChild && { type: \"button\" as const })}\n        aria-current={isActive ? (\"page\" as const) : undefined}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleClick}\n        {...props}\n        className={cn(\n          \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1\",\n          isActive ? \"text-icons-primary\" : \"text-icons-tertiary\",\n          \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\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          className,\n        )}\n      >\n        {asChild && <Slottable>{children}</Slottable>}\n        <span className=\"relative inline-flex\">\n          <span className=\"flex items-center justify-center [&>svg]:size-6\" aria-hidden=\"true\">\n            {icon}\n          </span>\n          {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n        </span>\n        {label && (\n          <span\n            className={cn(\n              \"typography-medium-caption-xs max-w-full truncate text-center motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n              isActive ? \"text-content-primary\" : \"text-content-tertiary\",\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      ref={ref}\n      {...(!asChild && { type: \"button\" as const })}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-label={label}\n      data-state={isActive ? \"active\" : \"inactive\"}\n      className={cn(\n        \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2\",\n        \"text-content-primary\",\n        \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\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        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {asChild && <Slottable>{children}</Slottable>}\n      <span className=\"relative inline-flex\">\n        <span className=\"flex items-center justify-center [&>svg]:size-7\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n      </span>\n    </Comp>\n  );\n});\n\nBottomNavigationAction.displayName = \"BottomNavigationAction\";\n"],"names":["React","useBottomNavigationContext","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,yBAAyBA,iBAAM,WAG1C,CAAC,EAAE,WAAW,OAAO,MAAM,OAAO,OAAO,SAAS,UAAU,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACjG,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA,IACEC,4CAAA;AAEJ,QAAM,WAAW,kBAAkB;AAEnC,QAAM,cAAc,CAAC,MAA2C;AAC9D,oBAAgB,KAAK;AACrB,cAAU,CAAC;AAAA,EACb;AAEA,QAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,MAAI,+BAA+B;AACjC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,QACzB,gBAAc,WAAY,SAAmB;AAAA,QAC7C,cAAY,WAAW,WAAW;AAAA,QAClC,SAAS;AAAA,QACR,GAAG;AAAA,QACJ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,UAClC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,WAAWC,2BAAAA,IAACC,uBAAW,SAAA,CAAS;AAAA,UACjCH,2BAAAA,KAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,YAAAE,+BAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,YACC,SAASA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,UAAA,GAC9D;AAAA,UACC,SACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,WAAW,yBAAyB;AAAA,cAAA;AAAA,cAGrC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACED,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,MACzB,gBAAc,WAAW,SAAS;AAAA,MAClC,cAAY;AAAA,MACZ,cAAY,WAAW,WAAW;AAAA,MAClC,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAWC,2BAAAA,IAACC,uBAAW,SAAA,CAAS;AAAA,QACjCH,2BAAAA,KAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,UAAAE,+BAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,UACC,SAASA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,QAAA,EAAA,CAC9D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,uBAAuB,cAAc;;"}
+{"version":3,"file":"BottomNavigationAction.cjs","sources":["../../../../src/components/BottomNavigation/BottomNavigationAction.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useBottomNavigationContext } from \"./BottomNavigation\";\n\nexport interface BottomNavigationActionProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** Unique value that identifies this action. */\n  value: string;\n  /** Icon element displayed in the action. */\n  icon: React.ReactElement;\n  /** Accessible label applied as `aria-label`. */\n  label?: string;\n  /** Optional badge element (e.g. {@link Count}) rendered at the top-end corner of the icon. */\n  badge?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n}\n\nexport const BottomNavigationAction = React.forwardRef<\n  HTMLButtonElement,\n  BottomNavigationActionProps\n>(({ className, value, icon, label, badge, onClick, asChild = false, children, ...props }, ref) => {\n  const {\n    value: selectedValue,\n    onValueChange,\n    hasInformationArchitectureNav,\n  } = useBottomNavigationContext();\n\n  const isActive = selectedValue === value;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onValueChange?.(value);\n    onClick?.(e);\n  };\n\n  const Comp = asChild ? Slot : \"button\";\n\n  if (hasInformationArchitectureNav) {\n    return (\n      <Comp\n        ref={ref}\n        {...(!asChild && { type: \"button\" as const })}\n        aria-current={isActive ? (\"page\" as const) : undefined}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleClick}\n        {...props}\n        className={cn(\n          \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1\",\n          isActive ? \"text-icons-primary\" : \"text-icons-tertiary\",\n          \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\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          className,\n        )}\n      >\n        {asChild && <Slottable>{children}</Slottable>}\n        <span className=\"relative inline-flex\">\n          <span className=\"flex items-center justify-center [&>svg]:size-6\" aria-hidden=\"true\">\n            {icon}\n          </span>\n          {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n        </span>\n        {label && (\n          <span\n            className={cn(\n              \"typography-medium-caption-xs max-w-full truncate text-center motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n              isActive ? \"text-content-primary\" : \"text-content-tertiary\",\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      ref={ref}\n      {...(!asChild && { type: \"button\" as const })}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-label={label}\n      data-state={isActive ? \"active\" : \"inactive\"}\n      className={cn(\n        \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2\",\n        \"text-content-primary\",\n        \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\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        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {asChild && <Slottable>{children}</Slottable>}\n      <span className=\"relative inline-flex\">\n        <span className=\"flex items-center justify-center [&>svg]:size-7\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n      </span>\n    </Comp>\n  );\n});\n\nBottomNavigationAction.displayName = \"BottomNavigationAction\";\n"],"names":["React","useBottomNavigationContext","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,yBAAyBA,iBAAM,WAG1C,CAAC,EAAE,WAAW,OAAO,MAAM,OAAO,OAAO,SAAS,UAAU,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACjG,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA,IACEC,4CAAA;AAEJ,QAAM,WAAW,kBAAkB;AAEnC,QAAM,cAAc,CAAC,MAA2C;AAC9D,oBAAgB,KAAK;AACrB,cAAU,CAAC;AAAA,EACb;AAEA,QAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,MAAI,+BAA+B;AACjC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,QACzB,gBAAc,WAAY,SAAmB;AAAA,QAC7C,cAAY,WAAW,WAAW;AAAA,QAClC,SAAS;AAAA,QACR,GAAG;AAAA,QACJ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,UAClC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,WAAWC,2BAAAA,IAACC,uBAAW,SAAA,CAAS;AAAA,UACjCH,2BAAAA,KAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,YAAAE,+BAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,YACC,SAASA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,UAAA,GAC9D;AAAA,UACC,SACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,WAAW,yBAAyB;AAAA,cAAA;AAAA,cAGrC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACED,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,MACzB,gBAAc,WAAW,SAAS;AAAA,MAClC,cAAY;AAAA,MACZ,cAAY,WAAW,WAAW;AAAA,MAClC,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAWC,2BAAAA,IAACC,uBAAW,SAAA,CAAS;AAAA,QACjCH,2BAAAA,KAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,UAAAE,+BAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,UACC,SAASA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,QAAA,EAAA,CAC9D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,uBAAuB,cAAc;;"}

package/dist/cjs/components/Breadcrumb/Breadcrumb.cjs

@@ -53,7 +53,7 @@ const BreadcrumbLink = React__namespace.forwardRef(
       {
         ref,
         className: cn.cn(
-          "typography-regular-body-sm rounded-[2px] text-content-secondary underline-offset-2 transition-colors hover:text-content-primary hover:underline focus-visible:shadow-focus-ring focus-visible:outline-none",
+          "typography-description-12px-regular rounded-[2px] text-content-secondary underline-offset-2 transition-colors hover:text-content-primary hover:underline focus-visible:shadow-focus-ring focus-visible:outline-none",
           className
         ),
         ...props
@@ -68,7 +68,7 @@ const BreadcrumbPage = React__namespace.forwardRef(
     {
       ref,
       "aria-current": "page",
-      className: cn.cn("typography-semibold-body-sm text-content-primary", className),
+      className: cn.cn("typography-description-12px-semibold text-content-primary", className),
       ...props
     }
   )

package/dist/cjs/components/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<\"nav\"> {\n  /** Accessible label for the breadcrumb navigation landmark. @default \"breadcrumb\" */\n  \"aria-label\"?: string;\n}\n\n/**\n * Root navigation wrapper for the breadcrumb trail.\n *\n * @example\n * ```tsx\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbPage>Current Page</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n * ```\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ \"aria-label\": ariaLabel = \"breadcrumb\", ...props }, ref) => (\n    <nav ref={ref} aria-label={ariaLabel} {...props} />\n  ),\n);\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport interface BreadcrumbListProps extends React.ComponentPropsWithoutRef<\"ol\"> {\n  /** Custom separator element rendered between items. @default ChevronRightIcon */\n  separator?: React.ReactNode;\n}\n\n/**\n * Ordered list container for breadcrumb items. Automatically injects a\n * separator between each child item.\n */\nexport const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, children, separator, ...props }, ref) => {\n    const items = React.Children.toArray(children);\n    const withSeparators = items.flatMap((child, index) => {\n      const childKey = React.isValidElement(child) ? child.key : index;\n      return index === 0\n        ? [child]\n        : [\n            <BreadcrumbSeparator key={`sep-before-${childKey}`}>{separator}</BreadcrumbSeparator>,\n            child,\n          ];\n    });\n\n    return (\n      <ol ref={ref} className={cn(\"flex flex-wrap items-center gap-2\", className)} {...props}>\n        {withSeparators}\n      </ol>\n    );\n  },\n);\n\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<\"li\"> {}\n\n/**\n * List item wrapper for a single breadcrumb entry or separator.\n */\nexport const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn(\"inline-flex items-center gap-2\", className)} {...props} />\n  ),\n);\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n  /** Render the link as a child element (e.g. a router `Link`). @default false */\n  asChild?: boolean;\n}\n\n/**\n * Anchor element for a non-current breadcrumb step. Supports `asChild` for\n * router-aware link components.\n */\nexport const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild = false, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"a\";\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-regular-body-sm rounded-[2px] text-content-secondary underline-offset-2 transition-colors hover:text-content-primary hover:underline focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<\"span\"> {}\n\n/**\n * Non-interactive label representing the current page in the breadcrumb trail.\n */\nexport const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-current=\"page\"\n      className={cn(\"typography-semibold-body-sm text-content-primary\", className)}\n      {...props}\n    />\n  ),\n);\n\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\n\nexport interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<\"li\"> {}\n\n/**\n * Visual separator rendered between breadcrumb items.\n * Renders a right-pointing chevron icon and is hidden from assistive technology.\n */\nexport const BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ className, children, ...props }, ref) => (\n    <li\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\"flex items-center text-content-secondary\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon className=\"size-4\" />}\n    </li>\n  ),\n);\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n"],"names":["React","jsx","cn","Slot","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CAAC,EAAE,cAAc,YAAY,cAAc,GAAG,MAAA,GAAS,uCACpD,OAAA,EAAI,KAAU,cAAY,WAAY,GAAG,MAAA,CAAO;AAErD;AAEA,WAAW,cAAc;AAWlB,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACrD,UAAM,QAAQA,iBAAM,SAAS,QAAQ,QAAQ;AAC7C,UAAM,iBAAiB,MAAM,QAAQ,CAAC,OAAO,UAAU;AACrD,YAAM,WAAWA,iBAAM,eAAe,KAAK,IAAI,MAAM,MAAM;AAC3D,aAAO,UAAU,IACb,CAAC,KAAK,IACN;AAAA,QACEC,+BAAC,qBAAA,EAAoD,UAAA,UAAA,GAA3B,cAAc,QAAQ,EAAe;AAAA,QAC/D;AAAA,MAAA;AAAA,IAER,CAAC;AAED,WACEA,2BAAAA,IAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAG,qCAAqC,SAAS,GAAI,GAAG,OAC9E,UAAA,eAAA,CACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAOtB,MAAM,iBAAiBF,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA,IAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAG,kCAAkC,SAAS,GAAI,GAAG,MAAA,CAAO;AAEzF;AAEA,eAAe,cAAc;AAWtB,MAAM,iBAAiBF,iBAAM;AAAA,EAClC,CAAC,EAAE,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,OAAO,UAAUG,UAAAA,OAAO;AAC9B,WACEF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;AAOtB,MAAM,iBAAiBF,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAa;AAAA,MACb,WAAWC,GAAAA,GAAG,oDAAoD,SAAS;AAAA,MAC1E,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,eAAe,cAAc;AAQtB,MAAM,sBAAsBF,iBAAM;AAAA,EACvC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,4CAA4C,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,YAAYD,2BAAAA,IAACG,iBAAAA,kBAAA,EAAiB,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGxD;AAEA,oBAAoB,cAAc;;;;;;;"}
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<\"nav\"> {\n  /** Accessible label for the breadcrumb navigation landmark. @default \"breadcrumb\" */\n  \"aria-label\"?: string;\n}\n\n/**\n * Root navigation wrapper for the breadcrumb trail.\n *\n * @example\n * ```tsx\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbPage>Current Page</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n * ```\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ \"aria-label\": ariaLabel = \"breadcrumb\", ...props }, ref) => (\n    <nav ref={ref} aria-label={ariaLabel} {...props} />\n  ),\n);\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport interface BreadcrumbListProps extends React.ComponentPropsWithoutRef<\"ol\"> {\n  /** Custom separator element rendered between items. @default ChevronRightIcon */\n  separator?: React.ReactNode;\n}\n\n/**\n * Ordered list container for breadcrumb items. Automatically injects a\n * separator between each child item.\n */\nexport const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, children, separator, ...props }, ref) => {\n    const items = React.Children.toArray(children);\n    const withSeparators = items.flatMap((child, index) => {\n      const childKey = React.isValidElement(child) ? child.key : index;\n      return index === 0\n        ? [child]\n        : [\n            <BreadcrumbSeparator key={`sep-before-${childKey}`}>{separator}</BreadcrumbSeparator>,\n            child,\n          ];\n    });\n\n    return (\n      <ol ref={ref} className={cn(\"flex flex-wrap items-center gap-2\", className)} {...props}>\n        {withSeparators}\n      </ol>\n    );\n  },\n);\n\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<\"li\"> {}\n\n/**\n * List item wrapper for a single breadcrumb entry or separator.\n */\nexport const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn(\"inline-flex items-center gap-2\", className)} {...props} />\n  ),\n);\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n  /** Render the link as a child element (e.g. a router `Link`). @default false */\n  asChild?: boolean;\n}\n\n/**\n * Anchor element for a non-current breadcrumb step. Supports `asChild` for\n * router-aware link components.\n */\nexport const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild = false, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"a\";\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-description-12px-regular rounded-[2px] text-content-secondary underline-offset-2 transition-colors hover:text-content-primary hover:underline focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<\"span\"> {}\n\n/**\n * Non-interactive label representing the current page in the breadcrumb trail.\n */\nexport const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-current=\"page\"\n      className={cn(\"typography-description-12px-semibold text-content-primary\", className)}\n      {...props}\n    />\n  ),\n);\n\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\n\nexport interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<\"li\"> {}\n\n/**\n * Visual separator rendered between breadcrumb items.\n * Renders a right-pointing chevron icon and is hidden from assistive technology.\n */\nexport const BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ className, children, ...props }, ref) => (\n    <li\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\"flex items-center text-content-secondary\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon className=\"size-4\" />}\n    </li>\n  ),\n);\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n"],"names":["React","jsx","cn","Slot","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CAAC,EAAE,cAAc,YAAY,cAAc,GAAG,MAAA,GAAS,uCACpD,OAAA,EAAI,KAAU,cAAY,WAAY,GAAG,MAAA,CAAO;AAErD;AAEA,WAAW,cAAc;AAWlB,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACrD,UAAM,QAAQA,iBAAM,SAAS,QAAQ,QAAQ;AAC7C,UAAM,iBAAiB,MAAM,QAAQ,CAAC,OAAO,UAAU;AACrD,YAAM,WAAWA,iBAAM,eAAe,KAAK,IAAI,MAAM,MAAM;AAC3D,aAAO,UAAU,IACb,CAAC,KAAK,IACN;AAAA,QACEC,+BAAC,qBAAA,EAAoD,UAAA,UAAA,GAA3B,cAAc,QAAQ,EAAe;AAAA,QAC/D;AAAA,MAAA;AAAA,IAER,CAAC;AAED,WACEA,2BAAAA,IAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAG,qCAAqC,SAAS,GAAI,GAAG,OAC9E,UAAA,eAAA,CACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAOtB,MAAM,iBAAiBF,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA,IAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAG,kCAAkC,SAAS,GAAI,GAAG,MAAA,CAAO;AAEzF;AAEA,eAAe,cAAc;AAWtB,MAAM,iBAAiBF,iBAAM;AAAA,EAClC,CAAC,EAAE,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,OAAO,UAAUG,UAAAA,OAAO;AAC9B,WACEF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;AAOtB,MAAM,iBAAiBF,iBAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAa;AAAA,MACb,WAAWC,GAAAA,GAAG,6DAA6D,SAAS;AAAA,MACnF,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,eAAe,cAAc;AAQtB,MAAM,sBAAsBF,iBAAM;AAAA,EACvC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,4CAA4C,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,YAAYD,2BAAAA,IAACG,iBAAAA,kBAAA,EAAiB,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGxD;AAEA,oBAAoB,cAAc;;;;;;;"}

package/dist/cjs/components/Button/Button.cjs

@@ -24,10 +24,10 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const SIZE_CLASSES = {
-  "48": "h-12 px-4 py-3 typography-semibold-body-lg",
-  "40": "h-10 px-4 py-2 typography-semibold-body-lg",
-  "32": "h-8 px-3 py-2 typography-semibold-body-md",
-  "24": "h-6 px-2 py-1 typography-semibold-body-md"
+  "48": "h-12 px-4 py-3 typography-body-default-16px-semibold",
+  "40": "h-10 px-4 py-2 typography-body-default-16px-semibold",
+  "32": "h-8 px-3 py-2 typography-body-small-14px-semibold",
+  "24": "h-6 px-2 py-1 typography-body-small-14px-semibold"
 };
 const ICON_SIZE_CLASS = {
   "48": "size-5",
@@ -42,13 +42,13 @@ const ICON_WRAPPER_CLASS = {
   "24": "[&>svg]:size-3.5"
 };
 const VARIANT_CLASSES = {
-  primary: "bg-buttons-primary text-content-primary-inverted hover:bg-buttons-primary-hover hover:text-content-primary-inverted active:bg-buttons-primary-hover active:text-content-primary-inverted",
+  primary: "bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover hover:text-content-primary-inverted active:bg-buttons-primary-hover active:text-content-primary-inverted",
   secondary: "border-content-primary border bg-transparent text-content-primary hover:bg-brand-primary-muted active:bg-brand-primary-muted",
   tertiary: "bg-transparent text-content-primary hover:bg-brand-primary-muted active:bg-brand-primary-muted",
   link: "bg-transparent text-content-primary underline decoration-solid hover:bg-brand-primary-muted active:bg-brand-primary-muted",
-  brand: "bg-buttons-brand text-content-on-brand hover:bg-buttons-brand-hover hover:text-content-on-brand active:bg-buttons-brand-hover active:text-content-on-brand",
-  destructive: "bg-error-content text-content-on-brand-inverted hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary",
-  white: "bg-content-on-brand-inverted text-content-on-brand hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary",
+  brand: "bg-buttons-brand-default text-content-always-black hover:bg-buttons-brand-hover hover:text-content-always-black active:bg-buttons-brand-hover active:text-content-always-black",
+  destructive: "bg-error-content text-content-always-white hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary",
+  white: "bg-content-always-white text-content-always-black hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary",
   tertiaryDestructive: "bg-transparent text-error-content hover:bg-error-surface active:bg-error-surface",
   text: "bg-transparent text-content-primary hover:underline active:underline"
 };
@@ -114,7 +114,7 @@ function renderContent({
       }
     ),
     (price || discount) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      discount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-lg line-through", "aria-hidden": "true", children: discount }),
+      discount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-default-16px-regular line-through", "aria-hidden": "true", children: discount }),
       price && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", "aria-hidden": "true", children: price })
     ] })
   ] });

package/dist/cjs/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n  /** When `true`, the button will take the full width of its container. @default false */\n  fullWidth?: boolean;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-semibold-body-lg\",\n  \"40\": \"h-10 px-4 py-2 typography-semibold-body-lg\",\n  \"32\": \"h-8 px-3 py-2 typography-semibold-body-md\",\n  \"24\": \"h-6 px-2 py-1 typography-semibold-body-md\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-buttons-primary text-content-primary-inverted hover:bg-buttons-primary-hover hover:text-content-primary-inverted active:bg-buttons-primary-hover active:text-content-primary-inverted\",\n  secondary:\n    \"border-content-primary border bg-transparent text-content-primary hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n  link: \"bg-transparent text-content-primary underline decoration-solid hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n  brand:\n    \"bg-buttons-brand text-content-on-brand hover:bg-buttons-brand-hover hover:text-content-on-brand active:bg-buttons-brand-hover active:text-content-on-brand\",\n  destructive:\n    \"bg-error-content text-content-on-brand-inverted hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary\",\n  white:\n    \"bg-content-on-brand-inverted text-content-on-brand hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-error-surface active:bg-error-surface\",\n  text: \"bg-transparent text-content-primary hover:underline active:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n  fullWidth?: boolean;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {React.Children.map(children, (child) =>\n        typeof child === \"string\" ? (\n          child.trim() ? (\n            <span className=\"min-w-0 truncate\">{child}</span>\n          ) : null\n        ) : typeof child === \"number\" ? (\n          <span className=\"min-w-0 truncate\">{child}</span>\n        ) : (\n          child\n        ),\n      )}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {(price || discount) && (\n        <div>\n          {discount && (\n            <span className=\"typography-regular-body-lg line-through\" aria-hidden=\"true\">\n              {discount}\n            </span>\n          )}\n          {price && (\n            <span className=\"ml-2\" aria-hidden=\"true\">\n              {price}\n            </span>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex min-w-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          `${price ? \"justify-between\" : \"justify-center\"}`,\n          fullWidth && \"w-full\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["React","jsx","SpinnerIcon","jsxs","Fragment","cn","Slot"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n  /** When `true`, the button will take the full width of its container. @default false */\n  fullWidth?: boolean;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-body-default-16px-semibold\",\n  \"40\": \"h-10 px-4 py-2 typography-body-default-16px-semibold\",\n  \"32\": \"h-8 px-3 py-2 typography-body-small-14px-semibold\",\n  \"24\": \"h-6 px-2 py-1 typography-body-small-14px-semibold\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover hover:text-content-primary-inverted active:bg-buttons-primary-hover active:text-content-primary-inverted\",\n  secondary:\n    \"border-content-primary border bg-transparent text-content-primary hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n  link: \"bg-transparent text-content-primary underline decoration-solid hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n  brand:\n    \"bg-buttons-brand-default text-content-always-black hover:bg-buttons-brand-hover hover:text-content-always-black active:bg-buttons-brand-hover active:text-content-always-black\",\n  destructive:\n    \"bg-error-content text-content-always-white hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary\",\n  white:\n    \"bg-content-always-white text-content-always-black hover:bg-brand-primary-muted hover:text-content-primary active:bg-brand-primary-muted active:text-content-primary\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-error-surface active:bg-error-surface\",\n  text: \"bg-transparent text-content-primary hover:underline active:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n  fullWidth?: boolean;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {React.Children.map(children, (child) =>\n        typeof child === \"string\" ? (\n          child.trim() ? (\n            <span className=\"min-w-0 truncate\">{child}</span>\n          ) : null\n        ) : typeof child === \"number\" ? (\n          <span className=\"min-w-0 truncate\">{child}</span>\n        ) : (\n          child\n        ),\n      )}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {(price || discount) && (\n        <div>\n          {discount && (\n            <span className=\"typography-body-default-16px-regular line-through\" aria-hidden=\"true\">\n              {discount}\n            </span>\n          )}\n          {price && (\n            <span className=\"ml-2\" aria-hidden=\"true\">\n              {price}\n            </span>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex min-w-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          `${price ? \"justify-between\" : \"justify-center\"}`,\n          fullWidth && \"w-full\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["React","jsx","SpinnerIcon","jsxs","Fragment","cn","Slot"],"mappings":"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"}

package/dist/cjs/components/Card/Card.cjs

@@ -62,7 +62,7 @@ const CardTitle = React__namespace.forwardRef(
       "h3",
       {
         ref,
-        className: cn.cn("typography-semibold-body-lg text-content-primary", className),
+        className: cn.cn("typography-body-default-16px-semibold text-content-primary", className),
         ...props,
         children
       }
@@ -76,7 +76,7 @@ const CardDescription = React__namespace.forwardRef(
       "p",
       {
         ref,
-        className: cn.cn("typography-regular-body-sm text-content-secondary", className),
+        className: cn.cn("typography-description-12px-regular text-content-secondary", className),
         ...props,
         children
       }

package/dist/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-md\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-semibold-body-lg text-content-primary\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-regular-body-sm text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,oDAAoD,SAAS;AAAA,QAC1E,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,qDAAqD,SAAS;AAAA,QAC3E,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-md\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-body-default-16px-semibold text-content-primary\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}

package/dist/cjs/components/Chart/ChartCard.cjs

@@ -50,7 +50,7 @@ const ChartCard = React__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-3 w-24" })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-content-primary", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-semibold text-content-primary", children: title }),
           tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               IconButton.IconButton,
@@ -65,19 +65,19 @@ const ChartCard = React__namespace.forwardRef(
           ] }) })
         ] }),
         subtitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-bold-heading-sm text-content-primary", children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-header-heading-sm text-content-primary", children: subtitle }),
           trendChip && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: cn.cn(
-                "typography-semibold-body-sm rounded-full px-2 py-0.5",
+                "typography-description-12px-semibold rounded-full px-2 py-0.5",
                 TREND_CLASSES[trendChip.trend]
               ),
               children: trendChip.label
             }
           )
         ] }),
-        dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-tertiary", children: dateInfo })
+        dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular text-content-tertiary", children: dateInfo })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
     ] }) });