@geomak/ui 6.26.1 → 6.27.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React29, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -693,7 +693,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React29.forwardRef(function Button2({
+var Button = React28.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -801,7 +801,7 @@ function MenuButton({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
-        children: items.map((item) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+        children: items.map((item) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
             DropdownMenu.Item,
@@ -1900,7 +1900,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1992,7 +1992,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React29.Children.toArray(children);
+  const slides = React28.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -2047,7 +2047,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React29.Children.toArray(children);
+  const slides = React28.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -2910,6 +2910,7 @@ function Scheduler({
   onSelectSlot,
   onSelectEvent,
   onNewEvent,
+  onError,
   className = "",
   style
 }) {
@@ -2918,9 +2919,11 @@ function Scheduler({
   const [cursor, setCursor] = useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const [loaded, setLoaded] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [reloadKey, setReloadKey] = useState(0);
   const [dir, setDir] = useState(0);
-  const loaderRef = useRef(loadEvents);
-  loaderRef.current = loadEvents;
+  const cbRef = useRef({ loadEvents, onError });
+  cbRef.current = { loadEvents, onError };
   const range = useMemo(
     () => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
     [view, cursor, weekStartsOn]
@@ -2928,21 +2931,26 @@ function Scheduler({
   const fromKey = range.from.getTime();
   const toKey = range.to.getTime();
   useEffect(() => {
-    const loader = loaderRef.current;
+    const { loadEvents: loader, onError: onErr } = cbRef.current;
     if (!loader) return;
     let cancelled = false;
     setLoading(true);
+    setError(null);
     Promise.resolve(loader({ from: new Date(fromKey), to: new Date(toKey) }, view)).then((evts) => {
       if (!cancelled) setLoaded(evts);
-    }).catch(() => {
-      if (!cancelled) setLoaded([]);
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err ?? new Error("Failed to load events"));
+        onErr?.(err);
+      }
     }).finally(() => {
       if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [fromKey, toKey, view]);
+  }, [fromKey, toKey, view, reloadKey]);
+  const retry = useCallback(() => setReloadKey((k) => k + 1), []);
   const events = useMemo(
     () => (controlledEvents ?? loaded).map(normalize),
     [controlledEvents, loaded]
@@ -2995,7 +3003,7 @@ function Scheduler({
             onNewEvent && /* @__PURE__ */ jsx(Button_default, { size: "sm", icon: /* @__PURE__ */ jsx(Plus, {}), content: "New event", onClick: onNewEvent })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: error ? /* @__PURE__ */ jsx(SchedulerError, { onRetry: retry }) : loadEvents && loading && events.length === 0 ? /* @__PURE__ */ jsx(SchedulerSkeleton, { view }) : /* @__PURE__ */ jsx(
           motion.div,
           {
             initial: { opacity: 0, x: reduced ? 0 : dir * 24 },
@@ -3030,6 +3038,36 @@ function Scheduler({
     }
   );
 }
+function SchedulerSkeleton({ view }) {
+  const bar = "rounded bg-background animate-pulse";
+  if (view === "week") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 grid gap-2", style: { gridTemplateColumns: "3.5rem repeat(7, 1fr)" }, children: [
+        /* @__PURE__ */ jsx("span", {}),
+        Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${bar} mx-auto h-8 w-8 rounded-full` }, i))
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${bar} h-6`, style: { width: `${60 + i * 13 % 35}%` } }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 grid grid-cols-7 gap-2", children: Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${bar} h-2.5` }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-7 grid-rows-5 gap-2", children: Array.from({ length: 35 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: `${bar} h-5 w-5 rounded-full` }),
+      i % 3 === 0 && /* @__PURE__ */ jsx("span", { className: `${bar} h-3` }),
+      i % 5 === 0 && /* @__PURE__ */ jsx("span", { className: `${bar} h-3`, style: { width: "70%" } })
+    ] }, i)) })
+  ] });
+}
+function SchedulerError({ onRetry }) {
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-full text-status-error", style: { backgroundColor: "color-mix(in oklab, var(--color-error) 12%, var(--color-surface))" }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.94a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" }) }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: "Couldn\u2019t load events" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-foreground-muted", children: "Something went wrong fetching this range." })
+    ] }),
+    /* @__PURE__ */ jsx(Button_default, { size: "sm", variant: "secondary", content: "Retry", onClick: onRetry })
+  ] });
+}
 function MonthYearPicker({ label, cursor, onPick }) {
   const [open, setOpen] = useState(false);
   const [viewYear, setViewYear] = useState(cursor.getFullYear());
@@ -5164,7 +5202,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React29.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React28.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5193,438 +5231,136 @@ var SearchInput = React29.forwardRef(function SearchInput2({ value, onChange, di
   ) });
 });
 var SearchInput_default = SearchInput;
