@fanvue/ui 1.20.1 → 2.0.0

package/dist/components/InfoBox/InfoBox.mjs

@@ -7,8 +7,8 @@ import { Button } from "../Button/Button.mjs";
 const InfoBox = PopoverPrimitive.Root;
 const InfoBoxTrigger = PopoverPrimitive.Trigger;
 const ACTION_CLASSES = {
-  brand: "hover:bg-brand-accent-default/80 hover:text-foreground-onaccent",
-  tertiary: "text-foreground-inverse hover:text-foreground-inverse hover:bg-foreground-inverse/10"
+  brand: "hover:bg-brand-primary-default/80 hover:text-content-on-brand",
+  tertiary: "text-content-primary-inverted hover:text-content-primary-inverted hover:bg-content-primary-inverted/10"
 };
 const ActionButton = ({
   action,
@@ -40,7 +40,7 @@ const InfoBoxContent = React.forwardRef(
         collisionPadding: 8,
         style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
         className: cn(
-          "typography-regular-body-md max-w-[280px] overflow-hidden rounded-2xl border border-neutral-200 bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
+          "typography-regular-body-md max-w-[280px] overflow-hidden rounded-md border border-white/20 bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
           className
         ),
         align: "center",
@@ -59,13 +59,13 @@ const InfoBoxContent = React.forwardRef(
                 "p",
                 {
                   id: headingId,
-                  className: "typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse",
+                  className: "typography-semibold-body-lg min-w-0 flex-1 text-content-primary-inverted",
                   children: heading
                 }
               ),
               pill && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: pill })
             ] }),
-            children && /* @__PURE__ */ jsx("div", { className: "typography-regular-body-md text-foreground-inverse", children }),
+            children && /* @__PURE__ */ jsx("div", { className: "typography-regular-body-md text-content-primary-inverted", children }),
             hasActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
               primaryAction && /* @__PURE__ */ jsx(ActionButton, { action: primaryAction, variant: "brand" }),
               secondaryAction && /* @__PURE__ */ jsx(ActionButton, { action: secondaryAction, variant: "tertiary" })
@@ -74,7 +74,7 @@ const InfoBoxContent = React.forwardRef(
           showArrow && /* @__PURE__ */ jsx(
             PopoverPrimitive.Arrow,
             {
-              className: "-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse",
+              className: "-translate-y-px! fill-surface-primary-inverted stroke-2 stroke-surface-primary-inverted",
               width: 12,
               height: 6
             }

package/dist/components/InfoBox/InfoBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoBox.mjs","sources":["../../../src/components/InfoBox/InfoBox.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link InfoBox} root component. */\nexport interface InfoBoxProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for an info box. */\nexport const InfoBox = PopoverPrimitive.Root;\n\n/** Props for the {@link InfoBoxTrigger} component. */\nexport type InfoBoxTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;\n\n/** The element that triggers the info box on click. */\nexport const InfoBoxTrigger = PopoverPrimitive.Trigger;\n\n/** Action button with a label and click handler. */\ninterface InfoBoxButtonAction {\n  label: string;\n  onClick?: () => void;\n}\n\n/** Custom element rendered in place of the default action button. */\ninterface InfoBoxElementAction {\n  element: React.ReactNode;\n}\n\n/** Action configuration for {@link InfoBoxContent}. */\nexport type InfoBoxAction = InfoBoxButtonAction | InfoBoxElementAction;\n\nexport interface InfoBoxContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /** Heading text rendered at the top of the info box. */\n  heading?: React.ReactNode;\n  /** Icon element displayed to the left of the heading. */\n  icon?: React.ReactNode;\n  /** Pill or badge element displayed to the right of the heading. */\n  pill?: React.ReactNode;\n  /** Primary action button (brand green). */\n  primaryAction?: InfoBoxAction;\n  /** Secondary action button (ghost). */\n  secondaryAction?: InfoBoxAction;\n}\n\nconst ACTION_CLASSES: Record<\"brand\" | \"tertiary\", string> = {\n  brand: \"hover:bg-brand-accent-default/80 hover:text-foreground-onaccent\",\n  tertiary: \"text-foreground-inverse hover:text-foreground-inverse hover:bg-foreground-inverse/10\",\n};\n\nconst ActionButton = ({\n  action,\n  variant,\n}: {\n  action: InfoBoxAction;\n  variant: \"brand\" | \"tertiary\";\n}) =>\n  \"element\" in action ? (\n    action.element\n  ) : (\n    <Button variant={variant} onClick={action.onClick} className={ACTION_CLASSES[variant]}>\n      {action.label}\n    </Button>\n  );\n\nexport const InfoBoxContent = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Content>,\n  InfoBoxContentProps\n>(\n  (\n    {\n      className,\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      style,\n      onOpenAutoFocus,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = icon !== undefined || heading !== undefined || pill !== undefined;\n    const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n    const headingId = React.useId();\n\n    return (\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          collisionPadding={8}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-regular-body-md max-w-[280px] overflow-hidden rounded-2xl border border-neutral-200 bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            className,\n          )}\n          align=\"center\"\n          aria-labelledby={heading ? headingId : undefined}\n          arrowPadding={12}\n          onOpenAutoFocus={(e) => {\n            // Prevent auto-focus stealing when opening — content is supplementary, not a dialog.\n            e.preventDefault();\n            onOpenAutoFocus?.(e);\n          }}\n          {...props}\n        >\n          <div className=\"flex flex-col gap-3\">\n            {hasHeader && (\n              <div className=\"flex items-center gap-3\">\n                {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n                {heading && (\n                  <p\n                    id={headingId}\n                    className=\"typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse\"\n                  >\n                    {heading}\n                  </p>\n                )}\n                {pill && <div className=\"shrink-0\">{pill}</div>}\n              </div>\n            )}\n            {children && (\n              <div className=\"typography-regular-body-md text-foreground-inverse\">{children}</div>\n            )}\n            {hasActions && (\n              <div className=\"flex items-center gap-1\">\n                {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n                {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n              </div>\n            )}\n          </div>\n          {showArrow && (\n            <PopoverPrimitive.Arrow\n              className={\n                \"-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse\"\n              }\n              width={12}\n              height={6}\n            />\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nInfoBoxContent.displayName = \"InfoBoxContent\";\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AAgC/C,MAAM,iBAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,aAAa,SACX,OAAO,8BAEN,QAAA,EAAO,SAAkB,SAAS,OAAO,SAAS,WAAW,eAAe,OAAO,GACjF,iBAAO,OACV;AAGG,MAAM,iBAAiB,MAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,SAAS,UAAa,YAAY,UAAa,SAAS;AAC1E,UAAM,aAAa,kBAAkB,UAAa,oBAAoB;AACtE,UAAM,YAAY,MAAM,MAAA;AAExB,WACE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,mBAAiB,UAAU,YAAY;AAAA,QACvC,cAAc;AAAA,QACd,iBAAiB,CAAC,MAAM;AAEtB,YAAE,eAAA;AACF,4BAAkB,CAAC;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,WAAU;AAAA,kBAET,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACC,oBAAC,OAAA,EAAI,WAAU,sDAAsD,UAAS;AAAA,YAE/E,cACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,iBAAiB,oBAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,cACtE,mBAAmB,oBAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,YAAA,EAAA,CAChF;AAAA,UAAA,GAEJ;AAAA,UACC,aACC;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;"}
+{"version":3,"file":"InfoBox.mjs","sources":["../../../src/components/InfoBox/InfoBox.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link InfoBox} root component. */\nexport interface InfoBoxProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for an info box. */\nexport const InfoBox = PopoverPrimitive.Root;\n\n/** Props for the {@link InfoBoxTrigger} component. */\nexport type InfoBoxTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;\n\n/** The element that triggers the info box on click. */\nexport const InfoBoxTrigger = PopoverPrimitive.Trigger;\n\n/** Action button with a label and click handler. */\ninterface InfoBoxButtonAction {\n  label: string;\n  onClick?: () => void;\n}\n\n/** Custom element rendered in place of the default action button. */\ninterface InfoBoxElementAction {\n  element: React.ReactNode;\n}\n\n/** Action configuration for {@link InfoBoxContent}. */\nexport type InfoBoxAction = InfoBoxButtonAction | InfoBoxElementAction;\n\nexport interface InfoBoxContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /** Heading text rendered at the top of the info box. */\n  heading?: React.ReactNode;\n  /** Icon element displayed to the left of the heading. */\n  icon?: React.ReactNode;\n  /** Pill or badge element displayed to the right of the heading. */\n  pill?: React.ReactNode;\n  /** Primary action button (brand green). */\n  primaryAction?: InfoBoxAction;\n  /** Secondary action button (ghost). */\n  secondaryAction?: InfoBoxAction;\n}\n\nconst ACTION_CLASSES: Record<\"brand\" | \"tertiary\", string> = {\n  brand: \"hover:bg-brand-primary-default/80 hover:text-content-on-brand\",\n  tertiary:\n    \"text-content-primary-inverted hover:text-content-primary-inverted hover:bg-content-primary-inverted/10\",\n};\n\nconst ActionButton = ({\n  action,\n  variant,\n}: {\n  action: InfoBoxAction;\n  variant: \"brand\" | \"tertiary\";\n}) =>\n  \"element\" in action ? (\n    action.element\n  ) : (\n    <Button variant={variant} onClick={action.onClick} className={ACTION_CLASSES[variant]}>\n      {action.label}\n    </Button>\n  );\n\nexport const InfoBoxContent = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Content>,\n  InfoBoxContentProps\n>(\n  (\n    {\n      className,\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      style,\n      onOpenAutoFocus,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = icon !== undefined || heading !== undefined || pill !== undefined;\n    const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n    const headingId = React.useId();\n\n    return (\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          collisionPadding={8}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-regular-body-md max-w-[280px] overflow-hidden rounded-md border border-white/20 bg-surface-primary-inverted p-4 text-content-primary-inverted shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            className,\n          )}\n          align=\"center\"\n          aria-labelledby={heading ? headingId : undefined}\n          arrowPadding={12}\n          onOpenAutoFocus={(e) => {\n            // Prevent auto-focus stealing when opening — content is supplementary, not a dialog.\n            e.preventDefault();\n            onOpenAutoFocus?.(e);\n          }}\n          {...props}\n        >\n          <div className=\"flex flex-col gap-3\">\n            {hasHeader && (\n              <div className=\"flex items-center gap-3\">\n                {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n                {heading && (\n                  <p\n                    id={headingId}\n                    className=\"typography-semibold-body-lg min-w-0 flex-1 text-content-primary-inverted\"\n                  >\n                    {heading}\n                  </p>\n                )}\n                {pill && <div className=\"shrink-0\">{pill}</div>}\n              </div>\n            )}\n            {children && (\n              <div className=\"typography-regular-body-md text-content-primary-inverted\">\n                {children}\n              </div>\n            )}\n            {hasActions && (\n              <div className=\"flex items-center gap-1\">\n                {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n                {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n              </div>\n            )}\n          </div>\n          {showArrow && (\n            <PopoverPrimitive.Arrow\n              className={\n                \"-translate-y-px! fill-surface-primary-inverted stroke-2 stroke-surface-primary-inverted\"\n              }\n              width={12}\n              height={6}\n            />\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nInfoBoxContent.displayName = \"InfoBoxContent\";\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AAgC/C,MAAM,iBAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,UACE;AACJ;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,aAAa,SACX,OAAO,8BAEN,QAAA,EAAO,SAAkB,SAAS,OAAO,SAAS,WAAW,eAAe,OAAO,GACjF,iBAAO,OACV;AAGG,MAAM,iBAAiB,MAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,SAAS,UAAa,YAAY,UAAa,SAAS;AAC1E,UAAM,aAAa,kBAAkB,UAAa,oBAAoB;AACtE,UAAM,YAAY,MAAM,MAAA;AAExB,WACE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,mBAAiB,UAAU,YAAY;AAAA,QACvC,cAAc;AAAA,QACd,iBAAiB,CAAC,MAAM;AAEtB,YAAE,eAAA;AACF,4BAAkB,CAAC;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,WAAU;AAAA,kBAET,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACC,oBAAC,OAAA,EAAI,WAAU,4DACZ,UACH;AAAA,YAED,cACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,iBAAiB,oBAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,cACtE,mBAAmB,oBAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,YAAA,EAAA,CAChF;AAAA,UAAA,GAEJ;AAAA,UACC,aACC;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;"}

package/dist/components/Loader/Loader.mjs

@@ -28,7 +28,7 @@ const Loader = React.forwardRef(
               shouldCenterY && "top-1/2 -translate-y-1/2"
             ),
             "aria-label": ariaLabel ?? "loading",
-            children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "size-9 animate-spin text-foreground-secondary" })
+            children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "size-9 animate-spin text-content-secondary" })
           }
         )
       }

