@platned/ui 0.1.2

package/dist/index.js

@@ -0,0 +1,1284 @@
+// src/index.tsx
+import clsx20 from "clsx";
+
+// src/components/button.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  primary: clsx(
+    "bg-background-brand border border-border-brand text-text-brand-on-brand",
+    "hover:bg-background-brand-hover",
+    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  ),
+  neutral: clsx(
+    "bg-background-default border border-border-default text-text-default",
+    "hover:bg-background-default-hover",
+    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  ),
+  subtle: clsx(
+    "bg-transparent text-text-neutral",
+    "hover:bg-background-neutral-tertiary",
+    "disabled:bg-background-disabled disabled:border disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  ),
+  danger: clsx(
+    "bg-background-danger border border-border-danger-secondary text-text-danger-on-danger",
+    "hover:bg-background-danger-hover",
+    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  ),
+  "danger-subtle": clsx(
+    "bg-transparent text-text-danger",
+    "hover:bg-background-danger-tertiary",
+    "disabled:bg-background-disabled disabled:border disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  )
+};
+var sizeStyles = {
+  lg: "h-12 px-3 gap-1 rounded-2xl text-body font-semibold [&_svg]:size-5",
+  md: "h-9 px-2 gap-0.5 rounded-lg text-body-sm font-semibold [&_svg]:size-5",
+  sm: "h-6 px-1.5 pt-0.5 gap-0 rounded-full text-body-tiny font-semibold [&_svg]:size-4"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  leadingIcon,
+  trailingIcon,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: clsx(
+        "inline-flex items-center justify-center whitespace-nowrap transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+        "disabled:cursor-not-allowed",
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      ),
+      ...props,
+      children: [
+        leadingIcon,
+        /* @__PURE__ */ jsx("div", { className: "px-1", children }),
+        trailingIcon
+      ]
+    }
+  );
+}
+
+// src/components/icon-button.tsx
+import clsx2 from "clsx";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variantStyles2 = {
+  primary: clsx2(
+    "bg-background-brand border border-border-brand text-text-brand-on-brand",
+    "hover:bg-background-brand-hover",
+    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  ),
+  // Neutral uses secondary background (light gray) for visual weight without a text label
+  neutral: clsx2(
+    "bg-background-default-secondary border border-border-default text-text-default",
+    "hover:bg-background-default-secondary-hover",
+    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  ),
+  subtle: clsx2(
+    "bg-transparent text-text-neutral",
+    "hover:bg-background-neutral-tertiary",
+    "disabled:bg-background-disabled disabled:border disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+  )
+};
+var sizeStyles2 = {
+  lg: "size-12 rounded-2xl [&_svg]:size-5",
+  md: "size-9 rounded-lg [&_svg]:size-5",
+  sm: "size-6 rounded-full [&_svg]:size-4"
+};
+function IconButton({
+  variant = "primary",
+  size = "md",
+  icon,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: clsx2(
+        "inline-flex shrink-0 items-center justify-center transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+        "disabled:cursor-not-allowed",
+        variantStyles2[variant],
+        sizeStyles2[size],
+        className
+      ),
+      ...props,
+      children: icon
+    }
+  );
+}
+
+// src/components/button-group.tsx
+import clsx3 from "clsx";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var containerStyles = {
+  primary: "bg-background-neutral-tertiary p-1 rounded-2xl",
+  neutral: "bg-background-neutral-tertiary p-1 rounded-2xl",
+  filter: "bg-background-default border border-border-default p-1 rounded-xl"
+};
+var selectedStyles = {
+  primary: clsx3(
+    "bg-background-brand border border-border-brand text-text-brand-on-brand",
+    "hover:bg-background-brand-hover"
+  ),
+  neutral: clsx3(
+    "bg-background-default border border-border-default text-text-default",
+    "hover:bg-background-default-hover"
+  ),
+  filter: clsx3(
+    "bg-background-brand text-text-brand-on-brand",
+    "hover:bg-background-brand-hover"
+  )
+};
+var unselectedStyles = {
+  primary: clsx3("bg-transparent text-text-neutral", "hover:bg-background-neutral-tertiary-hover"),
+  neutral: clsx3("bg-transparent text-text-neutral", "hover:bg-background-neutral-tertiary-hover"),
+  filter: clsx3("text-text-default-secondary", "hover:text-text-default")
+};
+var itemSizeStyles = {
+  lg: "h-12 px-3 gap-1 rounded-2xl text-body font-semibold [&_svg]:size-5",
+  md: "h-9 px-2 gap-0.5 rounded-lg text-body-sm font-semibold [&_svg]:size-5",
+  sm: "h-6 px-1.5 pt-0.5 gap-0 rounded-full text-body-tiny font-semibold [&_svg]:size-4"
+};
+var containerAlignStyles = {
+  justify: "flex flex-row items-center",
+  start: "flex flex-row items-center justify-start",
+  end: "flex flex-row items-center justify-end",
+  center: "flex flex-row items-center justify-center",
+  stack: "flex flex-col items-center"
+};
+function ButtonGroup({
+  items,
+  value,
+  onChange,
+  variant = "primary",
+  size = "md",
+  align = "start",
+  className,
+  "aria-label": ariaLabel
+}) {
+  const isJustify = align === "justify";
+  const isStack = align === "stack";
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: clsx3(
+        containerStyles[variant],
+        containerAlignStyles[align],
+        className
+      ),
+      children: items.map((item) => {
+        const isSelected = item.value === value;
+        return /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: clsx3(isJustify && "flex-1 min-w-0", isStack && "w-full"),
+            children: /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": isSelected,
+                disabled: item.disabled,
+                onClick: () => onChange(item.value),
+                className: clsx3(
+                  "inline-flex items-center justify-center whitespace-nowrap transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+                  "disabled:cursor-not-allowed disabled:text-text-disabled",
+                  (isJustify || isStack) && "w-full",
+                  itemSizeStyles[size],
+                  isSelected ? selectedStyles[variant] : unselectedStyles[variant]
+                ),
+                children: [
+                  item.leadingIcon,
+                  /* @__PURE__ */ jsx3("div", { className: "px-1", children: item.label }),
+                  item.trailingIcon
+                ]
+              }
+            )
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/avatar.tsx
+import clsx4 from "clsx";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var sizeStyles3 = {
+  lg: "size-10",
+  md: "size-8",
+  sm: "size-6"
+};
+var initialTextStyles = {
+  lg: "text-body font-semibold",
+  md: "text-body-xs font-semibold",
+  sm: "text-body-tiny font-semibold"
+};
+var shapeStyles = {
+  circle: "rounded-full",
+  square: "rounded-lg"
+};
+function Avatar(props) {
+  const { size = "lg", shape = "circle", className } = props;
+  const base = clsx4(
+    "shrink-0 overflow-hidden",
+    sizeStyles3[size],
+    shapeStyles[shape],
+    className
+  );
+  if (props.type === "image") {
+    return /* @__PURE__ */ jsx4("div", { className: base, children: /* @__PURE__ */ jsx4(
+      "img",
+      {
+        src: props.src,
+        alt: props.alt ?? "",
+        className: "size-full object-cover"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: clsx4(base, "flex items-center justify-center"),
+      style: {
+        background: "linear-gradient(135deg, var(--color-graphic-blue) 30%, var(--color-graphic-red) 100%)"
+      },
+      children: /* @__PURE__ */ jsx4(
+        "span",
+        {
+          className: clsx4(
+            "select-none leading-none text-text-brand-on-brand",
+            initialTextStyles[size]
+          ),
+          children: props.initial.charAt(0).toUpperCase()
+        }
+      )
+    }
+  );
+}
+
+// src/components/avatar-group.tsx
+import clsx5 from "clsx";
+import { jsxs as jsxs3 } from "react/jsx-runtime";
+function AvatarGroup({
+  children,
+  overflow,
+  spacing = "spaced",
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx5(
+        "flex items-center",
+        spacing === "spaced" ? "gap-1" : "-space-x-2 isolate",
+        className
+      ),
+      children: [
+        children,
+        overflow !== void 0 && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: clsx5(
+              "flex items-center justify-center",
+              "min-w-6 h-6 px-1 rounded-lg",
+              "bg-background-default-secondary text-text-default-secondary text-body-sm",
+              spacing === "overlap" && "drop-shadow-sm"
+            ),
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/nav-item.tsx
+import clsx6 from "clsx";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function NavItem({
+  icon,
+  label,
+  isActive = false,
+  indicator = false,
+  collapsed = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      className: clsx6(
+        "relative flex h-11 w-full items-center gap-3 rounded-xl px-3.5 py-2.5 transition-colors",
+        collapsed && "justify-center",
+        isActive ? "bg-background-brand text-text-brand-on-brand" : [
+          "border border-border-default bg-background-default text-text-default-secondary",
+          "hover:bg-background-brand-tertiary-hover hover:border-border-brand-tertiary hover:text-text-brand"
+        ],
+        className
+      ),
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsx5("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
+        !collapsed && /* @__PURE__ */ jsx5("span", { className: "flex-1 min-w-0 truncate text-body-sm font-regular leading-snug", children: label }),
+        indicator && /* @__PURE__ */ jsx5("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-background-danger" })
+      ]
+    }
+  );
+}
+
+// src/components/input.tsx
+import { forwardRef } from "react";
+import clsx7 from "clsx";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var wrapGap = {
+  lg: "gap-2",
+  // 8px
+  md: "gap-1",
+  // 4px
+  sm: "gap-0.5"
+  // 2px
+};
+var labelText = {
+  lg: "text-body",
+  md: "text-body-sm",
+  sm: "text-body-tiny"
+};
+var inputBase = {
+  lg: "h-12 px-4 py-3.5 text-body",
+  md: "h-9 px-3 py-2.5 text-body-sm",
+  sm: "h-6 px-2 py-[5px] text-body-tiny"
+};
+var leadingPad = {
+  lg: "pl-10",
+  md: "pl-8",
+  sm: "pl-6"
+};
+var trailingPad = {
+  lg: "pr-10",
+  md: "pr-8",
+  sm: "pr-6"
+};
+var iconWrap = {
+  lg: { left: "left-4", right: "right-4", size: "size-5" },
+  md: { left: "left-3", right: "right-3", size: "size-4" },
+  sm: { left: "left-2", right: "right-2", size: "size-3" }
+};
+var Input = forwardRef(function Input2({ label, description, error, hint, size = "md", leadingIcon, trailingIcon, className, disabled, id, ...props }, ref) {
+  const hasError = !!error;
+  const iw = iconWrap[size];
+  return /* @__PURE__ */ jsxs5("div", { className: clsx7("flex flex-col", wrapGap[size], className), children: [
+    label && /* @__PURE__ */ jsx6(
+      "label",
+      {
+        htmlFor: id,
+        className: clsx7(labelText[size], disabled ? "text-text-disabled" : "text-text-default"),
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ jsx6("p", { className: clsx7(labelText[size], disabled ? "text-text-disabled" : "text-text-default-secondary"), children: description }),
+    /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center", children: [
+      leadingIcon && /* @__PURE__ */ jsx6("span", { className: clsx7("pointer-events-none absolute", iw.left, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: leadingIcon }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          ref,
+          id,
+          disabled,
+          className: clsx7(
+            "w-full rounded-lg border outline-none transition-colors",
+            "bg-background-default text-text-default",
+            "placeholder:text-text-default-tertiary",
+            inputBase[size],
+            leadingIcon && leadingPad[size],
+            trailingIcon && trailingPad[size],
+            disabled ? "cursor-not-allowed bg-background-disabled border-border-disabled text-text-disabled placeholder:text-text-disabled" : hasError ? "border-border-danger-secondary focus:border-border-danger-secondary focus:ring-1 focus:ring-border-danger-secondary" : "border-border-default focus:border-border-brand-tertiary focus:ring-1 focus:ring-border-brand-tertiary"
+          ),
+          ...props
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ jsx6("span", { className: clsx7("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon })
+    ] }),
+    hasError && /* @__PURE__ */ jsx6("p", { className: clsx7(labelText[size], "text-text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx6("p", { className: clsx7(labelText[size], "text-text-default-secondary"), children: hint })
+  ] });
+});
+
+// src/components/textarea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import clsx8 from "clsx";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var wrapGap2 = {
+  lg: "gap-2",
+  md: "gap-1",
+  sm: "gap-0.5"
+};
+var labelText2 = {
+  lg: "text-body",
+  md: "text-body-sm",
+  sm: "text-body-tiny"
+};
+var textareaBase = {
+  lg: "min-h-20 px-4 py-3.5 text-body",
+  md: "min-h-[68px] px-3 py-2.5 text-body-sm",
+  sm: "min-h-[52px] px-2 py-[5px] text-body-tiny"
+};
+var Textarea = forwardRef2(function Textarea2({ label, description, error, hint, size = "md", className, disabled, id, ...props }, ref) {
+  const hasError = !!error;
+  return /* @__PURE__ */ jsxs6("div", { className: clsx8("flex flex-col", wrapGap2[size], className), children: [
+    label && /* @__PURE__ */ jsx7(
+      "label",
+      {
+        htmlFor: id,
+        className: clsx8(labelText2[size], disabled ? "text-text-disabled" : "text-text-default"),
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText2[size], disabled ? "text-text-disabled" : "text-text-default-secondary"), children: description }),
+    /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        ref,
+        id,
+        disabled,
+        className: clsx8(
+          "w-full rounded-lg border outline-none transition-colors resize-y",
+          "bg-background-default text-text-default",
+          "placeholder:text-text-default-tertiary",
+          textareaBase[size],
+          disabled ? "cursor-not-allowed bg-background-disabled border-border-disabled text-text-disabled placeholder:text-text-disabled resize-none" : hasError ? "border-border-danger-secondary focus:border-border-danger-secondary focus:ring-1 focus:ring-border-danger-secondary" : "border-border-default focus:border-border-brand-tertiary focus:ring-1 focus:ring-border-brand-tertiary"
+        ),
+        ...props
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText2[size], "text-text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText2[size], "text-text-default-secondary"), children: hint })
+  ] });
+});
+
+// src/components/select.tsx
+import { forwardRef as forwardRef3 } from "react";
+import clsx9 from "clsx";
+import { LuChevronDown } from "react-icons/lu";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var wrapGap3 = {
+  lg: "gap-2",
+  md: "gap-1",
+  sm: "gap-0.5"
+};
+var labelText3 = {
+  lg: "text-body",
+  md: "text-body-sm",
+  sm: "text-body-tiny"
+};
+var selectBase = {
+  lg: "h-12 pl-4 pr-9  text-body",
+  // right-4 (16) + size-5 (20) = 36px
+  md: "h-9 pl-3 pr-7  text-body-sm",
+  // right-3 (12) + size-4 (16) = 28px
+  sm: "h-6 pl-2 pr-5 text-body-tiny"
+  // right-2 (8) + size-3 (12) = 20px
+};
+var chevronPos = {
+  lg: { right: "right-4", size: "size-5" },
+  md: { right: "right-3", size: "size-4" },
+  sm: { right: "right-2", size: "size-3" }
+};
+var Select = forwardRef3(function Select2({ label, description, error, hint, size = "md", options, placeholder, className, disabled, id, ...props }, ref) {
+  const hasError = !!error;
+  const cp = chevronPos[size];
+  return /* @__PURE__ */ jsxs7("div", { className: clsx9("flex flex-col", wrapGap3[size], className), children: [
+    label && /* @__PURE__ */ jsx8(
+      "label",
+      {
+        htmlFor: id,
+        className: clsx9(labelText3[size], disabled ? "text-text-disabled" : "text-text-default"),
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText3[size], disabled ? "text-text-disabled" : "text-text-default-secondary"), children: description }),
+    /* @__PURE__ */ jsxs7("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsxs7(
+        "select",
+        {
+          ref,
+          id,
+          disabled,
+          className: clsx9(
+            "w-full appearance-none rounded-lg border outline-none transition-colors pt-0.5",
+            "bg-background-default text-text-default",
+            selectBase[size],
+            disabled ? "cursor-not-allowed bg-background-disabled border-border-disabled text-text-disabled" : hasError ? "border-border-danger-secondary focus:border-border-danger-secondary focus:ring-1 focus:ring-border-danger-secondary" : "border-border-default focus:border-border-brand-tertiary focus:ring-1 focus:ring-border-brand-tertiary"
+          ),
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ jsx8("option", { value: "", disabled: true, children: placeholder }),
+            options.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: clsx9(
+            "pointer-events-none absolute",
+            cp.right,
+            cp.size,
+            "flex items-center justify-center",
+            disabled ? "text-icon-disabled" : "text-icon-default-secondary"
+          ),
+          children: /* @__PURE__ */ jsx8(LuChevronDown, { className: "size-full" })
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText3[size], "text-text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText3[size], "text-text-default-secondary"), children: hint })
+  ] });
+});
+
+// src/components/stepper.tsx
+import clsx10 from "clsx";
+import { LuCheck, LuChevronRight } from "react-icons/lu";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function StepIndicator({ status }) {
+  if (status === "complete") {
+    return /* @__PURE__ */ jsx9("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-background-brand text-white", children: /* @__PURE__ */ jsx9(LuCheck, { size: 11, "aria-hidden": true }) });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsx9("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-background-brand", children: /* @__PURE__ */ jsx9("span", { className: "size-2.5 rounded-full bg-background-brand" }) });
+  }
+  return /* @__PURE__ */ jsx9("span", { className: "size-5 shrink-0 rounded-full border-2 border-border-disabled", "aria-hidden": "true" });
+}
+function ChevronSeparator() {
+  return /* @__PURE__ */ jsx9(LuChevronRight, { className: "mx-1 size-4 shrink-0 text-text-default-tertiary", "aria-hidden": true });
+}
+var labelClass = {
+  complete: "text-text-brand font-semibold",
+  active: "text-text-brand font-semibold",
+  upcoming: "text-text-disabled font-regular"
+};
+function Stepper({ steps, className }) {
+  return /* @__PURE__ */ jsx9(
+    "ol",
+    {
+      className: clsx10("flex items-center overflow-x-auto", className),
+      "aria-label": "Progress",
+      children: steps.map((step, i) => /* @__PURE__ */ jsxs8(
+        "li",
+        {
+          className: "flex items-center",
+          "aria-current": step.status === "active" ? "step" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx9(StepIndicator, { status: step.status }),
+              /* @__PURE__ */ jsx9("span", { className: clsx10("text-body-xs whitespace-nowrap", labelClass[step.status]), children: step.label })
+            ] }),
+            i < steps.length - 1 && /* @__PURE__ */ jsx9(ChevronSeparator, {})
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/multiselect-card.tsx
+import clsx11 from "clsx";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function MultiSelectCard({
+  icon,
+  title,
+  description,
+  selected,
+  onToggle,
+  className
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": selected,
+      onClick: onToggle,
+      className: clsx11(
+        "relative w-full rounded-2xl border-2 p-4 text-left transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+        selected ? "border-border-brand bg-background-brand-tertiary" : "border-border-default bg-background-default hover:border-border-default-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: clsx11(
+                "flex size-10 shrink-0 items-center justify-center rounded-xl",
+                selected ? "bg-background-brand" : "bg-background-brand-tertiary"
+              ),
+              children: /* @__PURE__ */ jsx10("span", { className: clsx11("size-5", selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
+            }
+          ),
+          selected ? /* @__PURE__ */ jsx10("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-background-brand", children: /* @__PURE__ */ jsx10("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx10(
+            "path",
+            {
+              d: "M1 4L3.9 7L10 1",
+              stroke: "white",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) }) : /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: "size-5 shrink-0 rounded-full border-2 border-border-default",
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "mt-3", children: [
+          /* @__PURE__ */ jsx10(
+            "p",
+            {
+              className: clsx11(
+                "text-body-sm font-semibold",
+                selected ? "text-text-brand" : "text-text-default"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx10("p", { className: "mt-0.5 text-body-xs text-text-default-secondary", children: description })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/data-table.tsx
+import clsx12 from "clsx";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  rows,
+  getRowKey,
+  className,
+  onRowClick
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: clsx12(
+        "overflow-hidden rounded-xl border border-border-default bg-background-default",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx11("div", { className: "flex items-center bg-background-default-secondary px-4 py-3", children: columns.map((col) => /* @__PURE__ */ jsx11("div", { className: clsx12("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: /* @__PURE__ */ jsx11("span", { className: "text-body-xs font-medium text-text-default-secondary whitespace-nowrap", children: col.header }) }, col.key)) }),
+        /* @__PURE__ */ jsx11("div", { children: rows.map((row, i) => /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: clsx12(
+              "flex items-center px-4 py-[14px] transition-colors hover:bg-background-default-secondary/50",
+              i > 0 && "border-t border-[#ececec]",
+              onRowClick && "cursor-pointer"
+            ),
+            onClick: onRowClick ? () => onRowClick(row) : void 0,
+            children: columns.map((col) => /* @__PURE__ */ jsx11("div", { className: clsx12("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: col.render(row) }, col.key))
+          },
+          getRowKey(row, i)
+        )) })
+      ]
+    }
+  );
+}
+function TableCellLeadText({
+  primary,
+  secondary
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx11("span", { className: "text-body-sm font-medium text-text-default leading-snug", children: primary }),
+    secondary && /* @__PURE__ */ jsx11("span", { className: "text-body-xs font-normal text-text-default-secondary leading-tight", children: secondary })
+  ] });
+}
+function TableCellText({
+  children,
+  muted = true
+}) {
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      className: clsx12(
+        "text-body-xs font-normal leading-snug whitespace-nowrap",
+        muted ? "text-text-default-secondary" : "text-text-default"
+      ),
+      children
+    }
+  );
+}
+function TableCellBadge({ label }) {
+  return /* @__PURE__ */ jsx11("span", { className: "inline-flex items-center rounded-md border border-border-default bg-background-default-secondary px-2 py-0.5 text-body-tiny font-medium text-text-default-secondary whitespace-nowrap", children: label });
+}
+function TableCellStatusPill({
+  label,
+  dotColor,
+  backgroundColor,
+  textColor
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "span",
+    {
+      className: "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-body-xs font-medium leading-tight whitespace-nowrap",
+      style: { backgroundColor, color: textColor },
+      children: [
+        /* @__PURE__ */ jsx11("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
+        label
+      ]
+    }
+  );
+}
+function TableCellProgress({
+  percent,
+  barColor
+}) {
+  const color = barColor ?? "#0c2d58";
+  const clamped = Math.min(100, Math.max(0, percent));
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx11("div", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-background-default-secondary", children: /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "h-full rounded-full transition-all",
+        style: { width: `${clamped}%`, backgroundColor: color }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs10("span", { className: "text-body-tiny text-text-default-secondary leading-none", children: [
+      percent,
+      "%"
+    ] })
+  ] });
+}
+
+// src/components/stat-tile.tsx
+import clsx13 from "clsx";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function StatTile({ label, value, dotColor, className }) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: clsx13(
+        "flex flex-col gap-2 rounded-xl border border-border-default bg-background-default p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5", children: [
+          dotColor && /* @__PURE__ */ jsx12("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
+          /* @__PURE__ */ jsx12("span", { className: "text-body-xs font-medium text-text-default-secondary whitespace-nowrap", children: label })
+        ] }),
+        /* @__PURE__ */ jsx12("span", { className: "text-heading font-semibold text-text-default leading-none", children: value })
+      ]
+    }
+  );
+}
+
+// src/components/toggle.tsx
+import clsx14 from "clsx";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function Toggle({ checked, onChange, label, disabled = false }) {
+  return /* @__PURE__ */ jsxs12(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: clsx14(
+        "flex items-center gap-2",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx13(
+          "span",
+          {
+            className: clsx14(
+              "relative inline-flex h-6 w-10 shrink-0 rounded-full transition-colors",
+              checked ? "bg-background-brand" : "border border-border-default bg-background-neutral-tertiary"
+            ),
+            children: /* @__PURE__ */ jsx13(
+              "span",
+              {
+                className: clsx14(
+                  "absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-sm transition-transform",
+                  checked ? "translate-x-4" : "translate-x-0"
+                )
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx13("span", { className: "text-body-xs text-text-default", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/file-drop-zone.tsx
+import { useRef, useState } from "react";
+import clsx15 from "clsx";
+import { LuUpload } from "react-icons/lu";
+import { Fragment, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function FileDropZone({ className }) {
+  const inputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  return /* @__PURE__ */ jsxs13(Fragment, { children: [
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: ".pdf,.jpg,.jpeg,.png",
+        className: "sr-only",
+        tabIndex: -1
+      }
+    ),
+    /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: () => inputRef.current?.click(),
+        onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && inputRef.current?.click(),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        },
+        onDragEnter: (e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        },
+        onDragLeave: () => setIsDragging(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setIsDragging(false);
+        },
+        className: clsx15(
+          "flex flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed py-4 px-4 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+          isDragging ? "border-border-brand bg-background-brand-tertiary" : "border-border-default bg-background-default-secondary hover:border-border-brand hover:bg-background-brand-tertiary",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx14("span", { className: isDragging ? "text-text-brand" : "text-text-default-secondary", children: /* @__PURE__ */ jsx14(LuUpload, { size: 20 }) }),
+          /* @__PURE__ */ jsx14("span", { className: "text-body-sm font-medium text-text-default", children: "Upload file" }),
+          /* @__PURE__ */ jsx14("span", { className: "text-body-xs text-text-default-secondary text-center", children: "Drag & drop or browse \xB7 PDF, JPG, PNG \xB7 up to 10 MB" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/form-card.tsx
+import clsx16 from "clsx";
+import { LuArrowLeft, LuArrowRight } from "react-icons/lu";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function FormCard({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: clsx16(
+        "overflow-hidden rounded-xl border border-border-default bg-background-default",
+        className
+      ),
+      children
+    }
+  );
+}
+function FormCardHeader({ title, subtitle }) {
+  return /* @__PURE__ */ jsxs14("div", { className: "border-b border-border-default px-7 py-6", children: [
+    /* @__PURE__ */ jsx15("h2", { className: "text-heading-sm font-semibold text-text-default leading-snug", children: title }),
+    subtitle && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-body-xs text-text-default-secondary", children: subtitle })
+  ] });
+}
+function FormCardFooter({
+  onSaveDraft,
+  onBack,
+  onContinue,
+  continueLabel = "Continue",
+  backDisabled = false
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between border-t border-border-default px-7 py-5", children: [
+    /* @__PURE__ */ jsx15(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, children: "Save as draft" }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+      !backDisabled && /* @__PURE__ */ jsx15(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ jsx15(LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
+      /* @__PURE__ */ jsx15(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ jsx15(LuArrowRight, { size: 16 }), onClick: onContinue, children: continueLabel })
+    ] })
+  ] });
+}
+
+// src/components/document-row.tsx
+import clsx17 from "clsx";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var STATUS_CONFIG = {
+  uploaded: { label: "\u2713 Uploaded", style: "bg-[#e6f4ea] text-[#1f7a3d]" },
+  "under-review": { label: "\u25CF Under review", style: "bg-[#fbe6cf] text-[#9a6206]" },
+  processing: { label: "\u25CF Processing", style: "bg-[#e9eff7] text-[#0c2d58]" },
+  missing: { label: "Missing", style: "bg-[#fee2e2] text-[#b91c1c]" },
+  "not-provided": { label: "Not provided", style: "bg-background-default-secondary text-text-default-secondary" }
+};
+function FileTypeBadge({ type }) {
+  return /* @__PURE__ */ jsx16("div", { className: "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-md bg-background-brand-tertiary", children: /* @__PURE__ */ jsx16("span", { className: "text-body-tiny font-semibold text-text-brand", children: type }) });
+}
+function DocumentRow({
+  title,
+  required,
+  description,
+  status,
+  fileName,
+  fileSize,
+  fileType = "PDF"
+}) {
+  const hasFile = (status === "uploaded" || status === "under-review" || status === "processing") && !!fileName;
+  const cfg = STATUS_CONFIG[status];
+  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-3 py-4", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx16("span", { className: "text-body-sm font-semibold text-text-default truncate", children: title }),
+        /* @__PURE__ */ jsx16("span", { className: "shrink-0 rounded-md border border-border-default bg-background-default-secondary px-2 py-0.5 text-body-tiny font-medium text-text-default-secondary", children: required ? "Required" : "Optional" })
+      ] }),
+      /* @__PURE__ */ jsx16(
+        "span",
+        {
+          className: clsx17(
+            "shrink-0 rounded-full px-2.5 py-0.5 text-body-tiny font-medium whitespace-nowrap",
+            cfg.style
+          ),
+          children: cfg.label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16("p", { className: "text-body-xs text-text-default-secondary", children: description }),
+    hasFile ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 rounded-lg border border-border-default bg-background-default px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx16(FileTypeBadge, { type: fileType }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx16("span", { className: "truncate text-body-sm font-medium text-text-default", children: fileName }),
+        fileSize && /* @__PURE__ */ jsx16("span", { className: "text-body-xs text-text-default-secondary", children: fileSize })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center gap-4", children: [
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "text-body-xs font-medium text-text-brand hover:underline",
+            children: "Replace"
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "text-body-xs font-medium text-text-danger hover:underline",
+            children: "Remove"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx16(FileDropZone, {})
+  ] });
+}
+
+// src/components/modal.tsx
+import clsx18 from "clsx";
+import { LuX } from "react-icons/lu";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth = "max-w-[540px]" }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs16("div", { className: clsx18("w-full mx-4 rounded-2xl bg-white shadow-xl", maxWidth), children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-start justify-between px-6 py-5", children: [
+          /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsx17("h2", { className: "text-heading-sm font-semibold text-text-default", children: title }),
+            subtitle && /* @__PURE__ */ jsx17("p", { className: "mt-0.5 text-body-xs text-text-default-secondary", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx17(
+            IconButton,
+            {
+              variant: "subtle",
+              size: "sm",
+              "aria-label": "Close dialog",
+              icon: /* @__PURE__ */ jsx17(LuX, { size: 16 }),
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx17("hr", { className: "border-border-default" }),
+        /* @__PURE__ */ jsx17("div", { className: "px-6 py-5", children }),
+        footer && /* @__PURE__ */ jsxs16(Fragment2, { children: [
+          /* @__PURE__ */ jsx17("hr", { className: "border-border-default" }),
+          /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-end gap-2 px-6 py-4", children: footer })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/role-badge.tsx
+import clsx19 from "clsx";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ROLE_COLORS = {
+  "Super Admin": { bg: "#e9eff7", text: "#0c2d58" },
+  "Admin": { bg: "#e9eff7", text: "#0c2d58" },
+  "Compliance Lead": { bg: "#ece6f7", text: "#5b3da8" },
+  "Reviewer": { bg: "#dbeafe", text: "#1d4ed8" },
+  "Requester": { bg: "#e6f4ea", text: "#1f7a3d" },
+  "Entity Manager": { bg: "#fbe6cf", text: "#9a6206" },
+  "Intelligence Analyst": { bg: "#fde2e7", text: "#a3284a" },
+  "Auditor": { bg: "#f5f5f5", text: "#757575" },
+  "Viewer": { bg: "#f5f5f5", text: "#757575" },
+  "User": { bg: "#e9eff7", text: "#0c2d58" }
+};
+var FALLBACK = { bg: "#f5f5f5", text: "#757575" };
+function RoleBadge({ role, size = "sm" }) {
+  const colors = ROLE_COLORS[role] ?? FALLBACK;
+  return /* @__PURE__ */ jsx18(
+    "span",
+    {
+      className: clsx19(
+        "inline-flex items-center rounded-full font-medium whitespace-nowrap",
+        size === "sm" ? "px-2 py-0.5 text-body-tiny" : "px-3 py-1 text-body-xs"
+      ),
+      style: { backgroundColor: colors.bg, color: colors.text },
+      children: role
+    }
+  );
+}
+
+// src/components/role-combo-box.tsx
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { LuChevronDown as LuChevronDown2 } from "react-icons/lu";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var ROLE_COMBO_OPTIONS = [
+  { role: "Reviewer", description: "Reviews onboarding requests" },
+  { role: "Admin", description: "Full org control" },
+  { role: "Compliance Lead", description: "Owns compliance" },
+  { role: "Requester", description: "Creates onboarding requests" },
+  { role: "Viewer", description: "Read-only access" },
+  { role: "User", description: "Default user access" }
+];
+function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const containerRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect(() => {
+    if (!open) return;
+    function onClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, [open]);
+  function openDropdown() {
+    setOpen(true);
+    setQuery("");
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }
+  function select(role) {
+    onChange(role);
+    setOpen(false);
+    setQuery("");
+  }
+  const selectedEntry = options.find((o) => o.role === value);
+  const otherOptions = options.filter(
+    (o) => o.role !== value && o.role.toLowerCase().includes(query.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs17("div", { className: "relative", ref: containerRef, children: [
+    /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        onClick: openDropdown,
+        className: `flex h-11 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] pl-2.5 pr-3 transition-colors ${open ? "border-blue-500" : "border-border-default hover:border-border-brand-tertiary"}`,
+        children: [
+          /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
+            /* @__PURE__ */ jsx19(RoleBadge, { role: value, size: "sm" }),
+            value === "User" && !open && /* @__PURE__ */ jsx19("span", { className: "rounded border border-border-default bg-background-default-secondary px-1.5 py-0.5 text-body-tiny font-medium text-text-default-secondary", children: "DEFAULT" }),
+            open && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+              /* @__PURE__ */ jsx19(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  onClick: (e) => e.stopPropagation(),
+                  className: "min-w-0 flex-1 bg-transparent text-body-xs text-text-default outline-none",
+                  "aria-label": "Search roles"
+                }
+              ),
+              /* @__PURE__ */ jsx19("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-text-default", "aria-hidden": true })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx19("span", { className: "shrink-0 text-text-default-secondary", children: /* @__PURE__ */ jsx19(LuChevronDown2, { size: 14 }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        role: "listbox",
+        className: "absolute left-0 right-0 top-full z-20 mt-1 flex max-h-64 flex-col gap-0.5 overflow-y-auto rounded-xl border border-border-default bg-white p-1.5 shadow-lg",
+        children: [
+          selectedEntry && /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              role: "option",
+              "aria-selected": true,
+              className: "flex cursor-pointer items-center gap-2.5 rounded-md bg-blue-50 px-2.5 py-2",
+              onClick: () => select(selectedEntry.role),
+              children: [
+                /* @__PURE__ */ jsx19(RoleBadge, { role: selectedEntry.role, size: "sm" }),
+                /* @__PURE__ */ jsx19("span", { className: "flex-1 text-body-xs text-text-default-secondary", children: selectedEntry.description }),
+                /* @__PURE__ */ jsx19("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx19("div", { className: "h-px bg-border-default" }),
+          otherOptions.length > 0 && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+            /* @__PURE__ */ jsx19("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ jsx19("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-text-default-secondary", children: "Other roles" }) }),
+            otherOptions.map((opt) => /* @__PURE__ */ jsxs17(
+              "div",
+              {
+                role: "option",
+                "aria-selected": false,
+                className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-background-default-secondary",
+                onClick: () => select(opt.role),
+                children: [
+                  /* @__PURE__ */ jsx19(RoleBadge, { role: opt.role, size: "sm" }),
+                  /* @__PURE__ */ jsx19("span", { className: "text-body-xs text-text-default-secondary", children: opt.description })
+                ]
+              },
+              opt.role
+            ))
+          ] }),
+          otherOptions.length === 0 && query && /* @__PURE__ */ jsxs17("p", { className: "px-2.5 py-2 text-body-xs text-text-default-secondary", children: [
+            'No roles match "',
+            query,
+            '"'
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/index.tsx
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function Panel({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx20("section", { className: clsx20("rounded-3xl border border-white/70 bg-white/90 p-6 shadow-panel backdrop-blur", className), children });
+}
+function MetricCard({
+  label,
+  value,
+  tone = "default"
+}) {
+  const tones = {
+    default: "from-white to-slate-50 text-text-default",
+    signal: "from-background-brand-tertiary to-cyan-50 text-text-brand",
+    ember: "from-amber-50 to-orange-50 text-text-danger",
+    moss: "from-emerald-50 to-lime-50 text-text-positive"
+  };
+  return /* @__PURE__ */ jsxs18(Panel, { className: clsx20("bg-gradient-to-br", tones[tone]), children: [
+    /* @__PURE__ */ jsx20("p", { className: "text-sm uppercase tracking-[0.2em] text-slate-500", children: label }),
+    /* @__PURE__ */ jsx20("p", { className: "mt-3 text-3xl font-semibold", children: value })
+  ] });
+}
+function SeverityBadge({ severity }) {
+  const styles = {
+    critical: "bg-red-100 text-red-700",
+    high: "bg-orange-100 text-orange-700",
+    medium: "bg-amber-100 text-amber-700",
+    low: "bg-slate-100 text-slate-700"
+  };
+  return /* @__PURE__ */ jsx20("span", { className: clsx20("inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide", styles[severity ?? "low"]), children: severity ?? "unknown" });
+}
+function SentimentBadge({ sentiment }) {
+  const styles = {
+    positive: "bg-emerald-100 text-emerald-700",
+    neutral: "bg-slate-100 text-slate-700",
+    negative: "bg-rose-100 text-rose-700",
+    concerning: "bg-amber-100 text-amber-700"
+  };
+  return /* @__PURE__ */ jsx20("span", { className: clsx20("inline-flex rounded-full px-3 py-1 text-xs font-semibold capitalize", styles[sentiment ?? "neutral"] ?? styles.neutral), children: sentiment ?? "unknown" });
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  detail
+}) {
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsx20("p", { className: "text-xs uppercase tracking-[0.25em] text-text-brand", children: eyebrow }),
+    /* @__PURE__ */ jsx20("h2", { className: "mt-2 text-2xl font-semibold text-text-default", children: title }),
+    detail ? /* @__PURE__ */ jsx20("p", { className: "mt-2 max-w-2xl text-sm text-slate-600", children: detail }) : null
+  ] });
+}
+export {
+  Avatar,
+  AvatarGroup,
+  Button,
+  ButtonGroup,
+  DataTable,
+  DocumentRow,
+  FileDropZone,
+  FormCard,
+  FormCardFooter,
+  FormCardHeader,
+  IconButton,
+  Input,
+  MetricCard,
+  Modal,
+  MultiSelectCard,
+  NavItem,
+  Panel,
+  ROLE_COMBO_OPTIONS,
+  RoleBadge,
+  RoleComboBox,
+  SectionHeading,
+  Select,
+  SentimentBadge,
+  SeverityBadge,
+  StatTile,
+  Stepper,
+  TableCellBadge,
+  TableCellLeadText,
+  TableCellProgress,
+  TableCellStatusPill,
+  TableCellText,
+  Textarea,
+  Toggle
+};
+//# sourceMappingURL=index.js.map