@fanvue/ui 1.13.1 → 1.14.1

package/dist/cjs/components/Select/Select.cjs

@@ -45,9 +45,9 @@ const TRIGGER_GAP = {
   "32": "gap-2"
 };
 const TRIGGER_TYPOGRAPHY = {
-  "48": "typography-body-1-regular",
-  "40": "typography-body-1-regular",
-  "32": "typography-body-2-regular"
+  "48": "typography-regular-body-lg",
+  "40": "typography-regular-body-lg",
+  "32": "typography-regular-body-md"
 };
 const Select = React__namespace.forwardRef(
   ({
@@ -82,7 +82,7 @@ const Select = React__namespace.forwardRef(
             "label",
             {
               htmlFor: triggerId,
-              className: "typography-caption-semibold px-1 pt-1 pb-2 text-body-100",
+              className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default",
               children: label
             }
           ),
@@ -102,7 +102,7 @@ const Select = React__namespace.forwardRef(
                   TRIGGER_PADDING_X[size],
                   TRIGGER_GAP[size],
                   TRIGGER_TYPOGRAPHY[size],
-                  error ? "border-error-500" : "border-transparent",
+                  error ? "border-error-default" : "border-transparent",
                   !disabled && !error && "hover:border-neutral-400 data-[state=open]:border-neutral-400",
                   disabled && "cursor-not-allowed opacity-50"
                 ),
@@ -111,12 +111,12 @@ const Select = React__namespace.forwardRef(
                     leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
-                        className: "flex size-5 shrink-0 items-center justify-center text-body-200",
+                        className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary",
                         "data-testid": "left-icon",
                         children: leftIcon
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-body-100 [&>[data-placeholder]]:text-body-200 [&>[data-placeholder]]:opacity-40", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-foreground-default [&>[data-placeholder]]:text-foreground-secondary [&>[data-placeholder]]:opacity-40", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon.ChevronDownIcon, {}) })
                 ]
@@ -129,8 +129,8 @@ const Select = React__namespace.forwardRef(
             {
               id: helperTextId,
               className: cn.cn(
-                "typography-caption-regular px-2 pt-1 pb-0.5",
-                error ? "text-error-500" : "text-body-200"
+                "typography-regular-body-sm px-2 pt-1 pb-0.5",
+                error ? "text-error-default" : "text-foreground-secondary"
               ),
               children: bottomText
             }
@@ -149,7 +149,7 @@ const SelectContent = React__namespace.forwardRef(({ className, children, positi
     sideOffset,
     style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
     className: cn.cn(
-      "relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+      "relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -166,14 +166,14 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn.cn(
-      "typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none",
+      "typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-foreground-default outline-none",
       "focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: "size-4 text-body-100" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: "size-4 text-foreground-default" }) })
     ]
   }
 ));
@@ -184,7 +184,7 @@ const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref) =
   SelectPrimitive__namespace.Label,
   {
     ref,
-    className: cn.cn("typography-caption-semibold px-3 py-1.5 text-body-200", className),
+    className: cn.cn("typography-semibold-body-sm px-3 py-1.5 text-foreground-secondary", className),
     ...props
   }
 ));

package/dist/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-1-regular\",\n  \"40\": \"typography-body-1-regular\",\n  \"32\": \"typography-body-2-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-500\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-body-200\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-body-100 [&>[data-placeholder]]:text-body-200 [&>[data-placeholder]]:opacity-40\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-caption-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-500\" : \"text-body-200\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-body-100\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-caption-semibold px-3 py-1.5 text-body-200\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","CheckIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC5D,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAED,MAAM,iBAA6C;AAAA,EACjD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,oBAAgD;AAAA,EACpD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,cAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AA6CO,MAAM,SAASA,iBAAM;AAAA,EAI1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,YAAY,MAAM;AACxB,UAAM,eAAe,GAAG,SAAS;AACjC,UAAM,aAAa,SAAS,eAAe,eAAe;AAE1D,WACEC,+BAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,MAAM,OAAO,YAC5C,UAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA,GAAG,iBAAiB,aAAa,UAAU,SAAS;AAAA,QAC/D,iBAAe,WAAW,KAAK;AAAA,QAC/B,cAAY,QAAQ,KAAK;AAAA,QAExB,UAAA;AAAA,UAAA,SACCF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,0CAIJG,2BAAgB,MAAhB,EAAqB,UAAqB,GAAG,OAC5C,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAACE,2BAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,IAAI;AAAA,gBACJ,cAAY;AAAA,gBACZ,mBAAiB;AAAA,gBACjB,oBAAkB,aAAa,eAAe;AAAA,gBAC9C,gBAAc,SAAS;AAAA,gBACvB,WAAWD,GAAAA;AAAAA,kBACT;AAAA,kBACA,eAAe,IAAI;AAAA,kBACnB,kBAAkB,IAAI;AAAA,kBACtB,YAAY,IAAI;AAAA,kBAChB,mBAAmB,IAAI;AAAA,kBACvB,QAAQ,qBAAqB;AAAA,kBAC7B,CAAC,YACC,CAAC,SACD;AAAA,kBACF,YAAY;AAAA,gBAAA;AAAA,gBAGd,UAAA;AAAA,kBAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,oBAAA,YACCD,2BAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,eAAY;AAAA,wBAEX,UAAA;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAGLA,2BAAAA,IAAC,UAAK,WAAU,0HACd,yCAACG,2BAAgB,OAAhB,EAAsB,YAAA,CAA0B,EAAA,CACnD;AAAA,kBAAA,GACF;AAAA,kBAEAH,+BAACG,2BAAgB,MAAhB,EAAqB,SAAO,MAC3B,UAAAH,2BAAAA,IAACI,mCAAgB,EAAA,CACnB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD;AAAA,UAAA,GACH;AAAA,UAEC,cACCJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWE,GAAAA;AAAAA,gBACT;AAAA,gBACA,QAAQ,mBAAmB;AAAA,cAAA;AAAA,cAG5B,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AASd,MAAM,gBAAgBH,iBAAM,WAGjC,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,aAAa,GAAG,OAAO,GAAG,MAAA,GAAS,QAChFC,2BAAAA,IAACG,2BAAgB,QAAhB,EACC,UAAAH,2BAAAA;AAAAA,EAACG,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,IAC3D,WAAWD,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,yCAACC,2BAAgB,UAAhB,EAAyB,WAAU,4EACjC,SAAA,CACH;AAAA,EAAA;AACF,GACF,CACD;AAED,cAAc,cAAc;AAQrB,MAAM,aAAaJ,iBAAM,WAG9B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCE,2BAAAA;AAAAA,EAACE,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWD,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAF,2BAAAA,IAACG,2BAAgB,UAAhB,EAA0B,SAAA,CAAS;AAAA,MACpCH,2BAAAA,IAACG,2BAAgB,eAAhB,EAA8B,WAAU,4DACvC,UAAAH,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,uBAAA,CAAuB,EAAA,CAC9C;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AAED,WAAW,cAAc;AAQlB,MAAM,cAAcF,2BAAgB;AAC3C,YAAY,cAAc;AAQnB,MAAM,cAAcJ,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACG,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWD,GAAAA,GAAG,yDAAyD,SAAS;AAAA,IAC/E,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;AAMnB,MAAM,kBAAkBH,iBAAM,WAGnC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACG,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWD,GAAAA,GAAG,kCAAkC,SAAS;AAAA,IACxD,GAAG;AAAA,EAAA;AACN,CACD;AAED,gBAAgB,cAAc;;;;;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-default\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-foreground-default [&>[data-placeholder]]:text-foreground-secondary [&>[data-placeholder]]:opacity-40\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n                error ? \"text-error-default\" : \"text-foreground-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-foreground-default outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-foreground-default\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-semibold-body-sm px-3 py-1.5 text-foreground-secondary\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","CheckIcon"],"mappings":"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"}