-function Tag({ children, onRemove, removeLabel, disabled }) {
-  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 max-w-full", children: [
-    /* @__PURE__ */ jsx("span", { className: "truncate", children }),
-    onRemove && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        disabled,
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemove();
-        },
-        "aria-label": removeLabel ?? "Remove",
-        className: "inline-flex items-center justify-center w-4 h-4 flex-shrink-0 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed",
-        children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+var SHIMMER = "oxy-skeleton rounded-sm bg-surface-raised";
+function SkeletonBox({ width, height = 16, radius, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block ${SHIMMER} ${className}`,
+      style: {
+        width: width ?? "100%",
+        height,
+        borderRadius: radius ?? "var(--radius-md)",
+        ...style
       }
-    )
-  ] });
+    }
+  );
 }
-function MultiTagRow({
-  values,
-  disabled,
-  labelFor,
-  onRemove
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = 60,
+  lineHeight = 14,
+  gap = 8,
+  className = "",
+  style
 }) {
-  const wrapRef = useRef(null);
-  const measureRef = useRef(null);
-  const [visibleCount, setVisibleCount] = useState(values.length);
-  const key = values.map(String).join("|");
-  useLayoutEffect(() => {
-    const wrap = wrapRef.current;
-    const measure = measureRef.current;
-    if (!wrap || !measure) return;
-    const GAP = 6;
-    const recompute = () => {
-      const avail = wrap.clientWidth;
-      const tagEls = Array.from(measure.querySelectorAll("[data-mt]"));
-      const moreEl = measure.querySelector("[data-mm]");
-      const widths = tagEls.map((e) => e.offsetWidth);
-      const moreW = moreEl ? moreEl.offsetWidth : 0;
-      if (widths.length === 0) {
-        setVisibleCount(0);
-        return;
-      }
-      let used = 0;
-      let count = 0;
-      for (let i = 0; i < widths.length; i++) {
-        const w = widths[i] + (i > 0 ? GAP : 0);
-        if (used + w <= avail) {
-          used += w;
-          count++;
-        } else break;
-      }
-      if (count < widths.length) {
-        while (count > 0) {
-          let t = 0;
-          for (let i = 0; i < count; i++) t += widths[i] + (i > 0 ? GAP : 0);
-          t += GAP + moreW;
-          if (t <= avail) break;
-          count--;
-        }
-      }
-      setVisibleCount(count);
-    };
-    recompute();
-    const ro = new ResizeObserver(recompute);
-    ro.observe(wrap);
-    return () => ro.disconnect();
-  }, [key]);
-  const hidden = values.length - visibleCount;
-  const moreChip = (n) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center flex-shrink-0 rounded-md border border-border bg-surface-raised text-foreground-secondary text-xs px-2 py-0.5", children: [
-    "+",
-    n,
-    " more"
-  ] });
-  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative flex-1 min-w-0 flex flex-nowrap items-center gap-1.5 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: measureRef,
-        "aria-hidden": "true",
-        className: "absolute invisible pointer-events-none flex flex-nowrap items-center gap-1.5",
-        style: { left: -9999, top: -9999 },
-        children: [
-          values.map((val) => /* @__PURE__ */ jsx("span", { "data-mt": true, children: /* @__PURE__ */ jsx(Tag, { removeLabel: "x", onRemove: () => {
-          }, children: labelFor(val) }) }, `m-${val}`)),
-          /* @__PURE__ */ jsx("span", { "data-mm": true, children: moreChip(values.length) })
-        ]
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `flex flex-col ${className}`,
+      style: { gap, ...style },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `block ${SHIMMER}`,
+            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        ...style
       }
-    ),
-    values.slice(0, visibleCount).map((val) => /* @__PURE__ */ jsx(
-      Tag,
+    }
+  );
+}
+function SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+          hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: 36 }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(SkeletonBox, { height: 12, width: "55%" }),
+            /* @__PURE__ */ jsx(SkeletonBox, { height: 10, width: "35%" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines, lastLineWidth: 55 }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 72 }),
+          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 56 })
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_PICKER = [
+  { key: 1, value: 5, label: 5 },
+  { key: 2, value: 10, label: 10 },
+  { key: 3, value: 15, label: 15 },
+  { key: 4, value: 20, label: 20 }
+];
+var DEFAULT_PAGINATION = {
+  enabled: true,
+  perPage: 15,
+  withPicker: true,
+  pickerOptions: DEFAULT_PICKER
+};
+var DEFAULT_EXPAND = {
+  enabled: false
+};
+function createDatasets(rows, perPage) {
+  if (!perPage) return [rows.slice()];
+  const all = [];
+  for (let i = 0; i < rows.length; i += perPage) {
+    all.push(rows.slice(i, i + perPage));
+  }
+  return all;
+}
+var defaultGetRowKey = (_row, index) => index;
+var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
+function TableHeader({
+  columns,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxs("tr", { children: [
+    hasExpand && /* @__PURE__ */ jsx("th", { "aria-hidden": "true", className: "w-9" }),
+    columns.map((col) => /* @__PURE__ */ jsx(
+      "th",
       {
-        disabled,
-        removeLabel: `Remove ${labelFor(val)}`,
-        onRemove: () => onRemove(val),
-        children: labelFor(val)
+        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
       },
-      String(val)
-    )),
-    hidden > 0 && moreChip(hidden)
-  ] });
-}
-function Dropdown({
-  isMultiselect = false,
-  hasSearch = true,
-  label,
-  name,
-  value,
-  onChange,
-  disabled,
-  layout = "horizontal",
-  helperText,
-  required,
-  errorMessage,
-  style = {},
-  htmlFor,
-  items = [],
-  labelStyle = {},
-  placeholder,
-  size = "md",
-  className = ""
-}) {
-  const [open, setOpen] = useState(false);
-  const [selectedItems, setSelectedItems] = useState([]);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [innerItems, setInnerItems] = useState([]);
-  const errorId = useId();
-  const hasError = errorMessage != null;
-  useEffect(() => {
-    setInnerItems(items);
-  }, [items]);
-  useEffect(() => {
-    if (isMultiselect && Array.isArray(value)) {
-      setSelectedItems(value);
-    }
-  }, [isMultiselect, value]);
-  const selectItem = (key) => {
-    if (isMultiselect) {
-      const next = selectedItems.includes(key) ? selectedItems.filter((it) => it !== key) : [...selectedItems, key];
-      setSelectedItems(next);
-      onChange?.({ target: { value: next, id: htmlFor, name } });
-    } else {
-      setSelectedItems([key]);
-      onChange?.({ target: { value: key, id: htmlFor, name } });
-      setOpen(false);
-    }
-  };
-  const removeSelected = (key) => {
-    if (isMultiselect) {
-      const next = selectedItems.filter((it) => it !== key);
-      setSelectedItems(next);
-      onChange?.({ target: { value: next, id: htmlFor, name } });
-    } else {
-      setSelectedItems([]);
-      onChange?.({ target: { value: "", id: htmlFor, name } });
-    }
-  };
-  const labelFor = (key) => innerItems.find((it) => it.key === key)?.label ?? String(key);
-  const onSearchChange = (e) => {
-    const term = e.target.value;
-    setSearchTerm(term);
-    setInnerItems(
-      term.trim() === "" ? items : items.filter(
-        (it) => String(it.label).toLowerCase().includes(term.toLowerCase())
-      )
-    );
-  };
-  const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxs("div", { className: className || void 0, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            FieldLabel,
-            {
-              label,
-              htmlFor,
-              required,
-              helperText,
-              horizontal: layout === "horizontal",
-              style: labelStyle
-            }
-          ),
-          /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                id: htmlFor,
-                role: "combobox",
-                "aria-expanded": open,
-                "aria-haspopup": "listbox",
-                "aria-invalid": hasError || void 0,
-                "aria-describedby": hasError ? errorId : void 0,
-                style: { width: 240, ...style },
-                className: `flex items-center justify-between gap-2 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
-                tabIndex: disabled ? -1 : 0,
-                onKeyDown: (e) => {
-                  if (disabled) return;
-                  if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
-                    e.preventDefault();
-                    setOpen(true);
-                  }
-                },
-                children: [
-                  !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsx(
-                    MultiTagRow,
-                    {
-                      values: value,
-                      disabled,
-                      labelFor,
-                      onRemove: removeSelected
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex items-center overflow-hidden", children: /* @__PURE__ */ jsx(
-                    Tag,
-                    {
-                      disabled,
-                      removeLabel: `Remove ${labelFor(value)}`,
-                      onRemove: () => removeSelected(value),
-                      children: labelFor(value)
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
-              Popover.Content,
-              {
-                align: "start",
-                sideOffset: 4,
-                style: { width: style?.width || 240 },
-                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 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",
-                onInteractOutside: () => setOpen(false),
-                children: [
-                  hasSearch && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
-                    SearchInput_default,
-                    {
-                      style: { width: "100%" },
-                      inputStyle: { width: "100%" },
-                      value: searchTerm,
-                      onChange: onSearchChange,
-                      placeholder: "Search..."
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { role: "listbox", "aria-multiselectable": isMultiselect, className: "max-h-40 overflow-y-auto", children: innerItems.map((item) => (
-                    // aria-rowindex was previously set here but
-                    // it's invalid ARIA on role="option" (it
-                    // belongs on rows of a grid/treegrid). Dropped.
-                    // tabIndex={0} + Enter/Space handler makes the
-                    // option keyboard-activatable; the full
-                    // combobox roving-tabindex pattern is deferred
-                    // until the planned Phase-5 rewrite.
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        role: "option",
-                        "aria-selected": isSelected(item.key),
-                        tabIndex: 0,
-                        className: `flex items-center justify-between p-2 hover:bg-accent hover:text-accent-fg transition-colors duration-150 text-sm rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-surface-raised text-foreground" : "text-foreground"}`,
-                        onClick: () => selectItem(item.key),
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            selectItem(item.key);
-                          }
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                            item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
-                            item.label
-                          ] }),
-                          isSelected(item.key) && // currentColor — checkmark follows
-                          // the item's text colour, which
-                          // flips automatically on hover.
-                          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-                            "path",
-                            {
-                              d: "M4 10l4.5 4.5L16 6",
-                              stroke: "currentColor",
-                              strokeWidth: "2",
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round"
-                            }
-                          ) })
-                        ]
-                      },
-                      item.key
-                    )
-                  )) })
-                ]
-              }
-            ) })
-          ] })
-        ]
-      }
-    ),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
-  ] });
-}
-var SHIMMER = "oxy-skeleton rounded-sm bg-surface-raised";
-function SkeletonBox({ width, height = 16, radius, className = "", style }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `block ${SHIMMER} ${className}`,
-      style: {
-        width: width ?? "100%",
-        height,
-        borderRadius: radius ?? "var(--radius-md)",
-        ...style
-      }
-    }
-  );
-}
-function SkeletonText({
-  lines = 3,
-  lastLineWidth = 60,
-  lineHeight = 14,
-  gap = 8,
-  className = "",
-  style
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `flex flex-col ${className}`,
-      style: { gap, ...style },
-      children: Array.from({ length: lines }).map((_, i) => {
-        const isLast = i === lines - 1;
-        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
-        return /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `block ${SHIMMER}`,
-            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
-          },
-          i
-        );
-      })
-    }
-  );
-}
-function SkeletonCircle({ size = 40, className = "", style }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        ...style
-      }
-    }
-  );
-}
-function SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
-      style,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-          hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: 36 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx(SkeletonBox, { height: 12, width: "55%" }),
-            /* @__PURE__ */ jsx(SkeletonBox, { height: 10, width: "35%" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(SkeletonText, { lines, lastLineWidth: 55 }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
-          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 72 }),
-          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 56 })
-        ] })
-      ]
-    }
-  );
-}
-var DEFAULT_PICKER = [
-  { key: 1, value: 5, label: 5 },
-  { key: 2, value: 10, label: 10 },
-  { key: 3, value: 15, label: 15 },
-  { key: 4, value: 20, label: 20 }
-];
-var DEFAULT_PAGINATION = {
-  enabled: true,
-  perPage: 15,
-  withPicker: true,
-  pickerOptions: DEFAULT_PICKER
-};
-var DEFAULT_EXPAND = {
-  enabled: false
-};
-function createDatasets(rows, perPage) {
-  if (!perPage) return [rows.slice()];
-  const all = [];
-  for (let i = 0; i < rows.length; i += perPage) {
-    all.push(rows.slice(i, i + perPage));
-  }
-  return all;
-}
-var defaultGetRowKey = (_row, index) => index;
-var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
-function TableHeader({
-  columns,
-  hasExpand
-}) {
-  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxs("tr", { children: [
-    hasExpand && /* @__PURE__ */ jsx("th", { "aria-hidden": "true", className: "w-9" }),
-    columns.map((col) => /* @__PURE__ */ 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
-    ))
-  ] }) });
+      col.key
+    ))
+  ] }) });
 }
 var DefaultExpandIcon = /* @__PURE__ */ jsx(
   "svg",
@@ -5665,7 +5401,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React28.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5729,6 +5465,8 @@ function Pagination({
       if (next) setPerPageKey(next.key);
     }
   }, [serverSide, options.perPage, picker]);
