@datatechsolutions/ui 3.9.1 → 3.11.0

package/dist/{chunk-MT66VKLS.js → chunk-ZGVN23J4.js}

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
+var chunkZUU7G3PC_js = require('./chunk-ZUU7G3PC.js');
 var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
-var chunkSY4MUT5V_js = require('./chunk-SY4MUT5V.js');
 var chunkBHOT22QL_js = require('./chunk-BHOT22QL.js');
 var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
 var chunkS7KHTUHA_js = require('./chunk-S7KHTUHA.js');
@@ -12,12 +12,12 @@ var HeroIcons = require('@heroicons/react/24/outline');
 var jsxRuntime = require('react/jsx-runtime');
 var solid = require('@heroicons/react/20/solid');
 var Headless3 = require('@headlessui/react');
-var solid$1 = require('@heroicons/react/24/solid');
 var Popover = require('@radix-ui/react-popover');
 var clsx4 = require('clsx');
 var reactDom = require('react-dom');
 var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
+var solid$1 = require('@heroicons/react/24/solid');
 var reactTransitionProgress = require('react-transition-progress');
 var lucideReact = require('lucide-react');
 var d3Geo = require('d3-geo');
@@ -1800,94 +1800,84 @@ var StatusBadge = React9.forwardRef(function StatusBadge2({ status, label, size
     }
   );
 });
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-function StepTimeline({
+var accentStyles = {
+  indigo: {
+    currentPill: "bg-indigo-500/15 text-indigo-700 dark:bg-indigo-500/25 dark:text-indigo-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-indigo-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  },
+  blue: {
+    currentPill: "bg-blue-500/15 text-blue-700 dark:bg-blue-500/25 dark:text-blue-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-blue-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  },
+  emerald: {
+    currentPill: "bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/25 dark:text-emerald-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-emerald-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  },
+  violet: {
+    currentPill: "bg-violet-500/15 text-violet-700 dark:bg-violet-500/25 dark:text-violet-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-violet-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  }
+};
+var upcomingPill = "bg-slate-500/8 text-slate-400 dark:bg-white/5 dark:text-white/30";
+var upcomingDot = "bg-slate-200 text-slate-400 dark:bg-white/10 dark:text-white/30";
+var upcomingConnector = "bg-slate-200 dark:bg-white/10";
+function StepIndicator({
   steps,
+  currentStep,
+  onStepChange,
   progressLabel,
-  onStepClick,
-  renderCompleteContent
+  accent = "indigo"
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:border-t lg:border-b lg:border-gray-200 dark:lg:border-white/15", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": progressLabel, className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "ol",
-    {
-      role: "list",
-      className: "overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-r lg:border-l lg:border-gray-200 dark:lg:border-white/15",
-      children: steps.map((step, stepIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "relative overflow-hidden lg:flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const tone = accentStyles[accent];
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": progressLabel, className: "flex items-center gap-2", children: steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isCurrent = index === currentStep;
+    const isClickable = isCompleted && Boolean(onStepChange);
+    const pillTone = isCurrent ? tone.currentPill : isCompleted ? tone.completePill : upcomingPill;
+    const dotTone = isCurrent ? tone.currentDot : isCompleted ? tone.completeDot : upcomingDot;
+    const connectorTone = index < currentStep ? tone.connector : upcomingConnector;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
-          onClick: () => onStepClick?.(stepIndex),
-          disabled: step.status === "upcoming",
-          className: classNames(
-            step.status === "upcoming" ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800",
-            stepIndex === 0 ? "rounded-t-md border-b-0" : "",
-            stepIndex === steps.length - 1 ? "rounded-b-md border-t-0" : "",
-            "w-full overflow-hidden border border-gray-200 text-left transition-colors lg:border-0 dark:border-white/15"
-          ),
+          onClick: isClickable ? () => onStepChange?.(index) : void 0,
+          disabled: !isClickable && !isCurrent,
+          "aria-current": isCurrent ? "step" : void 0,
+          className: `flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200 backdrop-blur-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${pillTone} ${isClickable ? "cursor-pointer" : ""}`,
           children: [
-            step.status === "complete" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-gray-200 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full dark:group-hover:bg-white/20"
-                }
-              ),
-              renderCompleteContent ? renderCompleteContent(step) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames(stepIndex !== 0 ? "lg:pl-9" : "", "flex items-start px-6 py-5 text-sm font-medium"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 dark:bg-blue-500", children: /* @__PURE__ */ jsxRuntime.jsx(solid$1.CheckIcon, { "aria-hidden": "true", className: "h-5 w-5 text-white" }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-0.5 ml-4 flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: step.name }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: step.description })
-                ] })
-              ] })
-            ] }) : step.status === "current" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-current": "step", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "absolute top-0 left-0 h-full w-1 bg-blue-600 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full dark:bg-blue-500"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames(stepIndex !== 0 ? "lg:pl-9" : "", "flex items-start px-6 py-5 text-sm font-medium"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-full border-2 border-blue-600 dark:border-blue-500", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-600 dark:text-blue-400", children: step.id }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-0.5 ml-4 flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: step.name }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: step.description })
-                ] })
-              ] })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-gray-200 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full dark:group-hover:bg-white/20"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames(stepIndex !== 0 ? "lg:pl-9" : "", "flex items-start px-6 py-5 text-sm font-medium"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-full border-2 border-gray-300 dark:border-white/15", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: step.id }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-0.5 ml-4 flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: step.name }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: step.description })
-                ] })
-              ] })
-            ] }),
-            stepIndex !== 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 top-0 left-0 hidden w-3 lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
               {
-                fill: "none",
-                viewBox: "0 0 12 82",
-                preserveAspectRatio: "none",
-                className: "h-full w-full text-gray-200 dark:text-white/15",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.5 0V31L10.5 41L0.5 51V82", stroke: "currentColor", vectorEffect: "non-scaling-stroke" })
+                className: `flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold ${dotTone}`,
+                children: step.icon ? step.icon : isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckIcon, { className: "h-3 w-3" }) : index + 1
               }