package/dist/cjs/components/Slider/Slider.cjs

@@ -61,7 +61,7 @@ const Slider = React__namespace.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-3 w-full overflow-hidden rounded-full border border-neutral-100 bg-neutral-100", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full rounded-full bg-brand-green-500" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-3 w-full overflow-hidden rounded-full border border-neutral-100 bg-neutral-100", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full rounded-full bg-brand-accent-default" }) }),
           Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
             SliderThumb.SliderThumb,
             {

package/dist/cjs/components/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SliderLayout } from \"./SliderLayout\";\nimport { SliderThumb } from \"./SliderThumb\";\n\n/** Position of the slider label relative to the track. */\nexport type SliderLabelPosition = \"top\" | \"left\";\n\nexport interface SliderProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n    \"asChild\" | \"children\"\n  > {\n  /** Label text displayed alongside the slider. */\n  label?: string;\n  /** Position of the label relative to the slider track. @default \"top\" */\n  labelPosition?: SliderLabelPosition;\n  /** Text shown at the minimum end of the track. */\n  minLabel?: string;\n  /** Text shown at the maximum end of the track. */\n  maxLabel?: string;\n  /** Whether to show a tooltip with the current value above the thumb. @default false */\n  showTooltip?: boolean;\n  /** Custom formatter for the tooltip value (e.g. to add units or format numbers). */\n  formatTooltip?: (value: number) => string;\n}\n\n/**\n * A range input for selecting one or more numeric values along a track.\n * Supports single and multi-thumb modes, optional labels, and a value tooltip.\n *\n * Built on Radix UI `Slider`.\n *\n * @example\n * ```tsx\n * <Slider\n *   label=\"Volume\"\n *   min={0}\n *   max={100}\n *   defaultValue={[50]}\n *   showTooltip\n * />\n * ```\n */\nexport const Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(\n  (\n    {\n      className,\n      label,\n      labelPosition = \"top\",\n      minLabel,\n      maxLabel,\n      showTooltip = false,\n      formatTooltip,\n      disabled,\n      value,\n      defaultValue,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelId = React.useId();\n    const thumbCount = value?.length ?? defaultValue?.length ?? 1;\n    const resolvedLabelledBy = ariaLabelledBy ?? (label ? labelId : undefined);\n    const resolvedAriaLabel = !resolvedLabelledBy ? ariaLabel : undefined;\n\n    const sliderTrack = (\n      <SliderPrimitive.Root\n        ref={ref}\n        disabled={disabled}\n        value={value}\n        defaultValue={defaultValue}\n        aria-label={resolvedAriaLabel}\n        aria-labelledby={resolvedLabelledBy}\n        className={cn(\n          \"group/slider relative flex w-full touch-none select-none items-center\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-3 w-full overflow-hidden rounded-full border border-neutral-100 bg-neutral-100\">\n          <SliderPrimitive.Range className=\"absolute h-full rounded-full bg-brand-green-500\" />\n        </SliderPrimitive.Track>\n\n        {Array.from({ length: thumbCount }, (_, i) => (\n          <SliderThumb\n            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are fixed-count and never reorder\n            key={i}\n            showTooltip={showTooltip}\n            formatTooltip={formatTooltip}\n            index={i}\n            aria-label={resolvedAriaLabel}\n            aria-labelledby={resolvedLabelledBy}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    );\n\n    const hasLayout = Boolean(label || minLabel || maxLabel);\n\n    if (!hasLayout) return sliderTrack;\n\n    return (\n      <SliderLayout\n        label={label}\n        labelId={labelId}\n        labelPosition={labelPosition}\n        minLabel={minLabel}\n        maxLabel={maxLabel}\n      >\n        {sliderTrack}\n      </SliderLayout>\n    );\n  },\n);\n\nSlider.displayName = \"Slider\";\n"],"names":["React","jsxs","SliderPrimitive","cn","jsx","SliderThumb","SliderLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,SAASA,iBAAM;AAAA,EAI1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAUA,iBAAM,MAAA;AACtB,UAAM,aAAa,OAAO,UAAU,cAAc,UAAU;AAC5D,UAAM,qBAAqB,mBAAmB,QAAQ,UAAU;AAChE,UAAM,oBAAoB,CAAC,qBAAqB,YAAY;AAE5D,UAAM,cACJC,2BAAAA;AAAAA,MAACC,2BAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAACF,2BAAgB,OAAhB,EAAsB,WAAU,6FAC/B,UAAAE,+BAACF,2BAAgB,OAAhB,EAAsB,WAAU,kDAAA,CAAkD,EAAA,CACrF;AAAA,UAEC,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MACtCE,2BAAAA;AAAAA,YAACC,YAAAA;AAAAA,YAAA;AAAA,cAGC;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,cAAY;AAAA,cACZ,mBAAiB;AAAA,YAAA;AAAA,YALZ;AAAA,UAAA,CAOR;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIL,UAAM,YAAY,QAAQ,SAAS,YAAY,QAAQ;AAEvD,QAAI,CAAC,UAAW,QAAO;AAEvB,WACED,2BAAAA;AAAAA,MAACE,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,OAAO,cAAc;;"}
+{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SliderLayout } from \"./SliderLayout\";\nimport { SliderThumb } from \"./SliderThumb\";\n\n/** Position of the slider label relative to the track. */\nexport type SliderLabelPosition = \"top\" | \"left\";\n\nexport interface SliderProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n    \"asChild\" | \"children\"\n  > {\n  /** Label text displayed alongside the slider. */\n  label?: string;\n  /** Position of the label relative to the slider track. @default \"top\" */\n  labelPosition?: SliderLabelPosition;\n  /** Text shown at the minimum end of the track. */\n  minLabel?: string;\n  /** Text shown at the maximum end of the track. */\n  maxLabel?: string;\n  /** Whether to show a tooltip with the current value above the thumb. @default false */\n  showTooltip?: boolean;\n  /** Custom formatter for the tooltip value (e.g. to add units or format numbers). */\n  formatTooltip?: (value: number) => string;\n}\n\n/**\n * A range input for selecting one or more numeric values along a track.\n * Supports single and multi-thumb modes, optional labels, and a value tooltip.\n *\n * Built on Radix UI `Slider`.\n *\n * @example\n * ```tsx\n * <Slider\n *   label=\"Volume\"\n *   min={0}\n *   max={100}\n *   defaultValue={[50]}\n *   showTooltip\n * />\n * ```\n */\nexport const Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(\n  (\n    {\n      className,\n      label,\n      labelPosition = \"top\",\n      minLabel,\n      maxLabel,\n      showTooltip = false,\n      formatTooltip,\n      disabled,\n      value,\n      defaultValue,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelId = React.useId();\n    const thumbCount = value?.length ?? defaultValue?.length ?? 1;\n    const resolvedLabelledBy = ariaLabelledBy ?? (label ? labelId : undefined);\n    const resolvedAriaLabel = !resolvedLabelledBy ? ariaLabel : undefined;\n\n    const sliderTrack = (\n      <SliderPrimitive.Root\n        ref={ref}\n        disabled={disabled}\n        value={value}\n        defaultValue={defaultValue}\n        aria-label={resolvedAriaLabel}\n        aria-labelledby={resolvedLabelledBy}\n        className={cn(\n          \"group/slider relative flex w-full touch-none select-none items-center\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-3 w-full overflow-hidden rounded-full border border-neutral-100 bg-neutral-100\">\n          <SliderPrimitive.Range className=\"absolute h-full rounded-full bg-brand-accent-default\" />\n        </SliderPrimitive.Track>\n\n        {Array.from({ length: thumbCount }, (_, i) => (\n          <SliderThumb\n            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are fixed-count and never reorder\n            key={i}\n            showTooltip={showTooltip}\n            formatTooltip={formatTooltip}\n            index={i}\n            aria-label={resolvedAriaLabel}\n            aria-labelledby={resolvedLabelledBy}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    );\n\n    const hasLayout = Boolean(label || minLabel || maxLabel);\n\n    if (!hasLayout) return sliderTrack;\n\n    return (\n      <SliderLayout\n        label={label}\n        labelId={labelId}\n        labelPosition={labelPosition}\n        minLabel={minLabel}\n        maxLabel={maxLabel}\n      >\n        {sliderTrack}\n      </SliderLayout>\n    );\n  },\n);\n\nSlider.displayName = \"Slider\";\n"],"names":["React","jsxs","SliderPrimitive","cn","jsx","SliderThumb","SliderLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,SAASA,iBAAM;AAAA,EAI1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAUA,iBAAM,MAAA;AACtB,UAAM,aAAa,OAAO,UAAU,cAAc,UAAU;AAC5D,UAAM,qBAAqB,mBAAmB,QAAQ,UAAU;AAChE,UAAM,oBAAoB,CAAC,qBAAqB,YAAY;AAE5D,UAAM,cACJC,2BAAAA;AAAAA,MAACC,2BAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAACF,2BAAgB,OAAhB,EAAsB,WAAU,6FAC/B,UAAAE,+BAACF,2BAAgB,OAAhB,EAAsB,WAAU,uDAAA,CAAuD,EAAA,CAC1F;AAAA,UAEC,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MACtCE,2BAAAA;AAAAA,YAACC,YAAAA;AAAAA,YAAA;AAAA,cAGC;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,cAAY;AAAA,cACZ,mBAAiB;AAAA,YAAA;AAAA,YALZ;AAAA,UAAA,CAOR;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIL,UAAM,YAAY,QAAQ,SAAS,YAAY,QAAQ;AAEvD,QAAI,CAAC,UAAW,QAAO;AAEvB,WACED,2BAAAA;AAAAA,MAACE,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,OAAO,cAAc;;"}