+  const currentOpt = picker.find((o) => o.key === displayPerPageKey);
+  const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
   const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", disabled, onClick, icon, title });
   const chevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
   const doubleChevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
@@ -5736,21 +5474,20 @@ function Pagination({
     options.withPicker && /* @__PURE__ */ jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
       /* @__PURE__ */ jsx(
-        Dropdown,
+        MenuButton,
         {
+          variant: "secondary",
           size: "sm",
-          style: { width: 76 },
-          hasSearch: false,
-          items: picker,
-          isMultiselect: false,
-          value: displayPerPageKey,
-          onChange: ({ target: { value } }) => {
-            if (Array.isArray(value)) return;
-            const numKey = typeof value === "number" ? value : Number(value);
-            if (!serverSide) setPerPageKey(numKey);
-            const opt = picker.find((o) => o.key === numKey);
-            onPerPageChange(opt?.label ?? opt?.value ?? numKey);
-          }
+          side: "top",
+          label: String(currentPerPageLabel),
+          items: picker.map((o) => ({
+            key: o.key,
+            label: String(o.label ?? o.value ?? o.key),
+            onSelect: () => {
+              if (!serverSide) setPerPageKey(o.key);
+              onPerPageChange(o.label ?? o.value ?? o.key);
+            }
+          }))
         }
       )
     ] }),
