@fanvue/ui 1.21.0 → 2.0.0

package/dist/cjs/components/Chip/Chip.cjs

@@ -49,22 +49,22 @@ const Chip = React__namespace.forwardRef(
         className: cn.cn(
           "typography-semibold-body-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150",
           // Shape
-          variant === "square" ? "rounded-lg" : "rounded-full",
+          variant === "square" ? "rounded-xs" : "rounded-full",
           // Size
           size === "32" && "h-8 py-1",
           size === "40" && "h-10 py-2.5",
           // Variant colors
-          isDark && "bg-neutral-50 text-foreground-onaccentinverse",
-          !isDark && selected && "bg-brand-accent-muted text-neutral-400",
-          !isDark && !selected && "bg-neutral-100 text-neutral-400",
+          isDark && "bg-neutral-alphas-150 text-content-on-brand-inverted",
+          !isDark && selected && "bg-brand-primary-muted text-neutral-alphas-900",
+          !isDark && !selected && "bg-neutral-alphas-50 text-neutral-alphas-900",
           // Interactive
           isInteractive && !disabled && "cursor-pointer",
-          isInteractive && !disabled && !isDark && !selected && "hover:bg-brand-accent-muted active:bg-brand-accent-muted",
+          isInteractive && !disabled && !isDark && !selected && "hover:bg-brand-primary-muted active:bg-brand-primary-muted",
           // Focus
           "focus-visible:shadow-focus-ring focus-visible:outline-none",
           // Disabled
           disabled && isDark && "pointer-events-none opacity-50",
-          disabled && !isDark && "pointer-events-none text-neutral-300",
+          disabled && !isDark && "pointer-events-none text-neutral-alphas-400",
           className
         ),
         ...isInteractive && {
@@ -90,7 +90,7 @@ const Chip = React__namespace.forwardRef(
               }
             )
           ] }),
-          notificationLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground-default px-1 text-foreground-inverse", children: notificationLabel })
+          notificationLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted", children: notificationLabel })
         ] })
       }
     );

