@cytario/design 1.13.0 → 1.14.0

package/dist/index.js

@@ -2143,33 +2143,137 @@ function SegmentedControlItem({
 
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
 import { AlertCircle, Database, Info as Info2 } from "lucide-react";
+import { twMerge as twMerge9 } from "tailwind-merge";
+
+// src/components/Pill/Pill.tsx
 import { twMerge as twMerge7 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var HASH_PALETTE = [
+  "teal",
+  // sky
+  "amber",
+  // amber
+  "green",
+  // emerald
+  "rose",
+  // rose
+  "purple",
+  // violet
+  "amber",
+  // orange  (mapped to amber -- closest warm token)
+  "teal",
+  // teal
+  "rose"
+  // fuchsia (mapped to rose -- closest pink token)
+];
+function pillColorFromName(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return HASH_PALETTE[Math.abs(hash) % HASH_PALETTE.length];
+}
+var colorStyles = {
+  neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
+  purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
+  teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
+  rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
+  slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
+  green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
+  amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
+};
+var dotColorStyles = {
+  neutral: "bg-[var(--color-badge-neutral-text)]",
+  purple: "bg-[var(--color-badge-purple-text)]",
+  teal: "bg-[var(--color-badge-teal-text)]",
+  rose: "bg-[var(--color-badge-rose-text)]",
+  slate: "bg-[var(--color-badge-slate-text)]",
+  green: "bg-[var(--color-badge-green-text)]",
+  amber: "bg-[var(--color-badge-amber-text)]"
+};
+function resolveColor(color, name) {
+  if (color && color !== "auto") return color;
+  if (name) return pillColorFromName(name);
+  return "neutral";
+}
+function Pill({ children, color, name, className }) {
+  const resolved = resolveColor(color, name);
+  return /* @__PURE__ */ jsx30(
+    "span",
+    {
+      className: twMerge7(
+        "inline-flex items-center rounded-full",
+        "px-2 py-0.5",
+        "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
+        colorStyles[resolved],
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/Pill/GroupPill.tsx
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+function GroupPill({
+  path,
+  visibleCount = 3,
+  className
+}) {
+  const segments = path.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean);
+  if (segments.length === 0) return null;
+  const hiddenCount = Math.max(0, segments.length - visibleCount);
+  const hiddenSegments = segments.slice(0, hiddenCount);
+  const visibleSegments = segments.slice(hiddenCount);
+  return /* @__PURE__ */ jsxs20(
+    "span",
+    {
+      className: twMerge8(
+        "inline-flex items-center gap-1",
+        className
+      ),
+      "aria-label": `Group: ${segments.join(" / ")}`,
+      children: [
+        hiddenSegments.map((segment, index) => {
+          const color = pillColorFromName(segment);
+          return /* @__PURE__ */ jsx31(
+            "span",
+            {
+              className: twMerge8(
+                "inline-block size-2 shrink-0 rounded-full",
+                dotColorStyles[color]
+              ),
+              "aria-hidden": "true",
+              title: segment
+            },
+            `dot-${index}-${segment}`
+          );
+        }),
+        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx31(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
+      ]
+    }
+  );
+}
+
+// src/components/StorageConnectionCard/StorageConnectionCard.tsx
+import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-[var(--color-status-success)]",
   error: "border-2 border-[var(--color-status-danger)] bg-transparent",
   loading: "bg-[var(--color-status-warning)] animate-pulse"
 };
 var providerConfig = {
-  aws: { label: "AWS", color: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]" },
-  azure: { label: "Azure", color: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]" },
-  gcp: { label: "GCP", color: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]" },
-  minio: { label: "MinIO", color: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]" }
+  aws: { label: "AWS", color: "purple" },
+  azure: { label: "Azure", color: "teal" },
+  gcp: { label: "GCP", color: "slate" },
+  minio: { label: "MinIO", color: "rose" }
 };
 function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
-  const colorClass = config?.color ?? "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]";
-  return /* @__PURE__ */ jsx30(
-    "span",
-    {
-      className: twMerge7(
-        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
-        colorClass
-      ),
-      children: label
-    }
-  );
+  const color = config?.color ?? "neutral";
+  return /* @__PURE__ */ jsx32(Pill, { color, children: label });
 }
 function PreviewArea({
   status = "connected",
@@ -2177,11 +2281,11 @@ function PreviewArea({
   children
 }) {
   if (status === "loading") {
-    return /* @__PURE__ */ jsx30("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx30(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+    return /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
-      /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
+      /* @__PURE__ */ jsx32(
         Icon,
         {
           icon: AlertCircle,
@@ -2189,13 +2293,13 @@ function PreviewArea({
           className: "text-[var(--color-text-danger)]"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx30("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx32("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
     ] });
   }
   if (children) {
-    return /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-hidden", children });
+    return /* @__PURE__ */ jsx32("div", { className: "h-full w-full overflow-hidden", children });
   }
-  return /* @__PURE__ */ jsx30("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32(
     Icon,
     {
       icon: Database,
@@ -2216,22 +2320,22 @@ function StorageConnectionCard({
   onInfo,
   className
 }) {
-  const cardContent = /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    /* @__PURE__ */ jsx30("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx30(PreviewArea, { status, errorMessage, children }) }),
-    /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-2", children: [
-        status && /* @__PURE__ */ jsx30(
+  const cardContent = /* @__PURE__ */ jsxs21(Fragment8, { children: [
+    /* @__PURE__ */ jsx32("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx32(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-2", children: [
+        status && /* @__PURE__ */ jsx32(
           "span",
           {
-            className: twMerge7(
+            className: twMerge9(
               "mt-1.5 h-2 w-2 shrink-0 rounded-full",
               statusDotStyles[status]
             ),
             "aria-label": `Status: ${status}`
           }
         ),
-        /* @__PURE__ */ jsx30("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
-        onInfo && /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
+        onInfo && /* @__PURE__ */ jsx32(
           IconButton,
           {
             icon: Info2,
@@ -2245,10 +2349,10 @@ function StorageConnectionCard({
           }
         )
       ] }),
-      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs20("div", { className: twMerge7("flex items-center gap-2", status && "pl-4"), children: [
-        provider && /* @__PURE__ */ jsx30(ProviderBadge, { provider }),
-        provider && region && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
-        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs20("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
+      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs21("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: [
+        provider && /* @__PURE__ */ jsx32(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx32("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs21("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
           imageCount,
           " ",
           imageCount === 1 ? "image" : "images"
@@ -2256,7 +2360,7 @@ function StorageConnectionCard({
       ] })
     ] })
   ] });
-  const baseStyles = twMerge7(
+  const baseStyles = twMerge9(
     "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
     "border border-[var(--color-border-default)]",
     "shadow-sm transition-all",
@@ -2264,14 +2368,14 @@ function StorageConnectionCard({
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx30("a", { href, className: twMerge7(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx32("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
   }
-  return /* @__PURE__ */ jsx30("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx32("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
   purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
@@ -2296,10 +2400,10 @@ function Badge({
   icon: IconComponent,
   className
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "span",
     {
-      className: twMerge8(
+      className: twMerge10(
         "inline-flex items-center gap-1 rounded-[var(--border-radius-full)]",
         "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
         variantStyles4[variant],
@@ -2307,7 +2411,7 @@ function Badge({
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx31(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx33(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2315,8 +2419,8 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { twMerge as twMerge9 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2333,28 +2437,28 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href;
-  const containerClass = twMerge9(
+  const containerClass = twMerge11(
     "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
     isInteractive && "transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
     href && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs22(Fragment9, { children: [
-    header && /* @__PURE__ */ jsx32(
+  const content = /* @__PURE__ */ jsxs23(Fragment9, { children: [
+    header && /* @__PURE__ */ jsx34(
       "div",
       {
-        className: twMerge9(
+        className: twMerge11(
           "border-b border-[var(--color-border-default)]",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx34(
       "div",
       {
-        className: twMerge9(
+        className: twMerge11(
           "border-t border-[var(--color-border-default)]",
           paddingStyles[padding]
         ),
@@ -2363,15 +2467,15 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx32("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx34("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx32("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx34("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge10 } from "tailwind-merge";
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2424,16 +2528,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "span",
       {
-        className: twMerge10(
+        className: twMerge12(
           "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
           "text-[var(--color-text-tertiary)]",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx33("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          label && /* @__PURE__ */ jsx35("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2441,7 +2545,7 @@ function DeltaIndicator({
   }
   const diff = current - previous;
   const direction = getDirection(current, previous);
-  const colorStyles = reverseColor ? reverseDirectionColors[direction] : directionColors[direction];
+  const colorStyles2 = reverseColor ? reverseDirectionColors[direction] : directionColors[direction];
   const IconComponent = directionIcons[direction];
   const isNew = previous === 0 && current > 0;
   let valueText;
@@ -2463,12 +2567,12 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "span",
     {
-      className: twMerge10(
+      className: twMerge12(
         "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
-        colorStyles,
+        colorStyles2,
         isPill && [
           "rounded-[var(--border-radius-full)] px-2 py-0.5",
           "text-[length:var(--font-size-xs)]",
@@ -2477,8 +2581,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx33("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
-        /* @__PURE__ */ jsx33(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx35("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+        /* @__PURE__ */ jsx35(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2486,8 +2590,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-[var(--color-progress-fill)]",
   success: "bg-[var(--color-progress-fill-success)]",
@@ -2510,12 +2614,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs24("div", { className: twMerge11("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx34("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
-      /* @__PURE__ */ jsx34("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs25("div", { className: twMerge13("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx36(
       "div",
       {
         role: "progressbar",
@@ -2523,14 +2627,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge11(
+        className: twMerge13(
           "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
           sizeStyles8[size]
         ),
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx36(
           "div",
           {
-            className: twMerge11(
+            className: twMerge13(
               "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2551,8 +2655,8 @@ import {
   CheckCircle2,
   X as X3
 } from "lucide-react";
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info3,
@@ -2596,40 +2700,40 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       role: config.role,
-      className: twMerge12(
+      className: twMerge14(
         "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)]",
         "text-[length:var(--font-size-sm)]",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx37(
           IconComponent,
           {
             size: 20,
-            className: twMerge12("shrink-0 mt-0.5", config.iconClass),
+            className: twMerge14("shrink-0 mt-0.5", config.iconClass),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs25("span", { className: "font-[number:var(--font-weight-medium)]", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs26("span", { className: "font-[number:var(--font-weight-medium)]", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx35(
+        dismissible && /* @__PURE__ */ jsx37(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx35(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx37(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -2638,8 +2742,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -2661,30 +2765,209 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge13(
+  const containerClass = twMerge15(
     "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs26(Fragment10, { children: [
-    /* @__PURE__ */ jsx36("div", { className: twMerge13(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
-    /* @__PURE__ */ jsx36(
+  const content = /* @__PURE__ */ jsxs27(Fragment10, { children: [
+    /* @__PURE__ */ jsx38("div", { className: twMerge15(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
+    /* @__PURE__ */ jsx38(
       "div",
       {
-        className: twMerge13(
+        className: twMerge15(
           config.valueClass,
           "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx36("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx38("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx38("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx36("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx38("div", { className: containerClass, children: content });
+}
+
+// src/components/SectionHeader/SectionHeader.tsx
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+function SectionHeader({
+  title,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      className: twMerge16(
+        "flex flex-wrap items-center gap-[var(--spacing-3)] py-[var(--spacing-4)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx39(H2, { children: title }),
+        children && /* @__PURE__ */ jsx39("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
+      ]
+    }
+  );
+}
+
+// src/components/FormWizard/FormWizard.tsx
+import { createContext as createContext5, useContext as useContext5, useCallback as useCallback3, useMemo } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var FormWizardContext = createContext5({
+  currentStep: 0,
+  totalSteps: 1,
+  canGoBack: false,
+  goBack: () => {
+  },
+  isLastStep: true
+});
+function useFormWizard() {
+  return useContext5(FormWizardContext);
+}
+function FormWizard({
+  currentStep,
+  totalSteps,
+  onStepChange,
+  children
+}) {
+  const canGoBack = currentStep > 0;
+  const isLastStep = currentStep >= totalSteps - 1;
+  const goBack = useCallback3(() => {
+    if (currentStep > 0) {
+      onStepChange(currentStep - 1);
+    }
+  }, [currentStep, onStepChange]);
+  const value = useMemo(
+    () => ({
+      currentStep,
+      totalSteps,
+      canGoBack,
+      goBack,
+      isLastStep
+    }),
+    [currentStep, totalSteps, canGoBack, goBack, isLastStep]
+  );
+  return /* @__PURE__ */ jsx40(FormWizardContext.Provider, { value, children });
+}
+
+// src/components/FormWizard/FormWizardProgress.tsx
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+function CheckIcon2() {
+  return /* @__PURE__ */ jsx41(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-4 w-4 text-[var(--color-text-inverse)]",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx41("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+    }
+  );
+}
+function FormWizardProgress({ labels }) {
+  const { currentStep, totalSteps } = useFormWizard();
+  return /* @__PURE__ */ jsx41("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx41("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+    const isCompleted = index < currentStep;
+    const isCurrent = index === currentStep;
+    const isFuture = index > currentStep;
+    return /* @__PURE__ */ jsxs29(
+      "li",
+      {
+        className: "flex flex-1 flex-col items-center",
+        "aria-current": isCurrent ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsxs29("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx41(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: [
+                  "h-0.5 flex-1",
+                  index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
+                ].join(" ")
+              }
+            ) : /* @__PURE__ */ jsx41("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx41(
+              "div",
+              {
+                className: [
+                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
+                  "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
+                  "transition-colors",
+                  isCompleted ? "bg-[var(--color-brand-primary)] text-[var(--color-text-inverse)]" : "",
+                  isCurrent ? "border-2 border-[var(--color-brand-primary)] bg-[var(--color-surface-default)] text-[var(--color-brand-primary)]" : "",
+                  isFuture ? "border-2 border-[var(--color-border-default)] bg-[var(--color-surface-default)] text-[var(--color-text-tertiary)]" : ""
+                ].join(" "),
+                "aria-hidden": "true",
+                children: isCompleted ? /* @__PURE__ */ jsx41(CheckIcon2, {}) : index + 1
+              }
+            ),
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx41(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: [
+                  "h-0.5 flex-1",
+                  index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
+                ].join(" ")
+              }
+            ) : /* @__PURE__ */ jsx41("div", { className: "flex-1", "aria-hidden": "true" })
+          ] }),
+          /* @__PURE__ */ jsx41(
+            "span",
+            {
+              className: [
+                "mt-[var(--spacing-2)] text-center text-[length:var(--font-size-sm)]",
+                isCurrent ? "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]" : "font-[number:var(--font-weight-regular)] text-[var(--color-text-secondary)]"
+              ].join(" "),
+              children: label
+            }
+          )
+        ]
+      },
+      label
+    );
+  }) }) });
+}
+
+// src/components/FormWizard/FormWizardNav.tsx
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+function FormWizardNav({
+  onNext,
+  isSubmitting = false,
+  submitLabel = "Submit"
+}) {
+  const { canGoBack, goBack, isLastStep } = useFormWizard();
+  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
+    canGoBack && /* @__PURE__ */ jsx42(
+      Button,
+      {
+        variant: "secondary",
+        size: "lg",
+        onPress: goBack,
+        isDisabled: isSubmitting,
+        children: "Back"
+      }
+    ),
+    /* @__PURE__ */ jsx42(
+      Button,
+      {
+        variant: "primary",
+        size: "lg",
+        onPress: onNext,
+        isLoading: isSubmitting,
+        children: isLastStep ? submitLabel : "Next"
+      }
+    )
+  ] });
 }
 
 // src/tokens/tokens.ts
@@ -3096,6 +3379,10 @@ export {
   FontWeightMedium,
   FontWeightRegular,
   FontWeightSemibold,
+  FormWizard,
+  FormWizardNav,
+  FormWizardProgress,
+  GroupPill,
   H1,
   H2,
   H3,
@@ -3114,6 +3401,7 @@ export {
   Link,
   Menu,
   MetricCard,
+  Pill,
   Popover3 as Popover,
   PopoverContent,
   PopoverTrigger,
@@ -3123,6 +3411,7 @@ export {
   RadioGroup,
   RouterProvider,
   Row,
+  SectionHeader,
   SegmentedControl,
   SegmentedControlItem,
   Select,
@@ -3153,6 +3442,8 @@ export {
   TabPanel2 as UnstyledTabPanel,
   Tabs2 as UnstyledTabs,
   createToastBridge,
+  pillColorFromName,
+  useFormWizard,
   useInputGroup,
   useToast
 };