@platned/ui 0.1.4 → 0.3.0

package/dist/index.js

@@ -1,7 +1,4 @@
-// src/index.tsx
-import clsx21 from "clsx";
-
-// src/components/button.tsx
+// src/components/forms/button.tsx
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var variantStyles = {
@@ -69,7 +66,7 @@ function Button({
   );
 }
 
-// src/components/icon-button.tsx
+// src/components/forms/icon-button.tsx
 import clsx2 from "clsx";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var variantStyles2 = {
@@ -122,7 +119,7 @@ function IconButton({
   );
 }
 
-// src/components/button-group.tsx
+// src/components/forms/button-group.tsx
 import clsx3 from "clsx";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var containerStyles = {
@@ -219,7 +216,7 @@ function ButtonGroup({
   );
 }
 
-// src/components/avatar.tsx
+// src/components/avatar/avatar.tsx
 import clsx4 from "clsx";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var sizeStyles3 = {
@@ -275,7 +272,7 @@ function Avatar(props) {
   );
 }
 
-// src/components/avatar-group.tsx
+// src/components/avatar/avatar-group.tsx
 import clsx5 from "clsx";
 import { jsxs as jsxs3 } from "react/jsx-runtime";
 function AvatarGroup({
@@ -314,55 +311,23 @@ function AvatarGroup({
   );
 }
 
-// src/components/avatar-block.tsx
+// src/components/avatar/avatar-block.tsx
 import clsx6 from "clsx";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function AvatarBlock({ children, title, description, className }) {
   return /* @__PURE__ */ jsxs4("div", { className: clsx6("flex items-start gap-3", className), children: [
     /* @__PURE__ */ jsx5("div", { className: "shrink-0", children }),
     /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-      /* @__PURE__ */ jsx5("span", { className: "text-body font-semibold leading-[1.4] text-default-secondary", children: title }),
-      description && /* @__PURE__ */ jsx5("span", { className: "text-body leading-[1.4] text-default-tertiary", children: description })
+      /* @__PURE__ */ jsx5("span", { className: "text-body font-semibold text-default-secondary", children: title }),
+      description && /* @__PURE__ */ jsx5("span", { className: "text-body text-default-tertiary", children: description })
     ] })
   ] });
 }
 
-// src/components/nav-item.tsx
+// src/components/forms/input.tsx
+import { forwardRef } from "react";
 import clsx7 from "clsx";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function NavItem({
-  icon,
-  label,
-  isActive = false,
-  indicator = false,
-  collapsed = false,
-  className
-}) {
-  return /* @__PURE__ */ jsxs5(
-    "span",
-    {
-      className: clsx7(
-        "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-brand text-brand-on-brand" : [
-          "border border-default bg-default text-default-secondary",
-          "hover:bg-brand-tertiary-hover hover:border-brand-tertiary hover:text-brand"
-        ],
-        className
-      ),
-      children: [
-        icon !== void 0 && /* @__PURE__ */ jsx6("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
-        !collapsed && /* @__PURE__ */ jsx6("span", { className: "flex-1 min-w-0 truncate text-body-sm font-regular leading-snug", children: label }),
-        indicator && /* @__PURE__ */ jsx6("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
-      ]
-    }
-  );
-}
-
-// src/components/input.tsx
-import { forwardRef } from "react";
-import clsx8 from "clsx";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var wrapGap = {
   lg: "gap-2",
   // 8px
@@ -377,17 +342,17 @@ var labelText = {
   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"
+  lg: "h-12 px-5 py-3.5 text-body",
+  md: "h-9 px-4 py-2.5 text-body-sm",
+  sm: "h-6 px-3 py-[5px] text-body-tiny"
 };
 var leadingPad = {
-  lg: "pl-10",
+  lg: "pl-12",
   md: "pl-8",
   sm: "pl-6"
 };
 var trailingPad = {
-  lg: "pr-10",
+  lg: "pr-12",
   md: "pr-8",
   sm: "pr-6"
 };
@@ -396,50 +361,51 @@ var iconWrap = {
   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) {
+var Input = forwardRef(function Input2({ label, description, error, hint, size = "md", leadingIcon, trailingIcon, trailingAction, className, disabled, id, ...props }, ref) {
   const hasError = !!error;
   const iw = iconWrap[size];
-  return /* @__PURE__ */ jsxs6("div", { className: clsx8("flex flex-col", wrapGap[size], className), children: [
-    label && /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { className: clsx7("flex flex-col", wrapGap[size], className), children: [
+    label && /* @__PURE__ */ jsx6(
       "label",
       {
         htmlFor: id,
-        className: clsx8(labelText[size], disabled ? "text-disabled" : "text-default"),
+        className: clsx7(labelText[size], disabled ? "text-disabled" : "text-default"),
         children: label
       }
     ),
-    description && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
-    /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center", children: [
-      leadingIcon && /* @__PURE__ */ jsx7("span", { className: clsx8("pointer-events-none absolute", iw.left, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: leadingIcon }),
-      /* @__PURE__ */ jsx7(
+    description && /* @__PURE__ */ jsx6("p", { className: clsx7(labelText[size], disabled ? "text-disabled" : "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: clsx8(
+          className: clsx7(
             "w-full rounded-lg border outline-none transition-colors",
             "bg-default text-default",
             "placeholder:text-default-tertiary",
             inputBase[size],
             leadingIcon && leadingPad[size],
-            trailingIcon && trailingPad[size],
-            disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled placeholder:text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-tertiary focus:ring-1 focus:ring-brand-tertiary"
+            (trailingIcon || trailingAction) && trailingPad[size],
+            disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled placeholder:text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-secondary focus:ring-1 focus:ring-brand-secondary"
           ),
           ...props
         }
       ),
-      trailingIcon && /* @__PURE__ */ jsx7("span", { className: clsx8("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon })
+      trailingIcon && !trailingAction && /* @__PURE__ */ jsx6("span", { className: clsx7("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon }),
+      trailingAction && /* @__PURE__ */ jsx6("span", { className: clsx7("absolute", iw.right, "flex items-center justify-center text-icon-default-secondary"), children: trailingAction })
     ] }),
-    hasError && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText[size], "text-danger"), children: error }),
-    !hasError && hint && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText[size], "text-default-secondary"), children: hint })
+    hasError && /* @__PURE__ */ jsx6("p", { className: clsx7(labelText[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx6("p", { className: clsx7(labelText[size], "text-default"), children: hint })
   ] });
 });
 
-// src/components/textarea.tsx
+// src/components/forms/textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
-import clsx9 from "clsx";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import clsx8 from "clsx";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var wrapGap2 = {
   lg: "gap-2",
   md: "gap-1",
@@ -457,42 +423,42 @@ var textareaBase = {
 };
 var Textarea = forwardRef2(function Textarea2({ label, description, error, hint, size = "md", className, disabled, id, ...props }, ref) {
   const hasError = !!error;
-  return /* @__PURE__ */ jsxs7("div", { className: clsx9("flex flex-col", wrapGap2[size], className), children: [
-    label && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { className: clsx8("flex flex-col", wrapGap2[size], className), children: [
+    label && /* @__PURE__ */ jsx7(
       "label",
       {
         htmlFor: id,
-        className: clsx9(labelText2[size], disabled ? "text-disabled" : "text-default"),
+        className: clsx8(labelText2[size], disabled ? "text-disabled" : "text-default"),
         children: label
       }
     ),
-    description && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText2[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
-    /* @__PURE__ */ jsx8(
+    description && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText2[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
+    /* @__PURE__ */ jsx7(
       "textarea",
       {
         ref,
         id,
         disabled,
-        className: clsx9(
+        className: clsx8(
           "w-full rounded-lg border outline-none transition-colors resize-y",
           "bg-default text-default",
           "placeholder:text-default-tertiary",
           textareaBase[size],
-          disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled placeholder:text-disabled resize-none" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-tertiary focus:ring-1 focus:ring-brand-tertiary"
+          disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled placeholder:text-disabled resize-none" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-secondary focus:ring-1 focus:ring-brand-secondary"
         ),
         ...props
       }
     ),
-    hasError && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText2[size], "text-danger"), children: error }),
-    !hasError && hint && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText2[size], "text-default-secondary"), children: hint })
+    hasError && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText2[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText2[size], "text-default-secondary"), children: hint })
   ] });
 });
 
-// src/components/select.tsx
+// src/components/forms/select.tsx
 import { forwardRef as forwardRef3 } from "react";
-import clsx10 from "clsx";
+import clsx9 from "clsx";
 import { LuChevronDown } from "react-icons/lu";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var wrapGap3 = {
   lg: "gap-2",
   md: "gap-1",
@@ -519,56 +485,136 @@ var chevronPos = {
 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__ */ jsxs8("div", { className: clsx10("flex flex-col", wrapGap3[size], className), children: [
-    label && /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("div", { className: clsx9("flex flex-col", wrapGap3[size], className), children: [
+    label && /* @__PURE__ */ jsx8(
       "label",
       {
         htmlFor: id,
-        className: clsx10(labelText3[size], disabled ? "text-disabled" : "text-default"),
+        className: clsx9(labelText3[size], disabled ? "text-disabled" : "text-default"),
         children: label
       }
     ),
-    description && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText3[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
-    /* @__PURE__ */ jsxs8("div", { className: "relative flex items-center", children: [
-      /* @__PURE__ */ jsxs8(
+    description && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText3[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
+    /* @__PURE__ */ jsxs7("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsxs7(
         "select",
         {
           ref,
           id,
           disabled,
-          className: clsx10(
+          className: clsx9(
             "w-full appearance-none rounded-lg border outline-none transition-colors pt-0.5",
             "bg-default text-default",
             selectBase[size],
-            disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-tertiary focus:ring-1 focus:ring-brand-tertiary"
+            disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-secondary focus:ring-1 focus:ring-brand-secondary"
           ),
           ...props,
           children: [
-            placeholder && /* @__PURE__ */ jsx9("option", { value: "", disabled: true, children: placeholder }),
-            options.map((opt) => /* @__PURE__ */ jsx9("option", { value: opt.value, children: opt.label }, opt.value))
+            placeholder && /* @__PURE__ */ jsx8("option", { value: "", disabled: true, children: placeholder }),
+            options.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
           ]
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx8(
         "span",
         {
-          className: clsx10(
+          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__ */ jsx9(LuChevronDown, { className: "size-full" })
+          children: /* @__PURE__ */ jsx8(LuChevronDown, { className: "size-full" })
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText3[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText3[size], "text-default-secondary"), children: hint })
+  ] });
+});
+
+// src/components/forms/date-picker.tsx
+import { forwardRef as forwardRef4 } from "react";
+import clsx10 from "clsx";
+import { LuCalendar } from "react-icons/lu";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var wrapGap4 = {
+  lg: "gap-2",
+  md: "gap-1",
+  sm: "gap-0.5"
+};
+var labelText4 = {
+  lg: "text-body",
+  md: "text-body-sm",
+  sm: "text-body-tiny"
+};
+var inputBase2 = {
+  lg: "h-12 px-5 py-3.5 pr-12 text-body",
+  md: "h-9 px-4 py-2.5 pr-8 text-body-sm",
+  sm: "h-6 px-3 py-[5px] pr-6 text-body-tiny"
+};
+var iconWrap2 = {
+  lg: { right: "right-4", size: "size-5" },
+  md: { right: "right-3", size: "size-4" },
+  sm: { right: "right-2", size: "size-3" }
+};
+var DatePicker = forwardRef4(function DatePicker2({ label, description, error, hint, size = "md", className, disabled, id, ...props }, ref) {
+  const hasError = !!error;
+  const iw = iconWrap2[size];
+  return /* @__PURE__ */ jsxs8("div", { className: clsx10("flex flex-col", wrapGap4[size], className), children: [
+    label && /* @__PURE__ */ jsx9(
+      "label",
+      {
+        htmlFor: id,
+        className: clsx10(labelText4[size], disabled ? "text-disabled" : "text-default"),
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText4[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
+    /* @__PURE__ */ jsxs8("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          ref,
+          id,
+          type: "date",
+          disabled,
+          className: clsx10(
+            "w-full rounded-lg border outline-none transition-colors",
+            "bg-default text-default",
+            "[&::-webkit-calendar-picker-indicator]:opacity-0",
+            "[&::-webkit-calendar-picker-indicator]:absolute",
+            "[&::-webkit-calendar-picker-indicator]:right-0",
+            "[&::-webkit-calendar-picker-indicator]:h-full",
+            "[&::-webkit-calendar-picker-indicator]:w-10",
+            "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+            inputBase2[size],
+            disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-secondary focus:ring-1 focus:ring-brand-secondary"
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "span",
+        {
+          className: clsx10(
+            "pointer-events-none absolute",
+            iw.right,
+            iw.size,
+            "flex items-center justify-center",
+            disabled ? "text-icon-disabled" : "text-icon-default-secondary"
+          ),
+          children: /* @__PURE__ */ jsx9(LuCalendar, { className: "size-full" })
         }
       )
     ] }),
-    hasError && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText3[size], "text-danger"), children: error }),
-    !hasError && hint && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText3[size], "text-default-secondary"), children: hint })
+    hasError && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText4[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText4[size], "text-default"), children: hint })
   ] });
 });
 
-// src/components/stepper.tsx
+// src/components/forms/stepper.tsx
 import clsx11 from "clsx";
 import { LuCheck, LuChevronRight } from "react-icons/lu";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -577,7 +623,7 @@ function StepIndicator({ status }) {
     return /* @__PURE__ */ jsx10("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand text-white", children: /* @__PURE__ */ jsx10(LuCheck, { size: 11, "aria-hidden": true }) });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx10("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-background-brand", children: /* @__PURE__ */ jsx10("span", { className: "size-2.5 rounded-full bg-brand" }) });
+    return /* @__PURE__ */ jsx10("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-brand-emphasis", children: /* @__PURE__ */ jsx10("span", { className: "size-2.5 rounded-full bg-brand" }) });
   }
   return /* @__PURE__ */ jsx10("span", { className: "size-5 shrink-0 rounded-full border-2 border-disabled", "aria-hidden": "true" });
 }
@@ -614,8 +660,9 @@ function Stepper({ steps, className }) {
   );
 }
 
-// src/components/multiselect-card.tsx
+// src/components/forms/multiselect-card.tsx
 import clsx12 from "clsx";
+import { LuCheck as LuCheck2 } from "react-icons/lu";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function MultiSelectCard({
   icon,
@@ -650,16 +697,7 @@ function MultiSelectCard({
               children: /* @__PURE__ */ jsx11("span", { className: clsx12("size-5", selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
             }
           ),
-          selected ? /* @__PURE__ */ jsx11("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand", children: /* @__PURE__ */ jsx11("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx11(
-            "path",
-            {
-              d: "M1 4L3.9 7L10 1",
-              stroke: "white",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) }) }) : /* @__PURE__ */ jsx11(
+          selected ? /* @__PURE__ */ jsx11("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand text-icon-brand-on-brand", children: /* @__PURE__ */ jsx11(LuCheck2, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) }) : /* @__PURE__ */ jsx11(
             "span",
             {
               className: "size-5 shrink-0 rounded-full border-2 border-default",
@@ -685,238 +723,193 @@ function MultiSelectCard({
   );
 }
 
-// src/components/data-table.tsx
+// src/components/forms/toggle.tsx
 import clsx13 from "clsx";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function DataTable({
-  columns,
-  rows,
-  getRowKey,
-  className,
-  onRowClick
-}) {
-  return /* @__PURE__ */ jsxs11(
-    "div",
-    {
-      className: clsx13(
-        "overflow-hidden rounded-xl border border-default bg-default",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx12("div", { className: "flex items-center bg-default-secondary px-4 py-3", children: columns.map((col) => /* @__PURE__ */ jsx12("div", { className: clsx13("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: /* @__PURE__ */ jsx12("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: col.header }) }, col.key)) }),
-        /* @__PURE__ */ jsx12("div", { children: rows.map((row, i) => /* @__PURE__ */ jsx12(
-          "div",
-          {
-            className: clsx13(
-              "flex items-center px-4 py-[14px] transition-colors hover:bg-default-secondary/50",
-              i > 0 && "border-t border-[#ececec]",
-              onRowClick && "cursor-pointer"
-            ),
-            onClick: onRowClick ? () => onRowClick(row) : void 0,
-            children: columns.map((col) => /* @__PURE__ */ jsx12("div", { className: clsx13("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__ */ jsxs11("div", { className: "flex flex-col gap-0.5", children: [
-    /* @__PURE__ */ jsx12("span", { className: "text-body-sm font-medium text-default leading-snug", children: primary }),
-    secondary && /* @__PURE__ */ jsx12("span", { className: "text-body-xs font-normal text-default-secondary leading-tight", children: secondary })
-  ] });
-}
-function TableCellText({
-  children,
-  muted = true
-}) {
-  return /* @__PURE__ */ jsx12(
-    "span",
-    {
-      className: clsx13(
-        "text-body-xs font-normal leading-snug whitespace-nowrap",
-        muted ? "text-default-secondary" : "text-default"
-      ),
-      children
-    }
-  );
-}
-function TableCellBadge({ label }) {
-  return /* @__PURE__ */ jsx12("span", { className: "inline-flex items-center rounded-md border border-default bg-default-secondary px-2 py-0.5 text-body-tiny font-medium text-default-secondary whitespace-nowrap", children: label });
-}
-function TableCellStatusPill({
+var SIZE = {
+  sm: { track: "h-5 w-9", knob: "size-4", translate: "translate-x-4" },
+  md: { track: "h-6 w-11", knob: "size-5", translate: "translate-x-5" }
+};
+function Toggle({
+  checked,
+  onChange,
   label,
-  dotColor,
-  backgroundColor,
-  textColor
+  size = "md",
+  disabled = false,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className
 }) {
+  const s = SIZE[size];
   return /* @__PURE__ */ jsxs11(
-    "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__ */ jsx12("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__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx12("div", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-default-secondary", children: /* @__PURE__ */ jsx12(
-      "div",
-      {
-        className: "h-full rounded-full transition-all",
-        style: { width: `${clamped}%`, backgroundColor: color }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs11("span", { className: "text-body-tiny text-default-secondary leading-none", children: [
-      percent,
-      "%"
-    ] })
-  ] });
-}
-
-// src/components/stat-tile.tsx
-import clsx14 from "clsx";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-function StatTile({ label, value, dotColor, className }) {
-  return /* @__PURE__ */ jsxs12(
-    "div",
-    {
-      className: clsx14(
-        "flex flex-col gap-2 rounded-xl border border-default bg-default p-4",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
-          dotColor && /* @__PURE__ */ jsx13("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
-          /* @__PURE__ */ jsx13("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: label })
-        ] }),
-        /* @__PURE__ */ jsx13("span", { className: "text-heading font-semibold text-default leading-none", children: value })
-      ]
-    }
-  );
-}
-
-// src/components/toggle.tsx
-import clsx15 from "clsx";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function Toggle({ checked, onChange, label, disabled = false }) {
-  return /* @__PURE__ */ jsxs13(
     "button",
     {
       type: "button",
       role: "switch",
+      id,
       "aria-checked": checked,
+      "aria-label": label ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       disabled,
       onClick: () => onChange(!checked),
-      className: clsx15(
-        "flex items-center gap-2",
+      className: clsx13(
+        "group flex items-center gap-2",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
-        disabled && "cursor-not-allowed opacity-50"
+        disabled && "cursor-not-allowed opacity-50",
+        className
       ),
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx12(
           "span",
           {
-            className: clsx15(
-              "relative inline-flex h-6 w-10 shrink-0 rounded-full transition-colors",
-              checked ? "bg-brand" : "border border-default bg-neutral-tertiary"
+            className: clsx13(
+              "relative inline-flex shrink-0 rounded-full transition-colors",
+              s.track,
+              // The unchecked track is borderless per the spec. A border here would also
+              // shift the knob's rendered inset by 1px between states, since the knob is
+              // positioned against the padding box.
+              disabled ? "bg-disabled" : checked ? "bg-brand group-hover:bg-brand-hover" : "bg-default-secondary group-hover:bg-default-secondary-hover"
             ),
-            children: /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsx12(
               "span",
               {
-                className: clsx15(
-                  "absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-sm transition-transform",
-                  checked ? "translate-x-4" : "translate-x-0"
+                className: clsx13(
+                  "absolute left-0.5 top-0.5 rounded-full bg-default shadow-sm transition-transform",
+                  s.knob,
+                  checked ? s.translate : "translate-x-0"
                 )
               }
             )
           }
         ),
-        label && /* @__PURE__ */ jsx14("span", { className: "text-body-xs text-default", children: label })
+        label && /* @__PURE__ */ jsx12("span", { className: "text-body-xs text-default", children: label })
       ]
     }
   );
 }
 
-// src/components/file-drop-zone.tsx
+// src/components/forms/file-drop-zone.tsx
 import { useRef, useState } from "react";
-import clsx16 from "clsx";
+import clsx14 from "clsx";
 import { LuUpload } from "react-icons/lu";
-import { Fragment, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-function FileDropZone({ className }) {
+import { Fragment, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var DEFAULT_ACCEPT = ".pdf,.jpg,.jpeg,.png";
+var DEFAULT_MAX_SIZE_BYTES = 10 * 1024 * 1024;
+function formatSize(bytes) {
+  const mb = bytes / (1024 * 1024);
+  return `${Number.isInteger(mb) ? mb : mb.toFixed(1)} MB`;
+}
+function matchesAccept(file, accept) {
+  const extensions = accept.split(",").map((part) => part.trim().toLowerCase()).filter((part) => part.startsWith("."));
+  if (extensions.length === 0) {
+    return true;
+  }
+  return extensions.some((extension) => file.name.toLowerCase().endsWith(extension));
+}
+function FileDropZone({
+  className,
+  description = "Drag & drop or browse \xB7 PDF, JPG, PNG \xB7 up to 10 MB",
+  accept = DEFAULT_ACCEPT,
+  maxSizeBytes = DEFAULT_MAX_SIZE_BYTES,
+  onFileSelected,
+  disabled = false
+}) {
   const inputRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
-  return /* @__PURE__ */ jsxs14(Fragment, { children: [
-    /* @__PURE__ */ jsx15(
+  const [error, setError] = useState(null);
+  function handleFiles(files) {
+    const file = files?.[0];
+    if (!file) {
+      return;
+    }
+    if (!matchesAccept(file, accept)) {
+      setError(`Unsupported file type. Allowed: ${accept}.`);
+      return;
+    }
+    if (file.size > maxSizeBytes) {
+      setError(`That file is ${formatSize(file.size)}. The limit is ${formatSize(maxSizeBytes)}.`);
+      return;
+    }
+    setError(null);
+    onFileSelected?.(file);
+  }
+  return /* @__PURE__ */ jsxs12(Fragment, { children: [
+    /* @__PURE__ */ jsx13(
       "input",
       {
         ref: inputRef,
         type: "file",
-        accept: ".pdf,.jpg,.jpeg,.png",
+        accept,
         className: "sr-only",
-        tabIndex: -1
+        tabIndex: -1,
+        disabled,
+        onChange: (e) => {
+          handleFiles(e.target.files);
+          e.target.value = "";
+        }
       }
     ),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs12(
       "div",
       {
         role: "button",
-        tabIndex: 0,
-        onClick: () => inputRef.current?.click(),
-        onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && inputRef.current?.click(),
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        onClick: () => {
+          if (!disabled) inputRef.current?.click();
+        },
+        onKeyDown: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        },
         onDragOver: (e) => {
           e.preventDefault();
-          setIsDragging(true);
+          if (!disabled) setIsDragging(true);
         },
         onDragEnter: (e) => {
           e.preventDefault();
-          setIsDragging(true);
+          if (!disabled) setIsDragging(true);
         },
         onDragLeave: () => setIsDragging(false),
         onDrop: (e) => {
           e.preventDefault();
           setIsDragging(false);
+          if (!disabled) handleFiles(e.dataTransfer.files);
         },
-        className: clsx16(
-          "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-brand focus-visible:ring-offset-1",
-          isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary",
+        className: clsx14(
+          "flex flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed py-4 px-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
+          disabled ? "cursor-not-allowed border-disabled bg-disabled" : clsx14(
+            "cursor-pointer",
+            isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary"
+          ),
           className
         ),
         children: [
-          /* @__PURE__ */ jsx15("span", { className: isDragging ? "text-brand" : "text-default-secondary", children: /* @__PURE__ */ jsx15(LuUpload, { size: 20 }) }),
-          /* @__PURE__ */ jsx15("span", { className: "text-body-sm font-medium text-default", children: "Upload file" }),
-          /* @__PURE__ */ jsx15("span", { className: "text-body-xs text-default-secondary text-center", children: "Drag & drop or browse \xB7 PDF, JPG, PNG \xB7 up to 10 MB" })
+          /* @__PURE__ */ jsx13("span", { className: disabled ? "text-disabled" : isDragging ? "text-brand" : "text-default-secondary", children: /* @__PURE__ */ jsx13(LuUpload, { className: "size-5" }) }),
+          /* @__PURE__ */ jsx13("span", { className: clsx14("text-body-sm font-medium", disabled ? "text-disabled" : "text-default"), children: "Upload file" }),
+          /* @__PURE__ */ jsx13("span", { className: "text-body-xs text-default-secondary text-center", children: description })
         ]
       }
-    )
+    ),
+    error && /* @__PURE__ */ jsx13("span", { role: "alert", className: "text-body-xs text-danger", children: error })
   ] });
 }
 
-// src/components/form-card.tsx
-import clsx17 from "clsx";
+// src/components/forms/form-card.tsx
+import clsx15 from "clsx";
 import { LuArrowLeft, LuArrowRight } from "react-icons/lu";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function FormCard({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
-      className: clsx17(
+      className: clsx15(
         "overflow-hidden rounded-xl border border-default bg-default",
         className
       ),
@@ -925,9 +918,9 @@ function FormCard({
   );
 }
 function FormCardHeader({ title, subtitle }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "border-b border-default px-7 py-6", children: [
-    /* @__PURE__ */ jsx16("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
-    subtitle && /* @__PURE__ */ jsx16("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
+  return /* @__PURE__ */ jsxs13("div", { className: "border-b border-default px-7 py-6", children: [
+    /* @__PURE__ */ jsx14("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
+    subtitle && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
   ] });
 }
 function FormCardFooter({
@@ -935,131 +928,104 @@ function FormCardFooter({
   onBack,
   onContinue,
   continueLabel = "Continue",
-  backDisabled = false
+  backDisabled = false,
+  continueDisabled = false
 }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-t border-default px-7 py-5", children: [
-    /* @__PURE__ */ jsx16(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, children: "Save as draft" }),
-    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
-      !backDisabled && /* @__PURE__ */ jsx16(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ jsx16(LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
-      /* @__PURE__ */ jsx16(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ jsx16(LuArrowRight, { size: 16 }), onClick: onContinue, children: continueLabel })
+  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-t border-default px-7 py-5", children: [
+    /* @__PURE__ */ jsx14(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, disabled: !onSaveDraft, children: "Save as draft" }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+      !backDisabled && /* @__PURE__ */ jsx14(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ jsx14(LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
+      /* @__PURE__ */ jsx14(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ jsx14(LuArrowRight, { size: 16 }), onClick: onContinue, disabled: continueDisabled, children: continueLabel })
     ] })
   ] });
 }
 
-// src/components/document-row.tsx
-import clsx18 from "clsx";
-import { jsx as jsx17, jsxs as jsxs16 } 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-default-secondary text-default-secondary" }
+// src/components/status/badge.tsx
+import clsx16 from "clsx";
+import { LuX } from "react-icons/lu";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var defaultClasses = {
+  gray: "bg-badge-gray   text-badge-gray",
+  red: "bg-badge-red    text-badge-red",
+  yellow: "bg-badge-yellow text-badge-yellow",
+  lime: "bg-badge-lime   text-badge-lime",
+  green: "bg-badge-green  text-badge-green",
+  teal: "bg-badge-teal   text-badge-teal",
+  blue: "bg-badge-blue   text-badge-blue",
+  pink: "bg-badge-pink   text-badge-pink",
+  slate: "bg-badge-slate  text-badge-slate"
 };
-function FileTypeBadge({ type }) {
-  return /* @__PURE__ */ jsx17("div", { className: "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-md bg-brand-tertiary", children: /* @__PURE__ */ jsx17("span", { className: "text-body-tiny font-semibold text-brand", children: type }) });
-}
-function DocumentRow({
-  title,
-  required,
-  description,
-  status,
-  fileName,
-  fileSize,
-  fileType = "PDF"
+var subtleClasses = {
+  gray: "border border-badge-gray   text-default-secondary",
+  red: "border border-badge-red    text-default-secondary",
+  yellow: "border border-badge-yellow text-default-secondary",
+  lime: "border border-badge-lime   text-default-secondary",
+  green: "border border-badge-green  text-default-secondary",
+  teal: "border border-badge-teal   text-default-secondary",
+  blue: "border border-badge-blue   text-default-secondary",
+  pink: "border border-badge-pink   text-default-secondary",
+  slate: "border border-badge-slate  text-default-secondary"
+};
+function Badge({
+  label,
+  color = "gray",
+  size = "sm",
+  variant = "default",
+  indicator = false,
+  onClose,
+  className
 }) {
-  const hasFile = (status === "uploaded" || status === "under-review" || status === "processing") && !!fileName;
-  const cfg = STATUS_CONFIG[status];
-  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-3 py-4", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 min-w-0", children: [
-        /* @__PURE__ */ jsx17("span", { className: "text-body-sm font-semibold text-default truncate", children: title }),
-        /* @__PURE__ */ jsx17("span", { className: "shrink-0 rounded-md border border-default bg-default-secondary px-2 py-0.5 text-body-tiny font-medium text-default-secondary", children: required ? "Required" : "Optional" })
-      ] }),
-      /* @__PURE__ */ jsx17(
-        "span",
-        {
-          className: clsx18(
-            "shrink-0 rounded-full px-2.5 py-0.5 text-body-tiny font-medium whitespace-nowrap",
-            cfg.style
-          ),
-          children: cfg.label
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx17("p", { className: "text-body-xs text-default-secondary", children: description }),
-    hasFile ? /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5", children: [
-      /* @__PURE__ */ jsx17(FileTypeBadge, { type: fileType }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx17("span", { className: "truncate text-body-sm font-medium text-default", children: fileName }),
-        fileSize && /* @__PURE__ */ jsx17("span", { className: "text-body-xs text-default-secondary", children: fileSize })
-      ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-4", children: [
-        /* @__PURE__ */ jsx17(
-          "button",
+  const isDefault = variant === "default";
+  return /* @__PURE__ */ jsxs14(
+    "span",
+    {
+      className: clsx16(
+        "inline-flex items-center rounded-full px-2 py-0.5",
+        size === "sm" ? "gap-1" : "gap-1.5",
+        isDefault ? defaultClasses[color] : subtleClasses[color],
+        className
+      ),
+      children: [
+        indicator && /* @__PURE__ */ jsx15(
+          "span",
           {
-            type: "button",
-            className: "text-body-xs font-medium text-brand hover:underline",
-            children: "Replace"
+            className: clsx16(
+              "shrink-0 rounded-full bg-current",
+              size === "sm" ? "h-1.5 w-1.5" : "h-2 w-2"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "span",
+          {
+            className: clsx16(
+              "whitespace-nowrap",
+              size === "sm" ? clsx16("text-body-tiny", isDefault && "font-semibold") : "text-body-xs"
+            ),
+            children: label
           }
         ),
-        /* @__PURE__ */ jsx17(
+        onClose && /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
-            className: "text-body-xs font-medium text-danger hover:underline",
-            children: "Remove"
+            onClick: onClose,
+            className: clsx16(
+              "inline-flex shrink-0 items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100",
+              size === "sm" ? "h-3 w-3" : "h-4 w-4"
+            ),
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx15(LuX, { className: "h-full w-full", strokeWidth: 2.5, "aria-hidden": true })
           }
         )
-      ] })
-    ] }) : /* @__PURE__ */ jsx17(FileDropZone, {})
-  ] });
+      ]
+    }
+  );
 }
 
-// src/components/modal.tsx
-import clsx19 from "clsx";
-import { LuX } from "react-icons/lu";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
-function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth = "max-w-[540px]" }) {
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx18(
-    "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__ */ jsxs17("div", { className: clsx19("w-full mx-4 rounded-2xl bg-white shadow-xl", maxWidth), children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex items-start justify-between px-6 py-5", children: [
-          /* @__PURE__ */ jsxs17("div", { children: [
-            /* @__PURE__ */ jsx18("h2", { className: "text-heading-sm font-semibold text-default", children: title }),
-            subtitle && /* @__PURE__ */ jsx18("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: subtitle })
-          ] }),
-          /* @__PURE__ */ jsx18(
-            IconButton,
-            {
-              variant: "subtle",
-              size: "sm",
-              "aria-label": "Close dialog",
-              onClick: onClose,
-              children: /* @__PURE__ */ jsx18(LuX, { size: 16 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx18("hr", { className: "border-default" }),
-        /* @__PURE__ */ jsx18("div", { className: "px-6 py-5", children }),
-        footer && /* @__PURE__ */ jsxs17(Fragment2, { children: [
-          /* @__PURE__ */ jsx18("hr", { className: "border-default" }),
-          /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-end gap-2 px-6 py-4", children: footer })
-        ] })
-      ] })
-    }
-  );
-}
-
-// src/components/role-badge.tsx
-import clsx20 from "clsx";
-import { jsx as jsx19 } from "react/jsx-runtime";
+// src/components/status/role-badge.tsx
+import clsx17 from "clsx";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var ROLE_COLORS = {
   "Super Admin": { bg: "#e9eff7", text: "#0c2d58" },
   "Admin": { bg: "#e9eff7", text: "#0c2d58" },
@@ -1073,12 +1039,19 @@ var ROLE_COLORS = {
   "User": { bg: "#e9eff7", text: "#0c2d58" }
 };
 var FALLBACK = { bg: "#f5f5f5", text: "#757575" };
-function RoleBadge({ role, size = "sm" }) {
-  const colors = ROLE_COLORS[role] ?? FALLBACK;
-  return /* @__PURE__ */ jsx19(
+var HEX6 = /^#[0-9a-fA-F]{6}$/;
+function resolveColors(role, color) {
+  if (color && HEX6.test(color)) {
+    return { bg: `${color}1F`, text: color };
+  }
+  return ROLE_COLORS[role] ?? FALLBACK;
+}
+function RoleBadge({ role, size = "sm", color }) {
+  const colors = resolveColors(role, color);
+  return /* @__PURE__ */ jsx16(
     "span",
     {
-      className: clsx20(
+      className: clsx17(
         "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"
       ),
@@ -1088,10 +1061,10 @@ function RoleBadge({ role, size = "sm" }) {
   );
 }
 
-// src/components/role-combo-box.tsx
+// src/components/forms/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 jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var ROLE_COMBO_OPTIONS = [
   { role: "Reviewer", description: "Reviews onboarding requests" },
   { role: "Admin", description: "Full org control" },
@@ -1130,21 +1103,32 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
   const otherOptions = options.filter(
     (o) => o.role !== value && o.role.toLowerCase().includes(query.toLowerCase())
   );
-  return /* @__PURE__ */ jsxs18("div", { className: "relative", ref: containerRef, children: [
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs15("div", { className: "relative", ref: containerRef, children: [
+    /* @__PURE__ */ jsxs15(
       "div",
       {
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "listbox",
         onClick: openDropdown,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openDropdown();
+          }
+          if (e.key === "Escape") {
+            setOpen(false);
+            setQuery("");
+          }
+        },
         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-default hover:border-brand-tertiary"}`,
         children: [
-          /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
-            /* @__PURE__ */ jsx20(RoleBadge, { role: value, size: "sm" }),
-            value === "User" && !open && /* @__PURE__ */ jsx20("span", { className: "rounded border border-default bg-default-secondary px-1.5 py-0.5 text-body-tiny font-medium text-default-secondary", children: "DEFAULT" }),
-            open && /* @__PURE__ */ jsxs18(Fragment3, { children: [
-              /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
+            /* @__PURE__ */ jsx17(RoleBadge, { role: value, size: "sm" }),
+            value === "User" && !open && /* @__PURE__ */ jsx17("span", { className: "rounded border border-default bg-default-secondary px-1.5 py-0.5 text-body-tiny font-medium text-default-secondary", children: "DEFAULT" }),
+            open && /* @__PURE__ */ jsxs15(Fragment2, { children: [
+              /* @__PURE__ */ jsx17(
                 "input",
                 {
                   ref: inputRef,
@@ -1156,20 +1140,20 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
                   "aria-label": "Search roles"
                 }
               ),
-              /* @__PURE__ */ jsx20("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-text-default", "aria-hidden": true })
+              /* @__PURE__ */ jsx17("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-divider", "aria-hidden": true })
             ] })
           ] }),
-          /* @__PURE__ */ jsx20("span", { className: "shrink-0 text-default-secondary", children: /* @__PURE__ */ jsx20(LuChevronDown2, { size: 14 }) })
+          /* @__PURE__ */ jsx17("span", { className: "shrink-0 text-default-secondary", children: /* @__PURE__ */ jsx17(LuChevronDown2, { size: 14 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs18(
+    open && /* @__PURE__ */ jsxs15(
       "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-default bg-white p-1.5 shadow-lg",
         children: [
-          selectedEntry && /* @__PURE__ */ jsxs18(
+          selectedEntry && /* @__PURE__ */ jsxs15(
             "div",
             {
               role: "option",
@@ -1177,31 +1161,38 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
               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__ */ jsx20(RoleBadge, { role: selectedEntry.role, size: "sm" }),
-                /* @__PURE__ */ jsx20("span", { className: "flex-1 text-body-xs text-default-secondary", children: selectedEntry.description }),
-                /* @__PURE__ */ jsx20("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
+                /* @__PURE__ */ jsx17(RoleBadge, { role: selectedEntry.role, size: "sm" }),
+                /* @__PURE__ */ jsx17("span", { className: "flex-1 text-body-xs text-default-secondary", children: selectedEntry.description }),
+                /* @__PURE__ */ jsx17("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx20("div", { className: "h-px bg-border-default" }),
-          otherOptions.length > 0 && /* @__PURE__ */ jsxs18(Fragment3, { children: [
-            /* @__PURE__ */ jsx20("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ jsx20("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: "Other roles" }) }),
-            otherOptions.map((opt) => /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsx17("div", { className: "h-px bg-divider" }),
+          otherOptions.length > 0 && /* @__PURE__ */ jsxs15(Fragment2, { children: [
+            /* @__PURE__ */ jsx17("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ jsx17("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: "Other roles" }) }),
+            otherOptions.map((opt) => /* @__PURE__ */ jsxs15(
               "div",
               {
                 role: "option",
                 "aria-selected": false,
                 className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-default-secondary",
                 onClick: () => select(opt.role),
+                tabIndex: 0,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    select(opt.role);
+                  }
+                },
                 children: [
-                  /* @__PURE__ */ jsx20(RoleBadge, { role: opt.role, size: "sm" }),
-                  /* @__PURE__ */ jsx20("span", { className: "text-body-xs text-default-secondary", children: opt.description })
+                  /* @__PURE__ */ jsx17(RoleBadge, { role: opt.role, size: "sm" }),
+                  /* @__PURE__ */ jsx17("span", { className: "text-body-xs text-default-secondary", children: opt.description })
                 ]
               },
               opt.role
             ))
           ] }),
-          otherOptions.length === 0 && query && /* @__PURE__ */ jsxs18("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: [
+          otherOptions.length === 0 && query && /* @__PURE__ */ jsxs15("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: [
             'No roles match "',
             query,
             '"'
@@ -1212,93 +1203,2754 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
   ] });
 }
 
-// src/index.tsx
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-function Panel({
+// src/components/status/status-badge.tsx
+import clsx18 from "clsx";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var TONE_STYLES = {
+  neutral: "bg-status-neutral  text-status-neutral",
+  info: "bg-status-info     text-status-info",
+  warning: "bg-status-warning  text-status-warning",
+  caution: "bg-status-caution  text-status-caution",
+  accent: "bg-status-accent   text-status-accent",
+  positive: "bg-status-positive text-status-positive",
+  danger: "bg-status-danger   text-status-danger"
+};
+var DOT_STYLES = {
+  neutral: "bg-status-dot-neutral",
+  info: "bg-status-dot-info",
+  warning: "bg-status-dot-warning",
+  caution: "bg-status-dot-caution",
+  accent: "bg-status-dot-accent",
+  positive: "bg-status-dot-positive",
+  danger: "bg-status-dot-danger"
+};
+var SIZE_STYLES = {
+  sm: "px-2 py-0.5 text-body-tiny",
+  md: "px-2.5 py-1 text-body-xs"
+};
+function StatusBadge({
+  label,
+  tone = "neutral",
+  size = "md",
+  dot = true,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs16(
+    "span",
+    {
+      className: clsx18(
+        "inline-flex items-center gap-1.5 rounded-full font-medium leading-tight whitespace-nowrap",
+        SIZE_STYLES[size],
+        TONE_STYLES[tone],
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx18("span", { className: "shrink-0", children: icon }) : dot && /* @__PURE__ */ jsx18("span", { className: clsx18("size-1.5 shrink-0 rounded-full", DOT_STYLES[tone]) }),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/status/status-dot.tsx
+import clsx19 from "clsx";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var dotTones = {
+  brand: "bg-brand",
+  positive: "bg-positive",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  neutral: "bg-neutral",
+  default: "bg-default-tertiary"
+};
+function StatusDot({ tone = "default", color, className }) {
+  return /* @__PURE__ */ jsx19(
+    "span",
+    {
+      className: clsx19("inline-block size-1.5 shrink-0 rounded-full", !color && dotTones[tone], className),
+      style: color ? { backgroundColor: color } : void 0
+    }
+  );
+}
+
+// src/components/status/status-chip.tsx
+import clsx20 from "clsx";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function StatusChip({ label, count, tone = "default", dotColor, bg, className }) {
+  return /* @__PURE__ */ jsxs17(
+    "span",
+    {
+      className: clsx20(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1",
+        !bg && "bg-default-secondary",
+        className
+      ),
+      style: bg ? { backgroundColor: bg } : void 0,
+      children: [
+        /* @__PURE__ */ jsx20(StatusDot, { tone, color: dotColor }),
+        /* @__PURE__ */ jsx20("span", { className: "text-body-xs font-medium text-default", children: count }),
+        /* @__PURE__ */ jsx20("span", { className: "text-body-xs text-default-secondary", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/status/count-badge.tsx
+import clsx21 from "clsx";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function CountBadge({ count, label, tone = "positive", className }) {
+  return /* @__PURE__ */ jsxs18(
+    "span",
+    {
+      className: clsx21(
+        "inline-flex items-center gap-1.5 rounded-full border border-default px-2.5 py-1 text-body-xs font-medium text-default",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx21(StatusDot, { tone }),
+        count,
+        label && /* @__PURE__ */ jsx21("span", { className: "text-default-secondary", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/status/tag-pill.tsx
+import clsx22 from "clsx";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var toneStyles = {
+  default: "bg-default-secondary text-default-secondary",
+  brand: "bg-brand-tertiary text-brand",
+  positive: "bg-positive-tertiary text-positive",
+  warning: "bg-warning-tertiary text-warning",
+  danger: "bg-danger-tertiary text-danger"
+};
+function TagPill({ label, tone = "default", bg, color, className }) {
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      className: clsx22(
+        "inline-flex items-center rounded-full px-2 py-0.5 text-body-xs font-medium",
+        !bg && !color && toneStyles[tone],
+        className
+      ),
+      style: {
+        ...bg ? { backgroundColor: bg } : void 0,
+        ...color ? { color } : void 0
+      },
+      children: label
+    }
+  );
+}
+
+// src/components/status/trail-chip.tsx
+import clsx23 from "clsx";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var DOT = {
+  neutral: "bg-status-dot-neutral",
+  info: "bg-status-dot-info",
+  warning: "bg-status-dot-warning",
+  caution: "bg-status-dot-caution",
+  accent: "bg-status-dot-accent",
+  positive: "bg-status-dot-positive",
+  danger: "bg-status-dot-danger"
+};
+function TrailChip({ label, value, tone = "info", dotColor, className }) {
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: clsx23(
+        "flex items-center gap-2 rounded-full border border-default bg-default px-3 py-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx23(
+          "span",
+          {
+            className: clsx23("size-1.5 shrink-0 rounded-full", !dotColor && DOT[tone]),
+            style: dotColor ? { backgroundColor: dotColor } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx23("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: label }),
+        /* @__PURE__ */ jsx23("span", { className: "text-body-xs font-medium text-default", children: value })
+      ]
+    }
+  );
+}
+
+// src/components/status/user-status-pill.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var STATUS_META = {
+  active: { label: "Active", tone: "positive" },
+  // `caution` (pale yellow), not `warning` (orange) — Pending is one step below a
+  // warning on the severity ramp, and reads as waiting rather than at risk.
+  pending: { label: "Pending", tone: "caution" },
+  deactivated: { label: "Deactivated", tone: "danger" }
+};
+function UserStatusPill({ status }) {
+  const { label, tone } = STATUS_META[status];
+  return /* @__PURE__ */ jsx24(StatusBadge, { label, tone });
+}
+
+// src/components/status/check-indicator.tsx
+import clsx24 from "clsx";
+import { LuCheck as LuCheck3, LuCircleAlert, LuLoaderCircle, LuMinus, LuX as LuX2 } from "react-icons/lu";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var STATUS_STYLES = {
+  passed: "bg-status-check-passed   border-status-check-passed   text-status-check-passed",
+  in_progress: "bg-status-check-progress border-status-check-progress text-status-check-progress",
+  action_required: "bg-status-check-failed   border-status-check-failed   text-status-check-failed",
+  failed: "bg-status-check-failed   border-status-check-failed   text-status-check-failed",
+  pending: "bg-status-check-pending  border-status-check-pending  text-status-check-pending",
+  waived: "bg-status-check-pending  border-status-check-pending  text-status-check-pending"
+};
+function StatusGlyph({ status }) {
+  switch (status) {
+    case "passed":
+      return /* @__PURE__ */ jsx25(LuCheck3, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "failed":
+      return /* @__PURE__ */ jsx25(LuX2, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "waived":
+      return /* @__PURE__ */ jsx25(LuMinus, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "in_progress":
+      return /* @__PURE__ */ jsx25(LuLoaderCircle, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "action_required":
+      return /* @__PURE__ */ jsx25(LuCircleAlert, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true });
+    case "pending":
+      return null;
+  }
+}
+function CheckIndicator({ status, label, className }) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: clsx24(
+        "flex size-[22px] shrink-0 items-center justify-center rounded-full border-[1.5px]",
+        STATUS_STYLES[status],
+        className
+      ),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      children: /* @__PURE__ */ jsx25(StatusGlyph, { status })
+    }
+  );
+}
+
+// src/components/status/entity-icon-badge.tsx
+import clsx25 from "clsx";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var sizeStyles4 = {
+  sm: "size-8",
+  md: "size-10"
+};
+var shapeStyles = {
+  square: { sm: "rounded-lg", md: "rounded-xl" },
+  circle: { sm: "rounded-full", md: "rounded-full" }
+};
+var toneStyles2 = {
+  default: "bg-default-secondary text-icon-default",
+  brand: "bg-brand-tertiary text-icon-brand",
+  positive: "bg-positive-tertiary text-icon-positive",
+  warning: "bg-warning-tertiary text-icon-warning",
+  danger: "bg-danger-tertiary text-icon-danger",
+  neutral: "bg-neutral-tertiary text-icon-neutral"
+};
+function EntityIconBadge({ size = "sm", tone = "default", shape = "square", bg, iconColor, children, className }) {
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      className: clsx25(
+        "inline-flex shrink-0 items-center justify-center",
+        sizeStyles4[size],
+        shapeStyles[shape][size],
+        !bg && !iconColor && toneStyles2[tone],
+        className
+      ),
+      style: {
+        ...bg ? { backgroundColor: bg } : void 0,
+        ...iconColor ? { color: iconColor } : void 0
+      },
+      children
+    }
+  );
+}
+
+// src/components/forms/checkbox.tsx
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import clsx26 from "clsx";
+import { LuCheck as LuCheck4, LuMinus as LuMinus2 } from "react-icons/lu";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  indeterminate = false,
+  className
+}) {
+  const inputRef = useRef3(null);
+  useEffect2(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs20(
+    "label",
+    {
+      className: clsx26(
+        "group inline-flex items-start gap-2.5",
+        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx27(
+          "input",
+          {
+            ref: inputRef,
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: (e) => onChange(e.target.checked),
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx27(
+          "span",
+          {
+            "aria-hidden": true,
+            className: clsx26(
+              "mt-px flex size-[18px] shrink-0 items-center justify-center rounded-[4px] border-[1.5px] transition-colors",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-brand peer-focus-visible:ring-offset-1",
+              checked || indeterminate ? "border-brand-emphasis bg-brand text-brand-on-brand" : "border-default-secondary bg-default"
+            ),
+            children: indeterminate ? /* @__PURE__ */ jsx27(LuMinus2, { className: "size-3", strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx27(LuCheck4, { className: "size-3", strokeWidth: 3 }) : null
+          }
+        ),
+        label && /* @__PURE__ */ jsx27("span", { className: "text-body-xs text-default", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/forms/segmented-control.tsx
+import clsx27 from "clsx";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function SegmentedControl({ options, value, onChange, className }) {
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      className: clsx27(
+        "inline-flex items-center rounded-xl border border-default bg-default-secondary p-0.5",
+        className
+      ),
+      children: options.map((opt) => /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange?.(opt.value),
+          className: clsx27(
+            "rounded-lg px-3.5 py-1.5 text-body-xs font-medium transition-colors",
+            opt.value === value ? "bg-default shadow-panel text-default" : "text-default-secondary hover:text-default"
+          ),
+          children: opt.label
+        },
+        opt.value
+      ))
+    }
+  );
+}
+
+// src/components/overlays/modal.tsx
+import { useRef as useRef4 } from "react";
+import { LuCircleCheckBig, LuInfo, LuOctagonAlert, LuTriangleAlert, LuX as LuX3 } from "react-icons/lu";
+
+// src/lib/cn.ts
+import { clsx as clsx28 } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx28(inputs));
+}
+
+// src/components/overlays/overlay.ts
+import { useEffect as useEffect3 } from "react";
+var OVERLAY_SCRIM = "bg-overlay";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function focusableWithin(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+    (el) => el.offsetParent !== null || el === root
+  );
+}
+function useOverlayDismiss(onClose, panelRef) {
+  useEffect3(() => {
+    function onKeyDown(e) {
+      const panel = panelRef.current;
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !panel) return;
+      const items = focusableWithin(panel);
+      if (items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose, panelRef]);
+  useEffect3(() => {
+    const previouslyFocused = document.activeElement;
+    const panel = panelRef.current;
+    if (panel) {
+      const target = focusableWithin(panel)[0] ?? panel;
+      target.focus({ preventScroll: true });
+    }
+    return () => previouslyFocused?.focus?.({ preventScroll: true });
+  }, [panelRef]);
+}
+
+// src/components/overlays/modal.tsx
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var SIZE2 = {
+  sm: "sm:max-w-[420px]",
+  md: "sm:max-w-[540px]",
+  lg: "sm:max-w-[640px]",
+  xl: "sm:max-w-[800px]"
+};
+var TONE_ICON = {
+  info: /* @__PURE__ */ jsx29(LuInfo, { className: "size-5" }),
+  positive: /* @__PURE__ */ jsx29(LuCircleCheckBig, { className: "size-5" }),
+  warning: /* @__PURE__ */ jsx29(LuTriangleAlert, { className: "size-5" }),
+  danger: /* @__PURE__ */ jsx29(LuOctagonAlert, { className: "size-5" })
+};
+var TONE_BADGE = {
+  info: "brand",
+  positive: "positive",
+  warning: "warning",
+  danger: "danger"
+};
+var FOOTER_ALIGN = {
+  start: "justify-start",
+  between: "justify-between",
+  end: "justify-end"
+};
+function Modal(props) {
+  if (!props.isOpen) return null;
+  return /* @__PURE__ */ jsx29(ModalShell, { ...props });
+}
+function ModalShell({
+  onClose,
+  label,
   children,
+  size = "md",
+  showClose = true,
   className
 }) {
-  return /* @__PURE__ */ jsx21("section", { className: clsx21("rounded-3xl border border-white/70 bg-white/90 p-6 shadow-panel backdrop-blur", className), children });
+  const panelRef = useRef4(null);
+  useOverlayDismiss(onClose, panelRef);
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: cn("fixed inset-0 z-50 flex items-end justify-center sm:items-center", OVERLAY_SCRIM),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs21(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label,
+          className: cn(
+            "relative max-h-[92dvh] w-full overflow-y-auto bg-default shadow-xl",
+            "rounded-t-2xl pb-[env(safe-area-inset-bottom)] sm:mx-4 sm:rounded-2xl sm:pb-0",
+            SIZE2[size],
+            className
+          ),
+          children: [
+            showClose && /* @__PURE__ */ jsx29(
+              IconButton,
+              {
+                variant: "subtle",
+                size: "sm",
+                "aria-label": "Close dialog",
+                onClick: onClose,
+                className: "absolute right-6 top-5 z-10",
+                children: /* @__PURE__ */ jsx29(LuX3, { size: 16 })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function ModalHeader({
+  children,
+  tone = "default",
+  divider = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: cn(
+        // pr-14 reserves the floating close button's column (24px gutter + 24px
+        // button + gap), which the old flex-between header used to hold open.
+        "flex items-start gap-3 px-6 py-5 pr-14",
+        divider && "border-b border-default",
+        className
+      ),
+      ...rest,
+      children: [
+        tone !== "default" && /* @__PURE__ */ jsx29(EntityIconBadge, { size: "md", shape: "circle", tone: TONE_BADGE[tone], children: TONE_ICON[tone] }),
+        /* @__PURE__ */ jsx29("div", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  );
+}
+function ModalTitle({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx29("h2", { className: cn("text-heading-sm font-semibold text-default", className), ...rest, children });
+}
+function ModalDescription({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx29("p", { className: cn("mt-0.5 text-body-xs text-default-secondary", className), ...rest, children });
+}
+function ModalBody({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx29("div", { className: cn("px-6 py-5", className), ...rest, children });
+}
+function ModalFooter({
+  children,
+  align = "end",
+  divider = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-6 py-4",
+        FOOTER_ALIGN[align],
+        divider && "border-t border-default",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/overlays/drawer.tsx
+import { useRef as useRef5 } from "react";
+import clsx29 from "clsx";
+import { LuX as LuX4 } from "react-icons/lu";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+function Drawer(props) {
+  if (!props.isOpen) return null;
+  return /* @__PURE__ */ jsx30(DrawerShell, { ...props });
 }
-function MetricCard({
+function DrawerShell({
+  onClose,
+  header,
+  children,
+  footer,
+  footerAlign = "end",
+  width = "w-[440px] max-w-[90vw]",
   label,
-  value,
-  tone = "default"
+  className
 }) {
-  const tones = {
-    default: "from-white to-slate-50 text-default",
-    signal: "from-brand-tertiary to-cyan-50 text-brand",
-    ember: "from-amber-50 to-orange-50 text-danger",
-    moss: "from-emerald-50 to-lime-50 text-positive"
-  };
-  return /* @__PURE__ */ jsxs19(Panel, { className: clsx21("bg-gradient-to-br", tones[tone]), children: [
-    /* @__PURE__ */ jsx21("p", { className: "text-sm uppercase tracking-[0.2em] text-slate-500", children: label }),
-    /* @__PURE__ */ jsx21("p", { className: "mt-3 text-3xl font-semibold", children: value })
-  ] });
+  const panelRef = useRef5(null);
+  useOverlayDismiss(onClose, panelRef);
+  return /* @__PURE__ */ jsx30(
+    "div",
+    {
+      className: clsx29("fixed inset-0 z-50 flex justify-end", OVERLAY_SCRIM),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs22(
+        "aside",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label,
+          className: clsx29("relative flex h-full flex-col bg-default shadow-2xl", width, className),
+          children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-start justify-between gap-3 border-b border-default p-6", children: [
+              /* @__PURE__ */ jsx30("div", { className: "min-w-0", children: header }),
+              /* @__PURE__ */ jsx30(IconButton, { variant: "subtle", size: "sm", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx30(LuX4, { size: 18 }) })
+            ] }),
+            /* @__PURE__ */ jsx30("div", { className: "flex-1 space-y-6 overflow-y-auto p-6", children }),
+            footer && /* @__PURE__ */ jsx30(
+              "div",
+              {
+                className: clsx29(
+                  "flex items-center gap-2 border-t border-default px-6 py-4",
+                  footerAlign === "between" ? "justify-between" : "justify-end"
+                ),
+                children: footer
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 }
-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__ */ jsx21("span", { className: clsx21("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__ */ jsx21("span", { className: clsx21("inline-flex rounded-full px-3 py-1 text-xs font-semibold capitalize", styles[sentiment ?? "neutral"] ?? styles.neutral), children: sentiment ?? "unknown" });
-}
-function SectionHeading({
-  eyebrow,
+
+// src/components/overlays/confirm-dialog.tsx
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+function ConfirmDialog({
+  isOpen,
   title,
-  detail
+  subtitle,
+  tone = "default",
+  size = "md",
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "primary",
+  isConfirming = false,
+  confirmingLabel = "Working\u2026",
+  children,
+  className,
+  onConfirm,
+  onClose
 }) {
-  return /* @__PURE__ */ jsxs19("div", { children: [
-    /* @__PURE__ */ jsx21("p", { className: "text-xs uppercase tracking-[0.25em] text-brand", children: eyebrow }),
-    /* @__PURE__ */ jsx21("h2", { className: "mt-2 text-2xl font-semibold text-default", children: title }),
-    detail ? /* @__PURE__ */ jsx21("p", { className: "mt-2 max-w-2xl text-sm text-slate-600", children: detail }) : null
+  return /* @__PURE__ */ jsxs23(Modal, { isOpen, onClose, label: title, size, className, children: [
+    /* @__PURE__ */ jsxs23(ModalHeader, { tone, divider: Boolean(children), children: [
+      /* @__PURE__ */ jsx31(ModalTitle, { children: title }),
+      subtitle && /* @__PURE__ */ jsx31(ModalDescription, { children: subtitle })
+    ] }),
+    children && /* @__PURE__ */ jsx31(ModalBody, { children }),
+    /* @__PURE__ */ jsxs23(ModalFooter, { children: [
+      /* @__PURE__ */ jsx31(Button, { variant: "neutral", size: "md", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsx31(Button, { variant: confirmVariant, size: "md", disabled: isConfirming, onClick: onConfirm, children: isConfirming ? confirmingLabel : confirmLabel })
+    ] })
   ] });
 }
+
+// src/components/overlays/note-confirm-modal.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+function NoteConfirmModal({ isOpen, ...rest }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx32(NoteConfirmModalShell, { ...rest });
+}
+function NoteConfirmModalShell({
+  title,
+  subtitle,
+  tone = "default",
+  size = "md",
+  confirmLabel,
+  cancelLabel = "Cancel",
+  confirmVariant = "primary",
+  requireNote = false,
+  notePlaceholder = "Add a note\u2026",
+  submittingLabel = "Saving\u2026",
+  isSubmitting = false,
+  className,
+  onClose,
+  onConfirm
+}) {
+  const [note, setNote] = useState3("");
+  const disabled = isSubmitting || requireNote && !note.trim();
+  return /* @__PURE__ */ jsxs24(Modal, { isOpen: true, onClose, label: title, size, className, children: [
+    /* @__PURE__ */ jsxs24(ModalHeader, { tone, children: [
+      /* @__PURE__ */ jsx32(ModalTitle, { children: title }),
+      subtitle && /* @__PURE__ */ jsx32(ModalDescription, { children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx32(ModalBody, { children: /* @__PURE__ */ jsx32(
+      Textarea,
+      {
+        value: note,
+        onChange: (e) => setNote(e.target.value),
+        placeholder: notePlaceholder,
+        rows: 4
+      }
+    ) }),
+    /* @__PURE__ */ jsxs24(ModalFooter, { children: [
+      /* @__PURE__ */ jsx32(Button, { variant: "neutral", size: "md", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsx32(Button, { variant: confirmVariant, size: "md", disabled, onClick: () => onConfirm(note.trim()), children: isSubmitting ? submittingLabel : confirmLabel })
+    ] })
+  ] });
+}
+
+// src/components/overlays/dropdown-menu.tsx
+import { useEffect as useEffect4, useRef as useRef6, useState as useState4 } from "react";
+import clsx30 from "clsx";
+import { LuEllipsis } from "react-icons/lu";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+function DropdownMenu({
+  items,
+  trigger,
+  label,
+  align = "right",
+  className
+}) {
+  const [open, setOpen] = useState4(false);
+  const rootRef = useRef6(null);
+  useEffect4(() => {
+    if (!open) return;
+    function handleOutside(e) {
+      const root = rootRef.current;
+      if (root && !root.contains(e.target)) setOpen(false);
+    }
+    function handleKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+  const visible = items.filter((item) => item.label);
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref: rootRef,
+      className: clsx30("relative", className),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx33(
+          "button",
+          {
+            type: "button",
+            "aria-label": label,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen((v) => !v);
+            },
+            className: clsx30(
+              "rounded-md border border-default bg-default text-body-xs font-medium leading-none text-default transition-colors hover:bg-default-secondary",
+              trigger ? "p-1.5" : "px-2.5 py-1.5"
+            ),
+            children: trigger ?? /* @__PURE__ */ jsx33(LuEllipsis, { className: "size-4" })
+          }
+        ),
+        open && /* @__PURE__ */ jsx33(
+          "div",
+          {
+            role: "menu",
+            className: clsx30(
+              "absolute top-full z-20 mt-1 min-w-[148px] rounded-lg border border-default bg-default py-1 shadow-lg",
+              align === "right" ? "right-0" : "left-0"
+            ),
+            children: visible.map((item, i) => /* @__PURE__ */ jsxs25("div", { children: [
+              item.separatorBefore && i > 0 && /* @__PURE__ */ jsx33("div", { className: "my-1 h-px bg-divider" }),
+              /* @__PURE__ */ jsx33(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  disabled: item.disabled,
+                  className: clsx30(
+                    "flex w-full items-center px-3 py-2 text-left text-body-sm transition-colors",
+                    item.disabled && "cursor-not-allowed opacity-50",
+                    item.tone === "danger" ? "text-danger hover:bg-danger-tertiary" : "text-default hover:bg-default-secondary"
+                  ),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen(false);
+                    item.onSelect();
+                  },
+                  children: item.label
+                }
+              )
+            ] }, item.label))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/cards/card.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+var RADIUS = {
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl"
+};
+var TONE = {
+  default: "border-default bg-default",
+  brand: "border-brand-tertiary bg-brand-tertiary",
+  positive: "border-positive-tertiary bg-positive-tertiary",
+  warning: "border-warning-tertiary bg-warning-tertiary",
+  // The one asymmetry: danger keeps the strong `border-danger` rather than the
+  // tertiary border, because it is the only tone that has to read as an alarm from
+  // across a dashboard. Byte-identical to the deleted AlertCard's danger surface.
+  danger: "border-danger bg-danger-tertiary"
+};
+var BOX = {
+  sm: "px-3 py-2",
+  md: "px-4 py-3",
+  lg: "px-5 py-4"
+};
+var BODY_BOX = {
+  sm: "gap-3 p-3",
+  md: "gap-4 p-4",
+  lg: "gap-5 p-5"
+};
+var TITLE_SIZE = {
+  sm: "text-body-xs",
+  md: "text-body-sm",
+  lg: "text-subheading-sm"
+};
+var FOOTER_ALIGN2 = {
+  start: "justify-start",
+  between: "justify-between",
+  end: "justify-end"
+};
+function Card({ children, radius = "2xl", tone = "default", className, ...rest }) {
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn("flex flex-col overflow-hidden border", RADIUS[radius], TONE[tone], className),
+      ...rest,
+      children
+    }
+  );
+}
+function CardHeader({
+  children,
+  size = "md",
+  divider = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "grid auto-rows-min items-center gap-x-3 gap-y-0.5",
+        "has-[[data-slot=card-action]]:grid-cols-[1fr_auto]",
+        BOX[size],
+        divider && "border-b border-default",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function CardTitle({ children, size = "md", as: Tag = "p", className, ...rest }) {
+  return /* @__PURE__ */ jsx34(
+    Tag,
+    {
+      "data-slot": "card-title",
+      className: cn("min-w-0 font-semibold text-default", TITLE_SIZE[size], className),
+      ...rest,
+      children
+    }
+  );
+}
+function CardDescription({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx34(
+    "p",
+    {
+      "data-slot": "card-description",
+      className: cn("min-w-0 text-body-tiny text-default-secondary", className),
+      ...rest,
+      children
+    }
+  );
+}
+function CardAction({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn("col-start-2 row-span-2 row-start-1 shrink-0 self-center justify-self-end", className),
+      ...rest,
+      children
+    }
+  );
+}
+function CardBody({ children, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx34("div", { "data-slot": "card-body", className: cn("flex flex-col", BODY_BOX[size], className), ...rest, children });
+}
+function CardFooter({
+  children,
+  size = "md",
+  divider = true,
+  align = "end",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "flex items-center gap-2",
+        BOX[size],
+        FOOTER_ALIGN2[align],
+        divider && "border-t border-default",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/chrome/page-heading.tsx
+import clsx31 from "clsx";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+var TITLE = {
+  page: "text-2xl font-semibold text-default",
+  toolbar: "text-heading-sm font-semibold leading-snug text-default",
+  section: "text-lg font-semibold text-default"
+};
+var SUBTITLE = {
+  page: "mt-1 text-body-sm text-default-secondary",
+  toolbar: "text-body-xs text-default-secondary",
+  section: "mt-1 text-body-sm text-default-secondary"
+};
+function PageHeading({
+  title,
+  subtitle,
+  size = "page",
+  as,
+  actions,
+  truncateTitle,
+  className
+}) {
+  const Tag = as ?? (size === "section" ? "h2" : "h1");
+  const heading = /* @__PURE__ */ jsxs26("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx35(Tag, { className: clsx31(TITLE[size], truncateTitle && "truncate"), children: title }),
+    subtitle && /* @__PURE__ */ jsx35("p", { className: SUBTITLE[size], children: subtitle })
+  ] });
+  if (!actions) return className ? /* @__PURE__ */ jsx35("div", { className, children: heading }) : heading;
+  return /* @__PURE__ */ jsxs26("div", { className: clsx31("flex items-start justify-between gap-4", className), children: [
+    heading,
+    /* @__PURE__ */ jsx35("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
+
+// src/components/chrome/page-toolbar.tsx
+import clsx32 from "clsx";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var SIZE3 = {
+  sm: "min-h-[56px] px-4 py-2.5 md:px-7",
+  md: "min-h-[72px] px-4 py-4 md:px-7"
+};
+function PageToolbar({ children, wrap, size = "md", className }) {
+  return /* @__PURE__ */ jsx36(
+    "div",
+    {
+      className: clsx32(
+        "flex shrink-0 items-center justify-between gap-4 border-b border-default bg-default",
+        SIZE3[size],
+        wrap && "flex-wrap gap-2",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/chrome/filter-bar.tsx
+import clsx33 from "clsx";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+var GAP = {
+  sm: "gap-2",
+  md: "gap-3"
+};
+function FilterBar({ children, trailing, size = "md", className }) {
+  return /* @__PURE__ */ jsxs27("div", { className: clsx33("flex flex-wrap items-center", GAP[size], className), children: [
+    children,
+    trailing && /* @__PURE__ */ jsx37("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+  ] });
+}
+
+// src/components/chrome/tabs.tsx
+import clsx34 from "clsx";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+var SIZE4 = {
+  underline: {
+    sm: { strip: "gap-4", tab: "px-0.5 py-1.5 text-body-xs" },
+    md: { strip: "gap-6", tab: "px-0.5 py-2.5 text-body-sm" }
+  },
+  pill: {
+    sm: { strip: "gap-1", tab: "rounded-md px-2.5 py-1.5 text-body-tiny" },
+    md: { strip: "gap-1.5", tab: "rounded-lg px-3.5 py-2 text-body-xs" }
+  }
+};
+function Tabs({
+  items,
+  value,
+  onChange,
+  variant = "underline",
+  size = "md",
+  className
+}) {
+  const isPill = variant === "pill";
+  const s = SIZE4[variant][size];
+  return /* @__PURE__ */ jsx38(
+    "div",
+    {
+      role: "tablist",
+      className: clsx34(
+        "flex shrink-0 overflow-x-auto",
+        s.strip,
+        !isPill && "border-b border-default",
+        className
+      ),
+      children: items.map((tab) => {
+        const active = tab.key === value;
+        return /* @__PURE__ */ jsxs28(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(tab.key),
+            className: clsx34(
+              "flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-colors",
+              s.tab,
+              isPill ? clsx34(
+                "font-medium",
+                active ? "bg-brand text-brand-on-brand" : "text-default-secondary hover:bg-default-secondary"
+              ) : clsx34(
+                "leading-snug",
+                active ? "border-b-2 border-brand-emphasis font-semibold text-brand-emphasis" : "font-normal text-default-secondary hover:text-default"
+              )
+            ),
+            children: [
+              tab.label,
+              tab.count !== void 0 && /* @__PURE__ */ jsx38(
+                "span",
+                {
+                  className: clsx34(
+                    "rounded-md px-1.5 py-px text-body-tiny font-medium leading-snug",
+                    active && isPill ? "bg-brand-hover text-brand-on-brand" : "bg-default-secondary text-default-secondary"
+                  ),
+                  children: tab.count
+                }
+              )
+            ]
+          },
+          tab.key
+        );
+      })
+    }
+  );
+}
+
+// src/components/chrome/nav-item.tsx
+import clsx35 from "clsx";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var SIZE5 = {
+  sm: { box: "h-9 gap-2 rounded-lg px-2.5 py-1.5", label: "text-body-xs" },
+  md: { box: "h-11 gap-3 rounded-xl px-3.5 py-2.5", label: "text-body-sm" }
+};
+function NavItem({
+  icon,
+  label,
+  isActive = false,
+  indicator = false,
+  collapsed = false,
+  size = "md",
+  className
+}) {
+  const s = SIZE5[size];
+  return /* @__PURE__ */ jsxs29(
+    "span",
+    {
+      className: clsx35(
+        "relative flex w-full items-center transition-colors",
+        s.box,
+        collapsed && "justify-center",
+        isActive ? "bg-brand text-brand-on-brand" : [
+          "border border-default bg-default text-default-secondary",
+          "hover:bg-brand-tertiary-hover hover:border-brand-tertiary hover:text-brand"
+        ],
+        className
+      ),
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsx39("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
+        !collapsed && /* @__PURE__ */ jsx39("span", { className: clsx35("min-w-0 flex-1 truncate font-regular leading-snug", s.label), children: label }),
+        indicator && /* @__PURE__ */ jsx39("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
+      ]
+    }
+  );
+}
+
+// src/components/chrome/eyebrow-label.tsx
+import clsx36 from "clsx";
+import { jsx as jsx40 } from "react/jsx-runtime";
+function EyebrowLabel({ children, variant = "uppercase", className }) {
+  return /* @__PURE__ */ jsx40(
+    "p",
+    {
+      className: clsx36(
+        "text-body-tiny font-semibold tracking-wide text-default-secondary",
+        variant === "uppercase" && "uppercase",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/widgets/widget-header.tsx
+import clsx38 from "clsx";
+
+// src/components/widgets/widget-title.tsx
+import clsx37 from "clsx";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var sizeStyles5 = {
+  sm: "text-subheading-sm font-semibold leading-none",
+  md: "text-[18px] font-bold leading-normal",
+  lg: "text-subheading font-semibold leading-[1.2]"
+};
+function WidgetTitle({ children, size = "sm", className }) {
+  return /* @__PURE__ */ jsx41("h3", { className: clsx37(sizeStyles5[size], "text-default", className), children });
+}
+
+// src/components/widgets/widget-header.tsx
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+var eyebrowStyles = {
+  uppercase: "text-body-tiny font-medium uppercase tracking-[0.66px] text-default-secondary",
+  plain: "text-body-xs leading-[1.4] text-default-secondary"
+};
+function WidgetHeader({
+  eyebrow,
+  eyebrowVariant = "uppercase",
+  title,
+  titleSize,
+  subtitle,
+  badge,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs30("div", { className: clsx38("flex items-start justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsxs30("div", { className: "min-w-0 flex-1", children: [
+      eyebrow && /* @__PURE__ */ jsx42("p", { className: eyebrowStyles[eyebrowVariant], children: eyebrow }),
+      /* @__PURE__ */ jsx42(WidgetTitle, { size: titleSize, children: title }),
+      subtitle && /* @__PURE__ */ jsx42("p", { className: "mt-1 text-body-xs text-default-secondary leading-snug", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs30("div", { className: "flex shrink-0 items-center gap-2", children: [
+      badge,
+      action
+    ] })
+  ] });
+}
+
+// src/components/widgets/widget-footer.tsx
+import clsx39 from "clsx";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+function WidgetFooter({ caption, subcaption, action, className }) {
+  return /* @__PURE__ */ jsxs31("div", { className: clsx39("flex items-center gap-3", className), children: [
+    caption && /* @__PURE__ */ jsxs31("div", { className: "flex items-stretch gap-3 flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx43("div", { className: "w-0.5 shrink-0 self-stretch rounded-full bg-brand" }),
+      /* @__PURE__ */ jsxs31("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx43("p", { className: "text-body-sm font-medium text-default leading-snug", children: caption }),
+        subcaption && /* @__PURE__ */ jsx43("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: subcaption })
+      ] })
+    ] }),
+    action && /* @__PURE__ */ jsx43("div", { className: "ml-auto shrink-0", children: action })
+  ] });
+}
+
+// src/components/stats/stat-tile.tsx
+import clsx40 from "clsx";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+var DOT_TONE = {
+  neutral: "bg-status-dot-neutral",
+  info: "bg-status-dot-info",
+  warning: "bg-status-dot-warning",
+  caution: "bg-status-dot-caution",
+  accent: "bg-status-dot-accent",
+  positive: "bg-status-dot-positive",
+  danger: "bg-status-dot-danger"
+};
+function StatTile({ label, value, tone, dotColor, className }) {
+  const showDot = Boolean(tone || dotColor);
+  return /* @__PURE__ */ jsxs32(
+    "div",
+    {
+      className: clsx40(
+        "flex flex-col gap-2 rounded-xl border border-default bg-default p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1.5", children: [
+          showDot && /* @__PURE__ */ jsx44(
+            "span",
+            {
+              className: clsx40("size-2 shrink-0 rounded-full", tone && DOT_TONE[tone]),
+              style: tone ? void 0 : { backgroundColor: dotColor }
+            }
+          ),
+          /* @__PURE__ */ jsx44("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: label })
+        ] }),
+        /* @__PURE__ */ jsx44("span", { className: "text-heading font-semibold text-default leading-none", children: value })
+      ]
+    }
+  );
+}
+
+// src/components/stats/stat-number.tsx
+import clsx41 from "clsx";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+var sizeStyles6 = {
+  sm: "text-subtitle",
+  md: "text-subtitle-lg",
+  lg: "text-title"
+};
+var weightStyles = {
+  medium: "font-medium",
+  bold: "font-bold"
+};
+function StatNumber({ value, unit, size = "md", weight = "bold", color, className }) {
+  return /* @__PURE__ */ jsxs33(
+    "p",
+    {
+      className: clsx41(sizeStyles6[size], weightStyles[weight], "leading-none", !color && "text-default", className),
+      style: color ? { color } : void 0,
+      children: [
+        value,
+        unit && /* @__PURE__ */ jsx45("span", { className: "ml-1 text-subheading font-medium text-default-secondary", children: unit })
+      ]
+    }
+  );
+}
+
+// src/components/stats/score-value.tsx
+import clsx42 from "clsx";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
+var DEFAULT_SCORE_THRESHOLDS = { danger: 80, warning: 65, neutral: 50 };
+function getScoreTone(score, {
+  direction = "higher-is-worse",
+  thresholds = DEFAULT_SCORE_THRESHOLDS
+} = {}) {
+  const v = direction === "higher-is-better" ? 100 - score : score;
+  if (v >= thresholds.danger) return "danger";
+  if (v >= thresholds.warning) return "warning";
+  if (v >= thresholds.neutral) return "neutral";
+  return "positive";
+}
+var SIZE6 = {
+  sm: "text-body-xs",
+  md: "text-body-sm",
+  lg: "text-subheading-sm",
+  xl: "text-subheading",
+  "2xl": "text-subtitle"
+};
+var WEIGHT = {
+  normal: "font-normal",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var TONE2 = {
+  brand: "text-brand",
+  positive: "text-positive",
+  warning: "text-warning",
+  danger: "text-danger",
+  neutral: "text-default-secondary",
+  default: "text-default"
+};
+function ScoreValue({
+  value,
+  label,
+  size = "md",
+  weight = "bold",
+  tone = "auto",
+  direction = "higher-is-worse",
+  thresholds = DEFAULT_SCORE_THRESHOLDS,
+  className
+}) {
+  const numeric = typeof value === "number" ? value : Number(value);
+  const resolved = tone === "auto" ? Number.isFinite(numeric) ? getScoreTone(numeric, { direction, thresholds }) : "default" : tone;
+  return /* @__PURE__ */ jsxs34("span", { className: clsx42("inline-flex items-baseline gap-1", className), children: [
+    /* @__PURE__ */ jsx46("span", { className: clsx42(SIZE6[size], WEIGHT[weight], TONE2[resolved]), children: value }),
+    label && /* @__PURE__ */ jsx46("span", { className: "text-body-xs text-default-secondary whitespace-nowrap", children: label })
+  ] });
+}
+
+// src/components/stats/tile-grid.tsx
+import clsx43 from "clsx";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var COLUMNS = {
+  sm: {
+    2: "grid-cols-2",
+    3: "grid-cols-2 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4",
+    5: "grid-cols-2 sm:grid-cols-5",
+    6: "grid-cols-2 sm:grid-cols-6"
+  },
+  md: {
+    2: "grid-cols-2",
+    3: "grid-cols-2 md:grid-cols-3",
+    4: "grid-cols-2 md:grid-cols-4",
+    5: "grid-cols-2 md:grid-cols-5",
+    6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-6"
+  },
+  lg: {
+    2: "grid-cols-2",
+    3: "grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-2 lg:grid-cols-4",
+    5: "grid-cols-2 lg:grid-cols-5",
+    6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6"
+  }
+};
+function TileGrid({
+  children,
+  columns = 4,
+  at = "lg",
+  className
+}) {
+  return /* @__PURE__ */ jsx47("div", { className: clsx43("grid gap-3", COLUMNS[at][columns], className), children });
+}
+
+// src/components/charts/chart-tone.ts
+var CHART_TONE = {
+  brand: "var(--color-background-brand-default)",
+  info: "var(--status-info-dot)",
+  positive: "var(--color-background-positive-default)",
+  warning: "var(--color-background-warning-default)",
+  danger: "var(--color-background-danger-default)",
+  neutral: "var(--color-background-neutral-default)"
+};
+var CHART_TRACK = "var(--color-background-default-tertiary)";
+var CHART_SEQUENCE = ["brand", "info", "positive", "warning", "danger", "neutral"];
+function resolveChartColor(color, tone, index = 0) {
+  if (color) return color;
+  if (tone) return CHART_TONE[tone];
+  return CHART_TONE[CHART_SEQUENCE[index % CHART_SEQUENCE.length]];
+}
+
+// src/components/charts/bar-chart.tsx
+import clsx44 from "clsx";
+import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
+var SIZE7 = {
+  sm: { band: 14, gap: 6, label: "text-body-tiny" },
+  md: { band: 20, gap: 8, label: "text-body-xs" },
+  lg: { band: 28, gap: 10, label: "text-body-xs" }
+};
+function BarChart({
+  categories,
+  series,
+  orientation = "horizontal",
+  stacked = false,
+  size = "md",
+  length = 240,
+  showLabels = true,
+  showValues = false,
+  radius = 3,
+  label,
+  className
+}) {
+  const { band, gap, label: labelClass2 } = SIZE7[size];
+  if (categories.length === 0 || series.length === 0) return null;
+  const perCategory = stacked ? band : band * series.length + gap * (series.length - 1);
+  const categoryTotals = categories.map(
+    (_, ci) => stacked ? series.reduce((sum, s) => sum + Math.max(0, s.values[ci] ?? 0), 0) : Math.max(...series.map((s) => Math.max(0, s.values[ci] ?? 0)))
+  );
+  const max = Math.max(...categoryTotals, 1);
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx48(
+    "div",
+    {
+      className: clsx44("flex w-full min-w-0", horizontal ? "flex-col gap-2" : "flex-row items-end gap-3", className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      children: categories.map((category, ci) => {
+        const bars = series.map((s, si) => ({
+          key: s.label,
+          value: Math.max(0, s.values[ci] ?? 0),
+          color: resolveChartColor(s.color, s.tone, si)
+        }));
+        return /* @__PURE__ */ jsxs35(
+          "div",
+          {
+            className: clsx44("flex min-w-0", horizontal ? "flex-col gap-1" : "h-full flex-col justify-end gap-1.5"),
+            style: horizontal ? void 0 : { width: perCategory },
+            children: [
+              showLabels && horizontal && /* @__PURE__ */ jsx48("span", { className: clsx44("truncate text-default-secondary", labelClass2), children: category }),
+              /* @__PURE__ */ jsxs35(
+                "div",
+                {
+                  className: clsx44("flex", horizontal ? "items-center gap-2" : "w-full flex-1 items-end justify-center"),
+                  style: horizontal ? void 0 : { height: length },
+                  children: [
+                    /* @__PURE__ */ jsx48(
+                      "div",
+                      {
+                        className: clsx44("flex min-w-0", stacked ? "gap-0" : ""),
+                        style: horizontal ? { width: length, flexDirection: stacked ? "row" : "column", gap: stacked ? 0 : gap } : {
+                          height: "100%",
+                          width: perCategory,
+                          flexDirection: stacked ? "column-reverse" : "row",
+                          alignItems: "flex-end",
+                          gap: stacked ? 0 : gap
+                        },
+                        children: bars.map((bar) => {
+                          const extent = `${bar.value / max * 100}%`;
+                          return /* @__PURE__ */ jsx48(
+                            "div",
+                            {
+                              title: `${category} \xB7 ${bar.key}: ${bar.value}`,
+                              className: "transition-all",
+                              style: {
+                                backgroundColor: bar.color,
+                                borderRadius: radius,
+                                ...horizontal ? { width: extent, height: stacked ? band : band } : { height: extent, width: stacked ? perCategory : band }
+                              }
+                            },
+                            bar.key
+                          );
+                        })
+                      }
+                    ),
+                    showValues && horizontal && /* @__PURE__ */ jsx48("span", { className: clsx44("shrink-0 tabular-nums text-default-secondary", labelClass2), children: categoryTotals[ci] })
+                  ]
+                }
+              ),
+              showLabels && !horizontal && /* @__PURE__ */ jsx48("span", { className: clsx44("truncate text-center text-default-secondary", labelClass2), children: category })
+            ]
+          },
+          category
+        );
+      })
+    }
+  );
+}
+
+// src/components/charts/donut-chart.tsx
+import clsx45 from "clsx";
+import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+var SIZE8 = {
+  sm: { box: 88, thickness: 10 },
+  md: { box: 128, thickness: 14 },
+  lg: { box: 180, thickness: 20 }
+};
+function DonutChart({
+  segments,
+  size = "md",
+  thickness,
+  centerValue,
+  centerLabel,
+  gap = 2,
+  label,
+  className
+}) {
+  const { box, thickness: presetThickness } = SIZE8[size];
+  const ring = thickness ?? presetThickness;
+  const radius = (box - ring) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+  const visible = segments.filter((s) => s.value > 0);
+  const gapLength = visible.length > 1 ? gap / 360 * circumference : 0;
+  let offset = 0;
+  return /* @__PURE__ */ jsxs36("div", { className: clsx45("relative inline-flex shrink-0 items-center justify-center", className), children: [
+    /* @__PURE__ */ jsxs36(
+      "svg",
+      {
+        width: box,
+        height: box,
+        viewBox: `0 0 ${box} ${box}`,
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        className: "block -rotate-90",
+        children: [
+          /* @__PURE__ */ jsx49("circle", { cx: box / 2, cy: box / 2, r: radius, fill: "none", stroke: CHART_TRACK, strokeWidth: ring }),
+          total > 0 && segments.map((segment, i) => {
+            const fraction = Math.max(0, segment.value) / total;
+            const length = Math.max(0, fraction * circumference - gapLength);
+            const dash = `${length} ${circumference - length}`;
+            const thisOffset = offset;
+            offset += fraction * circumference;
+            if (segment.value <= 0) return null;
+            return /* @__PURE__ */ jsx49(
+              "circle",
+              {
+                cx: box / 2,
+                cy: box / 2,
+                r: radius,
+                fill: "none",
+                stroke: resolveChartColor(segment.color, segment.tone, i),
+                strokeWidth: ring,
+                strokeDasharray: dash,
+                strokeDashoffset: -thisOffset,
+                strokeLinecap: "butt"
+              },
+              segment.label
+            );
+          })
+        ]
+      }
+    ),
+    (centerValue != null || centerLabel != null) && /* @__PURE__ */ jsxs36("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: [
+      centerValue != null && /* @__PURE__ */ jsx49("span", { className: "text-subheading-sm font-bold leading-none text-default", children: centerValue }),
+      centerLabel != null && /* @__PURE__ */ jsx49("span", { className: "mt-0.5 text-body-tiny text-default-secondary", children: centerLabel })
+    ] })
+  ] });
+}
+
+// src/components/charts/radial-gauge.tsx
+import clsx46 from "clsx";
+import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+var SIZE9 = {
+  sm: { box: 72, thickness: 8, value: "text-body-sm" },
+  md: { box: 104, thickness: 11, value: "text-subheading-sm" },
+  lg: { box: 148, thickness: 15, value: "text-subheading" }
+};
+function RadialGauge({
+  value,
+  max = 100,
+  size = "md",
+  tone = "brand",
+  color,
+  thickness,
+  sweep = 270,
+  children,
+  centerLabel,
+  label,
+  className
+}) {
+  const preset = SIZE9[size];
+  const box = preset.box;
+  const ring = thickness ?? preset.thickness;
+  const radius = (box - ring) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const clampedSweep = Math.min(360, Math.max(1, sweep));
+  const arc = clampedSweep / 360 * circumference;
+  const fraction = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+  const stroke = resolveChartColor(color, tone);
+  const rotation = -90 + (360 - clampedSweep) / 2;
+  return /* @__PURE__ */ jsxs37("div", { className: clsx46("relative inline-flex shrink-0 items-center justify-center", className), children: [
+    /* @__PURE__ */ jsxs37(
+      "svg",
+      {
+        width: box,
+        height: box,
+        viewBox: `0 0 ${box} ${box}`,
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        className: "block",
+        style: { transform: `rotate(${rotation}deg)` },
+        children: [
+          /* @__PURE__ */ jsx50(
+            "circle",
+            {
+              cx: box / 2,
+              cy: box / 2,
+              r: radius,
+              fill: "none",
+              stroke: CHART_TRACK,
+              strokeWidth: ring,
+              strokeDasharray: `${arc} ${circumference - arc}`,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx50(
+            "circle",
+            {
+              cx: box / 2,
+              cy: box / 2,
+              r: radius,
+              fill: "none",
+              stroke,
+              strokeWidth: ring,
+              strokeDasharray: `${arc * fraction} ${circumference - arc * fraction}`,
+              strokeLinecap: "round",
+              className: "transition-all"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs37("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: [
+      children === void 0 ? /* @__PURE__ */ jsx50("span", { className: clsx46("font-bold leading-none text-default", preset.value), children: value }) : children,
+      centerLabel != null && /* @__PURE__ */ jsx50("span", { className: "mt-0.5 text-body-tiny text-default-secondary", children: centerLabel })
+    ] })
+  ] });
+}
+
+// src/components/charts/sparkline.tsx
+import { useId } from "react";
+import clsx47 from "clsx";
+import { Fragment as Fragment3, jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+var SIZE10 = {
+  sm: { width: 80, height: 24 },
+  md: { width: 120, height: 36 },
+  lg: { width: 200, height: 56 }
+};
+function Sparkline({
+  data,
+  variant = "line",
+  tone = "brand",
+  color,
+  size = "md",
+  width,
+  height,
+  strokeWidth = 1.5,
+  showEndDot = false,
+  label,
+  className
+}) {
+  const gradientId = useId();
+  if (data.length < 2) return null;
+  const w = width ?? SIZE10[size].width;
+  const h = height ?? SIZE10[size].height;
+  const stroke = resolveChartColor(color, tone);
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = strokeWidth;
+  const innerH = h - pad * 2;
+  const innerW = w - pad * 2;
+  const coords = data.map((v, i) => ({
+    x: pad + i / (data.length - 1) * innerW,
+    y: pad + innerH - (v - min) / range * innerH
+  }));
+  const points = coords.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
+  const areaPath = `M ${points.split(" ").join(" L ")} L ${coords[coords.length - 1].x.toFixed(2)},${h} L ${coords[0].x.toFixed(2)},${h} Z`;
+  const last = coords[coords.length - 1];
+  return /* @__PURE__ */ jsxs38(
+    "svg",
+    {
+      width: w,
+      height: h,
+      viewBox: `0 0 ${w} ${h}`,
+      fill: "none",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: clsx47("block shrink-0", className),
+      children: [
+        variant === "area" && /* @__PURE__ */ jsxs38(Fragment3, { children: [
+          /* @__PURE__ */ jsx51("defs", { children: /* @__PURE__ */ jsxs38("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx51("stop", { offset: "0%", stopColor: stroke, stopOpacity: 0.24 }),
+            /* @__PURE__ */ jsx51("stop", { offset: "100%", stopColor: stroke, stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx51("path", { d: areaPath, fill: `url(#${gradientId})` })
+        ] }),
+        /* @__PURE__ */ jsx51(
+          "polyline",
+          {
+            points,
+            stroke,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none"
+          }
+        ),
+        showEndDot && /* @__PURE__ */ jsx51("circle", { cx: last.x, cy: last.y, r: strokeWidth * 1.6, fill: stroke, stroke: CHART_TONE.neutral, strokeWidth: 0 })
+      ]
+    }
+  );
+}
+
+// src/components/charts/mini-bar-chart.tsx
+import clsx48 from "clsx";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var SIZE11 = {
+  sm: { width: 80, height: 32, gap: 2 },
+  md: { width: 120, height: 48, gap: 3 },
+  lg: { width: 200, height: 72, gap: 4 }
+};
+function MiniBarChart({
+  bars,
+  tone = "brand",
+  color,
+  restColor = CHART_TRACK,
+  highlight = -1,
+  size = "md",
+  width,
+  height,
+  gap,
+  orientation = "vertical",
+  radius = 2,
+  label,
+  className
+}) {
+  if (bars.length === 0) return null;
+  const preset = SIZE11[size];
+  const w = width ?? preset.width;
+  const h = height ?? preset.height;
+  const g = gap ?? preset.gap;
+  const fill = resolveChartColor(color, tone);
+  const highlighted = new Set(
+    (Array.isArray(highlight) ? highlight : [highlight]).map((i) => i < 0 ? bars.length + i : i)
+  );
+  const max = Math.max(...bars) || 1;
+  const vertical = orientation === "vertical";
+  const span = vertical ? w : h;
+  const extent = vertical ? h : w;
+  const barThickness = (span - g * (bars.length - 1)) / bars.length;
+  return /* @__PURE__ */ jsx52(
+    "svg",
+    {
+      width: w,
+      height: h,
+      viewBox: `0 0 ${w} ${h}`,
+      fill: "none",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: clsx48("block shrink-0", className),
+      children: bars.map((v, i) => {
+        const magnitude = Math.max(2, v / max * extent);
+        const offset = i * (barThickness + g);
+        return /* @__PURE__ */ jsx52(
+          "rect",
+          {
+            x: (vertical ? offset : 0).toFixed(2),
+            y: (vertical ? extent - magnitude : offset).toFixed(2),
+            width: (vertical ? barThickness : magnitude).toFixed(2),
+            height: (vertical ? magnitude : barThickness).toFixed(2),
+            fill: highlighted.has(i) ? fill : restColor,
+            rx: radius
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/components/charts/chart-legend.tsx
+import clsx50 from "clsx";
+
+// src/components/charts/legend-dot.tsx
+import clsx49 from "clsx";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var SHAPE = {
+  dot: { sm: "size-1.5 rounded-full", md: "size-2 rounded-full" },
+  square: { sm: "size-1.5 rounded-[2px]", md: "size-2 rounded-[3px]" },
+  line: { sm: "h-0.5 w-3 rounded-full", md: "h-0.5 w-4 rounded-full" }
+};
+function LegendDot({ tone, color, size = "md", shape = "dot", className }) {
+  return /* @__PURE__ */ jsx53(
+    "span",
+    {
+      className: clsx49("inline-block shrink-0", SHAPE[shape][size], className),
+      style: { backgroundColor: resolveChartColor(color, tone) },
+      "aria-hidden": true
+    }
+  );
+}
+
+// src/components/charts/chart-legend.tsx
+import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
+function ChartLegend({
+  items,
+  orientation = "vertical",
+  size = "md",
+  shape = "dot",
+  className
+}) {
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx54(
+    "div",
+    {
+      className: clsx50(
+        horizontal ? "flex flex-wrap items-center gap-x-4 gap-y-2" : "flex flex-col gap-3",
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ jsxs39(
+        "div",
+        {
+          className: clsx50("flex items-center gap-2", horizontal ? "min-w-0" : "justify-between"),
+          children: [
+            /* @__PURE__ */ jsxs39("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx54(LegendDot, { color: resolveChartColor(item.color, item.tone, i), size, shape }),
+              /* @__PURE__ */ jsx54("span", { className: "truncate text-body-xs text-default-secondary", children: item.label })
+            ] }),
+            item.count != null && /* @__PURE__ */ jsx54("span", { className: "shrink-0 text-body-xs font-semibold tabular-nums text-default", children: item.count })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+}
+
+// src/components/charts/trend-label.tsx
+import clsx51 from "clsx";
+import { LuTrendingDown, LuTrendingUp } from "react-icons/lu";
+import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
+var SIZE12 = {
+  sm: "text-body-xs",
+  md: "text-body-sm",
+  lg: "text-subheading-sm"
+};
+var ICON_SIZE = {
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4"
+};
+var weightBySize = {
+  sm: "semibold",
+  md: "semibold",
+  lg: "bold"
+};
+var WEIGHT2 = {
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+function TrendLabel({
+  value,
+  suffix = "%",
+  size = "md",
+  weight,
+  direction = "up-is-good",
+  showArrow = true,
+  color,
+  className
+}) {
+  const rising = value > 0;
+  const flat = value === 0;
+  const good = direction === "up-is-good" ? rising : !rising;
+  const Arrow = rising ? LuTrendingUp : LuTrendingDown;
+  return /* @__PURE__ */ jsxs40(
+    "span",
+    {
+      className: clsx51(
+        "inline-flex items-center gap-1 whitespace-nowrap",
+        SIZE12[size],
+        WEIGHT2[weight ?? weightBySize[size]],
+        !color && (flat ? "text-default-secondary" : good ? "text-positive" : "text-danger"),
+        className
+      ),
+      style: color ? { color } : void 0,
+      children: [
+        showArrow && !flat && /* @__PURE__ */ jsx55(Arrow, { className: clsx51("shrink-0", ICON_SIZE[size]), "aria-hidden": true }),
+        rising ? "+" : "",
+        value,
+        suffix
+      ]
+    }
+  );
+}
+
+// src/components/lists/list-row.tsx
+import clsx52 from "clsx";
+import { jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
+var DENSITY = {
+  default: {
+    pad: "py-4",
+    gap: "gap-3",
+    title: "text-body-sm font-semibold text-default",
+    description: "text-body-xs text-default-secondary"
+  },
+  compact: {
+    pad: "py-2.5",
+    gap: "gap-2",
+    title: "text-body-xs font-semibold text-default",
+    description: "text-body-tiny text-default-secondary"
+  }
+};
+var DIVIDER = {
+  none: "",
+  top: "border-t border-default",
+  bottom: "border-b border-default"
+};
+function ListRow({
+  leading,
+  title,
+  titleMeta,
+  description,
+  meta,
+  trailing,
+  footer,
+  density = "default",
+  divider = "none",
+  as: Tag = "div",
+  onClick,
+  className
+}) {
+  const d = DENSITY[density];
+  const hasTitleLine = Boolean(leading || title != null || titleMeta || meta);
+  return /* @__PURE__ */ jsxs41(
+    Tag,
+    {
+      className: clsx52(
+        "flex w-full items-start",
+        d.pad,
+        DIVIDER[divider],
+        onClick && "cursor-pointer rounded-lg transition-colors hover:bg-default-secondary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand",
+        className
+      ),
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs41("div", { className: clsx52("flex min-w-0 flex-1 flex-col", d.gap), children: [
+          hasTitleLine && /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs41("div", { className: "flex min-w-0 items-center gap-2", children: [
+              leading,
+              title != null && /* @__PURE__ */ jsx56("span", { className: clsx52("truncate", d.title), children: title }),
+              titleMeta && /* @__PURE__ */ jsx56("span", { className: "shrink-0", children: titleMeta })
+            ] }),
+            meta && /* @__PURE__ */ jsx56("span", { className: "shrink-0", children: meta })
+          ] }),
+          description && /* @__PURE__ */ jsx56("p", { className: d.description, children: description }),
+          footer
+        ] }),
+        trailing && /* @__PURE__ */ jsx56("div", { className: "ml-3 flex shrink-0 items-center self-center", children: trailing })
+      ]
+    }
+  );
+}
+
+// src/components/lists/file-row.tsx
+import clsx53 from "clsx";
+import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
+function FileTypeBadge({ type }) {
+  return /* @__PURE__ */ jsx57("span", { className: "flex size-[34px] shrink-0 items-center justify-center rounded-md bg-brand-tertiary text-body-tiny font-semibold text-brand", children: type });
+}
+function FileRow({
+  name,
+  detail,
+  fileType,
+  leading,
+  onDownload,
+  downloadLabel = "Download",
+  actions,
+  className
+}) {
+  const lead = leading ?? (fileType ? /* @__PURE__ */ jsx57(FileTypeBadge, { type: fileType }) : null);
+  return /* @__PURE__ */ jsxs42(
+    "div",
+    {
+      className: clsx53(
+        "flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5",
+        className
+      ),
+      children: [
+        lead,
+        /* @__PURE__ */ jsxs42("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx57("span", { className: "truncate text-body-sm font-medium text-default", children: name }),
+          detail && /* @__PURE__ */ jsx57("span", { className: "text-body-xs text-default-secondary", children: detail })
+        ] }),
+        (onDownload || actions) && /* @__PURE__ */ jsxs42("div", { className: "flex shrink-0 items-center gap-3", children: [
+          onDownload && /* @__PURE__ */ jsx57(
+            "button",
+            {
+              type: "button",
+              onClick: onDownload,
+              className: "text-body-xs font-medium text-brand hover:underline",
+              children: downloadLabel
+            }
+          ),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/lists/scored-row.tsx
+import clsx54 from "clsx";
+import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
+var GAP2 = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-5",
+  xl: "gap-12"
+};
+var ALIGN = {
+  center: "items-center",
+  end: "items-end"
+};
+function ScoredRow({
+  leading,
+  title,
+  subtitle,
+  aside,
+  meter,
+  trailing,
+  titleWidth,
+  asideWidth,
+  meterWidth,
+  trailingWidth,
+  gap = "md",
+  leadingGap,
+  align = "center",
+  className
+}) {
+  return /* @__PURE__ */ jsxs43("div", { className: clsx54("flex w-full", ALIGN[align], GAP2[gap], className), children: [
+    /* @__PURE__ */ jsxs43(
+      "div",
+      {
+        className: clsx54(
+          "flex min-w-0",
+          ALIGN[align],
+          GAP2[leadingGap ?? gap],
+          titleWidth ? "shrink-0" : "flex-1"
+        ),
+        style: titleWidth ? { width: titleWidth } : void 0,
+        children: [
+          leading,
+          /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx58("p", { className: "truncate text-body-sm font-medium leading-none text-default", children: title }),
+            subtitle && /* @__PURE__ */ jsx58("p", { className: "mt-0.5 truncate text-body-xs text-default-secondary", children: subtitle })
+          ] })
+        ]
+      }
+    ),
+    aside && /* @__PURE__ */ jsx58(
+      "div",
+      {
+        className: clsx54("min-w-0", asideWidth ? "shrink-0" : "flex-1"),
+        style: asideWidth ? { width: asideWidth } : void 0,
+        children: aside
+      }
+    ),
+    meter && /* @__PURE__ */ jsx58(
+      "div",
+      {
+        className: clsx54("min-w-0", meterWidth ? "shrink-0" : "flex-1"),
+        style: meterWidth ? { width: meterWidth } : void 0,
+        children: meter
+      }
+    ),
+    trailing && /* @__PURE__ */ jsx58("div", { className: "shrink-0 text-right", style: trailingWidth ? { width: trailingWidth } : void 0, children: trailing })
+  ] });
+}
+
+// src/components/lists/ranked-row.tsx
+import clsx55 from "clsx";
+
+// src/components/feedback/progress-bar.tsx
+import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
+var SIZE13 = {
+  xs: "h-1",
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-3"
+};
+var FILL = {
+  brand: "bg-brand",
+  positive: "bg-positive",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  neutral: "bg-neutral"
+};
+function ProgressBar({
+  value,
+  tone = "brand",
+  size = "sm",
+  label,
+  showValue = false,
+  radius,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const clamped = Math.min(100, Math.max(0, value));
+  const rounded = radius ? void 0 : "rounded-full";
+  const track = /* @__PURE__ */ jsx59(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label ? void 0 : ariaLabel,
+      className: cn("w-full overflow-hidden bg-default-tertiary", SIZE13[size], rounded, className),
+      style: radius ? { borderRadius: radius } : void 0,
+      children: /* @__PURE__ */ jsx59(
+        "div",
+        {
+          className: cn("h-full transition-all", rounded, FILL[tone]),
+          style: { width: `${clamped}%`, ...radius ? { borderRadius: radius } : void 0 }
+        }
+      )
+    }
+  );
+  if (!label && !showValue) return track;
+  return /* @__PURE__ */ jsxs44("div", { children: [
+    /* @__PURE__ */ jsxs44("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
+      label && /* @__PURE__ */ jsx59("span", { className: "text-body-xs text-default-secondary", children: label }),
+      showValue && /* @__PURE__ */ jsxs44("span", { className: "ml-auto text-body-xs font-medium tabular-nums text-default", children: [
+        Math.round(clamped),
+        "%"
+      ] })
+    ] }),
+    track
+  ] });
+}
+
+// src/components/lists/ranked-row.tsx
+import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
+function RankedRow({
+  rank,
+  name,
+  sublabel,
+  score,
+  tone = "auto",
+  direction = "higher-is-worse",
+  scoreSize = "md",
+  scoreWeight = "bold",
+  className
+}) {
+  const resolved = tone === "auto" ? getScoreTone(score, { direction }) : tone;
+  return /* @__PURE__ */ jsxs45("div", { className: clsx55("flex w-full shrink-0 flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs45("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsxs45("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+        rank !== void 0 && /* @__PURE__ */ jsx60("p", { className: "w-[14px] shrink-0 text-body-xs font-bold text-default-secondary", children: rank }),
+        /* @__PURE__ */ jsxs45("div", { className: "flex min-w-0 flex-col gap-px", children: [
+          /* @__PURE__ */ jsx60("p", { className: "truncate text-body-sm font-medium leading-none text-default", children: name }),
+          sublabel && /* @__PURE__ */ jsx60("p", { className: "text-body-tiny text-default-tertiary", children: sublabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx60(
+        ScoreValue,
+        {
+          value: score,
+          size: scoreSize,
+          weight: scoreWeight,
+          tone: resolved,
+          className: "ml-2 shrink-0"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx60(ProgressBar, { value: score, tone: resolved, "aria-label": `${name} score` })
+  ] });
+}
+
+// src/components/lists/icon-text-row.tsx
+import clsx56 from "clsx";
+import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
+function IconTextRow({ icon, title, detail, className }) {
+  return /* @__PURE__ */ jsxs46("div", { className: clsx56("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ jsx61("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-brand-tertiary text-brand", children: icon }),
+    /* @__PURE__ */ jsxs46("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx61("p", { className: "text-body-sm font-semibold text-default", children: title }),
+      /* @__PURE__ */ jsx61("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: detail })
+    ] })
+  ] });
+}
+
+// src/components/lists/checklist-row.tsx
+import clsx57 from "clsx";
+import { LuCheck as LuCheck5 } from "react-icons/lu";
+import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
+function ChecklistRow({ label, state, className }) {
+  return /* @__PURE__ */ jsxs47("li", { className: clsx57("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx62("span", { className: "flex size-5 shrink-0 items-center justify-center", children: state === "done" ? /* @__PURE__ */ jsx62(LuCheck5, { className: "size-4 text-positive", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ jsx62(
+      "span",
+      {
+        className: clsx57(
+          "size-3.5 rounded-full border-2",
+          state === "active" ? "animate-pulse border-brand-emphasis border-t-transparent" : "border-disabled"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx62(
+      "span",
+      {
+        className: clsx57(
+          "text-body-sm",
+          state === "pending" ? "text-default-tertiary" : "font-semibold text-default"
+        ),
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/components/lists/numbered-steps-list.tsx
+import clsx58 from "clsx";
+import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
+function NumberedStepsList({ steps, className }) {
+  return /* @__PURE__ */ jsx63("ol", { className: clsx58("flex flex-col gap-1.5", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs48("li", { className: "flex items-start gap-2 text-[12px] text-default", children: [
+    /* @__PURE__ */ jsx63("span", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-brand-tertiary text-[9px] font-bold text-brand", children: i + 1 }),
+    step
+  ] }, i)) });
+}
+
+// src/components/lists/meta-field.tsx
+import clsx59 from "clsx";
+import { jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
+function MetaField({
+  label,
+  value,
+  detail,
+  layout = "stacked",
+  className
+}) {
+  const shown = value === null || value === void 0 || value === "" ? "\u2014" : value;
+  if (layout === "inline") {
+    return /* @__PURE__ */ jsxs49("div", { className: clsx59("flex gap-3 text-body-xs", className), children: [
+      /* @__PURE__ */ jsx64("span", { className: "w-[120px] shrink-0 text-default-secondary", children: label }),
+      /* @__PURE__ */ jsx64("span", { className: "min-w-0 flex-1 text-default", children: shown })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs49("div", { className: clsx59("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ jsx64("p", { className: "text-body-tiny font-medium text-default-secondary", children: label }),
+    /* @__PURE__ */ jsx64("p", { className: "text-body-sm font-medium text-default", children: shown }),
+    detail && /* @__PURE__ */ jsx64("p", { className: "text-body-xs text-default-secondary", children: detail })
+  ] });
+}
+function MetaFieldGrid({ children, className }) {
+  return /* @__PURE__ */ jsx64("div", { className: clsx59("flex flex-wrap gap-x-4 gap-y-3.5", className), children });
+}
+
+// src/components/lists/checked-group-list.tsx
+import clsx60 from "clsx";
+import { LuCheck as LuCheck6 } from "react-icons/lu";
+import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
+var COLUMNS2 = {
+  1: "columns-1",
+  2: "columns-2",
+  3: "columns-3"
+};
+function CheckedGroupList({
+  groups,
+  columns = 2,
+  icon,
+  emptyLabel = "None.",
+  className
+}) {
+  if (groups.length === 0) {
+    return /* @__PURE__ */ jsx65("p", { className: clsx60("text-body-xs text-default-secondary", className), children: emptyLabel });
+  }
+  const glyph = icon === void 0 ? /* @__PURE__ */ jsx65(LuCheck6, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true }) : icon;
+  return /* @__PURE__ */ jsx65("div", { className: clsx60(COLUMNS2[columns], "gap-x-6", className), children: groups.map((group) => /* @__PURE__ */ jsxs50("div", { className: "mb-5 break-inside-avoid last:mb-0", children: [
+    /* @__PURE__ */ jsx65("p", { className: "mb-2 text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: group.label }),
+    /* @__PURE__ */ jsx65("ul", { className: "space-y-1.5", children: group.items.map((item) => /* @__PURE__ */ jsxs50("li", { className: "flex items-center gap-2 text-body-xs text-default", children: [
+      glyph && /* @__PURE__ */ jsx65("span", { className: "shrink-0", children: glyph }),
+      item
+    ] }, item)) })
+  ] }, group.label)) });
+}
+
+// src/components/lists/data-table.tsx
+import clsx61 from "clsx";
+import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
+var DENSITY2 = {
+  default: {
+    headerCell: "px-4 py-3",
+    headerText: "text-body-xs font-medium text-default-secondary whitespace-nowrap",
+    bodyCell: "px-4 py-[14px]"
+  },
+  compact: {
+    headerCell: "px-3 py-2",
+    headerText: "text-body-tiny font-semibold uppercase tracking-[0.4px] text-default-secondary whitespace-nowrap",
+    bodyCell: "px-3 py-2 text-body-xs text-default"
+  }
+};
+var ALIGN2 = {
+  center: "align-middle",
+  top: "align-top"
+};
+function DataTable({
+  columns,
+  rows,
+  getRowKey,
+  density = "default",
+  align = "center",
+  onRowClick,
+  emptyLabel,
+  className
+}) {
+  const d = DENSITY2[density];
+  const minWidth = columns.length ? `calc(${columns.map((c) => c.width).join(" + ")})` : void 0;
+  return /* @__PURE__ */ jsx66("div", { className: clsx61("overflow-x-auto rounded-xl border border-default bg-default", className), children: /* @__PURE__ */ jsxs51("table", { className: "w-full table-fixed border-collapse text-left", style: { minWidth }, children: [
+    /* @__PURE__ */ jsx66("colgroup", { children: columns.map((col) => (
+      // A grow column gets no width, so table-fixed hands it the leftover space.
+      // Its floor is already counted in the table's min-width.
+      /* @__PURE__ */ jsx66("col", { style: col.grow ? void 0 : { width: col.width } }, col.key)
+    )) }),
+    /* @__PURE__ */ jsx66("thead", { children: /* @__PURE__ */ jsx66("tr", { className: "bg-default-secondary", children: columns.map((col) => /* @__PURE__ */ jsx66("th", { scope: "col", className: clsx61("overflow-hidden", d.headerCell, d.headerText), children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ jsx66("tbody", { children: rows.length === 0 ? emptyLabel && /* @__PURE__ */ jsx66("tr", { children: /* @__PURE__ */ jsx66(
+      "td",
+      {
+        colSpan: columns.length,
+        className: clsx61(d.bodyCell, "text-center text-body-sm text-default-secondary"),
+        children: emptyLabel
+      }
+    ) }) : rows.map((row, i) => /* @__PURE__ */ jsx66(
+      "tr",
+      {
+        className: clsx61(
+          "transition-colors hover:bg-default-secondary/50",
+          i > 0 && "border-t border-default",
+          // outline, not ring: `ring-*` compiles to box-shadow, which browsers
+          // do not paint on a <tr> under border-collapse: collapse.
+          onRowClick && "cursor-pointer outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand"
+        ),
+        tabIndex: onRowClick ? 0 : void 0,
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
+        onKeyDown: onRowClick ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRowClick(row);
+          }
+        } : void 0,
+        children: columns.map((col) => /* @__PURE__ */ jsx66("td", { className: clsx61("overflow-hidden", d.bodyCell, ALIGN2[align]), children: col.render(row) }, col.key))
+      },
+      getRowKey(row, i)
+    )) })
+  ] }) });
+}
+function TableCellLeadText({ primary, secondary, size = "md", className }) {
+  return /* @__PURE__ */ jsxs51("div", { className: clsx61("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ jsx66(
+      "span",
+      {
+        className: clsx61(
+          "font-medium leading-snug text-default",
+          size === "sm" ? "text-body-xs" : "text-body-sm"
+        ),
+        children: primary
+      }
+    ),
+    secondary && /* @__PURE__ */ jsx66(
+      "span",
+      {
+        className: clsx61(
+          "font-normal leading-tight text-default-secondary",
+          size === "sm" ? "text-body-tiny" : "text-body-xs"
+        ),
+        children: secondary
+      }
+    )
+  ] });
+}
+function TableCellText({
+  children,
+  muted = true,
+  size = "md",
+  truncate = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx66(
+    "span",
+    {
+      className: clsx61(
+        "font-normal leading-snug",
+        size === "sm" ? "text-body-tiny" : "text-body-xs",
+        truncate ? "block truncate" : "whitespace-nowrap",
+        muted ? "text-default-secondary" : "text-default",
+        className
+      ),
+      children
+    }
+  );
+}
+function TableCellBadge({ label, className }) {
+  return /* @__PURE__ */ jsx66(
+    "span",
+    {
+      className: clsx61(
+        "inline-flex items-center rounded-md border border-default bg-default-secondary px-2 py-0.5 text-body-tiny font-medium text-default-secondary whitespace-nowrap",
+        className
+      ),
+      children: label
+    }
+  );
+}
+function TableCellProgress({
+  percent,
+  tone = "brand",
+  size = "md",
+  className
+}) {
+  const clamped = Math.min(100, Math.max(0, percent));
+  return /* @__PURE__ */ jsxs51("div", { className: clsx61("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsx66(ProgressBar, { value: clamped, tone, size: "sm", className: "w-16", "aria-label": `${clamped}%` }),
+    /* @__PURE__ */ jsxs51(
+      "span",
+      {
+        className: clsx61(
+          "leading-none text-default-secondary",
+          size === "sm" ? "text-[10px]" : "text-body-tiny"
+        ),
+        children: [
+          percent,
+          "%"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/feedback/inline-alert.tsx
+import clsx62 from "clsx";
+import { LuCircleCheckBig as LuCircleCheckBig2, LuInfo as LuInfo2, LuTriangleAlert as LuTriangleAlert2 } from "react-icons/lu";
+import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
+var toneStyles3 = {
+  info: "border-brand-tertiary bg-brand-tertiary text-brand",
+  warning: "border-warning-tertiary bg-warning-tertiary text-warning",
+  danger: "border-danger-tertiary bg-danger-tertiary text-danger",
+  positive: "border-positive-tertiary bg-positive-tertiary text-positive"
+};
+var toneIcons = {
+  info: /* @__PURE__ */ jsx67(LuInfo2, { className: "size-4" }),
+  warning: /* @__PURE__ */ jsx67(LuTriangleAlert2, { className: "size-4" }),
+  danger: /* @__PURE__ */ jsx67(LuTriangleAlert2, { className: "size-4" }),
+  positive: /* @__PURE__ */ jsx67(LuCircleCheckBig2, { className: "size-4" })
+};
+function InlineAlert({ tone, children, icon, className }) {
+  const glyph = icon === void 0 ? toneIcons[tone] : icon;
+  return /* @__PURE__ */ jsxs52(
+    "div",
+    {
+      role: tone === "danger" ? "alert" : "status",
+      className: clsx62(
+        "flex items-start gap-2.5 rounded-xl border p-3.5 text-body-xs",
+        toneStyles3[tone],
+        className
+      ),
+      children: [
+        glyph && /* @__PURE__ */ jsx67("span", { className: "mt-px shrink-0", children: glyph }),
+        /* @__PURE__ */ jsx67("div", { className: "min-w-0", children })
+      ]
+    }
+  );
+}
+
+// src/components/feedback/empty-state.tsx
+import clsx63 from "clsx";
+import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
+var SIZES = {
+  sm: "py-8",
+  md: "py-12",
+  lg: "py-16"
+};
+var TONES = {
+  empty: "text-default-secondary",
+  loading: "text-default-secondary",
+  error: "text-danger"
+};
+function EmptyState({
+  message,
+  variant = "empty",
+  size = "sm",
+  icon,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs53(
+    "div",
+    {
+      className: clsx63(
+        "flex flex-col items-center justify-center gap-2 px-4 text-center text-body-sm",
+        SIZES[size],
+        TONES[variant],
+        className
+      ),
+      "aria-live": variant === "empty" ? void 0 : "polite",
+      children: [
+        icon && /* @__PURE__ */ jsx68("span", { className: "text-default-tertiary", children: icon }),
+        /* @__PURE__ */ jsx68("p", { children: message }),
+        action
+      ]
+    }
+  );
+}
+
+// src/components/forms/password-input.tsx
+import { forwardRef as forwardRef5, useState as useState5 } from "react";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+import { jsx as jsx69 } from "react/jsx-runtime";
+var PasswordInput = forwardRef5(function PasswordInput2(props, ref) {
+  const [visible, setVisible] = useState5(false);
+  return /* @__PURE__ */ jsx69(
+    Input,
+    {
+      ref,
+      ...props,
+      type: visible ? "text" : "password",
+      trailingAction: /* @__PURE__ */ jsx69(
+        "button",
+        {
+          type: "button",
+          "aria-label": visible ? "Hide password" : "Show password",
+          onClick: () => setVisible((v) => !v),
+          className: "flex items-center justify-center rounded transition-colors hover:text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand",
+          children: visible ? /* @__PURE__ */ jsx69(LuEyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx69(LuEye, { className: "size-4" })
+        }
+      )
+    }
+  );
+});
+
+// src/components/ai/ai-chat-bar.tsx
+import clsx64 from "clsx";
+import { LuArrowRight as LuArrowRight2, LuSearch } from "react-icons/lu";
+import { jsx as jsx70, jsxs as jsxs54 } from "react/jsx-runtime";
+function AIChatBar({
+  placeholder = "Ask Intelligence about any entity, supplier, or risk\u2026",
+  className
+}) {
+  return /* @__PURE__ */ jsxs54(
+    "div",
+    {
+      className: clsx64(
+        "flex h-16 items-center gap-3 rounded-2xl border border-default bg-default px-6 shadow-panel",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx70("span", { className: "shrink-0 text-icon-default-secondary", children: /* @__PURE__ */ jsx70(LuSearch, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx70("p", { className: "flex-1 text-body-sm text-default-tertiary truncate", children: placeholder }),
+        /* @__PURE__ */ jsxs54(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex shrink-0 items-center gap-2 rounded-xl bg-brand px-4 py-3 text-body-sm font-semibold text-brand-on-brand hover:bg-brand-hover transition-colors",
+            children: [
+              "Ask",
+              /* @__PURE__ */ jsx70(LuArrowRight2, { className: "size-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ai/ai-suggestion-chip.tsx
+import clsx65 from "clsx";
+import { LuArrowRight as LuArrowRight3, LuCpu } from "react-icons/lu";
+import { jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
+function AISuggestionChip({ prompt, onClick, className }) {
+  return /* @__PURE__ */ jsxs55(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: clsx65(
+        "flex h-12 w-full items-center gap-3 rounded-xl border border-default bg-default px-3 text-left hover:bg-default-hover transition-colors",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx71("span", { className: "shrink-0 text-icon-brand", children: /* @__PURE__ */ jsx71(LuCpu, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx71("span", { className: "flex-1 text-body-sm text-default truncate", children: prompt }),
+        /* @__PURE__ */ jsx71("span", { className: "shrink-0 text-icon-default-secondary", children: /* @__PURE__ */ jsx71(LuArrowRight3, { className: "size-3.5", strokeWidth: 2.5 }) })
+      ]
+    }
+  );
+}
+
+// src/components/ai/quick-actions-bar.tsx
+import clsx66 from "clsx";
+import { jsx as jsx72 } from "react/jsx-runtime";
+function QuickActionsBar({ actions, active, onSelect, className }) {
+  return /* @__PURE__ */ jsx72("div", { className: clsx66("flex items-center gap-3 flex-wrap", className), children: actions.map((action) => /* @__PURE__ */ jsx72(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect?.(action.value),
+      className: "focus:outline-none",
+      children: /* @__PURE__ */ jsx72(
+        TagPill,
+        {
+          label: action.label,
+          tone: active === action.value ? "brand" : "default"
+        }
+      )
+    },
+    action.value
+  )) });
+}
+
+// src/components/decorative/aurora-backdrop.tsx
+import { jsx as jsx73, jsxs as jsxs56 } from "react/jsx-runtime";
+function AuroraBackdrop() {
+  return /* @__PURE__ */ jsxs56("div", { className: "pointer-events-none absolute inset-0", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx73("div", { className: "absolute -left-24 -top-28", style: { width: 380, height: 380, background: "radial-gradient(ellipse, rgba(249,133,133,0.45) 0%, transparent 70%)" } }),
+    /* @__PURE__ */ jsx73("div", { className: "absolute -top-24 right-[-4%]", style: { width: 320, height: 320, background: "radial-gradient(ellipse, rgba(254,160,160,0.4) 0%, transparent 70%)" } }),
+    /* @__PURE__ */ jsx73("div", { className: "absolute bottom-[-10%] right-[14%]", style: { width: 420, height: 420, background: "radial-gradient(ellipse, rgba(196,181,253,0.3) 0%, transparent 70%)" } }),
+    /* @__PURE__ */ jsx73("div", { className: "absolute bottom-[-6%] left-[4%]", style: { width: 280, height: 280, background: "radial-gradient(ellipse, rgba(147,197,253,0.25) 0%, transparent 70%)" } }),
+    /* @__PURE__ */ jsx73("div", { className: "absolute left-[20%] top-[30%]", style: { width: 240, height: 240, background: "radial-gradient(ellipse, rgba(173,216,255,0.18) 0%, transparent 70%)" } })
+  ] });
+}
+
+// src/components/icons/solid.tsx
+import { jsx as jsx74 } from "react/jsx-runtime";
+function solid(path, displayName) {
+  const Component = ({ className }) => /* @__PURE__ */ jsx74("svg", { viewBox: "0 0 20 20", fill: "currentColor", className, "aria-hidden": "true", children: /* @__PURE__ */ jsx74("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" }) });
+  Component.displayName = displayName;
+  return Component;
+}
+var SolidAlertTriangle = solid(
+  "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+  "SolidAlertTriangle"
+);
+var SolidShieldCheck = solid(
+  "M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zm1.414 7.349a1 1 0 00-1.414-1.414L8.5 9.379l-.793-.793a1 1 0 00-1.414 1.414l1.5 1.5a1 1 0 001.414 0l2.207-2.207z",
+  "SolidShieldCheck"
+);
+var SolidGlobe = solid(
+  "M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z",
+  "SolidGlobe"
+);
+var SolidMapPin = solid(
+  "M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z",
+  "SolidMapPin"
+);
+var SolidClock = solid(
+  "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z",
+  "SolidClock"
+);
+var SolidArrowRight = solid(
+  "M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z",
+  "SolidArrowRight"
+);
+var SolidInfoCircle = solid(
+  "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+  "SolidInfoCircle"
+);
+var SolidCheck = solid(
+  "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+  "SolidCheck"
+);
+function SolidChartBar({ className }) {
+  return /* @__PURE__ */ jsx74("svg", { viewBox: "0 0 20 20", fill: "currentColor", className, "aria-hidden": "true", children: /* @__PURE__ */ jsx74("path", { d: "M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" }) });
+}
 export {
+  AIChatBar,
+  AISuggestionChip,
+  AuroraBackdrop,
   Avatar,
   AvatarBlock,
   AvatarGroup,
+  Badge,
+  BarChart,
   Button,
   ButtonGroup,
+  CHART_SEQUENCE,
+  CHART_TONE,
+  CHART_TRACK,
+  Card,
+  CardAction,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChartLegend,
+  CheckIndicator,
+  Checkbox,
+  CheckedGroupList,
+  ChecklistRow,
+  ConfirmDialog,
+  CountBadge,
+  DEFAULT_SCORE_THRESHOLDS,
   DataTable,
-  DocumentRow,
+  DatePicker,
+  DonutChart,
+  Drawer,
+  DropdownMenu,
+  EmptyState,
+  EntityIconBadge,
+  EyebrowLabel,
   FileDropZone,
+  FileRow,
+  FilterBar,
   FormCard,
   FormCardFooter,
   FormCardHeader,
   IconButton,
+  IconTextRow,
+  InlineAlert,
   Input,
-  MetricCard,
+  LegendDot,
+  ListRow,
+  MetaField,
+  MetaFieldGrid,
+  MiniBarChart,
   Modal,
+  ModalBody,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
   MultiSelectCard,
   NavItem,
-  Panel,
+  NoteConfirmModal,
+  NumberedStepsList,
+  OVERLAY_SCRIM,
+  PageHeading,
+  PageToolbar,
+  PasswordInput,
+  ProgressBar,
+  QuickActionsBar,
   ROLE_COMBO_OPTIONS,
+  RadialGauge,
+  RankedRow,
   RoleBadge,
   RoleComboBox,
-  SectionHeading,
+  ScoreValue,
+  ScoredRow,
+  SegmentedControl,
   Select,
-  SentimentBadge,
-  SeverityBadge,
+  SolidAlertTriangle,
+  SolidArrowRight,
+  SolidChartBar,
+  SolidCheck,
+  SolidClock,
+  SolidGlobe,
+  SolidInfoCircle,
+  SolidMapPin,
+  SolidShieldCheck,
+  Sparkline,
+  StatNumber,
   StatTile,
+  StatusBadge,
+  StatusChip,
+  StatusDot,
   Stepper,
   TableCellBadge,
   TableCellLeadText,
   TableCellProgress,
-  TableCellStatusPill,
   TableCellText,
+  Tabs,
+  TagPill,
   Textarea,
-  Toggle
+  TileGrid,
+  Toggle,
+  TrailChip,
+  TrendLabel,
+  UserStatusPill,
+  WidgetFooter,
+  WidgetHeader,
+  WidgetTitle,
+  cn,
+  getScoreTone,
+  resolveChartColor,
+  useOverlayDismiss
 };
 //# sourceMappingURL=index.js.map