@platned/ui 0.1.3 → 0.3.0

package/dist/index.cjs

@@ -30,71 +30,151 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  AIChatBar: () => AIChatBar,
+  AISuggestionChip: () => AISuggestionChip,
+  AuroraBackdrop: () => AuroraBackdrop,
   Avatar: () => Avatar,
+  AvatarBlock: () => AvatarBlock,
   AvatarGroup: () => AvatarGroup,
+  Badge: () => Badge,
+  BarChart: () => BarChart,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
+  CHART_SEQUENCE: () => CHART_SEQUENCE,
+  CHART_TONE: () => CHART_TONE,
+  CHART_TRACK: () => CHART_TRACK,
+  Card: () => Card,
+  CardAction: () => CardAction,
+  CardBody: () => CardBody,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  ChartLegend: () => ChartLegend,
+  CheckIndicator: () => CheckIndicator,
+  Checkbox: () => Checkbox,
+  CheckedGroupList: () => CheckedGroupList,
+  ChecklistRow: () => ChecklistRow,
+  ConfirmDialog: () => ConfirmDialog,
+  CountBadge: () => CountBadge,
+  DEFAULT_SCORE_THRESHOLDS: () => DEFAULT_SCORE_THRESHOLDS,
   DataTable: () => DataTable,
-  DocumentRow: () => DocumentRow,
+  DatePicker: () => DatePicker,
+  DonutChart: () => DonutChart,
+  Drawer: () => Drawer,
+  DropdownMenu: () => DropdownMenu,
+  EmptyState: () => EmptyState,
+  EntityIconBadge: () => EntityIconBadge,
+  EyebrowLabel: () => EyebrowLabel,
   FileDropZone: () => FileDropZone,
+  FileRow: () => FileRow,
+  FilterBar: () => FilterBar,
   FormCard: () => FormCard,
   FormCardFooter: () => FormCardFooter,
   FormCardHeader: () => FormCardHeader,
   IconButton: () => IconButton,
+  IconTextRow: () => IconTextRow,
+  InlineAlert: () => InlineAlert,
   Input: () => Input,
-  MetricCard: () => MetricCard,
+  LegendDot: () => LegendDot,
+  ListRow: () => ListRow,
+  MetaField: () => MetaField,
+  MetaFieldGrid: () => MetaFieldGrid,
+  MiniBarChart: () => MiniBarChart,
   Modal: () => Modal,
+  ModalBody: () => ModalBody,
+  ModalDescription: () => ModalDescription,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
+  ModalTitle: () => ModalTitle,
   MultiSelectCard: () => MultiSelectCard,
   NavItem: () => NavItem,
-  Panel: () => Panel,
+  NoteConfirmModal: () => NoteConfirmModal,
+  NumberedStepsList: () => NumberedStepsList,
+  OVERLAY_SCRIM: () => OVERLAY_SCRIM,
+  PageHeading: () => PageHeading,
+  PageToolbar: () => PageToolbar,
+  PasswordInput: () => PasswordInput,
+  ProgressBar: () => ProgressBar,
+  QuickActionsBar: () => QuickActionsBar,
   ROLE_COMBO_OPTIONS: () => ROLE_COMBO_OPTIONS,
+  RadialGauge: () => RadialGauge,
+  RankedRow: () => RankedRow,
   RoleBadge: () => RoleBadge,
   RoleComboBox: () => RoleComboBox,
-  SectionHeading: () => SectionHeading,
+  ScoreValue: () => ScoreValue,
+  ScoredRow: () => ScoredRow,
+  SegmentedControl: () => SegmentedControl,
   Select: () => Select,
-  SentimentBadge: () => SentimentBadge,
-  SeverityBadge: () => SeverityBadge,
+  SolidAlertTriangle: () => SolidAlertTriangle,
+  SolidArrowRight: () => SolidArrowRight,
+  SolidChartBar: () => SolidChartBar,
+  SolidCheck: () => SolidCheck,
+  SolidClock: () => SolidClock,
+  SolidGlobe: () => SolidGlobe,
+  SolidInfoCircle: () => SolidInfoCircle,
+  SolidMapPin: () => SolidMapPin,
+  SolidShieldCheck: () => SolidShieldCheck,
+  Sparkline: () => Sparkline,
+  StatNumber: () => StatNumber,
   StatTile: () => StatTile,
+  StatusBadge: () => StatusBadge,
+  StatusChip: () => StatusChip,
+  StatusDot: () => StatusDot,
   Stepper: () => Stepper,
   TableCellBadge: () => TableCellBadge,
   TableCellLeadText: () => TableCellLeadText,
   TableCellProgress: () => TableCellProgress,
-  TableCellStatusPill: () => TableCellStatusPill,
   TableCellText: () => TableCellText,
+  Tabs: () => Tabs,
+  TagPill: () => TagPill,
   Textarea: () => Textarea,
-  Toggle: () => Toggle
+  TileGrid: () => TileGrid,
+  Toggle: () => Toggle,
+  TrailChip: () => TrailChip,
+  TrendLabel: () => TrendLabel,
+  UserStatusPill: () => UserStatusPill,
+  WidgetFooter: () => WidgetFooter,
+  WidgetHeader: () => WidgetHeader,
+  WidgetTitle: () => WidgetTitle,
+  cn: () => cn,
+  getScoreTone: () => getScoreTone,
+  resolveChartColor: () => resolveChartColor,
+  useOverlayDismiss: () => useOverlayDismiss
 });
 module.exports = __toCommonJS(src_exports);
-var import_clsx20 = __toESM(require("clsx"), 1);
 
