sangam-ui 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -61,7 +61,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
      */
     label?: React.ReactNode;
     /**
-     * Interaction state (Figma: **state** — Enabled / Disabled).
+     * Interaction state (Figma: **state** — Enabled / Disabled).
      * @default "enabled"
      */
     state?: "enabled" | "disabled";
@@ -101,7 +101,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  *
  * Production-grade toggle following Figma design specs:
  * - Colors: semantic-colors (background, border, text) where available
- * - Sizes: Big (56×28px), Small (44×24px)
+ * - Sizes: Big (56×28px), Small (44×24px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
  *
@@ -193,13 +193,13 @@ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAtt
  *
  * Production-grade checkbox following Figma design specs:
  * - Colors: semantic-colors (border, background, text) where available
- * - Sizes: Big (24×24px), Small (20×20px)
+ * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
  *
  * Built on Radix UI Checkbox for accessibility
  */
-/** Outer container: hit area only. Big 24×24, small 20×20. No border/bg here. */
+/** Outer container: hit area only. Big 24×24, small 20×20. No border/bg here. */
 declare const checkboxRootVariants: (props?: ({
     size?: "big" | "small" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
@@ -252,7 +252,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
     subtextText?: string;
 }
 /**
- * Sangam Checkbox — Radix Checkbox + CVA + Sangam tokens.
+ * Sangam Checkbox — Radix Checkbox + CVA + Sangam tokens.
  */
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -261,7 +261,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
  *
  * Production-grade radio button following Figma design specs:
  * - Colors: semantic-colors (background, border, text) where available
- * - Sizes: Big (24×24px), Small (20×20px)
+ * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
  * - Circular shape (rounded-full)
@@ -600,7 +600,7 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
     selectAllLabel?: string;
 }
 /**
- * Dropdown (single select) — Input-style trigger with chevron, Radix Select content.
+ * Dropdown (single select) — Input-style trigger with chevron, Radix Select content.
  */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
 /** Multi-select dropdown: trigger bg white, border neutral-400; menu border neutral-200, divider neutral-200; padding 8, gap 8 */
@@ -652,8 +652,8 @@ declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps
  * - Border radius: 8px
  * - Padding: 4px 12px
  * - Gap: 8px
- * - Icon size: 16×16px
- * - Close icon: 16×16px (same as search icon)
+ * - Icon size: 16×16px
+ * - Close icon: 16×16px (same as search icon)
  * - Smooth transitions: 200ms ease-out
  */
 declare const searchFieldVariants: (props?: ({} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
@@ -852,7 +852,7 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
  * - Padding: 16px
  * - Gap: 4px
  * - Title: 12px, 500 weight, 16px line-height
- * - Arrow: 12×8px (all directions)
+ * - Arrow: 12×8px (all directions)
  *
  * Uses rem for dimensions to respect user font size preferences (accessibility)
  *
@@ -946,7 +946,7 @@ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProp
 
 interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Current progress value (0–100).
+     * Current progress value (0–100).
      */
     value: number;
     /**
@@ -1000,7 +1000,7 @@ interface LoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     "aria-label"?: string;
     /**
      * Gradient color (e.g. #FFFFFF for white on dark backgrounds).
-     * @default semantic background.neutralInverse.primary (neutral.1100)
+     * @default semantic background.primary.default
      */
     color?: string;
     /**
@@ -1050,7 +1050,7 @@ declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.Re
  * States: Default, Hover, Selected, Disabled.
  * Colors: semantic-colors (background, border, text) where available.
  * Typography: 14px, weight 500, line-height 24px.
- * Spec: Container selected box 178×32, shadow 0 2px 6px; Underline selected 2px info; Icon only 24×24 box, radius 4, padding 4, gap 8.
+ * Spec: Container selected box 178×32, shadow 0 2px 6px; Underline selected 2px info; Icon only 24×24 box, radius 4, padding 4, gap 8.
  */
 declare const tabsListVariants: (props?: ({
     type?: "underline" | "iconOnly" | "container" | null | undefined;
@@ -1336,8 +1336,8 @@ declare function PopupTrigger({ title, subtext, showSubtext, cancelText, ctaText
  * Border radius: rounded variant uses 8px (tokens radius.sm = 0.5rem).
  *
  * Sizes:
- * - Big: Rounded/Pill 48×24px; Number 24×24px (circular)
- * - Small: Rounded/Pill 48×20px; Number 20×20px (circular)
+ * - Big: Rounded/Pill 48×24px; Number 24×24px (circular)
+ * - Small: Rounded/Pill 48×20px; Number 20×20px (circular)
  *
  * Label typography (both sizes): weight 500, size 12px, line-height 16px.
  * Padding (rounded/pill): Big top=4 bottom=4 left=8 right=8; Small top=2 bottom=2 left=8 right=8.
@@ -1462,15 +1462,15 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
  *
  * Structural variants: 1) Only label, 2) Label + close icon, 3) Tick icon + label + close icon.
  * Token-based chip: Default, Hover, Selected, Disabled, Focused.
- * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
+ * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
  * Radius 999 (pill). Colors from @esds-sangam/tokens.
  *
  * States (semantic-colors):
- * - Default: bg neutral primary, text neutral primary, border neutral primary
- * - Hover: bg neutral tertiary, border transparent
- * - Selected: bg neutralInverse primary, text neutralInverse primary
- * - Disabled: bg neutral disabled, text neutral disabled
- * - Focused: bg neutral primary, text neutral primary, border 2px neutralInverse primary
+ * - Default: chips.background.default, chips.text.default, chips.border.default
+ * - Hover: chips.background.hover, chips.text.hover
+ * - Selected: chips.background.selected, chips.text.selected
+ * - Disabled: chips.background.disabled, chips.text.disabled
+ * - Focused: chips.border.focused
  */
 declare const chipVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
@@ -1483,7 +1483,7 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
      */
     children?: React.ReactNode;
     /**
-     * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
+     * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
      */
     size?: "large" | "small";
     /**
@@ -1534,7 +1534,7 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
     totalPages: number;
     /** Called when page changes */
     onPageChange?: (page: number) => void;
-    /** Total records (optional; not shown in the bar — use in parent for range copy if needed) */
+    /** Total records (optional; not shown in the bar — use in parent for range copy if needed) */
     totalRecords?: number;
     /** Current page-size value for the entries selector */
     pageSize?: number;
@@ -1975,7 +1975,7 @@ interface SideMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
 declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 
 /**
- * Upload Pattern – Stage 1: File uploader
+ * Upload Pattern – Stage 1: File uploader
  *
  * Token-based, accessible file uploader pattern with:
  * - Label (12px, weight 500, line-height 16)
@@ -2019,7 +2019,7 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     fileName: string;
     /** File size or status line (e.g. "5.5MB"). 12px, weight 400, line-height 16, neutral-600. When failed, show "Upload failed" in red-800. */
     fileSize?: string;
-    /** Current progress 0–100 (for uploading/complete). Hidden when status is "failed". */
+    /** Current progress 0–100 (for uploading/complete). Hidden when status is "failed". */
     process?: number;
     /** @deprecated Use `process`. */
     progress?: number;
@@ -2031,9 +2031,9 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     onDelete?: () => void;
 }
 /**
- * UploadFileItem – single file row in the upload pattern.
- * Box: 536×100 (min), border neutral-300 (red-800 when failed), radius 12px (tokens rounded-md), padding 16, gap 8.
- * Left: DocumentPdf 24×24, fileName (14/500/24 neutral-1100), fileSize or "Upload failed" (12/400/16).
+ * UploadFileItem – single file row in the upload pattern.
+ * Box: 536×100 (min), border neutral-300 (red-800 when failed), radius 12px (tokens rounded-md), padding 16, gap 8.
+ * Left: DocumentPdf 24×24, fileName (14/500/24 neutral-1100), fileSize or "Upload failed" (12/400/16).
  * Right: uploading = Close + %; complete = tickmarkFilled + Delete + 100%; failed = Retry + Delete.
  * Progress bar below when not failed (ProgressBar primitive, 10% / 50% / 100%).
  */

package/dist/index.js

@@ -12,7 +12,7 @@ import { cn } from "@esds-sangam/utils";
 import { semanticColorsResolved } from "@esds-sangam/tokens";
 import { jsx } from "react/jsx-runtime";
 var resolvedBg = semanticColorsResolved;
-var LOADER_COLOR = resolvedBg?.background?.neutralInverse?.primary ?? "#111111";
+var LOADER_COLOR = resolvedBg?.background?.primary?.default ?? resolvedBg?.background?.["neutral-inverse"]?.primary ?? resolvedBg?.background?.neutralInverse?.primary ?? "#007AE2";
 var LOADER_COLOR_TRANSPARENT = `${LOADER_COLOR}00`;
 var loaderVariants = cva(
   [
@@ -78,35 +78,35 @@ var buttonVariants = cva2(
     variants: {
       // Variant: Visual style per Figma design
       variant: {
-        // Primary: semantic background/text (neutral inverse primary)
+        // Primary: semantic button tokens (blue default/hover)
         primary: [
-          "bg-semantic-background-neutralInverse-primary text-semantic-text-neutralInverse-primary",
-          "hover:bg-semantic-background-neutralInverse-secondary",
+          "bg-semantic-buttons-background-primary-default text-semantic-buttons-text-primary-default",
+          "hover:bg-semantic-buttons-background-primary-hover",
           "focus-visible:ring-semantic-border-neutral-primary focus-visible:ring-offset-0",
-          "disabled:bg-semantic-background-neutral-disabled disabled:text-semantic-text-neutral-disabled disabled:pointer-events-none",
-          "data-[loading=true]:!bg-semantic-background-neutralInverse-primary data-[loading=true]:!text-semantic-text-neutralInverse-primary"
+          "disabled:bg-semantic-buttons-background-primary-disabled disabled:text-semantic-buttons-text-primary-disabled disabled:pointer-events-none",
+          "data-[loading=true]:!bg-semantic-buttons-background-primary-default data-[loading=true]:!text-semantic-buttons-text-primary-default"
         ],
-        // Secondary: border #111111 (semantic border neutralInverse tertiary), hover: border removed, bg #EBEBEB (semantic background neutral tertiary)
+        // Secondary: outlined blue, subtle blue hover
         secondary: [
-          "bg-semantic-background-neutral-primary border border-semantic-border-neutralInverse-tertiary text-semantic-text-neutral-primary",
-          "hover:border-transparent hover:bg-semantic-background-neutral-tertiary",
-          "focus-visible:border-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-semantic-border-neutralInverse-tertiary focus-visible:-m-px",
-          "disabled:bg-semantic-background-neutral-disabled disabled:text-semantic-text-neutral-disabled disabled:border-semantic-border-neutral-disabled disabled:pointer-events-none"
+          "bg-semantic-background-neutral-primary border border-semantic-buttons-background-secondary-default text-semantic-buttons-text-secondary-default",
+          "hover:border-transparent hover:bg-semantic-buttons-background-secondary-hover",
+          "focus-visible:border-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-semantic-buttons-background-secondary-default focus-visible:-m-px",
+          "disabled:bg-semantic-buttons-background-secondary-disabled disabled:text-semantic-buttons-text-secondary-disabled disabled:border-semantic-border-neutral-disabled disabled:pointer-events-none"
         ],
         // Danger: semantic error default/hover
         danger: [
-          "bg-semantic-background-semantic-error-default text-semantic-text-semantic-error-default",
-          "hover:bg-semantic-background-semantic-error-hover",
-          "focus-visible:ring-semantic-border-semantic-error-default",
-          "disabled:bg-semantic-background-neutral-disabled disabled:text-semantic-text-neutral-disabled disabled:pointer-events-none",
-          "data-[loading=true]:!bg-semantic-background-semantic-error-default data-[loading=true]:!text-semantic-text-semantic-error-default"
+          "bg-semantic-buttons-background-danger-default text-semantic-buttons-text-danger-default",
+          "hover:bg-semantic-buttons-background-danger-hover",
+          "focus-visible:ring-semantic-border-error-default",
+          "disabled:bg-semantic-buttons-background-danger-disabled disabled:text-semantic-buttons-text-danger-disabled disabled:pointer-events-none",
+          "data-[loading=true]:!bg-semantic-buttons-background-danger-default data-[loading=true]:!text-semantic-buttons-text-danger-default"
         ],
         // Tertiary (low-emphasis / link style): semantic info default text
         tertiary: [
-          "bg-transparent text-semantic-background-semantic-info-default underline-offset-4",
+          "bg-transparent text-semantic-buttons-text-link-default underline-offset-4",
           "hover:underline",
-          "focus-visible:ring-semantic-border-semantic-info-default",
-          "disabled:text-semantic-text-neutral-disabled disabled:pointer-events-none"
+          "focus-visible:ring-semantic-border-primary-default",
+          "disabled:text-semantic-buttons-text-link-disabled disabled:pointer-events-none"
         ]
       },
       // Size: Height, padding, font size (from Figma specs)
@@ -135,8 +135,8 @@ var buttonVariants = cva2(
        * - When true, button becomes fully rounded.
        * - Height is still driven by `size` (small/big).
        * - Width is applied via compoundVariants below:
-       *   - size="small"  → w-8 (32px)
-       *   - size="big"    → w-10 (40px)
+       *   - size="small"  → w-8 (32px)
+       *   - size="big"    → w-10 (40px)
        */
       iconOnly: {
         false: "",
@@ -161,12 +161,12 @@ var buttonVariants = cva2(
     ]
   }
 );
-var BUTTON_LOADER_COLOR = semanticColorsResolved2.text.neutralInverse.primary;
+var BUTTON_LOADER_COLOR = semanticColorsResolved2.text["neutral-inverse"]?.primary ?? semanticColorsResolved2.text.neutralInverse?.primary ?? "#FFFFFF";
 var BUTTON_LOADER_COLOR_TRANSPARENT = `${BUTTON_LOADER_COLOR}00`;
 var hoverPreviewClassByVariant = {
-  primary: "!bg-semantic-background-neutralInverse-secondary",
-  secondary: "!border-transparent !bg-semantic-background-neutral-tertiary",
-  danger: "!bg-semantic-background-semantic-error-hover",
+  primary: "!bg-semantic-buttons-background-primary-hover",
+  secondary: "!border-transparent !bg-semantic-buttons-background-secondary-hover",
+  danger: "!bg-semantic-buttons-background-danger-hover",
   tertiary: "underline"
 };
 function normalizeButtonType(value) {
@@ -266,17 +266,17 @@ var toggleVariants = cva3(
   [
     "peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
     "transition-all duration-200 ease-out",
-    // focus ring: no semantic token for neutral-800 in semantic-colors.json — left as-is
+    // focus ring: no semantic token for neutral-800 in semantic-colors.json — left as-is
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-800 focus-visible:ring-offset-2",
     "disabled:cursor-not-allowed disabled:opacity-semantic-full",
     // Default unchecked state
-    "bg-semantic-background-neutralInverse-tertiary",
+    "bg-semantic-background-neutral-inverse-tertiary",
     // Hover effect for unchecked state (border appears on hover)
-    "border-1 border-semantic-border-transparent hover:border-semantic-border-neutralInverse-primary",
+    "border-1 border-semantic-border-transparent hover:border-semantic-border-neutral-inverse-primary",
     // Checked state
-    "data-[state=checked]:bg-semantic-background-neutralInverse-primary",
+    "data-[state=checked]:bg-semantic-controls-background-checked",
     // Remove hover border when checked
-    "data-[state=checked]:hover:border-1 data-[state=checked]:hover:border-semantic-border-neutralInverse-tertiary",
+    "data-[state=checked]:hover:border-1 data-[state=checked]:hover:border-semantic-controls-background-checked",
     // Disabled states - MUST come after checked to override
     "disabled:bg-semantic-background-neutral-tertiary",
     "disabled:hover:border-1 disabled:hover:border-semantic-border-neutral-tertiary",
@@ -302,7 +302,7 @@ var toggleThumbVariants = cva3(
   [
     "pointer-events-none block rounded-full bg-semantic-background-neutral-primary shadow-sm",
     "transition-transform duration-200 ease-out",
-    // Disabled state: no semantic background for neutral.500 — left as-is
+    // Disabled state: no semantic background for neutral.500 — left as-is
     "data-[disabled]:bg-neutral-500"
   ],
   {
@@ -399,14 +399,14 @@ var checkboxRootVariants = cva4(
 var checkboxInnerVariants = cva4(
   [
     "flex shrink-0 items-center justify-center rounded-xs border transition-all duration-200 ease-out",
-    "border-semantic-border-neutral-primary bg-transparent",
-    "group-hover:border-semantic-border-neutralInverse-primary",
-    "group-data-[preview-hover=true]:border-semantic-border-neutralInverse-primary",
-    "group-data-[state=checked]:bg-semantic-background-neutralInverse-primary group-data-[state=checked]:border-semantic-border-neutralInverse-tertiary",
-    "group-data-[state=checked]:group-hover:border-semantic-border-neutralInverse-tertiary",
-    "group-data-[state=checked]:group-data-[preview-hover=true]:border-semantic-border-neutralInverse-tertiary",
-    "group-disabled:border-semantic-border-neutral-tertiary group-disabled:group-hover:border-semantic-border-neutral-tertiary",
-    "group-disabled:group-data-[state=checked]:bg-semantic-background-neutral-tertiary group-disabled:group-data-[state=checked]:border-semantic-border-neutral-tertiary"
+    "border-semantic-controls-border-default bg-transparent",
+    "group-hover:border-semantic-controls-border-hover",
+    "group-data-[preview-hover=true]:border-semantic-controls-border-hover",
+    "group-data-[state=checked]:bg-semantic-controls-background-checked group-data-[state=checked]:border-semantic-controls-background-checked",
+    "group-data-[state=checked]:group-hover:border-semantic-controls-background-checked",
+    "group-data-[state=checked]:group-data-[preview-hover=true]:border-semantic-controls-background-checked",
+    "group-disabled:border-semantic-controls-border-disabled group-disabled:group-hover:border-semantic-controls-border-disabled",
+    "group-disabled:group-data-[state=checked]:bg-semantic-controls-background-disabled group-disabled:group-data-[state=checked]:border-semantic-controls-border-disabled"
   ],
   {
     variants: {
@@ -480,8 +480,8 @@ var Checkbox = React4.forwardRef(
           {
             className: cn4(
               size === "big" ? "h-4 w-4" : "h-3 w-3",
-              "text-semantic-text-neutralInverse-primary",
-              resolvedDisabled && "text-semantic-text-neutral-disabled"
+              "text-semantic-controls-icon-checked",
+              resolvedDisabled && "text-semantic-controls-icon-disabled"
             ),
             strokeWidth: 3
           }
@@ -509,17 +509,17 @@ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var radioVariants = cva5(
   [
     "aspect-square shrink-0 rounded-full border transition-all duration-200 ease-out flex items-center justify-center",
-    // focus ring: no semantic token for neutral-800 in semantic-colors.json — left as-is
+    // focus ring: no semantic token for neutral-800 in semantic-colors.json — left as-is
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-800 focus-visible:ring-offset-2",
     "disabled:cursor-not-allowed",
     // Default unchecked state (not selected)
     "border-semantic-border-neutral-primary bg-semantic-background-transparent",
     // Hover effect for unchecked state
-    "hover:border-semantic-border-neutralInverse-primary",
+    "hover:border-semantic-border-neutral-inverse-primary",
     // Checked state (selected)
-    "data-[state=checked]:border-semantic-border-neutralInverse-tertiary",
+    "data-[state=checked]:border-semantic-controls-background-checked",
     // No border change on hover when checked
-    "data-[state=checked]:hover:border-semantic-border-neutralInverse-tertiary",
+    "data-[state=checked]:hover:border-semantic-controls-background-checked",
     // Disabled states
     "disabled:border-semantic-border-neutral-tertiary",
     "disabled:hover:border-semantic-border-neutral-tertiary",
@@ -556,8 +556,8 @@ var radioIndicatorVariants = cva5(["flex items-center justify-center"], {
 var radioDotVariants = cva5(
   [
     "rounded-full transition-colors duration-200 ease-out flex items-center justify-center",
-    // Default selected state - neutralInverse primary (neutral.1100)
-    "bg-semantic-background-neutralInverse-primary"
+    // Default selected state - controls checked (blue.600)
+    "bg-semantic-controls-background-checked"
   ],
   {
     variants: {
@@ -570,7 +570,7 @@ var radioDotVariants = cva5(
       disabled: {
         true: "bg-neutral-500",
         // Gray dot when disabled (no semantic background token for neutral.500)
-        false: "bg-semantic-background-neutralInverse-primary"
+        false: "bg-semantic-controls-background-checked"
       }
     },
     defaultVariants: {
@@ -630,9 +630,9 @@ var inputVariants = cva6(
     "placeholder:leading-6",
     // 24px line-height
     // Hover state
-    "hover:border-semantic-border-neutralInverse-primary",
+    "hover:border-semantic-input-border-hover",
     // Focus (Active/Typing) state
-    "focus:border-semantic-border-neutralInverse-primary focus:text-semantic-text-neutral-primary",
+    "focus:border-semantic-input-border-active focus:text-semantic-text-neutral-primary",
     // Caret (cursor) color
     "caret-semantic-text-neutral-primary",
     // Disabled state
@@ -646,11 +646,11 @@ var inputVariants = cva6(
       variant: {
         default: "",
         error: [
-          "border-semantic-border-semantic-error-subtle focus:border-semantic-border-semantic-error-subtle",
+          "border-semantic-border-error-subtle focus:border-semantic-border-error-subtle",
           "text-semantic-text-neutral-primary focus:text-semantic-text-neutral-primary"
         ],
         success: [
-          "border-semantic-border-semantic-success-subtle focus:border-semantic-border-semantic-success-subtle",
+          "border-semantic-border-success-subtle focus:border-semantic-border-success-subtle",
           "text-semantic-text-neutral-primary focus:text-semantic-text-neutral-primary"
         ]
       },
@@ -724,7 +724,7 @@ var Input = React6.forwardRef(
     const ctaText = typeof cta === "string" && cta.length > 0 ? cta : typeof ctaLabel === "string" && ctaLabel.length > 0 ? ctaLabel : "Button";
     const hasCtaToggle = Boolean(cta);
     const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${inputId}-helper` : void 0;
-    const helperTextColor = error ? "text-semantic-text-semantic-error-subtle" : success ? "text-semantic-text-semantic-success-subtle" : "text-semantic-text-neutral-tertiary";
+    const helperTextColor = error ? "text-semantic-text-error-subtle" : success ? "text-semantic-text-success-subtle" : "text-semantic-text-neutral-tertiary";
     const HelperIcon = error ? WarningFilled : success ? TickmarkFilled : resolvedSupportIcon ? Info : null;
     const hasTrailing = Boolean(trailingIcon);
     const hasCta = hasCtaToggle;
@@ -764,10 +764,10 @@ var Input = React6.forwardRef(
           className: cn6(
             "flex items-center w-full overflow-hidden rounded-sm border transition-all duration-200 ease-out",
             "bg-semantic-background-neutral-primary font-sans text-sm leading-6 font-normal",
-            "border-semantic-border-neutral-primary hover:border-semantic-border-neutralInverse-primary",
-            "focus-within:border-semantic-border-neutralInverse-primary",
-            error && "border-semantic-border-semantic-error-subtle hover:border-semantic-border-semantic-error-subtle focus-within:border-semantic-border-semantic-error-subtle",
-            success && "border-semantic-border-semantic-success-subtle hover:border-semantic-border-semantic-success-subtle focus-within:border-semantic-border-semantic-success-subtle",
+            "border-semantic-border-neutral-primary hover:border-semantic-input-border-hover",
+            "focus-within:border-semantic-input-border-active",
+            error && "border-semantic-border-error-subtle hover:border-semantic-border-error-subtle focus-within:border-semantic-border-error-subtle",
+            success && "border-semantic-border-success-subtle hover:border-semantic-border-success-subtle focus-within:border-semantic-border-success-subtle",
             disabled && "bg-semantic-background-neutral-tertiary border-semantic-border-neutral-tertiary",
             className
           ),
@@ -793,10 +793,10 @@ var Input = React6.forwardRef(
           className: cn6(
             "flex items-center w-full overflow-hidden rounded-sm border transition-all duration-200 ease-out",
             "bg-semantic-background-neutral-primary font-sans text-sm leading-6 font-normal",
-            "border-semantic-border-neutral-primary hover:border-semantic-border-neutralInverse-primary",
-            "focus-within:border-semantic-border-neutralInverse-primary",
-            error && "border-semantic-border-semantic-error-subtle hover:border-semantic-border-semantic-error-subtle focus-within:border-semantic-border-semantic-error-subtle",
-            success && "border-semantic-border-semantic-success-subtle hover:border-semantic-border-semantic-success-subtle focus-within:border-semantic-border-semantic-success-subtle",
+            "border-semantic-border-neutral-primary hover:border-semantic-input-border-hover",
+            "focus-within:border-semantic-input-border-active",
+            error && "border-semantic-border-error-subtle hover:border-semantic-border-error-subtle focus-within:border-semantic-border-error-subtle",
+            success && "border-semantic-border-success-subtle hover:border-semantic-border-success-subtle focus-within:border-semantic-border-success-subtle",
             disabled && "bg-semantic-background-neutral-tertiary border-semantic-border-neutral-tertiary",
             className
           ),
@@ -831,7 +831,7 @@ var Input = React6.forwardRef(
               {
                 size: 16,
                 className: cn6(
-                  error ? "text-semantic-text-semantic-error-subtle" : success ? "text-semantic-text-semantic-success-subtle" : "text-semantic-text-neutral-tertiary"
+                  error ? "text-semantic-text-error-subtle" : success ? "text-semantic-text-success-subtle" : "text-semantic-text-neutral-tertiary"
                 ),
                 "aria-hidden": "true"
               }
@@ -869,17 +869,17 @@ var dropdownTriggerVariants = cva7(
     "font-sans text-sm leading-6 font-normal",
     "px-3 py-1 min-h-[32px] h-8",
     "bg-semantic-background-neutral-primary border-semantic-border-neutral-primary text-semantic-text-neutral-primary",
-    "hover:border-semantic-border-neutralInverse-primary",
-    "focus:border-semantic-border-neutralInverse-primary",
+    "hover:border-semantic-input-border-hover",
+    "focus:border-semantic-input-border-active",
     "data-[placeholder]:text-semantic-text-neutral-tertiary",
-    "data-[state=open]:border-semantic-border-neutralInverse-primary data-[state=open]:text-semantic-text-neutral-tertiary",
+    "data-[state=open]:border-semantic-input-border-active data-[state=open]:text-semantic-text-neutral-tertiary",
     "disabled:bg-semantic-background-neutral-tertiary disabled:border-semantic-border-neutral-tertiary disabled:text-semantic-text-neutral-disabled disabled:cursor-not-allowed",
     "focus-visible:outline-none"
   ],
   {
     variants: {
       error: {
-        true: "border-semantic-border-semantic-error-default hover:border-semantic-border-semantic-error-default focus:border-semantic-border-semantic-error-default data-[state=open]:border-semantic-border-semantic-error-default",
+        true: "border-semantic-border-error-default hover:border-semantic-border-error-default focus:border-semantic-border-error-default data-[state=open]:border-semantic-border-error-default",
         false: ""
       }
     },
@@ -931,7 +931,7 @@ var Dropdown = React7.forwardRef(
     const shouldShowSupportingText = supportingText ?? Boolean(resolvedSupportText);
     const resolvedSupportIcon = supportIcon ?? showHelperIcon ?? false;
     const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${triggerId}-helper` : void 0;
-    const helperTextColor = error ? "text-semantic-text-semantic-error-subtle" : "text-semantic-text-neutral-disabled";
+    const helperTextColor = error ? "text-semantic-text-error-subtle" : "text-semantic-text-neutral-disabled";
     const HelperIcon = error ? WarningFilled2 : resolvedSupportIcon ? Info2 : null;
     return /* @__PURE__ */ jsxs6("div", { className: "w-full flex flex-col gap-2", children: [
       label && /* @__PURE__ */ jsx7(
@@ -1003,7 +1003,7 @@ var Dropdown = React7.forwardRef(
               HelperIcon,
               {
                 size: 16,
-                className: cn7(error ? "text-semantic-text-semantic-error-subtle" : "text-semantic-text-neutral-primary", "shrink-0"),
+                className: cn7(error ? "text-semantic-text-error-subtle" : "text-semantic-text-neutral-primary", "shrink-0"),
                 "aria-hidden": "true"
               }
             ),
@@ -1030,7 +1030,7 @@ var multiSelectCheckboxItemVariants = cva7([
   "data-[highlighted]:bg-semantic-background-neutral-tertiary",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-semantic-disabled"
 ]);
-var multiSelectCheckboxBox = "flex h-4 w-4 shrink-0 p-[3px] items-center justify-center rounded-[4px] border border-semantic-border-neutral-primary group-data-[state=checked]:border-semantic-border-neutralInverse-tertiary group-data-[state=checked]:bg-semantic-background-neutralInverse-primary";
+var multiSelectCheckboxBox = "flex h-4 w-4 shrink-0 p-[3px] items-center justify-center rounded-[4px] border border-semantic-border-neutral-primary group-data-[state=checked]:border-semantic-controls-background-checked group-data-[state=checked]:bg-semantic-controls-background-checked";
 var DropdownMulti = React7.forwardRef(
   ({
     label,
@@ -1060,7 +1060,7 @@ var DropdownMulti = React7.forwardRef(
     const shouldShowSupportingText = supportingText ?? Boolean(resolvedSupportText);
     const resolvedSupportIcon = supportIcon ?? showHelperIcon ?? false;
     const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${triggerId}-helper` : void 0;
-    const helperTextColor = error ? "text-semantic-text-semantic-error-subtle" : "text-semantic-text-neutral-tertiary";
+    const helperTextColor = error ? "text-semantic-text-error-subtle" : "text-semantic-text-neutral-tertiary";
     const HelperIcon = error ? InfoFilled2 : resolvedSupportIcon ? Info2 : null;
     const allSelected = options.length > 0 && value.length === options.length;
     const handleCheckedChange = (optValue, checked) => {
@@ -1105,7 +1105,7 @@ var DropdownMulti = React7.forwardRef(
             "data-state": open ? "open" : "closed",
             className: cn7(
               "group flex min-h-8 h-8 w-full flex-wrap items-center gap-1 rounded-sm bg-semantic-background-neutral-primary px-3 py-1 text-left font-sans text-sm leading-6 font-normal outline-none transition-all duration-200 ease-out",
-              error ? "border border-semantic-border-semantic-error-default hover:border-semantic-border-semantic-error-default focus:border-semantic-border-semantic-error-default" : "border border-semantic-border-neutral-primary hover:border-semantic-border-neutralInverse-primary focus:border-semantic-border-neutralInverse-primary",
+              error ? "border border-semantic-border-error-default hover:border-semantic-border-error-default focus:border-semantic-border-error-default" : "border border-semantic-border-neutral-primary hover:border-semantic-input-border-hover focus:border-semantic-input-border-active",
               "focus-visible:outline-none",
               "disabled:cursor-not-allowed disabled:bg-semantic-background-neutral-tertiary disabled:border-semantic-border-neutral-tertiary disabled:text-semantic-text-neutral-disabled"
             ),
@@ -1175,7 +1175,7 @@ var DropdownMulti = React7.forwardRef(
                         Tickmark,
                         {
                           size: 12,
-                          className: "opacity-semantic-hidden !text-semantic-text-neutralInverse-primary group-data-[state=checked]:opacity-semantic-full"
+                          className: "opacity-semantic-hidden !text-semantic-text-neutral-inverse-primary group-data-[state=checked]:opacity-semantic-full"
                         }
                       ) }),
                       selectAllLabel
@@ -1197,7 +1197,7 @@ var DropdownMulti = React7.forwardRef(
                       Tickmark,
                       {
                         size: 12,
-                        className: "opacity-semantic-hidden !text-semantic-text-neutralInverse-primary group-data-[state=checked]:opacity-semantic-full"
+                        className: "opacity-semantic-hidden !text-semantic-text-neutral-inverse-primary group-data-[state=checked]:opacity-semantic-full"
                       }
                     ) }),
                     opt.label
@@ -1222,7 +1222,7 @@ var DropdownMulti = React7.forwardRef(
               HelperIcon,
               {
                 size: 16,
-                className: cn7(error ? "text-semantic-text-semantic-error-subtle" : "text-semantic-text-neutral-primary", "shrink-0"),
+                className: cn7(error ? "text-semantic-text-error-subtle" : "text-semantic-text-neutral-primary", "shrink-0"),
                 "aria-hidden": "true"
               }
             ),
@@ -1251,12 +1251,12 @@ var searchFieldVariants = cva8(
     // 14px font, 24px line-height
     "px-3 py-1",
     // 12px horizontal, 4px vertical
-    // Default state — semantic background, border
+    // Default state — semantic background, border
     "bg-semantic-background-neutral-primary border-semantic-border-neutral-primary",
     // Hover state
-    "hover:border-semantic-border-neutralInverse-primary",
+    "hover:border-semantic-input-border-hover",
     // Focus-within (Active/Typing) state
-    "focus-within:border-semantic-border-neutralInverse-primary",
+    "focus-within:border-semantic-border-neutral-inverse-primary",
     // Disabled state
     "has-[:disabled]:bg-semantic-background-neutral-tertiary has-[:disabled]:border-semantic-border-neutral-tertiary",
     "has-[:disabled]:cursor-not-allowed",
@@ -1268,7 +1268,7 @@ var searchFieldVariants = cva8(
   }
 );
 var searchInputVariants = cva8([
-  // Base input styles — semantic background, text
+  // Base input styles — semantic background, text
   "flex-1 bg-semantic-background-transparent border-none outline-none",
   "text-semantic-text-neutral-primary placeholder:text-semantic-text-neutral-tertiary",
   "focus:text-semantic-text-neutral-primary",
@@ -1334,7 +1334,7 @@ var SearchField = React8.forwardRef(
           onClick: handleClear,
           className: cn8(
             "shrink-0 flex items-center justify-center",
-            // clear button default: neutral-900 has no semantic token — left as-is
+            // clear button default: neutral-900 has no semantic token — left as-is
             "text-neutral-900 hover:text-semantic-text-neutral-primary",
             "transition-colors duration-200 ease-out",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-800 focus-visible:ring-offset-2 rounded-sm"
@@ -1365,12 +1365,12 @@ var textareaVariants = cva9(
     // 12px horizontal, 4px vertical
     "outline-none resize-none",
     // Fixed height, no resize
-    // Default state — semantic background, border, text
+    // Default state — semantic background, border, text
     "bg-semantic-background-neutral-primary border-semantic-border-neutral-primary text-semantic-text-neutral-tertiary placeholder:text-semantic-text-neutral-tertiary",
     // Hover state
-    "hover:border-semantic-border-neutralInverse-primary",
+    "hover:border-semantic-input-border-hover",
     // Focus (Active/Typing) state
-    "focus:border-semantic-border-neutralInverse-primary focus:text-semantic-text-neutral-primary",
+    "focus:border-semantic-input-border-hover focus:text-semantic-text-neutral-primary",
     // Caret (cursor) color
     "caret-semantic-text-neutral-primary",
     // Disabled state
@@ -1384,11 +1384,11 @@ var textareaVariants = cva9(
       variant: {
         default: "",
         error: [
-          "border-semantic-border-semantic-error-subtle focus:border-semantic-border-semantic-error-subtle",
+          "border-semantic-border-error-subtle focus:border-semantic-border-error-subtle",
           "text-semantic-text-neutral-primary focus:text-semantic-text-neutral-primary"
         ],
         success: [
-          "border-semantic-border-semantic-success-subtle focus:border-semantic-border-semantic-success-subtle",
+          "border-semantic-border-success-subtle focus:border-semantic-border-success-subtle",
           "text-semantic-text-neutral-primary focus:text-semantic-text-neutral-primary"
         ]
       },
@@ -1455,7 +1455,7 @@ var Textarea = React9.forwardRef(
     const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${textareaId}-helper` : void 0;
     const shouldShowCharacterCount = characterCount ?? showCounter;
     const countText = count ?? `${currentLength}/${maxLength}`;
-    const helperTextColor = error ? "text-semantic-text-semantic-error-subtle" : success ? "text-semantic-text-semantic-success-subtle" : "text-semantic-text-neutral-tertiary";
+    const helperTextColor = error ? "text-semantic-text-error-subtle" : success ? "text-semantic-text-success-subtle" : "text-semantic-text-neutral-tertiary";
     const HelperIcon = error ? InfoFilled3 : success ? TickmarkFilled2 : resolvedSupportIcon ? Info3 : null;
     return /* @__PURE__ */ jsxs8("div", { className: "w-full", children: [
       label && /* @__PURE__ */ jsx9(
@@ -1499,7 +1499,7 @@ var Textarea = React9.forwardRef(
                 {
                   size: 16,
                   className: cn9(
-                    error ? "text-semantic-text-semantic-error-subtle" : success ? "text-semantic-text-semantic-success-subtle" : "text-semantic-text-neutral-primary"
+                    error ? "text-semantic-text-error-subtle" : success ? "text-semantic-text-success-subtle" : "text-semantic-text-neutral-primary"
                   ),
                   "aria-hidden": "true"
                 }
@@ -1541,7 +1541,7 @@ var tooltipContentVariants = cva10(
     // Base styles
     "z-50 rounded-sm",
     // Removed overflow-hidden to allow arrows to show
-    "bg-semantic-background-neutralInverse-primary text-semantic-text-neutralInverse-primary",
+    "bg-semantic-background-neutral-inverse-primary text-semantic-text-neutral-inverse-primary",
     "px-4 py-1",
     // 16px horizontal, 4px vertical
     "text-xs font-medium leading-4",
@@ -1646,13 +1646,13 @@ var TooltipContent = React10.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs9("div", { className: "w-full relative", children: [
-            /* @__PURE__ */ jsx10("div", { className: "text-xs font-medium leading-4 text-semantic-text-neutralInverse-primary", children: title }),
-            resolvedDescription && /* @__PURE__ */ jsx10("div", { className: "text-xs font-normal leading-4 text-semantic-text-neutralInverse-primary opacity-semantic-description mt-1", children: resolvedDescription }),
+            /* @__PURE__ */ jsx10("div", { className: "text-xs font-medium leading-4 text-semantic-text-neutral-inverse-primary", children: title }),
+            resolvedDescription && /* @__PURE__ */ jsx10("div", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-inverse-primary opacity-semantic-description mt-1", children: resolvedDescription }),
             resolvedCloseIcon && /* @__PURE__ */ jsx10(
               "button",
               {
                 onClick: onClose,
-                className: "absolute top-0 right-0 text-semantic-text-neutralInverse-primary hover:opacity-semantic-hover transition-opacity",
+                className: "absolute top-0 right-0 text-semantic-text-neutral-inverse-primary hover:opacity-semantic-hover transition-opacity",
                 "aria-label": "Close tooltip",
                 type: "button",
                 children: /* @__PURE__ */ jsx10(Close3, { size: 16 })
@@ -1707,7 +1707,7 @@ var ProgressBar = React11.forwardRef(
             "div",
             {
               className: cn11(
-                "rounded-full overflow-hidden bg-semantic-background-neutral-tertiary transition-colors shrink-0",
+                "rounded-full overflow-hidden bg-semantic-background-primary-subtle transition-colors shrink-0",
                 fluid && "w-full"
               ),
               style: trackStyle,
@@ -1716,7 +1716,7 @@ var ProgressBar = React11.forwardRef(
                 {
                   className: cn11(
                     "h-full rounded-full transition-all duration-200 ease-out",
-                    percentage === 100 ? "bg-semantic-background-semantic-success-default" : "bg-semantic-background-neutralInverse-primary"
+                    percentage === 100 ? "bg-semantic-background-success-default" : "bg-semantic-background-primary-default"
                   ),
                   style: {
                     width: `${percentage}%`,
@@ -1821,7 +1821,7 @@ var tabsTriggerVariants = cva12(
         underline: [
           "px-3 py-1 border-b-2 -mb-[1px] border-semantic-border-transparent",
           "text-semantic-text-neutral-tertiary hover:text-semantic-text-neutral-primary",
-          "data-[state=active]:text-semantic-text-neutral-primary data-[state=active]:border-semantic-border-semantic-info-subtle data-[state=active]:border-b-2",
+          "data-[state=active]:text-semantic-text-neutral-primary data-[state=active]:border-semantic-input-border-active data-[state=active]:border-b-2",
           "disabled:text-semantic-text-neutral-disabled"
         ],
         iconOnly: [
@@ -1977,7 +1977,7 @@ var MenuTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
     className: cn15(
       "inline-flex items-center justify-center rounded-sm",
       "text-semantic-text-neutral-primary",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-0",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutral-inverse-primary focus-visible:ring-offset-0",
       "hover:bg-semantic-background-neutral-tertiary",
       className
     ),
@@ -2132,7 +2132,7 @@ var DrawerTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx16(
   "h2",
   {
     className: cn16(
-      // Figma: 20px / 600 / 28px — fontSize.xl + lineHeight.lg from tokens
+      // Figma: 20px / 600 / 28px — fontSize.xl + lineHeight.lg from tokens
       "text-xl font-semibold leading-lg text-semantic-text-neutral-primary break-words",
       className
     ),
@@ -2148,7 +2148,7 @@ var DrawerDescription = ({
   "p",
   {
     className: cn16(
-      // Figma: 14px / 400 / 24px, Text–Neutral–Tertiary (#7C7C7C)
+      // Figma: 14px / 400 / 24px, Text–Neutral–Tertiary (#7C7C7C)
       "text-sm font-normal leading-6 text-semantic-text-neutral-tertiary break-words",
       className
     ),
@@ -2183,9 +2183,9 @@ var DrawerContent = React16.forwardRef(
         DialogPrimitive.Overlay,
         {
           className: cn16(
-            "fixed inset-0 z-50 bg-semantic-background-neutralInverse-primary opacity-semantic-disabled",
+            "fixed inset-0 z-50 bg-semantic-background-neutral-inverse-primary opacity-semantic-disabled",
             // tailwindcss-animate: `.animate-in` bakes in animationDuration DEFAULT (~150ms),
-            // which overrides plain `duration-*` in the cascade — `!duration-*` fixes it.
+            // which overrides plain `duration-*` in the cascade — `!duration-*` fixes it.
             "!duration-700 ease-in-out",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
@@ -2379,7 +2379,7 @@ function PopupContent({
           {
             className: cn18(
               "w-full rounded-sm px-4 py-3",
-              showBodyBox ? "bg-semantic-background-semantic-info-subtle" : "bg-transparent"
+              showBodyBox ? "bg-semantic-background-info-subtle" : "bg-transparent"
             ),
             children
           }
@@ -2435,7 +2435,7 @@ function Popup({
   const resolvedCtaText = showCTA ? ctaText : void 0;
   const resolvedCancelText = showCTA ? cancelText : void 0;
   return /* @__PURE__ */ jsx18(DialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(DialogPrimitive2.Portal, { children: [
-    showOverlay && /* @__PURE__ */ jsx18(DialogPrimitive2.Overlay, { className: "fixed inset-0 z-50 bg-semantic-background-neutralInverse-primary opacity-semantic-disabled" }),
+    showOverlay && /* @__PURE__ */ jsx18(DialogPrimitive2.Overlay, { className: "fixed inset-0 z-50 bg-semantic-background-neutral-inverse-primary opacity-semantic-disabled" }),
     /* @__PURE__ */ jsx18(
       DialogPrimitive2.Content,
       {
@@ -2560,86 +2560,86 @@ var badgeVariants = cva14(
       }
     },
     compoundVariants: [
-      // Big: rounded/pill 48×24, number/notification 24×24
+      // Big: rounded/pill 48×24, number/notification 24×24
       { size: "big", variant: "rounded", class: "h-6 min-w-12 py-1 px-2" },
       { size: "big", variant: "pill", class: "h-6 min-w-12 py-1 px-2" },
       { size: "big", variant: "number", class: "h-6 w-6 p-0" },
       { size: "big", variant: "notification", class: "h-6 w-6 p-0" },
-      // Small: rounded/pill 48×20, number/notification 20×20; padding top=2 bottom=2 left=8 right=8
+      // Small: rounded/pill 48×20, number/notification 20×20; padding top=2 bottom=2 left=8 right=8
       { size: "small", variant: "rounded", class: "h-5 min-w-12 py-0.5 px-2" },
       { size: "small", variant: "pill", class: "h-5 min-w-12 py-0.5 px-2" },
       { size: "small", variant: "number", class: "h-5 w-5 p-0" },
       { size: "small", variant: "notification", class: "h-5 w-5 p-0" },
-      // Info (subtle/solid from semantic tokens)
+      // Info (badge-specific semantic tokens)
       {
         state: "info",
         appearance: "outlined",
-        class: "bg-semantic-background-semantic-info-subtle border-semantic-border-semantic-info-subtle text-semantic-text-neutral-primary"
+        class: "bg-semantic-badge-background-subtle-info border-semantic-badge-border-info text-semantic-badge-text-black"
       },
       {
         state: "info",
         appearance: "solid",
-        class: "bg-semantic-background-semantic-info-default text-semantic-text-semantic-info-default"
+        class: "bg-semantic-badge-background-solid-info text-semantic-badge-text-white"
       },
       // Success
       {
         state: "success",
         appearance: "outlined",
-        class: "bg-semantic-background-semantic-success-subtle border-semantic-border-semantic-success-subtle text-semantic-text-neutral-primary"
+        class: "bg-semantic-badge-background-subtle-success border-semantic-badge-border-success text-semantic-badge-text-black"
       },
       {
         state: "success",
         appearance: "solid",
-        class: "bg-semantic-background-semantic-success-default text-semantic-text-semantic-success-default"
+        class: "bg-semantic-badge-background-solid-success text-semantic-badge-text-white"
       },
       // Warning
       {
         state: "warning",
         appearance: "outlined",
-        class: "bg-semantic-background-semantic-warning-subtle border-semantic-border-semantic-warning-subtle text-semantic-text-neutral-primary"
+        class: "bg-semantic-badge-background-subtle-warning border-semantic-badge-border-warning text-semantic-badge-text-black"
       },
       {
         state: "warning",
         appearance: "solid",
-        class: "bg-semantic-background-semantic-warning-default text-semantic-text-semantic-warning-default"
+        class: "bg-semantic-badge-background-solid-warning text-semantic-badge-text-black"
       },
       // Error
       {
         state: "error",
         appearance: "outlined",
-        class: "bg-semantic-background-semantic-error-subtle border-semantic-border-semantic-error-subtle text-semantic-text-neutral-primary"
+        class: "bg-semantic-badge-background-subtle-error border-semantic-badge-border-error text-semantic-badge-text-black"
       },
       {
         state: "error",
         appearance: "solid",
-        class: "bg-semantic-background-semantic-error-default text-semantic-text-semantic-error-default"
+        class: "bg-semantic-badge-background-solid-error text-semantic-badge-text-white"
       },
       // Neutral
       {
         state: "neutral",
         appearance: "outlined",
-        class: "bg-semantic-background-neutral-tertiary border-semantic-border-neutral-primary text-semantic-text-neutral-primary"
+        class: "bg-semantic-badge-background-subtle-neutral border-semantic-badge-border-neutral text-semantic-badge-text-black"
       },
       {
         state: "neutral",
         appearance: "solid",
-        class: "bg-neutral-400 text-neutral-1100"
+        class: "bg-semantic-badge-background-solid-neutral text-semantic-badge-text-black"
       },
-      // Process (purple: outlined = bg purple-200, border purple-700, text neutral-1100; solid = bg purple-700, text white)
+      // Process
       {
         state: "process",
         appearance: "outlined",
-        class: "bg-purple-200 border-purple-700 text-neutral-1100"
+        class: "bg-semantic-badge-background-subtle-process border-semantic-badge-border-process text-semantic-badge-text-black"
       },
       {
         state: "process",
         appearance: "solid",
-        class: "bg-purple-700 text-white"
+        class: "bg-semantic-badge-background-solid-process text-semantic-badge-text-white"
       },
       {
         state: "action",
         appearance: "outlined",
-        class: "bg-semantic-background-semantic-action-subtle border-neutral-400 text-semantic-text-neutral-primary"
+        class: "bg-semantic-badge-background-subtle-action border-semantic-badge-border-action text-semantic-badge-text-black"
       }
     ],
     defaultVariants: {
@@ -2660,13 +2660,13 @@ var leadingIconMap = {
   action: InfoFilled4
 };
 var leadingIconOutlinedColorClass = {
-  info: "!text-blue-600",
-  success: "!text-green-800",
-  warning: "!text-orange-700",
-  error: "!text-red-800",
-  neutral: "!text-neutral-1100",
-  process: "!text-purple-700",
-  action: "!text-neutral-400"
+  info: "!text-semantic-badge-icon-subtle-info",
+  success: "!text-semantic-badge-icon-subtle-success",
+  warning: "!text-semantic-badge-icon-subtle-warning",
+  error: "!text-semantic-badge-icon-subtle-error",
+  neutral: "!text-semantic-badge-icon-subtle-neutral",
+  process: "!text-semantic-badge-border-process",
+  action: "!text-semantic-badge-border-action"
 };
 var Badge = React19.forwardRef(
   ({
@@ -2720,7 +2720,7 @@ var Badge = React19.forwardRef(
               size: leadingIconSize,
               className: cn19(
                 "shrink-0",
-                resolvedAppearance === "solid" ? "text-neutral-50" : leadingIconOutlinedColorClass[resolvedState]
+                resolvedAppearance === "solid" ? resolvedState === "info" ? "!text-semantic-badge-icon-solid-info" : "text-neutral-50" : leadingIconOutlinedColorClass[resolvedState]
               ),
               "aria-hidden": "true"
             }
@@ -2839,11 +2839,11 @@ var chipVariants = cva16(
     "inline-flex items-center justify-center gap-1.5 rounded-full border transition-colors duration-200 ease-out",
     "font-sans font-normal leading-5",
     // Default: 1px border
-    "bg-semantic-background-neutral-primary border border-semantic-border-neutral-primary text-semantic-text-neutral-primary",
+    "bg-semantic-chips-background-default border border-semantic-chips-border-default text-semantic-chips-text-default",
     // Hover
-    "hover:bg-semantic-background-neutral-tertiary hover:border-transparent",
+    "hover:bg-semantic-chips-background-hover hover:text-semantic-chips-text-hover hover:border-transparent",
     // Focused: 2px border neutralInverse primary so clearly distinct from default
-    "focus-within:border-2 focus-within:border-semantic-border-neutralInverse-primary focus-within:bg-semantic-background-neutral-primary focus-within:text-semantic-text-neutral-primary",
+    "focus-within:border-2 focus-within:border-semantic-chips-border-focused focus-within:bg-semantic-chips-background-default focus-within:text-semantic-chips-text-default",
     "focus-within:outline-none"
   ],
   {
@@ -2853,20 +2853,20 @@ var chipVariants = cva16(
         small: "h-6 min-w-[67px] py-1 px-3 gap-1 text-xs"
       },
       selected: {
-        true: "bg-semantic-background-neutralInverse-primary text-semantic-text-neutralInverse-primary border-semantic-border-transparent hover:bg-semantic-background-neutralInverse-primary",
+        true: "bg-semantic-chips-background-selected text-semantic-chips-text-selected border-semantic-border-transparent hover:bg-semantic-chips-background-selected hover:text-semantic-chips-text-selected",
         false: ""
       },
       disabled: {
-        true: "bg-semantic-background-neutral-disabled text-semantic-text-neutral-disabled border-semantic-border-transparent hover:bg-semantic-background-neutral-disabled cursor-not-allowed pointer-events-none",
+        true: "bg-semantic-chips-background-disabled text-semantic-chips-text-disabled border-semantic-border-transparent hover:bg-semantic-chips-background-disabled hover:text-semantic-chips-text-disabled cursor-not-allowed pointer-events-none",
         false: ""
       }
     },
     compoundVariants: [
-      { selected: true, disabled: true, class: "bg-semantic-background-neutral-disabled text-semantic-text-neutral-disabled" },
+      { selected: true, disabled: true, class: "bg-semantic-chips-background-disabled text-semantic-chips-text-disabled" },
       {
         selected: true,
         disabled: false,
-        class: "focus-within:border-2 focus-within:bg-semantic-background-neutralInverse-primary focus-within:text-semantic-text-neutralInverse-primary focus-within:border-semantic-border-neutralInverse-primary"
+        class: "focus-within:border-2 focus-within:bg-semantic-chips-background-selected focus-within:text-semantic-chips-text-selected focus-within:border-semantic-chips-border-focused"
       }
     ],
     defaultVariants: {
@@ -3087,7 +3087,7 @@ var Pagination = React22.forwardRef(
                     {
                       className: "inline-flex h-7 min-w-8 shrink-0 items-center justify-center px-2xs text-sm text-semantic-text-neutral-tertiary",
                       "aria-hidden": true,
-                      children: "\u2026"
+                      children: "..."
                     },
                     `ellipsis-${index}`
                   ) : /* @__PURE__ */ jsx22(
@@ -3099,7 +3099,7 @@ var Pagination = React22.forwardRef(
                       onClick: () => goToPage(item),
                       className: cn22(
                         "inline-flex h-7 min-w-8 shrink-0 items-center justify-center rounded-sm px-2 text-sm tabular-nums",
-                        item === page ? "bg-semantic-background-neutralInverse-primary text-semantic-text-neutralInverse-primary" : "bg-semantic-background-neutral-primary text-semantic-text-neutral-tertiary hover:bg-semantic-background-neutral-tertiary"
+                        item === page ? "bg-semantic-chips-background-selected text-semantic-chips-text-selected" : "bg-semantic-background-neutral-primary text-semantic-text-neutral-tertiary hover:bg-semantic-chips-background-hover hover:text-semantic-chips-text-hover"
                       ),
                       children: item
                     },
@@ -3142,15 +3142,15 @@ function getCircleClasses(states) {
       return cn23(
         circleBase,
         "bg-semantic-background-neutral-primary",
-        "border-semantic-border-neutralInverse-tertiary",
+        "border-semantic-border-neutral-inverse-tertiary",
         "text-semantic-text-neutral-primary"
       );
     case "complete":
       return cn23(
         circleBase,
-        "bg-semantic-background-semantic-success-subtle",
-        "border-semantic-border-semantic-success-subtle",
-        "text-semantic-text-semantic-success-subtle"
+        "bg-semantic-background-success-subtle",
+        "border-semantic-border-success-subtle",
+        "text-semantic-text-success-subtle"
       );
     case "default":
     default:
@@ -3187,7 +3187,7 @@ function getTextClasses(states) {
   }
 }
 function getLineColor(states) {
-  return states === "complete" ? "bg-semantic-background-semantic-success-default" : "bg-semantic-background-neutral-tertiary";
+  return states === "complete" ? "bg-semantic-background-success-default" : "bg-semantic-background-neutral-tertiary";
 }
 var Stepper = React23.forwardRef(
   ({
@@ -3232,7 +3232,7 @@ var Stepper = React23.forwardRef(
                   "aria-labelledby": titleId,
                   "aria-current": stepState === "inProgress" ? "step" : void 0,
                   className: circleClasses,
-                  children: stepState === "complete" ? /* @__PURE__ */ jsx23(Tickmark3, { size: 16, className: "text-semantic-icon-semantic-success-subtle", "aria-hidden": true }) : step.stepNumber ?? index + 1
+                  children: stepState === "complete" ? /* @__PURE__ */ jsx23(Tickmark3, { size: 16, className: "text-semantic-icon-success-subtle", "aria-hidden": true }) : step.stepNumber ?? index + 1
                 }
               ),
               shouldShowLine ? /* @__PURE__ */ jsx23("div", { className: cn23("w-[2px] min-h-0 flex-1 rounded-full", getLineColor(stepState)), "aria-hidden": true }) : null
@@ -3352,10 +3352,10 @@ var toastVariants = cva17(
   {
     variants: {
       variant: {
-        info: "border-l-semantic-border-semantic-info-subtle bg-semantic-background-semantic-info-subtle",
-        success: "border-l-semantic-border-semantic-success-subtle bg-semantic-background-semantic-success-subtle",
-        warning: "border-l-semantic-border-semantic-warning-subtle bg-semantic-background-semantic-warning-subtle",
-        error: "border-l-semantic-border-semantic-error-subtle bg-semantic-background-semantic-error-subtle"
+        info: "border-l-semantic-toast-border-info bg-semantic-toast-background-info",
+        success: "border-l-semantic-border-success-subtle bg-semantic-background-success-subtle",
+        warning: "border-l-semantic-border-warning-subtle bg-semantic-background-warning-subtle",
+        error: "border-l-semantic-border-error-subtle bg-semantic-background-error-subtle"
       },
       layout: {
         default: "h-14 items-center",
@@ -3399,10 +3399,10 @@ var Toast = React24.forwardRef(
       error: WarningFilled4
     }[resolvedTypes];
     const iconClassName = {
-      info: "!text-semantic-icon-semantic-info-subtle",
-      success: "!text-semantic-icon-semantic-success-subtle",
-      warning: "!text-semantic-icon-semantic-warning-subtle",
-      error: "!text-semantic-icon-semantic-error-subtle"
+      info: "!text-semantic-icon-info-subtle",
+      success: "!text-semantic-icon-success-subtle",
+      warning: "!text-semantic-icon-warning-subtle",
+      error: "!text-semantic-icon-error-subtle"
     }[resolvedTypes];
     return /* @__PURE__ */ jsxs19(
       "div",
@@ -3412,7 +3412,14 @@ var Toast = React24.forwardRef(
         className: cn24(toastVariants({ variant: resolvedTypes, layout }), className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx24("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx24(IconComponent, { size: 20, className: iconClassName, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx24("div", { className: "flex-shrink-0 mt-0.5", children: resolvedTypes === "info" ? /* @__PURE__ */ jsx24(
+            "span",
+            {
+              className: "inline-flex h-5 w-5 items-center justify-center rounded-full bg-semantic-toast-border-info text-semantic-text-neutral-inverse-primary text-xs font-semibold leading-none",
+              "aria-hidden": "true",
+              children: "i"
+            }
+          ) : /* @__PURE__ */ jsx24(IconComponent, { size: 20, className: iconClassName, "aria-hidden": "true" }) }),
           /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-w-0 flex flex-col gap-4", children: [
             /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ jsx24("p", { className: "text-base font-medium leading-6 text-semantic-text-neutral-primary", children: title }),
@@ -3500,8 +3507,11 @@ var PageHeader = React25.forwardRef(
     breadcrumbs,
     ...props
   }, ref) => {
-    const isControlled = tab !== void 0;
-    const tabsValue = isControlled ? tab : defaultTab ?? tabs[0]?.value;
+    const firstTabValue = tabs[0]?.value;
+    const hasValidControlledTab = tab !== void 0 && tab !== "" && tabs.some((t) => t.value === tab);
+    const hasValidDefaultTab = defaultTab !== void 0 && defaultTab !== "" && tabs.some((t) => t.value === defaultTab);
+    const resolvedTabValue = hasValidControlledTab ? tab : hasValidDefaultTab ? defaultTab : firstTabValue;
+    const isControlled = hasValidControlledTab;
     const hasTabs = tabs.length > 0;
     const derivedTertiaryAction = ctas && firstCta ? { label: firstCtaLabel, variant: "primary", icon: null } : void 0;
     const derivedSecondaryAction = ctas && secondCta ? { label: secondCtaLabel, variant: "secondary", icon: null } : void 0;
@@ -3593,13 +3603,21 @@ var PageHeader = React25.forwardRef(
               Tabs,
               {
                 type: "underline",
-                ...isControlled ? { value: tabsValue, onValueChange: onTabChange } : {
-                  defaultValue: defaultTab ?? tabs[0]?.value,
+                ...isControlled ? { value: resolvedTabValue, onValueChange: onTabChange } : {
+                  defaultValue: resolvedTabValue,
                   onValueChange: onTabChange
                 },
                 className: "flex-1 pt-5",
                 children: [
-                  /* @__PURE__ */ jsx25(Tabs.List, { children: tabs.map((t) => /* @__PURE__ */ jsx25(Tabs.Trigger, { value: t.value, children: t.label }, t.value)) }),
+                  /* @__PURE__ */ jsx25(Tabs.List, { children: tabs.map((t) => /* @__PURE__ */ jsx25(
+                    Tabs.Trigger,
+                    {
+                      value: t.value,
+                      className: "data-[state=active]:border-semantic-input-border-active",
+                      children: t.label
+                    },
+                    t.value
+                  )) }),
                   tabs.map((t) => /* @__PURE__ */ jsx25(Tabs.Content, { value: t.value, className: "hidden" }, t.value))
                 ]
               }
@@ -3609,13 +3627,21 @@ var PageHeader = React25.forwardRef(
             Tabs,
             {
               type: "underline",
-              ...isControlled ? { value: tabsValue, onValueChange: onTabChange } : {
-                defaultValue: defaultTab ?? tabs[0]?.value,
+              ...isControlled ? { value: resolvedTabValue, onValueChange: onTabChange } : {
+                defaultValue: resolvedTabValue,
                 onValueChange: onTabChange
               },
               className: "-mb-px mt-0 px-5",
               children: [
-                /* @__PURE__ */ jsx25(Tabs.List, { className: "mt-0", children: tabs.map((t) => /* @__PURE__ */ jsx25(Tabs.Trigger, { value: t.value, children: t.label }, t.value)) }),
+                /* @__PURE__ */ jsx25(Tabs.List, { className: "mt-0", children: tabs.map((t) => /* @__PURE__ */ jsx25(
+                  Tabs.Trigger,
+                  {
+                    value: t.value,
+                    className: "data-[state=active]:border-semantic-input-border-active",
+                    children: t.label
+                  },
+                  t.value
+                )) }),
                 tabs.map((t) => /* @__PURE__ */ jsx25(Tabs.Content, { value: t.value, className: "hidden" }, t.value))
               ]
             }
@@ -4042,7 +4068,7 @@ import { CloudUpload, DocumentPdf, Close as Close11, Delete, Retry, TickmarkFill
 import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var uploadBoxVariants = cva20([
   "relative flex flex-col items-center justify-center w-full",
-  "rounded-sm border border-dashed border-semantic-border-neutral-primary hover:border-semantic-border-neutralInverse-primary",
+  "rounded-sm border border-dashed border-semantic-border-neutral-primary hover:border-semantic-input-border-hover",
   "bg-semantic-background-neutral-primary",
   "transition-colors duration-200 ease-out",
   "cursor-pointer",
@@ -4148,7 +4174,7 @@ var Upload = React30.forwardRef(
         children: [
           /* @__PURE__ */ jsxs24("label", { className: "text-xs font-medium leading-4 text-semantic-text-neutral-primary", children: [
             label,
-            (asterisk ?? required) && /* @__PURE__ */ jsx30("span", { className: "text-semantic-text-semantic-error-subtle ml-0.5", children: "*" })
+            (asterisk ?? required) && /* @__PURE__ */ jsx30("span", { className: "text-semantic-text-error-subtle ml-0.5", children: "*" })
           ] }),
           /* @__PURE__ */ jsxs24(
             "div",
@@ -4184,7 +4210,7 @@ var Upload = React30.forwardRef(
                   }
                 ),
                 /* @__PURE__ */ jsxs24("div", { className: "relative z-0 flex flex-col items-center gap-2 text-center pointer-events-none", children: [
-                  /* @__PURE__ */ jsx30("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-semantic-background-semantic-info-subtle text-semantic-icon-semantic-info-subtle", children: /* @__PURE__ */ jsx30(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
+                  /* @__PURE__ */ jsx30("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-semantic-background-info-subtle text-semantic-icon-info-subtle", children: /* @__PURE__ */ jsx30(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
                   /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1", children: [
                     /* @__PURE__ */ jsxs24("p", { className: "text-sm leading-6 text-semantic-text-neutral-primary", children: [
                       /* @__PURE__ */ jsx30("span", { className: "font-normal", children: "Drop your files here or " }),
@@ -4239,7 +4265,7 @@ var uploadFileItemBoxVariants = cva20(
       status: {
         uploading: "border-semantic-border-neutral-secondary",
         complete: "border-semantic-border-neutral-secondary",
-        failed: "border-semantic-border-semantic-error-subtle"
+        failed: "border-semantic-border-error-subtle"
       }
     },
     defaultVariants: {
@@ -4275,7 +4301,7 @@ var UploadFileItem = React30.forwardRef(
               /* @__PURE__ */ jsx30(DocumentPdf, { size: 24, className: "shrink-0 text-semantic-text-neutral-primary", "aria-hidden": true }),
               /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
                 /* @__PURE__ */ jsx30("p", { className: "truncate text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: fileName }),
-                status === "failed" ? /* @__PURE__ */ jsx30("p", { className: "text-xs font-normal leading-4 text-semantic-text-semantic-error-subtle", children: "Upload failed" }) : fileSize ? /* @__PURE__ */ jsx30("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: fileSize }) : null
+                status === "failed" ? /* @__PURE__ */ jsx30("p", { className: "text-xs font-normal leading-4 text-semantic-text-error-subtle", children: "Upload failed" }) : fileSize ? /* @__PURE__ */ jsx30("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: fileSize }) : null
               ] })
             ] }),
             /* @__PURE__ */ jsxs24("div", { className: "flex shrink-0 flex-col items-end justify-center", children: [
@@ -4284,19 +4310,19 @@ var UploadFileItem = React30.forwardRef(
                 {
                   type: "button",
                   onClick: onCancel,
-                  className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
+                  className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutral-inverse-primary focus-visible:ring-offset-1",
                   "aria-label": "Cancel upload",
                   children: /* @__PURE__ */ jsx30(Close11, { size: 20, "aria-hidden": true })
                 }
               ),
               status === "complete" && /* @__PURE__ */ jsx30(Fragment6, { children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx30(TickmarkFilled6, { size: 20, className: "!text-semantic-icon-semantic-success-subtle shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ jsx30(TickmarkFilled6, { size: 20, className: "!text-semantic-icon-success-subtle shrink-0", "aria-hidden": true }),
                 /* @__PURE__ */ jsx30(
                   "button",
                   {
                     type: "button",
                     onClick: onDelete,
-                    className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
+                    className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutral-inverse-primary focus-visible:ring-offset-1",
                     "aria-label": "Delete file",
                     children: /* @__PURE__ */ jsx30(Delete, { size: 20, "aria-hidden": true })
                   }
@@ -4308,7 +4334,7 @@ var UploadFileItem = React30.forwardRef(
                   {
                     type: "button",
                     onClick: onRetry,
-                    className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
+                    className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutral-inverse-primary focus-visible:ring-offset-1",
                     "aria-label": "Retry upload",
                     children: /* @__PURE__ */ jsx30(Retry, { size: 20, "aria-hidden": true })
                   }
@@ -4318,7 +4344,7 @@ var UploadFileItem = React30.forwardRef(
                   {
                     type: "button",
                     onClick: onDelete,
-                    className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
+                    className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutral-inverse-primary focus-visible:ring-offset-1",
                     "aria-label": "Delete file",
                     children: /* @__PURE__ */ jsx30(Delete, { size: 20, "aria-hidden": true })
                   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sangam-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",