sangam-ui 1.0.2 → 1.0.4

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"
         ],
-        // Link: semantic info default text
-        link: [
-          "bg-transparent text-semantic-background-semantic-info-default underline-offset-4",
+        // Tertiary (low-emphasis / link style): semantic info default text
+        tertiary: [
+          "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,31 +161,51 @@ 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-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) {
+  if (value === void 0 || value === "") return "primary";
+  if (value === "link") return "tertiary";
+  return value;
+}
 var Button = React2.forwardRef(
   ({
     className,
-    variant,
+    type: typeProp,
+    htmlType = "button",
+    variant: variantProp,
     size,
     iconOnly = false,
     asChild = false,
     icon,
     leadingIcon = false,
     trailingIcon = false,
+    label,
     children,
-    loading = false,
+    state = "enabled",
+    hover = false,
     disabled,
     "aria-busy": ariaBusy,
     "aria-disabled": ariaDisabled,
     ...props
   }, ref) => {
-    const isDisabled = disabled ?? loading;
-    const showLoader = loading && !asChild;
+    const normalized = normalizeButtonType(variantProp ?? typeProp);
+    const isLoaderType = normalized === "loader";
+    const cvaVariant = isLoaderType ? "primary" : normalized;
+    const resolvedDisabled = disabled !== void 0 ? disabled : state === "disabled";
+    const isDisabled = isLoaderType || resolvedDisabled;
+    const showLoader = isLoaderType && !asChild;
     const loaderSize = size === "small" ? "extraSmall" : "small";
     const iconPixelSize = size === "small" ? 16 : 20;
     const iconSizeClass = size === "small" ? "h-4 w-4" : "h-5 w-5";
-    const loaderColor = variant === "primary" || variant === "danger" ? { color: BUTTON_LOADER_COLOR, colorTransparent: BUTTON_LOADER_COLOR_TRANSPARENT } : void 0;
+    const loaderColor = cvaVariant === "primary" || cvaVariant === "danger" ? { color: BUTTON_LOADER_COLOR, colorTransparent: BUTTON_LOADER_COLOR_TRANSPARENT } : void 0;
+    const labelContent = label ?? children;
     const Comp = asChild && !showLoader ? Slot : "button";
     const hasIcon = !!icon;
     const showIconOnly = iconOnly && hasIcon;
@@ -201,10 +221,16 @@ var Button = React2.forwardRef(
         isDomElement ? { className: mergedClassName } : { size: iconPixelSize, className: mergedClassName }
       );
     }
+    const useSlot = asChild && !showLoader;
     return /* @__PURE__ */ jsx2(
       Comp,
       {
-        className: cn2(buttonVariants({ variant, size, iconOnly, className })),
+        ...!useSlot ? { type: htmlType } : {},
+        className: cn2(
+          buttonVariants({ variant: cvaVariant, size, iconOnly }),
+          hover && hoverPreviewClassByVariant[isLoaderType ? "primary" : cvaVariant],
+          className
+        ),
         ref,
         disabled: isDisabled,
         "data-loading": showLoader ? true : void 0,
@@ -221,7 +247,7 @@ var Button = React2.forwardRef(
           }
         ) : showIconOnly ? /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: renderIcon }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           showLeadingIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: renderIcon }),
-          children,
+          labelContent,
           showTrailingIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: renderIcon })
         ] })
       }
@@ -240,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",
@@ -276,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"
   ],
   {
@@ -306,13 +332,21 @@ var toggleThumbVariants = cva3(
   }
 );
 var Toggle = React3.forwardRef(
-  ({ className, size = "big", title, subtext, ...props }, ref) => {
-    const hasLabel = title != null || subtext != null;
+  ({ className, size = "big", title, subtitle, subtext, isOn, onIsOnChange, ...props }, ref) => {
+    const resolvedSubtitle = subtitle ?? subtext;
+    const resolvedChecked = isOn ?? props.checked;
+    const resolvedOnCheckedChange = (next) => {
+      onIsOnChange?.(next);
+      props.onCheckedChange?.(next);
+    };
+    const hasLabel = title != null || resolvedSubtitle != null;
     const switchEl = /* @__PURE__ */ jsx3(
       SwitchPrimitives.Root,
       {
         className: cn3(toggleVariants({ size }), !hasLabel && className),
         ...props,
+        checked: resolvedChecked,
+        onCheckedChange: resolvedOnCheckedChange,
         ref,
         children: /* @__PURE__ */ jsx3(
           SwitchPrimitives.Thumb,
@@ -328,7 +362,7 @@ var Toggle = React3.forwardRef(
       switchEl,
       /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-0", children: [
         title != null && /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: title }),
-        subtext != null && /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: subtext })
+        resolvedSubtitle != null && /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: resolvedSubtitle })
       ] })
     ] });
   }
@@ -345,7 +379,6 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var checkboxRootVariants = cva4(
   [
     "peer group flex shrink-0 items-center justify-center",
-    // 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"
   ],
@@ -366,21 +399,20 @@ var checkboxRootVariants = cva4(
 var checkboxInnerVariants = cva4(
   [
     "flex shrink-0 items-center justify-center rounded-xs border transition-all duration-200 ease-out",
-    // Default unchecked — semantic border/background
-    "border-semantic-border-neutral-primary bg-transparent",
-    "group-hover: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-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: {
       size: {
         big: "h-5 w-5",
-        // 20px inner (2px gap inside 24px)
         small: "h-4 w-4"
-        // 16px inner (2px gap inside 20px)
       }
     },
     defaultVariants: {
@@ -403,34 +435,65 @@ var checkboxIndicatorVariants = cva4(
   }
 );
 var Checkbox = React4.forwardRef(
-  ({ className, size = "big", disabled, title, subtext, ...props }, ref) => {
-    const hasLabel = title != null || subtext != null;
+  ({
+    className,
+    size = "big",
+    isOn,
+    onIsOnChange,
+    checked: checkedProp,
+    onCheckedChange,
+    state = "default",
+    text = true,
+    title: showTitle = true,
+    titletext = "",
+    subtext: showSubtext = true,
+    subtextText = "",
+    disabled: disabledProp,
+    ...props
+  }, ref) => {
+    const mergedCheckedState = isOn !== void 0 ? isOn : checkedProp;
+    const isControlled = isOn !== void 0 || checkedProp !== void 0;
+    const resolvedDisabled = disabledProp ?? state === "disabled";
+    const previewHover = state === "hover";
+    const handleCheckedChange = React4.useCallback(
+      (value) => {
+        const next = value === true;
+        onIsOnChange?.(next);
+        onCheckedChange?.(value);
+      },
+      [onIsOnChange, onCheckedChange]
+    );
+    const showTextColumn = text;
+    const hasLabelLayout = showTextColumn && (showTitle || showSubtext);
     const checkboxEl = /* @__PURE__ */ jsx4(
       CheckboxPrimitive.Root,
       {
         ref,
-        className: cn4(checkboxRootVariants({ size }), !hasLabel && className),
-        disabled,
         ...props,
+        className: cn4(checkboxRootVariants({ size }), !hasLabelLayout && className),
+        disabled: resolvedDisabled,
+        "data-preview-hover": previewHover ? "" : void 0,
+        ...isControlled && mergedCheckedState !== void 0 ? { checked: mergedCheckedState } : {},
+        onCheckedChange: handleCheckedChange,
         children: /* @__PURE__ */ jsx4("div", { className: cn4(checkboxInnerVariants({ size })), "aria-hidden": true, children: /* @__PURE__ */ jsx4(CheckboxPrimitive.Indicator, { className: cn4(checkboxIndicatorVariants({ size })), children: /* @__PURE__ */ jsx4(
           Check,
           {
             className: cn4(
               size === "big" ? "h-4 w-4" : "h-3 w-3",
-              "text-semantic-text-neutralInverse-primary",
-              disabled && "text-semantic-text-neutral-disabled"
+              "text-semantic-controls-icon-checked",
+              resolvedDisabled && "text-semantic-controls-icon-disabled"
             ),
             strokeWidth: 3
           }
         ) }) })
       }
     );
-    if (!hasLabel) return checkboxEl;
+    if (!hasLabelLayout) return checkboxEl;
     return /* @__PURE__ */ jsxs3("label", { className: cn4("inline-flex cursor-pointer items-center gap-3", className), children: [
       checkboxEl,
       /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-0", children: [
-        title != null && /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: title }),
-        subtext != null && /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: subtext })
+        showTitle && /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: titletext }),
+        showSubtext && /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: subtextText })
       ] })
     ] });
   }
@@ -446,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",
@@ -493,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: {
@@ -507,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: {
@@ -519,8 +582,9 @@ var radioDotVariants = cva5(
 var RadioGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(RadioGroupPrimitive.Root, { className: cn5("grid gap-2", className), ...props, ref }));
 RadioGroup.displayName = "RadioGroup";
 var Radio = React5.forwardRef(
-  ({ className, size = "big", disabled, title, subtext, ...props }, ref) => {
-    const hasLabel = title != null || subtext != null;
+  ({ className, size = "big", disabled, title, subtext, subText, ...props }, ref) => {
+    const resolvedSubtext = subText ?? subtext;
+    const hasLabel = title != null || resolvedSubtext != null;
     const radioEl = /* @__PURE__ */ jsx5(
       RadioGroupPrimitive.Item,
       {
@@ -536,7 +600,7 @@ var Radio = React5.forwardRef(
       radioEl,
       /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0", children: [
         title != null && /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: title }),
-        subtext != null && /* @__PURE__ */ jsx5("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: subtext })
+        resolvedSubtext != null && /* @__PURE__ */ jsx5("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: resolvedSubtext })
       ] })
     ] });
   }
@@ -566,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
@@ -582,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"
         ]
       },
