@geomak/ui 1.9.0 → 3.0.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var chunk255PCZIW_cjs = require('./chunk-255PCZIW.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var React9 = require('react');
+var React8 = require('react');
 var reactDom = require('react-dom');
 var Dialog = require('@radix-ui/react-dialog');
 var framerMotion = require('framer-motion');
@@ -11,6 +11,7 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var Accordion = require('@radix-ui/react-accordion');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
 var Toast = require('@radix-ui/react-toast');
+var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -35,13 +36,14 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var Toast__namespace = /*#__PURE__*/_interopNamespace(Toast);
+var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
@@ -206,8 +208,8 @@ Icon.Copy = Copy;
 Icon.CircleStack = CircleStack;
 var icons_default = Icon;
 function Portal({ children, target }) {
-  const [resolved, setResolved] = React9.useState(null);
-  React9.useEffect(() => {
+  const [resolved, setResolved] = React8.useState(null);
+  React8.useEffect(() => {
     if (target === null) {
       setResolved(null);
       return;
@@ -227,7 +229,7 @@ function IconButton({
   loading = false,
   loadingIcon
 }) {
-  const colorScheme = React9.useMemo(() => {
+  const colorScheme = React8.useMemo(() => {
     if (type === "primary") {
       return "bg-accent text-accent-fg hover:bg-accent-hover";
     }
@@ -540,11 +542,11 @@ function Tabs({
   tabsClosable = true,
   defaultActiveTab
 }) {
-  const [value, setValue] = React9.useState(() => defaultActiveTab ?? tabs[0]?.key ?? "");
-  React9.useEffect(() => {
+  const [value, setValue] = React8.useState(() => defaultActiveTab ?? tabs[0]?.key ?? "");
+  React8.useEffect(() => {
     if (defaultActiveTab) setValue(defaultActiveTab);
   }, [defaultActiveTab]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (tabs.length === 0) {
       setValue("");
       return;
@@ -793,7 +795,7 @@ function ToggleButton({ items, onChange, activeKey }) {
     }
   );
 }
-var NotificationContext = React9.createContext({
+var NotificationContext = React8.createContext({
   open: () => void 0,
   close: () => void 0
 });
@@ -851,7 +853,7 @@ function NotificationItem({
   onClose,
   reduced
 }) {
-  const [hovered, setHovered] = React9.useState(false);
+  const [hovered, setHovered] = React8.useState(false);
   const initial = getInitialMotion(pos, reduced);
   const center = pos.endsWith("center");
   const duration = n.duration ?? 4e3;
@@ -932,7 +934,7 @@ function NotificationProvider({
   children,
   position = "top-right"
 }) {
-  const [notifications, setNotifications] = React9.useState([]);
+  const [notifications, setNotifications] = React8.useState([]);
   const reduced = framerMotion.useReducedMotion();
   const open = (payload) => {
     setNotifications((prev) => [
@@ -968,7 +970,7 @@ function NotificationProvider({
   ] }) });
 }
 function useNotification() {
-  const { open } = React9.useContext(NotificationContext);
+  const { open } = React8.useContext(NotificationContext);
   return {
     info: (props) => open({ type: "info", ...props }),
     success: (props) => open({ type: "success", ...props }),
@@ -1081,10 +1083,10 @@ function FadingBase({
   isMounted = false,
   children
 }) {
-  const [shouldRender, setShouldRender] = React9.useState(isMounted);
-  const [visible, setVisible] = React9.useState(false);
-  const timerRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [shouldRender, setShouldRender] = React8.useState(isMounted);
+  const [visible, setVisible] = React8.useState(false);
+  const timerRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (isMounted) {
       setShouldRender(true);
       const rafId = requestAnimationFrame(() => setVisible(true));
@@ -1143,9 +1145,9 @@ function ScalableContainer({
   children,
   assignClassOnClick
 }) {
-  const containerRef = React9.useRef(null);
-  const [isScaled, setScaled] = React9.useState(false);
-  const [wrapperClass, setWrapperClass] = React9.useState("");
+  const containerRef = React8.useRef(null);
+  const [isScaled, setScaled] = React8.useState(false);
+  const [wrapperClass, setWrapperClass] = React8.useState("");
   const onClick = () => {
     const next = !isScaled;
     setScaled(next);
@@ -1255,17 +1257,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] = React9.useState(0);
-  const [indexPool, setIndexPool] = React9.useState([]);
-  const cardRefs = React9.useRef([]);
-  const getIndexes = React9.useMemo(() => {
+  const [activeIndex, setActiveIndex] = React8.useState(0);
+  const [indexPool, setIndexPool] = React8.useState([]);
+  const cardRefs = React8.useRef([]);
+  const getIndexes = React8.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]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const { nextIndex, previousIndex } = getIndexes;
     let indexes = [previousIndex, activeIndex, nextIndex];
     if (activeIndex !== 0 && activeIndex !== items.length - 1) {
@@ -1387,191 +1389,287 @@ function MenuBar({ items }) {
     )
   );
 }
-function ContextMenu({ items, position, visible, onClose }) {
-  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) {
-          childMenuRef.current.classList.add("opacity-0");
-          childMenuRef.current.style.left = "0px";
-          childMenuRef.current.style.top = "0px";
-        }
-        setActiveChildren([]);
-        onClose();
-      }
-    };
-    window.addEventListener("click", clickAway);
-    return () => window.removeEventListener("click", clickAway);
-  }, [onClose]);
-  React9.useEffect(() => {
-    const current = contextRef.current;
-    const child = childMenuRef.current;
-    if (!current || !child) return;
-    const { height, width } = current.getBoundingClientRect();
-    if (position.y + height >= window.innerHeight) {
-      current.style.top = `${position.y - (height - 40)}px`;
-      setHasArrowUp(false);
-    } else {
-      current.style.top = `${position.y}px`;
-      setHasArrowUp(true);
-    }
-    current.style.left = `${position.x}px`;
-    child.style.width = `${width}px`;
-    child.classList.add("opacity-0");
-  }, [position]);
-  const onItemClick = (e, item) => {
-    if (item.onClick) {
-      if (childMenuRef.current) {
-        childMenuRef.current.classList.add("opacity-0");
-        childMenuRef.current.style.left = "0px";
-        childMenuRef.current.style.top = "0px";
-      }
-      setActiveChildren([]);
-      item.onClick(item.path, item.reportType);
-    } else if (item.children?.length) {
-      const targetBbox = e.target.getBoundingClientRect();
-      const childHeight = childMenuRef.current?.getBoundingClientRect().height ?? 0;
-      const contextBbox = contextRef.current?.getBoundingClientRect() ?? { y: 0, width: 0};
-      const contextWidth = contextBbox.width;
-      if (targetBbox.y + childHeight >= window.innerHeight) {
-        setChildArrowUp(false);
-        if (childMenuRef.current) childMenuRef.current.style.top = `${targetBbox.y - childHeight}px`;
-      } else {
-        setChildArrowUp(true);
-        if (childMenuRef.current)
-          childMenuRef.current.style.top = `${targetBbox.y - contextBbox.y + targetBbox.height / 2 - 10}px`;
-      }
-      setActiveChildren(item.children);
-      if (childMenuRef.current) {
-        childMenuRef.current.classList.remove("opacity-0");
-        childMenuRef.current.style.left = `${Math.round(contextWidth + 10)}px`;
+function ContextMenu({ items, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuPrimitive__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMenuPrimitive__namespace.Content,
+      {
+        className: CONTENT_CLASSNAME,
+        collisionPadding: 8,
+        children: items.map((item) => renderItem(item))
       }
-    }
-  };
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    ) })
+  ] });
+}
+var CONTENT_CLASSNAME = [
+  // Surface — semantic tokens, both modes covered
+  "min-w-[180px] rounded-lg border border-border bg-surface shadow-lg",
+  "p-1 z-[500000] text-sm text-foreground",
+  // Entry animation matches the Tooltip / Dropdown style
+  "animate-in fade-in-0 zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+  // Outline reset — Radix handles focus internally
+  "focus:outline-none"
+].join(" ");
+var ITEM_CLASSNAME = [
+  "flex items-center justify-between gap-3 rounded-md px-2 py-1.5 cursor-pointer select-none",
+  "transition-colors duration-100",
+  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-fg",
+  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:bg-transparent data-[disabled]:text-foreground-muted",
+  "focus:outline-none"
+].join(" ");
+function renderItem(item) {
+  if (item.children && item.children.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuPrimitive__namespace.Sub, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ContextMenuPrimitive__namespace.SubTrigger,
+        {
+          disabled: item.disabled,
+          className: ITEM_CLASSNAME,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ContextMenuLabel, { icon: item.icon, value: item.value }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuPrimitive__namespace.SubContent,
+        {
+          className: CONTENT_CLASSNAME,
+          sideOffset: 2,
+          alignOffset: -4,
+          collisionPadding: 8,
+          children: item.children.map((sub) => renderItem(sub))
+        }
+      ) })
+    ] }, item.key);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuPrimitive__namespace.Item,
     {
-      ref: contextRef,
-      className: `transition-all duration-150 absolute rounded-lg bg-ice text-prussian-blue z-30 flex ${hasArrowUp && hoveredItem === 0 ? "context-arrow-up context-arrow-hovered" : !hasArrowUp && hoveredItem === items.length - 1 ? "context-arrow-down context-arrow-hovered" : hasArrowUp ? "context-arrow-up" : "context-arrow-down"}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "z-50", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "li",
-          {
-            onContextMenu: (e) => e.preventDefault(),
-            onMouseEnter: () => setHoveredItem(index),
-            onMouseLeave: () => setHoveredItem(-1),
-            className: `flex items-center justify-between transition-all duration-300 p-2 cursor-pointer hover:bg-ice-dark ${index === 0 ? "rounded-tl-lg rounded-tr-lg" : ""} ${index === items.length - 1 ? "rounded-bl-lg rounded-br-lg" : ""}`,
-            onClick: (e) => onItemClick(e, item),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pointer-events-none", children: [
-                item.icon,
-                item.value
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none", children: item.children && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }) })
-            ]
-          },
-          item.key
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: childMenuRef,
-            className: `transition-all duration-150 absolute rounded-lg bg-ice text-prussian-blue ${childArrowUp && hoveredChild === 0 ? "context-arrow-up context-arrow-hovered" : !childArrowUp && hoveredChild === activeChildren.length - 1 ? "context-arrow-down context-arrow-hovered" : childArrowUp ? "context-arrow-up" : "context-arrow-down"}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: activeChildren.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "li",
-              {
-                className: `flex items-center gap-2 p-2 cursor-pointer transition-all duration-150 hover:bg-ice-dark ${index === 0 ? "rounded-tl-lg rounded-tr-lg" : ""} ${index === activeChildren.length - 1 ? "rounded-bl-lg rounded-br-lg" : ""}`,
-                onClick: () => item.onClick?.(item.path, item.reportType),
-                onMouseEnter: () => setHoveredChild(index),
-                onMouseLeave: () => setHoveredChild(-1),
-                children: [
-                  item.icon,
-                  item.value
-                ]
-              },
-              index
-            )) })
-          }
-        )
-      ]
-    }
+      disabled: item.disabled,
+      onSelect: () => item.onClick?.(),
+      className: ITEM_CLASSNAME,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuLabel, { icon: item.icon, value: item.value })
+    },
+    item.key
   );
 }
-function Wizard({ children, steps, storageKey = "po_wizard" }) {
-  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 = React9.useCallback(() => {
-    steps[activeStep]?.stepRef.current?.classList.remove(...HIGHLIGHTED);
-    if (wizardRef.current) wizardRef.current.style.display = "none";
-  }, [HIGHLIGHTED, steps, activeStep]);
-  React9.useEffect(() => {
-    const visited = JSON.parse(localStorage.getItem(storageKey) ?? "false");
-    if (visited) {
-      closeWizard();
+function ContextMenuLabel({ icon, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: value })
+  ] });
+}
+function ChevronRight2() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+}
+function readDismissed(key) {
+  if (key === null) return false;
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(key) === "true";
+  } catch {
+    return false;
+  }
+}
+function writeDismissed(key) {
+  if (key === null) return;
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, "true");
+  } catch {
+  }
+}
+function useTargetBbox(ref) {
+  const [bbox, setBbox] = React8.useState(null);
+  React8.useLayoutEffect(() => {
+    const el = ref?.current;
+    if (!el) {
+      setBbox(null);
       return;
     }
-    const el = steps[activeStep]?.stepRef.current;
-    if (el) {
-      setTargetBbox(el.getBoundingClientRect());
-      el.classList.add(...HIGHLIGHTED);
-    }
-  }, [closeWizard, steps, activeStep, HIGHLIGHTED, storageKey]);
-  const onStepChange = () => {
-    if (steps[activeStep + 1]) {
-      steps[activeStep].stepRef.current?.classList.remove(...HIGHLIGHTED);
-      const nextEl = steps[activeStep + 1].stepRef.current;
-      if (nextEl) setTargetBbox(nextEl.getBoundingClientRect());
-      setActiveStep(activeStep + 1);
-    } else {
-      localStorage.setItem(storageKey, "true");
-      closeWizard();
-    }
-  };
-  const step = steps[activeStep];
-  const left = step && targetBbox ? step.positioning === "natural" ? isNaN(targetBbox.width + 20) ? 0 : targetBbox.width + 20 : isNaN(targetBbox.width / 2) ? 0 : targetBbox.width / 2 : "auto";
-  const top = step && targetBbox ? step.positioning === "natural" ? isNaN(targetBbox.y + 10) ? 0 : targetBbox.y + 10 : isNaN(targetBbox.height / 2) ? 0 : targetBbox.height / 2 : "auto";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full p-1 rounded-lg w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", ref: wizardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: { left, top },
-        className: "absolute bg-white rounded-lg p-2 w-[220px] z-50 text-prussian-blue drop-shadow-md transition-all duration-300",
-        children: [
-          step?.description,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex h-3 w-3 relative left-14 top-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-3 w-3 rounded-full bg-dark-cornflower-blue opacity-75" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-3 w-3 bg-dark-cornflower-blue" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                onClick: onStepChange,
-                content: activeStep === steps.length - 1 ? "Close" : "Next",
-                style: { width: 55, padding: "5px 10px", margin: "0" }
-              }
-            )
-          ] })
-        ]
+    const update = () => setBbox(el.getBoundingClientRect());
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    ro?.observe(el);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      ro?.disconnect();
+    };
+  }, [ref]);
+  return bbox;
+}
+var TOOLTIP_WIDTH = 280;
+var TOOLTIP_GAP = 12;
+function tooltipStyleFor(bbox, placement) {
+  const pl = placement ?? "right";
+  if (pl === "right") return { left: bbox.right + TOOLTIP_GAP, top: bbox.top + bbox.height / 2, transform: "translateY(-50%)", width: TOOLTIP_WIDTH };
+  if (pl === "left") return { left: bbox.left - TOOLTIP_WIDTH - TOOLTIP_GAP, top: bbox.top + bbox.height / 2, transform: "translateY(-50%)", width: TOOLTIP_WIDTH };
+  if (pl === "bottom") return { left: bbox.left + bbox.width / 2, top: bbox.bottom + TOOLTIP_GAP, transform: "translateX(-50%)", width: TOOLTIP_WIDTH };
+  return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
+}
+function useFocusTrap(containerRef, active) {
+  React8.useEffect(() => {
+    if (!active) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const t = setTimeout(() => {
+      const first = el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      first?.focus();
+    }, 0);
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const focusables = el.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
       }
-    ) }),
-    children
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      clearTimeout(t);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [containerRef, active]);
+}
+function Wizard({
+  children,
+  steps,
+  storageKey = "oxygen.wizard.completed",
+  dismissible = true,
+  onComplete,
+  onSkip
+}) {
+  const tooltipRef = React8.useRef(null);
+  const tooltipTitleId = React8.useId();
+  const tooltipBodyId = React8.useId();
+  const [open, setOpen] = React8.useState(() => steps.length > 0 && !readDismissed(storageKey));
+  const [activeIndex, setActiveIndex] = React8.useState(0);
+  const step = steps[activeIndex];
+  const bbox = useTargetBbox(step?.stepRef);
+  useFocusTrap(tooltipRef, open);
+  React8.useEffect(() => {
+    if (!open || !dismissible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleSkip();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, dismissible]);
+  const handleSkip = React8.useCallback(() => {
+    writeDismissed(storageKey);
+    setOpen(false);
+    onSkip?.();
+  }, [storageKey, onSkip]);
+  const handleComplete = React8.useCallback(() => {
+    writeDismissed(storageKey);
+    setOpen(false);
+    onComplete?.();
+  }, [storageKey, onComplete]);
+  const handleNext = () => {
+    if (activeIndex < steps.length - 1) setActiveIndex((i) => i + 1);
+    else handleComplete();
+  };
+  const handlePrev = () => {
+    if (activeIndex > 0) setActiveIndex((i) => i - 1);
+  };
+  const highlightStyle = bbox ? {
+    left: bbox.left - 4,
+    top: bbox.top - 4,
+    width: bbox.width + 8,
+    height: bbox.height + 8
+  } : { display: "none" };
+  const tooltipStyle = bbox ? tooltipStyleFor(bbox, step?.placement) : { display: "none" };
+  const isLast = activeIndex === steps.length - 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    open && step && /* @__PURE__ */ jsxRuntime.jsxs(Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[7000000] bg-foreground/40 backdrop-blur-[1px] pointer-events-auto",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background transition-all duration-200",
+          style: highlightStyle,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": step.title ? tooltipTitleId : void 0,
+          "aria-describedby": tooltipBodyId,
+          className: "fixed z-[7000002] rounded-lg bg-surface text-foreground border border-border shadow-xl p-4 pointer-events-auto",
+          style: tooltipStyle,
+          children: [
+            step.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: tooltipTitleId, className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipBodyId, className: "text-sm text-foreground-secondary leading-relaxed", children: step.description }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-foreground-muted tabular-nums", children: [
+                activeIndex + 1,
+                " / ",
+                steps.length
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                dismissible && !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    content: "Skip",
+                    onClick: handleSkip
+                  }
+                ),
+                activeIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    content: "Back",
+                    onClick: handlePrev
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    content: isLast ? "Done" : "Next",
+                    onClick: handleNext
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
   ] });
 }