package/dist/components/Loader/Loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.mjs","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\nexport interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the loader is visible. When `false`, renders nothing. @default true */\n  show?: boolean;\n  /** Accessible label for the loading indicator. @default \"loading\" */\n  ariaLabel?: string;\n  /** Minimum height of the container. Numbers are treated as pixels. @default \"100%\" */\n  minHeight?: number | string;\n  /** Center the spinner horizontally. @default false */\n  center?: boolean;\n  /** Center the spinner horizontally. @default false */\n  centerX?: boolean;\n  /** Center the spinner vertically. @default false */\n  centerY?: boolean;\n}\n\n/**\n * A layout-aware loading indicator that renders a centered `SpinnerIcon` inside\n * a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.\n *\n * @example\n * ```tsx\n * <Loader show center />\n * <Loader show centerX minHeight={200} />\n * ```\n */\nexport const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(\n  (\n    { show = true, ariaLabel, minHeight = \"100%\", center, centerX, centerY, className, ...props },\n    ref,\n  ) => {\n    if (!show) {\n      return null;\n    }\n\n    const shouldCenterX = center || centerX;\n    const shouldCenterY = center || centerY;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative\", className)}\n        style={{\n          minHeight: typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n        }}\n        {...props}\n      >\n        <output\n          className={cn(\n            \"absolute flex size-[60px] items-center justify-center\",\n            shouldCenterX && \"left-1/2 -translate-x-1/2\",\n            shouldCenterY && \"top-1/2 -translate-y-1/2\",\n          )}\n          aria-label={ariaLabel ?? \"loading\"}\n        >\n          <SpinnerIcon className=\"size-9 animate-spin text-foreground-secondary\" />\n        </output>\n      </div>\n    );\n  },\n);\n\nLoader.displayName = \"Loader\";\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,SAAS,MAAM;AAAA,EAC1B,CACE,EAAE,OAAO,MAAM,WAAW,YAAY,QAAQ,QAAQ,SAAS,SAAS,WAAW,GAAG,MAAA,GACtF,QACG;AACH,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,UAAU;AAChC,UAAM,gBAAgB,UAAU;AAEhC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,OAAO;AAAA,UACL,WAAW,OAAO,cAAc,WAAW,GAAG,SAAS,OAAO;AAAA,QAAA;AAAA,QAE/D,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB,iBAAiB;AAAA,YAAA;AAAA,YAEnB,cAAY,aAAa;AAAA,YAEzB,UAAA,oBAAC,aAAA,EAAY,WAAU,gDAAA,CAAgD;AAAA,UAAA;AAAA,QAAA;AAAA,MACzE;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,OAAO,cAAc;"}
+{"version":3,"file":"Loader.mjs","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\nexport interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the loader is visible. When `false`, renders nothing. @default true */\n  show?: boolean;\n  /** Accessible label for the loading indicator. @default \"loading\" */\n  ariaLabel?: string;\n  /** Minimum height of the container. Numbers are treated as pixels. @default \"100%\" */\n  minHeight?: number | string;\n  /** Center the spinner horizontally. @default false */\n  center?: boolean;\n  /** Center the spinner horizontally. @default false */\n  centerX?: boolean;\n  /** Center the spinner vertically. @default false */\n  centerY?: boolean;\n}\n\n/**\n * A layout-aware loading indicator that renders a centered `SpinnerIcon` inside\n * a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.\n *\n * @example\n * ```tsx\n * <Loader show center />\n * <Loader show centerX minHeight={200} />\n * ```\n */\nexport const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(\n  (\n    { show = true, ariaLabel, minHeight = \"100%\", center, centerX, centerY, className, ...props },\n    ref,\n  ) => {\n    if (!show) {\n      return null;\n    }\n\n    const shouldCenterX = center || centerX;\n    const shouldCenterY = center || centerY;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative\", className)}\n        style={{\n          minHeight: typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n        }}\n        {...props}\n      >\n        <output\n          className={cn(\n            \"absolute flex size-[60px] items-center justify-center\",\n            shouldCenterX && \"left-1/2 -translate-x-1/2\",\n            shouldCenterY && \"top-1/2 -translate-y-1/2\",\n          )}\n          aria-label={ariaLabel ?? \"loading\"}\n        >\n          <SpinnerIcon className=\"size-9 animate-spin text-content-secondary\" />\n        </output>\n      </div>\n    );\n  },\n);\n\nLoader.displayName = \"Loader\";\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,SAAS,MAAM;AAAA,EAC1B,CACE,EAAE,OAAO,MAAM,WAAW,YAAY,QAAQ,QAAQ,SAAS,SAAS,WAAW,GAAG,MAAA,GACtF,QACG;AACH,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,UAAU;AAChC,UAAM,gBAAgB,UAAU;AAEhC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,OAAO;AAAA,UACL,WAAW,OAAO,cAAc,WAAW,GAAG,SAAS,OAAO;AAAA,QAAA;AAAA,QAE/D,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB,iBAAiB;AAAA,YAAA;AAAA,YAEnB,cAAY,aAAa;AAAA,YAEzB,UAAA,oBAAC,aAAA,EAAY,WAAU,6CAAA,CAA6C;AAAA,UAAA;AAAA,QAAA;AAAA,MACtE;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,OAAO,cAAc;"}

package/dist/components/Logo/Logo.mjs

@@ -5,10 +5,10 @@ import { cn } from "../../utils/cn.mjs";
 const getLogoColors = (color, variant) => {
   if (color === "fullColour") {
     return {
-      icon: "var(--color-brand-accent-default)",
-      iconInner: "var(--color-foreground-onaccent)",
+      icon: "var(--color-brand-primary-default)",
+      iconInner: "var(--primitives-color-gray-black)",
       textClass: ""
-      // Uses parent's text-foreground-default
+      // Uses parent's text-content-primary
     };
   }
   if (color === "decolour") {
@@ -16,26 +16,26 @@ const getLogoColors = (color, variant) => {
       iconClass: "fill-[#151515] dark:fill-[#ffffff]",
       iconInnerClass: "fill-[#ffffff] dark:fill-[#151515]",
       textClass: ""
-      // Uses parent's text-foreground-default
+      // Uses parent's text-content-primary
     };
   }
   if (color === "whiteAlways") {
     return {
-      icon: variant === "icon" ? "var(--color-foreground-onaccentinverse)" : "var(--color-brand-accent-default)",
-      iconInner: "var(--color-foreground-onaccent)",
-      textClass: "text-foreground-onaccentinverse"
+      icon: variant === "icon" ? "var(--primitives-color-gray-white)" : "var(--color-brand-primary-default)",
+      iconInner: "var(--primitives-color-gray-black)",
+      textClass: "text-content-on-brand-inverted"
     };
   }
   if (color === "blackAlways") {
     return {
-      icon: variant === "icon" ? "var(--color-foreground-onaccent)" : "var(--color-brand-accent-default)",
-      iconInner: variant === "icon" ? "var(--color-foreground-onaccentinverse)" : "var(--color-foreground-onaccent)",
-      textClass: "text-foreground-onaccent"
+      icon: variant === "icon" ? "var(--primitives-color-gray-black)" : "var(--color-brand-primary-default)",
+      iconInner: variant === "icon" ? "var(--primitives-color-gray-white)" : "var(--primitives-color-gray-black)",
+      textClass: "text-content-on-brand"
     };
   }
   return {
-    icon: "var(--color-brand-accent-default)",
-    iconInner: "var(--color-foreground-onaccent)",
+    icon: "var(--color-brand-primary-default)",
+    iconInner: "var(--primitives-color-gray-black)",
     textClass: ""
     // Default to adaptive color
   };
@@ -115,7 +115,7 @@ const Logo = React.forwardRef(
         ref,
         "data-testid": "logo",
         className: cn(
-          "inline-flex items-center text-foreground-default",
+          "inline-flex items-center text-content-primary",
           variant === "portrait" ? "flex-col" : "flex-row",
           variant === "full" && "gap-2",
           className

package/dist/components/Logo/Logo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.mjs","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, variant: LogoVariant) => {\n  if (color === \"fullColour\") {\n    return {\n      icon: \"var(--color-brand-accent-default)\",\n      iconInner: \"var(--color-foreground-onaccent)\",\n      textClass: \"\", // Uses parent's text-foreground-default\n    };\n  }\n\n  if (color === \"decolour\") {\n    return {\n      iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n      iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n      textClass: \"\", // Uses parent's text-foreground-default\n    };\n  }\n\n  if (color === \"whiteAlways\") {\n    return {\n      icon:\n        variant === \"icon\"\n          ? \"var(--color-foreground-onaccentinverse)\"\n          : \"var(--color-brand-accent-default)\",\n      iconInner: \"var(--color-foreground-onaccent)\",\n      textClass: \"text-foreground-onaccentinverse\",\n    };\n  }\n\n  if (color === \"blackAlways\") {\n    return {\n      icon:\n        variant === \"icon\"\n          ? \"var(--color-foreground-onaccent)\"\n          : \"var(--color-brand-accent-default)\",\n      iconInner:\n        variant === \"icon\"\n          ? \"var(--color-foreground-onaccentinverse)\"\n          : \"var(--color-foreground-onaccent)\",\n      textClass: \"text-foreground-onaccent\",\n    };\n  }\n\n  return {\n    icon: \"var(--color-brand-accent-default)\",\n    iconInner: \"var(--color-foreground-onaccent)\",\n    textClass: \"\", // Default to adaptive color\n  };\n};\n\n/** Layout variant of the logo. */\nexport type LogoVariant = \"full\" | \"icon\" | \"wordmark\" | \"portrait\";\n/** Colour scheme of the logo. */\nexport type LogoColor = \"fullColour\" | \"decolour\" | \"whiteAlways\" | \"blackAlways\";\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout variant of the logo. @default \"full\" */\n  variant?: LogoVariant;\n  /** Colour scheme of the logo. @default \"fullColour\" */\n  color?: LogoColor;\n  /**\n   * Accessible label for the logo. Required when `type` is `\"icon\"` and\n   * the logo is used inside interactive contexts (links, buttons).\n   *\n   * @example \"Fanvue home\"\n   */\n  \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      width=\"128\"\n      height=\"30\"\n      viewBox=\"0 0 128 30\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={className}\n      data-testid=\"logo-wordmark\"\n    >\n      <path\n        d=\"M4.29144 15.2807V29.5588H10.4278V15.2807H16.0428V10.0668H10.4278V8.18181C10.4278 7.35294 10.6684 6.69786 11.1497 6.21658C11.631 5.73529 12.2861 5.49465 13.115 5.49465C13.5695 5.49465 13.9572 5.57486 14.2781 5.73529C14.6257 5.86898 14.9331 6.06951 15.2005 6.33689L19.0508 2.48663C18.3021 1.71123 17.4198 1.10963 16.4037 0.681819C15.4144 0.227273 14.2513 0 12.9144 0C11.1497 0 9.62566 0.374331 8.34224 1.12299C7.05882 1.84492 6.05615 2.84759 5.33422 4.13102C4.63903 5.3877 4.29144 6.80481 4.29144 8.38235V10.0668H0V15.2807H4.29144Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M112.349 28.7166C114.006 29.5722 115.891 30 118.004 30C119.635 30 121.132 29.7193 122.496 29.1578C123.859 28.5963 125.022 27.754 125.985 26.631L122.616 23.262C122.028 23.9305 121.346 24.4385 120.571 24.7861C119.795 25.107 118.926 25.2674 117.964 25.2674C116.921 25.2674 116.012 25.0535 115.236 24.6257C114.488 24.1711 113.899 23.5428 113.472 22.7406C113.337 22.4624 113.225 22.166 113.135 21.8515L127.108 21.8182C127.215 21.3102 127.282 20.869 127.308 20.4947C127.362 20.0936 127.389 19.7193 127.389 19.3717C127.389 17.4733 126.961 15.7888 126.105 14.3182C125.276 12.8476 124.127 11.6979 122.656 10.869C121.185 10.0401 119.488 9.62568 117.562 9.62568C115.584 9.62568 113.806 10.0669 112.228 10.9492C110.651 11.8316 109.394 13.0481 108.458 14.5989C107.549 16.123 107.095 17.861 107.095 19.8128C107.095 21.7647 107.562 23.516 108.498 25.0668C109.434 26.6176 110.718 27.8342 112.349 28.7166ZM113.138 17.6391C113.218 17.3577 113.316 17.093 113.431 16.8449C113.833 16.0428 114.381 15.4278 115.076 15C115.798 14.5455 116.64 14.3182 117.603 14.3182C118.512 14.3182 119.274 14.5187 119.889 14.9198C120.53 15.2941 121.012 15.8556 121.333 16.6043C121.467 16.9061 121.575 17.243 121.658 17.615L113.138 17.6391Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M90.6482 28.9171C92.0386 29.639 93.6295 30 95.421 30C97.2124 30 98.7899 29.639 100.154 28.9171C101.517 28.1684 102.587 27.1524 103.362 25.869C104.138 24.5588 104.525 23.0481 104.525 21.3369V10.0668H98.3889V21.2968C98.3889 22.3128 98.1215 23.115 97.5867 23.7032C97.052 24.2647 96.33 24.5454 95.421 24.5454C94.7792 24.5454 94.2311 24.4118 93.7766 24.1444C93.322 23.877 92.9744 23.5027 92.7338 23.0214C92.5199 22.5401 92.4129 21.9652 92.4129 21.2968V10.0668H86.2766V21.377C86.2766 23.0615 86.6643 24.5588 87.4397 25.869C88.2151 27.1524 89.2846 28.1684 90.6482 28.9171Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M71.3524 29.5588L63.0904 10.0668H69.708L73.8792 22.1333L78.0503 10.0668H84.5476L76.2856 29.5588H71.3524Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M55.1386 18.4492V29.5588H61.2749V17.0855C61.2749 15.7486 60.9541 14.5187 60.3124 13.3957C59.6707 12.2727 58.7883 11.377 57.6653 10.7085C56.5691 10.0134 55.299 9.66576 53.8552 9.66576C52.3578 9.66576 51.0076 9.98662 49.8044 10.6283C49.2874 10.8986 48.8195 11.2204 48.4006 11.5939V10.0668H42.2642V29.5588H48.4006V18.4492C48.4006 17.7807 48.5477 17.1925 48.8418 16.6845C49.1359 16.1497 49.537 15.7486 50.045 15.4813C50.553 15.1872 51.1413 15.0401 51.8097 15.0401C52.7723 15.0401 53.561 15.3609 54.176 16.0027C54.8177 16.6176 55.1386 17.4331 55.1386 18.4492Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M26.5533 29.9599C24.7619 29.9599 23.1576 29.5187 21.7405 28.6363C20.3501 27.754 19.2405 26.5508 18.4116 25.0267C17.6094 23.5027 17.2084 21.7647 17.2084 19.8128C17.2084 17.8609 17.6094 16.123 18.4116 14.5989C19.2405 13.0749 20.3501 11.8716 21.7405 10.9893C23.1576 10.1069 24.7619 9.66576 26.5533 9.66576C27.8635 9.66576 29.0399 9.91977 30.0827 10.4278C30.7839 10.7608 31.3988 11.1801 31.9276 11.6855V10.0668H37.9437V29.5588H31.9276V27.9791C31.4153 28.4634 30.8137 28.8697 30.1228 29.1978C29.0533 29.7059 27.8635 29.9599 26.5533 29.9599ZM27.7966 24.4251C29.1068 24.4251 30.1629 23.9973 30.9651 23.1417C31.7672 22.2593 32.1683 21.1497 32.1683 19.8128C32.1683 18.9037 31.9811 18.1016 31.6068 17.4064C31.2592 16.7112 30.7512 16.1765 30.0827 15.8021C29.441 15.4011 28.6923 15.2005 27.8367 15.2005C26.9811 15.2005 26.2191 15.4011 25.5506 15.8021C24.9089 16.1765 24.3875 16.7112 23.9865 17.4064C23.6121 18.1016 23.425 18.9037 23.425 19.8128C23.425 20.6952 23.6121 21.4839 23.9865 22.1791C24.3608 22.8743 24.8822 23.4224 25.5506 23.8235C26.2191 24.2246 26.9677 24.4251 27.7966 24.4251Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\n/**\n * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,\n * and portrait (stacked) layouts with multiple colour schemes.\n *\n * @example\n * ```tsx\n * <Logo type=\"full\" color=\"fullColour\" />\n * ```\n */\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n  ({ className, variant = \"full\", color = \"fullColour\", ...props }, ref) => {\n    const colors = getLogoColors(color, variant);\n    const showIcon = variant === \"full\" || variant === \"icon\" || variant === \"portrait\";\n    const showWordmark = variant === \"full\" || variant === \"wordmark\" || variant === \"portrait\";\n\n    // When aria-label is provided, add role=\"img\" for proper accessibility\n    const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n    return (\n      <div\n        ref={ref}\n        data-testid=\"logo\"\n        className={cn(\n          \"inline-flex items-center text-foreground-default\",\n          variant === \"portrait\" ? \"flex-col\" : \"flex-row\",\n          variant === \"full\" && \"gap-2\",\n          className,\n        )}\n        {...ariaProps}\n        {...props}\n      >\n        {showIcon && (\n          <svg\n            viewBox=\"0 0 39 39\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn(\"shrink-0\", variant === \"icon\" ? \"h-10 w-10\" : \"h-8 w-8\")}\n            aria-hidden=\"true\"\n            data-testid=\"logo-icon\"\n          >\n            <path\n              d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n              {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n            />\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n              {...(color === \"decolour\"\n                ? { className: colors.iconInnerClass }\n                : { fill: colors.iconInner })}\n            />\n          </svg>\n        )}\n        {showWordmark && <WordmarkSVG className={cn(colors.textClass)} />}\n      </div>\n    );\n  },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":[],"mappings":";;;;AAGA,MAAM,gBAAgB,CAAC,OAAkB,YAAyB;AAChE,MAAI,UAAU,cAAc;AAC1B,WAAO;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,WAAW;AAAA;AAAA,IAAA;AAAA,EAEf;AAEA,MAAI,UAAU,YAAY;AACxB,WAAO;AAAA,MACL,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA;AAAA,IAAA;AAAA,EAEf;AAEA,MAAI,UAAU,eAAe;AAC3B,WAAO;AAAA,MACL,MACE,YAAY,SACR,4CACA;AAAA,MACN,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,EAEf;AAEA,MAAI,UAAU,eAAe;AAC3B,WAAO;AAAA,MACL,MACE,YAAY,SACR,qCACA;AAAA,MACN,WACE,YAAY,SACR,4CACA;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EAEf;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA;AAAA,EAAA;AAEf;AAqBA,MAAM,cAAc,CAAC,EAAE,gBAAwC;AAC7D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,eAAY;AAAA,MACZ;AAAA,MACA,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN;AAWO,MAAM,OAAO,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,QAAQ,QAAQ,cAAc,GAAG,MAAA,GAAS,QAAQ;AACxE,UAAM,SAAS,cAAc,OAAO,OAAO;AAC3C,UAAM,WAAW,YAAY,UAAU,YAAY,UAAU,YAAY;AACzE,UAAM,eAAe,YAAY,UAAU,YAAY,cAAc,YAAY;AAGjF,UAAM,YAAY,MAAM,YAAY,IAAI,EAAE,MAAM,MAAA,IAAmB,CAAA;AAEnE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa,aAAa;AAAA,UACtC,YAAY,UAAU;AAAA,UACtB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAW,GAAG,YAAY,YAAY,SAAS,cAAc,SAAS;AAAA,cACtE,eAAY;AAAA,cACZ,eAAY;AAAA,cAEZ,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,GAAE;AAAA,oBACD,GAAI,UAAU,aAAa,EAAE,WAAW,OAAO,cAAc,EAAE,MAAM,OAAO,KAAA;AAAA,kBAAK;AAAA,gBAAA;AAAA,gBAEpF;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,UAAS;AAAA,oBACT,UAAS;AAAA,oBACT,GAAE;AAAA,oBACD,GAAI,UAAU,aACX,EAAE,WAAW,OAAO,mBACpB,EAAE,MAAM,OAAO,UAAA;AAAA,kBAAU;AAAA,gBAAA;AAAA,cAC/B;AAAA,YAAA;AAAA,UAAA;AAAA,UAGH,gBAAgB,oBAAC,aAAA,EAAY,WAAW,GAAG,OAAO,SAAS,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrE;AACF;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Logo.mjs","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst getLogoColors = (color: LogoColor, variant: LogoVariant) => {\n  if (color === \"fullColour\") {\n    return {\n      icon: \"var(--color-brand-primary-default)\",\n      iconInner: \"var(--primitives-color-gray-black)\",\n      textClass: \"\", // Uses parent's text-content-primary\n    };\n  }\n\n  if (color === \"decolour\") {\n    return {\n      iconClass: \"fill-[#151515] dark:fill-[#ffffff]\",\n      iconInnerClass: \"fill-[#ffffff] dark:fill-[#151515]\",\n      textClass: \"\", // Uses parent's text-content-primary\n    };\n  }\n\n  if (color === \"whiteAlways\") {\n    return {\n      icon:\n        variant === \"icon\"\n          ? \"var(--primitives-color-gray-white)\"\n          : \"var(--color-brand-primary-default)\",\n      iconInner: \"var(--primitives-color-gray-black)\",\n      textClass: \"text-content-on-brand-inverted\",\n    };\n  }\n\n  if (color === \"blackAlways\") {\n    return {\n      icon:\n        variant === \"icon\"\n          ? \"var(--primitives-color-gray-black)\"\n          : \"var(--color-brand-primary-default)\",\n      iconInner:\n        variant === \"icon\"\n          ? \"var(--primitives-color-gray-white)\"\n          : \"var(--primitives-color-gray-black)\",\n      textClass: \"text-content-on-brand\",\n    };\n  }\n\n  return {\n    icon: \"var(--color-brand-primary-default)\",\n    iconInner: \"var(--primitives-color-gray-black)\",\n    textClass: \"\", // Default to adaptive color\n  };\n};\n\n/** Layout variant of the logo. */\nexport type LogoVariant = \"full\" | \"icon\" | \"wordmark\" | \"portrait\";\n/** Colour scheme of the logo. */\nexport type LogoColor = \"fullColour\" | \"decolour\" | \"whiteAlways\" | \"blackAlways\";\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout variant of the logo. @default \"full\" */\n  variant?: LogoVariant;\n  /** Colour scheme of the logo. @default \"fullColour\" */\n  color?: LogoColor;\n  /**\n   * Accessible label for the logo. Required when `type` is `\"icon\"` and\n   * the logo is used inside interactive contexts (links, buttons).\n   *\n   * @example \"Fanvue home\"\n   */\n  \"aria-label\"?: string;\n}\n\nconst WordmarkSVG = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      width=\"128\"\n      height=\"30\"\n      viewBox=\"0 0 128 30\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={className}\n      data-testid=\"logo-wordmark\"\n    >\n      <path\n        d=\"M4.29144 15.2807V29.5588H10.4278V15.2807H16.0428V10.0668H10.4278V8.18181C10.4278 7.35294 10.6684 6.69786 11.1497 6.21658C11.631 5.73529 12.2861 5.49465 13.115 5.49465C13.5695 5.49465 13.9572 5.57486 14.2781 5.73529C14.6257 5.86898 14.9331 6.06951 15.2005 6.33689L19.0508 2.48663C18.3021 1.71123 17.4198 1.10963 16.4037 0.681819C15.4144 0.227273 14.2513 0 12.9144 0C11.1497 0 9.62566 0.374331 8.34224 1.12299C7.05882 1.84492 6.05615 2.84759 5.33422 4.13102C4.63903 5.3877 4.29144 6.80481 4.29144 8.38235V10.0668H0V15.2807H4.29144Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M112.349 28.7166C114.006 29.5722 115.891 30 118.004 30C119.635 30 121.132 29.7193 122.496 29.1578C123.859 28.5963 125.022 27.754 125.985 26.631L122.616 23.262C122.028 23.9305 121.346 24.4385 120.571 24.7861C119.795 25.107 118.926 25.2674 117.964 25.2674C116.921 25.2674 116.012 25.0535 115.236 24.6257C114.488 24.1711 113.899 23.5428 113.472 22.7406C113.337 22.4624 113.225 22.166 113.135 21.8515L127.108 21.8182C127.215 21.3102 127.282 20.869 127.308 20.4947C127.362 20.0936 127.389 19.7193 127.389 19.3717C127.389 17.4733 126.961 15.7888 126.105 14.3182C125.276 12.8476 124.127 11.6979 122.656 10.869C121.185 10.0401 119.488 9.62568 117.562 9.62568C115.584 9.62568 113.806 10.0669 112.228 10.9492C110.651 11.8316 109.394 13.0481 108.458 14.5989C107.549 16.123 107.095 17.861 107.095 19.8128C107.095 21.7647 107.562 23.516 108.498 25.0668C109.434 26.6176 110.718 27.8342 112.349 28.7166ZM113.138 17.6391C113.218 17.3577 113.316 17.093 113.431 16.8449C113.833 16.0428 114.381 15.4278 115.076 15C115.798 14.5455 116.64 14.3182 117.603 14.3182C118.512 14.3182 119.274 14.5187 119.889 14.9198C120.53 15.2941 121.012 15.8556 121.333 16.6043C121.467 16.9061 121.575 17.243 121.658 17.615L113.138 17.6391Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M90.6482 28.9171C92.0386 29.639 93.6295 30 95.421 30C97.2124 30 98.7899 29.639 100.154 28.9171C101.517 28.1684 102.587 27.1524 103.362 25.869C104.138 24.5588 104.525 23.0481 104.525 21.3369V10.0668H98.3889V21.2968C98.3889 22.3128 98.1215 23.115 97.5867 23.7032C97.052 24.2647 96.33 24.5454 95.421 24.5454C94.7792 24.5454 94.2311 24.4118 93.7766 24.1444C93.322 23.877 92.9744 23.5027 92.7338 23.0214C92.5199 22.5401 92.4129 21.9652 92.4129 21.2968V10.0668H86.2766V21.377C86.2766 23.0615 86.6643 24.5588 87.4397 25.869C88.2151 27.1524 89.2846 28.1684 90.6482 28.9171Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M71.3524 29.5588L63.0904 10.0668H69.708L73.8792 22.1333L78.0503 10.0668H84.5476L76.2856 29.5588H71.3524Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M55.1386 18.4492V29.5588H61.2749V17.0855C61.2749 15.7486 60.9541 14.5187 60.3124 13.3957C59.6707 12.2727 58.7883 11.377 57.6653 10.7085C56.5691 10.0134 55.299 9.66576 53.8552 9.66576C52.3578 9.66576 51.0076 9.98662 49.8044 10.6283C49.2874 10.8986 48.8195 11.2204 48.4006 11.5939V10.0668H42.2642V29.5588H48.4006V18.4492C48.4006 17.7807 48.5477 17.1925 48.8418 16.6845C49.1359 16.1497 49.537 15.7486 50.045 15.4813C50.553 15.1872 51.1413 15.0401 51.8097 15.0401C52.7723 15.0401 53.561 15.3609 54.176 16.0027C54.8177 16.6176 55.1386 17.4331 55.1386 18.4492Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M26.5533 29.9599C24.7619 29.9599 23.1576 29.5187 21.7405 28.6363C20.3501 27.754 19.2405 26.5508 18.4116 25.0267C17.6094 23.5027 17.2084 21.7647 17.2084 19.8128C17.2084 17.8609 17.6094 16.123 18.4116 14.5989C19.2405 13.0749 20.3501 11.8716 21.7405 10.9893C23.1576 10.1069 24.7619 9.66576 26.5533 9.66576C27.8635 9.66576 29.0399 9.91977 30.0827 10.4278C30.7839 10.7608 31.3988 11.1801 31.9276 11.6855V10.0668H37.9437V29.5588H31.9276V27.9791C31.4153 28.4634 30.8137 28.8697 30.1228 29.1978C29.0533 29.7059 27.8635 29.9599 26.5533 29.9599ZM27.7966 24.4251C29.1068 24.4251 30.1629 23.9973 30.9651 23.1417C31.7672 22.2593 32.1683 21.1497 32.1683 19.8128C32.1683 18.9037 31.9811 18.1016 31.6068 17.4064C31.2592 16.7112 30.7512 16.1765 30.0827 15.8021C29.441 15.4011 28.6923 15.2005 27.8367 15.2005C26.9811 15.2005 26.2191 15.4011 25.5506 15.8021C24.9089 16.1765 24.3875 16.7112 23.9865 17.4064C23.6121 18.1016 23.425 18.9037 23.425 19.8128C23.425 20.6952 23.6121 21.4839 23.9865 22.1791C24.3608 22.8743 24.8822 23.4224 25.5506 23.8235C26.2191 24.2246 26.9677 24.4251 27.7966 24.4251Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\n/**\n * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,\n * and portrait (stacked) layouts with multiple colour schemes.\n *\n * @example\n * ```tsx\n * <Logo type=\"full\" color=\"fullColour\" />\n * ```\n */\nexport const Logo = React.forwardRef<HTMLDivElement, LogoProps>(\n  ({ className, variant = \"full\", color = \"fullColour\", ...props }, ref) => {\n    const colors = getLogoColors(color, variant);\n    const showIcon = variant === \"full\" || variant === \"icon\" || variant === \"portrait\";\n    const showWordmark = variant === \"full\" || variant === \"wordmark\" || variant === \"portrait\";\n\n    // When aria-label is provided, add role=\"img\" for proper accessibility\n    const ariaProps = props[\"aria-label\"] ? { role: \"img\" as const } : {};\n\n    return (\n      <div\n        ref={ref}\n        data-testid=\"logo\"\n        className={cn(\n          \"inline-flex items-center text-content-primary\",\n          variant === \"portrait\" ? \"flex-col\" : \"flex-row\",\n          variant === \"full\" && \"gap-2\",\n          className,\n        )}\n        {...ariaProps}\n        {...props}\n      >\n        {showIcon && (\n          <svg\n            viewBox=\"0 0 39 39\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn(\"shrink-0\", variant === \"icon\" ? \"h-10 w-10\" : \"h-8 w-8\")}\n            aria-hidden=\"true\"\n            data-testid=\"logo-icon\"\n          >\n            <path\n              d=\"M0 11.2339C0 5.02957 5.02957 0 11.2339 0H27.7661C33.9704 0 39 5.02957 39 11.2339V27.7661C39 33.9704 33.9704 39 27.7661 39H11.2339C5.02957 39 0 33.9704 0 27.7661V11.2339Z\"\n              {...(color === \"decolour\" ? { className: colors.iconClass } : { fill: colors.icon })}\n            />\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M12.277 30.5825C11.4418 30.5825 11.0355 29.8659 11.2059 29.1153C11.4275 28.0916 12.5838 25.0548 11.7145 23.6899C10.4361 21.6938 7.25562 21.9838 6.5397 20.9602C6.02371 20.2089 6.48355 19.478 7.19738 19.0493C8.79967 18.0257 11.902 18.3157 14.9191 16.3025C16.5895 15.2106 18.1237 12.9927 18.993 11.662C20.2203 9.78527 20.7487 9.39287 23.3226 9.39287H32.3376C33.7574 9.39287 34.202 11.8036 31.8852 12.0686C31.2886 12.1368 29.6977 12.3757 27.4306 12.6487C25.2658 12.9216 20.4589 13.5728 22.351 16.6608C23.7658 18.2816 26.7488 18.0769 27.4306 19.0493C27.9238 19.7225 27.4875 20.4384 26.9505 20.7824C25.3311 21.8061 21.8737 21.6938 18.8566 23.6899C16.8111 25.0548 15.1478 28.0916 14.4659 29.1153C13.9716 29.8659 13.1293 30.5825 12.294 30.5825H12.277Z\"\n              {...(color === \"decolour\"\n                ? { className: colors.iconInnerClass }\n                : { fill: colors.iconInner })}\n            />\n          </svg>\n        )}\n        {showWordmark && <WordmarkSVG className={cn(colors.textClass)} />}\n      </div>\n    );\n  },\n);\n\nLogo.displayName = \"Logo\";\n"],"names":[],"mappings":"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"}

package/dist/components/MobileStepper/MobileStepper.mjs

@@ -56,7 +56,7 @@ const MobileStepper = React.forwardRef(
                     "data-state": state,
                     className: cn(
                       "block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150",
-                      state === "active" ? "bg-foreground-default" : "bg-neutral-200"
+                      state === "active" ? "bg-content-primary" : "bg-neutral-alphas-200"
                     ),
                     "aria-hidden": "true"
                   },
@@ -81,7 +81,7 @@ const MobileStepper = React.forwardRef(
           "output",
           {
             "aria-live": "polite",
-            className: "typography-regular-body-sm truncate text-foreground-secondary",
+            className: "typography-regular-body-sm truncate text-content-secondary",
             children: formatText(clampedStep + 1, safeSteps)
           }
         )

package/dist/components/MobileStepper/MobileStepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileStepper.mjs","sources":["../../../src/components/MobileStepper/MobileStepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ProgressBar } from \"../ProgressBar/ProgressBar\";\n\n/** Display variant for the step indicator. */\nexport type MobileStepperVariant = \"dots\" | \"progress\" | \"text\";\n\n/** Positioning mode — `\"static\"` flows normally, `\"bottom\"` fixes to the viewport bottom. */\nexport type MobileStepperPosition = \"static\" | \"bottom\";\n\nexport interface MobileStepperProps extends React.HTMLAttributes<HTMLElement> {\n  /** Total number of steps. */\n  steps: number;\n  /** Zero-indexed active step, clamped to `0` – `steps - 1`. */\n  activeStep: number;\n  /** Step indicator style. @default \"dots\" */\n  variant?: MobileStepperVariant;\n  /** Content rendered on the left (typically a \"Back\" button). */\n  backButton?: React.ReactNode;\n  /** Content rendered on the right (typically a \"Next\" button). */\n  nextButton?: React.ReactNode;\n  /** Positioning mode. @default \"static\" */\n  position?: MobileStepperPosition;\n  /** Accessible label for the stepper region. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Accessible label for the step progress indicator (dots/progress bar). @default \"Step progress\" */\n  stepProgressLabel?: string;\n  /**\n   * Formatter for the `aria-valuetext` on dots and progress variants.\n   * Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.\n   * @default (active, total) => \\`Step ${active} of ${total}\\`\n   */\n  formatStepLabel?: (activeStep: number, totalSteps: number) => string;\n  /**\n   * Custom formatter for the text variant.\n   * Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display.\n   * Only used when `variant` is `\"text\"`.\n   * @default (active, total) => \\`${active} / ${total}\\`\n   */\n  formatText?: (activeStep: number, totalSteps: number) => string;\n}\n\nfunction defaultFormatText(activeStep: number, totalSteps: number): string {\n  return `${activeStep} / ${totalSteps}`;\n}\n\nfunction defaultFormatStepLabel(activeStep: number, totalSteps: number): string {\n  return `Step ${activeStep} of ${totalSteps}`;\n}\n\n/**\n * A compact, mobile-friendly stepper that shows progress through a sequence of\n * steps. Supports three indicator variants: dots, a progress bar, or text.\n *\n * @example\n * ```tsx\n * <MobileStepper\n *   steps={6}\n *   activeStep={2}\n *   variant=\"dots\"\n *   backButton={<Button size=\"sm\" onClick={handleBack}>Back</Button>}\n *   nextButton={<Button size=\"sm\" onClick={handleNext}>Next</Button>}\n * />\n * ```\n */\nexport const MobileStepper = React.forwardRef<HTMLElement, MobileStepperProps>(\n  (\n    {\n      steps,\n      activeStep,\n      variant = \"dots\",\n      backButton,\n      nextButton,\n      position = \"static\",\n      ariaLabel = \"Progress\",\n      stepProgressLabel = \"Step progress\",\n      formatStepLabel = defaultFormatStepLabel,\n      formatText = defaultFormatText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const safeSteps = Math.max(1, steps);\n    const clampedStep = Math.min(safeSteps - 1, Math.max(0, activeStep));\n    const progressValue = safeSteps > 1 ? (clampedStep / (safeSteps - 1)) * 100 : 100;\n    const stepText = formatStepLabel(clampedStep + 1, safeSteps);\n\n    const hasButtons = backButton != null || nextButton != null;\n\n    const sharedClassName = cn(\n      \"flex w-full items-center justify-between gap-2 bg-background-surface px-2 py-2\",\n      position === \"bottom\" && \"fixed inset-x-0 bottom-0 z-50 pb-[env(safe-area-inset-bottom)]\",\n      className,\n    );\n\n    const content = (\n      <>\n        {backButton != null && <div className=\"flex shrink-0\">{backButton}</div>}\n\n        <div className=\"flex min-w-0 flex-1 items-center justify-center overflow-hidden\">\n          {variant === \"dots\" && (\n            <output aria-live=\"polite\" className=\"flex items-center\">\n              <div\n                role=\"progressbar\"\n                aria-label={stepProgressLabel}\n                aria-valuenow={clampedStep + 1}\n                aria-valuemin={1}\n                aria-valuemax={safeSteps}\n                aria-valuetext={stepText}\n                className=\"flex flex-wrap items-center gap-1\"\n              >\n                {Array.from({ length: safeSteps }, (_, i) => {\n                  const state =\n                    i < clampedStep ? \"completed\" : i === clampedStep ? \"active\" : \"incomplete\";\n                  return (\n                    <span\n                      // biome-ignore lint/suspicious/noArrayIndexKey: static dot list never reorders\n                      key={`step-${i}`}\n                      data-state={state}\n                      className={cn(\n                        \"block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150\",\n                        state === \"active\" ? \"bg-foreground-default\" : \"bg-neutral-200\",\n                      )}\n                      aria-hidden=\"true\"\n                    />\n                  );\n                })}\n              </div>\n              <span className=\"sr-only\">{stepText}</span>\n            </output>\n          )}\n\n          {variant === \"progress\" && (\n            <output aria-live=\"polite\" className=\"w-full max-w-md px-2\">\n              <ProgressBar\n                value={progressValue}\n                size=\"small\"\n                variant=\"generic\"\n                ariaLabel={stepProgressLabel}\n                ariaValueText={stepText}\n              />\n            </output>\n          )}\n\n          {variant === \"text\" && (\n            <output\n              aria-live=\"polite\"\n              className=\"typography-regular-body-sm truncate text-foreground-secondary\"\n            >\n              {formatText(clampedStep + 1, safeSteps)}\n            </output>\n          )}\n        </div>\n\n        {nextButton != null && <div className=\"flex shrink-0\">{nextButton}</div>}\n      </>\n    );\n\n    if (hasButtons) {\n      return (\n        <nav\n          ref={ref as React.Ref<HTMLElement>}\n          aria-label={ariaLabel}\n          className={sharedClassName}\n          {...props}\n        >\n          {content}\n        </nav>\n      );\n    }\n\n    return (\n      <fieldset\n        ref={ref as React.Ref<HTMLFieldSetElement>}\n        aria-label={ariaLabel}\n        className={cn(sharedClassName, \"m-0 border-0 p-0\")}\n        {...props}\n      >\n        {content}\n      </fieldset>\n    );\n  },\n);\n\nMobileStepper.displayName = \"MobileStepper\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MobileStepper.mjs","sources":["../../../src/components/MobileStepper/MobileStepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ProgressBar } from \"../ProgressBar/ProgressBar\";\n\n/** Display variant for the step indicator. */\nexport type MobileStepperVariant = \"dots\" | \"progress\" | \"text\";\n\n/** Positioning mode — `\"static\"` flows normally, `\"bottom\"` fixes to the viewport bottom. */\nexport type MobileStepperPosition = \"static\" | \"bottom\";\n\nexport interface MobileStepperProps extends React.HTMLAttributes<HTMLElement> {\n  /** Total number of steps. */\n  steps: number;\n  /** Zero-indexed active step, clamped to `0` – `steps - 1`. */\n  activeStep: number;\n  /** Step indicator style. @default \"dots\" */\n  variant?: MobileStepperVariant;\n  /** Content rendered on the left (typically a \"Back\" button). */\n  backButton?: React.ReactNode;\n  /** Content rendered on the right (typically a \"Next\" button). */\n  nextButton?: React.ReactNode;\n  /** Positioning mode. @default \"static\" */\n  position?: MobileStepperPosition;\n  /** Accessible label for the stepper region. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Accessible label for the step progress indicator (dots/progress bar). @default \"Step progress\" */\n  stepProgressLabel?: string;\n  /**\n   * Formatter for the `aria-valuetext` on dots and progress variants.\n   * Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.\n   * @default (active, total) => \\`Step ${active} of ${total}\\`\n   */\n  formatStepLabel?: (activeStep: number, totalSteps: number) => string;\n  /**\n   * Custom formatter for the text variant.\n   * Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display.\n   * Only used when `variant` is `\"text\"`.\n   * @default (active, total) => \\`${active} / ${total}\\`\n   */\n  formatText?: (activeStep: number, totalSteps: number) => string;\n}\n\nfunction defaultFormatText(activeStep: number, totalSteps: number): string {\n  return `${activeStep} / ${totalSteps}`;\n}\n\nfunction defaultFormatStepLabel(activeStep: number, totalSteps: number): string {\n  return `Step ${activeStep} of ${totalSteps}`;\n}\n\n/**\n * A compact, mobile-friendly stepper that shows progress through a sequence of\n * steps. Supports three indicator variants: dots, a progress bar, or text.\n *\n * @example\n * ```tsx\n * <MobileStepper\n *   steps={6}\n *   activeStep={2}\n *   variant=\"dots\"\n *   backButton={<Button size=\"sm\" onClick={handleBack}>Back</Button>}\n *   nextButton={<Button size=\"sm\" onClick={handleNext}>Next</Button>}\n * />\n * ```\n */\nexport const MobileStepper = React.forwardRef<HTMLElement, MobileStepperProps>(\n  (\n    {\n      steps,\n      activeStep,\n      variant = \"dots\",\n      backButton,\n      nextButton,\n      position = \"static\",\n      ariaLabel = \"Progress\",\n      stepProgressLabel = \"Step progress\",\n      formatStepLabel = defaultFormatStepLabel,\n      formatText = defaultFormatText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const safeSteps = Math.max(1, steps);\n    const clampedStep = Math.min(safeSteps - 1, Math.max(0, activeStep));\n    const progressValue = safeSteps > 1 ? (clampedStep / (safeSteps - 1)) * 100 : 100;\n    const stepText = formatStepLabel(clampedStep + 1, safeSteps);\n\n    const hasButtons = backButton != null || nextButton != null;\n\n    const sharedClassName = cn(\n      \"flex w-full items-center justify-between gap-2 bg-background-surface px-2 py-2\",\n      position === \"bottom\" && \"fixed inset-x-0 bottom-0 z-50 pb-[env(safe-area-inset-bottom)]\",\n      className,\n    );\n\n    const content = (\n      <>\n        {backButton != null && <div className=\"flex shrink-0\">{backButton}</div>}\n\n        <div className=\"flex min-w-0 flex-1 items-center justify-center overflow-hidden\">\n          {variant === \"dots\" && (\n            <output aria-live=\"polite\" className=\"flex items-center\">\n              <div\n                role=\"progressbar\"\n                aria-label={stepProgressLabel}\n                aria-valuenow={clampedStep + 1}\n                aria-valuemin={1}\n                aria-valuemax={safeSteps}\n                aria-valuetext={stepText}\n                className=\"flex flex-wrap items-center gap-1\"\n              >\n                {Array.from({ length: safeSteps }, (_, i) => {\n                  const state =\n                    i < clampedStep ? \"completed\" : i === clampedStep ? \"active\" : \"incomplete\";\n                  return (\n                    <span\n                      // biome-ignore lint/suspicious/noArrayIndexKey: static dot list never reorders\n                      key={`step-${i}`}\n                      data-state={state}\n                      className={cn(\n                        \"block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150\",\n                        state === \"active\" ? \"bg-content-primary\" : \"bg-neutral-alphas-200\",\n                      )}\n                      aria-hidden=\"true\"\n                    />\n                  );\n                })}\n              </div>\n              <span className=\"sr-only\">{stepText}</span>\n            </output>\n          )}\n\n          {variant === \"progress\" && (\n            <output aria-live=\"polite\" className=\"w-full max-w-md px-2\">\n              <ProgressBar\n                value={progressValue}\n                size=\"small\"\n                variant=\"generic\"\n                ariaLabel={stepProgressLabel}\n                ariaValueText={stepText}\n              />\n            </output>\n          )}\n\n          {variant === \"text\" && (\n            <output\n              aria-live=\"polite\"\n              className=\"typography-regular-body-sm truncate text-content-secondary\"\n            >\n              {formatText(clampedStep + 1, safeSteps)}\n            </output>\n          )}\n        </div>\n\n        {nextButton != null && <div className=\"flex shrink-0\">{nextButton}</div>}\n      </>\n    );\n\n    if (hasButtons) {\n      return (\n        <nav\n          ref={ref as React.Ref<HTMLElement>}\n          aria-label={ariaLabel}\n          className={sharedClassName}\n          {...props}\n        >\n          {content}\n        </nav>\n      );\n    }\n\n    return (\n      <fieldset\n        ref={ref as React.Ref<HTMLFieldSetElement>}\n        aria-label={ariaLabel}\n        className={cn(sharedClassName, \"m-0 border-0 p-0\")}\n        {...props}\n      >\n        {content}\n      </fieldset>\n    );\n  },\n);\n\nMobileStepper.displayName = \"MobileStepper\";\n"],"names":[],"mappings":";;;;;AA0CA,SAAS,kBAAkB,YAAoB,YAA4B;AACzE,SAAO,GAAG,UAAU,MAAM,UAAU;AACtC;AAEA,SAAS,uBAAuB,YAAoB,YAA4B;AAC9E,SAAO,QAAQ,UAAU,OAAO,UAAU;AAC5C;AAiBO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK;AACnC,UAAM,cAAc,KAAK,IAAI,YAAY,GAAG,KAAK,IAAI,GAAG,UAAU,CAAC;AACnE,UAAM,gBAAgB,YAAY,IAAK,eAAe,YAAY,KAAM,MAAM;AAC9E,UAAM,WAAW,gBAAgB,cAAc,GAAG,SAAS;AAE3D,UAAM,aAAa,cAAc,QAAQ,cAAc;AAEvD,UAAM,kBAAkB;AAAA,MACtB;AAAA,MACA,aAAa,YAAY;AAAA,MACzB;AAAA,IAAA;AAGF,UAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,cAAc,QAAQ,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,YAAW;AAAA,MAElE,qBAAC,OAAA,EAAI,WAAU,mEACZ,UAAA;AAAA,QAAA,YAAY,UACX,qBAAC,UAAA,EAAO,aAAU,UAAS,WAAU,qBACnC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,iBAAe,cAAc;AAAA,cAC7B,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,kBAAgB;AAAA,cAChB,WAAU;AAAA,cAET,UAAA,MAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,GAAG,MAAM;AAC3C,sBAAM,QACJ,IAAI,cAAc,cAAc,MAAM,cAAc,WAAW;AACjE,uBACE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAGC,cAAY;AAAA,oBACZ,WAAW;AAAA,sBACT;AAAA,sBACA,UAAU,WAAW,uBAAuB;AAAA,oBAAA;AAAA,oBAE9C,eAAY;AAAA,kBAAA;AAAA,kBANP,QAAQ,CAAC;AAAA,gBAAA;AAAA,cASpB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,QAAA,GACtC;AAAA,QAGD,YAAY,cACX,oBAAC,YAAO,aAAU,UAAS,WAAU,wBACnC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAW;AAAA,YACX,eAAe;AAAA,UAAA;AAAA,QAAA,GAEnB;AAAA,QAGD,YAAY,UACX;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAA,WAAW,cAAc,GAAG,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC,GAEJ;AAAA,MAEC,cAAc,QAAQ,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,WAAA,CAAW;AAAA,IAAA,GACpE;AAGF,QAAI,YAAY;AACd,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,cAAY;AAAA,UACZ,WAAW;AAAA,UACV,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW,GAAG,iBAAiB,kBAAkB;AAAA,QAChD,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,cAAc,cAAc;"}

package/dist/components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const sizeClasses = {
+  sm: "h-2 w-2",
+  md: "h-3 w-3"
+};
+const OnlineBlinkingIcon = React.forwardRef(
+  ({ className, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("relative inline-block rounded-full", sizeClasses[size], className),
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-success-content opacity-75" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-success-content" })
+      ]
+    }
+  )
+);
+OnlineBlinkingIcon.displayName = "OnlineBlinkingIcon";
+export {
+  OnlineBlinkingIcon
+};
+//# sourceMappingURL=OnlineBlinkingIcon.mjs.map

