@geomak/ui 1.7.1 → 1.7.3

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var chunk255PCZIW_cjs = require('./chunk-255PCZIW.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var React10 = require('react');
+var React9 = require('react');
 var reactDom = require('react-dom');
 var Dialog = require('@radix-ui/react-dialog');
 var framerMotion = require('framer-motion');
@@ -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);
@@ -206,8 +206,8 @@ Icon.Copy = Copy;
 Icon.CircleStack = CircleStack;
 var icons_default = Icon;
 function Portal({ children, target }) {
-  const [resolved, setResolved] = React10.useState(null);
-  React10.useEffect(() => {
+  const [resolved, setResolved] = React9.useState(null);
+  React9.useEffect(() => {
     if (target === null) {
       setResolved(null);
       return;
@@ -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";
     }
@@ -538,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;
@@ -789,7 +789,7 @@ function ToggleButton({ items, onChange, activeKey }) {
     }
   );
 }
-var NotificationContext = React10.createContext({
+var NotificationContext = React9.createContext({
   open: () => void 0,
   close: () => void 0
 });
@@ -847,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;
@@ -928,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) => [
@@ -964,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 }),
@@ -972,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));
@@ -1055,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);
@@ -1167,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) {
@@ -1296,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) {
@@ -1318,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;
@@ -1414,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();
@@ -1479,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,
@@ -1547,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);
     }
@@ -1701,9 +1723,7 @@ var DEFAULT_PAGINATION = {
   pickerOptions: DEFAULT_PICKER
 };
 var DEFAULT_EXPAND = {
-  enabled: false,
-  expandIcon: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-  expandComponent: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+  enabled: false
 };
 function createDatasets(rows, perPage) {
   if (!perPage) return [rows.slice()];
@@ -1713,78 +1733,95 @@ function createDatasets(rows, perPage) {
   }
   return all;
 }
-function TableHeader({ columns }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-surface-raised min-h-[50px] border-b border-b-border flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "flex w-full items-center justify-center", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
-    {
-      className: "text-center w-full text-[13px] text-foreground",
-      children: col.label
-    },
-    col.key
-  )) }) });
+var defaultGetRowKey = (_row, index) => index;
+var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
+function TableHeader({
+  columns,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+    hasExpand && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", className: "w-9" }),
+    columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        scope: "col",
+        className: `${cellAlign(col.align)} text-sm font-semibold text-foreground py-3 px-3`,
+        style: col.width != null ? { width: col.width } : void 0,
+        children: col.label
+      },
+      col.key
+    ))
+  ] }) });
 }
+var DefaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: "w-5 h-5 text-foreground-muted",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
 function TableBody({
   columns,
   rows,
-  expandRow
+  expandRow,
+  getRowKey
 }) {
-  const [visibleRows, setVisibleRows] = React10.useState({});
+  const [expanded, setExpanded] = React9.useState(() => /* @__PURE__ */ new Set());
   const toggleRow = (rowKey) => {
-    setVisibleRows((prev) => ({
-      ...prev,
-      [rowKey]: { visible: !prev[rowKey]?.visible }
-    }));
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowKey)) next.delete(rowKey);
+      else next.add(rowKey);
+      return next;
+    });
   };
