sangam-ui 0.1.5

package/dist/index.js

@@ -0,0 +1,2890 @@
+// src/primitives/button.tsx
+import * as React2 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { cn as cn2 } from "@esds-sangam/utils";
+import { semanticColorsResolved } from "@esds-sangam/tokens";
+
+// src/primitives/loader.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@esds-sangam/utils";
+import { jsx } from "react/jsx-runtime";
+var LOADER_COLOR = "#111111";
+var LOADER_COLOR_TRANSPARENT = "#11111100";
+var loaderVariants = cva(
+  [
+    "rounded-full shrink-0",
+    "animate-spin [animation-duration:600ms] [animation-delay:1s] [animation-timing-function:linear]",
+    // Ring shape via radial mask; inner % = hole, rest = visible ring (thicker for visibility, especially extra small)
+    "[mask:radial-gradient(circle,transparent_50%,black_50%)] [-webkit-mask:radial-gradient(circle,transparent_50%,black_50%)]"
+  ],
+  {
+    variants: {
+      size: {
+        big: "h-10 w-10",
+        // 40×40
+        medium: "h-8 w-8",
+        // 32×32
+        small: "h-6 w-6",
+        // 24×24
+        extraSmall: "h-4 w-4"
+        // 16×16
+      }
+    },
+    defaultVariants: {
+      size: "big"
+    }
+  }
+);
+var Loader = React.forwardRef(
+  ({ className, size, "aria-label": ariaLabel, color, colorTransparent, style, ...props }, ref) => {
+    const gradientColor = color ?? LOADER_COLOR;
+    const gradientTransparent = colorTransparent ?? (color ? `${color}00` : LOADER_COLOR_TRANSPARENT);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": ariaLabel ?? "Loading",
+        "aria-live": "polite",
+        className: cn(loaderVariants({ size }), className),
+        style: {
+          background: `conic-gradient(from 0deg, ${gradientColor}, ${gradientTransparent})`,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Loader.displayName = "Loader";
+
+// src/primitives/button.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  // Base styles - applied to ALL buttons
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-medium",
+    "transition-colors duration-200 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "whitespace-nowrap",
+    "rounded-sm"
+  ],
+  {
+    variants: {
+      // Variant: Visual style per Figma design
+      variant: {
+        // Primary: semantic background/text (neutral inverse primary)
+        primary: [
+          "bg-semantic-background-neutralInverse-primary text-semantic-text-neutralInverse-primary",
+          "hover:bg-semantic-background-neutralInverse-secondary",
+          "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"
+        ],
+        // Secondary: border #111111 (semantic border neutralInverse tertiary), hover: border removed, bg #EBEBEB (semantic background neutral tertiary)
+        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"
+        ],
+        // 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"
+        ],
+        // Link: semantic info default text
+        link: [
+          "bg-transparent text-semantic-background-semantic-info-default underline-offset-4",
+          "hover:underline",
+          "focus-visible:ring-semantic-border-semantic-info-default",
+          "disabled:text-semantic-text-neutral-disabled disabled:pointer-events-none"
+        ]
+      },
+      // Size: Height, padding, font size (from Figma specs)
+      size: {
+        // Small: 32px height
+        small: [
+          "h-8",
+          // 32px height
+          "px-3 py-1.5",
+          // padding: 12px horizontal, 6px vertical
+          "text-sm"
+          // 14px font size
+        ],
+        // Big: 40px height
+        big: [
+          "h-10",
+          // 40px height
+          "px-4 py-2",
+          // padding: 16px horizontal, 8px vertical
+          "text-base"
+          // 16px font size
+        ]
+      },
+      /**
+       * Icon-only: Circular button controlled by boolean prop
+       * - 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)
+       */
+      iconOnly: {
+        false: "",
+        true: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "big"
+    },
+    compoundVariants: [
+      {
+        iconOnly: true,
+        size: "big",
+        class: "w-10"
+      },
+      {
+        iconOnly: true,
+        size: "small",
+        class: "w-8"
+      }
+    ]
+  }
+);
+var BUTTON_LOADER_COLOR = semanticColorsResolved.text.neutralInverse.primary;
+var BUTTON_LOADER_COLOR_TRANSPARENT = `${BUTTON_LOADER_COLOR}00`;
+var Button = React2.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    iconOnly = false,
+    asChild = false,
+    icon,
+    leadingIcon = false,
+    trailingIcon = false,
+    children,
+    loading = false,
+    disabled,
+    "aria-busy": ariaBusy,
+    "aria-disabled": ariaDisabled,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled ?? loading;
+    const showLoader = loading && !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 Comp = asChild && !showLoader ? Slot : "button";
+    const hasIcon = !!icon;
+    const showIconOnly = iconOnly && hasIcon;
+    const showLeadingIcon = !showIconOnly && hasIcon && leadingIcon;
+    const showTrailingIcon = !showIconOnly && hasIcon && !leadingIcon && trailingIcon;
+    let renderIcon = icon;
+    if (React2.isValidElement(icon)) {
+      const isDomElement = typeof icon.type === "string";
+      const existingClassName = icon.props.className;
+      const mergedClassName = cn2(iconSizeClass, existingClassName);
+      renderIcon = React2.cloneElement(
+        icon,
+        isDomElement ? { className: mergedClassName } : { size: iconPixelSize, className: mergedClassName }
+      );
+    }
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      {
+        className: cn2(buttonVariants({ variant, size, iconOnly, className })),
+        ref,
+        disabled: isDisabled,
+        "data-loading": showLoader ? true : void 0,
+        "aria-busy": showLoader ? true : ariaBusy,
+        "aria-disabled": showLoader ? true : ariaDisabled,
+        ...props,
+        children: showLoader ? /* @__PURE__ */ jsx2(
+          Loader,
+          {
+            size: loaderSize,
+            "aria-label": "Loading",
+            className: "shrink-0",
+            ...loaderColor ?? {}
+          }
+        ) : 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,
+          showTrailingIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: renderIcon })
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/toggle.tsx
+import * as React3 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cva as cva3 } from "class-variance-authority";
+import { cn as cn3 } from "@esds-sangam/utils";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var toggleVariants = cva3(
+  [
+    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
+    "transition-all duration-200 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-800 focus-visible:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-100",
+    // Default unchecked state
+    "bg-neutral-400",
+    // Hover effect for unchecked state (border appears on hover)
+    "border-1 border-transparent hover:border-neutral-700",
+    // Checked state
+    "data-[state=checked]:bg-neutral-1100",
+    // Remove hover border when checked
+    "data-[state=checked]:hover:border-1 data-[state=checked]:hover:border-neutral-1100",
+    // Disabled states - MUST come after checked to override
+    "disabled:bg-neutral-200",
+    "disabled:hover:border-1 disabled:hover:border-neutral-200",
+    // Force disabled color even when checked
+    "disabled:data-[state=checked]:bg-neutral-200",
+    "disabled:data-[state=checked]:border-1 disabled:data-[state=checked]:border-neutral-200"
+  ],
+  {
+    variants: {
+      size: {
+        big: "h-7 w-14",
+        // 28px height, 56px width
+        small: "h-6 w-11"
+        // 24px height, 44px width
+      }
+    },
+    defaultVariants: {
+      size: "big"
+    }
+  }
+);
+var toggleThumbVariants = cva3(
+  [
+    "pointer-events-none block rounded-full bg-white shadow-sm",
+    "transition-transform duration-200 ease-out",
+    // Disabled state
+    "data-[disabled]:bg-neutral-500"
+  ],
+  {
+    variants: {
+      size: {
+        big: [
+          "h-5 w-5",
+          // 20px circle
+          "data-[state=unchecked]:translate-x-1",
+          // 4px from left
+          "data-[state=checked]:translate-x-8"
+          // 32px from left (56-20-4=32)
+        ],
+        small: [
+          "h-4 w-4",
+          // 16px circle
+          "data-[state=unchecked]:translate-x-1",
+          // 4px from left
+          "data-[state=checked]:translate-x-6"
+          // 24px from left (44-16-4=24)
+        ]
+      }
+    },
+    defaultVariants: {
+      size: "big"
+    }
+  }
+);
+var Toggle = React3.forwardRef(
+  ({ className, size = "big", title, subtext, ...props }, ref) => {
+    const hasLabel = title != null || subtext != null;
+    const switchEl = /* @__PURE__ */ jsx3(
+      SwitchPrimitives.Root,
+      {
+        className: cn3(toggleVariants({ size }), !hasLabel && className),
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsx3(
+          SwitchPrimitives.Thumb,
+          {
+            className: cn3(toggleThumbVariants({ size })),
+            "data-disabled": props.disabled ? "" : void 0
+          }
+        )
+      }
+    );
+    if (!hasLabel) return switchEl;
+    return /* @__PURE__ */ jsxs2("label", { className: cn3("inline-flex cursor-pointer items-center gap-3", className), children: [
+      switchEl,
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-0", children: [
+        title != null && /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium leading-6 text-neutral-1100", children: title }),
+        subtext != null && /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal leading-4 text-neutral-600", children: subtext })
+      ] })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/primitives/checkbox.tsx
+import * as React4 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cva as cva4 } from "class-variance-authority";
+import { cn as cn4 } from "@esds-sangam/utils";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var checkboxRootVariants = cva4(
+  [
+    "peer group flex shrink-0 items-center justify-center",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-800 focus-visible:ring-offset-2",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        big: "h-6 w-6",
+        // 24px outer
+        small: "h-5 w-5"
+        // 20px outer
+      }
+    },
+    defaultVariants: {
+      size: "big"
+    }
+  }
+);
+var checkboxInnerVariants = cva4(
+  [
+    "flex shrink-0 items-center justify-center rounded-xs border transition-all duration-200 ease-out",
+    // Default unchecked
+    "border-neutral-400 bg-transparent",
+    "group-hover:border-neutral-700",
+    "group-data-[state=checked]:bg-neutral-1100 group-data-[state=checked]:border-neutral-1100",
+    "group-data-[state=checked]:group-hover:border-neutral-1100",
+    "group-disabled:border-neutral-200 group-disabled:group-hover:border-neutral-200",
+    "group-disabled:group-data-[state=checked]:bg-neutral-200 group-disabled:group-data-[state=checked]:border-neutral-200"
+  ],
+  {
+    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: {
+      size: "big"
+    }
+  }
+);
+var checkboxIndicatorVariants = cva4(
+  ["flex items-center justify-center text-current transition-colors duration-200 ease-out"],
+  {
+    variants: {
+      size: {
+        big: "h-5 w-5",
+        small: "h-4 w-4"
+      }
+    },
+    defaultVariants: {
+      size: "big"
+    }
+  }
+);
+var Checkbox = React4.forwardRef(
+  ({ className, size = "big", disabled, title, subtext, ...props }, ref) => {
+    const hasLabel = title != null || subtext != null;
+    const checkboxEl = /* @__PURE__ */ jsx4(
+      CheckboxPrimitive.Root,
+      {
+        ref,
+        className: cn4(checkboxRootVariants({ size }), !hasLabel && className),
+        disabled,
+        ...props,
+        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-white",
+              disabled && "text-neutral-500"
+            ),
+            strokeWidth: 3
+          }
+        ) }) })
+      }
+    );
+    if (!hasLabel) 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-neutral-1100", children: title }),
+        subtext != null && /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal leading-4 text-neutral-600", children: subtext })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/primitives/radio.tsx
+import * as React5 from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva as cva5 } from "class-variance-authority";
+import { cn as cn5 } from "@esds-sangam/utils";
+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-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-neutral-400 bg-transparent",
+    // Hover effect for unchecked state
+    "hover:border-neutral-700",
+    // Checked state (selected)
+    "data-[state=checked]:border-neutral-1100",
+    // No border change on hover when checked
+    "data-[state=checked]:hover:border-neutral-1100",
+    // Disabled states
+    "disabled:border-neutral-200",
+    "disabled:hover:border-neutral-200",
+    // Disabled + checked state
+    "disabled:data-[state=checked]:border-neutral-200"
+  ],
+  {
+    variants: {
+      size: {
+        big: "h-6 w-6",
+        // 24px
+        small: "h-5 w-5"
+        // 20px
+      }
+    },
+    defaultVariants: {
+      size: "big"
+    }
+  }
+);
+var radioIndicatorVariants = cva5(["flex items-center justify-center"], {
+  variants: {
+    size: {
+      big: "h-6 w-6",
+      // 24px container
+      small: "h-5 w-5"
+      // 20px container
+    }
+  },
+  defaultVariants: {
+    size: "big"
+  }
+});
+var radioDotVariants = cva5(
+  [
+    "rounded-full transition-colors duration-200 ease-out flex items-center justify-center",
+    // Default selected state - black dot
+    "bg-neutral-1100"
+  ],
+  {
+    variants: {
+      size: {
+        big: "h-2.5 w-2.5",
+        // 12px inner dot for 24px radio
+        small: "h-[9px] w-[9px]"
+        // 10px inner dot for 20px radio
+      },
+      disabled: {
+        true: "bg-neutral-500",
+        // Gray dot when disabled
+        false: "bg-neutral-1100"
+        // Black dot when enabled
+      }
+    },
+    defaultVariants: {
+      size: "big",
+      disabled: false
+    }
+  }
+);
+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;
+    const radioEl = /* @__PURE__ */ jsx5(
+      RadioGroupPrimitive.Item,
+      {
+        ref,
+        className: cn5(radioVariants({ size }), !hasLabel && className),
+        disabled,
+        ...props,
+        children: /* @__PURE__ */ jsx5(RadioGroupPrimitive.Indicator, { className: cn5(radioIndicatorVariants({ size })), children: /* @__PURE__ */ jsx5("span", { className: cn5(radioDotVariants({ size, disabled: !!disabled })) }) })
+      }
+    );
+    if (!hasLabel) return radioEl;
+    return /* @__PURE__ */ jsxs4("label", { className: cn5("inline-flex cursor-pointer items-center gap-3", className), children: [
+      radioEl,
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0", children: [
+        title != null && /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium leading-6 text-neutral-1100", children: title }),
+        subtext != null && /* @__PURE__ */ jsx5("span", { className: "text-xs font-normal leading-4 text-neutral-600", children: subtext })
+      ] })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+
+// src/primitives/input.tsx
+import * as React6 from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { cn as cn6 } from "@esds-sangam/utils";
+import { Info, TickmarkFilled, WarningFilled } from "@esds-sangam/icons";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var inputVariants = cva6(
+  [
+    // Base styles
+    "w-full rounded-sm border transition-all duration-200 ease-out",
+    "font-sans text-sm leading-6 font-normal h-8",
+    // 14px font, 24px line-height, 400 weight
+    "px-3 py-1",
+    // 12px horizontal, 4px vertical
+    "outline-none",
+    // Default state
+    "bg-white border-neutral-400 text-neutral-600",
+    // Placeholder
+    "placeholder:text-sm",
+    // 14px font
+    "placeholder:leading-6",
+    // 24px line-height
+    // Hover state
+    "hover:border-neutral-700",
+    // Focus (Active/Typing) state
+    "focus:border-neutral-700 focus:text-neutral-1100",
+    // Caret (cursor) color
+    "caret-neutral-1100",
+    // Disabled state
+    "disabled:bg-neutral-200 disabled:border-neutral-200 disabled:text-neutral-500",
+    "disabled:cursor-not-allowed",
+    // Remove default focus ring
+    "focus-visible:outline-none"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        error: ["border-red-800 focus:border-red-800", "text-neutral-1100 focus:text-neutral-1100"],
+        success: [
+          "border-green-800 focus:border-green-800",
+          "text-neutral-1100 focus:text-neutral-1100"
+        ]
+      },
+      // Filled state (when input has value); filled disabled keeps text #111111
+      filled: {
+        true: "text-neutral-1100 disabled:text-neutral-1100",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      filled: false
+    }
+  }
+);
+var labelVariants = cva6([
+  // Base label styles matching Figma specs
+  "block text-xs font-medium leading-4 tracking-normal",
+  "text-neutral-1100 font-sans mb-2"
+]);
+var Label = React6.forwardRef(
+  ({ children, required, className, endAdornment, ...props }, ref) => /* @__PURE__ */ jsxs5(
+    "label",
+    {
+      ref,
+      className: cn6(labelVariants(), "flex items-center gap-1", className),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx6("span", { className: "text-red-700 ml-0.5", children: "*" }),
+        endAdornment
+      ]
+    }
+  )
+);
+Label.displayName = "Label";
+var Input = React6.forwardRef(
+  ({
+    className,
+    type = "text",
+    label,
+    required,
+    error,
+    success,
+    helperText,
+    helperError,
+    disabled,
+    value,
+    showLabelIcon = false,
+    showHelperIcon = false,
+    trailingIcon,
+    ctaLabel,
+    onCtaClick,
+    ...props
+  }, ref) => {
+    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-red-800" : success ? "text-green-800" : "text-neutral-600";
+    const HelperIcon = error ? WarningFilled : success ? TickmarkFilled : showHelperIcon ? Info : null;
+    const hasTrailing = Boolean(trailingIcon);
+    const hasCta = Boolean(ctaLabel);
+    const inputElement = /* @__PURE__ */ jsx6(
+      "input",
+      {
+        id: inputId,
+        ref,
+        type,
+        disabled,
+        value,
+        "aria-describedby": helperTextId,
+        "aria-invalid": error ? "true" : void 0,
+        className: cn6(
+          inputVariants({ variant, filled: isFilled }),
+          (hasTrailing || hasCta) && "min-w-0 flex-1 w-auto border-0 rounded-none focus:ring-0",
+          hasTrailing && "pr-2",
+          hasCta && "pr-2",
+          !hasTrailing && !hasCta && className
+        ),
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxs5("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx6(
+        Label,
+        {
+          htmlFor: inputId,
+          required,
+          endAdornment: showLabelIcon ? /* @__PURE__ */ jsx6(Info, { size: 16, className: "!text-neutral-600 shrink-0", "aria-hidden": "true" }) : void 0,
+          children: label
+        }
+      ),
+      hasTrailing ? /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: cn6(
+            "flex items-center w-full overflow-hidden rounded-sm border transition-all duration-200 ease-out",
+            "bg-white font-sans text-sm leading-6 font-normal",
+            "border-neutral-400 hover:border-neutral-700",
+            "focus-within:border-neutral-700",
+            error && "border-red-800 hover:border-red-800 focus-within:border-red-800",
+            success && "border-green-800 hover:border-green-800 focus-within:border-green-800",
+            disabled && "bg-neutral-200 border-neutral-200",
+            className
+          ),
+          children: [
+            inputElement,
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: cn6(
+                  "flex items-center justify-center shrink-0 pl-1 pr-3 py-1 min-h-[32px]",
+                  "text-neutral-1100",
+                  disabled && "text-neutral-500"
+                ),
+                "aria-hidden": "true",
+                children: trailingIcon
+              }
+            )
+          ]
+        }
+      ) : hasCta ? /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: cn6(
+            "flex items-center w-full overflow-hidden rounded-sm border transition-all duration-200 ease-out",
+            "bg-white font-sans text-sm leading-6 font-normal",
+            "border-neutral-400 hover:border-neutral-700",
+            "focus-within:border-neutral-700",
+            error && "border-red-800 hover:border-red-800 focus-within:border-red-800",
+            success && "border-green-800 hover:border-green-800 focus-within:border-green-800",
+            disabled && "bg-neutral-200 border-neutral-200",
+            className
+          ),
+          children: [
+            inputElement,
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: onCtaClick,
+                disabled,
+                className: "shrink-0 text-blue-600 text-sm font-normal hover:underline pl-2 pr-3 py-1 focus:outline-none focus-visible:ring-0 rounded",
+                children: ctaLabel
+              }
+            )
+          ]
+        }
+      ) : inputElement,
+      helperText && /* @__PURE__ */ jsxs5(
+        "p",
+        {
+          id: helperTextId,
+          className: cn6(
+            "mt-2 flex items-center gap-1 text-xs leading-4 font-normal",
+            helperTextColor
+          ),
+          children: [
+            HelperIcon && /* @__PURE__ */ jsx6(
+              HelperIcon,
+              {
+                size: 16,
+                className: cn6(
+                  error ? "text-red-800" : success ? "text-green-800" : "text-neutral-600"
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            helperText
+          ]
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/primitives/dropdown.tsx
+import * as React7 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cva as cva7 } from "class-variance-authority";
+import { cn as cn7 } from "@esds-sangam/utils";
+import {
+  ChevronDown,
+  ChevronUp,
+  Close,
+  Tickmark,
+  Info as Info2,
+  InfoFilled as InfoFilled2,
+  WarningFilled as WarningFilled2
+} from "@esds-sangam/icons";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DROPDOWN_TRIGGER_HEIGHT = 32;
+var DROPDOWN_TRIGGER_MIN_WIDTH = 264;
+var dropdownTriggerVariants = cva7(
+  [
+    "flex items-center justify-between w-full rounded-sm border transition-all duration-200 ease-out outline-none",
+    "font-sans text-sm leading-6 font-normal",
+    "px-3 py-1 min-h-[32px] h-8",
+    "bg-white border-neutral-400 text-neutral-1100",
+    "hover:border-neutral-700",
+    "focus:border-neutral-700",
+    "data-[placeholder]:text-neutral-600",
+    "data-[state=open]:border-neutral-700 data-[state=open]:text-neutral-600",
+    "disabled:bg-neutral-200 disabled:border-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed",
+    "focus-visible:outline-none"
+  ],
+  {
+    variants: {
+      error: {
+        true: "border-red-800 hover:border-red-800 focus:border-red-800 data-[state=open]:border-red-800",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      error: false
+    }
+  }
+);
+var dropdownContentVariants = cva7([
+  "z-50 overflow-hidden rounded-sm border bg-white p-2",
+  "border-neutral-200 shadow-elevation-bottom-sm",
+  "text-neutral-1100 text-sm font-normal leading-6",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2"
+]);
+var dropdownItemVariants = cva7([
+  "relative flex w-full cursor-default select-none items-center rounded-sm py-2 pl-3 pr-8 text-sm font-normal leading-6 outline-none",
+  "text-neutral-1100",
+  "data-[highlighted]:bg-neutral-100",
+  "data-[disabled]:pointer-events-none data-[disabled]:text-neutral-500"
+]);
+var Dropdown = React7.forwardRef(
+  ({
+    label,
+    required,
+    placeholder = "Input",
+    options,
+    width,
+    error = false,
+    disabled,
+    showLabelIcon = false,
+    helperText,
+    showHelperIcon = false,
+    ...rootProps
+  }, ref) => {
+    const triggerId = React7.useId();
+    const isDisabled = disabled ?? false;
+    const helperTextId = helperText ? `${triggerId}-helper` : void 0;
+    const helperTextColor = error ? "text-red-800" : "text-neutral-500";
+    const HelperIcon = error ? WarningFilled2 : showHelperIcon ? 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-neutral-600", "aria-hidden": "true" }) : void 0,
+          className: "!m-0",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs6(SelectPrimitive.Root, { ...rootProps, disabled: isDisabled, required, children: [
+        /* @__PURE__ */ jsxs6(
+          SelectPrimitive.Trigger,
+          {
+            ref,
+            id: triggerId,
+            className: cn7("group", dropdownTriggerVariants({ error })),
+            style: {
+              width: width ?? "100%",
+              minWidth: DROPDOWN_TRIGGER_MIN_WIDTH,
+              minHeight: DROPDOWN_TRIGGER_HEIGHT
+            },
+            children: [
+              /* @__PURE__ */ jsx7(SelectPrimitive.Value, { placeholder }),
+              /* @__PURE__ */ jsx7(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                /* @__PURE__ */ jsx7(ChevronDown, { size: 16, className: "shrink-0 group-data-[state=open]:hidden" }),
+                /* @__PURE__ */ jsx7(ChevronUp, { size: 16, className: "hidden shrink-0 group-data-[state=open]:block" })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+          SelectPrimitive.Content,
+          {
+            className: cn7(
+              dropdownContentVariants(),
+              "min-w-[var(--radix-select-trigger-width)] flex flex-col gap-2"
+            ),
+            position: "popper",
+            side: "bottom",
+            sideOffset: 4,
+            avoidCollisions: false,
+            children: /* @__PURE__ */ jsx7(SelectPrimitive.Viewport, { className: "flex flex-col gap-2", children: options.map((opt) => /* @__PURE__ */ jsxs6(
+              SelectPrimitive.Item,
+              {
+                value: opt.value,
+                disabled: opt.disabled,
+                className: dropdownItemVariants(),
+                textValue: opt.label,
+                children: [
+                  /* @__PURE__ */ jsx7(SelectPrimitive.ItemText, { children: opt.label }),
+                  /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx7(Tickmark, { size: 16, color: "var(--color-neutral-1100)" }) })
+                ]
+              },
+              opt.value
+            )) })
+          }
+        ) })
+      ] }),
+      helperText && /* @__PURE__ */ jsxs6(
+        "p",
+        {
+          id: helperTextId,
+          className: cn7("flex items-center gap-1 text-xs leading-4 font-normal", helperTextColor),
+          children: [
+            HelperIcon && /* @__PURE__ */ jsx7(
+              HelperIcon,
+              {
+                size: 16,
+                className: cn7(error ? "text-red-800" : "text-neutral-1100", "shrink-0"),
+                "aria-hidden": "true"
+              }
+            ),
+            helperText
+          ]
+        }
+      )
+    ] });
+  }
+);
+Dropdown.displayName = "Dropdown";
+var multiSelectContentVariants = cva7([
+  "z-50 min-w-[var(--radix-dropdown-menu-trigger-width)] overflow-hidden rounded-sm border bg-white p-2 flex flex-col gap-2",
+  "border-neutral-200 shadow-elevation-bottom-sm",
+  "text-neutral-1100 text-sm font-normal leading-6",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2"
+]);
+var multiSelectCheckboxItemVariants = cva7([
+  "group relative flex cursor-default select-none items-center gap-1.5 rounded-[4px] px-2 py-1 text-sm font-normal leading-6 outline-none",
+  "text-neutral-1100",
+  "data-[highlighted]:bg-neutral-200",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+]);
+var multiSelectCheckboxBox = "flex h-4 w-4 shrink-0 p-[3px] items-center justify-center rounded-[4px] border border-neutral-400 group-data-[state=checked]:border-neutral-1100 group-data-[state=checked]:bg-neutral-1100";
+var DropdownMulti = React7.forwardRef(
+  ({
+    label,
+    required,
+    placeholder = "Input",
+    options,
+    value = [],
+    onValueChange,
+    width,
+    error = false,
+    disabled,
+    selectAllLabel = "Select all",
+    showLabelIcon = false,
+    helperText,
+    showHelperIcon = false
+  }, ref) => {
+    const triggerId = React7.useId();
+    const [open, setOpen] = React7.useState(false);
+    const helperTextId = helperText ? `${triggerId}-helper` : void 0;
+    const helperTextColor = error ? "text-red-800" : "text-neutral-600";
+    const HelperIcon = error ? InfoFilled2 : showHelperIcon ? Info2 : null;
+    const allSelected = options.length > 0 && value.length === options.length;
+    const handleCheckedChange = (optValue, checked) => {
+      if (checked) {
+        onValueChange([...value, optValue]);
+      } else {
+        onValueChange(value.filter((v) => v !== optValue));
+      }
+    };
+    const handleSelectAllChange = (checked) => {
+      if (checked) {
+        onValueChange(options.map((o) => o.value));
+      } else {
+        onValueChange([]);
+      }
+    };
+    const removeOption = (e, optValue) => {
+      e.stopPropagation();
+      onValueChange(value.filter((v) => v !== optValue));
+    };
+    const selectedLabels = value.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
+    return /* @__PURE__ */ jsxs6("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx7(
+        Label,
+        {
+          htmlFor: triggerId,
+          required,
+          endAdornment: showLabelIcon ? /* @__PURE__ */ jsx7(Info2, { size: 16, className: "!text-neutral-600 shrink-0", "aria-hidden": "true" }) : void 0,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs6(DropdownMenuPrimitive.Root, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            ref,
+            type: "button",
+            id: triggerId,
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "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-white 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-red-800 hover:border-red-800 focus:border-red-800" : "border border-neutral-400 hover:border-neutral-700 focus:border-neutral-700",
+              "focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:border-neutral-200 disabled:text-neutral-500"
+            ),
+            style: {
+              width: width ?? "100%",
+              minWidth: DROPDOWN_TRIGGER_MIN_WIDTH,
+              minHeight: DROPDOWN_TRIGGER_HEIGHT
+            },
+            children: [
+              selectedLabels.length === 0 ? /* @__PURE__ */ jsx7("span", { className: "text-neutral-600", children: placeholder }) : value.map((optValue, i) => {
+                const labelText = options.find((o) => o.value === optValue)?.label ?? selectedLabels[i];
+                return /* @__PURE__ */ jsxs6(
+                  "span",
+                  {
+                    className: "inline-flex items-center gap-1 rounded-full border border-neutral-400 bg-neutral-200 px-2 py-[1.5px] !text-xs text-neutral-1100 font-medium",
+                    children: [
+                      labelText,
+                      /* @__PURE__ */ jsx7(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => removeOption(e, optValue),
+                          className: "flex cursor-pointer items-center justify-center rounded hover:opacity-80",
+                          "aria-label": `Remove ${labelText}`,
+                          children: /* @__PURE__ */ jsx7(Close, { size: 12, className: "shrink-0 text-neutral-1100", "aria-hidden": true })
+                        }
+                      )
+                    ]
+                  },
+                  optValue
+                );
+              }),
+              /* @__PURE__ */ jsxs6(
+                "span",
+                {
+                  className: "ml-auto flex shrink-0 items-center justify-center pl-1 text-neutral-1100",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsx7(ChevronDown, { size: 16, className: "shrink-0 group-data-[state=open]:hidden" }),
+                    /* @__PURE__ */ jsx7(ChevronUp, { size: 16, className: "hidden shrink-0 group-data-[state=open]:block" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
+          DropdownMenuPrimitive.Content,
+          {
+            className: multiSelectContentVariants(),
+            align: "start",
+            side: "bottom",
+            sideOffset: 4,
+            avoidCollisions: false,
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            children: [
+              selectAllLabel ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                /* @__PURE__ */ jsxs6(
+                  DropdownMenuPrimitive.CheckboxItem,
+                  {
+                    checked: allSelected,
+                    onCheckedChange: handleSelectAllChange,
+                    className: multiSelectCheckboxItemVariants(),
+                    onSelect: (e) => e.preventDefault(),
+                    children: [
+                      /* @__PURE__ */ jsx7("span", { className: cn7(multiSelectCheckboxBox), children: /* @__PURE__ */ jsx7(
+                        Tickmark,
+                        {
+                          size: 12,
+                          className: "opacity-0 !text-white group-data-[state=checked]:opacity-100"
+                        }
+                      ) }),
+                      selectAllLabel
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Separator, { className: "border-b border-neutral-200 my-0" })
+              ] }) : null,
+              options.map((opt) => /* @__PURE__ */ jsxs6(
+                DropdownMenuPrimitive.CheckboxItem,
+                {
+                  checked: value.includes(opt.value),
+                  onCheckedChange: (checked) => handleCheckedChange(opt.value, checked),
+                  disabled: opt.disabled,
+                  className: multiSelectCheckboxItemVariants(),
+                  onSelect: (e) => e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx7("span", { className: cn7(multiSelectCheckboxBox), children: /* @__PURE__ */ jsx7(
+                      Tickmark,
+                      {
+                        size: 12,
+                        className: "opacity-0 !text-white group-data-[state=checked]:opacity-100"
+                      }
+                    ) }),
+                    opt.label
+                  ]
+                },
+                opt.value
+              ))
+            ]
+          }
+        ) })
+      ] }),
+      helperText && /* @__PURE__ */ jsxs6(
+        "p",
+        {
+          id: helperTextId,
+          className: cn7(
+            "mt-1 flex items-center gap-1.5 text-xs leading-4 font-normal",
+            helperTextColor
+          ),
+          children: [
+            HelperIcon && /* @__PURE__ */ jsx7(
+              HelperIcon,
+              {
+                size: 16,
+                className: cn7(error ? "text-red-800" : "text-neutral-1100", "shrink-0"),
+                "aria-hidden": "true"
+              }
+            ),
+            helperText
+          ]
+        }
+      )
+    ] });
+  }
+);
+DropdownMulti.displayName = "DropdownMulti";
+
+// src/primitives/search-field.tsx
+import * as React8 from "react";
+import { cva as cva8 } from "class-variance-authority";
+import { cn as cn8 } from "@esds-sangam/utils";
+import { Search, Close as Close2 } from "@esds-sangam/icons";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var searchFieldVariants = cva8(
+  [
+    // Base styles
+    "relative w-[400px] flex items-center gap-2",
+    "rounded-sm border transition-all duration-200 ease-out",
+    // rounded-sm = 8px from radius tokens
+    "font-sans text-sm leading-6 font-normal",
+    // 14px font, 24px line-height
+    "px-3 py-1",
+    // 12px horizontal, 4px vertical
+    // Default state
+    "bg-white border-neutral-400",
+    // Hover state
+    "hover:border-neutral-700",
+    // Focus-within (Active/Typing) state
+    "focus-within:border-neutral-700",
+    // Disabled state
+    "has-[:disabled]:bg-neutral-200 has-[:disabled]:border-neutral-200",
+    "has-[:disabled]:cursor-not-allowed",
+    "h-8 w-full min-w-[296px]"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var searchInputVariants = cva8([
+  // Base input styles
+  "flex-1 bg-transparent border-none outline-none",
+  "text-neutral-1100 placeholder:text-neutral-600",
+  "focus:text-neutral-1100",
+  // Caret (cursor) color
+  "caret-neutral-1100",
+  // Disabled state
+  "disabled:text-neutral-500 disabled:cursor-not-allowed",
+  // Remove default input styling
+  "appearance-none"
+]);
+var DEFAULT_WIDTH = "100%";
+var SearchField = React8.forwardRef(
+  ({
+    width = DEFAULT_WIDTH,
+    className,
+    value,
+    onChange,
+    onClear,
+    showClearButton = true,
+    disabled,
+    placeholder = "Search",
+    ...props
+  }, ref) => {
+    const hasValue = !!value && value.toString().length > 0;
+    const handleClear = () => {
+      if (onClear) {
+        onClear();
+      } else if (onChange) {
+        const syntheticEvent = {
+          target: { value: "" }
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ jsxs7("div", { className: cn8(searchFieldVariants(), className), style: { width }, children: [
+      /* @__PURE__ */ jsx8(
+        Search,
+        {
+          size: 16,
+          className: cn8(
+            "shrink-0 transition-colors duration-200",
+            disabled ? "!text-neutral-500" : "!text-neutral-600"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          ref,
+          type: "text",
+          value,
+          onChange,
+          disabled,
+          placeholder,
+          className: searchInputVariants(),
+          ...props
+        }
+      ),
+      hasValue && showClearButton && !disabled && /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: cn8(
+            "shrink-0 flex items-center justify-center",
+            "text-neutral-900 hover:text-neutral-1100",
+            "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"
+          ),
+          "aria-label": "Clear search",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx8(Close2, { size: 16 })
+        }
+      )
+    ] });
+  }
+);
+SearchField.displayName = "SearchField";
+
+// src/primitives/textarea.tsx
+import * as React9 from "react";
+import { cva as cva9 } from "class-variance-authority";
+import { cn as cn9 } from "@esds-sangam/utils";
+import { Info as Info3, TickmarkFilled as TickmarkFilled2, InfoFilled as InfoFilled3 } from "@esds-sangam/icons";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var textareaVariants = cva9(
+  [
+    // Base styles
+    "w-[450px] h-24 rounded-sm border transition-all duration-200 ease-out",
+    "font-sans text-sm leading-6 font-normal",
+    // 14px font, 24px line-height, 400 weight
+    "px-3 py-1",
+    // 12px horizontal, 4px vertical
+    "outline-none resize-none",
+    // Fixed height, no resize
+    // Default state
+    "bg-white border-neutral-400 text-neutral-600 placeholder:text-neutral-600",
+    // Hover state
+    "hover:border-neutral-700",
+    // Focus (Active/Typing) state
+    "focus:border-neutral-700 focus:text-neutral-1100",
+    // Caret (cursor) color
+    "caret-neutral-1100",
+    // Disabled state
+    "disabled:bg-neutral-200 disabled:border-neutral-200 disabled:text-neutral-500",
+    "disabled:cursor-not-allowed",
+    // Remove default focus ring
+    "focus-visible:outline-none"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        error: ["border-red-800 focus:border-red-800", "text-neutral-1100 focus:text-neutral-1100"],
+        success: [
+          "border-green-800 focus:border-green-800",
+          "text-neutral-1100 focus:text-neutral-1100"
+        ]
+      },
+      // Filled state (when textarea has value)
+      filled: {
+        true: "text-neutral-1100",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      filled: false
+    }
+  }
+);
+var Textarea = React9.forwardRef(
+  ({
+    className,
+    label,
+    required,
+    error,
+    success,
+    helperText,
+    helperError,
+    disabled,
+    value,
+    rows = 3,
+    maxLength = 250,
+    showCounter = true,
+    showLabelIcon = false,
+    showHelperIcon = false,
+    ...props
+  }, ref) => {
+    const variant = error ? "error" : success ? "success" : "default";
+    const isFilled = !!value && value.toString().length > 0;
+    const currentLength = value ? value.toString().length : 0;
+    const textareaId = props.id || `textarea-${React9.useId()}`;
+    const helperTextId = helperText ? `${textareaId}-helper` : void 0;
+    const helperTextColor = error ? "text-red-800" : success ? "text-green-800" : "text-neutral-600";
+    const HelperIcon = error ? InfoFilled3 : success ? TickmarkFilled2 : showHelperIcon ? 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-neutral-1100 shrink-0", "aria-hidden": "true" }) : void 0,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "textarea",
+        {
+          id: textareaId,
+          ref,
+          disabled,
+          value,
+          rows,
+          maxLength,
+          "aria-describedby": helperTextId,
+          "aria-invalid": error ? "true" : void 0,
+          className: cn9(textareaVariants({ variant, filled: isFilled }), className),
+          ...props
+        }
+      ),
+      (helperText || showCounter) && /* @__PURE__ */ jsxs8("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
+        helperText && /* @__PURE__ */ jsxs8(
+          "p",
+          {
+            id: helperTextId,
+            className: cn9(
+              "flex items-center gap-1.5 text-xs leading-4 font-normal",
+              // 12px, 400 weight, 16px line-height; color from tokens
+              helperTextColor
+            ),
+            children: [
+              HelperIcon && /* @__PURE__ */ jsx9(
+                HelperIcon,
+                {
+                  size: 16,
+                  className: cn9(
+                    error ? "text-red-800" : success ? "text-green-800" : "text-neutral-1100"
+                  ),
+                  "aria-hidden": "true"
+                }
+              ),
+              helperText
+            ]
+          }
+        ),
+        showCounter && /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: cn9(
+              "text-xs leading-4 select-none",
+              // 12px font, 16px line-height
+              disabled ? "text-neutral-500" : "text-neutral-600",
+              helperText ? "" : "ml-auto"
+              // Push to right if no helper text
+            ),
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: [
+              currentLength,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/primitives/tooltip.tsx
+import * as React10 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva as cva10 } from "class-variance-authority";
+import { cn as cn10 } from "@esds-sangam/utils";
+import { CaretDown, CaretUp, CaretLeft, CaretRight, Close as Close3 } from "@esds-sangam/icons";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var tooltipContentVariants = cva10(
+  [
+    // Base styles
+    "z-50 rounded-sm",
+    // Removed overflow-hidden to allow arrows to show
+    "bg-neutral-1100 text-white",
+    "px-4 py-1",
+    // 16px horizontal, 4px vertical
+    "text-xs font-medium leading-4",
+    // 12px, 500 weight, 16px line-height
+    "shadow-md",
+    // Fixed width (rem for accessibility - scales with user font size)
+    "w-30",
+    // 7.5rem = 120px at default (16px base)
+    // Animation
+    "animate-in fade-in-0 zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2",
+    "data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2",
+    "data-[side=top]:slide-in-from-bottom-2"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "h-8 flex items-center justify-center",
+        // 2rem = 32px, centered content
+        withDescription: "h-[3.25rem] flex flex-col items-start justify-center gap-1"
+        // 3.25rem = 52px, stacked content
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React10.forwardRef(
+  ({
+    className,
+    variant,
+    sideOffset = 12,
+    side = "bottom",
+    align = "center",
+    showArrow = true,
+    title,
+    description,
+    showCloseIcon = false,
+    onClose,
+    children,
+    ...props
+  }, ref) => {
+    const computedVariant = description || showCloseIcon ? "withDescription" : "default";
+    const finalVariant = variant || computedVariant;
+    const CaretComponent = {
+      bottom: CaretUp,
+      // Tooltip at bottom, arrow at top pointing up
+      top: CaretDown,
+      // Tooltip at top, arrow at bottom pointing down
+      left: CaretRight,
+      // Tooltip at left, arrow at right pointing right
+      right: CaretLeft
+      // Tooltip at right, arrow at left pointing left
+    }[side];
+    const getCaretPosition = () => {
+      if (side === "bottom" || side === "top") {
+        const baseClasses = "absolute left-1/2 -translate-x-1/2";
+        const sideClass = side === "bottom" ? "-top-[8px]" : "-bottom-[8px]";
+        let alignClass = "";
+        if (align === "start") {
+          alignClass = "!left-4 !translate-x-0";
+        } else if (align === "end") {
+          alignClass = "!left-auto !right-4 !translate-x-0";
+        }
+        return `${baseClasses} ${sideClass} ${alignClass}`;
+      }
+      if (side === "left" || side === "right") {
+        const baseClasses = "absolute top-1/2 -translate-y-1/2";
+        const sideClass = side === "left" ? "-right-[8px]" : "-left-[8px]";
+        let alignClass = "";
+        if (align === "start") {
+          alignClass = "!top-auto !bottom-4 !translate-y-0";
+        } else if (align === "end") {
+          alignClass = "!top-4 !translate-y-0";
+        }
+        return `${baseClasses} ${sideClass} ${alignClass}`;
+      }
+      return "";
+    };
+    return /* @__PURE__ */ jsx10(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
+      TooltipPrimitive.Content,
+      {
+        ref,
+        side,
+        align,
+        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-white", children: title }),
+            description && /* @__PURE__ */ jsx10("div", { className: "text-xs font-normal leading-4 text-white opacity-90 mt-1", children: description }),
+            showCloseIcon && /* @__PURE__ */ jsx10(
+              "button",
+              {
+                onClick: onClose,
+                className: "absolute top-0 right-0 text-white hover:opacity-80 transition-opacity",
+                "aria-label": "Close tooltip",
+                type: "button",
+                children: /* @__PURE__ */ jsx10(Close3, { size: 16 })
+              }
+            )
+          ] }),
+          !title && children,
+          showArrow && /* @__PURE__ */ jsx10("div", { className: cn10(getCaretPosition(), "pointer-events-none"), children: /* @__PURE__ */ jsx10(CaretComponent, { className: "text-neutral-1100" }) })
+        ]
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/primitives/progress-bar.tsx
+import * as React11 from "react";
+import { cn as cn11 } from "@esds-sangam/utils";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var TRACK_HEIGHT_PX = 6;
+var TRACK_WIDTH_PX = 476;
+var labelClassName = "text-xs font-medium leading-4 text-neutral-1100 shrink-0 min-w-[2.5rem]";
+var ProgressBar = React11.forwardRef(
+  ({
+    className,
+    value,
+    max = 100,
+    showLabel = "both",
+    width = TRACK_WIDTH_PX,
+    height = TRACK_HEIGHT_PX,
+    fluid = false,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const clamped = Math.min(max, Math.max(0, value));
+    const percentage = max === 0 ? 0 : Math.round(clamped / max * 100);
+    const displayLabel = `${percentage}%`;
+    const showLeft = showLabel === "left" || showLabel === "both";
+    const showRight = showLabel === "right" || showLabel === "both";
+    const trackStyle = fluid ? { height } : { width, height };
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: cn11("flex items-center gap-3 w-full", className),
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": ariaLabel ?? (showLabel === "none" ? "Progress" : void 0),
+        ...props,
+        children: [
+          showLeft && /* @__PURE__ */ jsx11("span", { className: labelClassName, "aria-hidden": true, children: displayLabel }),
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: cn11(
+                "rounded-full overflow-hidden bg-neutral-200 transition-colors shrink-0",
+                fluid && "w-full"
+              ),
+              style: trackStyle,
+              children: /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "h-full rounded-full bg-neutral-1100 transition-all duration-200 ease-out",
+                  style: {
+                    width: `${percentage}%`,
+                    // At 0%, show a short visible segment at the left (min ~8px)
+                    minWidth: percentage === 0 ? 8 : void 0
+                  }
+                }
+              )
+            }
+          ),
+          showRight && /* @__PURE__ */ jsx11("span", { className: cn11(labelClassName, "text-right"), "aria-hidden": true, children: displayLabel })
+        ]
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+
+// src/primitives/skeleton.tsx
+import * as React12 from "react";
+import { cva as cva11 } from "class-variance-authority";
+import { cn as cn12 } from "@esds-sangam/utils";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var skeletonVariants = cva11(
+  [
+    "relative overflow-hidden",
+    "rounded-sm",
+    // tokens radius.sm = 8px
+    "bg-neutral-200",
+    // from colors.json
+    // Use Tailwind's built-in pulse animation for loading state
+    "animate-pulse"
+  ],
+  {
+    variants: {
+      variant: {
+        rectangular: ""
+      }
+    },
+    defaultVariants: {
+      variant: "rectangular"
+    }
+  }
+);
+var Skeleton = React12.forwardRef(
+  ({ className, variant, style, "aria-label": ariaLabel, ...props }, ref) => {
+    const accessibleProps = ariaLabel != null ? {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-busy": true
+    } : {
+      "aria-hidden": true
+    };
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref,
+        className: cn12(skeletonVariants({ variant, className })),
+        style,
+        ...accessibleProps,
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/tabs.tsx
+import * as React13 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva as cva12 } from "class-variance-authority";
+import { cn as cn13 } from "@esds-sangam/utils";
+import { Tickmark as Tickmark2 } from "@esds-sangam/icons";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var tabsListVariants = cva12("inline-flex items-center", {
+  variants: {
+    type: {
+      container: "gap-0 rounded-xs p-0.5 bg-neutral-200",
+      underline: "gap-0 border-b border-neutral-200",
+      iconOnly: "gap-0 rounded-xs p-0.5 bg-neutral-200"
+    }
+  },
+  defaultVariants: {
+    type: "container"
+  }
+});
+var tabsTriggerVariants = cva12(
+  [
+    "inline-flex items-center justify-center transition-colors duration-200 ease-out",
+    "text-sm font-medium leading-6",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-neutral-400",
+    "disabled:pointer-events-none disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      type: {
+        container: [
+          "min-w-[178px] h-8 px-4 rounded-xs",
+          "text-neutral-600 hover:text-neutral-1100",
+          "data-[state=active]:bg-white data-[state=active]:text-neutral-1100 data-[state=active]:shadow-elevation-bottom-sm",
+          "disabled:text-neutral-500"
+        ],
+        underline: [
+          "px-3 py-1 border-b-2 -mb-[1px] border-transparent",
+          "text-neutral-600 hover:text-neutral-1100",
+          "data-[state=active]:text-neutral-1100 data-[state=active]:border-blue-600 data-[state=active]:border-b-2",
+          "disabled:text-neutral-500"
+        ],
+        iconOnly: [
+          "w-6 h-6 rounded-xs p-1",
+          "text-neutral-600 hover:text-neutral-1100",
+          "data-[state=active]:bg-white data-[state=active]:text-neutral-1100 data-[state=active]:shadow-elevation-bottom-sm",
+          "disabled:text-neutral-500"
+        ]
+      }
+    },
+    defaultVariants: {
+      type: "container"
+    }
+  }
+);
+var TabsContext = React13.createContext(null);
+function useTabsType() {
+  const ctx = React13.useContext(TabsContext);
+  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 }) })
+);
+TabsRoot.displayName = "Tabs";
+var TabsList = React13.forwardRef(({ className, type, ...props }, ref) => {
+  const resolvedType = type ?? useTabsType();
+  return /* @__PURE__ */ jsx13(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn13(tabsListVariants({ type: resolvedType }), className),
+      ...props
+    }
+  );
+});
+TabsList.displayName = "TabsList";
+var TabsTrigger = React13.forwardRef(({ className, type, icon, children, ...props }, ref) => {
+  const resolvedType = type ?? useTabsType();
+  const iconContent = icon ?? (resolvedType === "iconOnly" ? /* @__PURE__ */ jsx13(Tickmark2, { size: 16, className: "shrink-0" }) : null);
+  return /* @__PURE__ */ jsx13(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn13(tabsTriggerVariants({ type: resolvedType }), className),
+      ...props,
+      children: resolvedType === "iconOnly" ? iconContent : children ?? "Label"
+    }
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn13("mt-4 focus-visible:outline-none", className),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+var Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+});
+
+// src/primitives/avatar.tsx
+import * as React14 from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { cn as cn14 } from "@esds-sangam/utils";
+import { AvatarPlaceholder } from "@esds-sangam/icons";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var avatarVariants = cva13(
+  [
+    "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+    "bg-neutral-200"
+    // tokens colors.json neutral.200
+  ],
+  {
+    variants: {
+      size: {
+        large: "h-8 w-8",
+        // 32×32 (Big)
+        medium: "h-6 w-6",
+        // 24×24 (Medium)
+        small: "h-5 w-5"
+        // 20×20 (Small)
+      }
+    },
+    defaultVariants: {
+      size: "large"
+    }
+  }
+);
+var letterTextClassBySize = {
+  large: "text-base font-medium leading-6 text-neutral-600",
+  // tokens base = 16px
+  medium: "text-3xs font-medium leading-4 text-neutral-600",
+  // tokens 3xs = 10px
+  small: "text-3xs font-medium leading-4 text-neutral-600"
+  // tokens 3xs = 10px
+};
+var Avatar = React14.forwardRef(
+  ({ className, size = "large", variant = "image", 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;
+    return /* @__PURE__ */ jsx14(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": alt || (typeof children === "string" ? children : void 0),
+        className: cn14(avatarVariants({ size }), className),
+        ...props,
+        children: showImg ? /* @__PURE__ */ jsx14(
+          "img",
+          {
+            src,
+            alt,
+            width: sizePx,
+            height: sizePx,
+            className: "h-full w-full object-cover",
+            onError: () => setImgFailed(true)
+          }
+        ) : showLetter && children ? /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: cn14(
+              "flex h-full w-full items-center justify-center",
+              letterTextClassBySize[size ?? "large"]
+            ),
+            children
+          }
+        ) : /* @__PURE__ */ jsx14(AvatarPlaceholder, { size: sizePx, className: "shrink-0" })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/badge.tsx
+import * as React15 from "react";
+import { cva as cva14 } from "class-variance-authority";
+import { cn as cn15 } from "@esds-sangam/utils";
+import { ChevronDown as ChevronDown2, Close as Close4, InfoFilled as InfoFilled4, TickmarkFilled as TickmarkFilled3, WarningFilled as WarningFilled3 } from "@esds-sangam/icons";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var badgeVariants = cva14(
+  [
+    "inline-flex items-center justify-center gap-1 transition-colors",
+    "border box-border",
+    "text-xs font-medium leading-4"
+    // Label: 12px, weight 500, line-height 16px (both big & small)
+  ],
+  {
+    variants: {
+      size: {
+        big: "",
+        small: ""
+      },
+      variant: {
+        rounded: "rounded-sm",
+        // 8px border radius (tokens radius.sm = 0.5rem)
+        pill: "rounded-full",
+        notification: "rounded-full"
+      },
+      state: {
+        info: "",
+        success: "",
+        warning: "",
+        error: "",
+        neutral: "",
+        process: "",
+        action: ""
+      },
+      appearance: {
+        outlined: "border",
+        solid: "border-transparent"
+      }
+    },
+    compoundVariants: [
+      // Big: rounded/pill 48×24, 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: "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
+      { 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: "notification", class: "h-5 w-5 p-0" },
+      // Info (subtle/solid from semantic tokens)
+      {
+        state: "info",
+        appearance: "outlined",
+        class: "bg-semantic-background-semantic-info-subtle border-semantic-border-semantic-info-subtle text-semantic-text-neutral-primary"
+      },
+      {
+        state: "info",
+        appearance: "solid",
+        class: "bg-semantic-background-semantic-info-default text-semantic-text-semantic-info-default"
+      },
+      // Success
+      {
+        state: "success",
+        appearance: "outlined",
+        class: "bg-semantic-background-semantic-success-subtle border-semantic-border-semantic-success-subtle text-semantic-text-neutral-primary"
+      },
+      {
+        state: "success",
+        appearance: "solid",
+        class: "bg-semantic-background-semantic-success-default text-semantic-text-semantic-success-default"
+      },
+      // Warning
+      {
+        state: "warning",
+        appearance: "outlined",
+        class: "bg-semantic-background-semantic-warning-subtle border-semantic-border-semantic-warning-subtle text-semantic-text-neutral-primary"
+      },
+      {
+        state: "warning",
+        appearance: "solid",
+        class: "bg-semantic-background-semantic-warning-default text-semantic-text-semantic-warning-default"
+      },
+      // Error
+      {
+        state: "error",
+        appearance: "outlined",
+        class: "bg-semantic-background-semantic-error-subtle border-semantic-border-semantic-error-subtle text-semantic-text-neutral-primary"
+      },
+      {
+        state: "error",
+        appearance: "solid",
+        class: "bg-semantic-background-semantic-error-default text-semantic-text-semantic-error-default"
+      },
+      // Neutral
+      {
+        state: "neutral",
+        appearance: "outlined",
+        class: "bg-semantic-background-neutral-tertiary border-semantic-border-neutral-primary text-semantic-text-neutral-primary"
+      },
+      {
+        state: "neutral",
+        appearance: "solid",
+        class: "bg-neutral-400 text-neutral-1100"
+      },
+      // Process (purple: outlined = bg purple-200, border purple-700, text neutral-1100; solid = bg purple-700, text white)
+      {
+        state: "process",
+        appearance: "outlined",
+        class: "bg-purple-200 border-purple-700 text-neutral-1100"
+      },
+      {
+        state: "process",
+        appearance: "solid",
+        class: "bg-purple-700 text-white"
+      },
+      {
+        state: "action",
+        appearance: "outlined",
+        class: "bg-semantic-background-semantic-action-subtle border-neutral-400 text-semantic-text-neutral-primary"
+      }
+    ],
+    defaultVariants: {
+      size: "big",
+      variant: "rounded",
+      state: "neutral",
+      appearance: "outlined"
+    }
+  }
+);
+var leadingIconMap = {
+  info: InfoFilled4,
+  success: TickmarkFilled3,
+  warning: WarningFilled3,
+  error: WarningFilled3,
+  neutral: InfoFilled4,
+  process: InfoFilled4,
+  action: InfoFilled4
+};
+var Badge = React15.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    state,
+    appearance,
+    children,
+    isSolid = false,
+    leadingIcon = false,
+    dropdownIcon = false,
+    closable = false,
+    onClose,
+    ...props
+  }, ref) => {
+    const resolvedAppearance = isSolid ? "solid" : appearance;
+    const resolvedState = state ?? "neutral";
+    const LeadingIcon = leadingIconMap[resolvedState];
+    const showLeadingIcon = leadingIcon && !!LeadingIcon;
+    const onCloseClick = (event) => {
+      event.stopPropagation();
+      onClose?.();
+    };
+    const leadingIconSize = size === "small" ? 12 : 16;
+    const dropdownChevronSize = size === "small" ? 12 : 16;
+    const closeIconSize = size === "small" ? 10 : 12;
+    return /* @__PURE__ */ jsxs11(
+      "span",
+      {
+        ref,
+        className: cn15(
+          badgeVariants({ size, variant, state: resolvedState, appearance: resolvedAppearance }),
+          className
+        ),
+        ...props,
+        children: [
+          showLeadingIcon && /* @__PURE__ */ jsx15(
+            LeadingIcon,
+            {
+              size: leadingIconSize,
+              className: cn15(
+                "shrink-0",
+                resolvedAppearance === "solid" ? "text-neutral-50" : "text-neutral-1100"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          children,
+          dropdownIcon && /* @__PURE__ */ jsx15(
+            ChevronDown2,
+            {
+              size: dropdownChevronSize,
+              className: cn15(
+                "shrink-0",
+                resolvedAppearance === "solid" ? "text-neutral-50" : "text-neutral-1100"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          closable && /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              onClick: onCloseClick,
+              className: cn15(
+                "shrink-0 p-0 border-0 bg-transparent cursor-pointer rounded inline-flex items-center justify-center",
+                resolvedAppearance === "solid" ? "text-neutral-50" : "text-neutral-1100"
+              ),
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ jsx15(Close4, { size: closeIconSize, "aria-hidden": true })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/chips.tsx
+import * as React16 from "react";
+import { cva as cva15 } from "class-variance-authority";
+import { cn as cn16 } from "@esds-sangam/utils";
+import { Close as Close5, TickmarkFilled as TickmarkFilled4 } from "@esds-sangam/icons";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var chipVariants = cva15(
+  [
+    "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-white border border-neutral-400 text-neutral-1100",
+    // Hover
+    "hover:bg-neutral-200 hover:border-transparent",
+    // Focused: 2px border neutral-700 so clearly distinct from default
+    "focus-within:border-2 focus-within:border-neutral-700 focus-within:bg-white focus-within:text-neutral-1100",
+    "focus-within:outline-none"
+  ],
+  {
+    variants: {
+      size: {
+        large: "h-8 min-w-[75px] py-1 px-3 gap-1.5 text-sm",
+        small: "h-6 min-w-[67px] py-1 px-3 gap-1 text-xs"
+      },
+      selected: {
+        true: "bg-neutral-1100 text-white border-transparent hover:bg-neutral-1100",
+        false: ""
+      },
+      disabled: {
+        true: "bg-neutral-200 text-neutral-500 border-transparent hover:bg-neutral-200 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { selected: true, disabled: true, class: "bg-neutral-200 text-neutral-500" },
+      {
+        selected: true,
+        disabled: false,
+        class: "focus-within:border-2 focus-within:bg-neutral-1100 focus-within:text-white focus-within:border-neutral-700"
+      }
+    ],
+    defaultVariants: {
+      size: "large",
+      selected: false,
+      disabled: false
+    }
+  }
+);
+var Chip = React16.forwardRef(
+  ({
+    className,
+    size = "large",
+    selected = false,
+    disabled = false,
+    onDismiss,
+    showLeadingIcon = false,
+    children,
+    ...props
+  }, ref) => {
+    const iconSize = size === "large" ? 16 : 12;
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn16(chipVariants({ size, selected, disabled }), className),
+        "aria-disabled": disabled,
+        "aria-pressed": selected,
+        "data-state": selected ? "selected" : void 0,
+        ...props,
+        children: [
+          showLeadingIcon && /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: "shrink-0 inline-flex items-center justify-center text-inherit",
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx16(TickmarkFilled4, { size: iconSize, className: "text-inherit" })
+            }
+          ),
+          /* @__PURE__ */ jsx16("span", { className: "truncate", children }),
+          onDismiss != null && /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                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",
+              "aria-label": "Remove",
+              children: /* @__PURE__ */ jsx16(Close5, { size: iconSize, className: "text-inherit", "aria-hidden": true })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+// src/components/toast.tsx
+import * as React17 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { cn as cn17 } from "@esds-sangam/utils";
+import { Close as Close6, InfoFilled as InfoFilled5, TickmarkFilled as TickmarkFilled5, WarningFilled as WarningFilled4 } from "@esds-sangam/icons";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var toastVariants = cva16(
+  [
+    // Base styles
+    "flex gap-2",
+    "w-[420px]",
+    // 384px fixed width
+    "rounded-sm",
+    // 8px = tokens radius.lg
+    "bg-white",
+    "p-4",
+    // 16px padding
+    "border-l-[3px]",
+    // 3px left border
+    "shadow-md"
+    // tokens.shadows.md = 0 4px 10px 0 rgba(0,0,0,0.1)
+  ],
+  {
+    variants: {
+      variant: {
+        info: "border-l-blue-600 bg-blue-200",
+        success: "border-l-green-800 bg-green-200",
+        warning: "border-l-orange-700 bg-orange-200",
+        error: "border-l-red-800 bg-red-200"
+      },
+      layout: {
+        default: "h-14 items-center",
+        // 56px, centered vertically
+        withDescription: "h-21 items-start"
+        // 84px, top aligned
+      }
+    },
+    defaultVariants: {
+      variant: "info",
+      layout: "default"
+    }
+  }
+);
+var Toast = React17.forwardRef(
+  ({
+    className,
+    variant = "info",
+    title,
+    description,
+    showClose = true,
+    onClose,
+    ctaText,
+    onCtaClick,
+    ...props
+  }, ref) => {
+    const hasCTA = Boolean(ctaText);
+    const shouldShowClose = showClose && !hasCTA;
+    const hasExtendedContent = Boolean(hasCTA || description);
+    const layout = hasExtendedContent ? "withDescription" : "default";
+    const shouldShowDescription = description && !hasCTA;
+    const IconComponent = {
+      info: InfoFilled5,
+      success: TickmarkFilled5,
+      warning: WarningFilled4,
+      error: WarningFilled4
+    }[variant];
+    const iconClassName = {
+      info: "!text-blue-600",
+      success: "!text-green-800",
+      warning: "!text-orange-700",
+      error: "!text-red-800"
+    }[variant];
+    return /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn17(toastVariants({ variant, layout }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx17("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx17(IconComponent, { size: 20, className: iconClassName, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0 flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx17("p", { className: "text-base font-medium leading-6 text-neutral-1100", children: title }),
+              shouldShowDescription && /* @__PURE__ */ jsx17("p", { className: "text-sm font-normal leading-6 text-neutral-600", children: description })
+            ] }),
+            hasCTA && /* @__PURE__ */ jsx17(
+              Button,
+              {
+                onClick: onCtaClick,
+                size: "small",
+                variant: "primary",
+                className: "w-auto self-start mt-",
+                children: ctaText
+              }
+            )
+          ] }),
+          shouldShowClose && /* @__PURE__ */ jsx17(
+            "button",
+            {
+              onClick: onClose,
+              className: "flex-shrink-0 self-start text-neutral-1100 hover:opacity-70 transition-opacity",
+              "aria-label": "Close notification",
+              type: "button",
+              children: /* @__PURE__ */ jsx17(Close6, { size: 16 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+
+// src/patterns/PageHeader.tsx
+import * as React18 from "react";
+import { cva as cva17 } from "class-variance-authority";
+import { cn as cn18 } from "@esds-sangam/utils";
+import { ArrowLeft, Close as Close7 } from "@esds-sangam/icons";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var pageHeaderVariants = cva17("w-full", {
+  variants: {
+    variant: {
+      withTitle: "border-b border-neutral-200",
+      withTabs: "border-b border-neutral-200",
+      titleTabs: "border-b border-neutral-200"
+    }
+  },
+  defaultVariants: {
+    variant: "withTitle"
+  }
+});
+var PageHeader = React18.forwardRef(
+  ({
+    className,
+    variant = "withTitle",
+    title,
+    tabs = [],
+    defaultTab,
+    tab,
+    onTabChange,
+    titleClassName,
+    tabsClassName,
+    backIcon,
+    onBackClick,
+    showTitle = true,
+    badgeLabel,
+    showSubtext,
+    subtext,
+    primaryAction,
+    secondaryAction,
+    tertiaryAction,
+    closeIcon,
+    onCloseClick,
+    ...props
+  }, ref) => {
+    const isControlled = tab !== void 0;
+    const tabsValue = isControlled ? tab : defaultTab ?? tabs[0]?.value;
+    const hasTabs = tabs.length > 0;
+    const hasActions = !!primaryAction || !!secondaryAction || !!tertiaryAction || !!closeIcon;
+    const renderActions = () => {
+      if (!hasActions) return null;
+      const actions = [];
+      if (tertiaryAction) actions.push(tertiaryAction);
+      if (secondaryAction) actions.push(secondaryAction);
+      if (primaryAction) actions.push(primaryAction);
+      return /* @__PURE__ */ jsxs14("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__ */ jsx18(
+            Button,
+            {
+              size: "small",
+              variant: actionVariant ?? "primary",
+              icon,
+              leadingIcon,
+              trailingIcon,
+              onClick,
+              children: label
+            },
+            `${label}-${index}`
+          );
+        }),
+        closeIcon && /* @__PURE__ */ jsx18(Close7, { size: 16, className: "cursor-pointer", "aria-label": "Close", onClick: onCloseClick })
+      ] });
+    };
+    const showTitleSection = variant === "withTitle" || variant === "titleTabs";
+    const showTabsSection = variant === "withTabs" || variant === "titleTabs";
+    return /* @__PURE__ */ jsxs14(
+      "header",
+      {
+        ref,
+        className: cn18(pageHeaderVariants({ variant }), className),
+        ...props,
+        children: [
+          showTitleSection && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 items-center gap-3", children: [
+                backIcon && /* @__PURE__ */ jsx18(
+                  ArrowLeft,
+                  {
+                    size: 16,
+                    "aria-label": "Back",
+                    className: "cursor-pointer",
+                    onClick: onBackClick
+                  }
+                ),
+                showTitle && /* @__PURE__ */ jsx18(
+                  "h2",
+                  {
+                    className: cn18(
+                      "truncate text-xl font-semibold leading-7 text-neutral-1100",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                ),
+                badgeLabel && /* @__PURE__ */ jsx18(Badge, { size: "big", variant: "rounded", state: "info", children: badgeLabel })
+              ] }),
+              renderActions()
+            ] }),
+            showSubtext && subtext && /* @__PURE__ */ jsx18("p", { className: "px-[2px] text-sm leading-6 text-neutral-600", children: subtext })
+          ] }),
+          showTabsSection && hasTabs && /* @__PURE__ */ jsx18("div", { className: cn18("", tabsClassName), children: variant === "withTabs" ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs14(
+              Tabs,
+              {
+                type: "underline",
+                ...isControlled ? { value: tabsValue, onValueChange: onTabChange } : {
+                  defaultValue: defaultTab ?? tabs[0]?.value,
+                  onValueChange: onTabChange
+                },
+                className: "flex-1 pt-5",
+                children: [
+                  /* @__PURE__ */ jsx18(Tabs.List, { children: tabs.map((t) => /* @__PURE__ */ jsx18(Tabs.Trigger, { value: t.value, children: t.label }, t.value)) }),
+                  tabs.map((t) => /* @__PURE__ */ jsx18(Tabs.Content, { value: t.value, className: "hidden" }, t.value))
+                ]
+              }
+            ),
+            renderActions()
+          ] }) : /* @__PURE__ */ jsxs14(
+            Tabs,
+            {
+              type: "underline",
+              ...isControlled ? { value: tabsValue, onValueChange: onTabChange } : {
+                defaultValue: defaultTab ?? tabs[0]?.value,
+                onValueChange: onTabChange
+              },
+              className: "-mb-px mt-0 px-5",
+              children: [
+                /* @__PURE__ */ jsx18(Tabs.List, { className: "mt-0", children: tabs.map((t) => /* @__PURE__ */ jsx18(Tabs.Trigger, { value: t.value, children: t.label }, t.value)) }),
+                tabs.map((t) => /* @__PURE__ */ jsx18(Tabs.Content, { value: t.value, className: "hidden" }, t.value))
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
+
+// src/patterns/PageFooter.tsx
+import * as React19 from "react";
+import { cn as cn19 } from "@esds-sangam/utils";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var PAGE_FOOTER_WIDTH = 532;
+var PageFooter = React19.forwardRef(
+  ({ className, children, width = PAGE_FOOTER_WIDTH, contentClassName, ...props }, ref) => {
+    return /* @__PURE__ */ jsx19(
+      "footer",
+      {
+        ref,
+        className: cn19(
+          "flex h-16 items-center gap-2 bg-white p-4 shadow-elevation-top-sm",
+          className
+        ),
+        style: { width },
+        ...props,
+        children: /* @__PURE__ */ jsx19("div", { className: cn19("flex flex-1 items-center justify-end gap-2", contentClassName), children: children ?? /* @__PURE__ */ jsx19(Button, { variant: "primary", size: "small", children: "Convert" }) })
+      }
+    );
+  }
+);
+PageFooter.displayName = "PageFooter";
+
+// src/patterns/SideMenu.tsx
+import * as React20 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { cn as cn20 } from "@esds-sangam/utils";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var sideMenuVariants = cva18(
+  "flex flex-col self-start transition-[width] duration-200 ease-out",
+  {
+    variants: {
+      variant: {
+        default: "h-[1024px] w-[48px] rounded-r-lg bg-neutral-200 py-4 px-1.5",
+        hover: "h-[1024px] w-[132px] rounded-r-lg bg-white border-l border-neutral-200 shadow-elevation-right-sm py-4 pl-3 pr-3",
+        selected: "h-[1024px] w-[132px] rounded-r-lg bg-white border-l border-neutral-200 shadow-elevation-right-sm py-4 pl-3 pr-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var MENU_TEXT_STYLES = "text-xs font-medium leading-4 text-neutral-1100";
+var SideMenu = React20.forwardRef(
+  ({
+    className,
+    variant = "default",
+    logo,
+    topItems,
+    bottomItems,
+    selectedId: selectedIdProp,
+    defaultSelectedId,
+    expanded: expandedProp,
+    onItemClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...props
+  }, ref) => {
+    const [internalSelected, setInternalSelected] = React20.useState(
+      defaultSelectedId ?? null
+    );
+    const selectedId = selectedIdProp !== void 0 ? selectedIdProp : internalSelected;
+    const isControlled = selectedIdProp !== void 0;
+    const [hoverExpanded, setHoverExpanded] = React20.useState(false);
+    const isUncontrolledDefault = variant === "default" && expandedProp === void 0;
+    const isExpandedByHover = isUncontrolledDefault && hoverExpanded;
+    const effectiveExpanded = variant === "hover" || variant === "selected" || isExpandedByHover;
+    const isCollapsed = !effectiveExpanded;
+    const handleMouseEnter = (e) => {
+      if (isUncontrolledDefault) setHoverExpanded(true);
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      if (isUncontrolledDefault) setHoverExpanded(false);
+      onMouseLeave?.(e);
+    };
+    const handleItemClick = (id) => {
+      if (!isControlled) setInternalSelected(id);
+      onItemClick?.(id);
+    };
+    return /* @__PURE__ */ jsx20(
+      "div",
+      {
+        className: cn20("relative w-12 shrink-0 overflow-visible", className),
+        ...props,
+        children: /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "absolute left-0 top-0",
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: /* @__PURE__ */ jsxs15(
+              "nav",
+              {
+                ref,
+                role: "navigation",
+                "aria-label": "Side menu",
+                "aria-expanded": isUncontrolledDefault ? isExpandedByHover : void 0,
+                className: sideMenuVariants({
+                  variant: isExpandedByHover && selectedId ? "selected" : isExpandedByHover ? "hover" : variant
+                }),
+                children: [
+                  /* @__PURE__ */ jsx20(
+                    "div",
+                    {
+                      className: cn20(
+                        "mb-4 shrink-0 flex items-center",
+                        isCollapsed ? "justify-center" : "justify-start"
+                      ),
+                      children: logo
+                    }
+                  ),
+                  /* @__PURE__ */ jsx20("div", { className: "flex flex-1 flex-col gap-2", children: topItems.map((item) => {
+                    const isSelected = selectedId === item.id;
+                    const itemIcon = isCollapsed && !isSelected ? item.icon : item.iconExpanded ?? item.icon;
+                    return /* @__PURE__ */ jsx20(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleItemClick(item.id),
+                        className: cn20(
+                          "inline-flex w-full items-center outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
+                          isCollapsed ? "justify-center" : "justify-start"
+                        ),
+                        children: isCollapsed ? /* @__PURE__ */ jsx20(
+                          "span",
+                          {
+                            className: cn20(
+                              "flex h-9 w-9 items-center justify-center rounded-sm [&>svg]:size-5",
+                              isSelected && "border border-neutral-300 bg-white shadow-elevation-bottom-sm"
+                            ),
+                            children: itemIcon
+                          }
+                        ) : /* @__PURE__ */ jsxs15(
+                          "span",
+                          {
+                            className: cn20(
+                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-sm px-2",
+                              isSelected ? "mx-1 my-0.5 border border-neutral-300 bg-white shadow-elevation-bottom-sm" : "hover:bg-neutral-200/60"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx20("span", { className: "shrink-0 [&>svg]:size-5", children: itemIcon }),
+                              /* @__PURE__ */ jsx20("span", { className: cn20(MENU_TEXT_STYLES, "truncate"), children: item.label })
+                            ]
+                          }
+                        )
+                      },
+                      item.id
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsx20("div", { className: "flex flex-col gap-2 pt-4", children: bottomItems.map((item) => {
+                    const isSelected = selectedId === item.id;
+                    const itemIcon = isCollapsed && !isSelected ? item.icon : item.iconExpanded ?? item.icon;
+                    return /* @__PURE__ */ jsx20(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleItemClick(item.id),
+                        className: cn20(
+                          "inline-flex w-full items-center outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
+                          isCollapsed ? "justify-center" : "justify-start"
+                        ),
+                        children: isCollapsed ? /* @__PURE__ */ jsx20(
+                          "span",
+                          {
+                            className: cn20(
+                              "flex h-9 w-9 items-center justify-center rounded-sm [&>svg]:size-5",
+                              isSelected && "border border-neutral-300 bg-white shadow-elevation-bottom-sm"
+                            ),
+                            children: itemIcon
+                          }
+                        ) : /* @__PURE__ */ jsxs15(
+                          "span",
+                          {
+                            className: cn20(
+                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-sm px-2",
+                              isSelected ? "mx-1 my-0.5 border border-neutral-300 bg-white shadow-elevation-bottom-sm" : "hover:bg-neutral-200/60"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx20("span", { className: "shrink-0 [&>svg]:size-5", children: itemIcon }),
+                              /* @__PURE__ */ jsx20("span", { className: cn20(MENU_TEXT_STYLES, "truncate"), children: item.label })
+                            ]
+                          }
+                        )
+                      },
+                      item.id
+                    );
+                  }) })
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SideMenu.displayName = "SideMenu";
+
+// src/patterns/Upload.tsx
+import * as React21 from "react";
+import { cva as cva19 } from "class-variance-authority";
+import { colors } from "@esds-sangam/tokens";
+import { cn as cn21 } from "@esds-sangam/utils";
+import { CloudUpload, DocumentPdf, Close as Close8, Delete, Retry, TickmarkFilled as TickmarkFilled6 } from "@esds-sangam/icons";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var uploadBoxVariants = cva19([
+  "relative flex flex-col items-center justify-center w-full",
+  "rounded-sm border border-dashed border-neutral-400 hover:border-neutral-700",
+  "bg-white",
+  "transition-colors duration-200 ease-out",
+  "cursor-pointer"
+]);
+var Upload = React21.forwardRef(
+  ({
+    className,
+    label,
+    required,
+    accept,
+    multiple,
+    onFilesSelected,
+    helperText = "PNG, JPG, PDF, EXCEL (max size)",
+    ...props
+  }, ref) => {
+    const inputRef = React21.useRef(null);
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+    const handleFiles = (fileList) => {
+      if (!fileList || !onFilesSelected) return;
+      const files = Array.from(fileList);
+      if (files.length) onFilesSelected(files);
+    };
+    const handleInputChange = (event) => {
+      handleFiles(event.target.files);
+      event.target.value = "";
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+      handleFiles(event.dataTransfer.files);
+    };
+    const handleDragOver = (event) => {
+      event.preventDefault();
+    };
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref,
+        className: cn21("flex w-full min-w-[328px] flex-col gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs16("label", { className: "text-xs font-medium leading-4 text-neutral-1100", children: [
+            label,
+            required && /* @__PURE__ */ jsx21("span", { className: "text-red-800 ml-0.5", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx21(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              className: "hidden",
+              onChange: handleInputChange
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-label": label,
+              onClick: handleClick,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleClick();
+                }
+              },
+              onDrop: handleDrop,
+              onDragOver: handleDragOver,
+              className: cn21(
+                uploadBoxVariants(),
+                // Padding: top/bottom 20px (py-5), left/right 12px (px-3)
+                "py-5 px-3"
+              ),
+              children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+                /* @__PURE__ */ jsx21("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-200 text-blue-600", children: /* @__PURE__ */ jsx21(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
+                /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsxs16("p", { className: "text-sm leading-6 text-neutral-1100", children: [
+                    /* @__PURE__ */ jsx21("span", { className: "font-normal", children: "Drop your files here or " }),
+                    /* @__PURE__ */ jsx21(
+                      "button",
+                      {
+                        type: "button",
+                        className: "font-medium text-blue-600 underline-offset-4 hover:underline",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleClick();
+                        },
+                        children: "Click to upload"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx21("p", { className: "text-xs font-normal leading-4 text-neutral-600", children: helperText })
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Upload.displayName = "Upload";
+var uploadFileItemBoxVariants = cva19(
+  ["flex flex-col gap-2 rounded-md bg-white border p-4", "w-full min-w-[328px] min-h-[76px]"],
+  {
+    variants: {
+      status: {
+        uploading: "border-neutral-300",
+        complete: "border-neutral-300",
+        failed: "border-red-800"
+      }
+    },
+    defaultVariants: {
+      status: "uploading"
+    }
+  }
+);
+var UploadFileItem = React21.forwardRef(
+  ({
+    className,
+    status = "uploading",
+    fileName,
+    fileSize,
+    progress = 0,
+    onCancel,
+    onRetry,
+    onDelete,
+    ...props
+  }, ref) => {
+    const progressValue = Math.min(100, Math.max(0, progress));
+    const showProgress = status !== "failed";
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref,
+        role: "listitem",
+        className: cn21(uploadFileItemBoxVariants({ status }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 gap-3", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 min-w-0 gap-2", children: [
+              /* @__PURE__ */ jsx21(DocumentPdf, { size: 24, className: "shrink-0 text-neutral-1100", "aria-hidden": true }),
+              /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx21("p", { className: "truncate text-sm font-medium leading-6 text-neutral-1100", children: fileName }),
+                status === "failed" ? /* @__PURE__ */ jsx21("p", { className: "text-xs font-normal leading-4 text-red-800", children: "Upload failed" }) : fileSize ? /* @__PURE__ */ jsx21("p", { className: "text-xs font-normal leading-4 text-neutral-600", children: fileSize }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 flex-col items-end justify-center", children: [
+              status === "uploading" && /* @__PURE__ */ jsx21(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancel,
+                  className: "inline-flex items-center justify-center rounded p-0 text-neutral-1100 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-1",
+                  "aria-label": "Cancel upload",
+                  children: /* @__PURE__ */ jsx21(Close8, { size: 20, "aria-hidden": true })
+                }
+              ),
+              status === "complete" && /* @__PURE__ */ jsx21(Fragment3, { children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx21(TickmarkFilled6, { size: 20, className: "!text-green-800 shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onDelete,
+                    className: "inline-flex items-center justify-center rounded p-0 text-neutral-1100 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-1",
+                    "aria-label": "Delete file",
+                    children: /* @__PURE__ */ jsx21(Delete, { size: 20, "aria-hidden": true })
+                  }
+                )
+              ] }) }),
+              status === "failed" && /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onRetry,
+                    className: "inline-flex items-center justify-center rounded p-0 text-neutral-1100 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-1",
+                    "aria-label": "Retry upload",
+                    children: /* @__PURE__ */ jsx21(Retry, { size: 20, "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onDelete,
+                    className: "inline-flex items-center justify-center rounded p-0 text-neutral-1100 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-1",
+                    "aria-label": "Delete file",
+                    children: /* @__PURE__ */ jsx21(Delete, { size: 20, "aria-hidden": true })
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          showProgress && /* @__PURE__ */ jsxs16("div", { className: "flex w-full items-center gap-sm", children: [
+            /* @__PURE__ */ jsx21(
+              ProgressBar,
+              {
+                value: progressValue,
+                showLabel: "none",
+                fluid: true,
+                "aria-label": `Upload progress ${progressValue}%`
+              }
+            ),
+            /* @__PURE__ */ jsxs16("span", { className: "text-xs font-normal leading-4 text-neutral-600 shrink-0 text-right", children: [
+              progressValue,
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+UploadFileItem.displayName = "UploadFileItem";
+export {
+  Avatar,
+  Badge,
+  Button,
+  Checkbox,
+  Chip,
+  Dropdown,
+  DropdownMulti,
+  Input,
+  Label,
+  Loader,
+  PageFooter,
+  PageHeader,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  SearchField,
+  SideMenu,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  Textarea,
+  Toast,
+  Toggle,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Upload,
+  UploadFileItem,
+  avatarVariants,
+  badgeVariants,
+  buttonVariants,
+  checkboxRootVariants as checkboxVariants,
+  chipVariants,
+  dropdownContentVariants,
+  dropdownItemVariants,
+  dropdownTriggerVariants,
+  inputVariants,
+  loaderVariants,
+  pageHeaderVariants,
+  radioVariants,
+  searchFieldVariants,
+  sideMenuVariants,
+  skeletonVariants,
+  tabsListVariants,
+  tabsTriggerVariants,
+  textareaVariants,
+  toastVariants,
+  toggleVariants,
+  tooltipContentVariants,
+  uploadBoxVariants,
+  uploadFileItemBoxVariants
+};