@geomak/ui 1.7.0 → 1.7.2

package/dist/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 var chunk255PCZIW_cjs = require('./chunk-255PCZIW.cjs');
-var React10 = require('react');
-var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
+var React9 = require('react');
+var reactDom = require('react-dom');
 var Dialog = require('@radix-ui/react-dialog');
 var framerMotion = require('framer-motion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
@@ -35,7 +35,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React10__default = /*#__PURE__*/_interopDefault(React10);
+var React9__default = /*#__PURE__*/_interopDefault(React9);
 var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
@@ -46,18 +46,6 @@ var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
-function Portal({ children, target }) {
-  const [resolved, setResolved] = React10.useState(null);
-  React10.useEffect(() => {
-    if (target === null) {
-      setResolved(null);
-      return;
-    }
-    const node = typeof target === "function" ? target() : target ?? document.body;
-    setResolved(node ?? null);
-  }, [target]);
-  return resolved ? reactDom.createPortal(children, resolved) : null;
-}
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
 var Sun = ({ color = "yellow" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }) });
 var CheckCircle = ({ color = "#fff", size = 28 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 0.25C6.40625 0.25 0.25 6.40625 0.25 14C0.25 21.5937 6.40625 27.75 14 27.75C21.5937 27.75 27.75 21.5937 27.75 14C27.75 6.40625 21.5937 0.25 14 0.25ZM19.96 11.675C20.0697 11.5496 20.1533 11.4034 20.2057 11.2452C20.2582 11.087 20.2784 10.9199 20.2653 10.7537C20.2522 10.5876 20.206 10.4257 20.1295 10.2777C20.0529 10.1296 19.9475 9.99838 19.8194 9.89168C19.6914 9.78497 19.5433 9.70495 19.3839 9.65633C19.2244 9.6077 19.0569 9.59145 18.8911 9.60853C18.7253 9.62562 18.5646 9.67568 18.4184 9.75579C18.2723 9.8359 18.1436 9.94443 18.04 10.075L12.665 16.5237L9.88375 13.7412C9.648 13.5136 9.33224 13.3876 9.0045 13.3904C8.67675 13.3933 8.36324 13.5247 8.13148 13.7565C7.89972 13.9882 7.76825 14.3018 7.76541 14.6295C7.76256 14.9572 7.88855 15.273 8.11625 15.5087L11.8662 19.2587C11.9891 19.3815 12.1361 19.4773 12.298 19.5401C12.4599 19.6028 12.6331 19.6312 12.8066 19.6233C12.98 19.6154 13.15 19.5715 13.3055 19.4943C13.4611 19.4171 13.5988 19.3084 13.71 19.175L19.96 11.675Z", fill: color }) });
@@ -217,6 +205,18 @@ Icon.Save = Save;
 Icon.Copy = Copy;
 Icon.CircleStack = CircleStack;
 var icons_default = Icon;
+function Portal({ children, target }) {
+  const [resolved, setResolved] = React9.useState(null);
+  React9.useEffect(() => {
+    if (target === null) {
+      setResolved(null);
+      return;
+    }
+    const node = typeof target === "function" ? target() : target ?? document.body;
+    setResolved(node ?? null);
+  }, [target]);
+  return resolved ? reactDom.createPortal(children, resolved) : null;
+}
 function IconButton({
   icon,
   onClick,
@@ -227,7 +227,7 @@ function IconButton({
   loading = false,
   loadingIcon
 }) {
-  const colorScheme = React10.useMemo(() => {
+  const colorScheme = React9.useMemo(() => {
     if (type === "primary") {
       return "hover:bg-true-blue bg-usafa-blue dark:bg-independence dark:hover:bg-black-coral";
     }
@@ -332,7 +332,8 @@ function Button({
   );
 }
 function Modal({
-  size = [600, 400],
+  width,
+  size,
   isOpen = false,
   onClose,
   onOk,
@@ -344,6 +345,7 @@ function Modal({
   children
 }) {
   const reduced = framerMotion.useReducedMotion();
+  const maxWidth = width ?? size?.[0] ?? 600;
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
@@ -362,7 +364,7 @@ function Modal({
       {
         className: "fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none",
         style: {
-          maxWidth: size[0],
+          maxWidth,
           x: "-50%",
           y: "-50%"
         },
@@ -387,7 +389,7 @@ function Modal({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children: isOpen && children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children }),
           hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-border px-5 py-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
@@ -469,7 +471,7 @@ function Drawer({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children: isOpen && children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children }),
           hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-border px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Button, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
             /* @__PURE__ */ jsxRuntime.jsx(Button, { style: { width: 90 }, content: okText, onClick: onOk })
@@ -536,11 +538,11 @@ function Tabs({
   tabsClosable = true,
   defaultActiveTab
 }) {
-  const [value, setValue] = React10.useState(() => defaultActiveTab ?? tabs[0]?.key ?? "");
-  React10.useEffect(() => {
+  const [value, setValue] = React9.useState(() => defaultActiveTab ?? tabs[0]?.key ?? "");
+  React9.useEffect(() => {
     if (defaultActiveTab) setValue(defaultActiveTab);
   }, [defaultActiveTab]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (tabs.length === 0) {
       setValue("");
       return;
@@ -588,29 +590,46 @@ function Tabs({
             {
               "aria-label": "Tabs",
               className: "flex-1 flex items-center gap-1 overflow-x-auto overflow-y-hidden rounded-lg scroll-smooth snap-x snap-mandatory hidden-scrollbar",
-              children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
-                TabsPrimitive__namespace.Trigger,
-                {
-                  value: tab.key,
-                  className: "snap-start snap-always flex items-center justify-between gap-2 px-3 py-2 rounded-3xl cursor-pointer transition-all duration-200 select-none h-10 flex-1 min-w-[120px] max-w-[220px] flex-shrink-0\n                                       text-foreground-secondary bg-surface-raised\n                                       hover:bg-surface hover:text-foreground\n                                       data-[state=active]:bg-accent data-[state=active]:text-accent-foreground\n                                       focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm", children: tab.title }),
-                    tabsClosable && /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        role: "button",
-                        "aria-label": `Close ${tab.title}`,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          onTabClose?.(tab.key);
-                        },
-                        className: "flex-shrink-0 rounded hover:bg-black/10 p-0.5 transition-colors",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                      }
-                    )
-                  ]
-                },
-                tab.key
+              children: tabs.map((tab) => (
+                // Trigger + close button are SIBLINGS, not nested.
+                // Nesting a clickable element inside <button> is invalid
+                // HTML and breaks keyboard activation of the inner one.
+                // The wrapper carries `group` so the close button can
+                // react to the trigger's `data-state=active` for styling.
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "snap-start snap-always relative flex items-center flex-1 min-w-[120px] max-w-[220px] flex-shrink-0 group",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TabsPrimitive__namespace.Trigger,
+                        {
+                          value: tab.key,
+                          className: `w-full ${tabsClosable ? "pr-8" : "pr-3"} pl-3 py-2 rounded-3xl cursor-pointer transition-all duration-200 select-none h-10 text-left
+                                           text-foreground-secondary bg-surface-raised
+                                           hover:bg-surface hover:text-foreground
+                                           data-[state=active]:bg-accent data-[state=active]:text-accent-foreground
+                                           focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm block", children: tab.title })
+                        }
+                      ),
+                      tabsClosable && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Close ${tab.title}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onTabClose?.(tab.key);
+                          },
+                          className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-foreground-secondary group-data-[state=active]:text-accent-foreground hover:bg-black/10 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        }
+                      )
+                    ]
+                  },
+                  tab.key
+                )
               ))
             }
           ),
@@ -673,40 +692,41 @@ function TreeNodeItem({
       defaultValue: initialOpen,
       style: { paddingLeft: depth * 12 },
       children: /* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.Item, { value: item.key, className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.Trigger, { className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-accent w-full text-left rounded-md hover:bg-surface-raised transition-colors duration-150", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: 2.5,
-              className: "h-3.5 w-3.5 flex-shrink-0 text-foreground-muted transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Accordion__namespace.Trigger,
+          {
+            onClick: () => onNodeClick({
+              isParent: true,
+              key: item.key,
+              label: item.label,
+              data: item.nodeData,
+              parentLabel: item.parentLabel
+            }),
+            className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-accent w-full text-left rounded-md hover:bg-surface-raised transition-colors duration-150",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
                 {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M19 9l-7 7-7-7"
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2.5,
+                  className: "h-3.5 w-3.5 flex-shrink-0 text-foreground-muted transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "text-sm font-semibold text-foreground select-none",
-              onClick: () => onNodeClick({
-                isParent: true,
-                key: item.key,
-                label: item.label,
-                data: item.nodeData,
-                parentLabel: item.parentLabel
-              }),
-              children: item.label
-            }
-          )
-        ] }),
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground select-none", children: item.label })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(Accordion__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3.5 border-l border-border py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
           TreeNodeItem,
           {
@@ -769,7 +789,7 @@ function ToggleButton({ items, onChange, activeKey }) {
     }
   );
 }
-var NotificationContext = React10.createContext({
+var NotificationContext = React9.createContext({
   open: () => void 0,
   close: () => void 0
 });
@@ -827,7 +847,7 @@ function NotificationItem({
   onClose,
   reduced
 }) {
-  const [hovered, setHovered] = React10.useState(false);
+  const [hovered, setHovered] = React9.useState(false);
   const initial = getInitialMotion(pos, reduced);
   const center = pos.endsWith("center");
   const duration = n.duration ?? 4e3;
@@ -908,7 +928,7 @@ function NotificationProvider({
   children,
   position = "top-right"
 }) {
-  const [notifications, setNotifications] = React10.useState([]);
+  const [notifications, setNotifications] = React9.useState([]);
   const reduced = framerMotion.useReducedMotion();
   const open = (payload) => {
     setNotifications((prev) => [
@@ -944,7 +964,7 @@ function NotificationProvider({
   ] }) });
 }
 function useNotification() {
-  const { open } = React10.useContext(NotificationContext);
+  const { open } = React9.useContext(NotificationContext);
   return {
     info: (props) => open({ type: "info", ...props }),
     success: (props) => open({ type: "success", ...props }),
@@ -952,49 +972,71 @@ function useNotification() {
     danger: (props) => open({ type: "danger", ...props })
   };
 }
-function LoadingSpinner({ prompt }) {
-  const letterRefs = React10.useMemo(() => [], []);
-  const letters = prompt.split("");
-  React10.useEffect(() => {
-    const timeouts = [];
-    if (letterRefs.length === letters.length) {
-      letterRefs.forEach((ref, index) => {
-        const t = setTimeout(() => {
-          ref?.classList.add("slowly-appear");
-        }, index * 100);
-        timeouts.push(t);
-      });
+var containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.06 } }
+};
+var letterVariants = {
+  hidden: { opacity: 0, y: 6 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.25, ease: "easeOut" } }
+};
+function LoadingSpinner({
+  prompt,
+  spinnerColor,
+  textColor,
+  backdropOpacity = 0.92
+}) {
+  const reduced = framerMotion.useReducedMotion();
+  const letters = Array.from(prompt);
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": prompt,
+      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
+      style: { opacity: backdropOpacity },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
+            style: { color: spinnerColor ?? "var(--color-accent)" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            className: "text-3xl font-bold tracking-tight select-none",
+            style: { color: textColor ?? "var(--color-foreground)" },
+            variants: containerVariants,
+            initial: reduced ? "visible" : "hidden",
+            animate: "visible",
+            children: letters.map((letter, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.span,
+              {
+                className: "inline-block whitespace-pre",
+                variants: letterVariants,
+                children: letter
+              },
+              index
+            ))
+          }
+        )
+      ]
     }
-    return () => timeouts.forEach(clearTimeout);
-  }, [letterRefs, letters.length]);
-  return (
-    // Portaled so the full-screen overlay always covers the real viewport,
-    // not whatever container the consumer renders LoadingSpinner inside.
-    /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed top-0 bottom-0 right-0 left-0 bg-oxford-blue-700-opaque z-[8000000] flex flex-col gap-5 items-center justify-start pt-80", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r-prussian-blue border-l-prussian-blue border-t-white border-b-white border-[10px] w-[80px] h-[80px] rounded-xl shapeshift" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue dark:text-white text-3xl font-bold", children: letters.map((letter, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "select-none",
-          ref: (ref) => {
-            letterRefs[index] = ref;
-          },
-          children: letter
-        },
-        index
-      )) })
-    ] }) })
-  );
+  ) });
 }
 function FadingBase({
   className = "",
   isMounted = false,
   children
 }) {
-  const [shouldRender, setShouldRender] = React10.useState(isMounted);
-  const [visible, setVisible] = React10.useState(false);
-  const timerRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const [shouldRender, setShouldRender] = React9.useState(isMounted);
+  const [visible, setVisible] = React9.useState(false);
+  const timerRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (isMounted) {
       setShouldRender(true);
       const rafId = requestAnimationFrame(() => setVisible(true));
@@ -1035,9 +1077,9 @@ function ScalableContainer({
   children,
   assignClassOnClick
 }) {
-  const containerRef = React10.useRef(null);
-  const [isScaled, setScaled] = React10.useState(false);
-  const [wrapperClass, setWrapperClass] = React10.useState("");
+  const containerRef = React9.useRef(null);
+  const [isScaled, setScaled] = React9.useState(false);
+  const [wrapperClass, setWrapperClass] = React9.useState("");
   const onClick = () => {
     const next = !isScaled;
     setScaled(next);
@@ -1147,17 +1189,17 @@ function CatalogGrid({ items, buttonText, onOpen }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
 }
 function CatalogCarousel({ items, buttonText, onOpen }) {
-  const [activeIndex, setActiveIndex] = React10.useState(0);
-  const [indexPool, setIndexPool] = React10.useState([]);
-  const cardRefs = React10.useRef([]);
-  const getIndexes = React10.useMemo(() => {
+  const [activeIndex, setActiveIndex] = React9.useState(0);
+  const [indexPool, setIndexPool] = React9.useState([]);
+  const cardRefs = React9.useRef([]);
+  const getIndexes = React9.useMemo(() => {
     let nextIndex = activeIndex + 1;
     let previousIndex = activeIndex - 1;
     if (activeIndex === 0) previousIndex = items.length - 1;
     if (activeIndex === items.length - 1) nextIndex = 0;
     return { previousIndex, nextIndex };
   }, [activeIndex, items.length]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const { nextIndex, previousIndex } = getIndexes;
     let indexes = [previousIndex, activeIndex, nextIndex];
     if (activeIndex !== 0 && activeIndex !== items.length - 1) {
@@ -1246,7 +1288,12 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
       className: `transition duration-300 hover:bg-prussian-blue ${isActive ? "bg-prussian-blue" : ""} rounded-lg p-2 cursor-pointer`,
       onClick,
       tabIndex: 0,
-      onKeyDown: (e) => e.key === "Enter" && onClick?.(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
       children: icon
     }
   ) });
@@ -1271,14 +1318,14 @@ function MenuBar({ items }) {
   );
 }
 function ContextMenu({ items, position, visible, onClose }) {
-  const contextRef = React10.useRef(null);
-  const childMenuRef = React10.useRef(null);
-  const [hasArrowUp, setHasArrowUp] = React10.useState(true);
-  const [childArrowUp, setChildArrowUp] = React10.useState(false);
-  const [hoveredItem, setHoveredItem] = React10.useState(-1);
-  const [hoveredChild, setHoveredChild] = React10.useState(-1);
-  const [activeChildren, setActiveChildren] = React10.useState([]);
-  React10.useEffect(() => {
+  const contextRef = React9.useRef(null);
+  const childMenuRef = React9.useRef(null);
+  const [hasArrowUp, setHasArrowUp] = React9.useState(true);
+  const [childArrowUp, setChildArrowUp] = React9.useState(false);
+  const [hoveredItem, setHoveredItem] = React9.useState(-1);
+  const [hoveredChild, setHoveredChild] = React9.useState(-1);
+  const [activeChildren, setActiveChildren] = React9.useState([]);
+  React9.useEffect(() => {
     const clickAway = ({ target }) => {
       if (contextRef.current && !contextRef.current.contains(target)) {
         if (childMenuRef.current) {
@@ -1293,7 +1340,7 @@ function ContextMenu({ items, position, visible, onClose }) {
     window.addEventListener("click", clickAway);
     return () => window.removeEventListener("click", clickAway);
   }, [onClose]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const current = contextRef.current;
     const child = childMenuRef.current;
     if (!current || !child) return;
@@ -1389,18 +1436,18 @@ function ContextMenu({ items, position, visible, onClose }) {
   );
 }
 function Wizard({ children, steps, storageKey = "po_wizard" }) {
-  const wizardRef = React10.useRef(null);
-  const [activeStep, setActiveStep] = React10.useState(0);
-  const [targetBbox, setTargetBbox] = React10.useState(null);
-  const HIGHLIGHTED = React10.useMemo(
+  const wizardRef = React9.useRef(null);
+  const [activeStep, setActiveStep] = React9.useState(0);
+  const [targetBbox, setTargetBbox] = React9.useState(null);
+  const HIGHLIGHTED = React9.useMemo(
     () => ["border", "border-4", "border-prussian-blue", "pointer-events-none"],
     []
   );
-  const closeWizard = React10.useCallback(() => {
+  const closeWizard = React9.useCallback(() => {
     steps[activeStep]?.stepRef.current?.classList.remove(...HIGHLIGHTED);
     if (wizardRef.current) wizardRef.current.style.display = "none";
   }, [HIGHLIGHTED, steps, activeStep]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const visited = JSON.parse(localStorage.getItem(storageKey) ?? "false");
     if (visited) {
       closeWizard();
@@ -1454,7 +1501,7 @@ function Wizard({ children, steps, storageKey = "po_wizard" }) {
     children
   ] });
 }
-var SearchInput = React10__default.default.forwardRef(function SearchInput2({
+var SearchInput = React9__default.default.forwardRef(function SearchInput2({
   value,
   onChange,
   disabled,
@@ -1481,7 +1528,8 @@ var SearchInput = React10__default.default.forwardRef(function SearchInput2({
               disabled,
               value,
               onChange,
-              type: "text",
+              type: "search",
+              enterKeyHint: "search",
               name,
               id: htmlFor,
               className: "focus:outline-none pl-2 h-9 w-56 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed",
@@ -1521,15 +1569,15 @@ function Dropdown({
   labelStyle = {},
   placeholder
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [selectedItems, setSelectedItems] = React10.useState([]);
-  const [hoveredItem, setHoveredItem] = React10.useState(null);
-  const [searchTerm, setSearchTerm] = React10.useState("");
-  const [innerItems, setInnerItems] = React10.useState([]);
-  React10.useEffect(() => {
+  const [open, setOpen] = React9.useState(false);
+  const [selectedItems, setSelectedItems] = React9.useState([]);
+  const [hoveredItem, setHoveredItem] = React9.useState(null);
+  const [searchTerm, setSearchTerm] = React9.useState("");
+  const [innerItems, setInnerItems] = React9.useState([]);
+  React9.useEffect(() => {
     setInnerItems(items);
   }, [items]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (isMultiselect && Array.isArray(value)) {
       setSelectedItems(value);
     }
@@ -1702,14 +1750,14 @@ function TableBody({
   rows,
   expandRow
 }) {
-  const [visibleRows, setVisibleRows] = React10.useState({});
+  const [visibleRows, setVisibleRows] = React9.useState({});
   const toggleRow = (rowKey) => {
     setVisibleRows((prev) => ({
       ...prev,
       [rowKey]: { visible: !prev[rowKey]?.visible }
     }));
   };
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (rows.length && Object.keys(visibleRows).length === 0) {
       const initial = {};
       rows.forEach((row) => {
@@ -1718,7 +1766,7 @@ function TableBody({
       setVisibleRows(initial);
     }
   }, [rows]);
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs(React10__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "tr",
       {
@@ -1772,9 +1820,9 @@ function Pagination({
   const matchedOption = picker.find(
     (o) => o.label === options.perPage || o.value === options.perPage
   );
-  const [perPageKey, setPerPageKey] = React10.useState(() => matchedOption?.key ?? picker[0]?.key);
+  const [perPageKey, setPerPageKey] = React9.useState(() => matchedOption?.key ?? picker[0]?.key);
   const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (serverSide && options.perPage != null) {
       const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
       if (next) setPerPageKey(next.key);
@@ -1834,35 +1882,35 @@ function Table({
   footer = null,
   header = null
 }) {
-  const searchRef = React10.useRef(null);
-  const [searchTerm, setSearchTerm] = React10.useState("");
-  const [perPage, setPerPage] = React10.useState(
+  const searchRef = React9.useRef(null);
+  const [searchTerm, setSearchTerm] = React9.useState("");
+  const [perPage, setPerPage] = React9.useState(
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
-  const [activePage, setActivePage] = React10.useState(0);
-  const [datasets, setDatasets] = React10.useState([]);
+  const [activePage, setActivePage] = React9.useState(0);
+  const [datasets, setDatasets] = React9.useState([]);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
-  const MAX_PAGE = React10.useMemo(() => {
+  const MAX_PAGE = React9.useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
       return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
     return datasets.length ? datasets.length - 1 : 0;
   }, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
-  const currentPageRows = React10.useMemo(() => {
+  const currentPageRows = React9.useMemo(() => {
     if (isServerSide) return rows;
     return datasets.length ? datasets[activePage] ?? [] : [];
   }, [isServerSide, rows, datasets, activePage]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (pagination.enabled && !isServerSide) setPerPage(pagination.perPage ?? 15);
   }, [pagination, isServerSide]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (isServerSide) return;
     setDatasets(createDatasets(rows, pagination.enabled ? perPage : null));
   }, [rows, perPage, pagination, isServerSide]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
       setActivePage(pagination.page - 1);
   }, [isServerSide, pagination.page]);
@@ -1922,7 +1970,7 @@ function Table({
   ] });
 }
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
-  const id = React10.useId();
+  const id = React9.useId();
   return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer select-none", children: /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitive__namespace.Root,
     {
@@ -2115,17 +2163,17 @@ function AppShell({
   children,
   className = ""
 }) {
-  const [expanded, setExpanded] = React10.useState(sidebarDefaultExpanded);
-  const [isMobile, setIsMobile] = React10.useState(false);
-  const [mobileOpen, setMobileOpen] = React10.useState(false);
-  React10.useEffect(() => {
+  const [expanded, setExpanded] = React9.useState(sidebarDefaultExpanded);
+  const [isMobile, setIsMobile] = React9.useState(false);
+  const [mobileOpen, setMobileOpen] = React9.useState(false);
+  React9.useEffect(() => {
     const mq = window.matchMedia("(max-width: 767px)");
     const update = (e) => setIsMobile(e.matches);
     update(mq);
     mq.addEventListener("change", update);
     return () => mq.removeEventListener("change", update);
   }, []);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!isMobile) setMobileOpen(false);
   }, [isMobile]);
   const hasSidebar = sidebarSections.length > 0;
@@ -2299,10 +2347,10 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React10__default.default.useId().replace(/:/g, "");
+  const id = React9__default.default.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
-  const divRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const divRef = React9.useRef(null);
+  React9.useEffect(() => {
     const el = divRef.current;
     if (!el) return;
     if (colorScheme === "auto") return;
@@ -2317,8 +2365,8 @@ function ThemeProvider({
     }
     el.classList.toggle("dark", colorScheme === "dark");
   }, [colorScheme]);
-  const lightVars = React10.useMemo(() => toCssVars(theme), [theme]);
-  const darkVarStr = React10.useMemo(() => {
+  const lightVars = React9.useMemo(() => toCssVars(theme), [theme]);
+  const darkVarStr = React9.useMemo(() => {
     if (!darkTheme) return "";
     const dvars = toCssVars(darkTheme);
     if (!Object.keys(dvars).length) return "";
@@ -2452,6 +2500,9 @@ function TextInput({
         className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
         style: style ?? {},
         children: [
+          label && // Render <label> only when a label is provided. An empty
+          // <label htmlFor=…> announces as an unlabeled control in
+          // some screen readers.
           /* @__PURE__ */ jsxRuntime.jsx(
             "label",
             {
@@ -2594,10 +2645,13 @@ function Password({
   labelColor,
   iconColor
 }) {
-  const [passwordVisible, setPasswordVisible] = React10.useState(false);
+  const [passwordVisible, setPasswordVisible] = React9.useState(false);
   const color = iconColor ?? chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
+      label && // Render <label> only when a label is provided. An empty
+      // <label htmlFor=…> announces as an unlabeled control in
+      // some screen readers.
       /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
@@ -2737,7 +2791,7 @@ function Switch({
   checkedIcon,
   uncheckedIcon
 }) {
-  const id = React10.useId();
+  const id = React9.useId();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer mr-12 select-none", children: /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitive__namespace.Root,
     {
@@ -2767,8 +2821,8 @@ function AutoComplete({
   onItemClick,
   emptyText = "No results found"
 }) {
-  const [term, setTerm] = React10.useState("");
-  const [open, setOpen] = React10.useState(false);
+  const [term, setTerm] = React9.useState("");
+  const [open, setOpen] = React9.useState(false);
   const foundItems = term.trim() ? items.filter(
     ({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
   ) : [];
@@ -2853,10 +2907,10 @@ function TreeSelect({
   htmlFor,
   items = []
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [hoveredItem, setHoveredItem] = React10.useState(null);
-  const [innerItems, setInnerItems] = React10.useState([]);
-  React10.useEffect(() => {
+  const [open, setOpen] = React9.useState(false);
+  const [hoveredItem, setHoveredItem] = React9.useState(null);
+  const [innerItems, setInnerItems] = React9.useState([]);
+  React9.useEffect(() => {
     setInnerItems(items);
   }, [items]);
   const selectItem = (key) => {
@@ -2955,10 +3009,10 @@ function FileInput({
   name,
   accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx"
 }) {
-  const fileInput = React10.useRef(null);
-  const [files, setFiles] = React10.useState([]);
+  const fileInput = React9.useRef(null);
+  const [files, setFiles] = React9.useState([]);
   const openPicker = () => {
-    fileInput.current?.dispatchEvent(new MouseEvent("click", { bubbles: false }));
+    fileInput.current?.click();
   };
   const handleFiles = (list) => {
     setFiles(list);
@@ -2990,56 +3044,70 @@ function FileInput({
     onChange?.({ target: { files: [], name, id: name, value: "" } });
     if (fileInput.current) fileInput.current.value = "";
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      onClick: openPicker,
-      className: "border-2 hover:border-prussian-blue border-ice-dark w-full h-full rounded-md transition-all duration-300 border-dashed dark:border-independence hover:dark:border-ice-dark cursor-pointer",
-      onDragOver: (e) => e.preventDefault(),
-      onDrop,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: name,
-            name,
-            onChange: localOnChange,
-            ref: fileInput,
-            hidden: true,
-            type: "file",
-            accept,
-            multiple: allowMultiple
+  return (
+    // Dropzone is keyboard-activatable: role="button", focusable via
+    // tabIndex, and Space/Enter trigger the file picker. Without these
+    // a keyboard-only user could not upload a file.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Upload file \u2014 click or drop",
+        onClick: openPicker,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
           }
-        ),
-        files.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], className: "w-16 h-16 dark:fill-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue dark:text-white text-sm", children: "Click or Drop a file" })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full", children: files.map((file, id) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-ice-dark p-4 dark:bg-independence rounded-md relative",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: removeFile,
-                  className: "bg-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center",
-                  "aria-label": "Remove file",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], className: "w-10 h-10 dark:fill-white", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z", clipRule: "evenodd" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full text-prussian-blue dark:text-white", children: file.name })
-            ]
-          },
-          `${id}${file.name}`
-        )) })
-      ]
-    }
+        },
+        className: "border-2 hover:border-prussian-blue border-ice-dark w-full h-full rounded-md transition-all duration-300 border-dashed dark:border-independence hover:dark:border-ice-dark cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        onDragOver: (e) => e.preventDefault(),
+        onDrop,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: name,
+              name,
+              onChange: localOnChange,
+              ref: fileInput,
+              hidden: true,
+              type: "file",
+              accept,
+              multiple: allowMultiple
+            }
+          ),
+          files.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], className: "w-16 h-16 dark:fill-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue dark:text-white text-sm", children: "Click or Drop a file" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full", children: files.map((file, id) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-ice-dark p-4 dark:bg-independence rounded-md relative",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: removeFile,
+                    className: "bg-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center",
+                    "aria-label": "Remove file",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], className: "w-10 h-10 dark:fill-white", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z", clipRule: "evenodd" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full text-prussian-blue dark:text-white", children: file.name })
+              ]
+            },
+            `${id}${file.name}`
+          )) })
+        ]
+      }
+    )
   );
 }
 var MONTHS = {
@@ -3090,12 +3158,12 @@ function DatePickerBase({
   disableAfter,
   disabled
 }) {
-  const pickerRef = React10.useRef(null);
-  const calendarRef = React10.useRef(null);
-  const [isExpanded, setExpanded] = React10.useState(false);
-  const [isCloseToBottom, setCloseToBottom] = React10.useState(false);
-  const [currentYear, setCurrentYear] = React10.useState(value.getFullYear());
-  const [currentMonth, setCurrentMonth] = React10.useState(value.getMonth() + 1);
+  const pickerRef = React9.useRef(null);
+  const calendarRef = React9.useRef(null);
+  const [isExpanded, setExpanded] = React9.useState(false);
+  const [isCloseToBottom, setCloseToBottom] = React9.useState(false);
+  const [currentYear, setCurrentYear] = React9.useState(value.getFullYear());
+  const [currentMonth, setCurrentMonth] = React9.useState(value.getMonth() + 1);
   const toggle = () => {
     if (!disabled) setExpanded((p) => !p);
   };
@@ -3139,14 +3207,14 @@ function DatePickerBase({
     }
     return ordered;
   };
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const clickAway = (e) => {
       if (pickerRef.current && !pickerRef.current.contains(e.target) && calendarRef.current && !calendarRef.current.contains(e.target)) setExpanded(false);
     };
     document.addEventListener("mousedown", clickAway);
     return () => document.removeEventListener("mousedown", clickAway);
   }, []);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const bbox = pickerRef.current?.getBoundingClientRect();
     if (bbox && (bbox.y > window.innerHeight - 220 || bbox.bottom > window.innerHeight - 400)) {
       setCloseToBottom(true);
@@ -3239,29 +3307,29 @@ function TemporalPickerBase({
   layout,
   style = {}
 }) {
-  const pickerRef = React10.useRef(null);
-  const calendarRef = React10.useRef(null);
-  const valueRefs = React10.useRef([]);
-  const [isExpanded, setExpanded] = React10.useState(false);
-  const [isCloseToBottom, setCloseToBottom] = React10.useState(false);
-  const innerValues = React10.useMemo(() => {
+  const pickerRef = React9.useRef(null);
+  const calendarRef = React9.useRef(null);
+  const valueRefs = React9.useRef([]);
+  const [isExpanded, setExpanded] = React9.useState(false);
+  const [isCloseToBottom, setCloseToBottom] = React9.useState(false);
+  const innerValues = React9.useMemo(() => {
     const vals = [];
     for (let i = lowerLimit; i <= upperLimit; i++) vals.push(i);
     return vals;
   }, [lowerLimit, upperLimit]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const clickAway = (e) => {
       if (pickerRef.current && !pickerRef.current.contains(e.target) && calendarRef.current && !calendarRef.current.contains(e.target)) setExpanded(false);
     };
     document.addEventListener("mousedown", clickAway);
     return () => document.removeEventListener("mousedown", clickAway);
   }, []);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const bbox = pickerRef.current?.getBoundingClientRect();
     if (bbox && bbox.y > window.innerHeight - 220) setCloseToBottom(true);
     else setCloseToBottom(false);
   }, []);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!isExpanded) return;
     const t = setTimeout(() => {
       const node = valueRefs.current.find((n) => n.value === value);