@@ -628,16 +692,23 @@ var Input = React6.forwardRef(
     className,
     type = "text",
     label,
+    asterisk,
     required,
     error,
     success,
+    supportText,
+    supportingText,
     helperText,
     helperError,
     disabled,
     value,
-    showLabelIcon = false,
-    showHelperIcon = false,
+    infoIcon,
+    showLabelIcon,
+    supportIcon,
+    showHelperIcon,
     trailingIcon,
+    cta,
+    ctaType = "tertiary",
     ctaLabel,
     onCtaClick,
     ...props
@@ -645,11 +716,18 @@ var Input = React6.forwardRef(
     const variant = error ? "error" : success ? "success" : "default";
     const isFilled = !!value && value.toString().length > 0;
     const inputId = props.id || `input-${React6.useId()}`;
-    const helperTextId = helperText ? `${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 HelperIcon = error ? WarningFilled : success ? TickmarkFilled : showHelperIcon ? Info : null;
+    const resolvedAsterisk = asterisk ?? required ?? false;
+    const resolvedInfoIcon = infoIcon ?? showLabelIcon ?? false;
+    const resolvedSupportIcon = supportIcon ?? showHelperIcon ?? false;
+    const resolvedSupportText = supportText ?? helperText;
+    const shouldShowSupportingText = supportingText ?? Boolean(resolvedSupportText);
+    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-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 = Boolean(ctaLabel);
+    const hasCta = hasCtaToggle;
     const inputElement = /* @__PURE__ */ jsx6(
       "input",
       {
@@ -675,8 +753,8 @@ var Input = React6.forwardRef(
         Label,
         {
           htmlFor: inputId,
-          required,
-          endAdornment: showLabelIcon ? /* @__PURE__ */ jsx6(Info, { size: 16, className: "!text-semantic-text-neutral-tertiary shrink-0", "aria-hidden": "true" }) : void 0,
+          required: resolvedAsterisk,
+          endAdornment: resolvedInfoIcon ? /* @__PURE__ */ jsx6(Info, { size: 16, className: "!text-semantic-text-neutral-tertiary shrink-0", "aria-hidden": "true" }) : void 0,
           children: label
         }
       ),
@@ -686,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
           ),
@@ -715,29 +793,31 @@ 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
           ),
           children: [
             inputElement,
             /* @__PURE__ */ jsx6(
-              "button",
+              Button,
               {
-                type: "button",
+                type: ctaType,
+                size: "small",
+                state: disabled ? "disabled" : "enabled",
+                label: ctaText,
                 onClick: onCtaClick,
-                disabled,
-                className: "shrink-0 text-semantic-text-semantic-info-subtle text-sm font-normal hover:underline pl-2 pr-3 py-1 focus:outline-none focus-visible:ring-0 rounded",
-                children: ctaLabel
+                className: "shrink-0 px-2 py-0 h-auto min-h-0",
+                children: ctaText
               }
             )
           ]
         }
       ) : inputElement,
-      helperText && /* @__PURE__ */ jsxs5(
+      shouldShowSupportingText && resolvedSupportText && /* @__PURE__ */ jsxs5(
         "p",
         {
           id: helperTextId,
@@ -751,12 +831,12 @@ 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"
               }
             ),
-            helperText
+            resolvedSupportText
           ]
         }
       )
@@ -789,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: ""
       }
     },
@@ -826,6 +906,7 @@ var dropdownItemVariants = cva7([
 var Dropdown = React7.forwardRef(
   ({
     label,
+    asterisk,
     required,
     placeholder = "Input",
     options,
@@ -833,28 +914,37 @@ var Dropdown = React7.forwardRef(
     triggerMinWidth,
     error = false,
     disabled,
-    showLabelIcon = false,
+    infoIcon,
+    showLabelIcon,
+    supportingText,
+    supportText,
     helperText,
-    showHelperIcon = false,
+    supportIcon,
+    showHelperIcon,
     ...rootProps
   }, ref) => {
     const triggerId = React7.useId();
     const isDisabled = disabled ?? false;
-    const helperTextId = helperText ? `${triggerId}-helper` : void 0;
-    const helperTextColor = error ? "text-semantic-text-semantic-error-subtle" : "text-semantic-text-neutral-disabled";
-    const HelperIcon = error ? WarningFilled2 : showHelperIcon ? Info2 : null;
+    const resolvedAsterisk = asterisk ?? required ?? false;
+    const resolvedInfoIcon = infoIcon ?? showLabelIcon ?? false;
+    const resolvedSupportText = supportText ?? helperText;
+    const shouldShowSupportingText = supportingText ?? Boolean(resolvedSupportText);
+    const resolvedSupportIcon = supportIcon ?? showHelperIcon ?? false;
+    const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${triggerId}-helper` : void 0;
+    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(
         Label,
         {
           htmlFor: triggerId,
-          required,
-          endAdornment: showLabelIcon ? /* @__PURE__ */ jsx7(Info2, { size: 16, className: "shrink-0 !text-semantic-text-neutral-tertiary", "aria-hidden": "true" }) : void 0,
+          required: resolvedAsterisk,
+          endAdornment: resolvedInfoIcon ? /* @__PURE__ */ jsx7(Info2, { size: 16, className: "shrink-0 !text-semantic-text-neutral-tertiary", "aria-hidden": "true" }) : void 0,
           className: "!m-0",
           children: label
         }
       ),
-      /* @__PURE__ */ jsxs6(SelectPrimitive.Root, { ...rootProps, disabled: isDisabled, required, children: [
+      /* @__PURE__ */ jsxs6(SelectPrimitive.Root, { ...rootProps, disabled: isDisabled, required: resolvedAsterisk, children: [
         /* @__PURE__ */ jsxs6(
           SelectPrimitive.Trigger,
           {
@@ -903,7 +993,7 @@ var Dropdown = React7.forwardRef(
           }
         ) })
       ] }),
-      helperText && /* @__PURE__ */ jsxs6(
+      shouldShowSupportingText && resolvedSupportText && /* @__PURE__ */ jsxs6(
         "p",
         {
           id: helperTextId,
@@ -913,11 +1003,11 @@ 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"
               }
             ),
-            helperText
+            resolvedSupportText
           ]
         }
       )
@@ -940,10 +1030,11 @@ 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,
+    asterisk,
     required,
     placeholder = "Input",
     options,
@@ -953,15 +1044,24 @@ var DropdownMulti = React7.forwardRef(
     error = false,
     disabled,
     selectAllLabel = "Select all",
+    infoIcon,
     showLabelIcon = false,
+    supportingText,
+    supportText,
     helperText,
+    supportIcon,
     showHelperIcon = false
   }, ref) => {
     const triggerId = React7.useId();
     const [open, setOpen] = React7.useState(false);
-    const helperTextId = helperText ? `${triggerId}-helper` : void 0;
-    const helperTextColor = error ? "text-semantic-text-semantic-error-subtle" : "text-semantic-text-neutral-tertiary";
-    const HelperIcon = error ? InfoFilled2 : showHelperIcon ? Info2 : null;
+    const resolvedAsterisk = asterisk ?? required ?? false;
+    const resolvedInfoIcon = infoIcon ?? showLabelIcon ?? false;
+    const resolvedSupportText = supportText ?? helperText;
+    const shouldShowSupportingText = supportingText ?? Boolean(resolvedSupportText);
+    const resolvedSupportIcon = supportIcon ?? showHelperIcon ?? false;
+    const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${triggerId}-helper` : void 0;
+    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) => {
       if (checked) {
@@ -987,8 +1087,8 @@ var DropdownMulti = React7.forwardRef(
         Label,
         {
           htmlFor: triggerId,
-          required,
-          endAdornment: showLabelIcon ? /* @__PURE__ */ jsx7(Info2, { size: 16, className: "!text-semantic-text-neutral-tertiary shrink-0", "aria-hidden": "true" }) : void 0,
+          required: resolvedAsterisk,
+          endAdornment: resolvedInfoIcon ? /* @__PURE__ */ jsx7(Info2, { size: 16, className: "!text-semantic-text-neutral-tertiary shrink-0", "aria-hidden": "true" }) : void 0,
           children: label
         }
       ),
@@ -1005,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"
             ),
@@ -1075,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
@@ -1097,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
@@ -1109,7 +1209,7 @@ var DropdownMulti = React7.forwardRef(
           }
         ) })
       ] }),
-      helperText && /* @__PURE__ */ jsxs6(
+      shouldShowSupportingText && resolvedSupportText && /* @__PURE__ */ jsxs6(
         "p",
         {
           id: helperTextId,
@@ -1122,11 +1222,11 @@ 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"
               }
             ),
-            helperText
+            resolvedSupportText
           ]
         }
       )
@@ -1151,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",
@@ -1168,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",
@@ -1234,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"
@@ -1265,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
@@ -1284,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"
         ]
       },
@@ -1308,17 +1408,24 @@ var Textarea = React9.forwardRef(
   ({
     className,
     label,
+    asterisk,
     required,
     error,
     success,
+    supportText,
+    supportingText,
     helperText,
     helperError,
     disabled,
     value,
     rows = 3,
     maxLength = 250,
+    characterCount,
+    count,
     showCounter = true,
+    infoIcon,
     showLabelIcon = false,
+    supportIcon,
     showHelperIcon = false,
     onChange,
     ...props
@@ -1340,16 +1447,23 @@ var Textarea = React9.forwardRef(
       [onChange]
     );
     const textareaId = props.id || `textarea-${React9.useId()}`;
-    const helperTextId = helperText ? `${textareaId}-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 HelperIcon = error ? InfoFilled3 : success ? TickmarkFilled2 : showHelperIcon ? Info3 : null;
+    const resolvedAsterisk = asterisk ?? required ?? false;
+    const resolvedInfoIcon = infoIcon ?? showLabelIcon ?? false;
+    const resolvedSupportIcon = supportIcon ?? showHelperIcon ?? false;
+    const resolvedSupportText = supportText ?? helperText;
+    const shouldShowSupportingText = supportingText ?? Boolean(resolvedSupportText);
+    const helperTextId = shouldShowSupportingText && resolvedSupportText ? `${textareaId}-helper` : void 0;
+    const shouldShowCharacterCount = characterCount ?? showCounter;
+    const countText = count ?? `${currentLength}/${maxLength}`;
+    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(
         Label,
         {
           htmlFor: textareaId,
-          required,
-          endAdornment: showLabelIcon ? /* @__PURE__ */ jsx9(Info3, { size: 16, className: "text-semantic-text-neutral-primary shrink-0", "aria-hidden": "true" }) : void 0,
+          required: resolvedAsterisk,
+          endAdornment: resolvedInfoIcon ? /* @__PURE__ */ jsx9(Info3, { size: 16, className: "text-semantic-text-neutral-primary shrink-0", "aria-hidden": "true" }) : void 0,
           children: label
         }
       ),
@@ -1369,8 +1483,8 @@ var Textarea = React9.forwardRef(
           ...props
         }
       ),
-      (helperText || showCounter) && /* @__PURE__ */ jsxs8("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
-        helperText && /* @__PURE__ */ jsxs8(
+      (shouldShowSupportingText || shouldShowCharacterCount) && /* @__PURE__ */ jsxs8("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
+        shouldShowSupportingText && resolvedSupportText && /* @__PURE__ */ jsxs8(
           "p",
           {
             id: helperTextId,
@@ -1385,32 +1499,28 @@ 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"
                 }
               ),
-              helperText
+              resolvedSupportText
             ]
           }
         ),
-        showCounter && /* @__PURE__ */ jsxs8(
+        shouldShowCharacterCount && /* @__PURE__ */ jsx9(
           "div",
           {
             className: cn9(
               "text-xs leading-4 select-none",
               // 12px font, 16px line-height
               disabled ? "text-semantic-text-neutral-disabled" : "text-semantic-text-neutral-tertiary",
-              helperText ? "" : "ml-auto"
-              // Push to right if no helper text
+              shouldShowSupportingText && resolvedSupportText ? "" : "ml-auto"
+              // Push to right if no support text
             ),
             "aria-live": "polite",
             "aria-atomic": "true",
-            children: [
-              currentLength,
-              "/",
-              maxLength
-            ]
+            children: countText
           }
         )
       ] })