-var SearchInput = React9__default.default.forwardRef(function SearchInput2({
+var SearchInput = React8__default.default.forwardRef(function SearchInput2({
   value,
   onChange,
   disabled,
@@ -1639,16 +1737,16 @@ function Dropdown({
   labelStyle = {},
   placeholder
 }) {
-  const [open, setOpen] = React9.useState(false);
-  const [selectedItems, setSelectedItems] = React9.useState([]);
-  const [searchTerm, setSearchTerm] = React9.useState("");
-  const [innerItems, setInnerItems] = React9.useState([]);
-  const errorId = React9.useId();
+  const [open, setOpen] = React8.useState(false);
+  const [selectedItems, setSelectedItems] = React8.useState([]);
+  const [searchTerm, setSearchTerm] = React8.useState("");
+  const [innerItems, setInnerItems] = React8.useState([]);
+  const errorId = React8.useId();
   const hasError = errorMessage != null;
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     setInnerItems(items);
   }, [items]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (isMultiselect && Array.isArray(value)) {
       setSelectedItems(value);
     }
@@ -1872,7 +1970,7 @@ function TableBody({
   expandRow,
   getRowKey
 }) {
-  const [expanded, setExpanded] = React9.useState(() => /* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = React8.useState(() => /* @__PURE__ */ new Set());
   const toggleRow = (rowKey) => {
     setExpanded((prev) => {
       const next = new Set(prev);
@@ -1886,7 +1984,7 @@ function TableBody({
   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: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "tr",
         {
@@ -1930,9 +2028,9 @@ function Pagination({
   const matchedOption = picker.find(
     (o) => o.label === options.perPage || o.value === options.perPage
   );
-  const [perPageKey, setPerPageKey] = React9.useState(() => matchedOption?.key ?? picker[0]?.key);
+  const [perPageKey, setPerPageKey] = React8.useState(() => matchedOption?.key ?? picker[0]?.key);
   const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (serverSide && options.perPage != null) {
       const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
       if (next) setPerPageKey(next.key);
@@ -1992,14 +2090,14 @@ function Table({
   footer = null,
   header = null
 }) {
-  const searchRef = React9.useRef(null);
-  const [searchTerm, setSearchTerm] = React9.useState("");
-  const [perPage, setPerPage] = React9.useState(
+  const searchRef = React8.useRef(null);
+  const [searchTerm, setSearchTerm] = React8.useState("");
+  const [perPage, setPerPage] = React8.useState(
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
-  const [activePage, setActivePage] = React9.useState(0);
+  const [activePage, setActivePage] = React8.useState(0);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
-  const filteredRows = React9.useMemo(() => {
+  const filteredRows = React8.useMemo(() => {
     if (isServerSide || !searchTerm) return rows;
     const term = searchTerm.toLowerCase();
     return rows.filter(
@@ -2008,29 +2106,29 @@ function Table({
       )
     );
   }, [rows, searchTerm, isServerSide]);
-  const datasets = React9.useMemo(() => {
+  const datasets = React8.useMemo(() => {
     if (isServerSide) return [rows];
     return createDatasets(filteredRows, pagination.enabled ? perPage : null);
   }, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
-  const MAX_PAGE = React9.useMemo(() => {
+  const MAX_PAGE = React8.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 = React9.useMemo(() => {
+  const currentPageRows = React8.useMemo(() => {
     if (isServerSide) return rows;
     return datasets[activePage] ?? [];
   }, [isServerSide, rows, datasets, activePage]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
       setPerPage(pagination.perPage);
     }
   }, [pagination.enabled, pagination.perPage, isServerSide]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
       setActivePage(pagination.page - 1);
   }, [isServerSide, pagination.page]);
@@ -2090,7 +2188,7 @@ function Table({
   ] });
 }
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
-  const id = React9.useId();
+  const id = React8.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,
     {
@@ -2283,17 +2381,17 @@ function AppShell({
   children,
   className = ""
 }) {
-  const [expanded, setExpanded] = React9.useState(sidebarDefaultExpanded);
-  const [isMobile, setIsMobile] = React9.useState(false);
-  const [mobileOpen, setMobileOpen] = React9.useState(false);
-  React9.useEffect(() => {
+  const [expanded, setExpanded] = React8.useState(sidebarDefaultExpanded);
+  const [isMobile, setIsMobile] = React8.useState(false);
+  const [mobileOpen, setMobileOpen] = React8.useState(false);
+  React8.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);
   }, []);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!isMobile) setMobileOpen(false);
   }, [isMobile]);
   const hasSidebar = sidebarSections.length > 0;
@@ -2483,10 +2581,10 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React9__default.default.useId().replace(/:/g, "");
+  const id = React8__default.default.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
-  const divRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const divRef = React8.useRef(null);
+  React8.useEffect(() => {
     const el = divRef.current;
     if (!el) return;
     if (colorScheme === "auto") return;
@@ -2501,8 +2599,8 @@ function ThemeProvider({
     }
     el.classList.toggle("dark", colorScheme === "dark");
   }, [colorScheme]);
-  const lightVars = React9.useMemo(() => toCssVars(theme), [theme]);
-  const darkVarStr = React9.useMemo(() => {
+  const lightVars = React8.useMemo(() => toCssVars(theme), [theme]);
+  const darkVarStr = React8.useMemo(() => {
     if (!darkTheme) return "";
     const dvars = toCssVars(darkTheme);
     if (!Object.keys(dvars).length) return "";
@@ -2629,7 +2727,7 @@ function TextInput({
   errorMessage,
   labelColor
 }) {
-  const errorId = React9.useId();
+  const errorId = React8.useId();
   const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2693,7 +2791,7 @@ function NumberInput({
   readOnly = false,
   precision
 }) {
-  const errorId = React9.useId();
+  const errorId = React8.useId();
   const hasError = errorMessage != null;
   const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
   const round = (n) => {
@@ -2811,8 +2909,8 @@ function Password({
   labelColor,
   iconColor
 }) {
-  const [passwordVisible, setPasswordVisible] = React9.useState(false);
-  const errorId = React9.useId();
+  const [passwordVisible, setPasswordVisible] = React8.useState(false);
+  const errorId = React8.useId();
   const hasError = errorMessage != null;
   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: [
@@ -2958,7 +3056,7 @@ function Switch({
   checkedIcon,
   uncheckedIcon
 }) {
-  const id = React9.useId();
+  const id = React8.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     "// mr-12 was a hardcoded right margin that broke layouts; spacing // is the parent's responsibility now.",
     /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2991,8 +3089,8 @@ function AutoComplete({
   onItemClick,
   emptyText = "No results found"
 }) {
-  const [term, setTerm] = React9.useState("");
-  const [open, setOpen] = React9.useState(false);
+  const [term, setTerm] = React8.useState("");
+  const [open, setOpen] = React8.useState(false);
   const foundItems = term.trim() ? items.filter(
     ({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
   ) : [];
@@ -3090,10 +3188,10 @@ function TreeSelect({
   htmlFor,
   items = []
 }) {
-  const [open, setOpen] = React9.useState(false);
-  const [hoveredItem, setHoveredItem] = React9.useState(null);
-  const [innerItems, setInnerItems] = React9.useState([]);
-  React9.useEffect(() => {
+  const [open, setOpen] = React8.useState(false);
+  const [hoveredItem, setHoveredItem] = React8.useState(null);
+  const [innerItems, setInnerItems] = React8.useState([]);
+  React8.useEffect(() => {
     setInnerItems(items);
   }, [items]);
   const selectItem = (key) => {
@@ -3192,8 +3290,8 @@ function FileInput({
   name,
   accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx"
 }) {
-  const fileInput = React9.useRef(null);
-  const [files, setFiles] = React9.useState([]);
+  const fileInput = React8.useRef(null);
+  const [files, setFiles] = React8.useState([]);
   const openPicker = () => {
     fileInput.current?.click();
   };
@@ -3325,7 +3423,7 @@ function getMonthDays(year, month) {
   }
   return days;
 }
-var ChevronRight2 = ({ color = chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+var ChevronRight3 = ({ color = chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 var DoubleChevronRight2 = ({ color = chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
 var ChevronDown2 = ({ color = chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) });
 function DatePickerBase({
@@ -3341,12 +3439,12 @@ function DatePickerBase({
   disableAfter,
   disabled
 }) {
-  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 pickerRef = React8.useRef(null);
+  const calendarRef = React8.useRef(null);
+  const [isExpanded, setExpanded] = React8.useState(false);
+  const [isCloseToBottom, setCloseToBottom] = React8.useState(false);
+  const [currentYear, setCurrentYear] = React8.useState(value.getFullYear());
+  const [currentMonth, setCurrentMonth] = React8.useState(value.getMonth() + 1);
   const toggle = () => {
     if (!disabled) setExpanded((p) => !p);
   };
@@ -3390,14 +3488,14 @@ function DatePickerBase({
     }
     return ordered;
   };
-  React9.useEffect(() => {
+  React8.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);
   }, []);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const bbox = pickerRef.current?.getBoundingClientRect();
     if (bbox && (bbox.y > window.innerHeight - 220 || bbox.bottom > window.innerHeight - 400)) {
       setCloseToBottom(true);
@@ -3440,13 +3538,13 @@ function DatePickerBase({
           children: isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mx-auto w-max", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: () => setCurrentYear((y) => y - 1), className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(DoubleChevronRight2, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toPrevMonth, className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toPrevMonth, className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight3, {}) }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-prussian-blue select-none w-[130px] text-center", children: [
                 currentYear,
                 " ",
                 MONTHS[currentMonth]
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toNextMonth, className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toNextMonth, className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight3, {}) }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: () => setCurrentYear((y) => y + 1), className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(DoubleChevronRight2, {}) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 p-2", children: renderCalendar().map((weekDay, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
@@ -3490,29 +3588,29 @@ function TemporalPickerBase({
   layout,
   style = {}
 }) {
-  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 pickerRef = React8.useRef(null);
+  const calendarRef = React8.useRef(null);
+  const valueRefs = React8.useRef([]);
+  const [isExpanded, setExpanded] = React8.useState(false);
+  const [isCloseToBottom, setCloseToBottom] = React8.useState(false);
+  const innerValues = React8.useMemo(() => {
     const vals = [];
     for (let i = lowerLimit; i <= upperLimit; i++) vals.push(i);
     return vals;
   }, [lowerLimit, upperLimit]);
-  React9.useEffect(() => {
+  React8.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);
   }, []);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const bbox = pickerRef.current?.getBoundingClientRect();
     if (bbox && bbox.y > window.innerHeight - 220) setCloseToBottom(true);
     else setCloseToBottom(false);
   }, []);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!isExpanded) return;
     const t = setTimeout(() => {
       const node = valueRefs.current.find((n) => n.value === value);