@cytario/design 2.3.0 → 2.4.0

package/dist/index.js

@@ -136,7 +136,7 @@ function Spinner({
   );
 }
 
-// src/components/InputGroup/InputGroupContext.ts
+// src/components/Form/InputGroup/InputGroupContext.ts
 import { createContext, useContext } from "react";
 var InputGroupContext = createContext({
   inGroup: false,
@@ -325,7 +325,7 @@ function IconButton({
   return button;
 }
 
-// src/components/Input/Input.tsx
+// src/components/Form/Input/Input.tsx
 import {
   TextField,
   Label,
@@ -501,7 +501,8 @@ function Input({
   );
 }
 
-// src/components/Select/Select.tsx
+// src/components/Form/Select/Select.tsx
+import { Check, ChevronDown } from "lucide-react";
 import {
   Button as Button2,
   Label as Label2,
@@ -511,48 +512,17 @@ import {
   Select as AriaSelect,
   SelectValue
 } from "react-aria-components";
+import { twMerge as twMerge2 } from "tailwind-merge";
 import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function ChevronDown() {
-  return /* @__PURE__ */ jsx7(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: "h-4 w-4 text-(--color-text-secondary)",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("path", { d: "M4 6l4 4 4-4" })
-    }
-  );
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsx7(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: "h-4 w-4 text-(--color-action-primary)",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
-    }
-  );
-}
 function Select({
   label,
   items,
   placeholder = "Select an option",
   errorMessage,
-  hideLabel = false,
   isDisabled,
   isRequired,
   className,
+  renderItem,
   ...props
 }) {
   const hasError = Boolean(errorMessage);
@@ -563,44 +533,54 @@ function Select({
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
+      className: twMerge2("flex flex-col gap-1", className),
       children: [
-        /* @__PURE__ */ jsxs5(
-          Label2,
-          {
-            className: [
-              "text-sm font-medium text-(--color-text-primary)",
-              hideLabel && "sr-only"
-            ].filter(Boolean).join(" "),
-            children: [
-              label,
-              isRequired && /* @__PURE__ */ jsx7(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "ml-0.5 text-(--color-text-danger)",
-                  children: "*"
-                }
-              )
-            ]
-          }
-        ),
+        label && /* @__PURE__ */ jsxs5(Label2, { className: "text-sm font-medium text-(--color-text-primary)", children: [
+          label,
+          isRequired && /* @__PURE__ */ jsx7(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ml-0.5 text-(--color-text-danger)",
+              children: "*"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs5(
           Button2,
           {
-            className: [
+            className: twMerge2(
               "inline-flex items-center justify-between",
               "w-full rounded-md px-4 py-2",
               "text-base text-left",
               "border outline-none transition-colors",
               hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)",
               "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
-              "disabled:opacity-50 disabled:pointer-events-none",
+              "cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
               "bg-(--color-surface-default)"
-            ].join(" "),
+            ),
             children: [
-              /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-(--color-text-tertiary)", children: ({ selectedText }) => selectedText || placeholder }),
-              /* @__PURE__ */ jsx7(ChevronDown, {})
+              /* @__PURE__ */ jsx7(
+                SelectValue,
+                {
+                  className: twMerge2(
+                    renderItem ? "min-w-0" : "truncate",
+                    "data-placeholder:text-(--color-text-tertiary)"
+                  ),
+                  children: ({ selectedItem, isPlaceholder }) => {
+                    if (isPlaceholder) return placeholder;
+                    const item = selectedItem;
+                    return renderItem ? renderItem(item) : item?.name ?? placeholder;
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                ChevronDown,
+                {
+                  "aria-hidden": true,
+                  className: "h-4 w-4 shrink-0 text-(--color-text-secondary)"
+                }
+              )
             ]
           }
         ),
@@ -608,33 +588,33 @@ function Select({
         /* @__PURE__ */ jsx7(
           Popover,
           {
-            className: [
+            className: twMerge2(
               "w-(--trigger-width)",
               "rounded-md",
               "border border-(--color-border-default)",
               "bg-(--color-surface-default)",
               "shadow-lg",
               "overflow-auto",
-              "entering:animate-in entering:fade-in entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out exiting:slide-out-to-top-1"
-            ].join(" "),
+              "entering:animate-in entering:fade-in",
+              "exiting:animate-out exiting:fade-out"
+            ),
             children: /* @__PURE__ */ jsx7(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx7(
               ListBoxItem,
               {
                 id: item.id,
                 textValue: item.name,
-                className: [
+                className: twMerge2(
                   "flex items-center justify-between gap-2",
                   "px-4 py-2 rounded-sm",
                   "text-base text-(--color-text-primary)",
                   "cursor-pointer outline-none",
                   "hover:bg-(--color-surface-muted)",
-                  "focus:bg-(--color-surface-muted)",
+                  "focus-visible:bg-(--color-surface-muted)",
                   "selected:text-(--color-action-primary) selected:font-medium"
-                ].join(" "),
+                ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
-                  /* @__PURE__ */ jsx7("span", { className: "truncate", children: item.name }),
-                  isSelected && /* @__PURE__ */ jsx7(CheckIcon, {})
+                  /* @__PURE__ */ jsx7("span", { className: "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  isSelected && /* @__PURE__ */ jsx7(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
                 ] })
               }
             ) })
@@ -996,11 +976,11 @@ function EmptyState({
   );
 }
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/Form/Checkbox/Checkbox.tsx
 import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
-import { Check } from "lucide-react";
+import { Check as Check2 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
   return /* @__PURE__ */ jsx13(
@@ -1023,7 +1003,7 @@ function Checkbox({ children, className, ...props }) {
               isSelected || isIndeterminate ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) group-hover:border-(--color-border-strong)"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx13(Check, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
+              isSelected && /* @__PURE__ */ jsx13(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
               isIndeterminate && /* @__PURE__ */ jsx13("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
             ]
           }
@@ -1034,7 +1014,7 @@ function Checkbox({ children, className, ...props }) {
   );
 }
 
-// src/components/Switch/Switch.tsx
+// src/components/Form/Switch/Switch.tsx
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
@@ -1091,7 +1071,7 @@ function Switch({
   );
 }
 
-// src/components/Radio/Radio.tsx
+// src/components/Form/Radio/Radio.tsx
 import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
@@ -1165,7 +1145,7 @@ function RadioButton({ children, className, ...props }) {
   );
 }
 
-// src/components/Label/Label.tsx
+// src/components/Form/Label/Label.tsx
 import {
   Label as AriaLabel
 } from "react-aria-components";
@@ -1196,7 +1176,7 @@ function Label3({ isRequired, children, className, ...props }) {
   );
 }
 
-// src/components/Field/Field.tsx
+// src/components/Form/Field/Field.tsx
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function getErrorMessage(error) {
   if (!error) return void 0;
@@ -1226,7 +1206,7 @@ function Field({
   );
 }
 
-// src/components/Fieldset/Fieldset.tsx
+// src/components/Form/Fieldset/Fieldset.tsx
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
   return /* @__PURE__ */ jsxs15(
@@ -1256,7 +1236,7 @@ function Fieldset({ legend, children, className }) {
   );
 }
 
-// src/components/InputGroup/InputGroup.tsx
+// src/components/Form/InputGroup/InputGroup.tsx
 import React from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function InputGroup({ children, className }) {
@@ -1282,7 +1262,7 @@ function InputGroup({ children, className }) {
   );
 }
 
-// src/components/InputAddon/InputAddon.tsx
+// src/components/Form/InputAddon/InputAddon.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
 function groupRadiusClass3(position) {
   switch (position) {
@@ -1319,7 +1299,7 @@ function InputAddon({ children, className }) {
 }
 
 // src/components/Heading/Heading.tsx
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { twMerge as twMerge3 } from "tailwind-merge";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
@@ -1353,7 +1333,7 @@ function Heading2({
   return /* @__PURE__ */ jsx21(
     Tag,
     {
-      className: twMerge2(
+      className: twMerge3(
         weightStyles[weight],
         "text-(--color-text-primary)",
         sizeStyles3[resolvedSize],
@@ -1475,7 +1455,7 @@ function Breadcrumbs({ items, className }) {
 import {
   Link as AriaLink2
 } from "react-aria-components";
-import { twMerge as twMerge3 } from "tailwind-merge";
+import { twMerge as twMerge4 } from "tailwind-merge";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var iconSizeMap3 = {
   sm: "sm",
@@ -1495,7 +1475,7 @@ function ButtonLink({
     AriaLink2,
     {
       ...props,
-      className: twMerge3(
+      className: twMerge4(
         "inline-flex items-center justify-center gap-2",
         "rounded-md",
         "font-medium",
@@ -1534,7 +1514,7 @@ function IconButtonLink({
     {
       ...props,
       "aria-label": ariaLabel,
-      className: twMerge3(
+      className: twMerge4(
         "inline-flex items-center justify-center",
         "rounded-md",
         "outline-none transition-colors no-underline",
@@ -1556,7 +1536,7 @@ function IconButtonLink({
 import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
-import { twMerge as twMerge4 } from "tailwind-merge";
+import { twMerge as twMerge5 } from "tailwind-merge";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
@@ -1610,7 +1590,7 @@ function ToggleButton({
     AriaToggleButton,
     {
       ...props,
-      className: ({ isSelected }) => twMerge4(
+      className: ({ isSelected }) => twMerge5(
         "inline-flex items-center justify-center gap-2",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -1628,7 +1608,7 @@ function ToggleButton({
 
 // src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge5 } from "tailwind-merge";
+import { twMerge as twMerge6 } from "tailwind-merge";
 import {
   RadioGroup as AriaRadioGroup2,
   Radio as AriaRadio2
@@ -1658,7 +1638,7 @@ function ToggleButtonGroup({
     {
       ...props,
       orientation: "horizontal",
-      className: twMerge5(
+      className: twMerge6(
         "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
@@ -1677,7 +1657,7 @@ function ToggleButtonGroupItem({
     AriaRadio2,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge5(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge6(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -1824,7 +1804,7 @@ function MenuItem({
 
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
-import { Check as Check2 } from "lucide-react";
+import { Check as Check3 } from "lucide-react";
 import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
@@ -1850,7 +1830,7 @@ function MenuCheckboxItem({
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check2, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
       ] })
     }
@@ -1963,7 +1943,7 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
-import { twMerge as twMerge6 } from "tailwind-merge";
+import { twMerge as twMerge7 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -1993,7 +1973,7 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: twMerge6(
+      className: twMerge7(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2012,7 +1992,7 @@ function TabList({
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge6(
+      className: ({ orientation }) => twMerge7(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2028,14 +2008,14 @@ function Tab({ className, ...props }) {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge6(
+          return twMerge7(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge6(
+        return twMerge7(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2083,7 +2063,7 @@ function TabPanel({ className, ...props }) {
     AriaTabPanel,
     {
       ...props,
-      className: twMerge6(
+      className: twMerge7(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2103,7 +2083,7 @@ import {
 import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
 import { Tree as ArboristTree } from "react-arborist";
 import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
-import { Check as Check3 } from "lucide-react";
+import { Check as Check4 } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var rowHeightMap = {
   compact: 32,
@@ -2206,7 +2186,7 @@ function NodeRenderer({
             "aria-checked": isChecked,
             "aria-label": `Select ${data.name}`,
             children: isChecked && /* @__PURE__ */ jsx35(
-              Check3,
+              Check4,
               {
                 className: "w-3 h-3 text-(--color-text-inverse)",
                 strokeWidth: 3
@@ -2335,7 +2315,7 @@ function Tree({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
-import { twMerge as twMerge7 } from "tailwind-merge";
+import { twMerge as twMerge8 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
@@ -2368,7 +2348,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge7(
+      className: twMerge8(
         "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
@@ -2385,7 +2365,7 @@ function SegmentedControlItem({
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge8(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2575,150 +2555,25 @@ function FileCard({
 
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
 import { useCallback as useCallback4 } from "react";
-import { AlertCircle, Database, Info as Info3 } from "lucide-react";
-import { twMerge as twMerge10 } from "tailwind-merge";
-
-// src/components/Pill/Pill.tsx
-import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx38 } 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-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
-  purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
-  teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text)",
-  rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text)",
-  slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text)",
-  green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
-  amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
-};
-var dotColorStyles = {
-  neutral: "bg-(--color-badge-neutral-text)",
-  purple: "bg-(--color-badge-purple-text)",
-  teal: "bg-(--color-badge-teal-text)",
-  rose: "bg-(--color-badge-rose-text)",
-  slate: "bg-(--color-badge-slate-text)",
-  green: "bg-(--color-badge-green-text)",
-  amber: "bg-(--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__ */ jsx38(
-    "span",
-    {
-      className: twMerge8(
-        "inline-flex items-center rounded-full",
-        "px-2 py-0.5",
-        "text-xs font-medium leading-tight",
-        colorStyles[resolved],
-        className
-      ),
-      children
-    }
-  );
-}
-
-// src/components/Pill/GroupPill.tsx
+import { AlertCircle, Database } from "lucide-react";
 import { twMerge as twMerge9 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs24 } 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__ */ jsxs24(
-    "span",
-    {
-      className: twMerge9(
-        "inline-flex items-center gap-1",
-        className
-      ),
-      "aria-label": `Group: ${segments.join(" / ")}`,
-      children: [
-        hiddenSegments.map((segment, index) => {
-          const color = pillColorFromName(segment);
-          return /* @__PURE__ */ jsx39(
-            "span",
-            {
-              className: twMerge9(
-                "inline-block size-2 shrink-0 rounded-full",
-                dotColorStyles[color]
-              ),
-              "aria-hidden": "true",
-              title: segment
-            },
-            `dot-${index}-${segment}`
-          );
-        }),
-        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx39(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
-      ]
-    }
-  );
-}
-
-// src/components/StorageConnectionCard/StorageConnectionCard.tsx
-import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-(--color-status-success)",
   error: "border-2 border-(--color-status-danger) bg-transparent",
   loading: "bg-(--color-status-warning) animate-pulse"
 };
-var providerConfig = {
-  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 color = config?.color ?? "neutral";
-  return /* @__PURE__ */ jsx40(Pill, { color, children: label });
-}
 function PreviewArea({
   status = "connected",
   errorMessage,
   children
 }) {
   if (status === "loading") {
-    return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+    return /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs25("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-(--color-surface-danger) px-4", children: [
-      /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsxs24("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-(--color-surface-danger) px-4", children: [
+      /* @__PURE__ */ jsx38(
         Icon,
         {
           icon: AlertCircle,
@@ -2726,13 +2581,13 @@ function PreviewArea({
           className: "text-(--color-text-danger)"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx40("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx38("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
     ] });
   }
   if (children) {
-    return /* @__PURE__ */ jsx40("div", { className: "h-full w-full overflow-hidden", children });
+    return /* @__PURE__ */ jsx38("div", { className: "h-full w-full overflow-hidden", children });
   }
-  return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38(
     Icon,
     {
       icon: Database,
@@ -2743,28 +2598,16 @@ function PreviewArea({
 }
 function StorageConnectionCard({
   name,
-  provider,
-  region,
   status,
   errorMessage,
-  imageCount,
+  meta,
   children,
   href,
   onPress,
-  onInfo,
+  actions,
   className
 }) {
   const isInteractive = !!href || !!onPress;
-  const handleInfoPress = useCallback4(
-    (e) => {
-      if (isInteractive) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-      onInfo?.();
-    },
-    [onInfo, isInteractive]
-  );
   const handleKeyDown = useCallback4(
     (e) => {
       if (onPress && (e.key === "Enter" || e.key === " ")) {
@@ -2774,57 +2617,45 @@ function StorageConnectionCard({
     },
     [onPress]
   );
-  const cardContent = /* @__PURE__ */ jsxs25(Fragment10, { children: [
-    /* @__PURE__ */ jsx40("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx40(PreviewArea, { status, errorMessage, children }) }),
-    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1.5 border-t border-(--color-border-default) bg-(--color-surface-default) px-3 py-2.5 rounded-b-(--border-radius-lg)", children: [
-      /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-2", children: [
-        status && /* @__PURE__ */ jsx40(
+  const cardContent = /* @__PURE__ */ jsxs24(Fragment10, { children: [
+    /* @__PURE__ */ jsx38("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx38(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1.5 border-t border-(--color-border-default) bg-(--color-surface-default) px-3 py-2.5 rounded-b-(--border-radius-lg)", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex items-start gap-2", children: [
+        status && /* @__PURE__ */ jsx38(
           "span",
           {
-            className: twMerge10(
+            className: twMerge9(
               "mt-1.5 h-2 w-2 shrink-0 rounded-full",
               statusDotStyles[status]
             ),
             "aria-label": `Status: ${status}`
           }
         ),
-        /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-(--color-text-primary)", children: name }),
-        onInfo && /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-(--color-text-primary)", children: name }),
+        actions && /* @__PURE__ */ jsx38(
           "span",
           {
-            onClick: handleInfoPress,
+            onClick: (e) => {
+              if (isInteractive) {
+                e.stopPropagation();
+                e.preventDefault();
+              }
+            },
             onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                handleInfoPress(e);
+              if (isInteractive) {
+                e.stopPropagation();
               }
             },
             role: "presentation",
-            children: /* @__PURE__ */ jsx40(
-              IconButton,
-              {
-                icon: Info3,
-                "aria-label": "Connection info",
-                variant: "ghost",
-                size: "sm",
-                className: "shrink-0 -mt-1 -mr-1",
-                onPress: onInfo
-              }
-            )
+            className: "shrink-0 -mt-1 -mr-1",
+            children: actions
           }
         )
       ] }),
-      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs25("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: [
-        provider && /* @__PURE__ */ jsx40(ProviderBadge, { provider }),
-        provider && region && /* @__PURE__ */ jsx40("span", { className: "shrink-0 text-xs text-(--color-text-secondary)", children: region }),
-        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-(--color-text-secondary)", children: [
-          imageCount,
-          " ",
-          imageCount === 1 ? "image" : "images"
-        ] })
-      ] })
+      meta && /* @__PURE__ */ jsx38("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: meta })
     ] })
   ] });
-  const baseStyles = twMerge10(
+  const baseStyles = twMerge9(
     "flex flex-col overflow-hidden rounded-lg",
     "border border-(--color-border-default)",
     "shadow-sm transition-all",
@@ -2833,10 +2664,10 @@ function StorageConnectionCard({
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx40("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx38("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx38(
       "div",
       {
         role: "button",
@@ -2848,12 +2679,12 @@ function StorageConnectionCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx40("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx38("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
@@ -2878,10 +2709,10 @@ function Badge({
   icon: IconComponent,
   className
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge11(
+      className: twMerge10(
         "inline-flex items-center gap-1 rounded-full",
         "text-xs font-medium leading-tight",
         variantStyles4[variant],
@@ -2889,7 +2720,7 @@ function Badge({
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx41(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx39(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2898,8 +2729,8 @@ function Badge({
 
 // src/components/Card/Card.tsx
 import { useCallback as useCallback5 } from "react";
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2917,7 +2748,7 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge12(
+  const containerClass = twMerge11(
     "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
     isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
@@ -2932,22 +2763,22 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs27(Fragment11, { children: [
-    header && /* @__PURE__ */ jsx42(
+  const content = /* @__PURE__ */ jsxs26(Fragment11, { children: [
+    header && /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge12(
+        className: twMerge11(
           "border-b border-(--color-border-default)",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx42("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx40("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge12(
+        className: twMerge11(
           "border-t border-(--color-border-default)",
           paddingStyles[padding]
         ),
@@ -2956,10 +2787,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx42("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx40(
       "div",
       {
         role: "button",
@@ -2971,13 +2802,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx42("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -3030,16 +2861,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs27(
       "span",
       {
-        className: twMerge13(
+        className: twMerge12(
           "inline-flex items-center gap-1 font-medium",
           "text-(--color-text-tertiary)",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+          label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
           unavailableText
         ]
       }
@@ -3069,10 +2900,10 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(
     "span",
     {
-      className: twMerge13(
+      className: twMerge12(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -3083,8 +2914,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
-        /* @__PURE__ */ jsx43(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+        /* @__PURE__ */ jsx41(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -3092,8 +2923,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
   success: "bg-(--color-progress-fill-success)",
@@ -3116,12 +2947,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs29("div", { className: twMerge14("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
-      /* @__PURE__ */ jsx44("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs28("div", { className: twMerge13("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
+      /* @__PURE__ */ jsx42("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx42(
       "div",
       {
         role: "progressbar",
@@ -3129,14 +2960,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge14(
+        className: twMerge13(
           "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles9[size]
         ),
-        children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx42(
           "div",
           {
-            className: twMerge14(
+            className: twMerge13(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -3151,17 +2982,17 @@ function ProgressBar({
 // src/components/Banner/Banner.tsx
 import { useState as useState3 } from "react";
 import {
-  Info as Info4,
+  Info as Info3,
   AlertTriangle,
   AlertCircle as AlertCircle2,
   CheckCircle2,
   X as X3
 } from "lucide-react";
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
-    icon: Info4,
+    icon: Info3,
     containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
     iconClass: "text-(--color-banner-info-icon)",
     role: "status"
@@ -3202,40 +3033,40 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       role: config.role,
-      className: twMerge15(
+      className: twMerge14(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx43(
           IconComponent,
           {
             size: 20,
-            className: twMerge15("shrink-0 mt-0.5", config.iconClass),
+            className: twMerge14("shrink-0 mt-0.5", config.iconClass),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs30("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs29("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx45(
+        dismissible && /* @__PURE__ */ jsx43(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-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__ */ jsx45(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx43(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -3244,8 +3075,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3267,55 +3098,135 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge16(
+  const containerClass = twMerge15(
     "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs31(Fragment12, { children: [
-    /* @__PURE__ */ jsx46("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
-    /* @__PURE__ */ jsx46(
+  const content = /* @__PURE__ */ jsxs30(Fragment12, { children: [
+    /* @__PURE__ */ jsx44("div", { className: twMerge15(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+    /* @__PURE__ */ jsx44(
       "div",
       {
-        className: twMerge16(
+        className: twMerge15(
           config.valueClass,
           "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx46("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx44("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx46("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx44("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx46("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx44("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
-      className: twMerge17(
+      className: twMerge16(
         "flex flex-wrap items-center gap-3 py-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx47(H2, { children: title }),
-        children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+        /* @__PURE__ */ jsx45(H2, { children: title }),
+        children && /* @__PURE__ */ jsx45("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
       ]
     }
   );
 }
 
+// src/components/Pill/Pill.tsx
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var hashColors = {
+  purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
+  teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20",
+  rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text) border-(--color-badge-rose-text)/20",
+  green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text) border-(--color-badge-green-text)/20",
+  amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text) border-(--color-badge-amber-text)/20"
+};
+var colorStyles = {
+  ...hashColors,
+  slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text) border-(--color-badge-slate-text)/20"
+};
+var hashKeys = Object.keys(hashColors);
+function pillColorFromName(name = "") {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hashKeys[Math.abs(hash) % hashKeys.length];
+}
+function Pill({
+  children,
+  color = pillColorFromName(children),
+  className,
+  ...rest
+}) {
+  const cx = twMerge17(
+    `
+    inline-flex items-center
+    rounded-full
+    border
+    px-2 py-0.5
+    text-xs font-medium
+    leading-tight
+    `,
+    colorStyles[color],
+    className
+  );
+  return /* @__PURE__ */ jsx46("span", { className: cx, ...rest, children });
+}
+
+// src/components/Pill/PathPill.tsx
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx47 } from "react/jsx-runtime";
+function PathPill({
+  children,
+  visibleCount = 1,
+  className
+}) {
+  const segments = children.split("/").filter(Boolean);
+  if (segments.length === 0) return null;
+  const dotCount = Math.max(0, segments.length - visibleCount);
+  const fullPath = segments.join(" / ");
+  return /* @__PURE__ */ jsx47(
+    "div",
+    {
+      className: twMerge18("relative flex", className),
+      "aria-label": `Path: ${fullPath}`,
+      children: segments.map((segment, i) => {
+        const isCollapsed = i < dotCount;
+        const isLast = i === segments.length - 1;
+        const cx = twMerge18(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const color = pillColorFromName(segment);
+        return /* @__PURE__ */ jsx47(
+          Pill,
+          {
+            className: cx,
+            color,
+            "aria-hidden": isCollapsed || void 0,
+            children: isCollapsed ? void 0 : segment
+          },
+          `pill-${i}-${segment}`
+        );
+      })
+    }
+  );
+}
+
 // src/components/FormWizard/FormWizard.tsx
 import { createContext as createContext6, useContext as useContext6, useCallback as useCallback6, useMemo } from "react";
 import { jsx as jsx48 } from "react/jsx-runtime";
@@ -3357,8 +3268,8 @@ function FormWizard({
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
-function CheckIcon2() {
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+function CheckIcon() {
   return /* @__PURE__ */ jsx49(
     "svg",
     {
@@ -3380,13 +3291,13 @@ function FormWizardProgress({ labels }) {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs32(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs33("div", { className: "flex w-full items-center", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "flex w-full items-center", children: [
             index > 0 ? /* @__PURE__ */ jsx49(
               "div",
               {
@@ -3409,7 +3320,7 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon2, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon, {}) : index + 1
               }
             ),
             index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
@@ -3441,14 +3352,14 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-3", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-end gap-3", children: [
     canGoBack && /* @__PURE__ */ jsx50(
       Button,
       {
@@ -3632,7 +3543,7 @@ var ColorBannerSuccessIcon = "#22c55e";
 var ColorBadgePurpleBg = "#ead9f5";
 var ColorBadgePurpleText = "#5c2483";
 var ColorBadgeTealBg = "#d0f0f0";
-var ColorBadgeTealText = "#217d7e";
+var ColorBadgeTealText = "#1a6364";
 var ColorBadgeSlateBg = "#f1f5f9";
 var ColorBadgeSlateText = "#334155";
 var ColorBadgeRoseBg = "#ffe4e6";
@@ -3642,7 +3553,7 @@ var ColorBadgeNeutralText = "#374151";
 var ColorBadgeGreenBg = "#dcfce7";
 var ColorBadgeGreenText = "#15803d";
 var ColorBadgeAmberBg = "#fef3c7";
-var ColorBadgeAmberText = "#b45309";
+var ColorBadgeAmberText = "#92400e";
 var Spacing1 = "4px";
 var Spacing2 = "8px";
 var Spacing3 = "12px";
@@ -3886,7 +3797,6 @@ export {
   FormWizard,
   FormWizardNav,
   FormWizardProgress,
-  GroupPill,
   H1,
   H2,
   H3,
@@ -3910,6 +3820,7 @@ export {
   MenuSection,
   MenuSeparator,
   MetricCard,
+  PathPill,
   Pill,
   Popover3 as Popover,
   PopoverContent,