-// src/components/button.tsx
+// src/components/forms/button.tsx
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 var variantStyles = {
   primary: (0, import_clsx.default)(
-    "bg-background-brand border border-border-brand text-text-brand-on-brand",
-    "hover:bg-background-brand-hover",
-    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    "bg-brand border border-brand text-brand-on-brand",
+    "hover:bg-brand-hover",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   ),
   neutral: (0, import_clsx.default)(
-    "bg-background-default border border-border-default text-text-default",
-    "hover:bg-background-default-hover",
-    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    "bg-default border border-default text-default",
+    "hover:bg-default-hover hover:text-brand",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   ),
   subtle: (0, import_clsx.default)(
-    "bg-transparent text-text-neutral",
-    "hover:bg-background-neutral-tertiary",
-    "disabled:bg-background-disabled disabled:border disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    // border-transparent holds space so hover border doesn't shift layout
+    "bg-transparent border border-transparent text-neutral",
+    "hover:border-default hover:text-brand",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   ),
   danger: (0, import_clsx.default)(
-    "bg-background-danger border border-border-danger-secondary text-text-danger-on-danger",
-    "hover:bg-background-danger-hover",
-    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    "bg-danger border border-danger-secondary text-danger-on-danger",
+    // border shifts from danger-secondary → danger-default on hover (Figma spec)
+    "hover:bg-danger-hover hover:border-danger",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   ),
   "danger-subtle": (0, import_clsx.default)(
-    "bg-transparent text-text-danger",
-    "hover:bg-background-danger-tertiary",
-    "disabled:bg-background-disabled disabled:border disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    // border-transparent base avoids layout shift when hover border appears
+    "bg-transparent border border-transparent text-danger",
+    "hover:bg-danger-tertiary-hover hover:border-danger",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   )
 };
 var sizeStyles = {
@@ -116,7 +196,7 @@ function Button({
     {
       className: (0, import_clsx.default)(
         "inline-flex items-center justify-center whitespace-nowrap transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
         "disabled:cursor-not-allowed",
         variantStyles[variant],
         sizeStyles[size],
@@ -132,25 +212,28 @@ function Button({
   );
 }
 
-// src/components/icon-button.tsx
+// src/components/forms/icon-button.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var variantStyles2 = {
   primary: (0, import_clsx2.default)(
-    "bg-background-brand border border-border-brand text-text-brand-on-brand",
-    "hover:bg-background-brand-hover",
-    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    "bg-brand border border-brand text-brand-on-brand",
+    "hover:bg-brand-hover",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   ),
   // Neutral uses secondary background (light gray) for visual weight without a text label
   neutral: (0, import_clsx2.default)(
-    "bg-background-default-secondary border border-border-default text-text-default",
-    "hover:bg-background-default-secondary-hover",
-    "disabled:bg-background-disabled disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    "bg-default-secondary border border-default text-default",
+    // icon turns brand blue on hover (Figma spec)
+    "hover:bg-default-secondary-hover hover:text-brand",
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
   ),
   subtle: (0, import_clsx2.default)(
-    "bg-transparent text-text-neutral",
-    "hover:bg-background-neutral-tertiary",
-    "disabled:bg-background-disabled disabled:border disabled:border-border-disabled disabled:text-text-disabled-on-disabled"
+    "bg-transparent text-neutral",
+    // hover uses background-default-default-hover (#f5f5f5), icon turns brand blue (Figma spec)
+    "hover:bg-default-hover hover:text-brand",
+    // disabled needs explicit border since there is no base border
+    "disabled:bg-disabled disabled:border disabled:border-disabled disabled:text-disabled-on-disabled"
   )
 };
 var sizeStyles2 = {
@@ -161,7 +244,7 @@ var sizeStyles2 = {
 function IconButton({
   variant = "primary",
   size = "md",
-  icon,
+  children,
   className,
   ...props
 }) {
@@ -170,44 +253,44 @@ function IconButton({
     {
       className: (0, import_clsx2.default)(
         "inline-flex shrink-0 items-center justify-center transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
         "disabled:cursor-not-allowed",
         variantStyles2[variant],
         sizeStyles2[size],
         className
       ),
       ...props,
-      children: icon
+      children
     }
   );
 }
 
-// src/components/button-group.tsx
+// src/components/forms/button-group.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var containerStyles = {
-  primary: "bg-background-neutral-tertiary p-1 rounded-2xl",
-  neutral: "bg-background-neutral-tertiary p-1 rounded-2xl",
-  filter: "bg-background-default border border-border-default p-1 rounded-xl"
+  primary: "bg-neutral-tertiary p-1 rounded-2xl",
+  neutral: "bg-neutral-tertiary p-1 rounded-2xl",
+  filter: "bg-default border border-default p-1 rounded-xl"
 };
 var selectedStyles = {
   primary: (0, import_clsx3.default)(
-    "bg-background-brand border border-border-brand text-text-brand-on-brand",
-    "hover:bg-background-brand-hover"
+    "bg-brand border border-brand text-brand-on-brand",
+    "hover:bg-brand-hover"
   ),
   neutral: (0, import_clsx3.default)(
-    "bg-background-default border border-border-default text-text-default",
-    "hover:bg-background-default-hover"
+    "bg-default border border-default text-default",
+    "hover:bg-default-hover"
   ),
   filter: (0, import_clsx3.default)(
-    "bg-background-brand text-text-brand-on-brand",
-    "hover:bg-background-brand-hover"
+    "bg-brand text-brand-on-brand",
+    "hover:bg-brand-hover"
   )
 };
 var unselectedStyles = {
-  primary: (0, import_clsx3.default)("bg-transparent text-text-neutral", "hover:bg-background-neutral-tertiary-hover"),
-  neutral: (0, import_clsx3.default)("bg-transparent text-text-neutral", "hover:bg-background-neutral-tertiary-hover"),
-  filter: (0, import_clsx3.default)("text-text-default-secondary", "hover:text-text-default")
+  primary: (0, import_clsx3.default)("bg-transparent text-neutral", "hover:bg-neutral-tertiary-hover"),
+  neutral: (0, import_clsx3.default)("bg-transparent text-neutral", "hover:bg-neutral-tertiary-hover"),
+  filter: (0, import_clsx3.default)("text-default-secondary", "hover:text-default")
 };
 var itemSizeStyles = {
   lg: "h-12 px-3 gap-1 rounded-2xl text-body font-semibold [&_svg]:size-5",
@@ -258,8 +341,8 @@ function ButtonGroup({
                 onClick: () => onChange(item.value),
                 className: (0, import_clsx3.default)(
                   "inline-flex items-center justify-center whitespace-nowrap transition-colors",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
-                  "disabled:cursor-not-allowed disabled:text-text-disabled",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
+                  "disabled:cursor-not-allowed disabled:text-disabled",
                   (isJustify || isStack) && "w-full",
                   itemSizeStyles[size],
                   isSelected ? selectedStyles[variant] : unselectedStyles[variant]
@@ -279,7 +362,7 @@ function ButtonGroup({
   );
 }
 
-// src/components/avatar.tsx
+// src/components/avatar/avatar.tsx
 var import_clsx4 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizeStyles3 = {
@@ -292,16 +375,16 @@ var initialTextStyles = {
   md: "text-body-xs font-semibold",
   sm: "text-body-tiny font-semibold"
 };
-var shapeStyles = {
-  circle: "rounded-full",
-  square: "rounded-lg"
-};
+function getShapeClass(shape, size) {
+  if (shape === "circle") return "rounded-full";
+  return size === "sm" ? "rounded" : "rounded-lg";
+}
 function Avatar(props) {
   const { size = "lg", shape = "circle", className } = props;
   const base = (0, import_clsx4.default)(
     "shrink-0 overflow-hidden",
     sizeStyles3[size],
-    shapeStyles[shape],
+    getShapeClass(shape, size),
     className
   );
   if (props.type === "image") {
@@ -325,7 +408,7 @@ function Avatar(props) {
         "span",
         {
           className: (0, import_clsx4.default)(
-            "select-none leading-none text-text-brand-on-brand",
+            "select-none leading-none text-brand-on-brand",
             initialTextStyles[size]
           ),
           children: props.initial.charAt(0).toUpperCase()
@@ -335,7 +418,7 @@ function Avatar(props) {
   );
 }
 
-// src/components/avatar-group.tsx
+// src/components/avatar/avatar-group.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function AvatarGroup({
@@ -360,7 +443,7 @@ function AvatarGroup({
             className: (0, import_clsx5.default)(
               "flex items-center justify-center",
               "min-w-6 h-6 px-1 rounded-lg",
-              "bg-background-default-secondary text-text-default-secondary text-body-sm",
+              "bg-default-secondary text-default-secondary text-body-sm",
               spacing === "overlap" && "drop-shadow-sm"
             ),
             children: [
@@ -374,39 +457,20 @@ function AvatarGroup({
   );
 }
 
-// src/components/nav-item.tsx
+// src/components/avatar/avatar-block.tsx
 var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function NavItem({
-  icon,
-  label,
-  isActive = false,
-  indicator = false,
-  collapsed = false,
-  className
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "span",
-    {
-      className: (0, import_clsx6.default)(
-        "relative flex h-11 w-full items-center gap-3 rounded-xl px-3.5 py-2.5 transition-colors",
-        collapsed && "justify-center",
-        isActive ? "bg-background-brand text-text-brand-on-brand" : [
-          "border border-border-default bg-background-default text-text-default-secondary",
-          "hover:bg-background-brand-tertiary-hover hover:border-border-brand-tertiary hover:text-text-brand"
-        ],
-        className
-      ),
-      children: [
-        icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-1 min-w-0 truncate text-body-sm font-regular leading-snug", children: label }),
-        indicator && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-background-danger" })
-      ]
-    }
-  );
+function AvatarBlock({ children, title, description, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.default)("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "shrink-0", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-body font-semibold text-default-secondary", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-body text-default-tertiary", children: description })
+    ] })
+  ] });
 }
 
-// src/components/input.tsx
+// src/components/forms/input.tsx
 var import_react = require("react");
 var import_clsx7 = __toESM(require("clsx"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -424,17 +488,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"
 };
@@ -443,7 +507,7 @@ var iconWrap = {
   md: { left: "left-3", right: "right-3", size: "size-4" },
   sm: { left: "left-2", right: "right-2", size: "size-3" }
 };
-var Input = (0, import_react.forwardRef)(function Input2({ label, description, error, hint, size = "md", leadingIcon, trailingIcon, className, disabled, id, ...props }, ref) {
+var Input = (0, import_react.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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx7.default)("flex flex-col", wrapGap[size], className), children: [
@@ -451,11 +515,11 @@ var Input = (0, import_react.forwardRef)(function Input2({ label, description, e
       "label",
       {
         htmlFor: id,
-        className: (0, import_clsx7.default)(labelText[size], disabled ? "text-text-disabled" : "text-text-default"),
+        className: (0, import_clsx7.default)(labelText[size], disabled ? "text-disabled" : "text-default"),
         children: label
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: (0, import_clsx7.default)(labelText[size], disabled ? "text-text-disabled" : "text-text-default-secondary"), children: description }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: (0, import_clsx7.default)(labelText[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative flex items-center", children: [
       leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx7.default)("pointer-events-none absolute", iw.left, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: leadingIcon }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -466,24 +530,25 @@ var Input = (0, import_react.forwardRef)(function Input2({ label, description, e
           disabled,
           className: (0, import_clsx7.default)(
             "w-full rounded-lg border outline-none transition-colors",
-            "bg-background-default text-text-default",
-            "placeholder:text-text-default-tertiary",
+            "bg-default text-default",
+            "placeholder:text-default-tertiary",
             inputBase[size],
             leadingIcon && leadingPad[size],
-            trailingIcon && trailingPad[size],
-            disabled ? "cursor-not-allowed bg-background-disabled border-border-disabled text-text-disabled placeholder:text-text-disabled" : hasError ? "border-border-danger-secondary focus:border-border-danger-secondary focus:ring-1 focus:ring-border-danger-secondary" : "border-border-default focus:border-border-brand-tertiary focus:ring-1 focus:ring-border-brand-tertiary"
+            (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__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx7.default)("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon })
+      trailingIcon && !trailingAction && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx7.default)("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon }),
+      trailingAction && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx7.default)("absolute", iw.right, "flex items-center justify-center text-icon-default-secondary"), children: trailingAction })
     ] }),
-    hasError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: (0, import_clsx7.default)(labelText[size], "text-text-danger"), children: error }),
-    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: (0, import_clsx7.default)(labelText[size], "text-text-default-secondary"), children: hint })
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: (0, import_clsx7.default)(labelText[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: (0, import_clsx7.default)(labelText[size], "text-default"), children: hint })
   ] });
 });
 
-// src/components/textarea.tsx
+// src/components/forms/textarea.tsx
 var import_react2 = require("react");
 var import_clsx8 = __toESM(require("clsx"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -509,11 +574,11 @@ var Textarea = (0, import_react2.forwardRef)(function Textarea2({ label, descrip
       "label",
       {
         htmlFor: id,
-        className: (0, import_clsx8.default)(labelText2[size], disabled ? "text-text-disabled" : "text-text-default"),
+        className: (0, import_clsx8.default)(labelText2[size], disabled ? "text-disabled" : "text-default"),
         children: label
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText2[size], disabled ? "text-text-disabled" : "text-text-default-secondary"), children: description }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText2[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "textarea",
       {
@@ -522,20 +587,20 @@ var Textarea = (0, import_react2.forwardRef)(function Textarea2({ label, descrip
         disabled,
         className: (0, import_clsx8.default)(
           "w-full rounded-lg border outline-none transition-colors resize-y",
-          "bg-background-default text-text-default",
-          "placeholder:text-text-default-tertiary",
+          "bg-default text-default",
+          "placeholder:text-default-tertiary",
           textareaBase[size],
-          disabled ? "cursor-not-allowed bg-background-disabled border-border-disabled text-text-disabled placeholder:text-text-disabled resize-none" : hasError ? "border-border-danger-secondary focus:border-border-danger-secondary focus:ring-1 focus:ring-border-danger-secondary" : "border-border-default focus:border-border-brand-tertiary focus:ring-1 focus:ring-border-brand-tertiary"
+          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__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText2[size], "text-text-danger"), children: error }),
-    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText2[size], "text-text-default-secondary"), children: hint })
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText2[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText2[size], "text-default-secondary"), children: hint })
   ] });
 });
 
-// src/components/select.tsx
+// src/components/forms/select.tsx
 var import_react3 = require("react");
 var import_clsx9 = __toESM(require("clsx"), 1);
 var import_lu = require("react-icons/lu");
@@ -571,11 +636,11 @@ var Select = (0, import_react3.forwardRef)(function Select2({ label, description
       "label",
       {
         htmlFor: id,
-        className: (0, import_clsx9.default)(labelText3[size], disabled ? "text-text-disabled" : "text-text-default"),
+        className: (0, import_clsx9.default)(labelText3[size], disabled ? "text-disabled" : "text-default"),
         children: label
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText3[size], disabled ? "text-text-disabled" : "text-text-default-secondary"), children: description }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText3[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex items-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "select",
@@ -585,9 +650,9 @@ var Select = (0, import_react3.forwardRef)(function Select2({ label, description
           disabled,
           className: (0, import_clsx9.default)(
             "w-full appearance-none rounded-lg border outline-none transition-colors pt-0.5",
-            "bg-background-default text-text-default",
+            "bg-default text-default",
             selectBase[size],
-            disabled ? "cursor-not-allowed bg-background-disabled border-border-disabled text-text-disabled" : hasError ? "border-border-danger-secondary focus:border-border-danger-secondary focus:ring-1 focus:ring-border-danger-secondary" : "border-border-default focus:border-border-brand-tertiary focus:ring-1 focus:ring-border-brand-tertiary"
+            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: [
@@ -610,49 +675,129 @@ var Select = (0, import_react3.forwardRef)(function Select2({ label, description
         }
       )
     ] }),
-    hasError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText3[size], "text-text-danger"), children: error }),
-    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText3[size], "text-text-default-secondary"), children: hint })
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText3[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText3[size], "text-default-secondary"), children: hint })
   ] });
 });
 
-// src/components/stepper.tsx
+// src/components/forms/date-picker.tsx
+var import_react4 = require("react");
 var import_clsx10 = __toESM(require("clsx"), 1);
 var import_lu2 = require("react-icons/lu");
 var import_jsx_runtime10 = require("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 = (0, import_react4.forwardRef)(function DatePicker2({ label, description, error, hint, size = "md", className, disabled, id, ...props }, ref) {
+  const hasError = !!error;
+  const iw = iconWrap2[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx10.default)("flex flex-col", wrapGap4[size], className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        className: (0, import_clsx10.default)(labelText4[size], disabled ? "text-disabled" : "text-default"),
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_clsx10.default)(labelText4[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "input",
+        {
+          ref,
+          id,
+          type: "date",
+          disabled,
+          className: (0, import_clsx10.default)(
+            "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__ */ (0, import_jsx_runtime10.jsx)(
+        "span",
+        {
+          className: (0, import_clsx10.default)(
+            "pointer-events-none absolute",
+            iw.right,
+            iw.size,
+            "flex items-center justify-center",
+            disabled ? "text-icon-disabled" : "text-icon-default-secondary"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu2.LuCalendar, { className: "size-full" })
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_clsx10.default)(labelText4[size], "text-danger"), children: error }),
+    !hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_clsx10.default)(labelText4[size], "text-default"), children: hint })
+  ] });
+});
+
+// src/components/forms/stepper.tsx
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_lu3 = require("react-icons/lu");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function StepIndicator({ status }) {
   if (status === "complete") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-background-brand text-white", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu2.LuCheck, { size: 11, "aria-hidden": true }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand text-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lu3.LuCheck, { size: 11, "aria-hidden": true }) });
   }
   if (status === "active") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-background-brand", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "size-2.5 rounded-full bg-background-brand" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-brand-emphasis", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "size-2.5 rounded-full bg-brand" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "size-5 shrink-0 rounded-full border-2 border-border-disabled", "aria-hidden": "true" });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "size-5 shrink-0 rounded-full border-2 border-disabled", "aria-hidden": "true" });
 }
 function ChevronSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu2.LuChevronRight, { className: "mx-1 size-4 shrink-0 text-text-default-tertiary", "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lu3.LuChevronRight, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
 }
 var labelClass = {
-  complete: "text-text-brand font-semibold",
-  active: "text-text-brand font-semibold",
-  upcoming: "text-text-disabled font-regular"
+  complete: "text-brand font-semibold",
+  active: "text-brand font-semibold",
+  upcoming: "text-disabled font-regular"
 };
 function Stepper({ steps, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "ol",
     {
-      className: (0, import_clsx10.default)("flex items-center overflow-x-auto", className),
+      className: (0, import_clsx11.default)("flex items-center overflow-x-auto", className),
       "aria-label": "Progress",
-      children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "li",
         {
           className: "flex items-center",
           "aria-current": step.status === "active" ? "step" : void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StepIndicator, { status: step.status }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: (0, import_clsx10.default)("text-body-xs whitespace-nowrap", labelClass[step.status]), children: step.label })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StepIndicator, { status: step.status }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: (0, import_clsx11.default)("text-body-xs whitespace-nowrap", labelClass[step.status]), children: step.label })
             ] }),
