@cytario/design 3.4.0 → 5.0.0

package/dist/index.js

@@ -328,12 +328,44 @@ function IconButton({
 // src/components/Form/Input/Input.tsx
 import {
   TextField,
-  Label,
   Input as AriaInput,
   Text
 } from "react-aria-components";
 import { twMerge as twMerge2 } from "tailwind-merge";
+
+// src/components/Form/Label/Label.tsx
+import {
+  Label as AriaLabel
+} from "react-aria-components";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Label({ isRequired, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs4(
+    AriaLabel,
+    {
+      ...props,
+      className: [
+        "text-sm",
+        "font-medium",
+        "text-(--color-text-primary)",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        children,
+        isRequired && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ml-0.5 text-(--color-text-danger)",
+            children: "*"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Form/Input/Input.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var alignClasses = {
   left: "text-left",
   center: "text-center",
@@ -366,14 +398,14 @@ function Input({
   className,
   ...props
 }) {
-  const Field2 = FieldProp;
+  const Field = FieldProp;
   const isInvalid = !!errorMessage;
   const { inGroup, position } = useInputGroup();
   const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
   const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsxs4(
-    Field2,
+  return /* @__PURE__ */ jsxs5(
+    Field,
     {
       ...props,
       type,
@@ -387,28 +419,8 @@ function Input({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsxs4(
-          Label,
-          {
-            className: twMerge2(
-              "text-sm",
-              "font-medium",
-              "text-(--color-text-primary)"
-            ),
-            children: [
-              label,
-              isRequired && /* @__PURE__ */ jsx6(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "ml-0.5 text-(--color-text-danger)",
-                  children: "*"
-                }
-              )
-            ]
-          }
-        ),
-        prefix ? /* @__PURE__ */ jsxs4(
+        label && /* @__PURE__ */ jsx7(Label, { isRequired, children: label }),
+        prefix ? /* @__PURE__ */ jsxs5(
           "div",
           {
             className: twMerge2(
@@ -423,7 +435,7 @@ function Input({
               isDisabled && "opacity-50 pointer-events-none"
             ),
             children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   className: twMerge2(
@@ -436,7 +448,7 @@ function Input({
                   children: prefix
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 AriaInput,
                 {
                   placeholder,
@@ -452,7 +464,7 @@ function Input({
               )
             ]
           }
-        ) : /* @__PURE__ */ jsx6(
+        ) : /* @__PURE__ */ jsx7(
           AriaInput,
           {
             placeholder,
@@ -473,7 +485,7 @@ function Input({
             )
           }
         ),
-        description && !isInvalid && /* @__PURE__ */ jsx6(
+        description && /* @__PURE__ */ jsx7(
           Text,
           {
             slot: "description",
@@ -481,10 +493,11 @@ function Input({
             children: description
           }
         ),
-        isInvalid && /* @__PURE__ */ jsx6(
+        isInvalid && /* @__PURE__ */ jsx7(
           Text,
           {
             slot: "errorMessage",
+            role: "alert",
             className: "text-sm text-(--color-text-danger)",
             children: errorMessage
           }
@@ -498,19 +511,20 @@ function Input({
 import { Check, ChevronDown } from "lucide-react";
 import {
   Button as Button2,
-  Label as Label2,
   ListBox,
   ListBoxItem,
   Popover,
   Select as AriaSelect,
-  SelectValue
+  SelectValue,
+  Text as Text2
 } from "react-aria-components";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Select({
   label,
   items,
   placeholder = "Select an option",
+  description,
   errorMessage,
   size = "md",
   isDisabled,
@@ -520,7 +534,7 @@ function Select({
   ...props
 }) {
   const hasError = Boolean(errorMessage);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     AriaSelect,
     {
       ...props,
@@ -529,20 +543,11 @@ function Select({
       isInvalid: hasError,
       className: twMerge3("flex flex-col gap-1", className),
       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(
+        label && /* @__PURE__ */ jsx8(Label, { isRequired, children: label }),
+        /* @__PURE__ */ jsxs6(
           Button2,
           {
+            "aria-required": isRequired || void 0,
             className: twMerge3(
               `
             inline-flex items-center justify-between
@@ -557,7 +562,7 @@ function Select({
               hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)"
             ),
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 SelectValue,
                 {
                   className: twMerge3(
@@ -571,7 +576,7 @@ function Select({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 ChevronDown,
                 {
                   "aria-hidden": true,
@@ -584,8 +589,17 @@ function Select({
             ]
           }
         ),
-        hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-(--color-text-danger)", children: errorMessage }),
-        /* @__PURE__ */ jsx7(
+        description && /* @__PURE__ */ jsx8(Text2, { slot: "description", className: "text-sm text-(--color-text-secondary)", children: description }),
+        hasError && /* @__PURE__ */ jsx8(
+          Text2,
+          {
+            slot: "errorMessage",
+            role: "alert",
+            className: "text-sm text-(--color-text-danger)",
+            children: errorMessage
+          }
+        ),
+        /* @__PURE__ */ jsx8(
           Popover,
           {
             className: twMerge3(
@@ -598,7 +612,7 @@ function Select({
               "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(
+            children: /* @__PURE__ */ jsx8(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx8(
               ListBoxItem,
               {
                 id: item.id,
@@ -615,9 +629,9 @@ function Select({
                 `,
                   sizeStyles[size]
                 ),
-                children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
-                  /* @__PURE__ */ jsx7("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
-                  isSelected && /* @__PURE__ */ jsx7(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
+                children: ({ isSelected }) => /* @__PURE__ */ jsxs6(Fragment, { children: [
+                  /* @__PURE__ */ jsx8("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  isSelected && /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
                 ] })
               }
             ) })
@@ -637,13 +651,13 @@ import {
   TableBody as AriaTableBody,
   TableHeader as AriaTableHeader
 } from "react-aria-components";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var tableSizeClass = {
   compact: "[--table-row-py:theme(spacing.1)]",
   comfortable: "[--table-row-py:theme(spacing.3)]"
 };
 function Table({ size = "comfortable", className, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     AriaTable,
     {
       ...props,
@@ -656,10 +670,10 @@ function Table({ size = "comfortable", className, ...props }) {
   );
 }
 function TableHeader(props) {
-  return /* @__PURE__ */ jsx8(AriaTableHeader, { ...props });
+  return /* @__PURE__ */ jsx9(AriaTableHeader, { ...props });
 }
 function Column(props) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     AriaColumn,
     {
       ...props,
@@ -669,18 +683,18 @@ function Column(props) {
         "cursor-default select-none outline-none",
         "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
       ].join(" "),
-      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1", children: [
+      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
-        allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+        allowsSorting && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
       ] })
     }
   );
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx8(AriaTableBody, { ...props });
+  return /* @__PURE__ */ jsx9(AriaTableBody, { ...props });
 }
 function Row(props) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     AriaRow,
     {
       ...props,
@@ -696,7 +710,7 @@ function Row(props) {
   );
 }
 function Cell(props) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     AriaCell,
     {
       ...props,
@@ -718,7 +732,7 @@ import {
   Heading
 } from "react-aria-components";
 import { X } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var sizeStyles2 = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -734,7 +748,7 @@ function Dialog({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     ModalOverlay,
     {
       isOpen,
@@ -746,7 +760,7 @@ function Dialog({
         "data-[entering]:animate-in data-[entering]:fade-in",
         "data-[exiting]:animate-out data-[exiting]:fade-out"
       ].join(" "),
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         Modal,
         {
           className: [
@@ -757,9 +771,9 @@ function Dialog({
             "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
             className
           ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx9(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
-              /* @__PURE__ */ jsx9(
+          children: /* @__PURE__ */ jsx10(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
+              /* @__PURE__ */ jsx10(
                 Heading,
                 {
                   slot: "title",
@@ -767,7 +781,7 @@ function Dialog({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -779,11 +793,11 @@ function Dialog({
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx9(X, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx10(X, { size: 20, "aria-hidden": "true" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx9("div", { className: "px-6 py-4 overflow-y-auto", children })
+            /* @__PURE__ */ jsx10("div", { className: "px-6 py-4 overflow-y-auto", children })
           ] }) })
         }
       )
@@ -792,7 +806,7 @@ function Dialog({
 }
 
 // src/components/Dialog/DialogFooter.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 
 // src/components/Toast/Toast.tsx
 import {
@@ -805,7 +819,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var ToastContext = createContext2(null);
 var toastCounter = 0;
 var defaultDuration = {
@@ -863,7 +877,7 @@ function ToastItem({
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [toast.duration, toast.variant, dismiss]);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       role: "status",
@@ -876,16 +890,16 @@ function ToastItem({
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx11(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx11("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx12("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
             onClick: dismiss,
             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__ */ jsx11(X2, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx12(X2, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -905,7 +919,7 @@ function ToastContainer({
 }) {
   if (toasts.length === 0) return null;
   return createPortal(
-    /* @__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)) }) }),
+    /* @__PURE__ */ jsx12(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx12("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx12(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -936,9 +950,9 @@ function ToastProvider({ children, bridge, placement = "bottom-right" }) {
     if (!bridge) return;
     return bridge.subscribe(addToast);
   }, [bridge, addToast]);
-  return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs9(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx11(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx12(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -954,7 +968,7 @@ function useToast() {
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function EmptyState({
   icon,
   title,
@@ -962,7 +976,7 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: [
@@ -970,10 +984,10 @@ function EmptyState({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx12(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
-        /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
-        description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx12("div", { className: "mt-6", children: action })
+        icon && /* @__PURE__ */ jsx13(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
+        /* @__PURE__ */ jsx13("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
+        description && /* @__PURE__ */ jsx13("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx13("div", { className: "mt-6", children: action })
       ]
     }
   );
@@ -984,9 +998,9 @@ import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     AriaCheckbox,
     {
       ...props,
@@ -995,8 +1009,8 @@ function Checkbox({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
-        /* @__PURE__ */ jsxs10(
+      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             className: [
@@ -1006,12 +1020,12 @@ 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(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" })
+              isSelected && /* @__PURE__ */ jsx14(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx14("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx13("span", { children })
+        children && /* @__PURE__ */ jsx14("span", { children })
       ] })
     }
   );
@@ -1021,7 +1035,7 @@ function Checkbox({ children, className, ...props }) {
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var trackColorMap = {
   primary: "bg-(--color-action-primary)",
   success: "bg-(--color-action-success)",
@@ -1038,7 +1052,7 @@ function Switch({
   ...props
 }) {
   const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaSwitch,
     {
       ...props,
@@ -1047,8 +1061,8 @@ function Switch({
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
-        /* @__PURE__ */ jsx14(
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
+        /* @__PURE__ */ jsx15(
           "div",
           {
             className: [
@@ -1057,7 +1071,7 @@ function Switch({
               isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsx15(
               "div",
               {
                 className: [
@@ -1068,7 +1082,7 @@ function Switch({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx14("span", { children })
+        children && /* @__PURE__ */ jsx15("span", { children })
       ] })
     }
   );
@@ -1079,9 +1093,9 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     AriaRadioGroup,
     {
       ...props,
@@ -1095,7 +1109,7 @@ function RadioGroup({ children, className, ...props }) {
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     AriaRadio,
     {
       ...props,
@@ -1104,8 +1118,8 @@ function Radio({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
-        /* @__PURE__ */ jsx15(
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        /* @__PURE__ */ jsx16(
           "div",
           {
             className: [
@@ -1114,16 +1128,16 @@ function Radio({ children, className, ...props }) {
               "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
               isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
+            children: isSelected && /* @__PURE__ */ jsx16("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
           }
         ),
-        children && /* @__PURE__ */ jsx15("span", { children })
+        children && /* @__PURE__ */ jsx16("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     AriaRadio,
     {
       ...props,
@@ -1132,7 +1146,7 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx15(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx16(
         "div",
         {
           className: [
@@ -1148,71 +1162,10 @@ function RadioButton({ children, className, ...props }) {
   );
 }
 
-// src/components/Form/Label/Label.tsx
-import {
-  Label as AriaLabel
-} from "react-aria-components";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-function Label3({ isRequired, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs13(
-    AriaLabel,
-    {
-      ...props,
-      className: [
-        "text-sm",
-        "font-medium",
-        "text-(--color-text-primary)",
-        className
-      ].filter(Boolean).join(" "),
-      children: [
-        children,
-        isRequired && /* @__PURE__ */ jsx16(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "ml-0.5 text-(--color-text-danger)",
-            children: "*"
-          }
-        )
-      ]
-    }
-  );
-}
-
-// 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;
-  if (typeof error === "string") return error;
-  return error.message;
-}
-function Field({
-  label,
-  isRequired,
-  description,
-  error,
-  children,
-  className
-}) {
-  const errorMessage = getErrorMessage(error);
-  return /* @__PURE__ */ jsxs14(
-    "div",
-    {
-      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
-      children: [
-        label && /* @__PURE__ */ jsx17(Label3, { isRequired, children: label }),
-        children,
-        description && !errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-secondary)", children: description }),
-        errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-danger)", children: errorMessage })
-      ]
-    }
-  );
-}
-
 // src/components/Form/Fieldset/Fieldset.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     "fieldset",
     {
       className: [
@@ -1221,7 +1174,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx18(
+        legend && /* @__PURE__ */ jsx17(
           "legend",
           {
             className: [
@@ -1241,18 +1194,18 @@ function Fieldset({ legend, children, className }) {
 
 // src/components/Form/InputGroup/InputGroup.tsx
 import React from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function InputGroup({ children, className }) {
   const childArray = React.Children.toArray(children).filter(
     React.isValidElement
   );
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     "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__ */ jsx19(
+        return /* @__PURE__ */ jsx18(
           InputGroupContext.Provider,
           {
             value: { inGroup: true, position },
@@ -1266,7 +1219,7 @@ function InputGroup({ children, className }) {
 }
 
 // src/components/Form/InputAddon/InputAddon.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function groupRadiusClass3(position) {
   switch (position) {
     case "start":
@@ -1283,7 +1236,7 @@ function InputAddon({ children, className }) {
   const { inGroup, position } = useInputGroup();
   const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: [
@@ -1303,7 +1256,7 @@ function InputAddon({ children, className }) {
 
 // src/components/Heading/Heading.tsx
 import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
   h2: "xl",
@@ -1333,7 +1286,7 @@ function Heading2({
   children
 }) {
   const resolvedSize = size ?? defaultSizeMap[Tag];
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     Tag,
     {
       className: twMerge4(
@@ -1347,7 +1300,7 @@ function Heading2({
   );
 }
 function H1(props) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     Heading2,
     {
       ...props,
@@ -1358,17 +1311,17 @@ function H1(props) {
   );
 }
 function H2(props) {
-  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
+  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
 }
 function H3(props) {
-  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
+  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
 }
 
 // src/components/Link/Link.tsx
 import {
   Link as AriaLink
 } from "react-aria-components";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-teal-700 underline",
@@ -1384,7 +1337,7 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     AriaLink,
     {
       ...props,
@@ -1405,20 +1358,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx22(
         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__ */ jsx23(
+            return /* @__PURE__ */ jsx22(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -1426,8 +1379,8 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
-                  /* @__PURE__ */ jsx23(
+                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs15(Fragment6, { children: [
+                  /* @__PURE__ */ jsx22(
                     Link2,
                     {
                       href: item.href,
@@ -1435,7 +1388,7 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx23(
+                  /* @__PURE__ */ jsx22(
                     ChevronRight,
                     {
                       className: "shrink-0 text-neutral-400",
@@ -1459,7 +1412,7 @@ import {
   Link as AriaLink2
 } from "react-aria-components";
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var iconSizeMap3 = {
   sm: "sm",
   md: "sm",
@@ -1474,7 +1427,7 @@ function ButtonLink({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     AriaLink2,
     {
       ...props,
@@ -1490,9 +1443,9 @@ function ButtonLink({
         className
       ),
       children: [
-        iconLeft && /* @__PURE__ */ jsx24(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
+        iconLeft && /* @__PURE__ */ jsx23(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
         children,
-        iconRight && /* @__PURE__ */ jsx24(Icon, { icon: iconRight, size: iconSizeMap3[size] })
+        iconRight && /* @__PURE__ */ jsx23(Icon, { icon: iconRight, size: iconSizeMap3[size] })
       ]
     }
   );
@@ -1512,7 +1465,7 @@ function IconButtonLink({
   className,
   ...props
 }) {
-  const link = /* @__PURE__ */ jsx24(
+  const link = /* @__PURE__ */ jsx23(
     AriaLink2,
     {
       ...props,
@@ -1526,11 +1479,11 @@ function IconButtonLink({
         squareSizeStyles2[size],
         className
       ),
-      children: /* @__PURE__ */ jsx24(Icon, { icon, size: iconSizeMap3[size] })
+      children: /* @__PURE__ */ jsx23(Icon, { icon, size: iconSizeMap3[size] })
     }
   );
   if (showTooltip) {
-    return /* @__PURE__ */ jsx24(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
+    return /* @__PURE__ */ jsx23(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
   }
   return link;
 }
@@ -1540,7 +1493,7 @@ import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
@@ -1589,7 +1542,7 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     AriaToggleButton,
     {
       ...props,
@@ -1616,7 +1569,7 @@ import {
   RadioGroup as AriaRadioGroup2,
   Radio as AriaRadio2
 } from "react-aria-components";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ToggleButtonGroupContext = createContext3({
   size: "md"
 });
@@ -1636,7 +1589,7 @@ function ToggleButtonGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx26(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx25(
     AriaRadioGroup2,
     {
       ...props,
@@ -1656,7 +1609,7 @@ function ToggleButtonGroupItem({
   ...props
 }) {
   const { size } = useContext3(ToggleButtonGroupContext);
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(
     AriaRadio2,
     {
       ...props,
@@ -1688,7 +1641,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var popoverStyles = [
   "bg-(--color-surface-default) rounded-md",
   "shadow-lg border border-(--color-border-default)",
@@ -1708,13 +1661,13 @@ function Menu({
   className
 }) {
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
-  return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
+  return /* @__PURE__ */ jsxs17(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx26(
       Popover2,
       {
         className: [popoverStyles, className].filter(Boolean).join(" "),
-        children: items ? /* @__PURE__ */ jsx27(
+        children: items ? /* @__PURE__ */ jsx26(
           AriaMenu,
           {
             items,
@@ -1725,7 +1678,7 @@ function Menu({
             },
             ...selectionProps,
             className: "outline-none",
-            children: (item) => /* @__PURE__ */ jsxs18(
+            children: (item) => /* @__PURE__ */ jsxs17(
               AriaMenuItem,
               {
                 id: item.id,
@@ -1741,14 +1694,14 @@ function Menu({
                   item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
                 ].filter(Boolean).join(" "),
                 children: [
-                  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 })
+                  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 })
                 ]
               }
             )
           }
-        ) : /* @__PURE__ */ jsx27(
+        ) : /* @__PURE__ */ jsx26(
           AriaMenu,
           {
             onAction: (key) => onAction?.(key),
@@ -1764,7 +1717,7 @@ function Menu({
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -1778,7 +1731,7 @@ function MenuItem({
   textValue,
   className
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     AriaMenuItem2,
     {
       id,
@@ -1797,9 +1750,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        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 })
+        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 })
       ]
     }
   );
@@ -1808,7 +1761,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check3 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -1816,7 +1769,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     AriaMenuItem3,
     {
       id,
@@ -1832,9 +1785,9 @@ function MenuCheckboxItem({
         isSelected ? "font-medium" : "",
         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(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs19(Fragment7, { children: [
+        /* @__PURE__ */ jsx28("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx28(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx28("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -1845,15 +1798,15 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
   "aria-label": ariaLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs20(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx29(
       Header,
       {
         className: [
@@ -1872,16 +1825,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx31(Header2, { className, children });
+  return /* @__PURE__ */ jsx30(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     Separator,
     {
       className: [
@@ -1899,16 +1852,16 @@ import {
   Button as AriaButton3
 } from "react-aria-components";
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx33(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx32(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
   const cx = `
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
     focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx33(AriaButton3, { className: twMerge8(cx, className), children });
+  return /* @__PURE__ */ jsx32(AriaButton3, { className: twMerge8(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -1929,7 +1882,7 @@ function PopoverContent({
     entering:placement-left:slide-in-from-right-1
     entering:placement-right:slide-in-from-left-1
   `;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     AriaPopover,
     {
       ...rest,
@@ -1950,7 +1903,7 @@ import {
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var TabsContext = createContext4({
   variant: "underline",
   size: "md"
@@ -1968,7 +1921,7 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx33(
     AriaTabs,
     {
       ...props,
@@ -1988,7 +1941,7 @@ function TabList({
   const { variant } = useContext4(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-(--color-border-default)" : "inline-flex items-center bg-(--color-surface-muted) rounded-lg p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(
     AriaTabList,
     {
       ...props,
@@ -2002,7 +1955,7 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(
     AriaTab,
     {
       ...props,
@@ -2059,7 +2012,7 @@ function getTabVariantStyles(variant, state) {
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(
     AriaTabPanel,
     {
       ...props,
@@ -2079,240 +2032,6 @@ import {
   TabPanel as TabPanel2
 } from "react-aria-components";
 
-// src/components/Tree/Tree.tsx
-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 Check4 } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
-var rowHeightMap = {
-  compact: 32,
-  comfortable: 40
-};
-function NodeRenderer({
-  node,
-  style,
-  tree,
-  dragHandle,
-  checkedIds,
-  onCheckToggle,
-  selectionMode,
-  size,
-  onHover,
-  onHoverEnd,
-  onToggle
-}) {
-  const data = node.data;
-  const isCheckbox = selectionMode === "checkbox";
-  const isChecked = isCheckbox && checkedIds.has(node.id);
-  const isSelected = node.isSelected && !isCheckbox;
-  const isCompact = size === "compact";
-  const IconComponent = data.icon ? data.icon : node.isInternal ? Folder : File;
-  return /* @__PURE__ */ jsxs22(
-    "div",
-    {
-      ref: dragHandle,
-      style,
-      className: [
-        "relative flex items-center cursor-default select-none",
-        isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
-        "text-sm text-(--color-text-primary)",
-        "outline-none",
-        // Full-width background via pseudo-element
-        "before:absolute before:inset-y-0 before:left-[-100vw] before:right-0 before:-z-10 before:transition-colors",
-        isSelected ? "before:bg-(--color-surface-selected) hover:before:bg-(--color-surface-selected-hover) border-l-2 border-l-(--color-brand-accent)" : "hover:before:bg-(--color-surface-hover)",
-        node.isFocused ? "outline-2 outline-(--color-border-focus) outline-offset-[-2px]" : ""
-      ].filter(Boolean).join(" "),
-      role: "treeitem",
-      "aria-selected": isCheckbox ? isChecked : node.isSelected,
-      "aria-expanded": node.isInternal ? node.isOpen : void 0,
-      "aria-level": node.level + 1,
-      onPointerEnter: () => onHover?.(node.data),
-      onPointerLeave: () => onHoverEnd?.(node.data),
-      onClick: (e) => {
-        if (isCheckbox) {
-          onCheckToggle(node.id);
-        } else {
-          node.handleClick(e);
-        }
-      },
-      onKeyDown: (e) => {
-        if (isCheckbox && (e.key === " " || e.key === "Enter")) {
-          e.preventDefault();
-          onCheckToggle(node.id);
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx35(
-          "button",
-          {
-            type: "button",
-            className: [
-              "flex items-center justify-center w-6 h-6 shrink-0",
-              "rounded-sm",
-              "text-(--color-text-secondary)",
-              "hover:text-(--color-text-primary)",
-              "transition-transform",
-              node.isInternal ? "visible" : "invisible"
-            ].filter(Boolean).join(" "),
-            onClick: (e) => {
-              e.stopPropagation();
-              node.toggle();
-              onToggle?.(node.data);
-            },
-            tabIndex: -1,
-            "aria-label": node.isOpen ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx35(
-              ChevronRight2,
-              {
-                size: 14,
-                className: [
-                  "transition-transform",
-                  node.isOpen ? "rotate-90" : ""
-                ].filter(Boolean).join(" ")
-              }
-            )
-          }
-        ),
-        isCheckbox && /* @__PURE__ */ jsx35(
-          "div",
-          {
-            className: [
-              "flex items-center justify-center w-5 h-5 shrink-0",
-              "rounded-sm border transition-colors",
-              isChecked ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) hover:border-(--color-border-strong)"
-            ].join(" "),
-            role: "checkbox",
-            "aria-checked": isChecked,
-            "aria-label": `Select ${data.name}`,
-            children: isChecked && /* @__PURE__ */ jsx35(
-              Check4,
-              {
-                className: "w-3 h-3 text-(--color-text-inverse)",
-                strokeWidth: 3
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx35(
-          IconComponent,
-          {
-            size: 16,
-            className: "shrink-0 text-(--color-text-secondary)",
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx35("span", { className: "truncate", children: data.name })
-      ]
-    }
-  );
-}
-function Tree({
-  data,
-  "aria-label": ariaLabel,
-  size = "comfortable",
-  selectionMode = "single",
-  selectedIds,
-  onSelectionChange,
-  onActivate,
-  onToggle,
-  onHover,
-  onHoverEnd,
-  openByDefault = false,
-  searchTerm,
-  searchMatch,
-  height = 400,
-  indent = 24,
-  disableDrag = true,
-  disableDrop = true,
-  treeRef,
-  className
-}) {
-  const internalRef = useRef2(null);
-  useImperativeHandle(treeRef, () => internalRef.current, []);
-  const [internalChecked, setInternalChecked] = useState2(
-    () => /* @__PURE__ */ new Set()
-  );
-  const checkedIds = selectedIds ?? internalChecked;
-  const handleCheckToggle = useCallback2(
-    (id) => {
-      const next = new Set(checkedIds);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      if (onSelectionChange) {
-        onSelectionChange(next);
-      } else {
-        setInternalChecked(next);
-      }
-    },
-    [checkedIds, onSelectionChange]
-  );
-  const handleSelect = useCallback2(
-    (nodes) => {
-      if (selectionMode === "checkbox" || selectionMode === "none") return;
-      if (onSelectionChange) {
-        onSelectionChange(new Set(nodes.map((n) => n.id)));
-      }
-    },
-    [selectionMode, onSelectionChange]
-  );
-  const handleActivate = useCallback2(
-    (node) => {
-      if (onActivate) {
-        onActivate(node.data);
-      }
-    },
-    [onActivate]
-  );
-  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__ */ jsx35(
-    "div",
-    {
-      role: "tree",
-      "aria-label": ariaLabel,
-      className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx35(
-        ArboristTree,
-        {
-          ref: internalRef,
-          data,
-          width: "100%",
-          height,
-          rowHeight: rowHeightMap[size],
-          indent,
-          openByDefault,
-          searchTerm,
-          searchMatch: arboristSearchMatch,
-          disableDrag,
-          disableDrop,
-          disableMultiSelection: selectionMode === "single" || selectionMode === "none",
-          selection: selectionProp,
-          onSelect: handleSelect,
-          onActivate: handleActivate,
-          disableEdit: true,
-          children: (props) => /* @__PURE__ */ jsx35(
-            NodeRenderer,
-            {
-              ...props,
-              checkedIds,
-              onCheckToggle: handleCheckToggle,
-              selectionMode,
-              size,
-              onHover,
-              onHoverEnd,
-              onToggle
-            }
-          )
-        }
-      )
-    }
-  );
-}
-
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
 import { twMerge as twMerge10 } from "tailwind-merge";
@@ -2320,7 +2039,7 @@ import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext5({
   size: "md"
 });
@@ -2340,7 +2059,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx36(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx34(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx34(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2361,7 +2080,7 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext5(SegmentedControlContext);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx34(
     AriaToggleButton2,
     {
       ...props,
@@ -2385,257 +2104,9 @@ function SegmentedControlItem({
   );
 }
 
-// src/components/FileCard/FileCard.tsx
-import { useCallback as useCallback3 } from "react";
-import { File as File2, Info as Info2 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
-function FileCard({
-  name,
-  icon: IconComponent = File2,
-  size,
-  compact = false,
-  children,
-  onInfo,
-  onPress,
-  className
-}) {
-  const isInteractive = !!onPress;
-  const radius = compact ? "rounded-md" : "rounded-lg";
-  const iconSize = compact ? 24 : 32;
-  const thumbnailClass = compact ? "aspect-square rounded-t-(--border-radius-md)" : "aspect-[4/3] rounded-t-(--border-radius-lg)";
-  const handleInfoClick = useCallback3(
-    (e) => {
-      if (isInteractive) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-      onInfo?.();
-    },
-    [onInfo, isInteractive]
-  );
-  const handleKeyDown = useCallback3(
-    (e) => {
-      if (onPress && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        onPress();
-      }
-    },
-    [onPress]
-  );
-  const cardContent = /* @__PURE__ */ jsxs23(Fragment8, { children: [
-    /* @__PURE__ */ jsx37(
-      "div",
-      {
-        className: `shrink-0 overflow-hidden bg-neutral-900 ${thumbnailClass}`,
-        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: "text-(--color-text-secondary)" }) })
-      }
-    ),
-    /* @__PURE__ */ jsx37(
-      "div",
-      {
-        className: [
-          "flex flex-col border-t border-(--color-border-default)",
-          "bg-(--color-surface-default)",
-          compact ? "px-2 py-1.5 rounded-b-(--border-radius-md)" : "gap-0.5 px-3 py-2 rounded-b-(--border-radius-lg)"
-        ].join(" "),
-        children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment8, { children: [
-          /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx37(
-              IconComponent,
-              {
-                size: 16,
-                className: "shrink-0 text-(--color-text-secondary)"
-              }
-            ),
-            /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-(--color-text-primary) truncate", children: name }),
-            onInfo && /* @__PURE__ */ jsx37(
-              "span",
-              {
-                onClick: handleInfoClick,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    handleInfoClick(e);
-                  }
-                },
-                role: "presentation",
-                children: /* @__PURE__ */ jsx37(
-                  IconButton,
-                  {
-                    icon: Info2,
-                    "aria-label": `Show info for ${name}`,
-                    variant: "ghost",
-                    size: "sm",
-                    className: "shrink-0 -mt-0.5 -mr-1",
-                    onPress: onInfo
-                  }
-                )
-              }
-            )
-          ] }),
-          size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-(--color-text-secondary) tabular-nums pl-[22px]", children: size })
-        ] })
-      }
-    )
-  ] });
-  const baseStyles = [
-    "group flex flex-col overflow-hidden",
-    radius,
-    "border border-(--color-border-default)",
-    "shadow-sm",
-    "transition-all",
-    isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
-    isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
-    className
-  ].filter(Boolean).join(" ");
-  if (onPress) {
-    return /* @__PURE__ */ jsx37(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        "aria-label": name,
-        className: baseStyles,
-        onClick: onPress,
-        onKeyDown: handleKeyDown,
-        children: cardContent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx37("div", { className: baseStyles, children: cardContent });
-}
-
-// src/components/StorageConnectionCard/StorageConnectionCard.tsx
-import { useCallback as useCallback4 } from "react";
-import { AlertCircle, Database } from "lucide-react";
-import { twMerge as twMerge11 } from "tailwind-merge";
-import { Fragment as Fragment9, 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"
-};
-function PreviewArea({
-  status = "connected",
-  errorMessage,
-  children
-}) {
-  if (status === "loading") {
-    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__ */ 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,
-          size: "lg",
-          className: "text-(--color-text-danger)"
-        }
-      ),
-      errorMessage && /* @__PURE__ */ jsx38("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
-    ] });
-  }
-  if (children) {
-    return /* @__PURE__ */ jsx38("div", { className: "h-full w-full overflow-hidden", children });
-  }
-  return /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38(
-    Icon,
-    {
-      icon: Database,
-      size: "xl",
-      className: "text-(--color-text-secondary)"
-    }
-  ) });
-}
-function StorageConnectionCard({
-  name,
-  status,
-  errorMessage,
-  meta,
-  children,
-  href,
-  onPress,
-  actions,
-  className
-}) {
-  const isInteractive = !!href || !!onPress;
-  const handleKeyDown = useCallback4(
-    (e) => {
-      if (onPress && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        onPress();
-      }
-    },
-    [onPress]
-  );
-  const cardContent = /* @__PURE__ */ jsxs24(Fragment9, { 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: twMerge11(
-              "mt-1.5 h-2 w-2 shrink-0 rounded-full",
-              statusDotStyles[status]
-            ),
-            "aria-label": `Status: ${status}`
-          }
-        ),
-        /* @__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: (e) => {
-              if (isInteractive) {
-                e.stopPropagation();
-                e.preventDefault();
-              }
-            },
-            onKeyDown: (e) => {
-              if (isInteractive) {
-                e.stopPropagation();
-              }
-            },
-            role: "presentation",
-            className: "shrink-0 -mt-1 -mr-1",
-            children: actions
-          }
-        )
-      ] }),
-      meta && /* @__PURE__ */ jsx38("div", { className: twMerge11("flex items-center gap-2", status && "pl-4"), children: meta })
-    ] })
-  ] });
-  const baseStyles = twMerge11(
-    "flex flex-col overflow-hidden rounded-lg",
-    "border border-(--color-border-default)",
-    "shadow-sm transition-all",
-    isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
-    isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
-    className
-  );
-  if (href) {
-    return /* @__PURE__ */ jsx38("a", { href, className: twMerge11(baseStyles, "no-underline"), children: cardContent });
-  }
-  if (onPress) {
-    return /* @__PURE__ */ jsx38(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        className: baseStyles,
-        onClick: onPress,
-        onKeyDown: handleKeyDown,
-        children: cardContent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx38("div", { className: baseStyles, children: cardContent });
-}
-
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx35, jsxs as jsxs21 } 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)",
@@ -2660,10 +2131,10 @@ function Badge({
   icon: IconComponent,
   className
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs21(
     "span",
     {
-      className: twMerge12(
+      className: twMerge11(
         "inline-flex items-center gap-1 rounded-full",
         "text-xs font-medium leading-tight",
         variantStyles4[variant],
@@ -2671,7 +2142,7 @@ function Badge({
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx39(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx35(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2679,9 +2150,9 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { useCallback as useCallback5 } from "react";
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useCallback as useCallback2 } from "react";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2699,13 +2170,13 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge13(
+  const containerClass = twMerge12(
     "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",
     className
   );
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback2(
     (e) => {
       if (onPress && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
@@ -2714,22 +2185,22 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs26(Fragment10, { children: [
-    header && /* @__PURE__ */ jsx40(
+  const content = /* @__PURE__ */ jsxs22(Fragment8, { children: [
+    header && /* @__PURE__ */ jsx36(
       "div",
       {
-        className: twMerge13(
+        className: twMerge12(
           "border-b border-(--color-border-default)",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx40("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx36("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx36(
       "div",
       {
-        className: twMerge13(
+        className: twMerge12(
           "border-t border-(--color-border-default)",
           paddingStyles[padding]
         ),
@@ -2738,10 +2209,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx36(
       "div",
       {
         role: "button",
@@ -2753,13 +2224,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx36("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2812,16 +2283,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs23(
       "span",
       {
-        className: twMerge14(
+        className: twMerge13(
           "inline-flex items-center gap-1 font-medium",
           "text-(--color-text-tertiary)",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+          label && /* @__PURE__ */ jsx37("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2851,10 +2322,10 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs23(
     "span",
     {
-      className: twMerge14(
+      className: twMerge13(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2865,8 +2336,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
-        /* @__PURE__ */ jsx41(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx37("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+        /* @__PURE__ */ jsx37(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2874,8 +2345,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
   success: "bg-(--color-progress-fill-success)",
@@ -2898,12 +2369,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs28("div", { className: twMerge15("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) })
+  return /* @__PURE__ */ jsxs24("div", { className: twMerge14("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
+      /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx38(
       "div",
       {
         role: "progressbar",
@@ -2911,14 +2382,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge15(
+        className: twMerge14(
           "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles9[size]
         ),
-        children: /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsx38(
           "div",
           {
-            className: twMerge15(
+            className: twMerge14(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2931,19 +2402,19 @@ function ProgressBar({
 }
 
 // src/components/Banner/Banner.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import {
-  Info as Info3,
+  Info as Info2,
   AlertTriangle,
-  AlertCircle as AlertCircle2,
+  AlertCircle,
   CheckCircle2,
   X as X3
 } from "lucide-react";
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
-    icon: Info3,
+    icon: Info2,
     containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
     iconClass: "text-(--color-banner-info-icon)",
     role: "status"
@@ -2955,7 +2426,7 @@ var variantConfig2 = {
     role: "alert"
   },
   danger: {
-    icon: AlertCircle2,
+    icon: AlertCircle,
     containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
     iconClass: "text-(--color-banner-danger-icon)",
     role: "alert"
@@ -2976,7 +2447,7 @@ function Banner({
   onDismiss,
   className
 }) {
-  const [dismissed, setDismissed] = useState3(false);
+  const [dismissed, setDismissed] = useState2(false);
   if (dismissed) return null;
   const config = variantConfig2[variant];
   const IconComponent = icon ?? config.icon;
@@ -2984,40 +2455,40 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       role: config.role,
-      className: twMerge16(
+      className: twMerge15(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx39(
           IconComponent,
           {
             size: 20,
-            className: twMerge16("shrink-0 mt-0.5", config.iconClass),
+            className: twMerge15("shrink-0 mt-0.5", config.iconClass),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs29("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs29("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs25("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx43(
+        dismissible && /* @__PURE__ */ jsx39(
           "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__ */ jsx43(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx39(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -3026,8 +2497,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -3049,58 +2520,58 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge17(
+  const containerClass = twMerge16(
     "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__ */ jsxs30(Fragment11, { children: [
-    /* @__PURE__ */ jsx44("div", { className: twMerge17(config.labelClass, "text-(--color-text-secondary)"), children: label }),
-    /* @__PURE__ */ jsx44(
+  const content = /* @__PURE__ */ jsxs26(Fragment9, { children: [
+    /* @__PURE__ */ jsx40("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+    /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge17(
+        className: twMerge16(
           config.valueClass,
           "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx44("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx40("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx44("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx44("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
-      className: twMerge18(
+      className: twMerge17(
         "flex flex-wrap items-center gap-3 py-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx45(H2, { children: title }),
-        children && /* @__PURE__ */ jsx45("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+        /* @__PURE__ */ jsx41(H2, { children: title }),
+        children && /* @__PURE__ */ jsx41("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
       ]
     }
   );
 }
 
 // src/components/Pill/Pill.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx42 } 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",
@@ -3126,7 +2597,7 @@ function Pill({
   className,
   ...rest
 }) {
-  const cx = twMerge19(
+  const cx = twMerge18(
     `
     inline-flex items-center
     rounded-full
@@ -3138,12 +2609,12 @@ function Pill({
     colorStyles[color],
     className
   );
-  return /* @__PURE__ */ jsx46("span", { className: cx, ...rest, children });
+  return /* @__PURE__ */ jsx42("span", { className: cx, ...rest, children });
 }
 
 // src/components/Pill/PathPill.tsx
-import { twMerge as twMerge20 } from "tailwind-merge";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function PathPill({
   children,
   visibleCount,
@@ -3155,17 +2626,17 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
-      className: twMerge20("relative flex", className),
+      className: twMerge19("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge20(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx47(
+        return /* @__PURE__ */ jsx43(
           Pill,
           {
             className: cx,
@@ -3181,8 +2652,8 @@ function PathPill({
 }
 
 // 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";
+import { createContext as createContext6, useContext as useContext6, useCallback as useCallback3, useMemo } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var FormWizardContext = createContext6({
   currentStep: 0,
   totalSteps: 1,
@@ -3202,7 +2673,7 @@ function FormWizard({
 }) {
   const canGoBack = currentStep > 0;
   const isLastStep = currentStep >= totalSteps - 1;
-  const goBack = useCallback6(() => {
+  const goBack = useCallback3(() => {
     if (currentStep > 0) {
       onStepChange(currentStep - 1);
     }
@@ -3217,13 +2688,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx48(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx44(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx45(
     "svg",
     {
       "aria-hidden": "true",
@@ -3234,24 +2705,24 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx49("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx45("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx49("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx49("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx45("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx45("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs28(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs32("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsxs28("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx45(
               "div",
               {
                 "aria-hidden": "true",
@@ -3260,8 +2731,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx49(
+            ) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx45(
               "div",
               {
                 className: [
@@ -3273,10 +2744,10 @@ 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(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx45(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx45(
               "div",
               {
                 "aria-hidden": "true",
@@ -3285,9 +2756,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx45(
             "span",
             {
               className: [
@@ -3305,15 +2776,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx46(
       Button,
       {
         variant: "secondary",
@@ -3323,7 +2794,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         variant: "primary",
@@ -3728,9 +3199,7 @@ export {
   DeltaIndicator,
   Dialog,
   EmptyState,
-  Field,
   Fieldset,
-  FileCard,
   FontSize2xl,
   FontSize3xl,
   FontSize4xl,
@@ -3760,7 +3229,7 @@ export {
   InputAddon,
   InputGroup,
   InputGroupContext,
-  Label3 as Label,
+  Label,
   LineHeightNormal,
   LineHeightRelaxed,
   LineHeightTight,
@@ -3796,7 +3265,6 @@ export {
   Spacing6,
   Spacing8,
   Spinner,
-  StorageConnectionCard,
   Switch,
   Tab,
   TabList,
@@ -3810,7 +3278,6 @@ export {
   ToggleButtonGroup,
   ToggleButtonGroupItem,
   Tooltip,
-  Tree,
   Tab2 as UnstyledTab,
   TabList2 as UnstyledTabList,
   TabPanel2 as UnstyledTabPanel,