package/dist/components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnlineBlinkingIcon.mjs","sources":["../../../src/components/OnlineBlinkingIcon/OnlineBlinkingIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type OnlineBlinkingIconSize = \"sm\" | \"md\";\n\nexport interface OnlineBlinkingIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** @default \"sm\" */\n  size?: OnlineBlinkingIconSize;\n}\n\nconst sizeClasses: Record<OnlineBlinkingIconSize, string> = {\n  sm: \"h-2 w-2\",\n  md: \"h-3 w-3\",\n};\n\n/**\n * A small pulsing green dot indicator used to show online status.\n * Decorative only — pair with a visually-hidden label at the usage site\n * to convey status to screen readers.\n *\n * @example\n * ```tsx\n * <OnlineBlinkingIcon />\n * <OnlineBlinkingIcon size=\"md\" />\n * ```\n */\nexport const OnlineBlinkingIcon = React.forwardRef<HTMLSpanElement, OnlineBlinkingIconProps>(\n  ({ className, size = \"sm\", ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\"relative inline-block rounded-full\", sizeClasses[size], className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <span className=\"absolute inset-0 animate-ping rounded-full bg-success-content opacity-75\" />\n      <span className=\"absolute inset-0 rounded-full bg-success-content\" />\n    </span>\n  ),\n);\n\nOnlineBlinkingIcon.displayName = \"OnlineBlinkingIcon\";\n"],"names":[],"mappings":";;;;AAUA,MAAM,cAAsD;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,MAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC,EAAE,WAAW,OAAO,MAAM,GAAG,MAAA,GAAS,QACrC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,sCAAsC,YAAY,IAAI,GAAG,SAAS;AAAA,MAChF,eAAY;AAAA,MACX,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2EAAA,CAA2E;AAAA,QAC3F,oBAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;AAEA,mBAAmB,cAAc;"}