package/dist/cjs/components/Slider/SliderLayout.cjs

@@ -12,15 +12,22 @@ function SliderLayout({
 }) {
   if (labelPosition === "left") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-body-1-semibold shrink-0 text-body-100", children: label }),
-      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-2-regular shrink-0 text-body-200", children: minLabel }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: labelId,
+          className: "typography-semibold-body-lg shrink-0 text-foreground-default",
+          children: label
+        }
+      ),
+      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-secondary", children: minLabel }),
       children,
-      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-2-regular shrink-0 text-body-200", children: maxLabel })
+      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-secondary", children: maxLabel })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-3", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-body-1-semibold text-body-100", children: label }),
-    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between text-body-200 text-sm leading-[18px]", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg text-foreground-default", children: label }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between text-foreground-secondary text-sm leading-[18px]", children: [
       minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: minLabel }),
       maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: maxLabel })
     ] }),

package/dist/cjs/components/Slider/SliderLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderLayout.cjs","sources":["../../../../src/components/Slider/SliderLayout.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport type { SliderLabelPosition } from \"./Slider\";\n\ninterface SliderLayoutProps {\n  label?: string;\n  labelId: string;\n  labelPosition: SliderLabelPosition;\n  minLabel?: string;\n  maxLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function SliderLayout({\n  label,\n  labelId,\n  labelPosition,\n  minLabel,\n  maxLabel,\n  children,\n}: SliderLayoutProps) {\n  if (labelPosition === \"left\") {\n    return (\n      <div className=\"flex items-center gap-3\">\n        {label && (\n          <span id={labelId} className=\"typography-body-1-semibold shrink-0 text-body-100\">\n            {label}\n          </span>\n        )}\n        {minLabel && (\n          <span className=\"typography-body-2-regular shrink-0 text-body-200\">{minLabel}</span>\n        )}\n        {children}\n        {maxLabel && (\n          <span className=\"typography-body-2-regular shrink-0 text-body-200\">{maxLabel}</span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-3\">\n      {label && (\n        <span id={labelId} className=\"typography-body-1-semibold text-body-100\">\n          {label}\n        </span>\n      )}\n      {(minLabel || maxLabel) && (\n        <div className=\"flex w-full items-start justify-between text-body-200 text-sm leading-[18px]\">\n          {minLabel && <span>{minLabel}</span>}\n          {maxLabel && <span className=\"ml-auto\">{maxLabel}</span>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx"],"mappings":";;;;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,kBAAkB,QAAQ;AAC5B,WACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,qDAC1B,UAAA,OACH;AAAA,MAED,YACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,UAAS;AAAA,MAE9E;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,SAAA,CAAS;AAAA,IAAA,GAEjF;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,4CAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,gFACZ,UAAA;AAAA,MAAA,YAAYC,2BAAAA,IAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAC5B,YAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,IAAA,GACnD;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;;"}
+{"version":3,"file":"SliderLayout.cjs","sources":["../../../../src/components/Slider/SliderLayout.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport type { SliderLabelPosition } from \"./Slider\";\n\ninterface SliderLayoutProps {\n  label?: string;\n  labelId: string;\n  labelPosition: SliderLabelPosition;\n  minLabel?: string;\n  maxLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function SliderLayout({\n  label,\n  labelId,\n  labelPosition,\n  minLabel,\n  maxLabel,\n  children,\n}: SliderLayoutProps) {\n  if (labelPosition === \"left\") {\n    return (\n      <div className=\"flex items-center gap-3\">\n        {label && (\n          <span\n            id={labelId}\n            className=\"typography-semibold-body-lg shrink-0 text-foreground-default\"\n          >\n            {label}\n          </span>\n        )}\n        {minLabel && (\n          <span className=\"typography-regular-body-md shrink-0 text-foreground-secondary\">\n            {minLabel}\n          </span>\n        )}\n        {children}\n        {maxLabel && (\n          <span className=\"typography-regular-body-md shrink-0 text-foreground-secondary\">\n            {maxLabel}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-3\">\n      {label && (\n        <span id={labelId} className=\"typography-semibold-body-lg text-foreground-default\">\n          {label}\n        </span>\n      )}\n      {(minLabel || maxLabel) && (\n        <div className=\"flex w-full items-start justify-between text-foreground-secondary text-sm leading-[18px]\">\n          {minLabel && <span>{minLabel}</span>}\n          {maxLabel && <span className=\"ml-auto\">{maxLabel}</span>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx"],"mappings":";;;;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,kBAAkB,QAAQ;AAC5B,WACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,SACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UAET,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iEACb,UAAA,UACH;AAAA,MAED;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iEACb,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,uDAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,4FACZ,UAAA;AAAA,MAAA,YAAYC,2BAAAA,IAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAC5B,YAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,IAAA,GACnD;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;;"}