-            i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronSeparator, {})
+            i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronSeparator, {})
           ]
         },
         i
@@ -661,9 +806,10 @@ function Stepper({ steps, className }) {
   );
 }
 
-// src/components/multiselect-card.tsx
-var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+// src/components/forms/multiselect-card.tsx
+var import_clsx12 = __toESM(require("clsx"), 1);
+var import_lu4 = require("react-icons/lu");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function MultiSelectCard({
   icon,
   title,
@@ -672,299 +818,245 @@ function MultiSelectCard({
   onToggle,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "button",
     {
       type: "button",
       role: "checkbox",
       "aria-checked": selected,
       onClick: onToggle,
-      className: (0, import_clsx11.default)(
+      className: (0, import_clsx12.default)(
         "relative w-full rounded-2xl border-2 p-4 text-left transition-all",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
-        selected ? "border-border-brand bg-background-brand-tertiary" : "border-border-default bg-background-default hover:border-border-default-secondary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
+        selected ? "border-brand bg-brand-tertiary" : "border-default bg-default hover:border-default-secondary",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
-              className: (0, import_clsx11.default)(
+              className: (0, import_clsx12.default)(
                 "flex size-10 shrink-0 items-center justify-center rounded-xl",
-                selected ? "bg-background-brand" : "bg-background-brand-tertiary"
+                selected ? "bg-brand" : "bg-brand-tertiary"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: (0, import_clsx11.default)("size-5", selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: (0, import_clsx12.default)("size-5", selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
             }
           ),
-          selected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-background-brand", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "path",
-            {
-              d: "M1 4L3.9 7L10 1",
-              stroke: "white",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand text-icon-brand-on-brand", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lu4.LuCheck, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
-              className: "size-5 shrink-0 rounded-full border-2 border-border-default",
+              className: "size-5 shrink-0 rounded-full border-2 border-default",
               "aria-hidden": "true"
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "p",
             {
-              className: (0, import_clsx11.default)(
+              className: (0, import_clsx12.default)(
                 "text-body-sm font-semibold",
-                selected ? "text-text-brand" : "text-text-default"
+                selected ? "text-brand" : "text-default"
               ),
               children: title
             }
           ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-0.5 text-body-xs text-text-default-secondary", children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: description })
         ] })
       ]
     }
   );
 }
 
-// src/components/data-table.tsx
-var import_clsx12 = __toESM(require("clsx"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function DataTable({
-  columns,
-  rows,
-  getRowKey,
-  className,
-  onRowClick
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx12.default)(
-        "overflow-hidden rounded-xl border border-border-default bg-background-default",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center bg-background-default-secondary px-4 py-3", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_clsx12.default)("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-body-xs font-medium text-text-default-secondary whitespace-nowrap", children: col.header }) }, col.key)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "div",
-          {
-            className: (0, import_clsx12.default)(
-              "flex items-center px-4 py-[14px] transition-colors hover:bg-background-default-secondary/50",
-              i > 0 && "border-t border-[#ececec]",
-              onRowClick && "cursor-pointer"
-            ),
-            onClick: onRowClick ? () => onRowClick(row) : void 0,
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_clsx12.default)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-body-sm font-medium text-text-default leading-snug", children: primary }),
-    secondary && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-body-xs font-normal text-text-default-secondary leading-tight", children: secondary })
-  ] });
-}
-function TableCellText({
-  children,
-  muted = true
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "span",
-    {
-      className: (0, import_clsx12.default)(
-        "text-body-xs font-normal leading-snug whitespace-nowrap",
-        muted ? "text-text-default-secondary" : "text-text-default"
-      ),
-      children
-    }
-  );
-}
-function TableCellBadge({ label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-flex items-center rounded-md border border-border-default bg-background-default-secondary px-2 py-0.5 text-body-tiny font-medium text-text-default-secondary whitespace-nowrap", children: label });
-}
-function TableCellStatusPill({
-  label,
-  dotColor,
-  backgroundColor,
-  textColor
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-background-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "h-full rounded-full transition-all",
-        style: { width: `${clamped}%`, backgroundColor: color }
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-body-tiny text-text-default-secondary leading-none", children: [
-      percent,
-      "%"
-    ] })
-  ] });
-}
-
-// src/components/stat-tile.tsx
+// src/components/forms/toggle.tsx
 var import_clsx13 = __toESM(require("clsx"), 1);
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function StatTile({ label, value, dotColor, className }) {
+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,
+  size = "md",
+  disabled = false,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className
+}) {
+  const s = SIZE[size];
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx13.default)(
-        "flex flex-col gap-2 rounded-xl border border-border-default bg-background-default p-4",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          dotColor && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-body-xs font-medium text-text-default-secondary whitespace-nowrap", children: label })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-heading font-semibold text-text-default leading-none", children: value })
-      ]
-    }
-  );
-}
-
-// src/components/toggle.tsx
-var import_clsx14 = __toESM(require("clsx"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function Toggle({ checked, onChange, label, disabled = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "button",
     {
       type: "button",
       role: "switch",
+      id,
       "aria-checked": checked,
+      "aria-label": label ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       disabled,
       onClick: () => onChange(!checked),
-      className: (0, import_clsx14.default)(
-        "flex items-center gap-2",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
-        disabled && "cursor-not-allowed opacity-50"
+      className: (0, import_clsx13.default)(
+        "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",
+        className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
-            className: (0, import_clsx14.default)(
-              "relative inline-flex h-6 w-10 shrink-0 rounded-full transition-colors",
-              checked ? "bg-background-brand" : "border border-border-default bg-background-neutral-tertiary"
+            className: (0, import_clsx13.default)(
+              "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__ */ (0, import_jsx_runtime14.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "span",
               {
-                className: (0, import_clsx14.default)(
-                  "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: (0, import_clsx13.default)(
+                  "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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-body-xs text-text-default", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-body-xs text-default", children: label })
       ]
     }
   );
 }
 
-// src/components/file-drop-zone.tsx
-var import_react4 = require("react");
-var import_clsx15 = __toESM(require("clsx"), 1);
-var import_lu3 = require("react-icons/lu");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function FileDropZone({ className }) {
-  const inputRef = (0, import_react4.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+// src/components/forms/file-drop-zone.tsx
+var import_react5 = require("react");
+var import_clsx14 = __toESM(require("clsx"), 1);
+var import_lu5 = require("react-icons/lu");
+var import_jsx_runtime14 = require("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 = (0, import_react5.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "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__ */ (0, import_jsx_runtime15.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "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: (0, import_clsx15.default)(
-          "flex flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed py-4 px-4 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1",
-          isDragging ? "border-border-brand bg-background-brand-tertiary" : "border-border-default bg-background-default-secondary hover:border-border-brand hover:bg-background-brand-tertiary",
+        className: (0, import_clsx14.default)(
+          "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" : (0, import_clsx14.default)(
+            "cursor-pointer",
+            isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary"
+          ),
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: isDragging ? "text-text-brand" : "text-text-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu3.LuUpload, { size: 20 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-body-sm font-medium text-text-default", children: "Upload file" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-body-xs text-text-default-secondary text-center", children: "Drag & drop or browse \xB7 PDF, JPG, PNG \xB7 up to 10 MB" })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: disabled ? "text-disabled" : isDragging ? "text-brand" : "text-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lu5.LuUpload, { className: "size-5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: (0, import_clsx14.default)("text-body-sm font-medium", disabled ? "text-disabled" : "text-default"), children: "Upload file" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-body-xs text-default-secondary text-center", children: description })
         ]
       }
-    )
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { role: "alert", className: "text-body-xs text-danger", children: error })
   ] });
 }
 
-// src/components/form-card.tsx
-var import_clsx16 = __toESM(require("clsx"), 1);
-var import_lu4 = require("react-icons/lu");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+// src/components/forms/form-card.tsx
+var import_clsx15 = __toESM(require("clsx"), 1);
+var import_lu6 = require("react-icons/lu");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function FormCard({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
-      className: (0, import_clsx16.default)(
-        "overflow-hidden rounded-xl border border-border-default bg-background-default",
+      className: (0, import_clsx15.default)(
+        "overflow-hidden rounded-xl border border-default bg-default",
         className
       ),
       children
@@ -972,9 +1064,9 @@ function FormCard({
   );
 }
 function FormCardHeader({ title, subtitle }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border-b border-border-default px-7 py-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "text-heading-sm font-semibold text-text-default leading-snug", children: title }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-body-xs text-text-default-secondary", children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "border-b border-default px-7 py-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
   ] });
 }
 function FormCardFooter({
@@ -982,131 +1074,104 @@ function FormCardFooter({
   onBack,
   onContinue,
   continueLabel = "Continue",
-  backDisabled = false
+  backDisabled = false,
+  continueDisabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between border-t border-border-default px-7 py-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, children: "Save as draft" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-      !backDisabled && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lu4.LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lu4.LuArrowRight, { size: 16 }), onClick: onContinue, children: continueLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between border-t border-default px-7 py-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, disabled: !onSaveDraft, children: "Save as draft" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+      !backDisabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu6.LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu6.LuArrowRight, { size: 16 }), onClick: onContinue, disabled: continueDisabled, children: continueLabel })
     ] })
   ] });
 }
 