@@ -6206,8 +5943,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
 }
-var elementsOfType = (children, type) => React29.Children.toArray(children).filter(
-  (c) => React29.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React28.Children.toArray(children).filter(
+  (c) => React28.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -6244,9 +5981,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React29.Children.toArray(panel.props.children);
+  const nodes = React28.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React29.isValidElement(node)) return null;
+    if (!React28.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -6655,7 +6392,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React29.useId().replace(/:/g, "");
+  const id = React28.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -7113,77 +6850,379 @@ function RadioGroup({
     }
   );
 }
-function Switch({
-  checked,
-  defaultChecked = false,
-  onChange,
-  checkedIcon,
-  uncheckedIcon,
+function Switch({
+  checked,
+  defaultChecked = false,
+  onChange,
+  checkedIcon,
+  uncheckedIcon,
+  label,
+  layout = "horizontal",
+  helperText,
+  className,
+  offLabel,
+  onLabel,
+  name,
+  required,
+  disabled,
+  errorMessage
+}) {
+  const id = useId();
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const isControlled = checked !== void 0;
+  const [internal, setInternal] = useState(defaultChecked);
+  const isOn = isControlled ? checked : internal;
+  const handle = (c) => {
+    if (!isControlled) setInternal(c);
+    onChange?.({ target: { checked: c, name } });
+  };
+  const stateLabel = (active) => [
+    "text-sm select-none transition-colors",
+    active ? "text-foreground font-medium" : "text-foreground-muted",
+    disabled ? "opacity-50" : "cursor-pointer"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      className,
+      label,
+      htmlFor: id,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      helperText,
+      labelAlign: "center",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+        offLabel != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: stateLabel(!isOn), children: offLabel }),
+        /* @__PURE__ */ jsx(
+          SwitchPrimitive.Root,
+          {
+            id,
+            name,
+            checked: isOn,
+            onCheckedChange: handle,
+            disabled,
+            required,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring disabled:opacity-50 disabled:cursor-not-allowed",
+            children: /* @__PURE__ */ jsx(
+              SwitchPrimitive.Thumb,
+              {
+                className: "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]",
+                children: checkedIcon && uncheckedIcon ? /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-3 h-3", children: isOn ? checkedIcon : uncheckedIcon }) : null
+              }
+            )
+          }
+        ),
+        onLabel != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: stateLabel(isOn), children: onLabel })
+      ] })
+    }
+  );
+}
+function Tag({ children, onRemove, removeLabel, disabled }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 max-w-full", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        "aria-label": removeLabel ?? "Remove",
+        className: "inline-flex items-center justify-center w-4 h-4 flex-shrink-0 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed",
+        children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+function MultiTagRow({
+  values,
+  disabled,
+  labelFor,
+  onRemove
+}) {
+  const wrapRef = useRef(null);
+  const measureRef = useRef(null);
+  const [visibleCount, setVisibleCount] = useState(values.length);
+  const key = values.map(String).join("|");
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const measure = measureRef.current;
+    if (!wrap || !measure) return;
+    const GAP = 6;
+    const recompute = () => {
+      const avail = wrap.clientWidth;
+      const tagEls = Array.from(measure.querySelectorAll("[data-mt]"));
+      const moreEl = measure.querySelector("[data-mm]");
+      const widths = tagEls.map((e) => e.offsetWidth);
+      const moreW = moreEl ? moreEl.offsetWidth : 0;
+      if (widths.length === 0) {
+        setVisibleCount(0);
+        return;
+      }
+      let used = 0;
+      let count = 0;
+      for (let i = 0; i < widths.length; i++) {
+        const w = widths[i] + (i > 0 ? GAP : 0);
+        if (used + w <= avail) {
+          used += w;
+          count++;
+        } else break;
+      }
+      if (count < widths.length) {
+        while (count > 0) {
+          let t = 0;
+          for (let i = 0; i < count; i++) t += widths[i] + (i > 0 ? GAP : 0);
+          t += GAP + moreW;
+          if (t <= avail) break;
+          count--;
+        }
+      }
+      setVisibleCount(count);
+    };
+    recompute();
+    const ro = new ResizeObserver(recompute);
+    ro.observe(wrap);
+    return () => ro.disconnect();
+  }, [key]);
+  const hidden = values.length - visibleCount;
+  const moreChip = (n) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center flex-shrink-0 rounded-md border border-border bg-surface-raised text-foreground-secondary text-xs px-2 py-0.5", children: [
+    "+",
+    n,
+    " more"
+  ] });
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative flex-1 min-w-0 flex flex-nowrap items-center gap-1.5 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: measureRef,
+        "aria-hidden": "true",
+        className: "absolute invisible pointer-events-none flex flex-nowrap items-center gap-1.5",
+        style: { left: -9999, top: -9999 },
+        children: [
+          values.map((val) => /* @__PURE__ */ jsx("span", { "data-mt": true, children: /* @__PURE__ */ jsx(Tag, { removeLabel: "x", onRemove: () => {
+          }, children: labelFor(val) }) }, `m-${val}`)),
+          /* @__PURE__ */ jsx("span", { "data-mm": true, children: moreChip(values.length) })
+        ]
+      }
+    ),
+    values.slice(0, visibleCount).map((val) => /* @__PURE__ */ jsx(
+      Tag,
+      {
+        disabled,
+        removeLabel: `Remove ${labelFor(val)}`,
+        onRemove: () => onRemove(val),
+        children: labelFor(val)
+      },
+      String(val)
+    )),
+    hidden > 0 && moreChip(hidden)
+  ] });
+}
+function Dropdown({
+  isMultiselect = false,
+  hasSearch = true,
   label,
+  name,
+  value,
+  onChange,
+  disabled,
   layout = "horizontal",
   helperText,
-  className,
-  offLabel,
-  onLabel,
-  name,
   required,
-  disabled,
-  errorMessage
+  errorMessage,
+  style = {},
+  htmlFor,
+  items = [],
+  labelStyle = {},
+  placeholder,
+  size = "md",
+  className = ""
 }) {
-  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [innerItems, setInnerItems] = useState([]);
   const errorId = useId();
   const hasError = errorMessage != null;
-  const isControlled = checked !== void 0;
-  const [internal, setInternal] = useState(defaultChecked);
-  const isOn = isControlled ? checked : internal;
-  const handle = (c) => {
-    if (!isControlled) setInternal(c);
-    onChange?.({ target: { checked: c, name } });
+  useEffect(() => {
+    setInnerItems(items);
+  }, [items]);
+  useEffect(() => {
+    if (isMultiselect && Array.isArray(value)) {
+      setSelectedItems(value);
+    }
+  }, [isMultiselect, value]);
+  const selectItem = (key) => {
+    if (isMultiselect) {
+      const next = selectedItems.includes(key) ? selectedItems.filter((it) => it !== key) : [...selectedItems, key];
+      setSelectedItems(next);
+      onChange?.({ target: { value: next, id: htmlFor, name } });
+    } else {
+      setSelectedItems([key]);
+      onChange?.({ target: { value: key, id: htmlFor, name } });
+      setOpen(false);
+    }
   };
-  const stateLabel = (active) => [
-    "text-sm select-none transition-colors",
-    active ? "text-foreground font-medium" : "text-foreground-muted",
-    disabled ? "opacity-50" : "cursor-pointer"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    Field,
-    {
-      className,
-      label,
-      htmlFor: id,
-      errorId,
-      errorMessage,
-      layout,
-      required,
-      helperText,
-      labelAlign: "center",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        offLabel != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: stateLabel(!isOn), children: offLabel }),
-        /* @__PURE__ */ jsx(
-          SwitchPrimitive.Root,
-          {
-            id,
-            name,
-            checked: isOn,
-            onCheckedChange: handle,
-            disabled,
-            required,
-            "aria-invalid": hasError || void 0,
-            "aria-describedby": hasError ? errorId : void 0,
-            className: "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring disabled:opacity-50 disabled:cursor-not-allowed",
-            children: /* @__PURE__ */ jsx(
-              SwitchPrimitive.Thumb,
+  const removeSelected = (key) => {
+    if (isMultiselect) {
+      const next = selectedItems.filter((it) => it !== key);
+      setSelectedItems(next);
+      onChange?.({ target: { value: next, id: htmlFor, name } });
+    } else {
+      setSelectedItems([]);
+      onChange?.({ target: { value: "", id: htmlFor, name } });
+    }
+  };
+  const labelFor = (key) => innerItems.find((it) => it.key === key)?.label ?? String(key);
+  const onSearchChange = (e) => {
+    const term = e.target.value;
+    setSearchTerm(term);
+    setInnerItems(
+      term.trim() === "" ? items : items.filter(
+        (it) => String(it.label).toLowerCase().includes(term.toLowerCase())
+      )
+    );
+  };
+  const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
+  return /* @__PURE__ */ jsxs("div", { className: className || void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              htmlFor,
+              required,
+              helperText,
+              horizontal: layout === "horizontal",
+              style: labelStyle
+            }
+          ),
+          /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "div",
               {
-                className: "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]",
-                children: checkedIcon && uncheckedIcon ? /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-3 h-3", children: isOn ? checkedIcon : uncheckedIcon }) : null
+                id: htmlFor,
+                role: "combobox",
+                "aria-expanded": open,
+                "aria-haspopup": "listbox",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                style: { width: 240, ...style },
+                className: `flex items-center justify-between gap-2 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
+                tabIndex: disabled ? -1 : 0,
+                onKeyDown: (e) => {
+                  if (disabled) return;
+                  if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+                    e.preventDefault();
+                    setOpen(true);
+                  }
+                },
+                children: [
+                  !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsx(
+                    MultiTagRow,
+                    {
+                      values: value,
+                      disabled,
+                      labelFor,
+                      onRemove: removeSelected
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex items-center overflow-hidden", children: /* @__PURE__ */ jsx(
+                    Tag,
+                    {
+                      disabled,
+                      removeLabel: `Remove ${labelFor(value)}`,
+                      onRemove: () => removeSelected(value),
+                      children: labelFor(value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                ]
               }
-            )
-          }
-        ),
-        onLabel != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: stateLabel(isOn), children: onLabel })
-      ] })
-    }
-  );
+            ) }),
+            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+              Popover.Content,
+              {
+                align: "start",
+                sideOffset: 4,
+                style: { width: style?.width || 240 },
+                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 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",
+                onInteractOutside: () => setOpen(false),
+                children: [
+                  hasSearch && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
+                    SearchInput_default,
+                    {
+                      style: { width: "100%" },
+                      inputStyle: { width: "100%" },
+                      value: searchTerm,
+                      onChange: onSearchChange,
+                      placeholder: "Search..."
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { role: "listbox", "aria-multiselectable": isMultiselect, className: "max-h-40 overflow-y-auto", children: innerItems.map((item) => (
+                    // aria-rowindex was previously set here but
+                    // it's invalid ARIA on role="option" (it
+                    // belongs on rows of a grid/treegrid). Dropped.
+                    // tabIndex={0} + Enter/Space handler makes the
+                    // option keyboard-activatable; the full
+                    // combobox roving-tabindex pattern is deferred
+                    // until the planned Phase-5 rewrite.
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "option",
+                        "aria-selected": isSelected(item.key),
+                        tabIndex: 0,
+                        className: `flex items-center justify-between p-2 hover:bg-accent hover:text-accent-fg transition-colors duration-150 text-sm rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-surface-raised text-foreground" : "text-foreground"}`,
+                        onClick: () => selectItem(item.key),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            selectItem(item.key);
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                            item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
+                            item.label
+                          ] }),
+                          isSelected(item.key) && // currentColor — checkmark follows
+                          // the item's text colour, which
+                          // flips automatically on hover.
+                          /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M4 10l4.5 4.5L16 6",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          ) })
+                        ]
+                      },
+                      item.key
+                    )
+                  )) })
+                ]
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
+  ] });
 }
 function AutoComplete({
   disabled,
@@ -8495,7 +8534,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {