@geomak/ui 1.7.1 → 1.7.2

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);
     }
@@ -1728,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) => {
@@ -1744,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",
       {
@@ -1798,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);
@@ -1860,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]);
@@ -1948,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,
     {
@@ -2141,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;
@@ -2325,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;
@@ -2343,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 "";
@@ -2623,7 +2645,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 +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,
     {
@@ -2799,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())
   ) : [];
@@ -2885,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) => {
@@ -2987,8 +3009,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 +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);
   };
@@ -3185,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);
@@ -3285,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);