-// src/components/document-row.tsx
-var import_clsx17 = __toESM(require("clsx"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var STATUS_CONFIG = {
-  uploaded: { label: "\u2713 Uploaded", style: "bg-[#e6f4ea] text-[#1f7a3d]" },
-  "under-review": { label: "\u25CF Under review", style: "bg-[#fbe6cf] text-[#9a6206]" },
-  processing: { label: "\u25CF Processing", style: "bg-[#e9eff7] text-[#0c2d58]" },
-  missing: { label: "Missing", style: "bg-[#fee2e2] text-[#b91c1c]" },
-  "not-provided": { label: "Not provided", style: "bg-background-default-secondary text-text-default-secondary" }
+// src/components/status/badge.tsx
+var import_clsx16 = __toESM(require("clsx"), 1);
+var import_lu7 = require("react-icons/lu");
+var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-md bg-background-brand-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-tiny font-semibold text-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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-3 py-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-sm font-semibold text-text-default truncate", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "shrink-0 rounded-md border border-border-default bg-background-default-secondary px-2 py-0.5 text-body-tiny font-medium text-text-default-secondary", children: required ? "Required" : "Optional" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "span",
-        {
-          className: (0, import_clsx17.default)(
-            "shrink-0 rounded-full px-2.5 py-0.5 text-body-tiny font-medium whitespace-nowrap",
-            cfg.style
-          ),
-          children: cfg.label
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-body-xs text-text-default-secondary", children: description }),
-    hasFile ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-3 rounded-lg border border-border-default bg-background-default px-3 py-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FileTypeBadge, { type: fileType }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate text-body-sm font-medium text-text-default", children: fileName }),
-        fileSize && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-xs text-text-default-secondary", children: fileSize })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex shrink-0 items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "button",
+  const isDefault = variant === "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx16.default)(
+        "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__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
           {
-            type: "button",
-            className: "text-body-xs font-medium text-text-brand hover:underline",
-            children: "Replace"
+            className: (0, import_clsx16.default)(
+              "shrink-0 rounded-full bg-current",
+              size === "sm" ? "h-1.5 w-1.5" : "h-2 w-2"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            className: (0, import_clsx16.default)(
+              "whitespace-nowrap",
+              size === "sm" ? (0, import_clsx16.default)("text-body-tiny", isDefault && "font-semibold") : "text-body-xs"
+            ),
+            children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
             type: "button",
-            className: "text-body-xs font-medium text-text-danger hover:underline",
-            children: "Remove"
+            onClick: onClose,
+            className: (0, import_clsx16.default)(
+              "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__ */ (0, import_jsx_runtime16.jsx)(import_lu7.LuX, { className: "h-full w-full", strokeWidth: 2.5, "aria-hidden": true })
           }
         )
-      ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FileDropZone, {})
-  ] });
+      ]
+    }
+  );
 }
 