package/dist/components/Pagination/Pagination.mjs

@@ -69,7 +69,7 @@ const Pagination = React.forwardRef(
             (page) => typeof page === "string" ? /* @__PURE__ */ jsx(
               "span",
               {
-                className: "flex size-4 items-center justify-center text-foreground-secondary text-xs",
+                className: "flex size-4 items-center justify-center text-content-secondary text-xs",
                 "aria-hidden": "true",
                 children: "…"
               },
@@ -83,7 +83,7 @@ const Pagination = React.forwardRef(
                 onClick: () => onPageChange?.(page),
                 className: cn(
                   "flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150",
-                  page === currentPage ? "bg-neutral-400 text-foreground-inverse" : "bg-neutral-100 text-foreground-default hover:bg-neutral-200 active:bg-neutral-200"
+                  page === currentPage ? "bg-buttons-primary text-content-primary-inverted" : "bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100"
                 ),
                 children: page
               },
@@ -103,7 +103,7 @@ const Pagination = React.forwardRef(
                 {
                   className: cn(
                     "block rounded-full motion-safe:transition-all motion-safe:duration-150",
-                    page === currentPage ? "size-2 bg-neutral-400" : "size-1.5 bg-neutral-200 hover:bg-neutral-250 active:bg-neutral-250"
+                    page === currentPage ? "size-2 bg-neutral-alphas-400" : "size-1.5 bg-neutral-alphas-200 hover:bg-neutral-alphas-300 active:bg-neutral-alphas-300"
                   )
                 }
               )

package/dist/components/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. */\nexport type PaginationVariant = \"default\" | \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Display style — numbered page buttons or minimal dots. @default \"default\" */\n  variant?: PaginationVariant;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Accessible label for the `<nav>` landmark. @default \"Pagination\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` */\n  getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: PageItem[] = [1];\n\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, \"ellipsis-end\");\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n  }\n\n  pages.push(totalPages);\n  return pages;\n}\n\n/**\n * Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n *\n * @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      totalPages,\n      currentPage,\n      onPageChange,\n      ariaLabel = \"Pagination\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      getPageLabel = (page: number) => `Page ${page}`,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isFirstPage = currentPage <= 1;\n    const isLastPage = currentPage >= totalPages;\n\n    const handlePrevious = () => {\n      if (!isFirstPage) onPageChange?.(currentPage - 1);\n    };\n\n    const handleNext = () => {\n      if (!isLastPage) onPageChange?.(currentPage + 1);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center pb-4\",\n          variant === \"default\" && \"gap-3\",\n          variant === \"dots\" && \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronLeftIcon />}\n          aria-label={previousLabel}\n          disabled={isFirstPage}\n          onClick={handlePrevious}\n        />\n\n        {variant === \"default\" && (\n          <div className=\"flex items-center gap-3\">\n            {getVisiblePages(currentPage, totalPages).map((page) =>\n              typeof page === \"string\" ? (\n                <span\n                  key={page}\n                  className=\"flex size-4 items-center justify-center text-foreground-secondary text-xs\"\n                  aria-hidden=\"true\"\n                >\n                  &hellip;\n                </span>\n              ) : (\n                <button\n                  key={page}\n                  type=\"button\"\n                  aria-label={getPageLabel(page)}\n                  aria-current={page === currentPage ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(page)}\n                  className={cn(\n                    \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-neutral-400 text-foreground-inverse\"\n                      : \"bg-neutral-100 text-foreground-default hover:bg-neutral-200 active:bg-neutral-200\",\n                  )}\n                >\n                  {page}\n                </button>\n              ),\n            )}\n          </div>\n        )}\n\n        {variant === \"dots\" && (\n          <div className=\"flex items-center\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n              <button\n                key={page}\n                type=\"button\"\n                aria-label={getPageLabel(page)}\n                aria-current={page === currentPage ? \"page\" : undefined}\n                onClick={() => onPageChange?.(page)}\n                className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n              >\n                <span\n                  className={cn(\n                    \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"size-2 bg-neutral-400\"\n                      : \"size-1.5 bg-neutral-200 hover:bg-neutral-250 active:bg-neutral-250\",\n                  )}\n                />\n              </button>\n            ))}\n          </div>\n        )}\n\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronRightIcon />}\n          aria-label={nextLabel}\n          disabled={isLastPage}\n          onClick={handleNext}\n        />\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.mjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. */\nexport type PaginationVariant = \"default\" | \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Display style — numbered page buttons or minimal dots. @default \"default\" */\n  variant?: PaginationVariant;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Accessible label for the `<nav>` landmark. @default \"Pagination\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` */\n  getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: PageItem[] = [1];\n\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, \"ellipsis-end\");\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n  }\n\n  pages.push(totalPages);\n  return pages;\n}\n\n/**\n * Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n *\n * @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      totalPages,\n      currentPage,\n      onPageChange,\n      ariaLabel = \"Pagination\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      getPageLabel = (page: number) => `Page ${page}`,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isFirstPage = currentPage <= 1;\n    const isLastPage = currentPage >= totalPages;\n\n    const handlePrevious = () => {\n      if (!isFirstPage) onPageChange?.(currentPage - 1);\n    };\n\n    const handleNext = () => {\n      if (!isLastPage) onPageChange?.(currentPage + 1);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center pb-4\",\n          variant === \"default\" && \"gap-3\",\n          variant === \"dots\" && \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronLeftIcon />}\n          aria-label={previousLabel}\n          disabled={isFirstPage}\n          onClick={handlePrevious}\n        />\n\n        {variant === \"default\" && (\n          <div className=\"flex items-center gap-3\">\n            {getVisiblePages(currentPage, totalPages).map((page) =>\n              typeof page === \"string\" ? (\n                <span\n                  key={page}\n                  className=\"flex size-4 items-center justify-center text-content-secondary text-xs\"\n                  aria-hidden=\"true\"\n                >\n                  &hellip;\n                </span>\n              ) : (\n                <button\n                  key={page}\n                  type=\"button\"\n                  aria-label={getPageLabel(page)}\n                  aria-current={page === currentPage ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(page)}\n                  className={cn(\n                    \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-buttons-primary text-content-primary-inverted\"\n                      : \"bg-neutral-alphas-50 text-content-primary hover:bg-neutral-alphas-100 active:bg-neutral-alphas-100\",\n                  )}\n                >\n                  {page}\n                </button>\n              ),\n            )}\n          </div>\n        )}\n\n        {variant === \"dots\" && (\n          <div className=\"flex items-center\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n              <button\n                key={page}\n                type=\"button\"\n                aria-label={getPageLabel(page)}\n                aria-current={page === currentPage ? \"page\" : undefined}\n                onClick={() => onPageChange?.(page)}\n                className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n              >\n                <span\n                  className={cn(\n                    \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"size-2 bg-neutral-alphas-400\"\n                      : \"size-1.5 bg-neutral-alphas-200 hover:bg-neutral-alphas-300 active:bg-neutral-alphas-300\",\n                  )}\n                />\n              </button>\n            ))}\n          </div>\n        )}\n\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronRightIcon />}\n          aria-label={nextLabel}\n          disabled={isLastPage}\n          onClick={handleNext}\n        />\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":[],"mappings":"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"}

package/dist/components/PasswordField/PasswordField.mjs

@@ -18,7 +18,7 @@ const PasswordField = React.forwardRef(
         disabled,
         "aria-label": showPassword ? "Hide password" : "Show password",
         tabIndex: -1,
-        className: "flex size-5 shrink-0 cursor-default items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed",
+        className: "flex size-5 shrink-0 cursor-default items-center justify-center text-content-secondary transition-colors hover:text-content-primary focus:outline-none disabled:cursor-not-allowed",
         children: showPassword ? /* @__PURE__ */ jsx(EyeSlashIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
       }
     );

package/dist/components/PasswordField/PasswordField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.mjs","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { EyeSlashIcon } from \"../Icons/EyeSlashIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n  /** Size variant of the password field */\n  size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  ({ disabled, ...props }, ref) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword((prev) => !prev);\n    };\n\n    const rightIcon = (\n      <button\n        type=\"button\"\n        onClick={togglePasswordVisibility}\n        disabled={disabled}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n        className=\"flex size-5 shrink-0 cursor-default items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed\"\n      >\n        {showPassword ? <EyeSlashIcon /> : <EyeIcon />}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        rightIcon={rightIcon}\n        aria-label={!props.label ? \"Password field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAe,oBAAC,cAAA,CAAA,CAAa,wBAAM,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIhD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"PasswordField.mjs","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { EyeSlashIcon } from \"../Icons/EyeSlashIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n  /** Size variant of the password field */\n  size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  ({ disabled, ...props }, ref) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword((prev) => !prev);\n    };\n\n    const rightIcon = (\n      <button\n        type=\"button\"\n        onClick={togglePasswordVisibility}\n        disabled={disabled}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n        className=\"flex size-5 shrink-0 cursor-default items-center justify-center text-content-secondary transition-colors hover:text-content-primary focus:outline-none disabled:cursor-not-allowed\"\n      >\n        {showPassword ? <EyeSlashIcon /> : <EyeIcon />}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        rightIcon={rightIcon}\n        aria-label={!props.label ? \"Password field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAe,oBAAC,cAAA,CAAA,CAAa,wBAAM,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIhD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}

package/dist/components/Pill/Pill.mjs

@@ -5,16 +5,16 @@ import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
 const pillVariants = {
   variant: {
-    green: "bg-success-background text-success-default",
-    grey: "bg-neutral-100 text-foreground-secondary",
-    blue: "bg-info-background text-info-default",
-    gold: "bg-warning-background text-warning-default",
-    pinkLight: "bg-brand-secondary-muted text-foreground-default",
-    base: "bg-neutral-solid text-foreground-inverse",
-    brand: "bg-brand-accent-default text-foreground-onaccent",
-    brandLight: "bg-brand-accent-muted text-foreground-onaccent",
-    beta: "bg-brand-secondary-default text-foreground-onaccent",
-    error: "bg-error-default text-error-background"
+    green: "bg-success-surface text-success-content",
+    grey: "bg-neutral-alphas-50 text-content-secondary",
+    blue: "bg-info-surface text-info-content",
+    gold: "bg-warning-surface text-warning-content",
+    pinkLight: "bg-brand-secondary-muted text-content-primary",
+    base: "bg-buttons-primary text-content-primary-inverted",
+    brand: "bg-brand-primary-default text-content-on-brand",
+    brandLight: "bg-brand-primary-muted text-content-on-brand",
+    beta: "bg-brand-secondary-default text-content-on-brand",
+    error: "bg-error-content text-error-surface"
   }
 };
 const Pill = React.forwardRef(

package/dist/components/Pill/Pill.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.mjs","sources":["../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n  variant: {\n    green: \"bg-success-background text-success-default\",\n    grey: \"bg-neutral-100 text-foreground-secondary\",\n    blue: \"bg-info-background text-info-default\",\n    gold: \"bg-warning-background text-warning-default\",\n    pinkLight: \"bg-brand-secondary-muted text-foreground-default\",\n    base: \"bg-neutral-solid text-foreground-inverse\",\n    brand: \"bg-brand-accent-default text-foreground-onaccent\",\n    brandLight: \"bg-brand-accent-muted text-foreground-onaccent\",\n    beta: \"bg-brand-secondary-default text-foreground-onaccent\",\n    error: \"bg-error-default text-error-background\",\n  },\n} as const;\n\n/** Colour variant of the pill. */\nexport type PillVariant =\n  | \"green\"\n  | \"grey\"\n  | \"blue\"\n  | \"gold\"\n  | \"pinkLight\"\n  | \"base\"\n  | \"brand\"\n  | \"brandLight\"\n  | \"beta\"\n  | \"error\";\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the pill. @default \"green\" */\n  variant?: PillVariant;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small rounded label for categorisation, status, or tagging.\n *\n * @example\n * ```tsx\n * <Pill variant=\"brand\">New</Pill>\n * ```\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n  (\n    {\n      className,\n      variant = \"green\",\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"pill\"\n        className={cn(\n          // Base styles\n          \"inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1\",\n          // Typography\n          \"typography-semibold-body-sm\",\n          // Variant styles\n          pillVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nPill.displayName = \"Pill\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAkCO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UACH;AAAA,UAED,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACC,oBAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Pill.mjs","sources":["../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n  variant: {\n    green: \"bg-success-surface text-success-content\",\n    grey: \"bg-neutral-alphas-50 text-content-secondary\",\n    blue: \"bg-info-surface text-info-content\",\n    gold: \"bg-warning-surface text-warning-content\",\n    pinkLight: \"bg-brand-secondary-muted text-content-primary\",\n    base: \"bg-buttons-primary text-content-primary-inverted\",\n    brand: \"bg-brand-primary-default text-content-on-brand\",\n    brandLight: \"bg-brand-primary-muted text-content-on-brand\",\n    beta: \"bg-brand-secondary-default text-content-on-brand\",\n    error: \"bg-error-content text-error-surface\",\n  },\n} as const;\n\n/** Colour variant of the pill. */\nexport type PillVariant =\n  | \"green\"\n  | \"grey\"\n  | \"blue\"\n  | \"gold\"\n  | \"pinkLight\"\n  | \"base\"\n  | \"brand\"\n  | \"brandLight\"\n  | \"beta\"\n  | \"error\";\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the pill. @default \"green\" */\n  variant?: PillVariant;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small rounded label for categorisation, status, or tagging.\n *\n * @example\n * ```tsx\n * <Pill variant=\"brand\">New</Pill>\n * ```\n */\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n  (\n    {\n      className,\n      variant = \"green\",\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"pill\"\n        className={cn(\n          // Base styles\n          \"inline-flex min-w-0 items-center justify-center gap-2 rounded-full px-3 py-1\",\n          // Typography\n          \"typography-semibold-body-sm\",\n          // Variant styles\n          pillVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex [&>svg]:size-3\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nPill.displayName = \"Pill\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAkCO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UACH;AAAA,UAED,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACC,oBAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/ProgressBar/ProgressBar.mjs

@@ -11,20 +11,20 @@ const GAP = {
   small: "gap-1"
 };
 function getDefaultBarColor(value) {
-  if (value >= 100) return "bg-success-default";
-  if (value >= 40) return "bg-warning-default";
-  return "bg-error-default";
+  if (value >= 100) return "bg-success-content";
+  if (value >= 40) return "bg-warning-content";
+  return "bg-error-content";
 }
 function getDefaultTextColor(value) {
-  if (value >= 100) return "text-success-default";
-  if (value >= 40) return "text-warning-default";
-  return "text-error-default";
+  if (value >= 100) return "text-success-content";
+  if (value >= 40) return "text-warning-content";
+  return "text-error-content";
 }
 function resolveColors(variant, value) {
   if (variant === "neutral")
-    return { barColor: "bg-foreground-tertiary", textColor: "text-foreground-tertiary" };
+    return { barColor: "bg-content-tertiary", textColor: "text-content-tertiary" };
   if (variant === "generic")
-    return { barColor: "bg-brand-accent-default", textColor: "text-brand-accent-default" };
+    return { barColor: "bg-brand-primary-default", textColor: "text-brand-primary-default" };
   return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };
 }
 const ProgressBar = React.forwardRef(
@@ -50,7 +50,7 @@ const ProgressBar = React.forwardRef(
     const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col", GAP[size], className), ...props, children: [
       showHeader && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-end justify-between", children: [
-        title != null && /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-sm text-foreground-default", children: title }),
+        title != null && /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-sm text-content-primary", children: title }),
         showCompletion && /* @__PURE__ */ jsxs(
           "span",
           {
@@ -64,7 +64,7 @@ const ProgressBar = React.forwardRef(
             ]
           }
         ),
-        stepsLabel != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-foreground-default", children: stepsLabel })
+        stepsLabel != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-content-primary", children: stepsLabel })
       ] }),
       /* @__PURE__ */ jsx(
         "div",
@@ -75,7 +75,7 @@ const ProgressBar = React.forwardRef(
           "aria-valuemin": 0,
           "aria-valuemax": 100,
           "aria-valuetext": ariaValueText,
-          className: cn("relative w-full rounded-full bg-neutral-100", TRACK_HEIGHT[size]),
+          className: cn("relative w-full rounded-full bg-neutral-alphas-50", TRACK_HEIGHT[size]),
           children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -91,9 +91,9 @@ const ProgressBar = React.forwardRef(
       showFooter && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
           leftIcon != null && /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center", "aria-hidden": "true", children: leftIcon }),
-          helperLeft != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-foreground-default", children: helperLeft })
+          helperLeft != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-content-primary", children: helperLeft })
         ] }),
-        helperRight != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-foreground-default", children: helperRight })
+        helperRight != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-content-primary", children: helperRight })
       ] })
     ] });
   }