@@ -1431,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",
@@ -1470,19 +1580,26 @@ var TooltipContent = React10.forwardRef(
     className,
     variant,
     sideOffset = 12,
+    direction,
+    alignment,
     side = "bottom",
     align = "center",
     showArrow = true,
     title,
     description,
-    showCloseIcon = false,
+    descriptionText,
+    closeIcon,
     onClose,
     children,
     ...props
   }, ref) => {
-    const computedVariant = description || showCloseIcon ? "withDescription" : "default";
+    const resolvedDirection = direction ?? side ?? "bottom";
+    const resolvedAlignment = alignment === "middle" ? "center" : alignment ?? align ?? "center";
+    const resolvedDescription = typeof description === "string" ? description : description ? descriptionText ?? "Description" : void 0;
+    const resolvedCloseIcon = closeIcon;
+    const computedVariant = resolvedDescription || resolvedCloseIcon ? "withDescription" : "default";
     const finalVariant = variant || computedVariant;
-    const CaretComponent = {
+    const CaretComponentMap = {
       bottom: CaretUp,
       // Tooltip at bottom, arrow at top pointing up
       top: CaretDown,
@@ -1491,26 +1608,27 @@ var TooltipContent = React10.forwardRef(
       // Tooltip at left, arrow at right pointing right
       right: CaretLeft
       // Tooltip at right, arrow at left pointing left
-    }[side];
+    };
+    const CaretComponent = CaretComponentMap[resolvedDirection];
     const getCaretPosition = () => {
-      if (side === "bottom" || side === "top") {
+      if (resolvedDirection === "bottom" || resolvedDirection === "top") {
         const baseClasses = "absolute left-1/2 -translate-x-1/2";
-        const sideClass = side === "bottom" ? "-top-[8px]" : "-bottom-[8px]";
+        const sideClass = resolvedDirection === "bottom" ? "-top-[8px]" : "-bottom-[8px]";
         let alignClass = "";
-        if (align === "start") {
+        if (resolvedAlignment === "start") {
           alignClass = "!left-4 !translate-x-0";
-        } else if (align === "end") {
+        } else if (resolvedAlignment === "end") {
           alignClass = "!left-auto !right-4 !translate-x-0";
         }
         return `${baseClasses} ${sideClass} ${alignClass}`;
       }
-      if (side === "left" || side === "right") {
+      if (resolvedDirection === "left" || resolvedDirection === "right") {
         const baseClasses = "absolute top-1/2 -translate-y-1/2";
-        const sideClass = side === "left" ? "-right-[8px]" : "-left-[8px]";
+        const sideClass = resolvedDirection === "left" ? "-right-[8px]" : "-left-[8px]";
         let alignClass = "";
-        if (align === "start") {
+        if (resolvedAlignment === "start") {
           alignClass = "!top-auto !bottom-4 !translate-y-0";
-        } else if (align === "end") {
+        } else if (resolvedAlignment === "end") {
           alignClass = "!top-4 !translate-y-0";
         }
         return `${baseClasses} ${sideClass} ${alignClass}`;
@@ -1521,20 +1639,20 @@ var TooltipContent = React10.forwardRef(
       TooltipPrimitive.Content,
       {
         ref,
-        side,
-        align,
+        side: resolvedDirection,
+        align: resolvedAlignment,
         sideOffset,
         className: cn10(tooltipContentVariants({ variant: finalVariant }), "relative", className),
         ...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 }),
-            description && /* @__PURE__ */ jsx10("div", { className: "text-xs font-normal leading-4 text-semantic-text-neutralInverse-primary opacity-semantic-description mt-1", children: description }),
-            showCloseIcon && /* @__PURE__ */ jsx10(
+            /* @__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 })
@@ -1589,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,
@@ -1598,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}%`,
@@ -1703,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: [
@@ -1725,7 +1843,7 @@ function useTabsType() {
   return ctx?.tabType ?? "container";
 }
 var TabsRoot = React13.forwardRef(
-  ({ type = "container", className, ...props }, ref) => /* @__PURE__ */ jsx13(TabsContext.Provider, { value: { tabType: type }, children: /* @__PURE__ */ jsx13(TabsPrimitive.Root, { ref, className: cn13(className), ...props }) })
+  ({ type = "container", count, className, ...props }, ref) => /* @__PURE__ */ jsx13(TabsContext.Provider, { value: { tabType: type, tabCount: count }, children: /* @__PURE__ */ jsx13(TabsPrimitive.Root, { ref, className: cn13(className), ...props }) })
 );
 TabsRoot.displayName = "Tabs";
 var TabsList = React13.forwardRef(({ className, type, ...props }, ref) => {
@@ -1784,7 +1902,7 @@ var avatarVariants = cva13(
   {
     variants: {
       size: {
-        large: "h-8 w-8",
+        big: "h-8 w-8",
         // 32×32 (Big)
         medium: "h-6 w-6",
         // 24×24 (Medium)
@@ -1793,28 +1911,30 @@ var avatarVariants = cva13(
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "big"
     }
   }
 );
 var letterTextClassBySize = {
-  large: "text-base font-medium leading-6 text-semantic-text-neutral-tertiary",
+  big: "text-base font-medium leading-6 text-semantic-text-neutral-tertiary",
   medium: "text-3xs font-medium leading-4 text-semantic-text-neutral-tertiary",
   small: "text-3xs font-medium leading-4 text-semantic-text-neutral-tertiary"
 };
 var Avatar = React14.forwardRef(
-  ({ className, size = "large", variant = "image", src, alt = "", children, ...props }, ref) => {
+  ({ className, size = "big", type = "icon", variant, src, alt = "", children, ...props }, ref) => {
     const [imgFailed, setImgFailed] = React14.useState(false);
-    const showImg = variant === "image" && src && !imgFailed;
-    const showLetter = variant === "letter" || variant === "image" && !showImg && children;
-    const sizePx = size === "large" ? 32 : size === "medium" ? 24 : 20;
+    const resolvedType = (variant === "image" ? "icon" : variant) ?? type;
+    const resolvedSize = size === "large" ? "big" : size;
+    const showImg = resolvedType === "icon" && src && !imgFailed;
+    const showLetter = resolvedType === "letter" || resolvedType === "icon" && !showImg && children;
+    const sizePx = resolvedSize === "big" ? 32 : resolvedSize === "medium" ? 24 : 20;
     return /* @__PURE__ */ jsx14(
       "span",
       {
         ref,
         role: "img",
         "aria-label": alt || (typeof children === "string" ? children : void 0),
-        className: cn14(avatarVariants({ size }), className),
+        className: cn14(avatarVariants({ size: resolvedSize }), className),
         ...props,
         children: showImg ? /* @__PURE__ */ jsx14(
           "img",
@@ -1831,7 +1951,7 @@ var Avatar = React14.forwardRef(
           {
             className: cn14(
               "flex h-full w-full items-center justify-center",
-              letterTextClassBySize[size ?? "large"]
+              letterTextClassBySize[resolvedSize ?? "big"]
             ),
             children
           }
@@ -1857,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
     ),
@@ -1884,7 +2004,7 @@ var MenuContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 MenuContent.displayName = "MenuContent";
-var MenuItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var MenuItem = React15.forwardRef(({ className, children, leadingIcon, ...props }, ref) => /* @__PURE__ */ jsx15(
   MenubarPrimitive.Item,
   {
     ref,
@@ -1896,7 +2016,11 @@ var MenuItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
       "data-[highlighted]:bg-semantic-background-neutral-tertiary",
       className
     ),
-    ...props
+    ...props,
+    children: leadingIcon ? /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx15("span", { className: "inline-flex shrink-0 items-center text-semantic-icon-neutral-tertiary [&_svg]:shrink-0", children: leadingIcon }),
+      /* @__PURE__ */ jsx15("span", { className: "min-w-0 flex-1", children })
+    ] }) : children
   }
 ));
 MenuItem.displayName = "MenuItem";
@@ -2008,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
     ),
@@ -2024,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
     ),
@@ -2059,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",
@@ -2255,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
           }
@@ -2291,10 +2415,12 @@ function Popup({
   onOpenChange,
   title,
   subtext,
+  showSubtext = true,
   children,
   showBodyBox = false,
   cancelText,
   ctaText,
+  showCTA = true,
   onCancelClick,
   onCtaClick,
   showClose = true,
@@ -2305,13 +2431,16 @@ function Popup({
 }) {
   const titleId = React18.useId();
   const descriptionId = React18.useId();
+  const resolvedSubtext = showSubtext ? subtext : void 0;
+  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,
       {
         "aria-labelledby": titleId,
-        "aria-describedby": subtext ? descriptionId : void 0,
+        "aria-describedby": resolvedSubtext ? descriptionId : void 0,
         className: cn18(
           // Centered fixed wrapper (shadcn/dialog-like behavior)
           "fixed left-1/2 top-1/2 z-[60] -translate-x-1/2 -translate-y-1/2 focus:outline-none",
@@ -2322,11 +2451,11 @@ function Popup({
           PopupContent,
           {
             title,
-            subtext,
+            subtext: resolvedSubtext,
             titleId,
             descriptionId,
-            cancelText,
-            ctaText,
+            cancelText: resolvedCancelText,
+            ctaText: resolvedCtaText,
             onCancelClick,
             onCtaClick,
             showClose,
@@ -2344,8 +2473,10 @@ function Popup({
 function PopupTrigger({
   title,
   subtext,
+  showSubtext = true,
   cancelText,
   ctaText,
+  showCTA = true,
   showClose = true,
   showOverlay = true,
   autoFocusClose = true,
@@ -2365,8 +2496,10 @@ function PopupTrigger({
         onOpenChange: setOpen,
         title,
         subtext,
+        showSubtext,
         cancelText,
         ctaText,
+        showCTA,
         showClose,
         showOverlay,
         autoFocusClose,
@@ -2408,6 +2541,8 @@ var badgeVariants = cva14(
         rounded: "rounded-sm",
         // 8px border radius (tokens radius.sm = 0.5rem)
         pill: "rounded-full",
+        number: "rounded-full",
+        /** @deprecated Use `number` instead. Kept for backwards compatibility. */
         notification: "rounded-full"
       },
       state: {
@@ -2425,84 +2560,86 @@ var badgeVariants = cva14(
       }
     },
     compoundVariants: [
-      // Big: rounded/pill 48×24, 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, 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: {
@@ -2523,31 +2660,41 @@ 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(
   ({
     className,
     size,
+    type,
     variant,
     state,
     appearance,
+    text,
+    number,
     children,
+    solid = false,
     isSolid = false,
     leadingIcon = false,
+    dropdown = false,
     dropdownIcon = false,
+    closeIcon = false,
     closable = false,
     onClose,
     ...props
   }, ref) => {
-    const resolvedAppearance = isSolid ? "solid" : appearance;
+    const resolvedType = (variant === "notification" ? "number" : variant) ?? type ?? "rounded";
+    const resolvedAppearance = solid || isSolid ? "solid" : appearance;
     const resolvedState = state ?? "neutral";
+    const resolvedDropdown = dropdown || dropdownIcon;
+    const resolvedCloseIcon = closeIcon || closable;
+    const resolvedContent = resolvedType === "number" ? number ?? text ?? children : text ?? children;
     const LeadingIcon = leadingIconMap[resolvedState];
     const showLeadingIcon = leadingIcon && !!LeadingIcon;
     const onCloseClick = (event) => {
@@ -2562,7 +2709,7 @@ var Badge = React19.forwardRef(
       {
         ref,
         className: cn19(
-          badgeVariants({ size, variant, state: resolvedState, appearance: resolvedAppearance }),
+          badgeVariants({ size, variant: resolvedType, state: resolvedState, appearance: resolvedAppearance }),
           className
         ),
         ...props,
@@ -2573,13 +2720,13 @@ 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"
             }
           ),
-          children,
-          dropdownIcon && /* @__PURE__ */ jsx19(
+          resolvedContent,
+          resolvedDropdown && /* @__PURE__ */ jsx19(
             ChevronDown2,
             {
               size: dropdownChevronSize,
@@ -2590,7 +2737,7 @@ var Badge = React19.forwardRef(
               "aria-hidden": "true"
             }
           ),
-          closable && /* @__PURE__ */ jsx19(
+          resolvedCloseIcon && /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
@@ -2692,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"
   ],
   {
@@ -2706,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: {
@@ -2736,11 +2883,13 @@ var Chip = React21.forwardRef(
     selected = false,
     disabled = false,
     onDismiss,
-    showLeadingIcon = false,
+    closeIcon,
+    leadingIcon = false,
     children,
     ...props
   }, ref) => {
     const iconSize = size === "large" ? 16 : 12;
+    const shouldShowCloseIcon = closeIcon ?? onDismiss != null;
     return /* @__PURE__ */ jsxs16(
       "div",
       {
@@ -2752,7 +2901,7 @@ var Chip = React21.forwardRef(
         "data-state": selected ? "selected" : void 0,
         ...props,
         children: [
-          showLeadingIcon && /* @__PURE__ */ jsx21(
+          leadingIcon && /* @__PURE__ */ jsx21(
             "span",
             {
               className: "shrink-0 inline-flex items-center justify-center text-inherit",
@@ -2761,13 +2910,13 @@ var Chip = React21.forwardRef(
             }
           ),
           /* @__PURE__ */ jsx21("span", { className: "truncate", children }),
-          onDismiss != null && /* @__PURE__ */ jsx21(
+          shouldShowCloseIcon && /* @__PURE__ */ jsx21(
             "button",
             {
               type: "button",
               onClick: (e) => {
                 e.stopPropagation();
-                if (!disabled) onDismiss();
+                if (!disabled) onDismiss?.();
               },
               disabled,
               className: "shrink-0 p-0 border-0 bg-transparent cursor-pointer rounded-full inline-flex items-center justify-center text-inherit focus:outline-none focus-visible:ring-0 disabled:pointer-events-none",
@@ -2938,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(
@@ -2950,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
                     },
@@ -2987,21 +3136,21 @@ import { Tickmark as Tickmark3 } from "@esds-sangam/icons";
 import { cn as cn23 } from "@esds-sangam/utils";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var circleBase = "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-sm font-medium leading-6";
-function getCircleClasses(variant) {
-  switch (variant) {
+function getCircleClasses(states) {
+  switch (states) {
     case "inProgress":
       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:
@@ -3013,8 +3162,8 @@ function getCircleClasses(variant) {
       );
   }
 }
-function getTextClasses(variant) {
-  switch (variant) {
+function getTextClasses(states) {
+  switch (states) {
     case "default":
       return {
         title: "text-semantic-text-neutral-tertiary",
@@ -3037,44 +3186,67 @@ function getTextClasses(variant) {
       };
   }
 }
-function getLineColor(currentVariant) {
-  return currentVariant === "complete" ? "bg-semantic-background-semantic-success-default" : "bg-semantic-background-neutral-tertiary";
+function getLineColor(states) {
+  return states === "complete" ? "bg-semantic-background-success-default" : "bg-semantic-background-neutral-tertiary";
 }
-var Stepper = React23.forwardRef(({ className, steps, ...props }, ref) => {
-  return /* @__PURE__ */ jsx23("div", { ref, className: cn23("flex flex-col", className), ...props, children: steps.map((step, index) => {
-    const isLast = index === steps.length - 1;
-    const titleId = `stepper-title-${index}`;
-    const textClasses = getTextClasses(step.variant);
-    const circleClasses = getCircleClasses(step.variant);
-    return /* @__PURE__ */ jsxs18("div", { className: "flex items-stretch gap-3", children: [
-      /* @__PURE__ */ jsxs18(
-        "div",
-        {
-          className: cn23(
-            "flex w-6 flex-col items-center",
-            !isLast && "h-7xl"
-          ),
-          children: [
-            /* @__PURE__ */ jsx23(
-              "div",
-              {
-                "aria-labelledby": titleId,
-                "aria-current": step.variant === "inProgress" ? "step" : void 0,
-                className: circleClasses,
-                children: step.variant === "complete" ? /* @__PURE__ */ jsx23(Tickmark3, { size: 16, className: "text-semantic-icon-semantic-success-subtle", "aria-hidden": true }) : index + 1
-              }
+var Stepper = React23.forwardRef(
+  ({
+    className,
+    steps,
+    states = "default",
+    showLine = true,
+    title = "Create order",
+    description = "Start by creating a new order",
+    stepNumber = 1,
+    ...props
+  }, ref) => {
+    const resolvedSteps = steps && steps.length > 0 ? steps : [
+      {
+        title,
+        description,
+        states,
+        stepNumber,
+        showLine
+      }
+    ];
+    return /* @__PURE__ */ jsx23("div", { ref, className: cn23("flex flex-col", className), ...props, children: resolvedSteps.map((step, index) => {
+      const isLast = index === resolvedSteps.length - 1;
+      const titleId = `stepper-title-${index}`;
+      const stepState = step.states ?? step.variant ?? "default";
+      const stepDescription = step.description ?? step.subtext;
+      const shouldShowLine = step.showLine !== void 0 ? step.showLine : steps && steps.length > 0 ? !isLast : showLine;
+      const textClasses = getTextClasses(stepState);
+      const circleClasses = getCircleClasses(stepState);
+      return /* @__PURE__ */ jsxs18("div", { className: "flex items-stretch gap-3", children: [
+        /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: cn23(
+              "flex w-6 flex-col items-center",
+              shouldShowLine && "h-7xl"
             ),
-            !isLast ? /* @__PURE__ */ jsx23("div", { className: cn23("w-[2px] min-h-0 flex-1 rounded-full", getLineColor(step.variant)), "aria-hidden": true }) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs18("div", { className: "min-w-0 pb-2", children: [
-        /* @__PURE__ */ jsx23("div", { id: titleId, className: "text-sm font-medium leading-6 break-words", children: /* @__PURE__ */ jsx23("span", { className: textClasses.title, children: step.title }) }),
-        step.subtext != null ? /* @__PURE__ */ jsx23("div", { className: "text-xs font-normal leading-4 break-words", children: /* @__PURE__ */ jsx23("span", { className: textClasses.subtext, children: step.subtext }) }) : null
-      ] })
-    ] }, index);
-  }) });
-});
+            children: [
+              /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  "aria-labelledby": titleId,
+                  "aria-current": stepState === "inProgress" ? "step" : void 0,
+                  className: circleClasses,
+                  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
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18("div", { className: "min-w-0 pb-2", children: [
+          /* @__PURE__ */ jsx23("div", { id: titleId, className: "text-sm font-medium leading-6 break-words", children: /* @__PURE__ */ jsx23("span", { className: textClasses.title, children: step.title }) }),
+          stepDescription != null ? /* @__PURE__ */ jsx23("div", { className: "text-xs font-normal leading-4 break-words", children: /* @__PURE__ */ jsx23("span", { className: textClasses.subtext, children: stepDescription }) }) : null
+        ] })
+      ] }, index);
+    }) });
+  }
+);
 Stepper.displayName = "Stepper";
 
 // src/components/toast.tsx
@@ -3150,11 +3322,13 @@ function ToastProvider({ children }) {
           children: toasts.map((t) => /* @__PURE__ */ jsx24(ToastItemWrapper, { children: /* @__PURE__ */ jsx24(
             Toast,
             {
-              variant: t.variant ?? "info",
+              types: t.types ?? t.variant ?? "info",
               title: t.title,
               description: t.description,
-              showClose: t.showClose ?? true,
+              descriptionText: t.descriptionText,
+              close: t.close ?? t.showClose ?? true,
               onClose: () => removeToast(t.id),
+              cta: t.cta,
               ctaText: t.ctaText,
               onCtaClick: t.onCtaClick
             }
@@ -3178,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",
@@ -3197,45 +3371,59 @@ var toastVariants = cva17(
 var Toast = React24.forwardRef(
   ({
     className,
+    types,
     variant = "info",
     title,
     description,
+    descriptionText,
+    close,
     showClose = true,
     onClose,
+    cta,
     ctaText,
     onCtaClick,
     ...props
   }, ref) => {
-    const hasCTA = Boolean(ctaText);
-    const shouldShowClose = showClose && !hasCTA;
-    const hasExtendedContent = Boolean(hasCTA || description);
+    const resolvedTypes = types ?? variant ?? "info";
+    const resolvedDescription = typeof description === "string" ? description : description ? descriptionText ?? "Description" : void 0;
+    const resolvedCtaText = typeof cta === "string" ? cta : cta === false ? void 0 : cta ? ctaText ?? "Button" : ctaText;
+    const hasCTA = Boolean(resolvedCtaText);
+    const shouldShowClose = close ?? showClose;
+    const hasExtendedContent = Boolean(hasCTA || resolvedDescription);
     const layout = hasExtendedContent ? "withDescription" : "default";
-    const shouldShowDescription = description && !hasCTA;
+    const shouldShowDescription = resolvedDescription;
     const IconComponent = {
       info: InfoFilled5,
       success: TickmarkFilled5,
       warning: WarningFilled4,
       error: WarningFilled4
-    }[variant];
+    }[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"
-    }[variant];
+      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",
       {
         ref,
         role: "alert",
-        className: cn24(toastVariants({ variant, layout }), className),
+        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 }),
-              shouldShowDescription && /* @__PURE__ */ jsx24("p", { className: "text-sm font-normal leading-6 text-semantic-text-neutral-tertiary", children: description })
+              shouldShowDescription && /* @__PURE__ */ jsx24("p", { className: "text-sm font-normal leading-6 text-semantic-text-neutral-tertiary", children: resolvedDescription })
             ] }),
             hasCTA && /* @__PURE__ */ jsx24(
               Button,
@@ -3244,7 +3432,7 @@ var Toast = React24.forwardRef(
                 size: "small",
                 variant: "primary",
                 className: "w-auto self-start",
-                children: ctaText
+                children: resolvedCtaText
               }
             )
           ] }),
@@ -3269,8 +3457,8 @@ Toast.displayName = "Toast";
 import * as React25 from "react";
 import { cva as cva18 } from "class-variance-authority";
 import { cn as cn25 } from "@esds-sangam/utils";
-import { ArrowLeft, Close as Close10 } from "@esds-sangam/icons";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { ArrowLeft, Close as Close10, Maximize } from "@esds-sangam/icons";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var pageHeaderVariants = cva18("w-full", {
   variants: {
     variant: {
@@ -3298,25 +3486,46 @@ var PageHeader = React25.forwardRef(
     onBackClick,
     showTitle = true,
     badgeLabel,
+    badge,
+    badgeName,
     showSubtext,
     subtext,
     primaryAction,
     secondaryAction,
     tertiaryAction,
+    ctas,
+    firstCta,
+    firstCtaLabel = "Button label",
+    secondCta,
+    secondCtaLabel = "Button label",
+    thirdCta,
+    thirdCtaLabel = "Button label",
     closeIcon,
     onCloseClick,
+    showMaximise,
+    onMaximiseClick,
+    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 hasActions = !!primaryAction || !!secondaryAction || !!tertiaryAction || !!closeIcon;
+    const derivedTertiaryAction = ctas && firstCta ? { label: firstCtaLabel, variant: "primary", icon: null } : void 0;
+    const derivedSecondaryAction = ctas && secondCta ? { label: secondCtaLabel, variant: "secondary", icon: null } : void 0;
+    const derivedPrimaryAction = ctas && thirdCta ? { label: thirdCtaLabel, variant: "primary", icon: null } : void 0;
+    const resolvedTertiaryAction = ctas ? derivedTertiaryAction : tertiaryAction;
+    const resolvedSecondaryAction = ctas ? derivedSecondaryAction : secondaryAction;
+    const resolvedPrimaryAction = ctas ? derivedPrimaryAction : primaryAction;
+    const hasActions = !!resolvedPrimaryAction || !!resolvedSecondaryAction || !!resolvedTertiaryAction || !!showMaximise || !!closeIcon;
     const renderActions = () => {
       if (!hasActions) return null;
       const actions = [];
-      if (tertiaryAction) actions.push(tertiaryAction);
-      if (secondaryAction) actions.push(secondaryAction);
-      if (primaryAction) actions.push(primaryAction);
+      if (resolvedTertiaryAction) actions.push(resolvedTertiaryAction);
+      if (resolvedSecondaryAction) actions.push(resolvedSecondaryAction);
+      if (resolvedPrimaryAction) actions.push(resolvedPrimaryAction);
       return /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
         actions.map((action, index) => {
           const { label, onClick, variant: actionVariant, icon, iconPosition } = action;
@@ -3336,11 +3545,22 @@ var PageHeader = React25.forwardRef(
             `${label}-${index}`
           );
         }),
+        showMaximise && /* @__PURE__ */ jsx25(
+          Maximize,
+          {
+            size: 16,
+            className: "cursor-pointer",
+            "aria-label": "Maximise",
+            onClick: onMaximiseClick
+          }
+        ),
         closeIcon && /* @__PURE__ */ jsx25(Close10, { size: 16, className: "cursor-pointer", "aria-label": "Close", onClick: onCloseClick })
       ] });
     };
     const showTitleSection = variant === "withTitle" || variant === "titleTabs";
     const showTabsSection = variant === "withTabs" || variant === "titleTabs";
+    const resolvedBadgeName = badgeName ?? badgeLabel ?? "";
+    const shouldShowBadge = badge !== void 0 ? badge && resolvedBadgeName.length > 0 : Boolean(badgeLabel);
     return /* @__PURE__ */ jsxs20(
       "header",
       {
@@ -3360,17 +3580,19 @@ var PageHeader = React25.forwardRef(
                     onClick: onBackClick
                   }
                 ),
-                showTitle && /* @__PURE__ */ jsx25(
-                  "h2",
-                  {
-                    className: cn25(
-                      "truncate text-xl font-semibold leading-7 text-semantic-text-neutral-primary",
-                      titleClassName
-                    ),
-                    children: title
-                  }
-                ),
-                badgeLabel && /* @__PURE__ */ jsx25(Badge, { size: "big", variant: "rounded", state: "info", children: badgeLabel })
+                breadcrumbs ? /* @__PURE__ */ jsx25("div", { className: "min-w-0 truncate", children: breadcrumbs }) : /* @__PURE__ */ jsxs20(Fragment4, { children: [
+                  showTitle && /* @__PURE__ */ jsx25(
+                    "h2",
+                    {
+                      className: cn25(
+                        "truncate text-xl font-semibold leading-7 text-semantic-text-neutral-primary",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ),
+                  shouldShowBadge && /* @__PURE__ */ jsx25(Badge, { size: "big", variant: "rounded", state: "info", children: resolvedBadgeName })
+                ] })
               ] }),
               renderActions()
             ] }),
@@ -3381,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))
                 ]
               }
@@ -3397,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))
               ]
             }
@@ -3415,12 +3653,40 @@ var PageHeader = React25.forwardRef(
 );
 PageHeader.displayName = "PageHeader";
 
-// src/patterns/PageFooter.tsx
+// src/patterns/Breadcrumbs.tsx
 import * as React26 from "react";
 import { cn as cn26 } from "@esds-sangam/utils";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+var ACTIVE_TEXT_STYLES = "text-xl font-semibold leading-7 text-semantic-text-neutral-primary";
+var INACTIVE_TEXT_STYLES = "text-xl font-medium leading-7 text-semantic-text-neutral-tertiary";
+var Breadcrumbs = React26.forwardRef(
+  ({ className, type = "onlyTitle", title, l1, l2, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs21(
+      "nav",
+      {
+        ref,
+        "aria-label": "Breadcrumbs",
+        className: cn26("inline-flex items-center gap-2", className),
+        ...props,
+        children: [
+          type !== "onlyTitle" && l1 ? /* @__PURE__ */ jsx26("span", { className: INACTIVE_TEXT_STYLES, children: l1 }) : null,
+          type !== "onlyTitle" && l1 ? /* @__PURE__ */ jsx26("span", { className: INACTIVE_TEXT_STYLES, "aria-hidden": true, children: "/" }) : null,
+          type === "L2" && l2 ? /* @__PURE__ */ jsx26("span", { className: INACTIVE_TEXT_STYLES, children: l2 }) : null,
+          type === "L2" && l2 ? /* @__PURE__ */ jsx26("span", { className: INACTIVE_TEXT_STYLES, "aria-hidden": true, children: "/" }) : null,
+          /* @__PURE__ */ jsx26("span", { className: ACTIVE_TEXT_STYLES, children: title })
+        ]
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/patterns/PageFooter.tsx
+import * as React27 from "react";
+import { cn as cn27 } from "@esds-sangam/utils";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var PAGE_FOOTER_WIDTH = 532;
-var PageFooter = React26.forwardRef(
+var PageFooter = React27.forwardRef(
   ({
     className,
     children,
@@ -3436,11 +3702,11 @@ var PageFooter = React26.forwardRef(
       const actions = [];
       if (secondaryAction) actions.push(secondaryAction);
       if (primaryAction) actions.push(primaryAction);
-      return /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
+      return /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
         const { label, onClick, variant: actionVariant, icon, iconPosition } = action;
         const leadingIcon = !!icon && (iconPosition ?? "leading") === "leading";
         const trailingIcon = !!icon && (iconPosition ?? "leading") === "trailing";
-        return /* @__PURE__ */ jsx26(
+        return /* @__PURE__ */ jsx27(
           Button,
           {
             size: "small",
@@ -3455,18 +3721,18 @@ var PageFooter = React26.forwardRef(
         );
       }) });
     };
-    const content = children != null ? children : hasActions ? renderActionButtons() : /* @__PURE__ */ jsx26(Button, { variant: "primary", size: "small", children: "Convert" });
-    return /* @__PURE__ */ jsx26(
+    const content = children != null ? children : hasActions ? renderActionButtons() : /* @__PURE__ */ jsx27(Button, { variant: "primary", size: "small", children: "Convert" });
+    return /* @__PURE__ */ jsx27(
       "footer",
       {
         ref,
-        className: cn26(
+        className: cn27(
           "flex h-16 items-center justify-end gap-2 bg-semantic-background-neutral-primary p-4 shadow-elevation-top-sm",
           className
         ),
         style: { width },
         ...props,
-        children: /* @__PURE__ */ jsx26("div", { className: cn26("flex items-center gap-2", contentClassName), children: content })
+        children: /* @__PURE__ */ jsx27("div", { className: cn27("flex items-center gap-2", contentClassName), children: content })
       }
     );
   }
@@ -3474,19 +3740,19 @@ var PageFooter = React26.forwardRef(
 PageFooter.displayName = "PageFooter";
 
 // src/patterns/SideMenu.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { cva as cva19 } from "class-variance-authority";
-import { cn as cn28 } from "@esds-sangam/utils";
+import { cn as cn29 } from "@esds-sangam/utils";
 import * as SelectPrimitive2 from "@radix-ui/react-select";
 import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2, Tickmark as Tickmark4 } from "@esds-sangam/icons";
 
 // src/patterns/SideMenuItem.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { ChevronRight as ChevronRight3 } from "@esds-sangam/icons";
-import { cn as cn27 } from "@esds-sangam/utils";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { cn as cn28 } from "@esds-sangam/utils";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var MENU_TEXT_STYLES = "text-xs font-medium leading-4 text-semantic-text-neutral-primary";
-var SideMenuItem = React27.forwardRef(
+var SideMenuItem = React28.forwardRef(
   ({
     label,
     leadingIcon,
@@ -3499,20 +3765,20 @@ var SideMenuItem = React27.forwardRef(
     ...props
   }, ref) => {
     if (iconOnly) {
-      return /* @__PURE__ */ jsx27(
+      return /* @__PURE__ */ jsx28(
         "button",
         {
           ref,
           type,
-          className: cn27(
+          className: cn28(
             "inline-flex w-full items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
             className
           ),
           ...props,
-          children: /* @__PURE__ */ jsx27(
+          children: /* @__PURE__ */ jsx28(
             "span",
             {
-              className: cn27(
+              className: cn28(
                 "flex h-9 w-9 items-center justify-center rounded-sm [&>svg]:size-5",
                 selected && "border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm"
               ),
@@ -3522,28 +3788,28 @@ var SideMenuItem = React27.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "button",
       {
         ref,
         type,
-        className: cn27(
+        className: cn28(
           "inline-flex w-full items-center justify-start outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxs21(
+        children: /* @__PURE__ */ jsxs22(
           "span",
           {
-            className: cn27(
+            className: cn28(
               "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-sm px-2",
               selected ? "mx-1 my-0.5 border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm" : "hover:bg-neutral-200/60",
               !selected && hovered && "bg-neutral-200/60"
             ),
             children: [
-              /* @__PURE__ */ jsx27("span", { className: "shrink-0 [&>svg]:size-5", children: leadingIcon }),
-              /* @__PURE__ */ jsx27("span", { className: cn27(MENU_TEXT_STYLES, "min-w-0 flex-1 truncate text-left"), children: label }),
-              hasSubmenu ? /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28("span", { className: "shrink-0 [&>svg]:size-5", children: leadingIcon }),
+              /* @__PURE__ */ jsx28("span", { className: cn28(MENU_TEXT_STYLES, "min-w-0 flex-1 truncate text-left"), children: label }),
+              hasSubmenu ? /* @__PURE__ */ jsx28(
                 ChevronRight3,
                 {
                   size: 14,
@@ -3561,7 +3827,7 @@ var SideMenuItem = React27.forwardRef(
 SideMenuItem.displayName = "SideMenuItem";
 
 // src/patterns/SideMenu.tsx
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 function SideMenuNavRow({
   item,
   isCollapsed,
@@ -3569,7 +3835,7 @@ function SideMenuNavRow({
   onClick
 }) {
   const leadingIcon = isCollapsed && !isSelected ? item.icon : item.iconExpanded ?? item.icon;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     SideMenuItem,
     {
       label: item.label,
@@ -3589,18 +3855,18 @@ function SideMenuGroup({
   className
 }) {
   const showGroup = group.showGroup ?? true;
-  return /* @__PURE__ */ jsxs22("div", { className: cn28("flex flex-col gap-2", className), children: [
-    showGroup ? /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs23("div", { className: cn29("flex flex-col gap-2", className), children: [
+    showGroup ? /* @__PURE__ */ jsx29(
       "div",
       {
-        className: cn28(
+        className: cn29(
           "text-xs font-medium leading-4 text-semantic-text-neutral-tertiary",
           isCollapsed ? "px-0 text-center" : "px-2 text-left"
         ),
         children: isCollapsed ? "--" : group.groupName
       }
     ) : null,
-    group.items.map((item) => /* @__PURE__ */ jsx28(
+    group.items.map((item) => /* @__PURE__ */ jsx29(
       SideMenuNavRow,
       {
         item,
@@ -3616,7 +3882,7 @@ var sideMenuVariants = cva19(
   "flex flex-col self-start transition-[width] duration-200 ease-out",
   {
     variants: {
-      variant: {
+      state: {
         default: "h-[1024px] w-[48px] rounded-r-lg bg-semantic-background-neutral-tertiary py-4 px-1.5",
         hover: "h-[1024px] w-[196px] rounded-r-lg bg-semantic-background-neutral-primary border-l border-semantic-border-neutral-tertiary shadow-elevation-right-sm py-4 pl-3 pr-3",
         selected: "h-[1024px] w-[196px] rounded-r-lg bg-semantic-background-neutral-primary border-l border-semantic-border-neutral-tertiary shadow-elevation-right-sm py-4 pl-3 pr-3",
@@ -3624,20 +3890,21 @@ var sideMenuVariants = cva19(
       }
     },
     defaultVariants: {
-      variant: "default"
+      state: "default"
     }
   }
 );
-var SideMenu = React28.forwardRef(
+var SideMenu = React29.forwardRef(
   ({
     className,
-    variant = "default",
+    state = "default",
     logo,
     topGroups,
     bottomGroups,
     selectedId: selectedIdProp,
     defaultSelectedId,
     expanded: expandedProp,
+    showScrollbar = false,
     onItemClick,
     projects,
     project: projectProp,
@@ -3647,17 +3914,17 @@ var SideMenu = React28.forwardRef(
     onMouseLeave,
     ...props
   }, ref) => {
-    const [internalSelected, setInternalSelected] = React28.useState(
+    const [internalSelected, setInternalSelected] = React29.useState(
       defaultSelectedId ?? null
     );
     const selectedId = selectedIdProp !== void 0 ? selectedIdProp : internalSelected;
     const isControlled = selectedIdProp !== void 0;
-    const [hoverExpanded, setHoverExpanded] = React28.useState(false);
-    const isUncontrolledDefault = variant === "default" && expandedProp === void 0;
+    const [hoverExpanded, setHoverExpanded] = React29.useState(false);
+    const isUncontrolledDefault = state === "default" && expandedProp === void 0;
     const isExpandedByHover = isUncontrolledDefault && hoverExpanded;
-    const effectiveExpanded = variant === "hover" || variant === "selected" || variant === "sticky" || isExpandedByHover;
+    const effectiveExpanded = state === "hover" || state === "selected" || state === "sticky" || isExpandedByHover;
     const isCollapsed = !effectiveExpanded;
-    const [isProjectOpen, setIsProjectOpen] = React28.useState(false);
+    const [isProjectOpen, setIsProjectOpen] = React29.useState(false);
     const handleMouseEnter = (e) => {
       if (isUncontrolledDefault) setHoverExpanded(true);
       onMouseEnter?.(e);
@@ -3675,7 +3942,7 @@ var SideMenu = React28.forwardRef(
       { value: "project-2", label: "Project 2" },
       { value: "project-3", label: "Project 3" }
     ];
-    const [internalProject, setInternalProject] = React28.useState(
+    const [internalProject, setInternalProject] = React29.useState(
       defaultProject ?? projectOptions[0]?.value ?? "project-1"
     );
     const currentProject = projectProp !== void 0 ? projectProp : internalProject;
@@ -3683,39 +3950,44 @@ var SideMenu = React28.forwardRef(
       if (projectProp === void 0) setInternalProject(value);
       onProjectChange?.(value);
     };
-    return /* @__PURE__ */ jsx28(
+    const scrollbarAllowedState = state === "hover" || state === "selected" || state === "sticky";
+    const shouldShowScrollbar = showScrollbar && scrollbarAllowedState;
+    return /* @__PURE__ */ jsx29(
       "div",
       {
-        className: cn28("relative w-12 shrink-0 overflow-visible", className),
+        className: cn29("relative w-12 shrink-0 overflow-visible", className),
         ...props,
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx29(
           "div",
           {
             className: "absolute left-0 top-0",
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ jsxs22(
+            children: /* @__PURE__ */ jsxs23(
               "nav",
               {
                 ref,
                 role: "navigation",
                 "aria-label": "Side menu",
                 "aria-expanded": isUncontrolledDefault ? isExpandedByHover : void 0,
-                className: sideMenuVariants({
-                  variant: isExpandedByHover && selectedId ? "selected" : isExpandedByHover ? "hover" : variant
-                }),
+                className: cn29(
+                  sideMenuVariants({
+                    state: isExpandedByHover && selectedId ? "selected" : isExpandedByHover ? "hover" : state
+                  }),
+                  shouldShowScrollbar && "overflow-y-auto overflow-x-hidden"
+                ),
                 children: [
-                  /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29(
                     "div",
                     {
-                      className: cn28(
+                      className: cn29(
                         "mb-4 shrink-0 flex items-center",
                         isCollapsed ? "justify-center" : "justify-start"
                       ),
                       children: logo
                     }
                   ),
-                  /* @__PURE__ */ jsx28("div", { className: cn28("mb-4 shrink-0", isCollapsed ? "flex justify-center" : ""), children: isCollapsed ? /* @__PURE__ */ jsx28("div", { className: "flex h-9 w-9 items-center justify-center rounded-sm", children: /* @__PURE__ */ jsx28("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }) }) : /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29("div", { className: cn29("mb-4 shrink-0", isCollapsed ? "flex justify-center" : ""), children: isCollapsed ? /* @__PURE__ */ jsx29("div", { className: "flex h-9 w-9 items-center justify-center rounded-sm", children: /* @__PURE__ */ jsx29("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }) }) : /* @__PURE__ */ jsx29(
                     SelectPrimitive2.Root,
                     {
                       value: currentProject,
@@ -3725,12 +3997,12 @@ var SideMenu = React28.forwardRef(
                         setIsProjectOpen(open);
                         if (isUncontrolledDefault && open) setHoverExpanded(true);
                       },
-                      children: /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsx28("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }),
-                        /* @__PURE__ */ jsxs22(
+                      children: /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+                        /* @__PURE__ */ jsx29("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }),
+                        /* @__PURE__ */ jsxs23(
                           SelectPrimitive2.Trigger,
                           {
-                            className: cn28(
+                            className: cn29(
                               "group",
                               dropdownTriggerVariants({ error: false }),
                               // Make room for the P icon
@@ -3741,22 +4013,22 @@ var SideMenu = React28.forwardRef(
                               "[&>span]:block [&>span]:min-w-0 [&>span]:truncate [&>span]:whitespace-nowrap"
                             ),
                             children: [
-                              /* @__PURE__ */ jsx28(SelectPrimitive2.Value, { placeholder: "Project 1" }),
-                              /* @__PURE__ */ jsx28(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsxs22(Fragment4, { children: [
-                                /* @__PURE__ */ jsx28(ChevronDown3, { size: 14, className: "shrink-0 group-data-[state=open]:hidden" }),
-                                /* @__PURE__ */ jsx28(ChevronUp2, { size: 14, className: "hidden shrink-0 group-data-[state=open]:block" })
+                              /* @__PURE__ */ jsx29(SelectPrimitive2.Value, { placeholder: "Project 1" }),
+                              /* @__PURE__ */ jsx29(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsxs23(Fragment5, { children: [
+                                /* @__PURE__ */ jsx29(ChevronDown3, { size: 14, className: "shrink-0 group-data-[state=open]:hidden" }),
+                                /* @__PURE__ */ jsx29(ChevronUp2, { size: 14, className: "hidden shrink-0 group-data-[state=open]:block" })
                               ] }) })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx28(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx28(SelectPrimitive2.Content, { className: cn28(dropdownContentVariants()), position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx28(SelectPrimitive2.Viewport, { children: projectOptions.map((opt) => /* @__PURE__ */ jsxs22(SelectPrimitive2.Item, { value: opt.value, disabled: opt.disabled, className: cn28(dropdownItemVariants()), children: [
-                          /* @__PURE__ */ jsx28(SelectPrimitive2.ItemText, { children: opt.label }),
-                          /* @__PURE__ */ jsx28(SelectPrimitive2.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx28(Tickmark4, { size: 14, "aria-hidden": "true" }) })
+                        /* @__PURE__ */ jsx29(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx29(SelectPrimitive2.Content, { className: cn29(dropdownContentVariants()), position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx29(SelectPrimitive2.Viewport, { children: projectOptions.map((opt) => /* @__PURE__ */ jsxs23(SelectPrimitive2.Item, { value: opt.value, disabled: opt.disabled, className: cn29(dropdownItemVariants()), children: [
+                          /* @__PURE__ */ jsx29(SelectPrimitive2.ItemText, { children: opt.label }),
+                          /* @__PURE__ */ jsx29(SelectPrimitive2.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx29(Tickmark4, { size: 14, "aria-hidden": "true" }) })
                         ] }, opt.value)) }) }) })
                       ] })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx28("div", { className: "flex flex-1 flex-col gap-4", children: topGroups.map((group) => /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29("div", { className: "flex flex-1 flex-col gap-4", children: topGroups.map((group) => /* @__PURE__ */ jsx29(
                     SideMenuGroup,
                     {
                       group,
@@ -3766,7 +4038,7 @@ var SideMenu = React28.forwardRef(
                     },
                     group.id
                   )) }),
-                  /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-4 pt-4", children: bottomGroups.map((group) => /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-4 pt-4", children: bottomGroups.map((group) => /* @__PURE__ */ jsx29(
                     SideMenuGroup,
                     {
                       group,
@@ -3788,15 +4060,15 @@ var SideMenu = React28.forwardRef(
 SideMenu.displayName = "SideMenu";
 
 // src/patterns/Upload.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { cva as cva20 } from "class-variance-authority";
 import { colors } from "@esds-sangam/tokens";
-import { cn as cn29 } from "@esds-sangam/utils";
-import { CloudUpload, DocumentPdf, Close as Close11, Delete, Retry, TickmarkFilled as TickmarkFilled6 } from "@esds-sangam/icons";
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { cn as cn30 } from "@esds-sangam/utils";
+import { CloudUpload, DocumentPdf, Close as Close11, Delete, Retry, TickmarkFilled as TickmarkFilled6, Info as Info4 } from "@esds-sangam/icons";
+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",
@@ -3808,20 +4080,25 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-var Upload = React29.forwardRef(
+var Upload = React30.forwardRef(
   ({
     className,
     label,
+    asterisk,
     required,
     accept,
     multiple,
     onFilesSelected,
+    subtext,
     helperText = "PNG, JPG, PDF, EXCEL (max size)",
+    supportingText = false,
+    supportText = "Supporting text",
+    supportIcon = false,
     ...props
   }, ref) => {
-    const inputRef = React29.useRef(null);
-    const [fileEntries, setFileEntries] = React29.useState([]);
-    const progressIntervalRef = React29.useRef(null);
+    const inputRef = React30.useRef(null);
+    const [fileEntries, setFileEntries] = React30.useState([]);
+    const progressIntervalRef = React30.useRef(null);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -3849,7 +4126,7 @@ var Upload = React29.forwardRef(
         )
       );
     };
-    React29.useEffect(() => {
+    React30.useEffect(() => {
       const uploading = fileEntries.filter((e) => e.status === "uploading");
       if (uploading.length === 0) return;
       const steps = [10, 50, 100];
@@ -3888,18 +4165,18 @@ var Upload = React29.forwardRef(
     const handleDragOver = (event) => {
       event.preventDefault();
     };
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         ref,
-        className: cn29("flex w-full min-w-[328px] flex-col gap-2", className),
+        className: cn30("flex w-full min-w-[328px] flex-col gap-2", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs23("label", { className: "text-xs font-medium leading-4 text-semantic-text-neutral-primary", children: [
+          /* @__PURE__ */ jsxs24("label", { className: "text-xs font-medium leading-4 text-semantic-text-neutral-primary", children: [
             label,
-            required && /* @__PURE__ */ jsx29("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__ */ jsxs23(
+          /* @__PURE__ */ jsxs24(
             "div",
             {
               role: "button",
@@ -3913,13 +4190,13 @@ var Upload = React29.forwardRef(
               },
               onDrop: handleDrop,
               onDragOver: handleDragOver,
-              className: cn29(
+              className: cn30(
                 uploadBoxVariants(),
                 // Padding: top/bottom 20px (py-5), left/right 12px (px-3)
                 "py-5 px-3"
               ),
               children: [
-                /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsx30(
                   "input",
                   {
                     ref: inputRef,
@@ -3932,16 +4209,16 @@ var Upload = React29.forwardRef(
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ jsxs23("div", { className: "relative z-0 flex flex-col items-center gap-2 text-center pointer-events-none", children: [
-                  /* @__PURE__ */ jsx29("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__ */ jsx29(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
-                  /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1", children: [
-                    /* @__PURE__ */ jsxs23("p", { className: "text-sm leading-6 text-semantic-text-neutral-primary", children: [
-                      /* @__PURE__ */ jsx29("span", { className: "font-normal", children: "Drop your files here or " }),
-                      /* @__PURE__ */ jsx29(
+                /* @__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-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 " }),
+                      /* @__PURE__ */ jsx30(
                         Button,
                         {
-                          type: "button",
-                          variant: "link",
+                          htmlType: "button",
+                          type: "tertiary",
                           size: "small",
                           className: "pointer-events-auto font-medium p-0 h-auto inline",
                           onClick: (e) => {
@@ -3952,13 +4229,17 @@ var Upload = React29.forwardRef(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx29("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: helperText })
+                    /* @__PURE__ */ jsx30("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: subtext ?? helperText })
                   ] })
                 ] })
               ]
             }
           ),
-          fileEntries.length > 0 && /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-3", children: fileEntries.map((entry) => /* @__PURE__ */ jsx29(
+          supportingText ? /* @__PURE__ */ jsxs24("div", { className: "inline-flex items-center gap-1 text-sm text-semantic-text-neutral-tertiary", children: [
+            supportIcon ? /* @__PURE__ */ jsx30(Info4, { size: 16, className: "text-semantic-icon-neutral-tertiary", "aria-hidden": true }) : null,
+            /* @__PURE__ */ jsx30("span", { children: supportText })
+          ] }) : null,
+          fileEntries.length > 0 && /* @__PURE__ */ jsx30("div", { className: "flex flex-col gap-3", children: fileEntries.map((entry) => /* @__PURE__ */ jsx30(
             UploadFileItem,
             {
               status: entry.status,
@@ -3984,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: {
@@ -3992,86 +4273,87 @@ var uploadFileItemBoxVariants = cva20(
     }
   }
 );
-var UploadFileItem = React29.forwardRef(
+var UploadFileItem = React30.forwardRef(
   ({
     className,
     status = "uploading",
     fileName,
     fileSize,
+    process,
     progress = 0,
     onCancel,
     onRetry,
     onDelete,
     ...props
   }, ref) => {
-    const progressValue = Math.min(100, Math.max(0, progress));
+    const progressValue = Math.min(100, Math.max(0, process ?? progress));
     const showProgress = status !== "failed";
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         ref,
         role: "listitem",
-        className: cn29(uploadFileItemBoxVariants({ status }), className),
+        className: cn30(uploadFileItemBoxVariants({ status }), className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 flex-1 gap-3", children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex flex-1 min-w-0 gap-2", children: [
-              /* @__PURE__ */ jsx29(DocumentPdf, { size: 24, className: "shrink-0 text-semantic-text-neutral-primary", "aria-hidden": true }),
-              /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx29("p", { className: "truncate text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: fileName }),
-                status === "failed" ? /* @__PURE__ */ jsx29("p", { className: "text-xs font-normal leading-4 text-semantic-text-semantic-error-subtle", children: "Upload failed" }) : fileSize ? /* @__PURE__ */ jsx29("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: fileSize }) : null
+          /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 flex-1 gap-3", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 min-w-0 gap-2", children: [
+              /* @__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-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__ */ jsxs23("div", { className: "flex shrink-0 flex-col items-end justify-center", children: [
-              status === "uploading" && /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsxs24("div", { className: "flex shrink-0 flex-col items-end justify-center", children: [
+              status === "uploading" && /* @__PURE__ */ jsx30(
                 "button",
                 {
                   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__ */ jsx29(Close11, { size: 20, "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx30(Close11, { size: 20, "aria-hidden": true })
                 }
               ),
-              status === "complete" && /* @__PURE__ */ jsx29(Fragment5, { children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx29(TickmarkFilled6, { size: 20, className: "!text-semantic-icon-semantic-success-subtle shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ jsx29(
+              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-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__ */ jsx29(Delete, { size: 20, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx30(Delete, { size: 20, "aria-hidden": true })
                   }
                 )
               ] }) }),
-              status === "failed" && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx29(
+              status === "failed" && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx30(
                   "button",
                   {
                     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__ */ jsx29(Retry, { size: 20, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx30(Retry, { size: 20, "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ jsx29(
+                /* @__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__ */ jsx29(Delete, { size: 20, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx30(Delete, { size: 20, "aria-hidden": true })
                   }
                 )
               ] })
             ] })
           ] }),
-          showProgress && /* @__PURE__ */ jsxs23("div", { className: "flex w-full items-center gap-sm", children: [
-            /* @__PURE__ */ jsx29(
+          showProgress && /* @__PURE__ */ jsxs24("div", { className: "flex w-full items-center gap-sm", children: [
+            /* @__PURE__ */ jsx30(
               ProgressBar,
               {
                 value: progressValue,
@@ -4080,7 +4362,7 @@ var UploadFileItem = React29.forwardRef(
                 "aria-label": `Upload progress ${progressValue}%`
               }
             ),
-            /* @__PURE__ */ jsxs23("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary shrink-0 text-right", children: [
+            /* @__PURE__ */ jsxs24("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary shrink-0 text-right", children: [
               progressValue,
               "%"
             ] })
@@ -4094,6 +4376,7 @@ UploadFileItem.displayName = "UploadFileItem";
 export {
   Avatar,
   Badge,
+  Breadcrumbs,
   Button,
   Card,
   Checkbox,