package/dist/cjs/components/Slider/SliderThumb.cjs

@@ -56,21 +56,21 @@ function SliderThumb({
         }
       },
       className: cn.cn(
-        "flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-background-inverse-solid shadow-sm",
+        "flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-surface-page shadow-sm",
         "transition-shadow duration-150",
-        "hover:ring-2 hover:ring-brand-green-500",
-        "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-green-500",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid",
+        "hover:ring-2 hover:ring-brand-accent-default",
+        "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-accent-default",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
         "data-disabled:cursor-not-allowed"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block size-3 rounded-full bg-brand-green-500 shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block size-3 rounded-full bg-brand-accent-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]" }),
         showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             role: "tooltip",
             "data-slider-tooltip": true,
-            className: "typography-caption-semibold pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-background-solid px-2 py-1 text-background-inverse-solid shadow-sm"
+            className: "typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-surface-pageinverse px-2 py-1 text-foreground-inverse shadow-sm"
           }
         )
       ]

package/dist/cjs/components/Slider/SliderThumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.cjs","sources":["../../../../src/components/Slider/SliderThumb.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface SliderThumbProps {\n  showTooltip: boolean;\n  formatTooltip?: (value: number) => string;\n  index: number;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport function SliderThumb({\n  showTooltip,\n  formatTooltip,\n  index,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}: SliderThumbProps) {\n  const thumbRef = React.useCallback(\n    (el: HTMLSpanElement | null) => {\n      if (!el || !showTooltip) return;\n      syncTooltipText(el, formatTooltip);\n    },\n    [showTooltip, formatTooltip],\n  );\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      data-index={index}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      onPointerDown={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onPointerMove={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onKeyDown={(e) => {\n        if (showTooltip) {\n          requestAnimationFrame(() => syncTooltipText(e.currentTarget, formatTooltip));\n        }\n      }}\n      className={cn(\n        \"flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-background-inverse-solid shadow-sm\",\n        \"transition-shadow duration-150\",\n        \"hover:ring-2 hover:ring-brand-green-500\",\n        \"not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-green-500\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n        \"data-disabled:cursor-not-allowed\",\n      )}\n    >\n      <span className=\"block size-3 rounded-full bg-brand-green-500 shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]\" />\n\n      {showTooltip && (\n        <span\n          role=\"tooltip\"\n          data-slider-tooltip\n          className=\"typography-caption-semibold pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-background-solid px-2 py-1 text-background-inverse-solid shadow-sm\"\n        />\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction syncTooltipText(thumb: HTMLElement, formatTooltip?: (value: number) => string) {\n  const raw = thumb.getAttribute(\"aria-valuenow\");\n  const tooltip = thumb.querySelector<HTMLSpanElement>(\"[data-slider-tooltip]\");\n  if (raw == null || !tooltip) return;\n  const num = Number(raw);\n  tooltip.textContent = formatTooltip ? formatTooltip(num) : String(num);\n}\n"],"names":["React","jsxs","SliderPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AACrB,GAAqB;AACnB,QAAM,WAAWA,iBAAM;AAAA,IACrB,CAAC,OAA+B;AAC9B,UAAI,CAAC,MAAM,CAAC,YAAa;AACzB,sBAAgB,IAAI,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAAA;AAG7B,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,aAAa;AACf,gCAAsB,MAAM,gBAAgB,EAAE,eAAe,aAAa,CAAC;AAAA,QAC7E;AAAA,MACF;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,8FAAA,CAA8F;AAAA,QAE7G,eACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,uBAAmB;AAAA,YACnB,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,gBAAgB,OAAoB,eAA2C;AACtF,QAAM,MAAM,MAAM,aAAa,eAAe;AAC9C,QAAM,UAAU,MAAM,cAA+B,uBAAuB;AAC5E,MAAI,OAAO,QAAQ,CAAC,QAAS;AAC7B,QAAM,MAAM,OAAO,GAAG;AACtB,UAAQ,cAAc,gBAAgB,cAAc,GAAG,IAAI,OAAO,GAAG;AACvE;;"}
+{"version":3,"file":"SliderThumb.cjs","sources":["../../../../src/components/Slider/SliderThumb.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface SliderThumbProps {\n  showTooltip: boolean;\n  formatTooltip?: (value: number) => string;\n  index: number;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport function SliderThumb({\n  showTooltip,\n  formatTooltip,\n  index,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}: SliderThumbProps) {\n  const thumbRef = React.useCallback(\n    (el: HTMLSpanElement | null) => {\n      if (!el || !showTooltip) return;\n      syncTooltipText(el, formatTooltip);\n    },\n    [showTooltip, formatTooltip],\n  );\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      data-index={index}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      onPointerDown={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onPointerMove={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onKeyDown={(e) => {\n        if (showTooltip) {\n          requestAnimationFrame(() => syncTooltipText(e.currentTarget, formatTooltip));\n        }\n      }}\n      className={cn(\n        \"flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-surface-page shadow-sm\",\n        \"transition-shadow duration-150\",\n        \"hover:ring-2 hover:ring-brand-accent-default\",\n        \"not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-accent-default\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n        \"data-disabled:cursor-not-allowed\",\n      )}\n    >\n      <span className=\"block size-3 rounded-full bg-brand-accent-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]\" />\n\n      {showTooltip && (\n        <span\n          role=\"tooltip\"\n          data-slider-tooltip\n          className=\"typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-surface-pageinverse px-2 py-1 text-foreground-inverse shadow-sm\"\n        />\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction syncTooltipText(thumb: HTMLElement, formatTooltip?: (value: number) => string) {\n  const raw = thumb.getAttribute(\"aria-valuenow\");\n  const tooltip = thumb.querySelector<HTMLSpanElement>(\"[data-slider-tooltip]\");\n  if (raw == null || !tooltip) return;\n  const num = Number(raw);\n  tooltip.textContent = formatTooltip ? formatTooltip(num) : String(num);\n}\n"],"names":["React","jsxs","SliderPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AACrB,GAAqB;AACnB,QAAM,WAAWA,iBAAM;AAAA,IACrB,CAAC,OAA+B;AAC9B,UAAI,CAAC,MAAM,CAAC,YAAa;AACzB,sBAAgB,IAAI,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAAA;AAG7B,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,aAAa;AACf,gCAAsB,MAAM,gBAAgB,EAAE,eAAe,aAAa,CAAC;AAAA,QAC7E;AAAA,MACF;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,mGAAA,CAAmG;AAAA,QAElH,eACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,uBAAmB;AAAA,YACnB,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,gBAAgB,OAAoB,eAA2C;AACtF,QAAM,MAAM,MAAM,aAAa,eAAe;AAC9C,QAAM,UAAU,MAAM,cAA+B,uBAAuB;AAC5E,MAAI,OAAO,QAAQ,CAAC,QAAS;AAC7B,QAAM,MAAM,OAAO,GAAG;AACtB,UAAQ,cAAc,gBAAgB,cAAc,GAAG,IAAI,OAAO,GAAG;AACvE;;"}

package/dist/cjs/components/Snackbar/Snackbar.cjs

@@ -65,8 +65,8 @@ function VipEarnContent({
     icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-1-semibold text-body-100 leading-6", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-2-regular text-body-200", children: description })
+        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-lg text-foreground-default leading-6", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-foreground-secondary", children: description })
       ] }),
       showActions && primary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: primary })
     ] })