-            ) }) : null
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: step.title })
           ]
         }
-      ) }, step.id))
-    }
-  ) }) });
+      ),
+      index < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: `h-px flex-1 transition-colors duration-200 ${connectorTone}`
+        }
+      ) : null
+    ] }, step.id);
+  }) });
 }
 function AgentAnalysisCard({ name, avatar, duration: duration2, output }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl p-3 transition-all duration-300", children: [
@@ -2099,10 +2089,12 @@ function LifecycleSection({ data }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-xl border border-zinc-950/10 bg-white p-4 dark:border-white/10 dark:bg-zinc-900", children: [
     data.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100", children: data.title }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      StepTimeline,
+      StepIndicator,
       {
-        steps: data.steps,
-        progressLabel: data.progressLabel ?? data.title ?? "Progress"
+        accent: "indigo",
+        currentStep: data.steps.filter((step) => step.status === "complete").length,
+        progressLabel: data.progressLabel ?? data.title ?? "Progress",
+        steps: data.steps.map((step) => ({ id: step.id, title: step.name }))
       }
     )
   ] });
@@ -2278,7 +2270,7 @@ function InputRequestForm({
     try {
       const payload = decision === "approved" ? sanitizeForSubmit(values) : void 0;
       const reason = decision === "rejected" ? typeof values.reason === "string" ? values.reason : "rejected" : void 0;
-      await chunkSY4MUT5V_js.submitApproval(runId, data.nodeId, {
+      await chunkZUU7G3PC_js.submitApproval(runId, data.nodeId, {
         approved: decision === "approved",
         ...payload ? { payload } : {},
         ...reason ? { reason } : {}
@@ -2526,7 +2518,7 @@ function StreamingDashboard({
     if (phase === "completed" || phase === "failed" || phase === "cancelled") {
       return;
     }
-    const unsubscribe = chunkSY4MUT5V_js.subscribeToRunEvents(
+    const unsubscribe = chunkZUU7G3PC_js.subscribeToRunEvents(
       runId,
       (event) => handleEvent(event),
       (err) => {
@@ -3230,54 +3222,54 @@ function InfoPopover({ title, content, triggerLabel = "Info" }) {
 }
 var colorClasses = {
   emerald: {
-    iconBg: "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/50 dark:text-emerald-400",
+    iconBg: "bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300",
     activeGradient: "from-emerald-500 to-teal-600",
     activeRing: "ring-emerald-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"
+    badgeBg: "border border-emerald-500/30 bg-emerald-500/20 text-emerald-700 dark:text-emerald-300"
   },
   blue: {
-    iconBg: "bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400",
+    iconBg: "bg-blue-500/15 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
     activeGradient: "from-blue-500 to-indigo-600",
     activeRing: "ring-indigo-500/70",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
+    badgeBg: "border border-blue-500/30 bg-blue-500/20 text-blue-700 dark:text-blue-300"
   },
   amber: {
-    iconBg: "bg-amber-100 text-amber-600 dark:bg-amber-900/50 dark:text-amber-400",
+    iconBg: "bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300",
     activeGradient: "from-amber-500 to-orange-600",
     activeRing: "ring-amber-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+    badgeBg: "border border-amber-500/30 bg-amber-500/20 text-amber-700 dark:text-amber-300",
     urgentValueColor: "text-amber-600 dark:text-amber-400"
   },
   orange: {
-    iconBg: "bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400",
+    iconBg: "bg-orange-500/15 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300",
     activeGradient: "from-orange-500 to-amber-600",
     activeRing: "ring-orange-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"
+    badgeBg: "border border-orange-500/30 bg-orange-500/20 text-orange-700 dark:text-orange-300"
   },
   indigo: {
-    iconBg: "bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400",
+    iconBg: "bg-indigo-500/15 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300",
     activeGradient: "from-indigo-500 to-blue-600",
     activeRing: "ring-indigo-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300"
+    badgeBg: "border border-indigo-500/30 bg-indigo-500/20 text-indigo-700 dark:text-indigo-300"
   },
   purple: {
-    iconBg: "bg-purple-100 text-purple-600 dark:bg-purple-900/50 dark:text-purple-400",
+    iconBg: "bg-purple-500/15 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300",
     activeGradient: "from-purple-500 to-indigo-600",
     activeRing: "ring-purple-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"
+    badgeBg: "border border-purple-500/30 bg-purple-500/20 text-purple-700 dark:text-purple-300"
   },
   red: {
-    iconBg: "bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400",
+    iconBg: "bg-red-500/15 text-red-700 dark:bg-red-500/20 dark:text-red-300",
     activeGradient: "from-red-500 to-rose-600",
     activeRing: "ring-red-500",
     valueColor: "text-red-600 dark:text-red-400",
-    badgeBg: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"
+    badgeBg: "border border-red-500/30 bg-red-500/20 text-red-700 dark:text-red-300"
   }
 };
 function StatCard({
@@ -3351,7 +3343,12 @@ function StatCard({
           badge && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: `mt-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${isActive ? "bg-white/20 text-white" : colorConfig.badgeBg}`,
+              style: isActive ? void 0 : {
+                backdropFilter: "blur(12px) saturate(1.5)",
+                WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+                boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
+              },
+              className: `mt-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${isActive ? "border border-white/30 bg-white/20 text-white backdrop-blur-sm" : colorConfig.badgeBg}`,
               children: badge
             }
           )
@@ -3455,6 +3452,11 @@ function getStatusColor(status) {
       return "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400";
   }
 }
+var CRYSTAL_STYLE2 = {
+  backdropFilter: "blur(12px) saturate(1.5)",
+  WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+  boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
+};
 function PriceChangeBadge({
   value,
   size = "md",
@@ -3464,13 +3466,15 @@ function PriceChangeBadge({
   const locale = chunkYXN2K77G_js.useLocale();
   if (value === null) return null;
   const isPositive = value >= 0;
-  const colorClasses3 = isPositive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400";
-  const sizeClasses3 = size === "sm" ? "px-2 py-1 text-xs" : "px-2.5 py-1 text-xs";
+  const toneClasses = isPositive ? "border-emerald-500/30 bg-emerald-500/20 text-emerald-700 dark:text-emerald-300" : "border-red-500/30 bg-red-500/20 text-red-700 dark:text-red-300";
+  const sizeClasses3 = size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-xs";
   const iconClasses = size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: `inline-flex items-center gap-1 rounded-full font-semibold ${colorClasses3} ${sizeClasses3} ${className}`,
+      role: "status",
+      style: CRYSTAL_STYLE2,
+      className: `inline-flex items-center gap-1 rounded-full border font-semibold ${toneClasses} ${sizeClasses3} ${className}`,
       children: [
         showIcon && (isPositive ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: iconClasses }) : /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingDownIcon, { className: iconClasses })),
         !showIcon && isPositive ? "+" : "",
@@ -3774,9 +3778,14 @@ function InlineSpinner({ size = "xs", className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size, color: "current", className });
 }
 var sizeClasses = {
-  xs: { icon: "h-2.5 w-2.5", text: "text-[10px]" },
-  sm: { icon: "h-3 w-3", text: "text-xs" },
-  md: { icon: "h-4 w-4", text: "text-sm" }
+  xs: { icon: "h-2.5 w-2.5", text: "text-[10px]", pad: "px-1.5 py-0.5" },
+  sm: { icon: "h-3 w-3", text: "text-xs", pad: "px-2 py-0.5" },
+  md: { icon: "h-4 w-4", text: "text-sm", pad: "px-2.5 py-1" }
+};
+var CRYSTAL_STYLE3 = {
+  backdropFilter: "blur(12px) saturate(1.5)",
+  WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+  boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
 };
 function defaultFormatValue(value, format3) {
   if (format3 === "percent") {
@@ -3791,20 +3800,42 @@ function GrowthIndicator({
   showValue = false,
   format: format3 = "percent",
   formatValue,
+  variant = "inline",
   className
 }) {
   const isPositive = value > 0;
   const isNegative = value < 0;
   const isNeutral = value === 0;
-  const colorClasses3 = isPositive ? "text-emerald-500" : isNegative ? "text-red-500" : "text-gray-500";
+  const inlineColorClasses = isPositive ? "text-emerald-500" : isNegative ? "text-red-500" : "text-slate-500";
+  const pillToneClasses = isPositive ? "border-emerald-500/30 bg-emerald-500/20 text-emerald-700 dark:text-emerald-300" : isNegative ? "border-red-500/30 bg-red-500/20 text-red-700 dark:text-red-300" : "border-slate-500/30 bg-slate-500/20 text-slate-700 dark:text-slate-300";
   const Icon = isPositive ? HeroIcons.ArrowTrendingUpIcon : HeroIcons.ArrowTrendingDownIcon;
-  const { icon: iconClass, text: textClass } = sizeClasses[size];
+  const { icon: iconClass, text: textClass, pad: padClass } = sizeClasses[size];
   const formatter = formatValue ?? defaultFormatValue;
   const formattedValue = formatter(value, format3);
   if (isNeutral && !showValue) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx4.clsx("inline-flex items-center gap-0.5", colorClasses3, className), children: [
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "status",
+        style: CRYSTAL_STYLE3,
+        className: clsx4.clsx(
+          "inline-flex items-center gap-1 rounded-full border font-semibold",
+          padClass,
+          textClass,
+          pillToneClasses,
+          className
+        ),
+        children: [
+          !isNeutral && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: iconClass }),
+          showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedValue })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx4.clsx("inline-flex items-center gap-0.5", inlineColorClasses, className), children: [
     !isNeutral && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: iconClass }),
     showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: formattedValue })
   ] });
@@ -6567,31 +6598,102 @@ function DialogActions({
     }
   );
 }
+var DEFAULT_UNSELECTED_STYLE = {
+  bg: "bg-slate-500/15",
+  text: "text-slate-700 dark:text-slate-200"
+};
+function slugify(raw) {
+  return raw.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
 function ChipPicker({
   items,
   selectedIds,
   onChange,
+  allowCustom = false,
+  onItemsChange,
+  unselectedStyle,
   isLoading = false,
   showActions = true,
   loadingLabel = "Loading...",
   selectedLabel = "selected",
   selectAllLabel = "Select all",
   clearLabel = "Clear",
-  emptyLabel = "No items configured"
+  emptyLabel = "No items configured",
+  addPlaceholder = "Add\u2026",
+  addAriaLabel = "Add new item"
 }) {
-  const toggleItem = (itemId) => {
+  const groupId = React9.useId();
+  const inputId = `${groupId}-add`;
+  const [draft, setDraft] = React9.useState("");
+  const styleForNew = unselectedStyle ?? DEFAULT_UNSELECTED_STYLE;
+  const toggleItem = React9.useCallback((itemId) => {
     if (selectedIds.includes(itemId)) {
       onChange(selectedIds.filter((id) => id !== itemId));
     } else {
       onChange([...selectedIds, itemId]);
     }
-  };
-  const selectAll = () => {
+  }, [selectedIds, onChange]);
+  const selectAll = React9.useCallback(() => {
     onChange(items.map((item) => item.id));
-  };
-  const clearAll = () => {
+  }, [items, onChange]);
+  const clearAll = React9.useCallback(() => {
     onChange([]);
-  };
+  }, [onChange]);
+  const existingIds = React9.useMemo(() => new Set(items.map((i) => i.id)), [items]);
+  const commitDraft = React9.useCallback((raw) => {
+    const trimmed = raw.trim();
+    if (!trimmed) {
+      setDraft("");
+      return;
+    }
+    if (!allowCustom || !onItemsChange) return;
+    const candidates = trimmed.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+    const additions = [];
+    const addedIds = [];
+    for (const candidate of candidates) {
+      const slug = slugify(candidate) || `item-${additions.length + items.length}`;
+      if (existingIds.has(slug) || additions.some((a) => a.id === slug)) {
+        if (!selectedIds.includes(slug)) addedIds.push(slug);
+        continue;
+      }
+      additions.push({
+        id: slug,
+        name: candidate,
+        style: styleForNew,
+        userCreated: true
+      });
+      addedIds.push(slug);
+    }
+    if (additions.length > 0) {
+      onItemsChange([...items, ...additions]);
+    }
+    if (addedIds.length > 0) {
+      const nextSelected = Array.from(/* @__PURE__ */ new Set([...selectedIds, ...addedIds]));
+      onChange(nextSelected);
+    }
+    setDraft("");
+  }, [allowCustom, onItemsChange, items, existingIds, selectedIds, onChange, styleForNew]);
+  const removeUserCreated = React9.useCallback((itemId) => {
+    if (!allowCustom || !onItemsChange) return;
+    const target = items.find((i) => i.id === itemId);
+    if (!target?.userCreated) return;
+    onItemsChange(items.filter((i) => i.id !== itemId));
+    if (selectedIds.includes(itemId)) {
+      onChange(selectedIds.filter((id) => id !== itemId));
+    }
+  }, [allowCustom, onItemsChange, items, selectedIds, onChange]);
+  const handleKeyDown = React9.useCallback((e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commitDraft(draft);
+    } else if (e.key === "Backspace" && draft.length === 0) {
+      const lastUserCreated = [...items].reverse().find((i) => i.userCreated);
+      if (lastUserCreated) {
+        e.preventDefault();
+        removeUserCreated(lastUserCreated.id);
+      }
+    }
+  }, [draft, commitDraft, items, removeUserCreated]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-gray-400", children: loadingLabel });
   }
@@ -6624,31 +6726,77 @@ function ChipPicker({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => {
-      const isSelected = selectedIds.includes(item.id);
-      const { style } = item;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "label",
-        {
-          className: `inline-flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition ${isSelected ? `${style.bg} ${style.text} border-transparent ring-2 ring-offset-1 ring-current` : "border-gray-200 bg-white/70 text-gray-700 hover:border-gray-300 dark:border-white/10 dark:bg-white/5 dark:text-gray-200"}`,
-          children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex flex-wrap items-center gap-2",
+        role: "group",
+        "aria-multiselectable": "true",
+        children: [
+          items.map((item) => {
+            const isSelected = selectedIds.includes(item.id);
+            const { style } = item;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: `inline-flex items-center gap-1.5 rounded-full border text-xs font-medium transition ${isSelected ? `${style.bg} ${style.text} border-transparent ring-2 ring-offset-1 ring-current` : "border-gray-200 bg-white/70 text-gray-700 hover:border-gray-300 dark:border-white/10 dark:bg-white/5 dark:text-gray-200"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "label",
+                    {
+                      className: "inline-flex cursor-pointer items-center gap-2 rounded-full px-3 py-1.5",
+                      "aria-selected": isSelected,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: isSelected,
+                            onChange: () => toggleItem(item.id),
+                            className: "sr-only"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex h-2 w-2 rounded-full ${isSelected ? "bg-current opacity-70" : style.bg}` }),
+                        item.abbreviation ? `${item.abbreviation} - ${item.name}` : item.name
+                      ]
+                    }
+                  ),
+                  allowCustom && item.userCreated && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove ${item.name}`,
+                      onClick: () => removeUserCreated(item.id),
+                      className: "liquid-surface mr-1 inline-flex h-5 w-5 items-center justify-center rounded-full text-current/70 hover:text-current focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-3 w-3" })
+                    }
+                  )
+                ]
+              },
+              item.id
+            );
+          }),
+          allowCustom && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-dashed border-slate-300 bg-white/50 px-2 py-1 text-xs dark:border-white/15 dark:bg-white/5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.PlusIcon, { className: "h-3 w-3 text-slate-500 dark:text-slate-400", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                type: "checkbox",
-                checked: isSelected,
-                onChange: () => toggleItem(item.id),
-                className: "sr-only"
+                id: inputId,
+                type: "text",
+                value: draft,
+                onChange: (e) => setDraft(e.target.value),
+                onKeyDown: handleKeyDown,
+                onBlur: () => commitDraft(draft),
+                placeholder: addPlaceholder,
+                "aria-label": addAriaLabel,
+                className: "min-w-[6rem] border-0 bg-transparent p-0 text-xs text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-0 dark:text-slate-100 dark:placeholder:text-slate-500"
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex h-2 w-2 rounded-full ${isSelected ? "bg-current opacity-70" : style.bg}` }),
-            item.abbreviation ? `${item.abbreviation} - ${item.name}` : item.name
-          ]
-        },
-        item.id
-      );
-    }) }),
-    items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center text-sm text-gray-500 dark:text-gray-400", children: emptyLabel })
+            )
+          ] })
+        ]
+      }
+    ),
+    items.length === 0 && !allowCustom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center text-sm text-gray-500 dark:text-gray-400", children: emptyLabel })
   ] });
 }
 var DEFAULT_COPYABLE_CLASSNAME = "liquid-surface-strong text-gray-500 dark:text-gray-400";
