@cytario/design 1.14.0 → 1.15.0

package/dist/index.js

@@ -542,6 +542,7 @@ function Select({
   items,
   placeholder = "Select an option",
   errorMessage,
+  hideLabel = false,
   isDisabled,
   isRequired,
   className,
@@ -561,8 +562,9 @@ function Select({
           Label2,
           {
             className: [
-              "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
-            ].join(" "),
+              "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]",
+              hideLabel && "sr-only"
+            ].filter(Boolean).join(" "),
             children: [
               label,
               isRequired && /* @__PURE__ */ jsx7(
@@ -2141,13 +2143,194 @@ function SegmentedControlItem({
   );
 }
 
+// src/components/FileCard/FileCard.tsx
+import { useCallback as useCallback3 } from "react";
+import {
+  File as File2,
+  FileSpreadsheet,
+  Folder as Folder2,
+  Image,
+  Info as Info2,
+  Microscope
+} from "lucide-react";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+function getFileIcon(type, extension) {
+  if (type === "directory") return Folder2;
+  const ext = (extension ?? "").toLowerCase();
+  if (ext === "ome.tif" || ext === "ome.tiff") return Microscope;
+  if (/^(tiff?|png|jpe?g)$/.test(ext)) return Image;
+  if (/^(csv|parquet)$/.test(ext)) return FileSpreadsheet;
+  return File2;
+}
+function getTypeLabel(type, extension) {
+  if (type === "directory") return "Folder";
+  const ext = (extension ?? "").toLowerCase();
+  if (ext === "ome.tif" || ext === "ome.tiff") return "OME-TIFF";
+  if (/^tiff?$/.test(ext)) return "TIFF";
+  if (ext === "csv") return "CSV";
+  if (ext === "parquet") return "Parquet";
+  if (ext === "png") return "PNG";
+  if (/^jpe?g$/.test(ext)) return "JPEG";
+  return ext.toUpperCase() || "File";
+}
+function FileIcon({
+  type,
+  extension,
+  size = 16
+}) {
+  const IconComponent = getFileIcon(type, extension);
+  return /* @__PURE__ */ jsx30(
+    IconComponent,
+    {
+      size,
+      className: "shrink-0 text-[var(--color-text-secondary)]"
+    }
+  );
+}
+function FileCard({
+  name,
+  type,
+  size,
+  extension,
+  compact = false,
+  children,
+  onInfo,
+  href,
+  onPress,
+  className
+}) {
+  const isInteractive = !!href || !!onPress;
+  const radius = compact ? "rounded-[var(--border-radius-md)]" : "rounded-[var(--border-radius-lg)]";
+  const IconComponent = getFileIcon(type, extension);
+  const iconSize = compact ? 24 : 32;
+  const iconColor = type === "directory" ? "text-[var(--color-text-tertiary)]" : "text-[var(--color-text-secondary)]";
+  const thumbnailClass = compact ? "aspect-square rounded-t-[var(--border-radius-md)]" : "aspect-[4/3] rounded-t-[var(--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__ */ jsxs20(Fragment8, { children: [
+    /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        className: `shrink-0 relative overflow-hidden bg-[var(--color-neutral-900)] ${thumbnailClass}`,
+        children: [
+          children ? /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx30("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx30(IconComponent, { size: iconSize, className: iconColor }) }),
+          onInfo && /* @__PURE__ */ jsx30(
+            "div",
+            {
+              className: [
+                "absolute opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
+                "transition-opacity duration-150",
+                compact ? "bottom-1.5 right-1.5" : "bottom-2 right-2"
+              ].join(" "),
+              children: /* @__PURE__ */ jsx30(
+                "span",
+                {
+                  onClick: handleInfoClick,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleInfoClick(e);
+                    }
+                  },
+                  role: "presentation",
+                  children: /* @__PURE__ */ jsx30(
+                    IconButton,
+                    {
+                      icon: Info2,
+                      "aria-label": `Show info for ${name}`,
+                      variant: "ghost",
+                      size: "sm",
+                      className: "bg-[var(--color-neutral-900)]/75 text-[var(--color-text-inverse)] hover:bg-[var(--color-neutral-900)]/90 rounded-[var(--border-radius-sm)]",
+                      onPress: onInfo
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx30(
+      "div",
+      {
+        className: [
+          "flex flex-col border-t border-[var(--color-border-default)]",
+          "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__ */ jsx30("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs20(Fragment8, { children: [
+          /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx30(FileIcon, { type, extension, size: 16 }),
+            /* @__PURE__ */ jsx30("span", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name })
+          ] }),
+          size && /* @__PURE__ */ jsx30("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
+        ] })
+      }
+    )
+  ] });
+  const baseStyles = [
+    "group flex flex-col overflow-hidden",
+    radius,
+    "border border-[var(--color-border-default)]",
+    "shadow-sm",
+    "transition-all",
+    isInteractive && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
+    isInteractive && "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    className
+  ].filter(Boolean).join(" ");
+  if (href) {
+    return /* @__PURE__ */ jsx30(
+      "a",
+      {
+        href,
+        "aria-label": name,
+        className: [baseStyles, "no-underline"].join(" "),
+        children: cardContent
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx30(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": name,
+        className: baseStyles,
+        onClick: onPress,
+        onKeyDown: handleKeyDown,
+        children: cardContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx30("div", { className: baseStyles, children: cardContent });
+}
+
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
-import { AlertCircle, Database, Info as Info2 } from "lucide-react";
+import { useCallback as useCallback4 } from "react";
+import { AlertCircle, Database, Info as Info3 } from "lucide-react";
 import { twMerge as twMerge9 } from "tailwind-merge";
 
 // src/components/Pill/Pill.tsx
 import { twMerge as twMerge7 } from "tailwind-merge";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var HASH_PALETTE = [
   "teal",
   // sky
@@ -2198,7 +2381,7 @@ function resolveColor(color, name) {
 }
 function Pill({ children, color, name, className }) {
   const resolved = resolveColor(color, name);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "span",
     {
       className: twMerge7(
@@ -2215,7 +2398,7 @@ function Pill({ children, color, name, className }) {
 
 // src/components/Pill/GroupPill.tsx
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function GroupPill({
   path,
   visibleCount = 3,
@@ -2226,7 +2409,7 @@ function GroupPill({
   const hiddenCount = Math.max(0, segments.length - visibleCount);
   const hiddenSegments = segments.slice(0, hiddenCount);
   const visibleSegments = segments.slice(hiddenCount);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "span",
     {
       className: twMerge8(
@@ -2237,7 +2420,7 @@ function GroupPill({
       children: [
         hiddenSegments.map((segment, index) => {
           const color = pillColorFromName(segment);
-          return /* @__PURE__ */ jsx31(
+          return /* @__PURE__ */ jsx32(
             "span",
             {
               className: twMerge8(
@@ -2250,14 +2433,14 @@ function GroupPill({
             `dot-${index}-${segment}`
           );
         }),
-        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx31(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
+        visibleSegments.map((segment, index) => /* @__PURE__ */ jsx32(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
       ]
     }
   );
 }
 
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
-import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-[var(--color-status-success)]",
   error: "border-2 border-[var(--color-status-danger)] bg-transparent",
@@ -2273,7 +2456,7 @@ function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
   const color = config?.color ?? "neutral";
-  return /* @__PURE__ */ jsx32(Pill, { color, children: label });
+  return /* @__PURE__ */ jsx33(Pill, { color, children: label });
 }
 function PreviewArea({
   status = "connected",
@@ -2281,11 +2464,11 @@ function PreviewArea({
   children
 }) {
   if (status === "loading") {
-    return /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+    return /* @__PURE__ */ jsx33("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx33(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
-      /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs22("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
+      /* @__PURE__ */ jsx33(
         Icon,
         {
           icon: AlertCircle,
@@ -2293,13 +2476,13 @@ function PreviewArea({
           className: "text-[var(--color-text-danger)]"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx32("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx33("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
     ] });
   }
   if (children) {
-    return /* @__PURE__ */ jsx32("div", { className: "h-full w-full overflow-hidden", children });
+    return /* @__PURE__ */ jsx33("div", { className: "h-full w-full overflow-hidden", children });
   }
-  return /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx33(
     Icon,
     {
       icon: Database,
@@ -2317,14 +2500,35 @@ function StorageConnectionCard({
   imageCount,
   children,
   href,
+  onPress,
   onInfo,
   className
 }) {
-  const cardContent = /* @__PURE__ */ jsxs21(Fragment8, { children: [
-    /* @__PURE__ */ jsx32("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx32(PreviewArea, { status, errorMessage, children }) }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
-      /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-2", children: [
-        status && /* @__PURE__ */ jsx32(
+  const isInteractive = !!href || !!onPress;
+  const handleInfoPress = useCallback4(
+    (e) => {
+      if (isInteractive) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      onInfo?.();
+    },
+    [onInfo, isInteractive]
+  );
+  const handleKeyDown = useCallback4(
+    (e) => {
+      if (onPress && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onPress();
+      }
+    },
+    [onPress]
+  );
+  const cardContent = /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    /* @__PURE__ */ jsx33("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx33(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsxs22("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__ */ jsxs22("div", { className: "flex items-start gap-2", children: [
+        status && /* @__PURE__ */ jsx33(
           "span",
           {
             className: twMerge9(
@@ -2334,25 +2538,35 @@ function StorageConnectionCard({
             "aria-label": `Status: ${status}`
           }
         ),
-        /* @__PURE__ */ jsx32("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
-        onInfo && /* @__PURE__ */ jsx32(
-          IconButton,
+        /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
+        onInfo && /* @__PURE__ */ jsx33(
+          "span",
           {
-            icon: Info2,
-            "aria-label": "Connection info",
-            variant: "ghost",
-            size: "sm",
-            className: "shrink-0 -mt-1 -mr-1",
-            onPress: () => {
-              onInfo();
-            }
+            onClick: handleInfoPress,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                handleInfoPress(e);
+              }
+            },
+            role: "presentation",
+            children: /* @__PURE__ */ jsx33(
+              IconButton,
+              {
+                icon: Info3,
+                "aria-label": "Connection info",
+                variant: "ghost",
+                size: "sm",
+                className: "shrink-0 -mt-1 -mr-1",
+                onPress: onInfo
+              }
+            )
           }
         )
       ] }),
-      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs21("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: [
-        provider && /* @__PURE__ */ jsx32(ProviderBadge, { provider }),
-        provider && region && /* @__PURE__ */ jsx32("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
-        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs21("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
+      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs22("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: [
+        provider && /* @__PURE__ */ jsx33(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx33("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs22("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]", children: [
           imageCount,
           " ",
           imageCount === 1 ? "image" : "images"
@@ -2364,18 +2578,32 @@ function StorageConnectionCard({
     "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
     "border border-[var(--color-border-default)]",
     "shadow-sm transition-all",
-    href && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
+    isInteractive && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
+    isInteractive && "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx32("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx33("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx33(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: baseStyles,
+        onClick: onPress,
+        onKeyDown: handleKeyDown,
+        children: cardContent
+      }
+    );
   }
-  return /* @__PURE__ */ jsx32("div", { className: baseStyles, children: cardContent });
+  return /* @__PURE__ */ jsx33("div", { className: baseStyles, children: cardContent });
 }
 
 // src/components/Badge/Badge.tsx
 import { twMerge as twMerge10 } from "tailwind-merge";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } 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)]",
@@ -2400,7 +2628,7 @@ function Badge({
   icon: IconComponent,
   className
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "span",
     {
       className: twMerge10(
@@ -2411,7 +2639,7 @@ function Badge({
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx33(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx34(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2419,8 +2647,9 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
+import { useCallback as useCallback5 } from "react";
 import { twMerge as twMerge11 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2433,18 +2662,28 @@ function Card({
   footer,
   padding = "md",
   href,
+  onPress,
   interactive = false,
   className
 }) {
-  const isInteractive = interactive || !!href;
+  const isInteractive = interactive || !!href || !!onPress;
   const containerClass = twMerge11(
     "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
-    isInteractive && "transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
-    href && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    isInteractive && "transition-all hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
+    (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs23(Fragment9, { children: [
-    header && /* @__PURE__ */ jsx34(
+  const handleKeyDown = useCallback5(
+    (e) => {
+      if (onPress && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onPress();
+      }
+    },
+    [onPress]
+  );
+  const content = /* @__PURE__ */ jsxs24(Fragment10, { children: [
+    header && /* @__PURE__ */ jsx35(
       "div",
       {
         className: twMerge11(
@@ -2454,8 +2693,8 @@ function Card({
         children: header
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx35(
       "div",
       {
         className: twMerge11(
@@ -2467,15 +2706,28 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx34("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx35("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx34("div", { className: containerClass, children: content });
+  if (onPress) {
+    return /* @__PURE__ */ jsx35(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: containerClass,
+        onClick: onPress,
+        onKeyDown: handleKeyDown,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx35("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
 import { twMerge as twMerge12 } from "tailwind-merge";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2528,7 +2780,7 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs25(
       "span",
       {
         className: twMerge12(
@@ -2537,7 +2789,7 @@ function DeltaIndicator({
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx35("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          label && /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2567,7 +2819,7 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "span",
     {
       className: twMerge12(
@@ -2581,8 +2833,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx35("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
-        /* @__PURE__ */ jsx35(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+        /* @__PURE__ */ jsx36(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2591,7 +2843,7 @@ function DeltaIndicator({
 
 // src/components/ProgressBar/ProgressBar.tsx
 import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-[var(--color-progress-fill)]",
   success: "bg-[var(--color-progress-fill-success)]",
@@ -2614,12 +2866,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs25("div", { className: twMerge13("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
-      /* @__PURE__ */ jsx36("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge13("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx37("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx37("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         role: "progressbar",
@@ -2631,7 +2883,7 @@ function ProgressBar({
           "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
           sizeStyles8[size]
         ),
-        children: /* @__PURE__ */ jsx36(
+        children: /* @__PURE__ */ jsx37(
           "div",
           {
             className: twMerge13(
@@ -2649,17 +2901,17 @@ function ProgressBar({
 // src/components/Banner/Banner.tsx
 import { useState as useState3 } from "react";
 import {
-  Info as Info3,
+  Info as Info4,
   AlertTriangle,
   AlertCircle as AlertCircle2,
   CheckCircle2,
   X as X3
 } from "lucide-react";
 import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
-    icon: Info3,
+    icon: Info4,
     containerClass: "bg-[var(--color-banner-info-bg)] border-[var(--color-banner-info-border)] text-[var(--color-banner-info-text)]",
     iconClass: "text-[var(--color-banner-info-icon)]",
     role: "status"
@@ -2700,7 +2952,7 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       role: config.role,
@@ -2711,7 +2963,7 @@ function Banner({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           IconComponent,
           {
             size: 20,
@@ -2719,21 +2971,21 @@ function Banner({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs26("span", { className: "font-[number:var(--font-weight-medium)]", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs27("span", { className: "font-[number:var(--font-weight-medium)]", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx37(
+        dismissible && /* @__PURE__ */ jsx38(
           "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__ */ jsx37(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx38(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -2743,7 +2995,7 @@ function Banner({
 
 // src/components/MetricCard/MetricCard.tsx
 import { twMerge as twMerge15 } from "tailwind-merge";
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -2771,9 +3023,9 @@ function MetricCard({
     href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs27(Fragment10, { children: [
-    /* @__PURE__ */ jsx38("div", { className: twMerge15(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
-    /* @__PURE__ */ jsx38(
+  const content = /* @__PURE__ */ jsxs28(Fragment11, { children: [
+    /* @__PURE__ */ jsx39("div", { className: twMerge15(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
+    /* @__PURE__ */ jsx39(
       "div",
       {
         className: twMerge15(
@@ -2783,23 +3035,23 @@ function MetricCard({
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx38("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx39("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx38("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx39("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx38("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx39("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { twMerge as twMerge16 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: twMerge16(
@@ -2807,16 +3059,16 @@ function SectionHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx39(H2, { children: title }),
-        children && /* @__PURE__ */ jsx39("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
+        /* @__PURE__ */ jsx40(H2, { children: title }),
+        children && /* @__PURE__ */ jsx40("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
       ]
     }
   );
 }
 
 // src/components/FormWizard/FormWizard.tsx
-import { createContext as createContext5, useContext as useContext5, useCallback as useCallback3, useMemo } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { createContext as createContext5, useContext as useContext5, useCallback as useCallback6, useMemo } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FormWizardContext = createContext5({
   currentStep: 0,
   totalSteps: 1,
@@ -2836,7 +3088,7 @@ function FormWizard({
 }) {
   const canGoBack = currentStep > 0;
   const isLastStep = currentStep >= totalSteps - 1;
-  const goBack = useCallback3(() => {
+  const goBack = useCallback6(() => {
     if (currentStep > 0) {
       onStepChange(currentStep - 1);
     }
@@ -2851,13 +3103,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx40(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx41(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "svg",
     {
       "aria-hidden": "true",
@@ -2868,24 +3120,24 @@ function CheckIcon2() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx41("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx42("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx41("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx41("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx42("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx42("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsxs30("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx42(
               "div",
               {
                 "aria-hidden": "true",
@@ -2894,8 +3146,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx41("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx41(
+            ) : /* @__PURE__ */ jsx42("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx42(
               "div",
               {
                 className: [
@@ -2907,10 +3159,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__ */ jsx41(CheckIcon2, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx42(CheckIcon2, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx41(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx42(
               "div",
               {
                 "aria-hidden": "true",
@@ -2919,9 +3171,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx41("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx42("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             "span",
             {
               className: [
@@ -2939,15 +3191,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
-    canGoBack && /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
+    canGoBack && /* @__PURE__ */ jsx43(
       Button,
       {
         variant: "secondary",
@@ -2957,7 +3209,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       Button,
       {
         variant: "primary",
@@ -3364,6 +3616,8 @@ export {
   EmptyState,
   Field,
   Fieldset,
+  FileCard,
+  FileIcon,
   FontSize2xl,
   FontSize3xl,
   FontSize4xl,
@@ -3442,6 +3696,8 @@ export {
   TabPanel2 as UnstyledTabPanel,
   Tabs2 as UnstyledTabs,
   createToastBridge,
+  getFileIcon,
+  getTypeLabel,
   pillColorFromName,
   useFormWizard,
   useInputGroup,