@@ -90,9 +90,9 @@ function WelcomeContent({
     variant: "secondary"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-body-100", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-heading-4 text-body-100", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-2-regular text-body-200", children: description })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-foreground-default", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-bold-heading-xs text-foreground-default", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-foreground-secondary", children: description })
     ] }),
     showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1", children: [
       secondary,
@@ -119,7 +119,7 @@ function DefaultContent({
     size: "40"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-1-medium flex min-w-0 flex-1 items-center self-stretch text-body-100", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-foreground-default", children }),
     showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-start gap-2", children: [
       primary,
       secondary
@@ -156,10 +156,10 @@ const Snackbar = React__namespace.forwardRef(
           "data-testid": "snackbar",
           className: cn.cn(
             "flex gap-4 rounded-2xl",
-            (variant === "default" || variant === "vipEarn") && "border border-neutral-50 bg-background-200 p-4 backdrop-blur-md",
+            (variant === "default" || variant === "vipEarn") && "border border-neutral-50 bg-surface-container p-4 backdrop-blur-md",
             variant === "default" && "flex-wrap items-start",
             variant === "vipEarn" && "items-start",
-            variant === "welcome" && "relative flex-col items-center bg-background-inverse-solid py-6",
+            variant === "welcome" && "relative flex-col items-center bg-surface-page py-6",
             className
           ),
           ...props,

package/dist/cjs/components/Snackbar/Snackbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/** Layout variant of the snackbar. */\nexport type SnackbarVariant = \"default\" | \"vipEarn\" | \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Layout variant of the snackbar. @default \"default\" */\n  variant?: SnackbarVariant;\n  /** Icon element displayed at the leading edge (used by the `vipEarn` variant). */\n  icon?: React.ReactNode;\n  /** Title content. */\n  title?: React.ReactNode;\n  /** Descriptive body text. */\n  description?: React.ReactNode;\n  /** Whether to show primary/secondary action buttons. @default true */\n  showActions?: boolean;\n  /** Primary CTA label — renders a default {@link Button}. */\n  primaryLabel?: string;\n  /** Click handler for the primary CTA (used together with `primaryLabel`). */\n  primaryOnClick?: () => void;\n  /** Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. */\n  primarySlot?: React.ReactNode;\n  /** Secondary CTA label — renders a default {@link Button}. */\n  secondaryLabel?: string;\n  /** Click handler for the secondary CTA (used together with `secondaryLabel`). */\n  secondaryOnClick?: () => void;\n  /** Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. */\n  secondarySlot?: React.ReactNode;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close snackbar\" */\n  closeLabel?: string;\n}\n\nfunction CloseButton({\n  onClose,\n  className,\n  closeLabel = \"Close snackbar\",\n}: {\n  onClose?: () => void;\n  className?: string;\n  closeLabel?: string;\n}) {\n  return (\n    <IconButton\n      variant=\"tertiary\"\n      size=\"24\"\n      onClick={onClose}\n      icon={<CrossIcon />}\n      className={cn(\"shrink-0\", className)}\n      aria-label={closeLabel}\n    />\n  );\n}\n\n/**\n * Resolves a CTA slot. If a custom slot is provided it takes precedence,\n * otherwise a default Button is rendered from label + onClick.\n */\nfunction resolveCtaSlot(\n  slot: React.ReactNode | undefined,\n  label: string | undefined,\n  onClick: (() => void) | undefined,\n  buttonProps: React.ComponentProps<typeof Button>,\n): React.ReactNode | null {\n  if (slot) return slot;\n  if (label) {\n    return (\n      <Button onClick={onClick} {...buttonProps}>\n        {label}\n      </Button>\n    );\n  }\n  return null;\n}\n\nfunction VipEarnContent({\n  icon,\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"icon\"\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"text\",\n    size: \"24\",\n  });\n\n  return (\n    <>\n      {icon && (\n        <span className=\"flex shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n        <div className=\"flex flex-col\">\n          {title && <p className=\"typography-body-1-semibold text-body-100 leading-6\">{title}</p>}\n          {description && <p className=\"typography-body-2-regular text-body-200\">{description}</p>}\n        </div>\n        {showActions && primary && <div className=\"self-start\">{primary}</div>}\n      </div>\n    </>\n  );\n}\n\nfunction WelcomeContent({\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"secondary\",\n  });\n\n  return (\n    <>\n      <div className=\"flex flex-col items-center gap-2 px-8 text-center text-body-100\">\n        {title && <p className=\"typography-heading-4 text-body-100\">{title}</p>}\n        {description && <p className=\"typography-body-2-regular text-body-200\">{description}</p>}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1\">\n          {secondary}\n          {primary}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction DefaultContent({\n  children,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"children\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n    size: \"40\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"tertiary\",\n    size: \"40\",\n  });\n\n  return (\n    <>\n      <div className=\"typography-body-1-medium flex min-w-0 flex-1 items-center self-stretch text-body-100\">\n        {children}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex shrink-0 items-start gap-2\">\n          {primary}\n          {secondary}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A prominent inline message with optional title, description, action buttons,\n * and close control. Supports three layout variants: `default`, `vipEarn`, and\n * `welcome`.\n *\n * @example\n * ```tsx\n * <Snackbar\n *   variant=\"default\"\n *   primaryLabel=\"Undo\"\n *   primaryOnClick={undo}\n *   closable\n *   onClose={dismiss}\n * >\n *   Item deleted\n * </Snackbar>\n * ```\n */\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      icon,\n      title,\n      description,\n      showActions = true,\n      primaryLabel,\n      primaryOnClick,\n      primarySlot,\n      secondaryLabel,\n      secondaryOnClick,\n      secondarySlot,\n      closable = false,\n      onClose,\n      closeLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */\n      <div\n        ref={ref}\n        role=\"status\"\n        data-testid=\"snackbar\"\n        className={cn(\n          \"flex gap-4 rounded-2xl\",\n          (variant === \"default\" || variant === \"vipEarn\") &&\n            \"border border-neutral-50 bg-background-200 p-4 backdrop-blur-md\",\n          variant === \"default\" && \"flex-wrap items-start\",\n          variant === \"vipEarn\" && \"items-start\",\n          variant === \"welcome\" &&\n            \"relative flex-col items-center bg-background-inverse-solid py-6\",\n          className,\n        )}\n        {...props}\n      >\n        {variant === \"vipEarn\" && (\n          <VipEarnContent\n            icon={icon}\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n          />\n        )}\n        {variant === \"welcome\" && (\n          <WelcomeContent\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          />\n        )}\n        {variant === \"default\" && (\n          <DefaultContent\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          >\n            {children}\n          </DefaultContent>\n        )}\n        {closable && (\n          <CloseButton\n            onClose={onClose}\n            closeLabel={closeLabel}\n            className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","IconButton","CrossIcon","cn","Button","jsxs","Fragment","React"],"mappings":"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"}
+{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/** Layout variant of the snackbar. */\nexport type SnackbarVariant = \"default\" | \"vipEarn\" | \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Layout variant of the snackbar. @default \"default\" */\n  variant?: SnackbarVariant;\n  /** Icon element displayed at the leading edge (used by the `vipEarn` variant). */\n  icon?: React.ReactNode;\n  /** Title content. */\n  title?: React.ReactNode;\n  /** Descriptive body text. */\n  description?: React.ReactNode;\n  /** Whether to show primary/secondary action buttons. @default true */\n  showActions?: boolean;\n  /** Primary CTA label — renders a default {@link Button}. */\n  primaryLabel?: string;\n  /** Click handler for the primary CTA (used together with `primaryLabel`). */\n  primaryOnClick?: () => void;\n  /** Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. */\n  primarySlot?: React.ReactNode;\n  /** Secondary CTA label — renders a default {@link Button}. */\n  secondaryLabel?: string;\n  /** Click handler for the secondary CTA (used together with `secondaryLabel`). */\n  secondaryOnClick?: () => void;\n  /** Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. */\n  secondarySlot?: React.ReactNode;\n  /** Whether to show the close button. @default false */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close snackbar\" */\n  closeLabel?: string;\n}\n\nfunction CloseButton({\n  onClose,\n  className,\n  closeLabel = \"Close snackbar\",\n}: {\n  onClose?: () => void;\n  className?: string;\n  closeLabel?: string;\n}) {\n  return (\n    <IconButton\n      variant=\"tertiary\"\n      size=\"24\"\n      onClick={onClose}\n      icon={<CrossIcon />}\n      className={cn(\"shrink-0\", className)}\n      aria-label={closeLabel}\n    />\n  );\n}\n\n/**\n * Resolves a CTA slot. If a custom slot is provided it takes precedence,\n * otherwise a default Button is rendered from label + onClick.\n */\nfunction resolveCtaSlot(\n  slot: React.ReactNode | undefined,\n  label: string | undefined,\n  onClick: (() => void) | undefined,\n  buttonProps: React.ComponentProps<typeof Button>,\n): React.ReactNode | null {\n  if (slot) return slot;\n  if (label) {\n    return (\n      <Button onClick={onClick} {...buttonProps}>\n        {label}\n      </Button>\n    );\n  }\n  return null;\n}\n\nfunction VipEarnContent({\n  icon,\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"icon\"\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"text\",\n    size: \"24\",\n  });\n\n  return (\n    <>\n      {icon && (\n        <span className=\"flex shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n        <div className=\"flex flex-col\">\n          {title && (\n            <p className=\"typography-semibold-body-lg text-foreground-default leading-6\">{title}</p>\n          )}\n          {description && (\n            <p className=\"typography-regular-body-md text-foreground-secondary\">{description}</p>\n          )}\n        </div>\n        {showActions && primary && <div className=\"self-start\">{primary}</div>}\n      </div>\n    </>\n  );\n}\n\nfunction WelcomeContent({\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"secondary\",\n  });\n\n  return (\n    <>\n      <div className=\"flex flex-col items-center gap-2 px-8 text-center text-foreground-default\">\n        {title && <p className=\"typography-bold-heading-xs text-foreground-default\">{title}</p>}\n        {description && (\n          <p className=\"typography-regular-body-md text-foreground-secondary\">{description}</p>\n        )}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1\">\n          {secondary}\n          {primary}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction DefaultContent({\n  children,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"children\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n    size: \"40\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"tertiary\",\n    size: \"40\",\n  });\n\n  return (\n    <>\n      <div className=\"typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-foreground-default\">\n        {children}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex shrink-0 items-start gap-2\">\n          {primary}\n          {secondary}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A prominent inline message with optional title, description, action buttons,\n * and close control. Supports three layout variants: `default`, `vipEarn`, and\n * `welcome`.\n *\n * @example\n * ```tsx\n * <Snackbar\n *   variant=\"default\"\n *   primaryLabel=\"Undo\"\n *   primaryOnClick={undo}\n *   closable\n *   onClose={dismiss}\n * >\n *   Item deleted\n * </Snackbar>\n * ```\n */\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      icon,\n      title,\n      description,\n      showActions = true,\n      primaryLabel,\n      primaryOnClick,\n      primarySlot,\n      secondaryLabel,\n      secondaryOnClick,\n      secondarySlot,\n      closable = false,\n      onClose,\n      closeLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */\n      <div\n        ref={ref}\n        role=\"status\"\n        data-testid=\"snackbar\"\n        className={cn(\n          \"flex gap-4 rounded-2xl\",\n          (variant === \"default\" || variant === \"vipEarn\") &&\n            \"border border-neutral-50 bg-surface-container p-4 backdrop-blur-md\",\n          variant === \"default\" && \"flex-wrap items-start\",\n          variant === \"vipEarn\" && \"items-start\",\n          variant === \"welcome\" && \"relative flex-col items-center bg-surface-page py-6\",\n          className,\n        )}\n        {...props}\n      >\n        {variant === \"vipEarn\" && (\n          <VipEarnContent\n            icon={icon}\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n          />\n        )}\n        {variant === \"welcome\" && (\n          <WelcomeContent\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          />\n        )}\n        {variant === \"default\" && (\n          <DefaultContent\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          >\n            {children}\n          </DefaultContent>\n        )}\n        {closable && (\n          <CloseButton\n            onClose={onClose}\n            closeLabel={closeLabel}\n            className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","IconButton","CrossIcon","cn","Button","jsxs","Fragment","React"],"mappings":"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"}

