@cytario/design 2.1.0 → 2.2.0

package/dist/index.js

@@ -177,6 +177,7 @@ function Button({
   ...props
 }) {
   const { inGroup, position } = useInputGroup();
+  const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
   const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-[var(--border-radius-md)]";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
   const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
@@ -194,7 +195,7 @@ function Button({
         focusRing,
         "disabled:opacity-50 disabled:pointer-events-none",
         isLoading ? "pointer-events-none" : "",
-        variantStyles[variant],
+        groupGhost || variantStyles[variant],
         sizeStyles[size],
         marginClass,
         className
@@ -258,6 +259,11 @@ var squareSizeStyles = {
   md: "h-10 w-10",
   lg: "h-12 w-12"
 };
+var squareWidthOnly = {
+  sm: "w-8",
+  md: "w-10",
+  lg: "w-12"
+};
 var iconSizeMap2 = {
   sm: "sm",
   md: "sm",
@@ -288,6 +294,7 @@ function IconButton({
   ...props
 }) {
   const { inGroup, position } = useInputGroup();
+  const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
   const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-[var(--border-radius-md)]";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
   const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
@@ -304,8 +311,8 @@ function IconButton({
         focusRing,
         "disabled:opacity-50 disabled:pointer-events-none",
         isLoading ? "pointer-events-none" : "",
-        variantStyles[variant],
-        squareSizeStyles[size],
+        groupGhost || variantStyles[variant],
+        inGroup ? squareWidthOnly[size] : squareSizeStyles[size],
         marginClass,
         className
       ].filter(Boolean).join(" "),
@@ -801,6 +808,9 @@ function Dialog({
   );
 }
 
+// src/components/Dialog/DialogFooter.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+
 // src/components/Toast/Toast.tsx
 import {
   createContext as createContext2,
@@ -812,7 +822,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ToastContext = createContext2(null);
 var toastCounter = 0;
 var defaultDuration = {
@@ -883,16 +893,16 @@ function ToastItem({
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx10(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]", children: toast.message }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx11("p", { className: "flex-1 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]", children: toast.message }),
+        /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
             onClick: dismiss,
             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__ */ jsx10(X2, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx11(X2, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -912,7 +922,7 @@ function ToastContainer({
 }) {
   if (toasts.length === 0) return null;
   return createPortal(
-    /* @__PURE__ */ jsx10(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx10("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx10(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
+    /* @__PURE__ */ jsx11(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx11("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx11(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -945,7 +955,7 @@ function ToastProvider({ children, bridge, placement = "bottom-right" }) {
   }, [bridge, addToast]);
   return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx10(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx11(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -961,7 +971,7 @@ function useToast() {
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function EmptyState({
   icon,
   title,
@@ -977,10 +987,10 @@ function EmptyState({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx11(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
-        /* @__PURE__ */ jsx11("h3", { className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-4", children: title }),
-        description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx11("div", { className: "mt-6", children: action })
+        icon && /* @__PURE__ */ jsx12(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
+        /* @__PURE__ */ jsx12("h3", { className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-4", children: title }),
+        description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx12("div", { className: "mt-6", children: action })
       ]
     }
   );
@@ -991,9 +1001,9 @@ import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
 import { Check } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     AriaCheckbox,
     {
       ...props,
@@ -1013,12 +1023,12 @@ function Checkbox({ children, className, ...props }) {
               isSelected || isIndeterminate ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx12(Check, { className: "w-4 h-4 text-[var(--color-text-inverse)]", strokeWidth: 3 }),
-              isIndeterminate && /* @__PURE__ */ jsx12("div", { className: "w-3 h-0.5 bg-[var(--color-text-inverse)] rounded-full" })
+              isSelected && /* @__PURE__ */ jsx13(Check, { className: "w-4 h-4 text-[var(--color-text-inverse)]", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx13("div", { className: "w-3 h-0.5 bg-[var(--color-text-inverse)] rounded-full" })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx12("span", { children })
+        children && /* @__PURE__ */ jsx13("span", { children })
       ] })
     }
   );
@@ -1028,7 +1038,7 @@ function Checkbox({ children, className, ...props }) {
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var trackColorMap = {
   primary: "bg-[var(--color-action-primary)]",
   success: "bg-[var(--color-action-success)]",
@@ -1045,7 +1055,7 @@ function Switch({
   ...props
 }) {
   const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     AriaSwitch,
     {
       ...props,
@@ -1055,7 +1065,7 @@ function Switch({
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "div",
           {
             className: [
@@ -1064,7 +1074,7 @@ function Switch({
               isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-[var(--color-border-strong)]" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx14(
               "div",
               {
                 className: [
@@ -1075,7 +1085,7 @@ function Switch({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx13("span", { children })
+        children && /* @__PURE__ */ jsx14("span", { children })
       ] })
     }
   );
@@ -1086,9 +1096,9 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaRadioGroup,
     {
       ...props,
@@ -1102,7 +1112,7 @@ function RadioGroup({ children, className, ...props }) {
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaRadio,
     {
       ...props,
@@ -1112,7 +1122,7 @@ function Radio({ children, className, ...props }) {
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "div",
           {
             className: [
@@ -1121,16 +1131,16 @@ function Radio({ children, className, ...props }) {
               "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
               isSelected ? "border-[var(--color-action-primary)]" : "border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx14("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
+            children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
           }
         ),
-        children && /* @__PURE__ */ jsx14("span", { children })
+        children && /* @__PURE__ */ jsx15("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaRadio,
     {
       ...props,
@@ -1139,7 +1149,7 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx14(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx15(
         "div",
         {
           className: [
@@ -1159,7 +1169,7 @@ function RadioButton({ children, className, ...props }) {
 import {
   Label as AriaLabel
 } from "react-aria-components";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Label3({ isRequired, children, className, ...props }) {
   return /* @__PURE__ */ jsxs13(
     AriaLabel,
@@ -1173,7 +1183,7 @@ function Label3({ isRequired, children, className, ...props }) {
       ].filter(Boolean).join(" "),
       children: [
         children,
-        isRequired && /* @__PURE__ */ jsx15(
+        isRequired && /* @__PURE__ */ jsx16(
           "span",
           {
             "aria-hidden": "true",
@@ -1187,7 +1197,7 @@ function Label3({ isRequired, children, className, ...props }) {
 }
 
 // src/components/Field/Field.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function getErrorMessage(error) {
   if (!error) return void 0;
   if (typeof error === "string") return error;
@@ -1207,17 +1217,17 @@ function Field({
     {
       className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
       children: [
-        label && /* @__PURE__ */ jsx16(Label3, { isRequired, children: label }),
+        label && /* @__PURE__ */ jsx17(Label3, { isRequired, children: label }),
         children,
-        description && !errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description }),
-        errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage })
+        description && !errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description }),
+        errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage })
       ]
     }
   );
 }
 
 // src/components/Fieldset/Fieldset.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
   return /* @__PURE__ */ jsxs15(
     "fieldset",
@@ -1228,7 +1238,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx17(
+        legend && /* @__PURE__ */ jsx18(
           "legend",
           {
             className: [
@@ -1248,18 +1258,18 @@ function Fieldset({ legend, children, className }) {
 
 // src/components/InputGroup/InputGroup.tsx
 import React from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function InputGroup({ children, className }) {
   const childArray = React.Children.toArray(children).filter(
     React.isValidElement
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: ["flex items-stretch", className].filter(Boolean).join(" "),
       children: childArray.map((child, index) => {
         const position = childArray.length === 1 ? "standalone" : index === 0 ? "start" : index === childArray.length - 1 ? "end" : "middle";
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx19(
           InputGroupContext.Provider,
           {
             value: { inGroup: true, position },
@@ -1273,7 +1283,7 @@ function InputGroup({ children, className }) {
 }
 
 // src/components/InputAddon/InputAddon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function groupRadiusClass3(position) {
   switch (position) {
     case "start":
@@ -1290,7 +1300,7 @@ function InputAddon({ children, className }) {
   const { inGroup, position } = useInputGroup();
   const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-[var(--border-radius-md)]";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: [
@@ -1310,7 +1320,7 @@ function InputAddon({ children, className }) {
 
 // src/components/Heading/Heading.tsx
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
   h2: "xl",
@@ -1340,7 +1350,7 @@ function Heading2({
   children
 }) {
   const resolvedSize = size ?? defaultSizeMap[Tag];
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Tag,
     {
       className: twMerge2(
@@ -1354,7 +1364,7 @@ function Heading2({
   );
 }
 function H1(props) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Heading2,
     {
       ...props,
@@ -1365,17 +1375,17 @@ function H1(props) {
   );
 }
 function H2(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
+  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
 }
 function H3(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
+  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
 }
 
 // src/components/Link/Link.tsx
 import {
   Link as AriaLink
 } from "react-aria-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-[var(--color-teal-700)] underline",
@@ -1391,7 +1401,7 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     AriaLink,
     {
       ...props,
@@ -1412,20 +1422,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         AriaBreadcrumbs,
         {
           className: "flex items-center gap-1 text-sm min-w-0",
           children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsx22(
+            return /* @__PURE__ */ jsx23(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -1433,8 +1443,8 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
-                  /* @__PURE__ */ jsx22(
+                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                  /* @__PURE__ */ jsx23(
                     Link2,
                     {
                       href: item.href,
@@ -1442,7 +1452,7 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx23(
                     ChevronRight,
                     {
                       className: "shrink-0 text-[var(--color-neutral-400)]",
@@ -1466,7 +1476,7 @@ import {
   Link as AriaLink2
 } from "react-aria-components";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var iconSizeMap3 = {
   sm: "sm",
   md: "sm",
@@ -1497,9 +1507,9 @@ function ButtonLink({
         className
       ),
       children: [
-        iconLeft && /* @__PURE__ */ jsx23(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
+        iconLeft && /* @__PURE__ */ jsx24(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
         children,
-        iconRight && /* @__PURE__ */ jsx23(Icon, { icon: iconRight, size: iconSizeMap3[size] })
+        iconRight && /* @__PURE__ */ jsx24(Icon, { icon: iconRight, size: iconSizeMap3[size] })
       ]
     }
   );
@@ -1519,7 +1529,7 @@ function IconButtonLink({
   className,
   ...props
 }) {
-  const link = /* @__PURE__ */ jsx23(
+  const link = /* @__PURE__ */ jsx24(
     AriaLink2,
     {
       ...props,
@@ -1533,11 +1543,11 @@ function IconButtonLink({
         squareSizeStyles2[size],
         className
       ),
-      children: /* @__PURE__ */ jsx23(Icon, { icon, size: iconSizeMap3[size] })
+      children: /* @__PURE__ */ jsx24(Icon, { icon, size: iconSizeMap3[size] })
     }
   );
   if (showTooltip) {
-    return /* @__PURE__ */ jsx23(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
+    return /* @__PURE__ */ jsx24(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
   }
   return link;
 }
@@ -1547,7 +1557,7 @@ import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
 import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
@@ -1596,7 +1606,7 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     AriaToggleButton,
     {
       ...props,
@@ -1623,7 +1633,7 @@ import {
   RadioGroup as AriaRadioGroup2,
   Radio as AriaRadio2
 } from "react-aria-components";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ToggleButtonGroupContext = createContext3({
   size: "md"
 });
@@ -1643,7 +1653,7 @@ function ToggleButtonGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx26(
     AriaRadioGroup2,
     {
       ...props,
@@ -1663,7 +1673,7 @@ function ToggleButtonGroupItem({
   ...props
 }) {
   const { size } = useContext3(ToggleButtonGroupContext);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     AriaRadio2,
     {
       ...props,
@@ -1695,7 +1705,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var popoverStyles = [
   "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
   "shadow-lg border border-[var(--color-border-default)]",
@@ -1717,11 +1727,11 @@ function Menu({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       Popover2,
       {
         className: [popoverStyles, className].filter(Boolean).join(" "),
-        children: items ? /* @__PURE__ */ jsx26(
+        children: items ? /* @__PURE__ */ jsx27(
           AriaMenu,
           {
             items,
@@ -1748,14 +1758,14 @@ function Menu({
                   item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
                 ].filter(Boolean).join(" "),
                 children: [
-                  item.icon && /* @__PURE__ */ jsx26(Icon, { icon: item.icon, size: "sm" }),
-                  /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
-                  item.endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: item.endContent })
+                  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
+                  /* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
+                  item.endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: item.endContent })
                 ]
               }
             )
           }
-        ) : /* @__PURE__ */ jsx26(
+        ) : /* @__PURE__ */ jsx27(
           AriaMenu,
           {
             onAction: (key) => onAction?.(key),
@@ -1771,7 +1781,7 @@ function Menu({
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -1804,9 +1814,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx27(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx27("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx28(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx28("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -1815,7 +1825,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -1823,7 +1833,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     AriaMenuItem3,
     {
       id,
@@ -1840,8 +1850,8 @@ function MenuCheckboxItem({
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx28("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx28(Check2, { size: 14, className: "text-[var(--color-action-primary)]", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx28("span", { className: "flex-1", 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-[var(--color-action-primary)]", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -1852,7 +1862,7 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
@@ -1860,7 +1870,7 @@ function MenuSection({
   className
 }) {
   return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx29(
+    header && /* @__PURE__ */ jsx30(
       Header,
       {
         className: [
@@ -1879,16 +1889,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx30(Header2, { className, children });
+  return /* @__PURE__ */ jsx31(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Separator,
     {
       className: [
@@ -1906,12 +1916,12 @@ import {
   Dialog as AriaDialog2,
   Button as AriaButton3
 } from "react-aria-components";
-import { Fragment as Fragment8, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33 } from "react/jsx-runtime";
 function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx32(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx33(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaButton3,
     {
       className: [
@@ -1929,7 +1939,7 @@ function PopoverContent({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaPopover,
     {
       placement,
@@ -1946,7 +1956,7 @@ function PopoverContent({
         "entering:placement-right:slide-in-from-left-1",
         className
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx32(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx32(Fragment8, { children: typeof children === "function" ? children({ close }) : children }) })
+      children: /* @__PURE__ */ jsx33(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx33(Fragment8, { children: typeof children === "function" ? children({ close }) : children }) })
     }
   );
 }
@@ -1960,7 +1970,7 @@ import {
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TabsContext = createContext4({
   variant: "underline",
   size: "md"
@@ -1978,7 +1988,7 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx34(
     AriaTabs,
     {
       ...props,
@@ -1998,7 +2008,7 @@ function TabList({
   const { variant } = useContext4(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTabList,
     {
       ...props,
@@ -2012,7 +2022,7 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTab,
     {
       ...props,
@@ -2069,7 +2079,7 @@ function getTabVariantStyles(variant, state) {
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTabPanel,
     {
       ...props,
@@ -2094,7 +2104,7 @@ import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, us
 import { Tree as ArboristTree } from "react-arborist";
 import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
 import { Check as Check3 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var rowHeightMap = {
   compact: 32,
   comfortable: 40
@@ -2152,7 +2162,7 @@ function NodeRenderer({
         }
       },
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -2170,7 +2180,7 @@ function NodeRenderer({
             },
             tabIndex: -1,
             "aria-label": node.isOpen ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               ChevronRight2,
               {
                 size: 14,
@@ -2182,7 +2192,7 @@ function NodeRenderer({
             )
           }
         ),
-        isCheckbox && /* @__PURE__ */ jsx34(
+        isCheckbox && /* @__PURE__ */ jsx35(
           "div",
           {
             className: [
@@ -2193,7 +2203,7 @@ function NodeRenderer({
             role: "checkbox",
             "aria-checked": isChecked,
             "aria-label": `Select ${data.name}`,
-            children: isChecked && /* @__PURE__ */ jsx34(
+            children: isChecked && /* @__PURE__ */ jsx35(
               Check3,
               {
                 className: "w-3 h-3 text-[var(--color-text-inverse)]",
@@ -2202,7 +2212,7 @@ function NodeRenderer({
             )
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           IconComponent,
           {
             size: 16,
@@ -2210,7 +2220,7 @@ function NodeRenderer({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx34("span", { className: "truncate", children: data.name })
+        /* @__PURE__ */ jsx35("span", { className: "truncate", children: data.name })
       ]
     }
   );
@@ -2276,13 +2286,13 @@ function Tree({
   );
   const arboristSearchMatch = searchMatch ? (node, term) => searchMatch(node.data, term) : void 0;
   const selectionProp = selectionMode === "single" && selectedIds && selectedIds.size > 0 ? [...selectedIds][0] : void 0;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       role: "tree",
       "aria-label": ariaLabel,
       className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         ArboristTree,
         {
           ref: internalRef,
@@ -2301,7 +2311,7 @@ function Tree({
           onSelect: handleSelect,
           onActivate: handleActivate,
           disableEdit: true,
-          children: (props) => /* @__PURE__ */ jsx34(
+          children: (props) => /* @__PURE__ */ jsx35(
             NodeRenderer,
             {
               ...props,
@@ -2326,7 +2336,7 @@ import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext5({
   size: "md"
 });
@@ -2346,7 +2356,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx35(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx36(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2367,7 +2377,7 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext5(SegmentedControlContext);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     AriaToggleButton2,
     {
       ...props,
@@ -2401,7 +2411,7 @@ import {
   Info as Info2,
   Microscope
 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function getFileIcon(type, extension) {
   if (type === "directory") return Folder2;
   const ext = (extension ?? "").toLowerCase();
@@ -2427,7 +2437,7 @@ function FileIcon({
   size = 16
 }) {
   const IconComponent = getFileIcon(type, extension);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     IconComponent,
     {
       size,
@@ -2473,14 +2483,14 @@ function FileCard({
     [onPress]
   );
   const cardContent = /* @__PURE__ */ jsxs23(Fragment9, { children: [
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         className: `shrink-0 overflow-hidden bg-[var(--color-neutral-900)] ${thumbnailClass}`,
-        children: children ? /* @__PURE__ */ jsx36("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx36("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx36(IconComponent, { size: iconSize, className: iconColor }) })
+        children: children ? /* @__PURE__ */ jsx37("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx37("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx37(IconComponent, { size: iconSize, className: iconColor }) })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         className: [
@@ -2488,11 +2498,11 @@ function FileCard({
           "bg-[var(--color-surface-default)]",
           compact ? "px-2 py-1.5 rounded-b-[var(--border-radius-md)]" : "gap-0.5 px-3 py-2 rounded-b-[var(--border-radius-lg)]"
         ].join(" "),
-        children: compact ? /* @__PURE__ */ jsx36("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
+        children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
           /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx36(FileIcon, { type, extension, size: 16 }),
-            /* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }),
-            onInfo && /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(FileIcon, { type, extension, size: 16 }),
+            /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }),
+            onInfo && /* @__PURE__ */ jsx37(
               "span",
               {
                 onClick: handleInfoClick,
@@ -2502,7 +2512,7 @@ function FileCard({
                   }
                 },
                 role: "presentation",
-                children: /* @__PURE__ */ jsx36(
+                children: /* @__PURE__ */ jsx37(
                   IconButton,
                   {
                     icon: Info2,
@@ -2516,7 +2526,7 @@ function FileCard({
               }
             )
           ] }),
-          size && /* @__PURE__ */ jsx36("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
+          size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
         ] })
       }
     )
@@ -2532,7 +2542,7 @@ function FileCard({
     className
   ].filter(Boolean).join(" ");
   if (href) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "a",
       {
         href,
@@ -2543,7 +2553,7 @@ function FileCard({
     );
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "div",
       {
         role: "button",
@@ -2556,7 +2566,7 @@ function FileCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx36("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx37("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
@@ -2566,7 +2576,7 @@ import { twMerge as twMerge10 } from "tailwind-merge";
 
 // src/components/Pill/Pill.tsx
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var HASH_PALETTE = [
   "teal",
   // sky
@@ -2617,7 +2627,7 @@ function resolveColor(color, name) {
 }
 function Pill({ children, color, name, className }) {
   const resolved = resolveColor(color, name);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "span",
     {
       className: twMerge8(
@@ -2634,7 +2644,7 @@ function Pill({ children, color, name, className }) {
 
 // src/components/Pill/GroupPill.tsx
 import { twMerge as twMerge9 } from "tailwind-merge";
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function GroupPill({
   path,
   visibleCount = 3,
@@ -2656,7 +2666,7 @@ function GroupPill({
       children: [
         hiddenSegments.map((segment, index) => {
           const color = pillColorFromName(segment);
-          return /* @__PURE__ */ jsx38(
+          return /* @__PURE__ */ jsx39(
             "span",
             {
               className: twMerge9(
@@ -2669,14 +2679,14 @@ function GroupPill({
             `dot-${index}-${segment}`
           );
         }),
-        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx38(Pill, { name: segment, children: segment }, `pill-${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 jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-[var(--color-status-success)]",
   error: "border-2 border-[var(--color-status-danger)] bg-transparent",
@@ -2692,7 +2702,7 @@ function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
   const color = config?.color ?? "neutral";
-  return /* @__PURE__ */ jsx39(Pill, { color, children: label });
+  return /* @__PURE__ */ jsx40(Pill, { color, children: label });
 }
 function PreviewArea({
   status = "connected",
@@ -2700,11 +2710,11 @@ function PreviewArea({
   children
 }) {
   if (status === "loading") {
-    return /* @__PURE__ */ jsx39("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx39(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+    return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(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-[var(--color-surface-danger)] px-4", children: [
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         Icon,
         {
           icon: AlertCircle,
@@ -2712,13 +2722,13 @@ function PreviewArea({
           className: "text-[var(--color-text-danger)]"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx39("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx40("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
     ] });
   }
   if (children) {
-    return /* @__PURE__ */ jsx39("div", { className: "h-full w-full overflow-hidden", children });
+    return /* @__PURE__ */ jsx40("div", { className: "h-full w-full overflow-hidden", children });
   }
-  return /* @__PURE__ */ jsx39("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(
     Icon,
     {
       icon: Database,
@@ -2761,10 +2771,10 @@ function StorageConnectionCard({
     [onPress]
   );
   const cardContent = /* @__PURE__ */ jsxs25(Fragment10, { children: [
-    /* @__PURE__ */ jsx39("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx39(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsx40("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx40(PreviewArea, { status, errorMessage, children }) }),
     /* @__PURE__ */ jsxs25("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__ */ jsxs25("div", { className: "flex items-start gap-2", children: [
-        status && /* @__PURE__ */ jsx39(
+        status && /* @__PURE__ */ jsx40(
           "span",
           {
             className: twMerge10(
@@ -2774,8 +2784,8 @@ function StorageConnectionCard({
             "aria-label": `Status: ${status}`
           }
         ),
-        /* @__PURE__ */ jsx39("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
-        onInfo && /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
+        onInfo && /* @__PURE__ */ jsx40(
           "span",
           {
             onClick: handleInfoPress,
@@ -2785,7 +2795,7 @@ function StorageConnectionCard({
               }
             },
             role: "presentation",
-            children: /* @__PURE__ */ jsx39(
+            children: /* @__PURE__ */ jsx40(
               IconButton,
               {
                 icon: Info3,
@@ -2800,8 +2810,8 @@ function StorageConnectionCard({
         )
       ] }),
       (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs25("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: [
-        provider && /* @__PURE__ */ jsx39(ProviderBadge, { provider }),
-        provider && region && /* @__PURE__ */ jsx39("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        provider && /* @__PURE__ */ jsx40(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx40("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
         imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]", children: [
           imageCount,
           " ",
@@ -2819,10 +2829,10 @@ function StorageConnectionCard({
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx39("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx40("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(
       "div",
       {
         role: "button",
@@ -2834,12 +2844,12 @@ function StorageConnectionCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx39("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx40("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/Badge/Badge.tsx
 import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } 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)]",
@@ -2875,7 +2885,7 @@ function Badge({
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx40(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx41(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2885,7 +2895,7 @@ 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 jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2919,7 +2929,7 @@ function Card({
     [onPress]
   );
   const content = /* @__PURE__ */ jsxs27(Fragment11, { children: [
-    header && /* @__PURE__ */ jsx41(
+    header && /* @__PURE__ */ jsx42(
       "div",
       {
         className: twMerge12(
@@ -2929,8 +2939,8 @@ function Card({
         children: header
       }
     ),
-    /* @__PURE__ */ jsx41("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx42(
       "div",
       {
         className: twMerge12(
@@ -2942,10 +2952,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx41("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx42("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       "div",
       {
         role: "button",
@@ -2957,13 +2967,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx41("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx42("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 jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -3025,7 +3035,7 @@ function DeltaIndicator({
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx42("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          label && /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
           unavailableText
         ]
       }
@@ -3069,8 +3079,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx42("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
-        /* @__PURE__ */ jsx42(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+        /* @__PURE__ */ jsx43(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -3079,7 +3089,7 @@ function DeltaIndicator({
 
 // src/components/ProgressBar/ProgressBar.tsx
 import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-[var(--color-progress-fill)]",
   success: "bg-[var(--color-progress-fill-success)]",
@@ -3104,10 +3114,10 @@ function ProgressBar({
   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__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
-      /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+      /* @__PURE__ */ jsx44("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx44("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       "div",
       {
         role: "progressbar",
@@ -3119,7 +3129,7 @@ function ProgressBar({
           "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
           sizeStyles9[size]
         ),
-        children: /* @__PURE__ */ jsx43(
+        children: /* @__PURE__ */ jsx44(
           "div",
           {
             className: twMerge14(
@@ -3144,7 +3154,7 @@ import {
   X as X3
 } from "lucide-react";
 import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info4,
@@ -3199,7 +3209,7 @@ function Banner({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           IconComponent,
           {
             size: 20,
@@ -3214,14 +3224,14 @@ function Banner({
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx44(
+        dismissible && /* @__PURE__ */ jsx45(
           "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__ */ jsx44(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx45(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -3231,7 +3241,7 @@ function Banner({
 
 // src/components/MetricCard/MetricCard.tsx
 import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment12, jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3260,8 +3270,8 @@ function MetricCard({
     className
   );
   const content = /* @__PURE__ */ jsxs31(Fragment12, { children: [
-    /* @__PURE__ */ jsx45("div", { className: twMerge16(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46("div", { className: twMerge16(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
+    /* @__PURE__ */ jsx46(
       "div",
       {
         className: twMerge16(
@@ -3271,17 +3281,17 @@ function MetricCard({
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx45("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx46("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx45("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx46("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx45("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx46("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
@@ -3295,8 +3305,8 @@ function SectionHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx46(H2, { children: title }),
-        children && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
+        /* @__PURE__ */ jsx47(H2, { children: title }),
+        children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
       ]
     }
   );
@@ -3304,7 +3314,7 @@ function SectionHeader({
 
 // src/components/FormWizard/FormWizard.tsx
 import { createContext as createContext6, useContext as useContext6, useCallback as useCallback6, useMemo } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var FormWizardContext = createContext6({
   currentStep: 0,
   totalSteps: 1,
@@ -3339,13 +3349,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx47(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx48(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "svg",
     {
       "aria-hidden": "true",
@@ -3356,13 +3366,13 @@ function CheckIcon2() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx48("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx49("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx48("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx48("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx49("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx49("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
@@ -3373,7 +3383,7 @@ function FormWizardProgress({ labels }) {
         "aria-current": isCurrent ? "step" : void 0,
         children: [
           /* @__PURE__ */ jsxs33("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx48(
+            index > 0 ? /* @__PURE__ */ jsx49(
               "div",
               {
                 "aria-hidden": "true",
@@ -3382,8 +3392,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx48(
+            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx49(
               "div",
               {
                 className: [
@@ -3395,10 +3405,10 @@ function FormWizardProgress({ labels }) {
                   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__ */ jsx48(CheckIcon2, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon2, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx48(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
               "div",
               {
                 "aria-hidden": "true",
@@ -3407,9 +3417,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             "span",
             {
               className: [
@@ -3427,7 +3437,7 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
@@ -3435,7 +3445,7 @@ function FormWizardNav({
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
   return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
-    canGoBack && /* @__PURE__ */ jsx49(
+    canGoBack && /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "secondary",
@@ -3445,7 +3455,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "primary",