@fanvue/ui 3.17.0 → 3.19.0

package/dist/components/Badge/Badge.mjs

@@ -5,19 +5,20 @@ import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
 const badgeVariants = {
   variant: {
-    default: "bg-neutral-alphas-50 text-content-primary",
+    default: "bg-buttons-secondary-default text-content-primary",
     dark: "bg-neutral-alphas-600 text-content-always-white",
-    success: "bg-success-surface text-success-content",
-    warning: "bg-warning-surface text-warning-content",
-    error: "bg-error-surface text-error-content",
-    special: "bg-neutral-alphas-50 text-content-primary",
-    info: "bg-info-surface text-info-content",
+    success: "bg-buttons-secondary-default text-content-primary",
+    warning: "bg-buttons-secondary-default text-content-primary",
+    error: "bg-buttons-secondary-default text-content-primary",
+    special: "bg-buttons-secondary-default text-content-primary",
+    info: "bg-buttons-secondary-default text-content-primary",
     successColour: "bg-success-surface text-content-primary",
     warningColour: "bg-warning-surface text-content-primary",
     errorColour: "bg-error-surface text-content-primary",
     infoColour: "bg-info-surface text-content-primary",
     aiGenerated: "bg-buttons-always-white-default text-content-always-black",
     negative: "bg-buttons-secondary-negative-default text-content-primary-inverted",
+    alwaysWhite: "bg-buttons-secondary-negative-default text-content-always-white",
     online: "bg-background-primary text-brand-primary-default",
     brand: "bg-brand-primary-default text-content-always-black",
     pink: "bg-brand-secondary-default text-content-always-black",
@@ -25,7 +26,7 @@ const badgeVariants = {
     pinkLight: "bg-brand-secondary-muted text-content-primary"
   },
   dotColor: {
-    default: "bg-content-primary",
+    default: "bg-icons-primary",
     dark: "bg-content-always-white",
     success: "bg-success-content",
     warning: "bg-warning-content",
@@ -38,6 +39,7 @@ const badgeVariants = {
     infoColour: "bg-info-content",
     aiGenerated: "bg-content-always-black",
     negative: "bg-icons-primary-inverted",
+    alwaysWhite: "bg-brand-primary-default",
     online: "bg-brand-primary-default",
     brand: "bg-content-always-black",
     pink: "bg-content-always-black",
@@ -65,7 +67,7 @@ const Badge = React.forwardRef(
         "data-testid": "badge",
         className: cn(
           // Base styles
-          "typography-description-12px-semibold inline-flex h-6 min-w-0 items-center gap-2 rounded-full px-2",
+          "typography-badge-badgecaps inline-flex h-5 min-w-0 items-center gap-1 rounded-full px-2",
           // Variant styles
           badgeVariants.variant[variant],
           // Interactive
@@ -79,7 +81,7 @@ const Badge = React.forwardRef(
           leftIcon && /* @__PURE__ */ jsx(
             "span",
             {
-              className: "flex shrink-0 items-center justify-center [&>svg]:size-3",
+              className: "flex shrink-0 items-center justify-center [&>svg]:size-2.5",
               "aria-hidden": "true",
               children: leftIcon
             }
@@ -91,11 +93,11 @@ const Badge = React.forwardRef(
               "aria-hidden": "true"
             }
           ),
-          asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+          asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate [text-box:trim-both_cap_alphabetic]", children }),
           rightIcon && /* @__PURE__ */ jsx(
             "span",
             {
-              className: "flex shrink-0 items-center justify-center [&>svg]:size-3",
+              className: "flex shrink-0 items-center justify-center [&>svg]:size-2.5",
               "aria-hidden": "true",
               children: rightIcon
             }

package/dist/components/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","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-primary\",\n    dark: \"bg-neutral-alphas-600 text-content-always-white\",\n    success: \"bg-success-surface text-success-content\",\n    warning: \"bg-warning-surface text-warning-content\",\n    error: \"bg-error-surface text-error-content\",\n    special: \"bg-neutral-alphas-50 text-content-primary\",\n    info: \"bg-info-surface text-info-content\",\n    successColour: \"bg-success-surface text-content-primary\",\n    warningColour: \"bg-warning-surface text-content-primary\",\n    errorColour: \"bg-error-surface text-content-primary\",\n    infoColour: \"bg-info-surface text-content-primary\",\n    aiGenerated: \"bg-buttons-always-white-default text-content-always-black\",\n    negative: \"bg-buttons-secondary-negative-default text-content-primary-inverted\",\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-primary\",\n    pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n  },\n  dotColor: {\n    default: \"bg-content-primary\",\n    dark: \"bg-content-always-white\",\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    successColour: \"bg-success-content\",\n    warningColour: \"bg-warning-content\",\n    errorColour: \"bg-error-content\",\n    infoColour: \"bg-info-content\",\n    aiGenerated: \"bg-content-always-black\",\n    negative: \"bg-icons-primary-inverted\",\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  | \"successColour\"\n  | \"warningColour\"\n  | \"errorColour\"\n  | \"infoColour\"\n  | \"aiGenerated\"\n  | \"negative\"\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-6 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\n            className=\"flex shrink-0 items-center justify-center [&>svg]:size-3\"\n            aria-hidden=\"true\"\n          >\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\n            className=\"flex shrink-0 items-center justify-center [&>svg]:size-3\"\n            aria-hidden=\"true\"\n          >\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":[],"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,eAAe;AAAA,IACf,eAAe;AAAA,IACf,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,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,eAAe;AAAA,IACf,eAAe;AAAA,IACf,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AA4CO,MAAM,QAAQ,MAAM;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,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,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,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGf,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Badge.mjs","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.ts\";\n\nconst badgeVariants = {\n  variant: {\n    default: \"bg-buttons-secondary-default text-content-primary\",\n    dark: \"bg-neutral-alphas-600 text-content-always-white\",\n    success: \"bg-buttons-secondary-default text-content-primary\",\n    warning: \"bg-buttons-secondary-default text-content-primary\",\n    error: \"bg-buttons-secondary-default text-content-primary\",\n    special: \"bg-buttons-secondary-default text-content-primary\",\n    info: \"bg-buttons-secondary-default text-content-primary\",\n    successColour: \"bg-success-surface text-content-primary\",\n    warningColour: \"bg-warning-surface text-content-primary\",\n    errorColour: \"bg-error-surface text-content-primary\",\n    infoColour: \"bg-info-surface text-content-primary\",\n    aiGenerated: \"bg-buttons-always-white-default text-content-always-black\",\n    negative: \"bg-buttons-secondary-negative-default text-content-primary-inverted\",\n    alwaysWhite: \"bg-buttons-secondary-negative-default text-content-always-white\",\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-primary\",\n    pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n  },\n  dotColor: {\n    default: \"bg-icons-primary\",\n    dark: \"bg-content-always-white\",\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    successColour: \"bg-success-content\",\n    warningColour: \"bg-warning-content\",\n    errorColour: \"bg-error-content\",\n    infoColour: \"bg-info-content\",\n    aiGenerated: \"bg-content-always-black\",\n    negative: \"bg-icons-primary-inverted\",\n    alwaysWhite: \"bg-brand-primary-default\",\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  | \"successColour\"\n  | \"warningColour\"\n  | \"errorColour\"\n  | \"infoColour\"\n  | \"aiGenerated\"\n  | \"negative\"\n  | \"alwaysWhite\"\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-badge-badgecaps inline-flex h-5 min-w-0 items-center gap-1 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\n            className=\"flex shrink-0 items-center justify-center [&>svg]:size-2.5\"\n            aria-hidden=\"true\"\n          >\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 [text-box:trim-both_cap_alphabetic]\">{children}</span>\n        )}\n        {rightIcon && (\n          <span\n            className=\"flex shrink-0 items-center justify-center [&>svg]:size-2.5\"\n            aria-hidden=\"true\"\n          >\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":[],"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,eAAe;AAAA,IACf,eAAe;AAAA,IACf,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,aAAa;AAAA,IACb,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,eAAe;AAAA,IACf,eAAe;AAAA,IACf,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AA6CO,MAAM,QAAQ,MAAM;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,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,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,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGf,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,wDAAwD,SAAA,CAAS;AAAA,UAElF,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/Banner/Banner.mjs

@@ -97,7 +97,7 @@ function BannerGuideBody({
       {
         variant: GUIDE_BADGE_VARIANT[appStoreVariant],
         leftDot: false,
-        className: "typography-badge-badgecaps self-start",
+        className: "self-start",
         children: eyebrow
       }
     ),

package/dist/components/Banner/Banner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.mjs","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":[],"mappings":"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"}
+{"version":3,"file":"Banner.mjs","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=\"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":[],"mappings":"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"}

package/dist/components/Chip/Chip.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
+import { Count } from "../Count/Count.mjs";
 const Chip = React.forwardRef(
   ({
     className,
@@ -15,6 +16,9 @@ const Chip = React.forwardRef(
     leftIcon,
     rightIcon,
     notificationLabel,
+    notificationCount,
+    notificationMax,
+    notificationVariant = "brand",
     onClick,
     asChild = false,
     children,
@@ -110,7 +114,23 @@ const Chip = React.forwardRef(
               }
             )
           ] }),
-          notificationLabel && /* @__PURE__ */ jsx("span", { className: "typography-description-12px-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted", children: notificationLabel })
+          (notificationCount != null || notificationLabel) && /* @__PURE__ */ jsx(
+            Count,
+            {
+              variant: notificationVariant,
+              size: "32",
+              className: cn(
+                // V2 Notification Count: 20px high/min-width, caption 12,
+                // 4px horizontal and 2px vertical padding, rounded-md.
+                "absolute top-[-4px] rounded-md px-1 py-0.5",
+                // Anchor the leading edge so wider values grow away from the label.
+                size === "40" ? "left-[calc(100%_-_16px)]" : "left-[calc(100%_-_11px)]"
+              ),
+              value: notificationCount ?? 0,
+              max: notificationMax,
+              children: notificationCount == null ? notificationLabel : void 0
+            }
+          )
         ] })
       }
     );

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual variant of the chip. */\nexport type ChipVariant = \"rounded\" | \"square\" | \"dark\";\n/** Height of the chip in pixels. */\nexport type ChipSize = \"32\" | \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual variant of the chip. @default \"rounded\" */\n  variant?: ChipVariant;\n  /** Height of the chip in pixels. @default \"32\" */\n  size?: ChipSize;\n  /** Whether the chip is in a selected (pressed) state. @default false */\n  selected?: boolean;\n  /** Whether the chip is disabled. @default false */\n  disabled?: boolean;\n  /** Whether to show a coloured status dot at the leading edge. @default false */\n  leftDot?: boolean;\n  /**\n   * Whether the chip uses a dashed border for add/create affordances.\n   * When `selected`, it becomes a subtle filled state with a solid border.\n   * Has no effect when `variant=\"dark\"`.\n   * @default false\n   */\n  dotted?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Notification badge content (e.g. `\"99+\"`). Passed as a string for i18n support. */\n  notificationLabel?: string;\n  /** Click handler — when provided, the chip renders as a `<button>` for accessibility. */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Merge props onto a child element instead of rendering a wrapper. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A compact element for filters, tags, or toggleable actions. When an `onClick`\n * handler is provided, the chip renders as an interactive `<button>` with\n * `aria-pressed` support.\n *\n * @example\n * ```tsx\n * <Chip selected onClick={toggle}>Music</Chip>\n * ```\n */\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      className,\n      variant = \"rounded\",\n      size = \"32\",\n      selected = false,\n      disabled = false,\n      leftDot = false,\n      dotted = false,\n      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    // The dashed border is drawn as an SVG so the dash length matches the design\n    // spec (8/8 for the 40px square, 6/6 otherwise). CSS `border-dashed` only\n    // renders browser-default dash lengths, which are too short. The stroke colour\n    // is driven by `currentColor`, and `group-hover`/`group-active` react to the\n    // chip's interactive states. Rendered only in the default (non-`asChild`) path.\n    const showDottedBorder = !isDark && dotted && !selected && !asChild;\n    const dottedBorder = showDottedBorder ? (\n      <svg\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 size-full overflow-visible\",\n          disabled ? \"text-buttons-chip-disabled\" : \"text-buttons-chip-dotted-default\",\n          isInteractive &&\n            !disabled &&\n            \"group-hover:text-buttons-chip-dotted-hover-stroke group-active:text-buttons-chip-dotted-hover-stroke\",\n        )}\n      >\n        <rect\n          x=\"0.5\"\n          y=\"0.5\"\n          rx={variant === \"square\" ? 7.5 : size === \"40\" ? 19.5 : 15.5}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeDasharray={variant === \"square\" && size === \"40\" ? \"8 8\" : \"6 6\"}\n          style={{ width: \"calc(100% - 1px)\", height: \"calc(100% - 1px)\" }}\n        />\n      </svg>\n    ) : null;\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n          // Shape\n          variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n          // Size (32px uses 12px text, 40px uses 14px text per the design spec)\n          size === \"32\" && \"typography-description-12px-semibold h-8 py-1\",\n          size === \"40\" && \"typography-body-small-14px-semibold h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-neutral-alphas-600 text-content-always-white\",\n          !isDark && selected && !dotted && \"bg-buttons-chip-active text-content-primary-inverted\",\n          // Active + dotted is a subtle filled state with a solid (non-dashed) border.\n          !isDark &&\n            selected &&\n            dotted &&\n            \"border border-border-primary border-solid bg-inputs-inputs-primary text-content-primary\",\n          !isDark && !selected && !dotted && \"bg-buttons-chip-default text-content-primary\",\n          // Dotted (non-selected): the dashed border is drawn via SVG (`dottedBorder`).\n          // `group` lets that SVG react to hover/active. `asChild` keeps a CSS dashed\n          // border fallback since the SVG is only rendered in the default path.\n          !isDark && !selected && dotted && \"bg-transparent text-content-primary\",\n          !isDark && !selected && dotted && !asChild && \"group\",\n          asChild &&\n            !isDark &&\n            !selected &&\n            dotted &&\n            (disabled\n              ? \"border border-buttons-chip-disabled border-dashed\"\n              : \"border border-buttons-chip-dotted-default border-dashed\"),\n          // Interactive\n          isInteractive && !disabled && \"cursor-pointer\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            !dotted &&\n            \"hover:bg-buttons-chip-hover\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            dotted &&\n            \"hover:bg-neutral-alphas-50 active:bg-neutral-alphas-50\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-content-disabled\",\n          // Solid (non-dotted) disabled chips get a muted fill; dotted ones stay\n          // transparent with their dashed border (drawn via SVG).\n          disabled && !isDark && !dotted && \"bg-buttons-chip-disabled\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <>\n            {dottedBorder}\n            <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n              {leftDot && (\n                <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n              )}\n              {leftIcon && (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              <span className=\"min-w-0 truncate\">{children}</span>\n              {rightIcon && (\n                <span\n                  className=\"flex size-5 shrink-0 items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  {rightIcon}\n                </span>\n              )}\n            </span>\n            {notificationLabel && (\n              <span className=\"typography-description-12px-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted\">\n                {notificationLabel}\n              </span>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chip.mjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountVariant } from \"../Count/Count\";\n\n/** Visual variant of the chip. */\nexport type ChipVariant = \"rounded\" | \"square\" | \"dark\";\n/** Height of the chip in pixels. */\nexport type ChipSize = \"32\" | \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual variant of the chip. @default \"rounded\" */\n  variant?: ChipVariant;\n  /** Height of the chip in pixels. @default \"32\" */\n  size?: ChipSize;\n  /** Whether the chip is in a selected (pressed) state. @default false */\n  selected?: boolean;\n  /** Whether the chip is disabled. @default false */\n  disabled?: boolean;\n  /** Whether to show a coloured status dot at the leading edge. @default false */\n  leftDot?: boolean;\n  /**\n   * Whether the chip uses a dashed border for add/create affordances.\n   * When `selected`, it becomes a subtle filled state with a solid border.\n   * Has no effect when `variant=\"dark\"`.\n   * @default false\n   */\n  dotted?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Notification badge content (e.g. `\"99+\"`). Passed as a string for i18n support. */\n  notificationLabel?: string;\n  /** Numeric value for the notification badge. Uses the `Count` component for overflow formatting. Takes precedence over `notificationLabel` when both are provided. */\n  notificationCount?: number;\n  /** Maximum value before the badge shows overflow (e.g. `\"9+\"`). Only applies when `notificationCount` is set. @default 99 */\n  notificationMax?: number;\n  /** Colour variant of the notification badge. @default \"brand\" */\n  notificationVariant?: CountVariant;\n  /** Click handler — when provided, the chip renders as a `<button>` for accessibility. */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Merge props onto a child element instead of rendering a wrapper. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A compact element for filters, tags, or toggleable actions. When an `onClick`\n * handler is provided, the chip renders as an interactive `<button>` with\n * `aria-pressed` support.\n *\n * @example\n * ```tsx\n * <Chip selected onClick={toggle}>Music</Chip>\n * ```\n */\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      className,\n      variant = \"rounded\",\n      size = \"32\",\n      selected = false,\n      disabled = false,\n      leftDot = false,\n      dotted = false,\n      leftIcon,\n      rightIcon,\n      notificationLabel,\n      notificationCount,\n      notificationMax,\n      notificationVariant = \"brand\",\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    // The dashed border is drawn as an SVG so the dash length matches the design\n    // spec (8/8 for the 40px square, 6/6 otherwise). CSS `border-dashed` only\n    // renders browser-default dash lengths, which are too short. The stroke colour\n    // is driven by `currentColor`, and `group-hover`/`group-active` react to the\n    // chip's interactive states. Rendered only in the default (non-`asChild`) path.\n    const showDottedBorder = !isDark && dotted && !selected && !asChild;\n    const dottedBorder = showDottedBorder ? (\n      <svg\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 size-full overflow-visible\",\n          disabled ? \"text-buttons-chip-disabled\" : \"text-buttons-chip-dotted-default\",\n          isInteractive &&\n            !disabled &&\n            \"group-hover:text-buttons-chip-dotted-hover-stroke group-active:text-buttons-chip-dotted-hover-stroke\",\n        )}\n      >\n        <rect\n          x=\"0.5\"\n          y=\"0.5\"\n          rx={variant === \"square\" ? 7.5 : size === \"40\" ? 19.5 : 15.5}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          strokeDasharray={variant === \"square\" && size === \"40\" ? \"8 8\" : \"6 6\"}\n          style={{ width: \"calc(100% - 1px)\", height: \"calc(100% - 1px)\" }}\n        />\n      </svg>\n    ) : null;\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n          // Shape\n          variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n          // Size (32px uses 12px text, 40px uses 14px text per the design spec)\n          size === \"32\" && \"typography-description-12px-semibold h-8 py-1\",\n          size === \"40\" && \"typography-body-small-14px-semibold h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-neutral-alphas-600 text-content-always-white\",\n          !isDark && selected && !dotted && \"bg-buttons-chip-active text-content-primary-inverted\",\n          // Active + dotted is a subtle filled state with a solid (non-dashed) border.\n          !isDark &&\n            selected &&\n            dotted &&\n            \"border border-border-primary border-solid bg-inputs-inputs-primary text-content-primary\",\n          !isDark && !selected && !dotted && \"bg-buttons-chip-default text-content-primary\",\n          // Dotted (non-selected): the dashed border is drawn via SVG (`dottedBorder`).\n          // `group` lets that SVG react to hover/active. `asChild` keeps a CSS dashed\n          // border fallback since the SVG is only rendered in the default path.\n          !isDark && !selected && dotted && \"bg-transparent text-content-primary\",\n          !isDark && !selected && dotted && !asChild && \"group\",\n          asChild &&\n            !isDark &&\n            !selected &&\n            dotted &&\n            (disabled\n              ? \"border border-buttons-chip-disabled border-dashed\"\n              : \"border border-buttons-chip-dotted-default border-dashed\"),\n          // Interactive\n          isInteractive && !disabled && \"cursor-pointer\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            !dotted &&\n            \"hover:bg-buttons-chip-hover\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            dotted &&\n            \"hover:bg-neutral-alphas-50 active:bg-neutral-alphas-50\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-content-disabled\",\n          // Solid (non-dotted) disabled chips get a muted fill; dotted ones stay\n          // transparent with their dashed border (drawn via SVG).\n          disabled && !isDark && !dotted && \"bg-buttons-chip-disabled\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <>\n            {dottedBorder}\n            <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n              {leftDot && (\n                <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n              )}\n              {leftIcon && (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              <span className=\"min-w-0 truncate\">{children}</span>\n              {rightIcon && (\n                <span\n                  className=\"flex size-5 shrink-0 items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  {rightIcon}\n                </span>\n              )}\n            </span>\n            {(notificationCount != null || notificationLabel) && (\n              <Count\n                variant={notificationVariant}\n                size=\"32\"\n                className={cn(\n                  // V2 Notification Count: 20px high/min-width, caption 12,\n                  // 4px horizontal and 2px vertical padding, rounded-md.\n                  \"absolute top-[-4px] rounded-md px-1 py-0.5\",\n                  // Anchor the leading edge so wider values grow away from the label.\n                  size === \"40\" ? \"left-[calc(100%_-_16px)]\" : \"left-[calc(100%_-_11px)]\",\n                )}\n                value={notificationCount ?? 0}\n                max={notificationMax}\n              >\n                {notificationCount == null ? notificationLabel : undefined}\n              </Count>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":[],"mappings":"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"}

package/dist/components/Count/Count.mjs

@@ -6,12 +6,33 @@ import { cn } from "../../utils/cn.mjs";
 function getDisplayValue(value, max) {
   return value > max ? `${max}+` : value.toString();
 }
+function variantClasses(variant) {
+  switch (variant) {
+    case "default":
+      return "bg-content-primary text-content-primary-inverted";
+    case "contrast":
+      return "bg-content-always-white text-content-always-black";
+    case "brand":
+      return "bg-brand-primary-default text-content-always-black";
+    case "alert":
+      return "bg-error-content text-content-always-white";
+    case "pink":
+      return "bg-brand-secondary-default text-content-always-black";
+    case "info":
+      return "bg-info-content text-content-always-white";
+    case "success":
+      return "bg-success-content text-content-always-white";
+    case "warning":
+      return "bg-warning-content text-content-always-black";
+  }
+}
 const Count = React.forwardRef(
   ({
     className,
     variant = "default",
     value = 0,
     max = 99,
+    showAmount = true,
     size = "32",
     asChild = false,
     children,
@@ -21,22 +42,30 @@ const Count = React.forwardRef(
       return null;
     }
     const Comp = asChild ? Slot : "span";
+    const colors = variantClasses(variant);
+    if (!showAmount) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ref,
+          "data-testid": "count",
+          className: cn("inline-flex size-2 shrink-0 rounded-full", colors, className),
+          ...props
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
+        "data-testid": "count",
         className: cn(
           "typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none",
           size === "16" && "h-3 min-w-3 px-0.5 text-[8px]",
+          // Kept at 16px so nav / IconButton badges don't grow; Chip nests this size.
           size === "24" && "h-4 min-w-4 px-1 text-[10px]",
           size === "32" && "h-5 min-w-5 px-1.5 text-[12px]",
-          variant === "default" && "bg-content-primary text-content-primary-inverted",
-          variant === "alert" && "bg-error-content text-content-always-white",
-          variant === "brand" && "bg-brand-primary-default text-content-always-black",
-          variant === "pink" && "bg-brand-secondary-default text-content-always-black",
-          variant === "info" && "bg-info-content text-content-always-white",
-          variant === "success" && "bg-success-content text-content-always-white",
-          variant === "warning" && "bg-warning-content text-content-always-black",
+          colors,
           className
         ),
         ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"alert\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-content-primary text-content-primary-inverted\",\n          variant === \"alert\" && \"bg-error-content text-content-always-white\",\n          variant === \"brand\" && \"bg-brand-primary-default text-content-always-black\",\n          variant === \"pink\" && \"bg-brand-secondary-default text-content-always-black\",\n          variant === \"info\" && \"bg-info-content text-content-always-white\",\n          variant === \"success\" && \"bg-success-content text-content-always-white\",\n          variant === \"warning\" && \"bg-warning-content text-content-always-black\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Colour variant for the count badge.\n *\n * V2 Notification Count (Fanvue Library) types: `default`, `brand`, `contrast`.\n * Remaining values are retained extensions for existing consumers.\n */\nexport type CountVariant =\n  | \"default\"\n  | \"contrast\"\n  | \"brand\"\n  | \"alert\"\n  | \"pink\"\n  | \"info\"\n  | \"success\"\n  | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nfunction variantClasses(variant: CountVariant): string {\n  switch (variant) {\n    case \"default\":\n      return \"bg-content-primary text-content-primary-inverted\";\n    case \"contrast\":\n      // V2: on dark or coloured hosts (filled buttons, images)\n      return \"bg-content-always-white text-content-always-black\";\n    case \"brand\":\n      return \"bg-brand-primary-default text-content-always-black\";\n    case \"alert\":\n      return \"bg-error-content text-content-always-white\";\n    case \"pink\":\n      return \"bg-brand-secondary-default text-content-always-black\";\n    case \"info\":\n      return \"bg-info-content text-content-always-white\";\n    case \"success\":\n      return \"bg-success-content text-content-always-white\";\n    case \"warning\":\n      return \"bg-warning-content text-content-always-black\";\n  }\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Colour variant of the count badge.\n   * Figma V2 types: `default` | `brand` | `contrast`. @default \"default\"\n   */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /**\n   * When `false`, renders an 8px unread dot instead of a numeric amount\n   * (Figma Show Amount=False). @default true\n   */\n  showAmount?: boolean;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * V2 Notification Count — a small badge for unread activity on nav items,\n * icons, buttons, or chips. Truncates values above `max` (e.g. `\"99+\"`).\n * Renders nothing when the value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * <Count value={1} variant=\"brand\" showAmount={false} />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      showAmount = true,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n    const colors = variantClasses(variant);\n\n    if (!showAmount) {\n      return (\n        <Comp\n          ref={ref}\n          data-testid=\"count\"\n          className={cn(\"inline-flex size-2 shrink-0 rounded-full\", colors, className)}\n          {...props}\n        />\n      );\n    }\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"count\"\n        className={cn(\n          \"typography-description-12px-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          // Kept at 16px so nav / IconButton badges don't grow; Chip nests this size.\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          colors,\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAuBA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAEA,SAAS,eAAe,SAA+B;AACrD,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAEH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EAAA;AAEb;AAkCO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,aAAa;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAC9B,UAAM,SAAS,eAAe,OAAO;AAErC,QAAI,CAAC,YAAY;AACf,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAY;AAAA,UACZ,WAAW,GAAG,4CAA4C,QAAQ,SAAS;AAAA,UAC1E,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA;AAAA,UAEjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/Icons/ReceiveMoneyIcon.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseIcon } from "./BaseIcon.mjs";
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M11.713 2.573a.504.504 0 0 1-.5-.5V1.34c0-.273.227-.5.5-.5s.5.227.5.5v.733c0 .274-.227.5-.5.5m0 5.127a.504.504 0 0 1-.5-.5v-.733c0-.274.227-.5.5-.5s.5.226.5.5V7.2c0 .273-.227.5-.5.5"
+      },
+      {
+        d: "M12.153 6.973h-.806c-.554 0-1.06-.3-1.34-.773a.501.501 0 1 1 .866-.507c.1.167.28.273.48.28h.8a.532.532 0 0 0 .134-1.047l-1.374-.346a1.535 1.535 0 0 1-1.146-1.674 1.526 1.526 0 0 1 1.513-1.34h.807c.553 0 1.06.3 1.333.774a.501.501 0 1 1-.867.506.56.56 0 0 0-.473-.273h-.8a.532.532 0 0 0-.133 1.047l1.373.346a1.526 1.526 0 0 1-.367 3.007m-8.48 8.187H2.227a1.22 1.22 0 0 1-1.22-1.22V9.613c0-.673.546-1.22 1.22-1.22h1.44c.673 0 1.22.547 1.22 1.22v4.327a1.22 1.22 0 0 1-1.22 1.22zM2.227 9.393c-.12 0-.22.1-.22.22v4.327c0 .12.1.22.22.22h1.44c.12 0 .22-.1.22-.22V9.613c0-.12-.1-.22-.22-.22z"
+      },
+      {
+        d: "M8.527 15.087a3.4 3.4 0 0 1-.82-.1l-1.914-.48a2.4 2.4 0 0 0-.58-.074h-.82a.504.504 0 0 1-.5-.5c0-.273.227-.5.5-.5h.82c.274 0 .554.034.82.1l1.914.48c.34.087.7.094 1.046.027l2.114-.42c.46-.093.886-.32 1.22-.653l1.493-1.494a.58.58 0 0 0 .173-.42.59.59 0 0 0-.947-.473l-1.74 1.307a1.93 1.93 0 0 1-1.166.386H8.727a.504.504 0 0 1-.5-.5c0-.273.226-.5.5-.5h1.413c.2 0 .4-.066.567-.186l1.74-1.307a1.6 1.6 0 0 1 2.08.147c.3.3.466.7.466 1.126a1.6 1.6 0 0 1-.466 1.127l-1.494 1.493a3.4 3.4 0 0 1-1.726.927l-2.114.42q-.33.069-.66.067z"
+      },
+      {
+        d: "M9.793 12.28H8.72a.504.504 0 0 1-.5-.5c0-.273.227-.5.5-.5h1.073c.16 0 .307-.06.42-.173a.6.6 0 0 0 .174-.42v-.22a.59.59 0 0 0-.447-.573L8.287 9.48a2.92 2.92 0 0 0-2.3.4l-1.314.874a.496.496 0 0 1-.693-.14.496.496 0 0 1 .14-.694l1.313-.873c.907-.6 2.047-.8 3.1-.54l1.654.413a1.59 1.59 0 0 1 1.206 1.547v.22c0 .427-.166.827-.466 1.127s-.7.466-1.127.466z"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M17.57 3.86c-.41 0-.75-.34-.75-.75v-1.1c0-.41.34-.75.75-.75s.75.34.75.75v1.1c0 .41-.34.75-.75.75m0 7.69c-.41 0-.75-.34-.75-.75V9.7c0-.41.34-.75.75-.75s.75.34.75.75v1.1c0 .41-.34.75-.75.75"
+      },
+      {
+        d: "M18.23 10.46h-1.21c-.83 0-1.59-.45-2.01-1.16a.752.752 0 1 1 1.3-.76c.15.25.42.41.72.42h1.2a.798.798 0 0 0 .2-1.57l-2.06-.52a2.3 2.3 0 0 1-1.72-2.51 2.29 2.29 0 0 1 2.27-2.01h1.21c.83 0 1.59.45 2 1.16a.752.752 0 1 1-1.3.76.84.84 0 0 0-.71-.41h-1.2a.798.798 0 0 0-.2 1.57l2.06.52c1.12.28 1.86 1.36 1.72 2.5a2.29 2.29 0 0 1-2.27 2.01M5.51 22.74H3.34a1.83 1.83 0 0 1-1.83-1.83v-6.49c0-1.01.82-1.83 1.83-1.83H5.5c1.01 0 1.83.82 1.83 1.83v6.49c0 1.01-.82 1.83-1.83 1.83zm-2.17-8.65c-.18 0-.33.15-.33.33v6.49c0 .18.15.33.33.33H5.5c.18 0 .33-.15.33-.33v-6.49c0-.18-.15-.33-.33-.33z"
+      },
+      {
+        d: "M12.79 22.63q-.63 0-1.23-.15l-2.87-.72c-.28-.07-.58-.11-.87-.11H6.59c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.23c.41 0 .83.05 1.23.15l2.87.72c.51.13 1.05.14 1.57.04l3.17-.63c.69-.14 1.33-.48 1.83-.98l2.24-2.24c.17-.17.26-.39.26-.63s-.09-.46-.26-.63a.884.884 0 0 0-1.16-.08l-2.61 1.96c-.5.38-1.12.58-1.75.58h-2.12c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h2.12c.3 0 .6-.1.85-.28l2.61-1.96c.94-.71 2.29-.61 3.12.22.45.45.7 1.05.7 1.69a2.4 2.4 0 0 1-.7 1.69l-2.24 2.24a5.1 5.1 0 0 1-2.59 1.39l-3.17.63c-.33.07-.66.1-.99.1z"
+      },
+      {
+        d: "M14.69 18.42h-1.61c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.61c.24 0 .46-.09.63-.26s.26-.39.26-.63v-.33c0-.41-.28-.76-.67-.86l-2.48-.62a4.38 4.38 0 0 0-3.45.6l-1.97 1.31c-.35.23-.81.14-1.04-.21a.745.745 0 0 1 .21-1.04l1.97-1.31a5.92 5.92 0 0 1 4.65-.81l2.48.62c1.07.27 1.81 1.22 1.81 2.32v.33c0 .64-.25 1.24-.7 1.69s-1.05.7-1.69.7z"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M23.426 5.146c-.547 0-1-.453-1-1V2.68c0-.547.453-1 1-1s1 .453 1 1v1.466c0 .547-.454 1-1 1m0 10.254c-.547 0-1-.453-1-1v-1.466c0-.547.453-1 1-1s1 .453 1 1V14.4c0 .547-.454 1-1 1"
+      },
+      {
+        d: "M24.307 13.946h-1.613c-1.107 0-2.12-.6-2.68-1.547-.28-.48-.12-1.093.36-1.373s1.093-.12 1.373.36c.2.333.56.547.96.56h1.6a1.064 1.064 0 0 0 .267-2.093l-2.747-.694a3.07 3.07 0 0 1-2.293-3.346 3.05 3.05 0 0 1 3.026-2.68h1.614c1.106 0 2.12.6 2.666 1.546a1.003 1.003 0 1 1-1.733 1.014c-.2-.334-.56-.547-.947-.547h-1.6a1.065 1.065 0 0 0-.266 2.093l2.746.694a3.064 3.064 0 0 1 2.294 3.333 3.05 3.05 0 0 1-3.027 2.68M7.347 30.32H4.453a2.44 2.44 0 0 1-2.44-2.44v-8.653a2.44 2.44 0 0 1 2.44-2.44h2.88a2.44 2.44 0 0 1 2.44 2.44v8.653a2.44 2.44 0 0 1-2.44 2.44zM4.453 18.787c-.24 0-.44.2-.44.44v8.653c0 .24.2.44.44.44h2.88c.24 0 .44-.2.44-.44v-8.653c0-.24-.2-.44-.44-.44z"
+      },
+      {
+        d: "M17.053 30.173q-.84 0-1.64-.2l-3.826-.96a5 5 0 0 0-1.16-.147h-1.64c-.547 0-1-.453-1-1s.453-1 1-1h1.64a6.8 6.8 0 0 1 1.64.2l3.826.96c.68.174 1.4.187 2.094.054l4.226-.84a4.8 4.8 0 0 0 2.44-1.307l2.987-2.987c.227-.226.347-.52.347-.84s-.12-.613-.347-.84a1.18 1.18 0 0 0-1.547-.106l-3.48 2.613a3.86 3.86 0 0 1-2.333.773h-2.827c-.546 0-1-.453-1-1s.454-1 1-1h2.827c.4 0 .8-.133 1.133-.373l3.48-2.613c1.254-.947 3.054-.814 4.16.293.6.6.934 1.4.934 2.253s-.347 1.667-.934 2.254l-2.986 2.986a6.8 6.8 0 0 1-3.454 1.854l-4.226.84c-.44.093-.88.133-1.32.133z"
+      },
+      {
+        d: "M19.587 24.56H17.44c-.547 0-1-.453-1-1s.453-1 1-1h2.147c.32 0 .613-.12.84-.346a1.17 1.17 0 0 0 .346-.84v-.44c0-.547-.373-1.014-.893-1.147l-3.307-.827a5.84 5.84 0 0 0-4.6.8l-2.626 1.747a.993.993 0 0 1-1.387-.28.993.993 0 0 1 .28-1.387l2.627-1.746a7.9 7.9 0 0 1 6.2-1.08l3.306.826a3.18 3.18 0 0 1 2.414 3.094v.44c0 .853-.334 1.653-.934 2.253s-1.4.933-2.253.933z"
+      }
+    ]
+  }
+};
+const ReceiveMoneyIcon = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(BaseIcon, { ref, variants: VARIANTS, ...props })
+);
+ReceiveMoneyIcon.displayName = "ReceiveMoneyIcon";
+export {
+  ReceiveMoneyIcon
+};
+//# sourceMappingURL=ReceiveMoneyIcon.mjs.map

package/dist/components/Icons/ReceiveMoneyIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiveMoneyIcon.mjs","sources":["../../../src/components/Icons/ReceiveMoneyIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M11.713 2.573a.504.504 0 0 1-.5-.5V1.34c0-.273.227-.5.5-.5s.5.227.5.5v.733c0 .274-.227.5-.5.5m0 5.127a.504.504 0 0 1-.5-.5v-.733c0-.274.227-.5.5-.5s.5.226.5.5V7.2c0 .273-.227.5-.5.5\",\n      },\n      {\n        d: \"M12.153 6.973h-.806c-.554 0-1.06-.3-1.34-.773a.501.501 0 1 1 .866-.507c.1.167.28.273.48.28h.8a.532.532 0 0 0 .134-1.047l-1.374-.346a1.535 1.535 0 0 1-1.146-1.674 1.526 1.526 0 0 1 1.513-1.34h.807c.553 0 1.06.3 1.333.774a.501.501 0 1 1-.867.506.56.56 0 0 0-.473-.273h-.8a.532.532 0 0 0-.133 1.047l1.373.346a1.526 1.526 0 0 1-.367 3.007m-8.48 8.187H2.227a1.22 1.22 0 0 1-1.22-1.22V9.613c0-.673.546-1.22 1.22-1.22h1.44c.673 0 1.22.547 1.22 1.22v4.327a1.22 1.22 0 0 1-1.22 1.22zM2.227 9.393c-.12 0-.22.1-.22.22v4.327c0 .12.1.22.22.22h1.44c.12 0 .22-.1.22-.22V9.613c0-.12-.1-.22-.22-.22z\",\n      },\n      {\n        d: \"M8.527 15.087a3.4 3.4 0 0 1-.82-.1l-1.914-.48a2.4 2.4 0 0 0-.58-.074h-.82a.504.504 0 0 1-.5-.5c0-.273.227-.5.5-.5h.82c.274 0 .554.034.82.1l1.914.48c.34.087.7.094 1.046.027l2.114-.42c.46-.093.886-.32 1.22-.653l1.493-1.494a.58.58 0 0 0 .173-.42.59.59 0 0 0-.947-.473l-1.74 1.307a1.93 1.93 0 0 1-1.166.386H8.727a.504.504 0 0 1-.5-.5c0-.273.226-.5.5-.5h1.413c.2 0 .4-.066.567-.186l1.74-1.307a1.6 1.6 0 0 1 2.08.147c.3.3.466.7.466 1.126a1.6 1.6 0 0 1-.466 1.127l-1.494 1.493a3.4 3.4 0 0 1-1.726.927l-2.114.42q-.33.069-.66.067z\",\n      },\n      {\n        d: \"M9.793 12.28H8.72a.504.504 0 0 1-.5-.5c0-.273.227-.5.5-.5h1.073c.16 0 .307-.06.42-.173a.6.6 0 0 0 .174-.42v-.22a.59.59 0 0 0-.447-.573L8.287 9.48a2.92 2.92 0 0 0-2.3.4l-1.314.874a.496.496 0 0 1-.693-.14.496.496 0 0 1 .14-.694l1.313-.873c.907-.6 2.047-.8 3.1-.54l1.654.413a1.59 1.59 0 0 1 1.206 1.547v.22c0 .427-.166.827-.466 1.127s-.7.466-1.127.466z\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M17.57 3.86c-.41 0-.75-.34-.75-.75v-1.1c0-.41.34-.75.75-.75s.75.34.75.75v1.1c0 .41-.34.75-.75.75m0 7.69c-.41 0-.75-.34-.75-.75V9.7c0-.41.34-.75.75-.75s.75.34.75.75v1.1c0 .41-.34.75-.75.75\",\n      },\n      {\n        d: \"M18.23 10.46h-1.21c-.83 0-1.59-.45-2.01-1.16a.752.752 0 1 1 1.3-.76c.15.25.42.41.72.42h1.2a.798.798 0 0 0 .2-1.57l-2.06-.52a2.3 2.3 0 0 1-1.72-2.51 2.29 2.29 0 0 1 2.27-2.01h1.21c.83 0 1.59.45 2 1.16a.752.752 0 1 1-1.3.76.84.84 0 0 0-.71-.41h-1.2a.798.798 0 0 0-.2 1.57l2.06.52c1.12.28 1.86 1.36 1.72 2.5a2.29 2.29 0 0 1-2.27 2.01M5.51 22.74H3.34a1.83 1.83 0 0 1-1.83-1.83v-6.49c0-1.01.82-1.83 1.83-1.83H5.5c1.01 0 1.83.82 1.83 1.83v6.49c0 1.01-.82 1.83-1.83 1.83zm-2.17-8.65c-.18 0-.33.15-.33.33v6.49c0 .18.15.33.33.33H5.5c.18 0 .33-.15.33-.33v-6.49c0-.18-.15-.33-.33-.33z\",\n      },\n      {\n        d: \"M12.79 22.63q-.63 0-1.23-.15l-2.87-.72c-.28-.07-.58-.11-.87-.11H6.59c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.23c.41 0 .83.05 1.23.15l2.87.72c.51.13 1.05.14 1.57.04l3.17-.63c.69-.14 1.33-.48 1.83-.98l2.24-2.24c.17-.17.26-.39.26-.63s-.09-.46-.26-.63a.884.884 0 0 0-1.16-.08l-2.61 1.96c-.5.38-1.12.58-1.75.58h-2.12c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h2.12c.3 0 .6-.1.85-.28l2.61-1.96c.94-.71 2.29-.61 3.12.22.45.45.7 1.05.7 1.69a2.4 2.4 0 0 1-.7 1.69l-2.24 2.24a5.1 5.1 0 0 1-2.59 1.39l-3.17.63c-.33.07-.66.1-.99.1z\",\n      },\n      {\n        d: \"M14.69 18.42h-1.61c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.61c.24 0 .46-.09.63-.26s.26-.39.26-.63v-.33c0-.41-.28-.76-.67-.86l-2.48-.62a4.38 4.38 0 0 0-3.45.6l-1.97 1.31c-.35.23-.81.14-1.04-.21a.745.745 0 0 1 .21-1.04l1.97-1.31a5.92 5.92 0 0 1 4.65-.81l2.48.62c1.07.27 1.81 1.22 1.81 2.32v.33c0 .64-.25 1.24-.7 1.69s-1.05.7-1.69.7z\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M23.426 5.146c-.547 0-1-.453-1-1V2.68c0-.547.453-1 1-1s1 .453 1 1v1.466c0 .547-.454 1-1 1m0 10.254c-.547 0-1-.453-1-1v-1.466c0-.547.453-1 1-1s1 .453 1 1V14.4c0 .547-.454 1-1 1\",\n      },\n      {\n        d: \"M24.307 13.946h-1.613c-1.107 0-2.12-.6-2.68-1.547-.28-.48-.12-1.093.36-1.373s1.093-.12 1.373.36c.2.333.56.547.96.56h1.6a1.064 1.064 0 0 0 .267-2.093l-2.747-.694a3.07 3.07 0 0 1-2.293-3.346 3.05 3.05 0 0 1 3.026-2.68h1.614c1.106 0 2.12.6 2.666 1.546a1.003 1.003 0 1 1-1.733 1.014c-.2-.334-.56-.547-.947-.547h-1.6a1.065 1.065 0 0 0-.266 2.093l2.746.694a3.064 3.064 0 0 1 2.294 3.333 3.05 3.05 0 0 1-3.027 2.68M7.347 30.32H4.453a2.44 2.44 0 0 1-2.44-2.44v-8.653a2.44 2.44 0 0 1 2.44-2.44h2.88a2.44 2.44 0 0 1 2.44 2.44v8.653a2.44 2.44 0 0 1-2.44 2.44zM4.453 18.787c-.24 0-.44.2-.44.44v8.653c0 .24.2.44.44.44h2.88c.24 0 .44-.2.44-.44v-8.653c0-.24-.2-.44-.44-.44z\",\n      },\n      {\n        d: \"M17.053 30.173q-.84 0-1.64-.2l-3.826-.96a5 5 0 0 0-1.16-.147h-1.64c-.547 0-1-.453-1-1s.453-1 1-1h1.64a6.8 6.8 0 0 1 1.64.2l3.826.96c.68.174 1.4.187 2.094.054l4.226-.84a4.8 4.8 0 0 0 2.44-1.307l2.987-2.987c.227-.226.347-.52.347-.84s-.12-.613-.347-.84a1.18 1.18 0 0 0-1.547-.106l-3.48 2.613a3.86 3.86 0 0 1-2.333.773h-2.827c-.546 0-1-.453-1-1s.454-1 1-1h2.827c.4 0 .8-.133 1.133-.373l3.48-2.613c1.254-.947 3.054-.814 4.16.293.6.6.934 1.4.934 2.253s-.347 1.667-.934 2.254l-2.986 2.986a6.8 6.8 0 0 1-3.454 1.854l-4.226.84c-.44.093-.88.133-1.32.133z\",\n      },\n      {\n        d: \"M19.587 24.56H17.44c-.547 0-1-.453-1-1s.453-1 1-1h2.147c.32 0 .613-.12.84-.346a1.17 1.17 0 0 0 .346-.84v-.44c0-.547-.373-1.014-.893-1.147l-3.307-.827a5.84 5.84 0 0 0-4.6.8l-2.626 1.747a.993.993 0 0 1-1.387-.28.993.993 0 0 1 .28-1.387l2.627-1.746a7.9 7.9 0 0 1 6.2-1.08l3.306.826a3.18 3.18 0 0 1 2.414 3.094v.44c0 .853-.334 1.653-.934 2.253s-1.4.933-2.253.933z\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link ReceiveMoneyIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type ReceiveMoneyIconProps = BaseIconProps;\n\n/**\n * Receive Money icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <ReceiveMoneyIcon size={24} />\n * ```\n */\nexport const ReceiveMoneyIcon = React.forwardRef<SVGSVGElement, ReceiveMoneyIconProps>(\n  (props, ref) => <BaseIcon ref={ref} variants={VARIANTS} {...props} />,\n);\n\nReceiveMoneyIcon.displayName = \"ReceiveMoneyIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CAAC,OAAO,QAAQ,oBAAC,YAAS,KAAU,UAAU,UAAW,GAAG,MAAA,CAAO;AACrE;AAEA,iBAAiB,cAAc;"}