package/dist/cjs/components/Switch/Switch.cjs

@@ -32,7 +32,7 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
       className: cn.cn(
         "inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150",
         "focus-visible:shadow-focus-ring focus-visible:outline-none",
-        "data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-green-500",
+        "data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-accent-default",
         "data-[state=unchecked]:bg-neutral-400",
         "not-disabled:active:opacity-80",
         "disabled:cursor-not-allowed disabled:opacity-50",
@@ -45,7 +45,7 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
         SwitchPrimitive__namespace.Thumb,
         {
           className: cn.cn(
-            "pointer-events-none rounded-full bg-body-white-solid-constant shadow-sm transition-transform duration-150 dark:bg-body-black-solid-constant",
+            "pointer-events-none rounded-full bg-surface-page shadow-sm transition-transform duration-150",
             thumbSizeClass
           )
         }

package/dist/cjs/components/Switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size variant of the switch toggle. */\nexport type SwitchSize = \"default\" | \"small\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n  /** Size variant of the switch. @default \"default\" */\n  size?: SwitchSize;\n}\n\n/**\n * A toggle switch for boolean on/off states. Built on Radix UI `Switch`.\n *\n * For a labelled switch with helper text, see {@link SwitchField}.\n *\n * @example\n * ```tsx\n * <Switch checked={on} onCheckedChange={setOn} />\n * ```\n */\nexport const Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n  const thumbSizeClass =\n    size === \"default\"\n      ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n      : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-green-500\",\n        \"data-[state=unchecked]:bg-neutral-400\",\n        \"not-disabled:active:opacity-80\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        size === \"default\" && \"h-6 w-10.5\",\n        size === \"small\" && \"h-5 w-9\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none rounded-full bg-body-white-solid-constant shadow-sm transition-transform duration-150 dark:bg-body-black-solid-constant\",\n          thumbSizeClass,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAASA,iBAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA;AAAAA,QAACC,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;;"}
+{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size variant of the switch toggle. */\nexport type SwitchSize = \"default\" | \"small\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n  /** Size variant of the switch. @default \"default\" */\n  size?: SwitchSize;\n}\n\n/**\n * A toggle switch for boolean on/off states. Built on Radix UI `Switch`.\n *\n * For a labelled switch with helper text, see {@link SwitchField}.\n *\n * @example\n * ```tsx\n * <Switch checked={on} onCheckedChange={setOn} />\n * ```\n */\nexport const Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n  const thumbSizeClass =\n    size === \"default\"\n      ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n      : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-accent-default\",\n        \"data-[state=unchecked]:bg-neutral-400\",\n        \"not-disabled:active:opacity-80\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        size === \"default\" && \"h-6 w-10.5\",\n        size === \"small\" && \"h-5 w-9\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none rounded-full bg-surface-page shadow-sm transition-transform duration-150\",\n          thumbSizeClass,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAASA,iBAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA;AAAAA,QAACC,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;;"}