@@ -7203,6 +7351,39 @@ function TimePicker({
     ) })
   ] });
 }
+var completeStyles = "border-indigo-500 hover:border-indigo-600 dark:border-indigo-400 dark:hover:border-indigo-300";
+var currentStyles = "border-indigo-500 dark:border-indigo-400";
+var upcomingStyles = "border-slate-300 hover:border-slate-400 dark:border-white/10 dark:hover:border-white/20";
+var completeEyebrow = "text-indigo-700 group-hover:text-indigo-800 dark:text-indigo-300 dark:group-hover:text-indigo-200";
+var currentEyebrow = "text-indigo-700 dark:text-indigo-300";
+var upcomingEyebrow = "text-slate-500 group-hover:text-slate-700 dark:text-slate-400 dark:group-hover:text-slate-300";
+function StepProgress({ steps, progressLabel, onStepClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": progressLabel, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { role: "list", className: "space-y-4 md:flex md:space-y-0 md:space-x-8", children: steps.map((step, index) => {
+    const borderStyles = step.status === "complete" ? completeStyles : step.status === "current" ? currentStyles : upcomingStyles;
+    const eyebrowStyles = step.status === "complete" ? completeEyebrow : step.status === "current" ? currentEyebrow : upcomingEyebrow;
+    const isInteractive = step.status !== "upcoming" || Boolean(onStepClick);
+    const ariaCurrent = step.status === "current" ? "step" : void 0;
+    const handleClick = (event) => {
+      if (!onStepClick) return;
+      event.preventDefault();
+      onStepClick(index);
+    };
+    const baseClasses = "group flex flex-col border-l-4 py-2 pl-4 transition-colors md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 focus-visible:rounded-sm";
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "md:flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: step.href ?? "#",
+        "aria-current": ariaCurrent,
+        onClick: onStepClick ? handleClick : void 0,
+        className: `${baseClasses} ${borderStyles} ${isInteractive ? "" : "cursor-default"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm font-medium ${eyebrowStyles}`, children: step.id }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-900 dark:text-white", children: step.name })
+        ]
+      }
+    ) }, step.id);
+  }) }) });
+}
 function PageHeading({
   breadcrumbs,
   eyebrow,
@@ -7859,27 +8040,16 @@ function StepFormPage({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-slate-950 dark:text-white sm:text-3xl", children: steps[currentStep]?.title ?? title }),
         steps[currentStep]?.description ?? subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 max-w-xl text-sm text-slate-500 dark:text-white/60 sm:text-base", children: steps[currentStep]?.description ?? subtitle }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex items-center gap-2", children: steps.map((step, index) => {
-          const isCompleted = index < currentStep;
-          const isCurrent = index === currentStep;
-          const isClickable = index < currentStep;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => isClickable ? onStepChange(index) : void 0,
-                disabled: !isClickable && !isCurrent,
-                className: `flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200 ${isCurrent ? "bg-blue-500/15 text-blue-700 shadow-sm backdrop-blur-sm dark:bg-blue-500/25 dark:text-blue-300" : isCompleted ? "bg-emerald-500/10 text-emerald-700 cursor-pointer hover:bg-emerald-500/20 backdrop-blur-sm dark:bg-emerald-500/20 dark:text-emerald-300" : "bg-slate-500/8 text-slate-400 dark:bg-white/5 dark:text-white/30"}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold ${isCurrent ? "bg-blue-500 text-white" : isCompleted ? "bg-emerald-500 text-white" : "bg-slate-200 text-slate-400 dark:bg-white/10 dark:text-white/30"}`, children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckIcon, { className: "h-3 w-3" }) : index + 1 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: step.title })
-                ]
-              }
-            ),
-            index < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-px flex-1 transition-colors duration-200 ${index < currentStep ? "bg-emerald-500/30 dark:bg-emerald-500/20" : "bg-slate-200 dark:bg-white/10"}` }) : null
-          ] }, step.id);
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          StepIndicator,
+          {
+            steps: steps.map((step) => ({ id: step.id, title: step.title, icon: step.icon })),
+            currentStep,
+            onStepChange,
+            accent: "blue",
+            progressLabel: title
+          }
+        ) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-2xl p-6", children: [
@@ -7921,45 +8091,6 @@ function StepFormPage({
     ] })
   ] });
 }
-var BACK_BUTTON_CLASSES = "flex-1 px-4 py-3 border border-white/45 dark:border-white/14 bg-white/80 dark:bg-white/5 backdrop-blur-sm text-gray-900 dark:text-white rounded-xl hover:bg-white/90 dark:hover:bg-white/10 disabled:opacity-50 transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.88)]";
-var CONTINUE_BUTTON_CLASSES = "flex-1 px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-indigo-500/25 disabled:shadow-none";
-function StepNavigationButtons({
-  onBack,
-  isLoading,
-  backLabel,
-  continueLabel,
-  loadingLabel,
-  showSpinner = false,
-  type = "submit",
-  onContinue
-}) {
-  const displayLabel = isLoading && loadingLabel ? loadingLabel : continueLabel;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: onBack ? "flex gap-4" : "", children: [
-    onBack && backLabel && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onBack,
-        disabled: isLoading,
-        className: BACK_BUTTON_CLASSES,
-        children: backLabel
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type,
-        disabled: isLoading,
-        onClick: onContinue,
-        className: `${CONTINUE_BUTTON_CLASSES}${!onBack ? " w-full" : ""}`,
-        children: isLoading && showSpinner ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 animate-spin motion-reduce:animate-none rounded-full border-2 border-white border-t-transparent" }),
-          displayLabel
-        ] }) : displayLabel
-      }
-    )
-  ] });
-}
 var COLOR_MAP = {
   blue: {
     activeGradient: "bg-gradient-to-br from-blue-500 to-blue-600 ring-2 ring-indigo-500/70 shadow-lg",
@@ -20319,8 +20450,8 @@ exports.StatCardSkeleton = StatCardSkeleton;
 exports.StatusBadge = StatusBadge;
 exports.StatusToggle = StatusToggle;
 exports.StepFormPage = StepFormPage;
-exports.StepNavigationButtons = StepNavigationButtons;
-exports.StepTimeline = StepTimeline;
+exports.StepIndicator = StepIndicator;
+exports.StepProgress = StepProgress;
 exports.StreamingDashboard = StreamingDashboard;
 exports.Strong = Strong;
 exports.Subheading = Subheading;
@@ -20628,5 +20759,5 @@ exports.useSocialProviders = useSocialProviders;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-MT66VKLS.js.map
-//# sourceMappingURL=chunk-MT66VKLS.js.map
+//# sourceMappingURL=chunk-ZGVN23J4.js.map
+//# sourceMappingURL=chunk-ZGVN23J4.js.map