package/dist/cjs/components/Chip/Chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","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  /** 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      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"typography-semibold-body-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n          // Shape\n          variant === \"square\" ? \"rounded-lg\" : \"rounded-full\",\n          // Size\n          size === \"32\" && \"h-8 py-1\",\n          size === \"40\" && \"h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-neutral-50 text-foreground-onaccentinverse\",\n          !isDark && selected && \"bg-brand-accent-muted text-neutral-400\",\n          !isDark && !selected && \"bg-neutral-100 text-neutral-400\",\n          // Interactive\n          isInteractive && !disabled && \"cursor-pointer\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            \"hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-neutral-300\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <>\n            <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n              {leftDot && (\n                <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n              )}\n              {leftIcon && (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              <span className=\"min-w-0 truncate\">{children}</span>\n              {rightIcon && (\n                <span\n                  className=\"flex size-5 shrink-0 items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  {rightIcon}\n                </span>\n              )}\n            </span>\n            {notificationLabel && (\n              <span className=\"typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground-default px-1 text-foreground-inverse\">\n                {notificationLabel}\n              </span>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":["React","Slot","jsx","cn","Slottable","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAUC,UAAAA,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY;AAAA;AAAA,UAExB,iBAAiB,CAAC,YAAY;AAAA,UAC9B,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD;AAAA;AAAA,UAEF;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA,UACCD,2BAAAA,IAACE,qBAAA,EAAW,SAAA,CAAS,IAErBC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,0DACb,UAAA;AAAA,YAAA,WACCH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,YAE9E,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA4C,eAAY,QACrE,UAAA,UACH;AAAA,YAEFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,YAC5C,aACCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,qBACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qKACb,UAAA,kBAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}
+{"version":3,"file":"Chip.cjs","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  /** 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      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"typography-semibold-body-sm relative inline-flex min-w-0 items-center justify-center whitespace-nowrap motion-safe:transition-colors motion-safe:duration-150\",\n          // Shape\n          variant === \"square\" ? \"rounded-xs\" : \"rounded-full\",\n          // Size\n          size === \"32\" && \"h-8 py-1\",\n          size === \"40\" && \"h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-neutral-alphas-150 text-content-on-brand-inverted\",\n          !isDark && selected && \"bg-brand-primary-muted text-neutral-alphas-900\",\n          !isDark && !selected && \"bg-neutral-alphas-50 text-neutral-alphas-900\",\n          // Interactive\n          isInteractive && !disabled && \"cursor-pointer\",\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            !selected &&\n            \"hover:bg-brand-primary-muted active:bg-brand-primary-muted\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-neutral-alphas-400\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <>\n            <span className=\"flex min-w-0 items-center gap-0.5 overflow-hidden px-3\">\n              {leftDot && (\n                <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />\n              )}\n              {leftIcon && (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              <span className=\"min-w-0 truncate\">{children}</span>\n              {rightIcon && (\n                <span\n                  className=\"flex size-5 shrink-0 items-center justify-center\"\n                  aria-hidden=\"true\"\n                >\n                  {rightIcon}\n                </span>\n              )}\n            </span>\n            {notificationLabel && (\n              <span className=\"typography-semibold-body-sm absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-content-primary px-1 text-content-primary-inverted\">\n                {notificationLabel}\n              </span>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":["React","Slot","jsx","cn","Slottable","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAUC,UAAAA,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY;AAAA;AAAA,UAExB,iBAAiB,CAAC,YAAY;AAAA,UAC9B,iBACE,CAAC,YACD,CAAC,UACD,CAAC,YACD;AAAA;AAAA,UAEF;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA,UACCD,2BAAAA,IAACE,qBAAA,EAAW,SAAA,CAAS,IAErBC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,0DACb,UAAA;AAAA,YAAA,WACCH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,YAE9E,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA4C,eAAY,QACrE,UAAA,UACH;AAAA,YAEFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,YAC5C,aACCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,qBACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,wKACb,UAAA,kBAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}

package/dist/cjs/components/Count/Count.cjs

@@ -49,13 +49,13 @@ const Count = React__namespace.forwardRef(
           size === "16" && "h-3 min-w-3 px-0.5 text-[8px]",
           size === "24" && "h-4 min-w-4 px-1 text-[10px]",
           size === "32" && "h-5 min-w-5 px-1.5 text-[12px]",
-          variant === "default" && "bg-foreground-default text-foreground-inverse",
-          variant === "alert" && "bg-error-default text-foreground-onaccentinverse",
-          variant === "brand" && "bg-brand-accent-default text-foreground-onaccent",
-          variant === "pink" && "bg-brand-secondary-default text-foreground-onaccent",
-          variant === "info" && "bg-info-default text-foreground-onaccentinverse",
-          variant === "success" && "bg-success-default text-foreground-onaccentinverse",
-          variant === "warning" && "bg-warning-default text-foreground-onaccent",
+          variant === "default" && "bg-content-primary text-content-primary-inverted",
+          variant === "alert" && "bg-error-content text-content-on-brand-inverted",
+          variant === "brand" && "bg-brand-primary-default text-content-on-brand",
+          variant === "pink" && "bg-brand-secondary-default text-content-on-brand",
+          variant === "info" && "bg-info-content text-content-on-brand-inverted",
+          variant === "success" && "bg-success-content text-content-on-brand-inverted",
+          variant === "warning" && "bg-warning-content text-content-on-brand",
           className
         ),
         ...props,

package/dist/cjs/components/Count/Count.cjs.map

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

package/dist/cjs/components/DatePicker/DatePicker.cjs

@@ -17,8 +17,8 @@ function Day({ day, modifiers, className, ...divProps }) {
       className: cn.cn(
         className,
         (range_start || range_end) && !isSingleDayRange && "from-50% from-transparent to-50%",
-        range_start && !isSingleDayRange && "bg-linear-to-r to-brand-accent-muted",
-        range_end && !isSingleDayRange && "bg-linear-to-l to-brand-accent-muted"
+        range_start && !isSingleDayRange && "bg-linear-to-r to-brand-primary-muted",
+        range_end && !isSingleDayRange && "bg-linear-to-l to-brand-primary-muted"
       ),
       ...divProps
     }
@@ -35,13 +35,13 @@ function DayButton({ day, modifiers, className, ...buttonProps }) {
       ref,
       type: "button",
       className: cn.cn(
-        "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-lg",
+        "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-xs",
         "typography-regular-body-md",
-        "transition-colors hover:bg-brand-accent-muted not-disabled:active:bg-brand-accent-muted",
-        "focus-visible:outline-2 focus-visible:outline-brand-tertiary-default focus-visible:outline-offset-[-2px]",
+        "transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted",
+        "focus-visible:outline-2 focus-visible:outline-brand-secondary-default focus-visible:outline-offset-[-2px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        modifiers.today && !modifiers.selected && "border border-brand-accent-default",
-        modifiers.selected && !modifiers.range_middle ? "bg-brand-accent-default text-foreground-onaccent hover:bg-brand-accent-default" : "text-foreground-default",
+        modifiers.today && !modifiers.selected && "border border-brand-primary-default",
+        modifiers.selected && !modifiers.range_middle ? "bg-brand-primary-default text-content-on-brand hover:bg-brand-primary-default" : "text-content-primary",
         modifiers.range_middle && "rounded-none bg-transparent",
         modifiers.outside && "pointer-events-none opacity-50"
       ),
@@ -91,7 +91,7 @@ const DatePicker = React.forwardRef(
       {
         ref,
         className: cn.cn(
-          "inline-flex flex-col rounded-2xl border border-neutral-200 bg-surface-page shadow-[0px_6px_12px_0px_rgba(0,0,0,0.1)] backdrop-blur-sm",
+          "inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-bg-primary shadow-blur-menu backdrop-blur-sm",
           className
         ),
         children: [
@@ -109,21 +109,21 @@ const DatePicker = React.forwardRef(
                 months: "relative flex",
                 month: "flex flex-1 flex-col",
                 month_caption: cn.cn("flex items-center py-4", isMulti ? "justify-center px-2" : "px-5"),
-                caption_label: "typography-semibold-body-lg text-foreground-default",
+                caption_label: "typography-semibold-body-lg text-content-primary",
                 nav: cn.cn(
                   "absolute top-4 z-20 flex",
                   isMulti ? "pointer-events-none inset-x-3 justify-between" : "right-3 gap-1"
                 ),
-                button_previous: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-foreground-default transition-colors hover:bg-brand-accent-muted not-disabled:active:bg-brand-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-tertiary-default disabled:cursor-not-allowed disabled:opacity-50",
+                button_previous: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50",
                 // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
-                button_next: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-foreground-default transition-colors hover:bg-brand-accent-muted not-disabled:active:bg-brand-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-tertiary-default disabled:cursor-not-allowed disabled:opacity-50",
+                button_next: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50",
                 // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
                 month_grid: cn.cn("mb-4", isMulti ? "mx-2" : "mx-4"),
                 weekdays: "flex",
-                weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-regular-body-md text-foreground-secondary",
-                week: "flex overflow-hidden rounded-lg",
+                weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-regular-body-md text-content-secondary",
+                week: "flex overflow-hidden rounded-xs",
                 day: "relative flex w-10 flex-1 items-center justify-center",
-                range_middle: "bg-brand-accent-muted",
+                range_middle: "bg-brand-primary-muted",
                 hidden: "hidden"
               },
               components: {

package/dist/cjs/components/DatePicker/DatePicker.cjs.map

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

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -34,7 +34,7 @@ const DialogOverlay = React__namespace.forwardRef(({ className, style, ...props
   {
     ref,
     className: cn.cn(
-      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-surface-backdrop data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-bg-overlay data-[state=closed]:animate-out data-[state=open]:animate-in",
       className
     ),
     style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
@@ -56,9 +56,9 @@ const DialogContent = React__namespace.forwardRef(({ className, children, size =
       style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
       className: cn.cn(
         // Base
-        "fixed flex flex-col overflow-hidden bg-surface-modal shadow-lifted focus:outline-none",
+        "fixed flex flex-col overflow-hidden bg-bg-primary shadow-lg focus:outline-none",
         // Mobile: bottom sheet
-        "inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-3xl",
+        "inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-lg",
         // Animation (shared)
         "data-[state=open]:fade-in-0 data-[state=open]:animate-in",
         "data-[state=closed]:fade-out-0 data-[state=closed]:animate-out",
@@ -66,7 +66,7 @@ const DialogContent = React__namespace.forwardRef(({ className, children, size =
         "data-[state=open]:slide-in-from-bottom-full",
         "data-[state=closed]:slide-out-to-bottom-full",
         // Desktop: centered dialog
-        "sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-3xl",
+        "sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg",
         // Desktop: scale in/out (cancel mobile slide)
         "sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95",
         "sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95",
@@ -124,7 +124,7 @@ const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) =
   DialogPrimitive__namespace.Title,
   {
     ref,
-    className: cn.cn("typography-bold-heading-xs truncate text-foreground-default", className),
+    className: cn.cn("typography-bold-heading-xs truncate text-content-primary", className),
     ...props
   }
 ));
@@ -133,7 +133,7 @@ const DialogDescription = React__namespace.forwardRef(({ className, ...props },
   DialogPrimitive__namespace.Description,
   {
     ref,
-    className: cn.cn("typography-regular-body-lg text-foreground-secondary", className),
+    className: cn.cn("typography-regular-body-lg text-content-secondary", className),
     ...props
   }
 ));

package/dist/cjs/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/** The element that opens the dialog when clicked. */\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered inside a portal automatically by {@link DialogContent}.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-surface-backdrop data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel rendered inside a portal. Includes the overlay by default.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius. On larger viewports it renders centered with\n * full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, size = \"md\", overlay = true, style, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    {overlay && <DialogOverlay />}\n    <DialogPrimitive.Content\n      ref={ref}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        // Base\n        \"fixed flex flex-col overflow-hidden bg-surface-modal shadow-lifted focus:outline-none\",\n        // Mobile: bottom sheet\n        \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-3xl\",\n        // Animation (shared)\n        \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n        // Mobile: slide up from bottom\n        \"data-[state=open]:slide-in-from-bottom-full\",\n        \"data-[state=closed]:slide-out-to-bottom-full\",\n        // Desktop: centered dialog\n        \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-3xl\",\n        // Desktop: scale in/out (cancel mobile slide)\n        \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n        \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n        // Duration\n        \"duration-200\",\n        // Size\n        SIZE_CLASSES[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex h-16 shrink-0 items-center gap-2 px-6 py-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"tertiary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton variant=\"tertiary\" size=\"32\" icon={<CloseIcon />} aria-label={closeLabel} />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-bold-heading-xs truncate text-foreground-default\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-lg text-foreground-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto px-6 py-4\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex shrink-0 items-center gap-3 px-6 pt-3 pb-6\",\n        \"[&>*]:min-w-0 [&>*]:flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":["DialogPrimitive","React","jsx","cn","jsxs","IconButton","ArrowLeftIcon","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/** The element that opens the dialog when clicked. */\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered inside a portal automatically by {@link DialogContent}.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-bg-overlay data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel rendered inside a portal. Includes the overlay by default.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius. On larger viewports it renders centered with\n * full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, size = \"md\", overlay = true, style, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    {overlay && <DialogOverlay />}\n    <DialogPrimitive.Content\n      ref={ref}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        // Base\n        \"fixed flex flex-col overflow-hidden bg-bg-primary shadow-lg focus:outline-none\",\n        // Mobile: bottom sheet\n        \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-lg\",\n        // Animation (shared)\n        \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n        // Mobile: slide up from bottom\n        \"data-[state=open]:slide-in-from-bottom-full\",\n        \"data-[state=closed]:slide-out-to-bottom-full\",\n        // Desktop: centered dialog\n        \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg\",\n        // Desktop: scale in/out (cancel mobile slide)\n        \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n        \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n        // Duration\n        \"duration-200\",\n        // Size\n        SIZE_CLASSES[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex h-16 shrink-0 items-center gap-2 px-6 py-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"tertiary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton variant=\"tertiary\" size=\"32\" icon={<CloseIcon />} aria-label={closeLabel} />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-bold-heading-xs truncate text-content-primary\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-lg text-content-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto px-6 py-4\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex shrink-0 items-center gap-3 px-6 pt-3 pb-6\",\n        \"[&>*]:min-w-0 [&>*]:flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":["DialogPrimitive","React","jsx","cn","jsxs","IconButton","ArrowLeftIcon","CloseIcon"],"mappings":"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"}