-// src/components/modal.tsx
-var import_clsx18 = __toESM(require("clsx"), 1);
-var import_lu5 = require("react-icons/lu");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth = "max-w-[540px]" }) {
-  if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: (0, import_clsx18.default)("w-full mx-4 rounded-2xl bg-white shadow-xl", maxWidth), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start justify-between px-6 py-5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "text-heading-sm font-semibold text-text-default", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-0.5 text-body-xs text-text-default-secondary", children: subtitle })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            IconButton,
-            {
-              variant: "subtle",
-              size: "sm",
-              "aria-label": "Close dialog",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lu5.LuX, { size: 16 }),
-              onClick: onClose
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { className: "border-border-default" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-6 py-5", children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { className: "border-border-default" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-end gap-2 px-6 py-4", children: footer })
-        ] })
-      ] })
-    }
-  );
-}
-
-// src/components/role-badge.tsx
-var import_clsx19 = __toESM(require("clsx"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
+// src/components/status/role-badge.tsx
+var import_clsx17 = __toESM(require("clsx"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ROLE_COLORS = {
   "Super Admin": { bg: "#e9eff7", text: "#0c2d58" },
   "Admin": { bg: "#e9eff7", text: "#0c2d58" },
@@ -1120,12 +1185,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__ */ (0, import_jsx_runtime19.jsx)(
+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__ */ (0, import_jsx_runtime17.jsx)(
     "span",
     {
-      className: (0, import_clsx19.default)(
+      className: (0, import_clsx17.default)(
         "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"
       ),
@@ -1135,10 +1207,10 @@ function RoleBadge({ role, size = "sm" }) {
   );
 }
 
-// src/components/role-combo-box.tsx
-var import_react5 = require("react");
-var import_lu6 = require("react-icons/lu");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+// src/components/forms/role-combo-box.tsx
+var import_react6 = require("react");
+var import_lu8 = require("react-icons/lu");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ROLE_COMBO_OPTIONS = [
   { role: "Reviewer", description: "Reviews onboarding requests" },
   { role: "Admin", description: "Full org control" },
@@ -1148,11 +1220,11 @@ var ROLE_COMBO_OPTIONS = [
   { role: "User", description: "Default user access" }
 ];
 function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [query, setQuery] = (0, import_react5.useState)("");
-  const containerRef = (0, import_react5.useRef)(null);
-  const inputRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [query, setQuery] = (0, import_react6.useState)("");
+  const containerRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!open) return;
     function onClickOutside(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1177,21 +1249,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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "listbox",
         onClick: openDropdown,
-        className: `flex h-11 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] pl-2.5 pr-3 transition-colors ${open ? "border-blue-500" : "border-border-default hover:border-border-brand-tertiary"}`,
+        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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RoleBadge, { role: value, size: "sm" }),
-            value === "User" && !open && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "rounded border border-border-default bg-background-default-secondary px-1.5 py-0.5 text-body-tiny font-medium text-text-default-secondary", children: "DEFAULT" }),
-            open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RoleBadge, { role: value, size: "sm" }),
+            value === "User" && !open && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "input",
                 {
                   ref: inputRef,
@@ -1199,24 +1282,24 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
                   value: query,
                   onChange: (e) => setQuery(e.target.value),
                   onClick: (e) => e.stopPropagation(),
-                  className: "min-w-0 flex-1 bg-transparent text-body-xs text-text-default outline-none",
+                  className: "min-w-0 flex-1 bg-transparent text-body-xs text-default outline-none",
                   "aria-label": "Search roles"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-text-default", "aria-hidden": true })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-divider", "aria-hidden": true })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-text-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu6.LuChevronDown, { size: 14 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "shrink-0 text-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lu8.LuChevronDown, { size: 14 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         role: "listbox",
-        className: "absolute left-0 right-0 top-full z-20 mt-1 flex max-h-64 flex-col gap-0.5 overflow-y-auto rounded-xl border border-border-default bg-white p-1.5 shadow-lg",
+        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__ */ (0, import_jsx_runtime20.jsxs)(
+          selectedEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               role: "option",
@@ -1224,31 +1307,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__ */ (0, import_jsx_runtime20.jsx)(RoleBadge, { role: selectedEntry.role, size: "sm" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-1 text-body-xs text-text-default-secondary", children: selectedEntry.description }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RoleBadge, { role: selectedEntry.role, size: "sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "flex-1 text-body-xs text-default-secondary", children: selectedEntry.description }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-px bg-border-default" }),
-          otherOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-text-default-secondary", children: "Other roles" }) }),
-            otherOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-px bg-divider" }),
+          otherOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: "Other roles" }) }),
+            otherOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
               "div",
               {
                 role: "option",
                 "aria-selected": false,
-                className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-background-default-secondary",
+                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__ */ (0, import_jsx_runtime20.jsx)(RoleBadge, { role: opt.role, size: "sm" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-body-xs text-text-default-secondary", children: opt.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RoleBadge, { role: opt.role, size: "sm" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-xs text-default-secondary", children: opt.description })
                 ]
               },
               opt.role
             ))
           ] }),
-          otherOptions.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "px-2.5 py-2 text-body-xs text-text-default-secondary", children: [
+          otherOptions.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: [
             'No roles match "',
             query,
             '"'
@@ -1259,93 +1349,2755 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
   ] });
 }
 