-  React10.useEffect(() => {
-    if (rows.length && Object.keys(visibleRows).length === 0) {
-      const initial = {};
-      rows.forEach((row) => {
-        initial[row.key] = { visible: false };
-      });
-      setVisibleRows(initial);
-    }
-  }, [rows]);
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs(React10__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "tr",
-      {
-        className: `border-b border-b-border flex min-w-max hover:bg-surface-raised transition-all duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
-        children: [
-          expandRow.enabled && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              onClick: () => toggleRow(row.key),
-              className: `p-2 cursor-pointer origin-center transition-all duration-200 ${visibleRows[row.key]?.visible ? "rotate-180" : "rotate-0"}`,
-              children: expandRow.expandIcon ?? /* PlusCircle */
-              /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z", clipRule: "evenodd" }) })
-            }
-          ) }),
-          columns.map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "td",
-            {
-              className: `text-center min-h-[40px] w-full flex items-center justify-center p-1 border-border ${index !== columns.length - 1 ? "border-r-2" : ""}`,
-              children: "component" in col && col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
-            },
-            index
-          ))
-        ]
-      }
-    ),
-    expandRow.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-      "tr",
-      {
-        className: `overflow-hidden w-full transition-all duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "p-0 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `overflow-hidden w-full transition-[max-height] duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-            children: expandRow.expandComponent?.(row)
-          }
-        ) })
-      },
-      `extra-${i}`
-    )
-  ] }, row.key)) });
+  const hasExpand = !!expandRow.enabled;
+  const expandColCount = columns.length + (hasExpand ? 1 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
+    const rowKey = getRowKey(row, i);
+    const isExpanded = expanded.has(rowKey);
+    return /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          className: `border-b border-border hover:bg-surface-raised transition-colors duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
+          children: [
+            hasExpand && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-0 align-middle w-9", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleRow(rowKey),
+                "aria-expanded": isExpanded,
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                className: `w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-surface/80 transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded ? "rotate-180" : ""}`,
+                children: expandRow.expandIcon ?? DefaultExpandIcon
+              }
+            ) }),
+            columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: `${cellAlign(col.align)} text-sm text-foreground py-2 px-3 align-middle`,
+                children: col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
+              },
+              col.key
+            ))
+          ]
+        }
+      ),
+      hasExpand && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: expandColCount, className: "p-0 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: expandRow.expandComponent?.(row) }) }) })
+    ] }, rowKey);
+  }) });
 }
 function Pagination({
   activePage,
@@ -1798,38 +1835,36 @@ 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);
     }
   }, [serverSide, options.perPage, picker]);
   const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick, icon });
-  const chevronRight = (color) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = (color) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
-  const disabledColor = "var(--color-foreground-muted)";
-  const enabledColor = "var(--color-foreground)";
+  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end pt-2", children: [
     navBtn(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight }),
       activePage === 0,
       () => onPageChange(0)
     ),
     navBtn(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: chevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: chevronRight }),
       activePage === 0,
       () => activePage > 0 && onPageChange(activePage - 1)
     ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-surface-raised rounded-lg ml-2 mr-2 shadow-sm p-2 w-10 text-center select-none text-foreground", children: activePage + 1 }),
     navBtn(
-      chevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      chevronRight,
       activePage === maxPage,
       () => activePage < maxPage && onPageChange(activePage + 1)
     ),
     navBtn(
-      doubleChevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      doubleChevronRight,
       activePage === maxPage,
       () => onPageChange(maxPage)
     ),
@@ -1854,54 +1889,57 @@ function Pagination({
 function Table({
   columns = [],
   rows = [],
+  getRowKey = defaultGetRowKey,
   pagination = DEFAULT_PAGINATION,
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
   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 isServerSide = !!(pagination.enabled && pagination.serverSide);
-  const MAX_PAGE = React10.useMemo(() => {
+  const filteredRows = React9.useMemo(() => {
+    if (isServerSide || !searchTerm) return rows;
+    const term = searchTerm.toLowerCase();
+    return rows.filter(
+      (row) => Object.values(row).some(
+        (v) => v != null && String(v).toLowerCase().includes(term)
+      )
+    );
+  }, [rows, searchTerm, isServerSide]);
+  const datasets = React9.useMemo(() => {
+    if (isServerSide) return [rows];
+    return createDatasets(filteredRows, pagination.enabled ? perPage : null);
+  }, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
+  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] ?? [] : [];
+    return datasets[activePage] ?? [];
   }, [isServerSide, rows, datasets, activePage]);
-  React10.useEffect(() => {
-    if (pagination.enabled && !isServerSide) setPerPage(pagination.perPage ?? 15);
-  }, [pagination, isServerSide]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
+    if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
+      setPerPage(pagination.perPage);
+    }
+  }, [pagination.enabled, pagination.perPage, isServerSide]);
+  React9.useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  React10.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]);
   const onSearchChange = (e) => {
-    const term = e.target.value;
-    setSearchTerm(term);
-    if (isServerSide) return;
-    const filtered = rows.filter(
-      (row) => Object.values(row).some(
-        (v) => !!v && String(v).toLowerCase().includes(term.toLowerCase())
-      )
-    );
-    setDatasets(createDatasets(filtered, pagination.enabled ? perPage : null));
+    setSearchTerm(e.target.value);
     setActivePage(0);
   };
   const onPaginationChange = (perPageValue) => {
@@ -1940,15 +1978,23 @@ function Table({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { columns, rows: currentPageRows, expandRow })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TableBody,
+        {
+          columns,
+          rows: currentPageRows,
+          expandRow,
+          getRowKey
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
   ] });
 }
 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,
     {
@@ -2141,17 +2187,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;
@@ -2325,10 +2371,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;
@@ -2343,8 +2389,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 "";
@@ -2623,7 +2669,7 @@ 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: [
@@ -2769,7 +2815,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,
     {
@@ -2799,8 +2845,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())
   ) : [];
@@ -2885,10 +2931,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) => {
@@ -2987,8 +3033,8 @@ 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?.click();
   };
@@ -3136,12 +3182,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);
   };
@@ -3185,14 +3231,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);
@@ -3285,29 +3331,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);