package/dist/cjs/components/Divider/Divider.cjs

@@ -36,17 +36,17 @@ const Divider = React__namespace.forwardRef(({ label, className, ...props }, ref
             {
               decorative: true,
               orientation: "horizontal",
-              className: "h-px flex-1 bg-neutral-200",
+              className: "h-px flex-1 bg-neutral-alphas-200",
               ...props
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-default", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-primary", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             SeparatorPrimitive__namespace.Root,
             {
               decorative: true,
               orientation: "horizontal",
-              className: "h-px flex-1 bg-neutral-200"
+              className: "h-px flex-1 bg-neutral-alphas-200"
             }
           )
         ]
@@ -59,7 +59,7 @@ const Divider = React__namespace.forwardRef(({ label, className, ...props }, ref
       ref,
       decorative: true,
       orientation: "horizontal",
-      className: cn.cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className),
+      className: cn.cn(`mx-auto my-2 h-px w-full bg-neutral-alphas-200`, className),
       ...props
     }
   );

package/dist/cjs/components/Divider/Divider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.cjs","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Orientation of the divider line. */\nexport type DividerOrientation = \"horizontal\" | \"vertical\";\n\nexport interface DividerProps\n  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n  /** Optional centred label text. When provided, the divider renders as two lines with the label between them. */\n  label?: string;\n}\n\n/**\n * A horizontal separator used to divide content sections. Optionally displays a\n * centred text label between two lines.\n *\n * @example\n * ```tsx\n * <Divider />\n * <Divider label=\"or\" />\n * ```\n */\nexport const Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({ label, className, ...props }, ref) => {\n  if (label !== undefined) {\n    return (\n      <div\n        ref={ref}\n        className={cn(`my-2 flex w-full items-center justify-center gap-2`, className)}\n      >\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-200\"\n          {...props}\n        />\n        <span className=\"typography-regular-body-md shrink-0 text-foreground-default\">{label}</span>\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-200\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative\n      orientation=\"horizontal\"\n      className={cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className)}\n      {...props}\n    />\n  );\n});\n\nDivider.displayName = \"Divider\";\n"],"names":["React","jsxs","cn","jsx","SeparatorPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,UAAUA,iBAAM,WAG3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzC,MAAI,UAAU,QAAW;AACvB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,sDAAsD,SAAS;AAAA,QAE7E,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAACC,8BAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,cACT,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEND,2BAAAA,IAAC,QAAA,EAAK,WAAU,+DAA+D,UAAA,OAAM;AAAA,UACrFA,2BAAAA;AAAAA,YAACC,8BAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACED,2BAAAA;AAAAA,IAACC,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,YAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAWF,GAAAA,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,QAAQ,cAAc;;"}
+{"version":3,"file":"Divider.cjs","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Orientation of the divider line. */\nexport type DividerOrientation = \"horizontal\" | \"vertical\";\n\nexport interface DividerProps\n  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n  /** Optional centred label text. When provided, the divider renders as two lines with the label between them. */\n  label?: string;\n}\n\n/**\n * A horizontal separator used to divide content sections. Optionally displays a\n * centred text label between two lines.\n *\n * @example\n * ```tsx\n * <Divider />\n * <Divider label=\"or\" />\n * ```\n */\nexport const Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({ label, className, ...props }, ref) => {\n  if (label !== undefined) {\n    return (\n      <div\n        ref={ref}\n        className={cn(`my-2 flex w-full items-center justify-center gap-2`, className)}\n      >\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-alphas-200\"\n          {...props}\n        />\n        <span className=\"typography-regular-body-md shrink-0 text-content-primary\">{label}</span>\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-alphas-200\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative\n      orientation=\"horizontal\"\n      className={cn(`mx-auto my-2 h-px w-full bg-neutral-alphas-200`, className)}\n      {...props}\n    />\n  );\n});\n\nDivider.displayName = \"Divider\";\n"],"names":["React","jsxs","cn","jsx","SeparatorPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,UAAUA,iBAAM,WAG3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzC,MAAI,UAAU,QAAW;AACvB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,sDAAsD,SAAS;AAAA,QAE7E,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAACC,8BAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,cACT,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEND,2BAAAA,IAAC,QAAA,EAAK,WAAU,4DAA4D,UAAA,OAAM;AAAA,UAClFA,2BAAAA;AAAAA,YAACC,8BAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACED,2BAAAA;AAAAA,IAACC,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,YAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAWF,GAAAA,GAAG,kDAAkD,SAAS;AAAA,MACxE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,QAAQ,cAAc;;"}

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -41,7 +41,7 @@ const DrawerOverlay = React__namespace.forwardRef(({ className, style, ...props
     ref,
     style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
     className: cn.cn(
-      "fixed inset-0 bg-surface-backdrop",
+      "fixed inset-0 bg-bg-overlay",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in",
       "data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out",
@@ -55,7 +55,7 @@ const SLIDE_CLASSES = {
   right: "inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
   left: "inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
   top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-  bottom: "inset-x-0 bottom-0 w-full rounded-t-lg data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+  bottom: "inset-x-0 bottom-0 w-full rounded-t-xs data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
 };
 const DrawerContent = React__namespace.forwardRef(
   ({
@@ -85,7 +85,7 @@ const DrawerContent = React__namespace.forwardRef(
           ref,
           style: { zIndex: "calc(var(--fanvue-ui-portal-z-index, 50) + 1)", ...style },
           className: cn.cn(
-            "fixed flex flex-col bg-surface-modal shadow-lifted outline-none backdrop-blur-lg",
+            "fixed flex flex-col bg-surface-secondary shadow-lg outline-none backdrop-blur-lg",
             "data-[state=closed]:animate-out data-[state=open]:animate-in",
             "data-[state=closed]:duration-150 data-[state=closed]:ease-in",
             "data-[state=open]:duration-200 data-[state=open]:ease-out",
@@ -125,7 +125,7 @@ const DrawerTitle = React__namespace.forwardRef(({ className, ...props }, ref) =
   DialogPrimitive__namespace.Title,
   {
     ref,
-    className: cn.cn("typography-semibold-body-lg truncate text-foreground-default", className),
+    className: cn.cn("typography-semibold-body-lg truncate text-content-primary", className),
     ...props
   }
 ));
@@ -134,7 +134,7 @@ const DrawerDescription = React__namespace.forwardRef(({ className, ...props },
   DialogPrimitive__namespace.Description,
   {
     ref,
-    className: cn.cn("typography-regular-body-md text-foreground-secondary", className),
+    className: cn.cn("typography-regular-body-md text-content-secondary", className),
     ...props
   }
 ));

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** The side from which the drawer slides in. */\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/** Size presets for the drawer panel. Maps to max-width (left/right) or max-height (top/bottom). */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"full\";\n\n/**\n * Props for the {@link Drawer} root component.\n *\n * Inherits `open`, `onOpenChange`, and `defaultOpen` from Radix Dialog.Root.\n *\n * The Radix `modal` prop (default `true`) can also be passed to create a\n * non-modal drawer — useful for persistent side navigation that does not\n * block interaction with the rest of the page.\n *\n * **`overlay` behaviour:** When `overlay` is `false`, the component\n * automatically sets `modal={false}` on the underlying Radix Dialog.Root.\n * A modal dialog without a visible overlay is confusing because focus is\n * still trapped and scroll is blocked even though the page appears\n * interactive. Passing `modal={true}` explicitly will override this.\n */\nexport interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Whether the default {@link DrawerOverlay} is rendered.\n   * When `false`, `modal` is automatically set to `false` as well\n   * (unless explicitly overridden) so focus-trap and scroll-lock are disabled.\n   * @default true\n   */\n  overlay?: boolean;\n}\n\nconst DrawerContext = React.createContext<{ overlay: boolean }>({ overlay: true });\n\n/**\n * Root component that manages open/close state for a drawer.\n * Wraps Radix Dialog.Root.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerTrigger>Open</DrawerTrigger>\n *   <DrawerContent position=\"right\">\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences.</DrawerDescription>\n *     </DrawerHeader>\n *     <p>Content goes here.</p>\n *     <DrawerFooter>\n *       <DrawerClose>Done</DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport function Drawer({ overlay = true, modal, children, ...props }: DrawerProps) {\n  const resolvedModal = modal ?? (overlay ? undefined : false);\n  return (\n    <DrawerContext.Provider value={{ overlay }}>\n      <DialogPrimitive.Root modal={resolvedModal} {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </DrawerContext.Provider>\n  );\n}\nDrawer.displayName = \"Drawer\";\n\n/** Props for the {@link DrawerTrigger} component. */\nexport type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/** The element that opens the drawer when clicked. */\nexport const DrawerTrigger = DialogPrimitive.Trigger;\nDrawerTrigger.displayName = \"DrawerTrigger\";\n\n/** Props for the {@link DrawerClose} component. */\nexport type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\n/** Closes the drawer when clicked. Can be placed anywhere inside the drawer. */\nexport const DrawerClose = DialogPrimitive.Close;\nDrawerClose.displayName = \"DrawerClose\";\n\n/** Props for the {@link DrawerOverlay} component. */\nexport interface DrawerOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * A translucent backdrop rendered behind the drawer content.\n * Clicking the overlay closes the drawer by default.\n */\nexport const DrawerOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DrawerOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    className={cn(\n      \"fixed inset-0 bg-surface-backdrop\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\n/**\n * Slide-in animation classes keyed by position.\n * Uses Tailwind animate utilities (animate-in / animate-out).\n */\nconst SLIDE_CLASSES: Record<DrawerPosition, string> = {\n  right:\n    \"inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n  left: \"inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n  top: \"inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n  bottom:\n    \"inset-x-0 bottom-0 w-full rounded-t-lg data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n};\n\n/** Props for the {@link DrawerContent} component. */\nexport interface DrawerContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * The edge from which the drawer slides in.\n   *\n   * Named `position` (rather than `side`) to avoid confusion with the CSS\n   * `side` concept used by Radix Popover/Tooltip and to better convey the\n   * spatial relationship of the drawer to the viewport.\n   *\n   * @default \"right\"\n   */\n  position?: DrawerPosition;\n  /**\n   * Controls the maximum extent of the drawer panel.\n   * For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.\n   * @default \"sm\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether to render the default {@link DrawerOverlay} behind the content.\n   * Set to `false` to provide your own overlay or omit it entirely.\n   *\n   * Prefer setting `overlay` on the {@link Drawer} root instead so that\n   * `modal` is also adjusted automatically.\n   *\n   * @default true\n   */\n  overlay?: boolean;\n  /** Props forwarded to the default {@link DrawerOverlay} when `overlay` is `true`. */\n  overlayProps?: DrawerOverlayProps;\n}\n\n/**\n * The panel that slides in from the chosen edge. Renders inside a portal with\n * an overlay backdrop by default.\n *\n * Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.\n */\nexport const DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      position = \"right\",\n      size = \"sm\",\n      overlay: overlayProp,\n      overlayProps,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useContext(DrawerContext);\n    const overlay = overlayProp ?? ctx.overlay;\n    const isHorizontal = position === \"left\" || position === \"right\";\n    const sizeClass = isHorizontal\n      ? ({ sm: \"max-w-sm\", md: \"max-w-md\", lg: \"max-w-lg\", full: \"max-w-full\" } as const)[size]\n      : (\n          {\n            sm: \"max-h-[24rem]\",\n            md: \"max-h-[28rem]\",\n            lg: \"max-h-[32rem]\",\n            full: \"max-h-full\",\n          } as const\n        )[size];\n\n    return (\n      <DialogPrimitive.Portal>\n        {overlay && <DrawerOverlay {...overlayProps} />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{ zIndex: \"calc(var(--fanvue-ui-portal-z-index, 50) + 1)\", ...style }}\n          className={cn(\n            \"fixed flex flex-col bg-surface-modal shadow-lifted outline-none backdrop-blur-lg\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n            \"data-[state=open]:duration-200 data-[state=open]:ease-out\",\n            SLIDE_CLASSES[position],\n            sizeClass,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\nDrawerContent.displayName = \"DrawerContent\";\n\n/** Props for the {@link DrawerHeader} component. */\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a built-in close (X) button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close drawer\" */\n  closeLabel?: string;\n}\n\n/**\n * A semantic header area for the drawer, typically containing a title and description.\n * Renders a built-in close button by default.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, showClose = true, closeLabel = \"Close drawer\", children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-start gap-2 p-4\", className)} {...props}>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">{children}</div>\n      {showClose && (\n        <DialogPrimitive.Close asChild>\n          <IconButton\n            icon={<CloseIcon />}\n            aria-label={closeLabel}\n            variant=\"tertiary\"\n            size=\"24\"\n            className=\"shrink-0\"\n          />\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  ),\n);\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Props for the {@link DrawerFooter} component. */\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** A semantic footer area for the drawer, typically containing action buttons. */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-2 p-4\", className)} {...props} />\n  ),\n);\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Props for the {@link DrawerTitle} component. */\nexport interface DrawerTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/** An accessible title for the drawer. Required for screen readers. */\nexport const DrawerTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DrawerTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-semibold-body-lg truncate text-foreground-default\", className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\n/** Props for the {@link DrawerDescription} component. */\nexport interface DrawerDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n\n/** An accessible description for the drawer, providing supplementary context. */\nexport const DrawerDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DrawerDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-md text-foreground-secondary\", className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n"],"names":["React","jsx","DialogPrimitive","cn","jsxs","IconButton","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** The side from which the drawer slides in. */\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/** Size presets for the drawer panel. Maps to max-width (left/right) or max-height (top/bottom). */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"full\";\n\n/**\n * Props for the {@link Drawer} root component.\n *\n * Inherits `open`, `onOpenChange`, and `defaultOpen` from Radix Dialog.Root.\n *\n * The Radix `modal` prop (default `true`) can also be passed to create a\n * non-modal drawer — useful for persistent side navigation that does not\n * block interaction with the rest of the page.\n *\n * **`overlay` behaviour:** When `overlay` is `false`, the component\n * automatically sets `modal={false}` on the underlying Radix Dialog.Root.\n * A modal dialog without a visible overlay is confusing because focus is\n * still trapped and scroll is blocked even though the page appears\n * interactive. Passing `modal={true}` explicitly will override this.\n */\nexport interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Whether the default {@link DrawerOverlay} is rendered.\n   * When `false`, `modal` is automatically set to `false` as well\n   * (unless explicitly overridden) so focus-trap and scroll-lock are disabled.\n   * @default true\n   */\n  overlay?: boolean;\n}\n\nconst DrawerContext = React.createContext<{ overlay: boolean }>({ overlay: true });\n\n/**\n * Root component that manages open/close state for a drawer.\n * Wraps Radix Dialog.Root.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerTrigger>Open</DrawerTrigger>\n *   <DrawerContent position=\"right\">\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences.</DrawerDescription>\n *     </DrawerHeader>\n *     <p>Content goes here.</p>\n *     <DrawerFooter>\n *       <DrawerClose>Done</DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport function Drawer({ overlay = true, modal, children, ...props }: DrawerProps) {\n  const resolvedModal = modal ?? (overlay ? undefined : false);\n  return (\n    <DrawerContext.Provider value={{ overlay }}>\n      <DialogPrimitive.Root modal={resolvedModal} {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </DrawerContext.Provider>\n  );\n}\nDrawer.displayName = \"Drawer\";\n\n/** Props for the {@link DrawerTrigger} component. */\nexport type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/** The element that opens the drawer when clicked. */\nexport const DrawerTrigger = DialogPrimitive.Trigger;\nDrawerTrigger.displayName = \"DrawerTrigger\";\n\n/** Props for the {@link DrawerClose} component. */\nexport type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\n/** Closes the drawer when clicked. Can be placed anywhere inside the drawer. */\nexport const DrawerClose = DialogPrimitive.Close;\nDrawerClose.displayName = \"DrawerClose\";\n\n/** Props for the {@link DrawerOverlay} component. */\nexport interface DrawerOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * A translucent backdrop rendered behind the drawer content.\n * Clicking the overlay closes the drawer by default.\n */\nexport const DrawerOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DrawerOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    className={cn(\n      \"fixed inset-0 bg-bg-overlay\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\n/**\n * Slide-in animation classes keyed by position.\n * Uses Tailwind animate utilities (animate-in / animate-out).\n */\nconst SLIDE_CLASSES: Record<DrawerPosition, string> = {\n  right:\n    \"inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n  left: \"inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n  top: \"inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n  bottom:\n    \"inset-x-0 bottom-0 w-full rounded-t-xs data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n};\n\n/** Props for the {@link DrawerContent} component. */\nexport interface DrawerContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * The edge from which the drawer slides in.\n   *\n   * Named `position` (rather than `side`) to avoid confusion with the CSS\n   * `side` concept used by Radix Popover/Tooltip and to better convey the\n   * spatial relationship of the drawer to the viewport.\n   *\n   * @default \"right\"\n   */\n  position?: DrawerPosition;\n  /**\n   * Controls the maximum extent of the drawer panel.\n   * For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.\n   * @default \"sm\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether to render the default {@link DrawerOverlay} behind the content.\n   * Set to `false` to provide your own overlay or omit it entirely.\n   *\n   * Prefer setting `overlay` on the {@link Drawer} root instead so that\n   * `modal` is also adjusted automatically.\n   *\n   * @default true\n   */\n  overlay?: boolean;\n  /** Props forwarded to the default {@link DrawerOverlay} when `overlay` is `true`. */\n  overlayProps?: DrawerOverlayProps;\n}\n\n/**\n * The panel that slides in from the chosen edge. Renders inside a portal with\n * an overlay backdrop by default.\n *\n * Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.\n */\nexport const DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      position = \"right\",\n      size = \"sm\",\n      overlay: overlayProp,\n      overlayProps,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useContext(DrawerContext);\n    const overlay = overlayProp ?? ctx.overlay;\n    const isHorizontal = position === \"left\" || position === \"right\";\n    const sizeClass = isHorizontal\n      ? ({ sm: \"max-w-sm\", md: \"max-w-md\", lg: \"max-w-lg\", full: \"max-w-full\" } as const)[size]\n      : (\n          {\n            sm: \"max-h-[24rem]\",\n            md: \"max-h-[28rem]\",\n            lg: \"max-h-[32rem]\",\n            full: \"max-h-full\",\n          } as const\n        )[size];\n\n    return (\n      <DialogPrimitive.Portal>\n        {overlay && <DrawerOverlay {...overlayProps} />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{ zIndex: \"calc(var(--fanvue-ui-portal-z-index, 50) + 1)\", ...style }}\n          className={cn(\n            \"fixed flex flex-col bg-surface-secondary shadow-lg outline-none backdrop-blur-lg\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n            \"data-[state=open]:duration-200 data-[state=open]:ease-out\",\n            SLIDE_CLASSES[position],\n            sizeClass,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\nDrawerContent.displayName = \"DrawerContent\";\n\n/** Props for the {@link DrawerHeader} component. */\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a built-in close (X) button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close drawer\" */\n  closeLabel?: string;\n}\n\n/**\n * A semantic header area for the drawer, typically containing a title and description.\n * Renders a built-in close button by default.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, showClose = true, closeLabel = \"Close drawer\", children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-start gap-2 p-4\", className)} {...props}>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">{children}</div>\n      {showClose && (\n        <DialogPrimitive.Close asChild>\n          <IconButton\n            icon={<CloseIcon />}\n            aria-label={closeLabel}\n            variant=\"tertiary\"\n            size=\"24\"\n            className=\"shrink-0\"\n          />\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  ),\n);\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Props for the {@link DrawerFooter} component. */\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** A semantic footer area for the drawer, typically containing action buttons. */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-2 p-4\", className)} {...props} />\n  ),\n);\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Props for the {@link DrawerTitle} component. */\nexport interface DrawerTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/** An accessible title for the drawer. Required for screen readers. */\nexport const DrawerTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DrawerTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-semibold-body-lg truncate text-content-primary\", className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\n/** Props for the {@link DrawerDescription} component. */\nexport interface DrawerDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n\n/** An accessible description for the drawer, providing supplementary context. */\nexport const DrawerDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DrawerDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-md text-content-secondary\", className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n"],"names":["React","jsx","DialogPrimitive","cn","jsxs","IconButton","CloseIcon"],"mappings":"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"}

package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs

@@ -32,7 +32,7 @@ const DropdownMenuContent = React__namespace.forwardRef(({ className, style, sid
     ref,
     sideOffset,
     className: cn.cn(
-      "min-w-[180px] overflow-y-auto rounded-lg border border-neutral-200 bg-surface-page p-1 shadow-lg",
+      "min-w-[180px] overflow-y-auto rounded-lg border border-neutral-alphas-200 bg-bg-primary p-1 shadow-lg",
       "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2",
@@ -54,7 +54,7 @@ const DropdownMenuLabel = React__namespace.forwardRef(({ className, ...props },
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
-    className: cn.cn("typography-medium-body-xs px-2 py-1.5 text-foreground-secondary", className),
+    className: cn.cn("typography-medium-body-xs px-2 py-1.5 text-content-secondary", className),
     ...props
   }
 ));
@@ -74,11 +74,11 @@ const DropdownMenuItem = React__namespace.forwardRef(
     const itemClassName = cn.cn(
       "flex w-full cursor-pointer items-center gap-1 rounded px-2 outline-none",
       "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-neutral-100",
+      "data-[highlighted]:bg-neutral-alphas-100",
       size === "sm" ? "min-h-[34px] py-1" : "min-h-[40px] py-1.5",
       size === "sm" ? "typography-medium-body-sm" : "typography-medium-body-md",
-      destructive && "text-error-default",
-      selected && "bg-success-background",
+      destructive && "text-error-content",
+      selected && "bg-success-surface",
       className
     );
     if (asChild) {
@@ -96,7 +96,7 @@ const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
-    className: cn.cn("my-1 h-px bg-neutral-200", className),
+    className: cn.cn("my-1 h-px bg-neutral-alphas-200", className),
     ...props
   }
 ));