-// src/index.tsx
+// src/components/status/status-badge.tsx
+var import_clsx18 = __toESM(require("clsx"), 1);
+var import_jsx_runtime19 = require("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__ */ (0, import_jsx_runtime19.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx18.default)(
+        "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__ */ (0, import_jsx_runtime19.jsx)("span", { className: "shrink-0", children: icon }) : dot && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: (0, import_clsx18.default)("size-1.5 shrink-0 rounded-full", DOT_STYLES[tone]) }),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/status/status-dot.tsx
+var import_clsx19 = __toESM(require("clsx"), 1);
+var import_jsx_runtime20 = require("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__ */ (0, import_jsx_runtime20.jsx)(
+    "span",
+    {
+      className: (0, import_clsx19.default)("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
+var import_clsx20 = __toESM(require("clsx"), 1);
 var import_jsx_runtime21 = require("react/jsx-runtime");
-function Panel({
+function StatusChip({ label, count, tone = "default", dotColor, bg, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx20.default)(
+        "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__ */ (0, import_jsx_runtime21.jsx)(StatusDot, { tone, color: dotColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-body-xs font-medium text-default", children: count }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-body-xs text-default-secondary", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/status/count-badge.tsx
+var import_clsx21 = __toESM(require("clsx"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function CountBadge({ count, label, tone = "positive", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx21.default)(
+        "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__ */ (0, import_jsx_runtime22.jsx)(StatusDot, { tone }),
+        count,
+        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-default-secondary", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/status/tag-pill.tsx
+var import_clsx22 = __toESM(require("clsx"), 1);
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime23.jsx)(
+    "span",
+    {
+      className: (0, import_clsx22.default)(
+        "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
+var import_clsx23 = __toESM(require("clsx"), 1);
+var import_jsx_runtime24 = require("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__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx23.default)(
+        "flex items-center gap-2 rounded-full border border-default bg-default px-3 py-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "span",
+          {
+            className: (0, import_clsx23.default)("size-1.5 shrink-0 rounded-full", !dotColor && DOT[tone]),
+            style: dotColor ? { backgroundColor: dotColor } : void 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-body-xs font-medium text-default", children: value })
+      ]
+    }
+  );
+}
+
+// src/components/status/user-status-pill.tsx
+var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime25.jsx)(StatusBadge, { label, tone });
+}
+
+// src/components/status/check-indicator.tsx
+var import_clsx24 = __toESM(require("clsx"), 1);
+var import_lu9 = require("react-icons/lu");
+var import_jsx_runtime26 = require("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__ */ (0, import_jsx_runtime26.jsx)(import_lu9.LuCheck, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "failed":
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lu9.LuX, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "waived":
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lu9.LuMinus, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "in_progress":
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lu9.LuLoaderCircle, { className: "size-3", strokeWidth: 3, "aria-hidden": true });
+    case "action_required":
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lu9.LuCircleAlert, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true });
+    case "pending":
+      return null;
+  }
+}
+function CheckIndicator({ status, label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      className: (0, import_clsx24.default)(
+        "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__ */ (0, import_jsx_runtime26.jsx)(StatusGlyph, { status })
+    }
+  );
+}
+
+// src/components/status/entity-icon-badge.tsx
+var import_clsx25 = __toESM(require("clsx"), 1);
+var import_jsx_runtime27 = require("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__ */ (0, import_jsx_runtime27.jsx)(
+    "span",
+    {
+      className: (0, import_clsx25.default)(
+        "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
+var import_react7 = require("react");
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_lu10 = require("react-icons/lu");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Checkbox({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  indeterminate = false,
+  className
+}) {
+  const inputRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "label",
+    {
+      className: (0, import_clsx26.default)(
+        "group inline-flex items-start gap-2.5",
+        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: (e) => onChange(e.target.checked),
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: (0, import_clsx26.default)(
+              "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__ */ (0, import_jsx_runtime28.jsx)(import_lu10.LuMinus, { className: "size-3", strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lu10.LuCheck, { className: "size-3", strokeWidth: 3 }) : null
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-body-xs text-default", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/forms/segmented-control.tsx
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function SegmentedControl({ options, value, onChange, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "div",
+    {
+      className: (0, import_clsx27.default)(
+        "inline-flex items-center rounded-xl border border-default bg-default-secondary p-0.5",
+        className
+      ),
+      children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange?.(opt.value),
+          className: (0, import_clsx27.default)(
+            "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
+var import_react9 = require("react");
+var import_lu11 = require("react-icons/lu");
+
+// src/lib/cn.ts
+var import_clsx28 = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx28.clsx)(inputs));
+}
+
+// src/components/overlays/overlay.ts
+var import_react8 = require("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) {
+  (0, import_react8.useEffect)(() => {
+    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]);
+  (0, import_react8.useEffect)(() => {
+    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
+var import_jsx_runtime30 = require("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__ */ (0, import_jsx_runtime30.jsx)(import_lu11.LuInfo, { className: "size-5" }),
+  positive: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lu11.LuCircleCheckBig, { className: "size-5" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lu11.LuTriangleAlert, { className: "size-5" }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lu11.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__ */ (0, import_jsx_runtime30.jsx)(ModalShell, { ...props });
+}
+function ModalShell({
+  onClose,
+  label,
   children,
+  size = "md",
+  showClose = true,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { className: (0, import_clsx20.default)("rounded-3xl border border-white/70 bg-white/90 p-6 shadow-panel backdrop-blur", className), children });
+  const panelRef = (0, import_react9.useRef)(null);
+  useOverlayDismiss(onClose, panelRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "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__ */ (0, import_jsx_runtime30.jsxs)(
+        "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__ */ (0, import_jsx_runtime30.jsx)(
+              IconButton,
+              {
+                variant: "subtle",
+                size: "sm",
+                "aria-label": "Close dialog",
+                onClick: onClose,
+                className: "absolute right-6 top-5 z-10",
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lu11.LuX, { size: 16 })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function ModalHeader({
+  children,
+  tone = "default",
+  divider = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "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__ */ (0, import_jsx_runtime30.jsx)(EntityIconBadge, { size: "md", shape: "circle", tone: TONE_BADGE[tone], children: TONE_ICON[tone] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  );
+}
+function ModalTitle({ children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: cn("text-heading-sm font-semibold text-default", className), ...rest, children });
+}
+function ModalDescription({ children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: cn("mt-0.5 text-body-xs text-default-secondary", className), ...rest, children });
+}
+function ModalBody({ children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("px-6 py-5", className), ...rest, children });
+}
+function ModalFooter({
+  children,
+  align = "end",
+  divider = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "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
+var import_react10 = require("react");
+var import_clsx29 = __toESM(require("clsx"), 1);
+var import_lu12 = require("react-icons/lu");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Drawer(props) {
+  if (!props.isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(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-text-default",
-    signal: "from-background-brand-tertiary to-cyan-50 text-text-brand",
-    ember: "from-amber-50 to-orange-50 text-text-danger",
-    moss: "from-emerald-50 to-lime-50 text-text-positive"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Panel, { className: (0, import_clsx20.default)("bg-gradient-to-br", tones[tone]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm uppercase tracking-[0.2em] text-slate-500", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-3 text-3xl font-semibold", children: value })
-  ] });
+  const panelRef = (0, import_react10.useRef)(null);
+  useOverlayDismiss(onClose, panelRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      className: (0, import_clsx29.default)("fixed inset-0 z-50 flex justify-end", OVERLAY_SCRIM),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        "aside",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label,
+          className: (0, import_clsx29.default)("relative flex h-full flex-col bg-default shadow-2xl", width, className),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-default p-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "min-w-0", children: header }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { variant: "subtle", size: "sm", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lu12.LuX, { size: 18 }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 space-y-6 overflow-y-auto p-6", children }),
+            footer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "div",
+              {
+                className: (0, import_clsx29.default)(
+                  "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__ */ (0, import_jsx_runtime21.jsx)("span", { className: (0, import_clsx20.default)("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__ */ (0, import_jsx_runtime21.jsx)("span", { className: (0, import_clsx20.default)("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
+var import_jsx_runtime32 = require("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__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xs uppercase tracking-[0.25em] text-text-brand", children: eyebrow }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "mt-2 text-2xl font-semibold text-text-default", children: title }),
-    detail ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-2 max-w-2xl text-sm text-slate-600", children: detail }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Modal, { isOpen, onClose, label: title, size, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ModalHeader, { tone, divider: Boolean(children), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ModalTitle, { children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ModalDescription, { children: subtitle })
+    ] }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ModalBody, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ModalFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "neutral", size: "md", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: confirmVariant, size: "md", disabled: isConfirming, onClick: onConfirm, children: isConfirming ? confirmingLabel : confirmLabel })
+    ] })
   ] });
 }
+
+// src/components/overlays/note-confirm-modal.tsx
+var import_react11 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function NoteConfirmModal({ isOpen, ...rest }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(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] = (0, import_react11.useState)("");
+  const disabled = isSubmitting || requireNote && !note.trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Modal, { isOpen: true, onClose, label: title, size, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ModalHeader, { tone, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ModalTitle, { children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ModalDescription, { children: subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      Textarea,
+      {
+        value: note,
+        onChange: (e) => setNote(e.target.value),
+        placeholder: notePlaceholder,
+        rows: 4
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ModalFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: "neutral", size: "md", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: confirmVariant, size: "md", disabled, onClick: () => onConfirm(note.trim()), children: isSubmitting ? submittingLabel : confirmLabel })
+    ] })
+  ] });
+}
+
+// src/components/overlays/dropdown-menu.tsx
+var import_react12 = require("react");
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_lu13 = require("react-icons/lu");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function DropdownMenu({
+  items,
+  trigger,
+  label,
+  align = "right",
+  className
+}) {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const rootRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: (0, import_clsx30.default)("relative", className),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": label,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen((v) => !v);
+            },
+            className: (0, import_clsx30.default)(
+              "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__ */ (0, import_jsx_runtime34.jsx)(import_lu13.LuEllipsis, { className: "size-4" })
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            role: "menu",
+            className: (0, import_clsx30.default)(
+              "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__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+              item.separatorBefore && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "my-1 h-px bg-divider" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  disabled: item.disabled,
+                  className: (0, import_clsx30.default)(
+                    "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
+var import_jsx_runtime35 = require("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__ */ (0, import_jsx_runtime35.jsx)(
+    "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__ */ (0, import_jsx_runtime35.jsx)(
+    "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__ */ (0, import_jsx_runtime35.jsx)(
+    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__ */ (0, import_jsx_runtime35.jsx)(
+    "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__ */ (0, import_jsx_runtime35.jsx)(
+    "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__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsx)(
+    "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
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime36 = require("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__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tag, { className: (0, import_clsx31.default)(TITLE[size], truncateTitle && "truncate"), children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: SUBTITLE[size], children: subtitle })
+  ] });
+  if (!actions) return className ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className, children: heading }) : heading;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx31.default)("flex items-start justify-between gap-4", className), children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
+
+// src/components/chrome/page-toolbar.tsx
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime37 = require("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__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      className: (0, import_clsx32.default)(
+        "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
+var import_clsx33 = __toESM(require("clsx"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var GAP = {
+  sm: "gap-2",
+  md: "gap-3"
+};
+function FilterBar({ children, trailing, size = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: (0, import_clsx33.default)("flex flex-wrap items-center", GAP[size], className), children: [
+    children,
+    trailing && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+  ] });
+}
+
+// src/components/chrome/tabs.tsx
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime39 = require("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__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      role: "tablist",
+      className: (0, import_clsx34.default)(
+        "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__ */ (0, import_jsx_runtime39.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(tab.key),
+            className: (0, import_clsx34.default)(
+              "flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-colors",
+              s.tab,
+              isPill ? (0, import_clsx34.default)(
+                "font-medium",
+                active ? "bg-brand text-brand-on-brand" : "text-default-secondary hover:bg-default-secondary"
+              ) : (0, import_clsx34.default)(
+                "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__ */ (0, import_jsx_runtime39.jsx)(
+                "span",
+                {
+                  className: (0, import_clsx34.default)(
+                    "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
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_jsx_runtime40 = require("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__ */ (0, import_jsx_runtime40.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx35.default)(
+        "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__ */ (0, import_jsx_runtime40.jsx)("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: (0, import_clsx35.default)("min-w-0 flex-1 truncate font-regular leading-snug", s.label), children: label }),
+        indicator && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
+      ]
+    }
+  );
+}
+
+// src/components/chrome/eyebrow-label.tsx
+var import_clsx36 = __toESM(require("clsx"), 1);
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function EyebrowLabel({ children, variant = "uppercase", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    "p",
+    {
+      className: (0, import_clsx36.default)(
+        "text-body-tiny font-semibold tracking-wide text-default-secondary",
+        variant === "uppercase" && "uppercase",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/widgets/widget-header.tsx
+var import_clsx38 = __toESM(require("clsx"), 1);
+
+// src/components/widgets/widget-title.tsx
+var import_clsx37 = __toESM(require("clsx"), 1);
+var import_jsx_runtime42 = require("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__ */ (0, import_jsx_runtime42.jsx)("h3", { className: (0, import_clsx37.default)(sizeStyles5[size], "text-default", className), children });
+}
+
+// src/components/widgets/widget-header.tsx
+var import_jsx_runtime43 = require("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__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx38.default)("flex items-start justify-between gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: eyebrowStyles[eyebrowVariant], children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WidgetTitle, { size: titleSize, children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-1 text-body-xs text-default-secondary leading-snug", children: subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+      badge,
+      action
+    ] })
+  ] });
+}
+
+// src/components/widgets/widget-footer.tsx
+var import_clsx39 = __toESM(require("clsx"), 1);
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function WidgetFooter({ caption, subcaption, action, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx39.default)("flex items-center gap-3", className), children: [
+    caption && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-stretch gap-3 flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-0.5 shrink-0 self-stretch rounded-full bg-brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-body-sm font-medium text-default leading-snug", children: caption }),
+        subcaption && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: subcaption })
+      ] })
+    ] }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ml-auto shrink-0", children: action })
+  ] });
+}
+
+// src/components/stats/stat-tile.tsx
+var import_clsx40 = __toESM(require("clsx"), 1);
+var import_jsx_runtime45 = require("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__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx40.default)(
+        "flex flex-col gap-2 rounded-xl border border-default bg-default p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          showDot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "span",
+            {
+              className: (0, import_clsx40.default)("size-2 shrink-0 rounded-full", tone && DOT_TONE[tone]),
+              style: tone ? void 0 : { backgroundColor: dotColor }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-heading font-semibold text-default leading-none", children: value })
+      ]
+    }
+  );
+}
+
+// src/components/stats/stat-number.tsx
+var import_clsx41 = __toESM(require("clsx"), 1);
+var import_jsx_runtime46 = require("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__ */ (0, import_jsx_runtime46.jsxs)(
+    "p",
+    {
+      className: (0, import_clsx41.default)(sizeStyles6[size], weightStyles[weight], "leading-none", !color && "text-default", className),
+      style: color ? { color } : void 0,
+      children: [
+        value,
+        unit && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ml-1 text-subheading font-medium text-default-secondary", children: unit })
+      ]
+    }
+  );
+}
+
+// src/components/stats/score-value.tsx
+var import_clsx42 = __toESM(require("clsx"), 1);
+var import_jsx_runtime47 = require("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__ */ (0, import_jsx_runtime47.jsxs)("span", { className: (0, import_clsx42.default)("inline-flex items-baseline gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: (0, import_clsx42.default)(SIZE6[size], WEIGHT[weight], TONE2[resolved]), children: value }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-body-xs text-default-secondary whitespace-nowrap", children: label })
+  ] });
+}
+
+// src/components/stats/tile-grid.tsx
+var import_clsx43 = __toESM(require("clsx"), 1);
+var import_jsx_runtime48 = require("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__ */ (0, import_jsx_runtime48.jsx)("div", { className: (0, import_clsx43.default)("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
+var import_clsx44 = __toESM(require("clsx"), 1);
+var import_jsx_runtime49 = require("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__ */ (0, import_jsx_runtime49.jsx)(
+    "div",
+    {
+      className: (0, import_clsx44.default)("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__ */ (0, import_jsx_runtime49.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx44.default)("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__ */ (0, import_jsx_runtime49.jsx)("span", { className: (0, import_clsx44.default)("truncate text-default-secondary", labelClass2), children: category }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                "div",
+                {
+                  className: (0, import_clsx44.default)("flex", horizontal ? "items-center gap-2" : "w-full flex-1 items-end justify-center"),
+                  style: horizontal ? void 0 : { height: length },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "div",
+                      {
+                        className: (0, import_clsx44.default)("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__ */ (0, import_jsx_runtime49.jsx)(
+                            "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__ */ (0, import_jsx_runtime49.jsx)("span", { className: (0, import_clsx44.default)("shrink-0 tabular-nums text-default-secondary", labelClass2), children: categoryTotals[ci] })
+                  ]
+                }
+              ),
+              showLabels && !horizontal && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: (0, import_clsx44.default)("truncate text-center text-default-secondary", labelClass2), children: category })
+            ]
+          },
+          category
+        );
+      })
+    }
+  );
+}
+
+// src/components/charts/donut-chart.tsx
+var import_clsx45 = __toESM(require("clsx"), 1);
+var import_jsx_runtime50 = require("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__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx45.default)("relative inline-flex shrink-0 items-center justify-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      "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__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsx)(
+              "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__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: [
+      centerValue != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-subheading-sm font-bold leading-none text-default", children: centerValue }),
+      centerLabel != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "mt-0.5 text-body-tiny text-default-secondary", children: centerLabel })
+    ] })
+  ] });
+}
+
+// src/components/charts/radial-gauge.tsx
+var import_clsx46 = __toESM(require("clsx"), 1);
+var import_jsx_runtime51 = require("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__ */ (0, import_jsx_runtime51.jsxs)("div", { className: (0, import_clsx46.default)("relative inline-flex shrink-0 items-center justify-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      "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__ */ (0, import_jsx_runtime51.jsx)(
+            "circle",
+            {
+              cx: box / 2,
+              cy: box / 2,
+              r: radius,
+              fill: "none",
+              stroke: CHART_TRACK,
+              strokeWidth: ring,
+              strokeDasharray: `${arc} ${circumference - arc}`,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            "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__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: [
+      children === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx46.default)("font-bold leading-none text-default", preset.value), children: value }) : children,
+      centerLabel != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "mt-0.5 text-body-tiny text-default-secondary", children: centerLabel })
+    ] })
+  ] });
+}
+
+// src/components/charts/sparkline.tsx
+var import_react13 = require("react");
+var import_clsx47 = __toESM(require("clsx"), 1);
+var import_jsx_runtime52 = require("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 = (0, import_react13.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__ */ (0, import_jsx_runtime52.jsxs)(
+    "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: (0, import_clsx47.default)("block shrink-0", className),
+      children: [
+        variant === "area" && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("stop", { offset: "0%", stopColor: stroke, stopOpacity: 0.24 }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("stop", { offset: "100%", stopColor: stroke, stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          "polyline",
+          {
+            points,
+            stroke,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none"
+          }
+        ),
+        showEndDot && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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
+var import_clsx48 = __toESM(require("clsx"), 1);
+var import_jsx_runtime53 = require("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__ */ (0, import_jsx_runtime53.jsx)(
+    "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: (0, import_clsx48.default)("block shrink-0", className),
+      children: bars.map((v, i) => {
+        const magnitude = Math.max(2, v / max * extent);
+        const offset = i * (barThickness + g);
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          "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
+var import_clsx50 = __toESM(require("clsx"), 1);
+
+// src/components/charts/legend-dot.tsx
+var import_clsx49 = __toESM(require("clsx"), 1);
+var import_jsx_runtime54 = require("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__ */ (0, import_jsx_runtime54.jsx)(
+    "span",
+    {
+      className: (0, import_clsx49.default)("inline-block shrink-0", SHAPE[shape][size], className),
+      style: { backgroundColor: resolveChartColor(color, tone) },
+      "aria-hidden": true
+    }
+  );
+}
+
+// src/components/charts/chart-legend.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function ChartLegend({
+  items,
+  orientation = "vertical",
+  size = "md",
+  shape = "dot",
+  className
+}) {
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "div",
+    {
+      className: (0, import_clsx50.default)(
+        horizontal ? "flex flex-wrap items-center gap-x-4 gap-y-2" : "flex flex-col gap-3",
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx50.default)("flex items-center gap-2", horizontal ? "min-w-0" : "justify-between"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LegendDot, { color: resolveChartColor(item.color, item.tone, i), size, shape }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate text-body-xs text-default-secondary", children: item.label })
+            ] }),
+            item.count != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "shrink-0 text-body-xs font-semibold tabular-nums text-default", children: item.count })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+}
+
+// src/components/charts/trend-label.tsx
+var import_clsx51 = __toESM(require("clsx"), 1);
+var import_lu14 = require("react-icons/lu");
+var import_jsx_runtime56 = require("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 ? import_lu14.LuTrendingUp : import_lu14.LuTrendingDown;
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx51.default)(
+        "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__ */ (0, import_jsx_runtime56.jsx)(Arrow, { className: (0, import_clsx51.default)("shrink-0", ICON_SIZE[size]), "aria-hidden": true }),
+        rising ? "+" : "",
+        value,
+        suffix
+      ]
+    }
+  );
+}
+
+// src/components/lists/list-row.tsx
+var import_clsx52 = __toESM(require("clsx"), 1);
+var import_jsx_runtime57 = require("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__ */ (0, import_jsx_runtime57.jsxs)(
+    Tag,
+    {
+      className: (0, import_clsx52.default)(
+        "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__ */ (0, import_jsx_runtime57.jsxs)("div", { className: (0, import_clsx52.default)("flex min-w-0 flex-1 flex-col", d.gap), children: [
+          hasTitleLine && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+              leading,
+              title != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: (0, import_clsx52.default)("truncate", d.title), children: title }),
+              titleMeta && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "shrink-0", children: titleMeta })
+            ] }),
+            meta && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "shrink-0", children: meta })
+          ] }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: d.description, children: description }),
+          footer
+        ] }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ml-3 flex shrink-0 items-center self-center", children: trailing })
+      ]
+    }
+  );
+}
+
+// src/components/lists/file-row.tsx
+var import_clsx53 = __toESM(require("clsx"), 1);
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function FileTypeBadge({ type }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsx)(FileTypeBadge, { type: fileType }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx53.default)(
+        "flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5",
+        className
+      ),
+      children: [
+        lead,
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate text-body-sm font-medium text-default", children: name }),
+          detail && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-body-xs text-default-secondary", children: detail })
+        ] }),
+        (onDownload || actions) && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex shrink-0 items-center gap-3", children: [
+          onDownload && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onDownload,
+              className: "text-body-xs font-medium text-brand hover:underline",
+              children: downloadLabel
+            }
+          ),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/lists/scored-row.tsx
+var import_clsx54 = __toESM(require("clsx"), 1);
+var import_jsx_runtime59 = require("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__ */ (0, import_jsx_runtime59.jsxs)("div", { className: (0, import_clsx54.default)("flex w-full", ALIGN[align], GAP2[gap], className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx54.default)(
+          "flex min-w-0",
+          ALIGN[align],
+          GAP2[leadingGap ?? gap],
+          titleWidth ? "shrink-0" : "flex-1"
+        ),
+        style: titleWidth ? { width: titleWidth } : void 0,
+        children: [
+          leading,
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "truncate text-body-sm font-medium leading-none text-default", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "mt-0.5 truncate text-body-xs text-default-secondary", children: subtitle })
+          ] })
+        ]
+      }
+    ),
+    aside && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "div",
+      {
+        className: (0, import_clsx54.default)("min-w-0", asideWidth ? "shrink-0" : "flex-1"),
+        style: asideWidth ? { width: asideWidth } : void 0,
+        children: aside
+      }
+    ),
+    meter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "div",
+      {
+        className: (0, import_clsx54.default)("min-w-0", meterWidth ? "shrink-0" : "flex-1"),
+        style: meterWidth ? { width: meterWidth } : void 0,
+        children: meter
+      }
+    ),
+    trailing && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 text-right", style: trailingWidth ? { width: trailingWidth } : void 0, children: trailing })
+  ] });
+}
+
+// src/components/lists/ranked-row.tsx
+var import_clsx55 = __toESM(require("clsx"), 1);
+
+// src/components/feedback/progress-bar.tsx
+var import_jsx_runtime60 = require("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__ */ (0, import_jsx_runtime60.jsx)(
+    "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__ */ (0, import_jsx_runtime60.jsx)(
+        "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__ */ (0, import_jsx_runtime60.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-body-xs text-default-secondary", children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "ml-auto text-body-xs font-medium tabular-nums text-default", children: [
+        Math.round(clamped),
+        "%"
+      ] })
+    ] }),
+    track
+  ] });
+}
+
+// src/components/lists/ranked-row.tsx
+var import_jsx_runtime61 = require("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__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_clsx55.default)("flex w-full shrink-0 flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+        rank !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "w-[14px] shrink-0 text-body-xs font-bold text-default-secondary", children: rank }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-col gap-px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "truncate text-body-sm font-medium leading-none text-default", children: name }),
+          sublabel && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-body-tiny text-default-tertiary", children: sublabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        ScoreValue,
+        {
+          value: score,
+          size: scoreSize,
+          weight: scoreWeight,
+          tone: resolved,
+          className: "ml-2 shrink-0"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ProgressBar, { value: score, tone: resolved, "aria-label": `${name} score` })
+  ] });
+}
+
+// src/components/lists/icon-text-row.tsx
+var import_clsx56 = __toESM(require("clsx"), 1);
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function IconTextRow({ icon, title, detail, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: (0, import_clsx56.default)("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-brand-tertiary text-brand", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-body-sm font-semibold text-default", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: detail })
+    ] })
+  ] });
+}
+
+// src/components/lists/checklist-row.tsx
+var import_clsx57 = __toESM(require("clsx"), 1);
+var import_lu15 = require("react-icons/lu");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function ChecklistRow({ label, state, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("li", { className: (0, import_clsx57.default)("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center", children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lu15.LuCheck, { className: "size-4 text-positive", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      "span",
+      {
+        className: (0, import_clsx57.default)(
+          "size-3.5 rounded-full border-2",
+          state === "active" ? "animate-pulse border-brand-emphasis border-t-transparent" : "border-disabled"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      "span",
+      {
+        className: (0, import_clsx57.default)(
+          "text-body-sm",
+          state === "pending" ? "text-default-tertiary" : "font-semibold text-default"
+        ),
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/components/lists/numbered-steps-list.tsx
+var import_clsx58 = __toESM(require("clsx"), 1);
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function NumberedStepsList({ steps, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ol", { className: (0, import_clsx58.default)("flex flex-col gap-1.5", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { className: "flex items-start gap-2 text-[12px] text-default", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("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
+var import_clsx59 = __toESM(require("clsx"), 1);
+var import_jsx_runtime65 = require("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__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_clsx59.default)("flex gap-3 text-body-xs", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "w-[120px] shrink-0 text-default-secondary", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "min-w-0 flex-1 text-default", children: shown })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_clsx59.default)("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-body-tiny font-medium text-default-secondary", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-body-sm font-medium text-default", children: shown }),
+    detail && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-body-xs text-default-secondary", children: detail })
+  ] });
+}
+function MetaFieldGrid({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: (0, import_clsx59.default)("flex flex-wrap gap-x-4 gap-y-3.5", className), children });
+}
+
+// src/components/lists/checked-group-list.tsx
+var import_clsx60 = __toESM(require("clsx"), 1);
+var import_lu16 = require("react-icons/lu");
+var import_jsx_runtime66 = require("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__ */ (0, import_jsx_runtime66.jsx)("p", { className: (0, import_clsx60.default)("text-body-xs text-default-secondary", className), children: emptyLabel });
+  }
+  const glyph = icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lu16.LuCheck, { className: "size-3.5", strokeWidth: 2.5, "aria-hidden": true }) : icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: (0, import_clsx60.default)(COLUMNS2[columns], "gap-x-6", className), children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "mb-5 break-inside-avoid last:mb-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "mb-2 text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: group.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ul", { className: "space-y-1.5", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("li", { className: "flex items-center gap-2 text-body-xs text-default", children: [
+      glyph && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "shrink-0", children: glyph }),
+      item
+    ] }, item)) })
+  ] }, group.label)) });
+}
+
+// src/components/lists/data-table.tsx
+var import_clsx61 = __toESM(require("clsx"), 1);
+var import_jsx_runtime67 = require("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__ */ (0, import_jsx_runtime67.jsx)("div", { className: (0, import_clsx61.default)("overflow-x-auto rounded-xl border border-default bg-default", className), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("table", { className: "w-full table-fixed border-collapse text-left", style: { minWidth }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsx)("col", { style: col.grow ? void 0 : { width: col.width } }, col.key)
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tr", { className: "bg-default-secondary", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { scope: "col", className: (0, import_clsx61.default)("overflow-hidden", d.headerCell, d.headerText), children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tbody", { children: rows.length === 0 ? emptyLabel && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "td",
+      {
+        colSpan: columns.length,
+        className: (0, import_clsx61.default)(d.bodyCell, "text-center text-body-sm text-default-secondary"),
+        children: emptyLabel
+      }
+    ) }) : rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "tr",
+      {
+        className: (0, import_clsx61.default)(
+          "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__ */ (0, import_jsx_runtime67.jsx)("td", { className: (0, import_clsx61.default)("overflow-hidden", d.bodyCell, ALIGN2[align]), children: col.render(row) }, col.key))
+      },
+      getRowKey(row, i)
+    )) })
+  ] }) });
+}
+function TableCellLeadText({ primary, secondary, size = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx61.default)("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "span",
+      {
+        className: (0, import_clsx61.default)(
+          "font-medium leading-snug text-default",
+          size === "sm" ? "text-body-xs" : "text-body-sm"
+        ),
+        children: primary
+      }
+    ),
+    secondary && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "span",
+      {
+        className: (0, import_clsx61.default)(
+          "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__ */ (0, import_jsx_runtime67.jsx)(
+    "span",
+    {
+      className: (0, import_clsx61.default)(
+        "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__ */ (0, import_jsx_runtime67.jsx)(
+    "span",
+    {
+      className: (0, import_clsx61.default)(
+        "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__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx61.default)("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ProgressBar, { value: clamped, tone, size: "sm", className: "w-16", "aria-label": `${clamped}%` }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+      "span",
+      {
+        className: (0, import_clsx61.default)(
+          "leading-none text-default-secondary",
+          size === "sm" ? "text-[10px]" : "text-body-tiny"
+        ),
+        children: [
+          percent,
+          "%"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/feedback/inline-alert.tsx
+var import_clsx62 = __toESM(require("clsx"), 1);
+var import_lu17 = require("react-icons/lu");
+var import_jsx_runtime68 = require("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__ */ (0, import_jsx_runtime68.jsx)(import_lu17.LuInfo, { className: "size-4" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lu17.LuTriangleAlert, { className: "size-4" }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lu17.LuTriangleAlert, { className: "size-4" }),
+  positive: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lu17.LuCircleCheckBig, { className: "size-4" })
+};
+function InlineAlert({ tone, children, icon, className }) {
+  const glyph = icon === void 0 ? toneIcons[tone] : icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    "div",
+    {
+      role: tone === "danger" ? "alert" : "status",
+      className: (0, import_clsx62.default)(
+        "flex items-start gap-2.5 rounded-xl border p-3.5 text-body-xs",
+        toneStyles3[tone],
+        className
+      ),
+      children: [
+        glyph && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "mt-px shrink-0", children: glyph }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "min-w-0", children })
+      ]
+    }
+  );
+}
+
+// src/components/feedback/empty-state.tsx
+var import_clsx63 = __toESM(require("clsx"), 1);
+var import_jsx_runtime69 = require("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__ */ (0, import_jsx_runtime69.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx63.default)(
+        "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__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-default-tertiary", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { children: message }),
+        action
+      ]
+    }
+  );
+}
+
+// src/components/forms/password-input.tsx
+var import_react14 = require("react");
+var import_lu18 = require("react-icons/lu");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react14.forwardRef)(function PasswordInput2(props, ref) {
+  const [visible, setVisible] = (0, import_react14.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    Input,
+    {
+      ref,
+      ...props,
+      type: visible ? "text" : "password",
+      trailingAction: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "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__ */ (0, import_jsx_runtime70.jsx)(import_lu18.LuEyeOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lu18.LuEye, { className: "size-4" })
+        }
+      )
+    }
+  );
+});
+
+// src/components/ai/ai-chat-bar.tsx
+var import_clsx64 = __toESM(require("clsx"), 1);
+var import_lu19 = require("react-icons/lu");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+function AIChatBar({
+  placeholder = "Ask Intelligence about any entity, supplier, or risk\u2026",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx64.default)(
+        "flex h-16 items-center gap-3 rounded-2xl border border-default bg-default px-6 shadow-panel",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "shrink-0 text-icon-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lu19.LuSearch, { className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "flex-1 text-body-sm text-default-tertiary truncate", children: placeholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          "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__ */ (0, import_jsx_runtime71.jsx)(import_lu19.LuArrowRight, { className: "size-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ai/ai-suggestion-chip.tsx
+var import_clsx65 = __toESM(require("clsx"), 1);
+var import_lu20 = require("react-icons/lu");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+function AISuggestionChip({ prompt, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: (0, import_clsx65.default)(
+        "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__ */ (0, import_jsx_runtime72.jsx)("span", { className: "shrink-0 text-icon-brand", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lu20.LuCpu, { className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "flex-1 text-body-sm text-default truncate", children: prompt }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "shrink-0 text-icon-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lu20.LuArrowRight, { className: "size-3.5", strokeWidth: 2.5 }) })
+      ]
+    }
+  );
+}
+
+// src/components/ai/quick-actions-bar.tsx
+var import_clsx66 = __toESM(require("clsx"), 1);
+var import_jsx_runtime73 = require("react/jsx-runtime");
+function QuickActionsBar({ actions, active, onSelect, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: (0, import_clsx66.default)("flex items-center gap-3 flex-wrap", className), children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect?.(action.value),
+      className: "focus:outline-none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        TagPill,
+        {
+          label: action.label,
+          tone: active === action.value ? "brand" : "default"
+        }
+      )
+    },
+    action.value
+  )) });
+}
+
+// src/components/decorative/aurora-backdrop.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+function AuroraBackdrop() {
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "pointer-events-none absolute inset-0", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsx)("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
+var import_jsx_runtime75 = require("react/jsx-runtime");
+function solid(path, displayName) {
+  const Component = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", className, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("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__ */ (0, import_jsx_runtime75.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", className, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("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" }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  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.cjs.map