package/dist/cjs/components/SwitchField/SwitchField.cjs

@@ -65,15 +65,21 @@ const SwitchField = React__namespace.forwardRef(
               {
                 htmlFor: id,
                 className: cn.cn(
-                  "cursor-pointer select-none text-body-100",
-                  disabled && "cursor-not-allowed text-disabled-100",
-                  size === "default" ? "typography-body-1-semibold" : "typography-body-2-semibold"
+                  "cursor-pointer select-none text-foreground-default",
+                  disabled && "cursor-not-allowed text-neutral-250",
+                  size === "default" ? "typography-semibold-body-lg" : "typography-semibold-body-md"
                 ),
                 children: label
               }
             ),
             infoText && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": infoLabel, className: "flex shrink-0 pt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(InfoCircleIcon.InfoCircleIcon, { "aria-hidden": "true", className: "size-5 text-body-200" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": infoLabel, className: "flex shrink-0 pt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+                InfoCircleIcon.InfoCircleIcon,
+                {
+                  "aria-hidden": "true",
+                  className: "size-5 text-foreground-secondary"
+                }
+              ) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { side: "bottom", children: infoText })
             ] }) })
           ] }),
@@ -82,10 +88,9 @@ const SwitchField = React__namespace.forwardRef(
             {
               id: helperTextId,
               className: cn.cn(
-                "text-body-200",
-                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
-                disabled && "text-disabled-100",
-                size === "default" ? "typography-body-2-regular" : "typography-caption-regular"
+                "text-foreground-secondary",
+                disabled && "text-neutral-250",
+                size === "default" ? "typography-regular-body-md" : "typography-regular-body-sm"
               ),
               children: helperText
             }

package/dist/cjs/components/SwitchField/SwitchField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.cjs","sources":["../../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. */\nexport type SwitchFieldOrientation = \"right\" | \"left\";\n\nexport interface SwitchFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" | \"className\"> {\n  /** Side on which the switch is placed relative to the label. @default \"right\" */\n  orientation?: SwitchFieldOrientation;\n  /** Size variant of the switch and accompanying text. @default \"default\" */\n  size?: SwitchSize;\n  /** Label text displayed next to the switch. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n  /** Tooltip text shown when hovering the info icon next to the label. */\n  infoText?: string;\n  /** Accessible label for the info tooltip trigger button. Override for i18n.\n   * @default \"More information\"\n   */\n  infoLabel?: string;\n  /** Additional CSS class name for the outer wrapper. */\n  className?: string;\n}\n\n/**\n * A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n *\n * @example\n * ```tsx\n * <SwitchField\n *   label=\"Notifications\"\n *   helperText=\"Receive push notifications\"\n *   checked={enabled}\n *   onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n  (\n    {\n      className,\n      orientation = \"right\",\n      size = \"default\",\n      label,\n      helperText,\n      infoText,\n      infoLabel = \"More information\",\n      disabled,\n      id: propId,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const id = propId ?? generatedId;\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n\n    const switchElement = (\n      <Switch\n        ref={ref}\n        id={id}\n        size={size}\n        disabled={disabled}\n        aria-describedby={helperTextId}\n        {...props}\n      />\n    );\n\n    const labelContent = (label || helperText) && (\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start\",\n          size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n        )}\n      >\n        {label && (\n          <div className=\"flex items-center gap-1\">\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-body-100\",\n                disabled && \"cursor-not-allowed text-disabled-100\",\n                size === \"default\" ? \"typography-body-1-semibold\" : \"typography-body-2-semibold\",\n              )}\n            >\n              {label}\n            </label>\n            {infoText && (\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n                      <InfoCircleIcon aria-hidden=\"true\" className=\"size-5 text-body-200\" />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            )}\n          </div>\n        )}\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"text-body-200\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n              disabled && \"text-disabled-100\",\n              size === \"default\" ? \"typography-body-2-regular\" : \"typography-caption-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n        {orientation === \"left\" && switchElement}\n        {labelContent}\n        {orientation === \"right\" && switchElement}\n      </div>\n    );\n  },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":["React","jsx","Switch","jsxs","cn","TooltipProvider","Tooltip","TooltipTrigger","InfoCircleIcon","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWG,GAAAA;AAAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,+BAA+B;AAAA,gBAAA;AAAA,gBAGrD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,kBAAe,SAAO,MACrB,yCAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,yCAACC,eAAAA,gBAAA,EAAe,eAAY,QAAO,WAAU,wBAAuB,GACtE,EAAA,CACF;AAAA,cACAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWG,GAAAA;AAAAA,gBACT;AAAA;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,8BAA8B;AAAA,cAAA;AAAA,cAGpD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACED,gCAAC,SAAI,WAAWC,GAAAA,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"SwitchField.cjs","sources":["../../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. */\nexport type SwitchFieldOrientation = \"right\" | \"left\";\n\nexport interface SwitchFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" | \"className\"> {\n  /** Side on which the switch is placed relative to the label. @default \"right\" */\n  orientation?: SwitchFieldOrientation;\n  /** Size variant of the switch and accompanying text. @default \"default\" */\n  size?: SwitchSize;\n  /** Label text displayed next to the switch. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n  /** Tooltip text shown when hovering the info icon next to the label. */\n  infoText?: string;\n  /** Accessible label for the info tooltip trigger button. Override for i18n.\n   * @default \"More information\"\n   */\n  infoLabel?: string;\n  /** Additional CSS class name for the outer wrapper. */\n  className?: string;\n}\n\n/**\n * A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n *\n * @example\n * ```tsx\n * <SwitchField\n *   label=\"Notifications\"\n *   helperText=\"Receive push notifications\"\n *   checked={enabled}\n *   onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n  (\n    {\n      className,\n      orientation = \"right\",\n      size = \"default\",\n      label,\n      helperText,\n      infoText,\n      infoLabel = \"More information\",\n      disabled,\n      id: propId,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const id = propId ?? generatedId;\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n\n    const switchElement = (\n      <Switch\n        ref={ref}\n        id={id}\n        size={size}\n        disabled={disabled}\n        aria-describedby={helperTextId}\n        {...props}\n      />\n    );\n\n    const labelContent = (label || helperText) && (\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start\",\n          size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n        )}\n      >\n        {label && (\n          <div className=\"flex items-center gap-1\">\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-foreground-default\",\n                disabled && \"cursor-not-allowed text-neutral-250\",\n                size === \"default\" ? \"typography-semibold-body-lg\" : \"typography-semibold-body-md\",\n              )}\n            >\n              {label}\n            </label>\n            {infoText && (\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n                      <InfoCircleIcon\n                        aria-hidden=\"true\"\n                        className=\"size-5 text-foreground-secondary\"\n                      />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            )}\n          </div>\n        )}\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"text-foreground-secondary\",\n              disabled && \"text-neutral-250\",\n              size === \"default\" ? \"typography-regular-body-md\" : \"typography-regular-body-sm\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n        {orientation === \"left\" && switchElement}\n        {labelContent}\n        {orientation === \"right\" && switchElement}\n      </div>\n    );\n  },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":["React","jsx","Switch","jsxs","cn","TooltipProvider","Tooltip","TooltipTrigger","InfoCircleIcon","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWG,GAAAA;AAAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,gCAAgC;AAAA,gBAAA;AAAA,gBAGtD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAN,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAAA,2BAAAA;AAAAA,gBAACO,eAAAA;AAAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWG,GAAAA;AAAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,+BAA+B;AAAA,cAAA;AAAA,cAGrD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACED,gCAAC,SAAI,WAAWC,GAAAA,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/SwitchToggle/SwitchToggle.cjs

@@ -48,7 +48,7 @@ const SwitchToggle = React__namespace.forwardRef(
     const anySelected = options.some((o) => o.value === currentValue);
     const isSecondSelected = currentValue === options[1].value;
     const buttonRefs = React__namespace.useRef([]);
-    const sizeClass = size === "24" ? "px-2 py-1 typography-caption-semibold" : size === "32" ? "px-3 py-1.75 typography-body-2-semibold" : "h-10 px-4 py-2.25 typography-button-small";
+    const sizeClass = size === "24" ? "px-2 py-1 typography-semibold-body-sm" : size === "32" ? "px-3 py-1.75 typography-semibold-body-md" : "h-10 px-4 py-2.25 typography-semibold-body-lg";
     const handleSelect = (optionValue) => {
       if (disabled || optionValue === currentValue) return;
       if (!isControlled) {
@@ -81,7 +81,7 @@ const SwitchToggle = React__namespace.forwardRef(
             {
               "aria-hidden": "true",
               className: cn.cn(
-                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-green-500 bg-brand-green-50",
+                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-accent-default bg-brand-accent-muted",
                 "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out",
                 isSecondSelected && "translate-x-full"
               )
@@ -105,9 +105,9 @@ const SwitchToggle = React__namespace.forwardRef(
                   onClick: () => handleSelect(option.value),
                   onKeyDown: (e) => handleKeyDown(e, index),
                   className: cn.cn(
-                    "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100",
+                    "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default",
                     "focus-visible:shadow-focus-ring focus-visible:outline-none",
-                    "active:rounded-full active:bg-brand-green-50",
+                    "active:rounded-full active:bg-brand-accent-muted",
                     disabled && "pointer-events-none",
                     sizeClass
                   ),