@shlinkio/shlink-frontend-kit 0.9.8 → 0.9.10

package/dist/tailwind.js

@@ -1,133 +1,134 @@
-import { jsxs as g, jsx as n, Fragment as O } from "react/jsx-runtime";
-import w, { clsx as y } from "clsx";
-import { useRef as I, useState as R, useEffect as M, forwardRef as h, useCallback as T, createContext as S, useContext as C, useId as D, useMemo as $ } from "react";
-import { Link as j, NavLink as at } from "react-router";
-import { faClose as lt, faEyeSlash as dt, faEye as st, faCircleNotch as X, faSearch as it, faChevronLeft as G, faChevronRight as J, faCheck as wt } from "@fortawesome/free-solid-svg-icons";
+import { jsxs as p, jsx as n, Fragment as _ } from "react/jsx-runtime";
+import w, { clsx as f } from "clsx";
+import { useRef as T, useState as R, useEffect as B, forwardRef as y, useCallback as P, createContext as q, useContext as O, useId as $, useMemo as W } from "react";
+import { Link as G, NavLink as mt } from "react-router";
+import { faClose as pt, faEyeSlash as gt, faEye as bt, faCircleNotch as nt, faSearch as ut, faCaretDown as ht, faChevronLeft as V, faChevronRight as tt, faEllipsisV as ft, faSortAmountUp as xt, faSortAmountDown as yt, faCheck as kt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as v } from "@fortawesome/react-fontawesome";
-import { u as ct, a as mt, b as bt } from "./use-toggle-C1uZwbSD.js";
-import { createPortal as gt } from "react-dom";
-import { autoPlacement as pt, arrow as ut, useFloating as ht, useHover as ft, useInteractions as xt, useTransitionStyles as yt } from "@floating-ui/react";
-import { faClone as kt } from "@fortawesome/free-regular-svg-icons";
-const le = ({ children: t, summary: r, summaryClasses: e, ...o }) => {
-  const a = I(null), [d, l] = R(!1);
-  return M(() => {
-    const s = a.current, i = () => l(!!(s != null && s.open));
-    return s == null || s.addEventListener("toggle", i), () => s == null ? void 0 : s.removeEventListener("toggle", i);
-  }, []), /* @__PURE__ */ g("details", { ref: a, ...o, children: [
-    /* @__PURE__ */ n("summary", { className: y("tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm", e), children: r }),
-    d && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: t })
+import { u as vt, b as Nt, a as Ct, e as Tt, c as It } from "./ordering-VI1mTe3x.js";
+import { useFloating as ot, flip as Pt, offset as Ot, useClick as Dt, useInteractions as at, autoPlacement as Lt, arrow as Mt, useHover as Bt, useTransitionStyles as Rt } from "@floating-ui/react";
+import { createPortal as Ft } from "react-dom";
+import "reactstrap";
+import { faClone as Et } from "@fortawesome/free-regular-svg-icons";
+const Oe = ({ children: r, summary: e, summaryClasses: t, ...o }) => {
+  const a = T(null), [l, d] = R(!1);
+  return B(() => {
+    const i = a.current, s = () => d(!!(i != null && i.open));
+    return i == null || i.addEventListener("toggle", s), () => i == null ? void 0 : i.removeEventListener("toggle", s);
+  }, []), /* @__PURE__ */ p("details", { ref: a, ...o, children: [
+    /* @__PURE__ */ n("summary", { className: f("tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm", t), children: e }),
+    l && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: r })
   ] });
-}, vt = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
+}, St = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
       "tw:px-4 tw:py-3 tw:rounded-t-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
-      t
+      r
     ),
-    ...r,
-    ref: e
+    ...e,
+    ref: t
   }
-)), Nt = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
+)), jt = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
       "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
       "tw:first:rounded-t-md tw:last:rounded-b-md",
-      t
+      r
     ),
-    ...r,
-    ref: e
+    ...e,
+    ref: t
   }
-)), Ct = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
+)), At = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
       "tw:px-4 tw:py-3 tw:rounded-b-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
-      t
+      r
     ),
-    ...r,
-    ref: e
+    ...e,
+    ref: t
   }
-)), Tt = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
+)), _t = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
       "tw:group/card tw:rounded-md tw:shadow-md",
       "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
-      t
+      r
     ),
-    ...r,
-    ref: e
-  }
-)), N = Object.assign(Tt, { Body: Nt, Header: vt, Footer: Ct }), It = h(({ bodyClassName: t, children: r, ...e }, o) => {
-  const { title: a, titleSize: d = "md", ...l } = "title" in e ? e : {
     ...e,
+    ref: t
+  }
+)), C = Object.assign(_t, { Body: jt, Header: St, Footer: At }), $t = y(({ bodyClassName: r, children: e, ...t }, o) => {
+  const { title: a, titleSize: l = "md", ...d } = "title" in t ? t : {
+    ...t,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ g(N, { ...l, ref: o, children: [
-    a && /* @__PURE__ */ g(N.Header, { children: [
-      d === "lg" && /* @__PURE__ */ n("h4", { children: a }),
-      d === "md" && /* @__PURE__ */ n("h5", { children: a }),
-      d === "sm" && /* @__PURE__ */ n("h6", { children: a })
+  return /* @__PURE__ */ p(C, { ...d, ref: o, children: [
+    a && /* @__PURE__ */ p(C.Header, { children: [
+      l === "lg" && /* @__PURE__ */ n("h4", { children: a }),
+      l === "md" && /* @__PURE__ */ n("h5", { children: a }),
+      l === "sm" && /* @__PURE__ */ n("h6", { children: a })
     ] }),
-    /* @__PURE__ */ n(N.Body, { className: t, children: r })
+    /* @__PURE__ */ n(C.Body, { className: r, children: e })
   ] });
 });
-function Pt({
-  id: t,
-  items: r,
-  onSelectItem: e,
+function Ht({
+  id: r,
+  items: e,
+  onSelectItem: t,
   onActiveItemChange: o,
   renderItem: a,
-  className: d,
-  noItemsMessage: l = "No items",
-  anchor: s,
-  "aria-label": i = "Items",
+  className: l,
+  noItemsMessage: d = "No items",
+  anchor: i,
+  "aria-label": s = "Items",
   ...c
 }) {
-  const [m, u] = R(0), f = T((x) => {
-    if (u(x), o) {
-      const [b, p] = [...r.entries()][x];
-      o(b, p);
+  const [m, b] = R(0), u = P((x) => {
+    if (b(x), o) {
+      const [g, h] = [...e.entries()][x];
+      o(g, h);
     }
-  }, [r, o]);
-  return M(() => {
-    const x = s == null ? void 0 : s.current;
+  }, [e, o]);
+  return B(() => {
+    const x = i == null ? void 0 : i.current;
     if (!x)
       return;
-    const b = (p) => {
-      ["Enter", "ArrowUp", "ArrowDown"].includes(p.key) && p.preventDefault(), p.key === "ArrowDown" ? f(Math.min(m + 1, r.size - 1)) : p.key === "ArrowUp" ? f(Math.max(m - 1, 0)) : p.key === "Enter" && e([...r.values()][m]);
+    const g = (h) => {
+      ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? u(Math.min(m + 1, e.size - 1)) : h.key === "ArrowUp" ? u(Math.max(m - 1, 0)) : h.key === "Enter" && t([...e.values()][m]);
     };
-    return x.addEventListener("keydown", b), () => x.removeEventListener("keydown", b);
-  }, [m, s, f, r, e]), /* @__PURE__ */ g(
-    N,
+    return x.addEventListener("keydown", g), () => x.removeEventListener("keydown", g);
+  }, [m, i, u, e, t]), /* @__PURE__ */ p(
+    C,
     {
-      id: t,
-      className: w("tw:py-1 tw:flex tw:flex-col", d),
+      id: r,
+      className: w("tw:py-1 tw:flex tw:flex-col", l),
       role: "listbox",
       "aria-orientation": "vertical",
-      "aria-label": i,
+      "aria-label": s,
       ...c,
       children: [
-        r.size === 0 && /* @__PURE__ */ n("i", { role: "option", "aria-disabled": !0, "aria-selected": !1, "data-testid": "no-items", className: "tw:px-2 tw:py-1", children: l }),
-        [...r.entries()].map(([x, b], p) => /* @__PURE__ */ n(
+        e.size === 0 && /* @__PURE__ */ n("i", { role: "option", "aria-disabled": !0, "aria-selected": !1, "data-testid": "no-items", className: "tw:px-2 tw:py-1", children: d }),
+        [...e.entries()].map(([x, g], h) => /* @__PURE__ */ n(
           "button",
           {
-            id: `${t}_${x}`,
+            id: `${r}_${x}`,
             type: "button",
             role: "option",
-            "aria-selected": p === m,
+            "aria-selected": h === m,
             className: w(
               "tw:px-2 tw:py-1 tw:text-left tw:truncate",
-              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": p === m }
+              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === m }
             ),
             tabIndex: -1,
-            onClick: () => e(b),
-            onMouseOver: () => f(p),
-            children: a(b)
+            onClick: () => t(g),
+            onMouseOver: () => u(h),
+            children: a(g)
           },
           x
         ))
@@ -135,294 +136,290 @@ function Pt({
     }
   );
 }
-const E = S(void 0), L = S({ responsive: !0, size: "md" }), Lt = ({ children: t, className: r }) => {
-  const { responsive: e } = C(L);
-  return /* @__PURE__ */ n(E.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r, className: e }) => {
+  const { responsive: t } = O(F);
+  return /* @__PURE__ */ n(H.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
       className: w(
-        { "tw:hidden tw:lg:table-header-group": e },
-        r
+        { "tw:hidden tw:lg:table-header-group": t },
+        e
       ),
-      children: t
+      children: r
     }
   ) });
-}, Bt = ({ children: t, className: r }) => {
-  const { responsive: e } = C(L);
-  return /* @__PURE__ */ n(E.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+}, Wt = ({ children: r, className: e }) => {
+  const { responsive: t } = O(F);
+  return /* @__PURE__ */ n(H.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
       className: w(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
-        r
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": t },
+        e
       ),
-      children: t
+      children: r
     }
   ) });
-}, Mt = ({ children: t, className: r }) => {
-  const { responsive: e } = C(L);
-  return /* @__PURE__ */ n(E.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+}, Kt = ({ children: r, className: e }) => {
+  const { responsive: t } = O(F);
+  return /* @__PURE__ */ n(H.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
       className: w(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
-        r
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": t },
+        e
       ),
-      children: t
+      children: r
     }
   ) });
-}, Rt = ({ children: t, className: r, ...e }) => {
-  const o = C(E), a = (o == null ? void 0 : o.section) === "body", { responsive: d } = C(L);
+}, zt = ({ children: r, className: e, ...t }) => {
+  const o = O(H), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = O(F);
   return /* @__PURE__ */ n(
     "tr",
     {
       className: w(
         "tw:group",
         {
-          "tw:lg:table-row tw:flex tw:flex-col": d,
-          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": d,
+          "tw:lg:table-row tw:flex tw:flex-col": l,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
           "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": a,
           // Use a different hover bg color depending on the table being inside a card or not
           "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": a
         },
-        r
+        e
       ),
-      ...e,
-      children: t
+      ...t,
+      children: r
     }
   );
-}, Et = ({ children: t, className: r, columnName: e, type: o, ...a }) => {
-  const d = C(E), l = o ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s, size: i } = C(L);
+}, qt = ({ children: r, className: e, columnName: t, type: o, ...a }) => {
+  const l = O(H), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i, size: s } = O(F);
   return /* @__PURE__ */ n(
-    l,
+    d,
     {
-      "data-column": s ? e : void 0,
+      "data-column": i ? t : void 0,
       className: w(
         "tw:border-lm-border tw:dark:border-dm-border",
         {
-          "tw:p-1": i === "sm",
-          "tw:p-2": i === "md",
-          "tw:p-3": i === "lg",
-          "tw:border-b-1": !s,
-          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
+          "tw:p-1": s === "sm",
+          "tw:p-2": s === "md",
+          "tw:p-3": s === "lg",
+          "tw:border-b-1": !i,
+          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": i,
+          "tw:text-left": d === "th",
           // For responsive tables, display the content in data-column attribute for md sizes and lower
-          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && l === "td"
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && d === "td"
         },
-        r
+        e
       ),
       ...a,
-      children: t
+      children: r
     }
   );
-}, Ft = ({ header: t, footer: r, children: e, responsive: o = !0, size: a = "md", ...d }) => /* @__PURE__ */ n(L.Provider, { value: { responsive: o, size: a }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...d, children: [
-  /* @__PURE__ */ n(Lt, { children: t }),
-  /* @__PURE__ */ n(Bt, { children: e }),
-  r && /* @__PURE__ */ n(Mt, { children: r })
-] }) }), de = Object.assign(Ft, { Row: Rt, Cell: Et }), _t = h(({
-  children: t,
+}, Gt = ({ header: r, footer: e, children: t, responsive: o = !0, size: a = "md", ...l }) => /* @__PURE__ */ n(F.Provider, { value: { responsive: o, size: a }, children: /* @__PURE__ */ p("table", { className: "tw:w-full", ...l, children: [
+  /* @__PURE__ */ n(Ut, { children: r }),
+  /* @__PURE__ */ n(Wt, { children: t }),
+  e && /* @__PURE__ */ n(Kt, { children: e })
+] }) }), De = Object.assign(Gt, { Row: zt, Cell: qt }), Jt = y(({
   className: r,
   disabled: e,
-  variant: o = "primary",
-  size: a = "md",
-  inline: d = !1,
+  variant: t = "primary",
+  size: o = "md",
+  inline: a = !1,
   solid: l = !1,
-  type: s = "button",
+  type: d = "button",
   ...i
-}, c) => {
-  const m = "to" in i ? j : "button", u = m === j ? void 0 : s;
+}, s) => {
+  const c = "to" in i, m = c ? G : "button", b = c ? void 0 : d;
   return /* @__PURE__ */ n(
     m,
     {
-      ref: c,
+      ref: s,
       className: w(
         {
-          "tw:inline-flex": d,
-          "tw:flex": !d
+          "tw:inline-flex": a,
+          "tw:flex": !a
         },
         "tw:gap-2 tw:items-center tw:justify-center",
         "tw:border tw:rounded-md tw:no-underline",
         "tw:transition-colors",
         {
-          "tw:focus-ring": o === "primary",
-          "tw:focus-ring-secondary": o === "secondary",
-          "tw:focus-ring-danger": o === "danger"
+          "tw:focus-ring": t === "primary",
+          "tw:focus-ring-secondary": t === "secondary",
+          "tw:focus-ring-danger": t === "danger"
         },
         {
-          "tw:px-1.5 tw:py-1 tw:text-sm": a === "sm",
-          "tw:px-3 tw:py-1.5": a === "md",
-          "tw:px-4 tw:py-2 tw:text-lg": a === "lg"
+          "tw:px-1.5 tw:py-1 tw:text-sm": o === "sm",
+          "tw:px-3 tw:py-1.5": o === "md",
+          "tw:px-4 tw:py-2 tw:text-lg": o === "lg"
         },
         {
-          "tw:border-lm-brand tw:dark:border-dm-brand": o === "primary",
-          "tw:text-lm-brand tw:dark:text-dm-brand": o === "primary" && !l,
-          "tw:border-zinc-500": o === "secondary",
-          "tw:text-zinc-500": o === "secondary" && !l,
-          "tw:border-danger": o === "danger",
-          "tw:text-danger": o === "danger" && !l
+          "tw:border-lm-brand tw:dark:border-dm-brand": t === "primary",
+          "tw:text-lm-brand tw:dark:text-dm-brand": t === "primary" && !l,
+          "tw:border-zinc-500": t === "secondary",
+          "tw:text-zinc-500": t === "secondary" && !l,
+          "tw:border-danger": t === "danger",
+          "tw:text-danger": t === "danger" && !l
         },
         l && {
           "tw:text-white": !0,
-          "tw:bg-lm-brand tw:dark:bg-dm-brand": o === "primary",
-          "tw:highlight:bg-lm-brand-dark tw:dark:highlight:bg-dm-brand-dark": o === "primary",
-          "tw:highlight:border-lm-brand-dark tw:dark:highlight:border-dm-brand-dark": o === "primary",
-          "tw:bg-zinc-500": o === "secondary",
-          "tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600": o === "secondary",
-          "tw:bg-danger": o === "danger",
-          "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
+          "tw:bg-lm-brand tw:dark:bg-dm-brand": t === "primary",
+          "tw:highlight:bg-lm-brand-dark tw:dark:highlight:bg-dm-brand-dark": t === "primary",
+          "tw:highlight:border-lm-brand-dark tw:dark:highlight:border-dm-brand-dark": t === "primary",
+          "tw:bg-zinc-500": t === "secondary",
+          "tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600": t === "secondary",
+          "tw:bg-danger": t === "danger",
+          "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": t === "danger"
         },
         !e && {
           "tw:highlight:text-white": !l,
-          "tw:highlight:bg-lm-brand tw:dark:highlight:bg-dm-brand": o === "primary",
-          "tw:highlight:bg-zinc-500": o === "secondary",
-          "tw:highlight:bg-danger": o === "danger"
+          "tw:highlight:bg-lm-brand tw:dark:highlight:bg-dm-brand": t === "primary",
+          "tw:highlight:bg-zinc-500": t === "secondary",
+          "tw:highlight:bg-danger": t === "danger"
         },
         {
+          "tw:cursor-pointer": !e,
           "tw:pointer-events-none tw:opacity-65": e
         },
         r
       ),
-      disabled: e,
-      type: u,
-      ...i,
-      children: t
+      disabled: c ? void 0 : e,
+      "aria-disabled": c ? e : void 0,
+      type: b,
+      ...i
     }
   );
-}), Y = h(({ className: t, onChange: r, ...e }, o) => {
-  const a = T((d) => r == null ? void 0 : r(d.target.checked, d), [r]);
+}), lt = y(({ className: r, onChange: e, ...t }, o) => {
+  const a = P((l) => e == null ? void 0 : e(l.target.checked, l), [e]);
   return /* @__PURE__ */ n(
     "input",
     {
       ref: o,
       type: "checkbox",
-      className: y(
+      className: f(
         "tw:appearance-none tw:focus-ring tw:cursor-[inherit]",
         "tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border",
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-lm-brand tw:dark:checked:bg-dm-brand tw:bg-no-repeat",
         // Use different background color when rendered inside a card
         "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input",
-        t
+        r
       ),
       onChange: a,
-      ...e
+      ...t
     }
   );
-}), se = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
-  Y,
+}), Le = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+  lt,
   {
-    ref: e,
-    className: y("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
-    ...r
+    ref: t,
+    className: f("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", r),
+    ...e
   }
-)), Q = h(({ onClick: t, className: r, label: e = "Close" }, o) => /* @__PURE__ */ n(
+)), et = y(({ onClick: r, className: e, label: t = "Close" }, o) => /* @__PURE__ */ n(
   "button",
   {
     ref: o,
     type: "button",
-    onClick: t,
+    onClick: r,
     className: w(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
-      "tw:rounded-md tw:focus-ring",
-      r
+      "tw:rounded-md tw:focus-ring tw:cursor-pointer",
+      e
     ),
-    "aria-label": e,
-    children: /* @__PURE__ */ n(v, { icon: lt, size: "xl" })
+    "aria-label": t,
+    children: /* @__PURE__ */ n(v, { icon: pt, size: "xl" })
   }
-)), W = h(({
-  borderless: t = !1,
-  size: r = "md",
-  feedback: e,
+)), J = y(({
+  borderless: r = !1,
+  size: e = "md",
+  feedback: t,
   className: o,
   disabled: a,
-  readOnly: d,
   ...l
-}, s) => {
-  const i = !a && !d;
-  return /* @__PURE__ */ n(
-    "input",
-    {
-      ref: s,
-      className: w(
-        "tw:w-full",
-        {
-          "tw:focus-ring": !e,
-          "tw:focus-ring-danger": e === "error"
-        },
-        {
-          "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
-          "tw:px-3 tw:py-1.5": r === "md",
-          "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
-        },
-        {
-          "tw:rounded-md tw:border": !t,
-          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
-          "tw:border-danger": !t && e === "error",
-          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !i,
-          "tw:bg-lm-primary tw:dark:bg-dm-primary": i,
-          // Use different background color when rendered inside a card
-          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": i
-        },
-        o
-      ),
-      disabled: a,
-      readOnly: d,
-      ...l
-    }
-  );
-}), U = ({ required: t, children: r, className: e, ...o }) => /* @__PURE__ */ g("label", { className: y("tw:cursor-pointer", e), ...o, children: [
+}, d) => /* @__PURE__ */ n(
+  "input",
+  {
+    ref: d,
+    className: w(
+      "tw:w-full",
+      {
+        "tw:focus-ring": !t,
+        "tw:focus-ring-danger": t === "error"
+      },
+      {
+        "tw:px-2 tw:py-1 tw:text-sm": e === "sm",
+        "tw:px-3 tw:py-1.5": e === "md",
+        "tw:px-4 tw:py-2 tw:text-xl": e === "lg"
+      },
+      {
+        "tw:rounded-md tw:border": !r,
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !r && !t,
+        "tw:border-danger": !r && t === "error",
+        "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": a,
+        "tw:bg-lm-primary tw:dark:bg-dm-primary": !a,
+        // Use different background color when rendered inside a card
+        "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !a
+      },
+      o
+    ),
+    disabled: a,
+    ...l
+  }
+)), Q = ({ required: r, children: e, className: t, ...o }) => /* @__PURE__ */ p("label", { className: f("tw:cursor-pointer", t), ...o, children: [
+  e,
+  r && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
+] }), X = ({ children: r, helpText: e, error: t, "data-testid": o }) => /* @__PURE__ */ p("div", { className: "tw:flex tw:flex-col tw:gap-1", "data-testid": o, children: [
   r,
-  t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), K = ({ children: t, helpText: r, error: e, "data-testid": o }) => /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", "data-testid": o, children: [
-  t,
-  r && /* @__PURE__ */ n(
+  e && /* @__PURE__ */ n(
     "small",
     {
       "data-testid": o ? `${o}-help-text` : "help-text",
       className: "tw:text-gray-500 tw:dark:text-gray-400",
-      children: r
+      children: e
     }
   ),
-  e && /* @__PURE__ */ n("span", { "data-testid": o ? `${o}-error` : "error", className: "tw:text-danger", children: e })
-] }), ie = h(({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: a, helpText: d, "data-testid": l, ...s }, i) => {
-  const c = D();
-  return /* @__PURE__ */ g(K, { error: a, helpText: d, "data-testid": l, children: [
-    /* @__PURE__ */ n(U, { htmlFor: c, required: e, children: t }),
+  t && /* @__PURE__ */ n("span", { "data-testid": o ? `${o}-error` : "error", className: "tw:text-danger", children: t })
+] }), Me = y(({ label: r, inputClassName: e, required: t, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
+  const c = $();
+  return /* @__PURE__ */ p(X, { error: a, helpText: l, "data-testid": d, children: [
+    /* @__PURE__ */ n(Q, { htmlFor: c, required: t, children: r }),
     /* @__PURE__ */ n(
-      W,
+      J,
       {
-        ref: i,
+        ref: s,
         id: c,
-        className: r,
-        required: e || o,
+        className: e,
+        required: t || o,
         feedback: a ? "error" : void 0,
-        ...s
+        ...i
       }
     )
   ] });
-}), Dt = h(({ containerClassName: t, className: r, size: e, ...o }, a) => {
-  const [d, l, , s] = ct(!1), i = I(null), c = T(({ relatedTarget: m }) => {
-    var u;
-    (u = i.current) != null && u.contains(m) || s();
-  }, [i, s]);
-  return /* @__PURE__ */ g(
+}), Qt = y(({ containerClassName: r, className: e, size: t, ...o }, a) => {
+  const [l, d, , i] = vt(!1), s = T(null), c = P(({ relatedTarget: m }) => {
+    var b;
+    (b = s.current) != null && b.contains(m) || i();
+  }, [s, i]);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: y("tw:group tw:relative", t),
-      ref: i,
+      className: f("tw:group tw:relative", r),
+      ref: s,
       onBlurCapture: c,
       children: [
         /* @__PURE__ */ n(
-          W,
+          J,
           {
             ref: a,
-            type: d ? "text" : "password",
-            className: y(
+            type: l ? "text" : "password",
+            className: f(
               {
-                "tw:pr-10": e !== "sm",
-                "tw:pr-8": e === "sm"
+                "tw:pr-10": t !== "sm",
+                "tw:pr-8": t === "sm"
               },
-              r
+              e
             ),
-            size: e,
+            size: t,
             "data-testid": "input",
             ...o
           }
@@ -431,113 +428,113 @@ const E = S(void 0), L = S({ responsive: !0, size: "md" }), Lt = ({ children: t,
           "button",
           {
             type: "button",
-            onClick: l,
-            title: d ? "Hide password" : "Show password",
-            "aria-label": d ? "Hide password" : "Show password",
-            className: y(
-              "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1",
+            onClick: d,
+            title: l ? "Hide password" : "Show password",
+            "aria-label": l ? "Hide password" : "Show password",
+            className: f(
+              "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1 tw:cursor-pointer",
               "tw:text-placeholder tw:hover:text-lm-text tw:hover:dark:text-dm-text tw:transition-colors",
               {
-                "tw:right-1.5": e !== "sm",
-                "tw:scale-85 tw:right-1": e === "sm"
+                "tw:right-1.5": t !== "sm",
+                "tw:scale-85 tw:right-1": t === "sm"
               }
             ),
             tabIndex: -1,
-            children: /* @__PURE__ */ n(v, { fixedWidth: !0, icon: d ? dt : st })
+            children: /* @__PURE__ */ n(v, { fixedWidth: !0, icon: l ? gt : bt })
           }
         )
       ]
     }
   );
-}), we = h(({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: a, helpText: d, "data-testid": l, ...s }, i) => {
-  const c = D();
-  return /* @__PURE__ */ g(K, { error: a, helpText: d, "data-testid": l, children: [
-    /* @__PURE__ */ n(U, { htmlFor: c, required: e, children: t }),
+}), Be = y(({ label: r, inputClassName: e, required: t, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
+  const c = $();
+  return /* @__PURE__ */ p(X, { error: a, helpText: l, "data-testid": d, children: [
+    /* @__PURE__ */ n(Q, { htmlFor: c, required: t, children: r }),
     /* @__PURE__ */ n(
-      Dt,
+      Qt,
       {
-        ref: i,
+        ref: s,
         id: c,
-        className: r,
-        required: e || o,
+        className: e,
+        required: t || o,
         feedback: a ? "error" : void 0,
-        ...s
+        ...i
       }
     )
   ] });
-}), $t = h(({
-  className: t,
-  size: r = "md",
-  feedback: e,
+}), Xt = y(({
+  className: r,
+  size: e = "md",
+  feedback: t,
   style: o = {},
   disabled: a,
-  ...d
-}, l) => /* @__PURE__ */ n(
+  ...l
+}, d) => /* @__PURE__ */ n(
   "select",
   {
-    ref: l,
+    ref: d,
     className: w(
       "tw:w-full tw:appearance-none tw:pr-9",
       "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
       {
-        "tw:focus-ring": !e,
-        "tw:focus-ring-danger": e === "error"
+        "tw:focus-ring": !t,
+        "tw:focus-ring-danger": t === "error"
       },
       "tw:rounded-md tw:border",
       {
-        "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
-        "tw:border-danger": e === "error"
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !t,
+        "tw:border-danger": t === "error"
       },
       {
-        "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
-        "tw:pl-3 tw:py-1.5": r === "md",
-        "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
+        "tw:pl-2 tw:py-1 tw:text-sm": e === "sm",
+        "tw:pl-3 tw:py-1.5": e === "md",
+        "tw:pl-4 tw:py-2 tw:text-xl": e === "lg",
         "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": a,
         // Apply different background color when rendered inside a card
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !a
       },
-      t
+      r
     ),
     style: {
       ...o,
       background: "right 0.75rem center / 16px 12px"
     },
     disabled: a,
-    ...d
+    ...l
   }
-)), ce = h(({ selectClassName: t, label: r, error: e, helpText: o, required: a, hiddenRequired: d, "data-testid": l, ...s }, i) => {
-  const c = D();
-  return /* @__PURE__ */ g(K, { error: e, helpText: o, "data-testid": l, children: [
-    /* @__PURE__ */ n(U, { htmlFor: c, required: a, children: r }),
+)), Re = y(({ selectClassName: r, label: e, error: t, helpText: o, required: a, hiddenRequired: l, "data-testid": d, ...i }, s) => {
+  const c = $();
+  return /* @__PURE__ */ p(X, { error: t, helpText: o, "data-testid": d, children: [
+    /* @__PURE__ */ n(Q, { htmlFor: c, required: a, children: e }),
     /* @__PURE__ */ n(
-      $t,
+      Xt,
       {
-        ref: i,
+        ref: s,
         id: c,
-        className: t,
-        required: a || d,
-        feedback: e ? "error" : void 0,
-        ...s
+        className: r,
+        required: a || l,
+        feedback: t ? "error" : void 0,
+        ...i
       }
     )
   ] });
-}), Ht = h(({
-  onChange: t,
-  containerClassName: r,
-  inputClassName: e,
+}), Yt = y(({
+  onChange: r,
+  containerClassName: e,
+  inputClassName: t,
   // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
   size: o = "lg",
   loading: a = !1,
-  ...d
-}, l) => {
-  const { setTimeout: s, clearCurrentTimeout: i } = mt(500), c = T((m) => {
-    m ? s(() => t(m)) : (i(), t(m));
-  }, [i, t, s]);
-  return /* @__PURE__ */ g("div", { className: w("tw:group tw:relative tw:focus-within:z-10", r), children: [
+  ...l
+}, d) => {
+  const { setTimeout: i, clearCurrentTimeout: s } = Nt(500), c = P((m) => {
+    m ? i(() => r(m)) : (s(), r(m));
+  }, [s, r, i]);
+  return /* @__PURE__ */ p("div", { className: w("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
       v,
       {
-        icon: a ? X : it,
+        icon: a ? nt : ut,
         spin: a,
         className: w(
           "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
@@ -550,83 +547,83 @@ const E = S(void 0), L = S({ responsive: !0, size: "md" }), Lt = ({ children: t,
       }
     ),
     /* @__PURE__ */ n(
-      W,
+      J,
       {
-        ref: l,
+        ref: d,
         type: "search",
         className: w(
           {
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
           },
-          e
+          t
         ),
         placeholder: "Search...",
         onChange: (m) => c(m.target.value),
         size: o,
-        ...d
+        ...l
       }
     )
   ] });
 });
-function me({
-  searchResults: t,
-  onSearch: r,
-  onSelectSearchResult: e,
+function Fe({
+  searchResults: r,
+  onSearch: e,
+  onSelectSearchResult: t,
   renderSearchResult: o,
   size: a = "md",
   // SearchInput defaults its size to 'lg'. Change it to 'md'
-  listboxSpan: d = "full",
-  onFocus: l,
-  ...s
+  listboxSpan: l = "full",
+  onFocus: d,
+  ...i
 }) {
-  const i = I(null), c = D(), [m, u] = R(), f = $(
-    () => t ? m ?? [...t.keys()][0] : void 0,
-    [m, t]
-  ), x = T((b) => {
-    e(b), r(""), i.current.value = "";
-  }, [r, e]);
-  return /* @__PURE__ */ g(
+  const s = T(null), c = $(), [m, b] = R(), u = W(
+    () => r ? m ?? [...r.keys()][0] : void 0,
+    [m, r]
+  ), x = P((g) => {
+    t(g), e(""), s.current.value = "";
+  }, [e, t]);
+  return /* @__PURE__ */ p(
     "div",
     {
       className: "tw:relative",
-      onBlur: (b) => {
-        b.currentTarget.contains(b.relatedTarget) || r("");
+      onBlur: (g) => {
+        g.currentTarget.contains(g.relatedTarget) || e("");
       },
       children: [
         /* @__PURE__ */ n(
-          Ht,
+          Yt,
           {
-            onChange: r,
+            onChange: e,
             size: a,
-            ref: i,
+            ref: s,
             role: "combobox",
             "aria-autocomplete": "list",
-            "aria-expanded": !!t,
+            "aria-expanded": !!r,
             "aria-controls": c,
-            "aria-activedescendant": f ? `${c}_${f}` : void 0,
+            "aria-activedescendant": u ? `${c}_${u}` : void 0,
             autoComplete: "off",
             autoCorrect: "off",
-            onFocus: (b) => {
-              l == null || l(b), r(b.target.value);
+            onFocus: (g) => {
+              d == null || d(g), e(g.target.value);
             },
-            ...s
+            ...i
           }
         ),
-        t && /* @__PURE__ */ n(
-          Pt,
+        r && /* @__PURE__ */ n(
+          Ht,
           {
             id: c,
-            items: t,
-            anchor: i,
+            items: r,
+            anchor: s,
             onSelectItem: x,
-            onActiveItemChange: u,
+            onActiveItemChange: b,
             renderItem: o,
             className: w(
               "tw:absolute tw:top-full tw:mt-1 tw:z-10",
               {
-                "tw:min-w-60 tw:max-w-full": d === "auto",
-                "tw:w-full": d === "full"
+                "tw:min-w-60 tw:max-w-full": l === "auto",
+                "tw:w-full": l === "full"
               }
             ),
             "aria-label": "Matching items",
@@ -637,20 +634,198 @@ function me({
     }
   );
 }
-const be = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
-  Y,
+const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+  lt,
   {
-    ref: e,
-    className: y(
+    ref: t,
+    className: f(
       "tw:rounded-full tw:w-8 tw:h-4",
       "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
       "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
       "tw:checked:bg-right tw:transition-[background-position]",
-      t
+      r
     ),
-    ...r
+    ...e
   }
-)), Ot = h(({ className: t, disabled: r, size: e = "md", type: o = "button", ...a }, d) => /* @__PURE__ */ n(
+)), Zt = ({ className: r, selected: e, disabled: t, ...o }) => {
+  const a = "to" in o;
+  return (
+    // @ts-expect-error The Tag is inferred from provided props, so they should always match
+    /* @__PURE__ */ n(
+      a ? G : "button",
+      {
+        role: "menuitem",
+        "data-selected": e,
+        className: f(
+          "tw:flex tw:items-center tw:w-full tw:px-3 tw:py-1.5 tw:focus-ring",
+          // Overwrite link styles in case a Link is being used
+          "tw:no-underline tw:text-inherit",
+          {
+            "tw:cursor-pointer": !t,
+            "tw:pointer-events-none tw:opacity-50": t,
+            "tw:bg-lm-secondary tw:dark:bg-dm-secondary": e && !t,
+            "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:highlight:z-1 tw:relative": !e && !t
+          },
+          r
+        ),
+        tabIndex: -1,
+        disabled: a ? void 0 : t,
+        "aria-disabled": a ? t : void 0,
+        ...o
+      }
+    )
+  );
+}, Vt = () => (
+  // TODO Use an <hr /> tag once tailwind styles are not set with !important
+  /* @__PURE__ */ n("div", { role: "separator", "aria-hidden": !0, className: "tw:border-b tw:border-lm-border tw:dark:border-dm-border tw:my-2" })
+), te = ({ children: r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: "heading",
+    "aria-level": 6,
+    "aria-hidden": !0,
+    className: f(
+      "tw:flex tw:items-center tw:w-full tw:px-3 tw:py-1.5",
+      "tw:text-gray-500 tw:text-sm tw:font-semibold"
+    ),
+    onClick: (e) => e.stopPropagation(),
+    children: r
+  }
+), ee = ({ className: r, onClick: e, ...t }) => (
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  /* @__PURE__ */ n(
+    "div",
+    {
+      className: f("tw:px-3 tw:py-1.5", r),
+      ...t,
+      onClick: (o) => {
+        o.stopPropagation(), e == null || e(o);
+      }
+    }
+  )
+), re = ({
+  children: r,
+  className: e,
+  focusableElementsSelector: t = '[role="menuitem"]:not([disabled]):not([aria-disabled])',
+  focusFirstItem: o = !1,
+  ...a
+}) => {
+  const l = T(null);
+  return Ct(l, { elementsSelector: t, focusFirstItem: o }), /* @__PURE__ */ n(C, { ref: l, role: "menu", className: f("tw:py-2 tw:whitespace-nowrap", e), ...a, children: r });
+}, j = Object.assign(re, { Item: Zt, Separator: Vt, Title: te, Misc: ee }), ne = ({
+  children: r,
+  menuAlignment: e = "left",
+  buttonVariant: t = "button",
+  buttonContent: o,
+  buttonClassName: a,
+  buttonSize: l = "md",
+  buttonDisabled: d = !1,
+  containerClassName: i,
+  menuClassName: s,
+  caretless: c,
+  buttonLabel: m
+}) => {
+  const [b, u] = R(!1), x = T(null), { refs: g, floatingStyles: h, context: D } = ot({
+    open: b,
+    onOpenChange: u,
+    placement: e === "right" ? "bottom-end" : "bottom-start",
+    middleware: [Pt(), Ot(3)],
+    // eslint-disable-next-line react-compiler/react-compiler
+    elements: { reference: x.current }
+  }), E = Dt(D), { getReferenceProps: K, getFloatingProps: k } = at([
+    E
+  ]), S = $(), L = T(null);
+  return B(() => {
+    const N = L.current, Y = x.current;
+    if (!N || !Y)
+      return () => {
+      };
+    const Z = new AbortController();
+    return document.body.addEventListener("click", (wt) => {
+      wt.composedPath().includes(Y) || u(!1);
+    }, { signal: Z.signal }), () => Z.abort();
+  }, []), // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+  /* @__PURE__ */ p(
+    "div",
+    {
+      ref: L,
+      className: f("tw:relative tw:inline-block", i),
+      onKeyDown: (N) => {
+        N.key === "Escape" && u(!1);
+      },
+      onBlur: (N) => {
+        N.relatedTarget && !L.current.contains(N.relatedTarget) && u(!1);
+      },
+      children: [
+        /* @__PURE__ */ p(
+          "button",
+          {
+            ref: x,
+            ...K(),
+            type: "button",
+            "aria-haspopup": !0,
+            "aria-expanded": b,
+            "aria-controls": S,
+            "aria-label": m,
+            disabled: d,
+            className: f(
+              "tw:flex tw:items-center tw:rounded-md tw:focus-ring",
+              {
+                "tw:justify-between": !c,
+                "tw:cursor-pointer": !d,
+                "tw:pointer-events-none tw:opacity-50": d,
+                // Button variant
+                "tw:border tw:border-lm-border tw:dark:border-dm-border": t === "button",
+                "tw:bg-lm-primary tw:dark:bg-dm-primary": t === "button",
+                // Use different bg color when inside a card
+                "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": t === "button",
+                // Link variant
+                "tw:text-lm-brand tw:dark:text-dm-brand": t === "link",
+                "tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline": t === "link",
+                // Button sizes
+                "tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5": l === "sm",
+                "tw:px-3 tw:py-1.5 tw:gap-x-2": l === "md",
+                "tw:px-4 tw:py-2 tw:text-lg tw:gap-x-2": l === "lg"
+              },
+              a
+            ),
+            onKeyDown: (N) => {
+              N.key === "ArrowDown" && (N.preventDefault(), u(!0));
+            },
+            children: [
+              o,
+              !c && /* @__PURE__ */ n(v, { icon: ht, size: "xs" })
+            ]
+          }
+        ),
+        b && /* @__PURE__ */ n(
+          "div",
+          {
+            ref: g.setFloating,
+            style: h,
+            className: "tw:min-w-full tw:z-1000",
+            ...k(),
+            children: /* @__PURE__ */ n(
+              j,
+              {
+                className: s,
+                id: S,
+                focusableElementsSelector: '[role="menuitem"]:not([disabled]):not([aria-disabled]),input:not([disabled]),select:not([disabled])',
+                focusFirstItem: !0,
+                children: r
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, I = Object.assign(ne, {
+  Item: j.Item,
+  Separator: j.Separator,
+  Title: j.Title,
+  Misc: j.Misc
+}), oe = y(({ className: r, disabled: e, size: t = "md", type: o = "button", ...a }, l) => /* @__PURE__ */ n(
   "button",
   {
     className: w(
@@ -658,25 +833,26 @@ const be = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
       "tw:text-lm-brand tw:dark:text-dm-brand",
       "tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline",
       {
-        "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
-        "tw:px-3 tw:py-1.5": e === "md",
-        "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
-        "tw:pointer-events-none tw:opacity-65": r
+        "tw:px-1.5 tw:py-1 tw:text-sm": t === "sm",
+        "tw:px-3 tw:py-1.5": t === "md",
+        "tw:px-4 tw:py-2 tw:text-lg": t === "lg",
+        "tw:cursor-pointer": !e,
+        "tw:pointer-events-none tw:opacity-65": e
       },
-      t
+      r
     ),
-    disabled: r,
+    disabled: e,
     type: o,
     ...a,
-    ref: d
+    ref: l
   }
-)), Z = S(null), jt = ({ className: t, to: r, ...e }) => {
-  const o = C(Z);
+)), dt = q(null), ae = ({ className: r, to: e, ...t }) => {
+  const o = O(dt);
   return /* @__PURE__ */ n(
-    at,
+    mt,
     {
       role: "menuitem",
-      to: r,
+      to: e,
       className: ({ isActive: a }) => w(
         "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
         "tw:highlight:text-lm-brand tw:dark:highlight:text-dm-brand",
@@ -689,169 +865,189 @@ const be = h(({ className: t, ...r }, e) => /* @__PURE__ */ n(
           "tw:border-b-transparent tw:text-gray-500": !a,
           "tw:flex-grow": o == null ? void 0 : o.fill
         },
-        t
+        r
       ),
-      ...e
+      ...t
     }
   );
-}, At = ({ children: t, className: r, fill: e }) => /* @__PURE__ */ n(Z.Provider, { value: { fill: e }, children: /* @__PURE__ */ n(N, { role: "menubar", className: w("tw:flex tw:overflow-hidden", r), children: t }) }), ge = Object.assign(At, { Pill: jt }), St = new Intl.NumberFormat("en-US"), Wt = (t) => St.format(Number(t)), V = 10, pe = (t) => Math.ceil(t / V) * V, P = 2, _ = "...", Ut = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), Kt = (t, r) => {
-  const e = Ut(
-    Math.max(P, t - P),
-    Math.min(r - 1, t + P) + 1
+}, le = ({ children: r, className: e, fill: t }) => /* @__PURE__ */ n(dt.Provider, { value: { fill: t }, children: /* @__PURE__ */ n(C, { role: "menubar", className: w("tw:flex tw:overflow-hidden", e), children: r }) }), Se = Object.assign(le, { Pill: ae }), de = new Intl.NumberFormat("en-US"), ie = (r) => de.format(Number(r)), rt = 10, je = (r) => Math.ceil(r / rt) * rt, M = 2, U = "...", se = (r, e) => Array.from({ length: e - r }, (t, o) => r + o), ce = (r, e) => {
+  const t = se(
+    Math.max(M, r - M),
+    Math.min(e - 1, r + M) + 1
   );
-  return t - P > P && e.unshift(_), t + P < r - 1 && e.push(_), e.unshift(1), e.push(r), e;
-}, B = (t) => t === _, zt = (t) => B(t) ? t : Wt(t), qt = (t, r) => B(t) ? `${t}_${r}` : `${t}`, tt = [
+  return r - M > M && t.unshift(U), r + M < e - 1 && t.push(U), t.unshift(1), t.push(e), t;
+}, A = (r) => r === U, we = (r) => A(r) ? r : ie(r), me = (r, e) => A(r) ? `${r}_${e}` : `${r}`, it = [
   "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
   "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
-], et = (t = !1) => w(
-  tt,
-  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
+], st = (r = !1) => w(
+  it,
+  "tw:px-3 tw:py-2 tw:cursor-pointer tw:no-underline",
   "tw:focus-ring tw:focus-visible:z-1",
-  !t && [
+  !r && [
     "tw:text-lm-brand tw:dark:text-dm-brand",
     "tw:bg-lm-primary tw:dark:bg-dm-primary",
     "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary"
   ],
-  t && "tw:bg-lm-main tw:dark:bg-dm-main tw:text-white"
-), A = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: w(tt, "tw:px-3 py-2 tw:text-gray-400"), children: t }), rt = () => /* @__PURE__ */ n(A, { children: _ });
-function Gt({ children: t, active: r, isEllipsis: e, href: o, ...a }) {
-  const d = $(() => et(r), [r]);
-  return e ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n(j, { className: d, to: o, ...a, children: t });
+  r && "tw:bg-lm-main tw:dark:bg-dm-main tw:text-white"
+), z = ({ children: r }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: w(it, "tw:px-3 tw:py-2 tw:text-gray-400"), children: r }), ct = () => /* @__PURE__ */ n(z, { children: U });
+function pe({ children: r, active: e, isEllipsis: t, href: o, ...a }) {
+  const l = W(() => st(e), [e]);
+  return t ? /* @__PURE__ */ n(ct, {}) : /* @__PURE__ */ n(G, { className: l, to: o, ...a, children: r });
 }
-function Jt({ children: t, active: r, isEllipsis: e, ...o }) {
-  const a = $(() => et(r), [r]);
-  return e ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
+function ge({ children: r, active: e, isEllipsis: t, ...o }) {
+  const a = W(() => st(e), [e]);
+  return t ? /* @__PURE__ */ n(ct, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: r });
 }
-const ue = ({ currentPage: t, pagesCount: r, ...e }) => {
-  const o = "urlForPage" in e, a = o ? Gt : Jt, d = T(
-    (l) => o ? { href: B(l) ? void 0 : e.urlForPage(l) } : { onClick: () => !B(l) && e.onPageChange(l) },
-    [o, e]
+const Ae = ({ currentPage: r, pagesCount: e, ...t }) => {
+  const o = "urlForPage" in t, a = o ? pe : ge, l = P(
+    (d) => o ? { href: A(d) ? void 0 : t.urlForPage(d) } : { onClick: () => !A(d) && t.onPageChange(d) },
+    [o, t]
   );
-  return r < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(v, { size: "xs", icon: G }) }),
-    Kt(t, r).map((l, s) => /* @__PURE__ */ n(
+  return e < 2 ? null : /* @__PURE__ */ p("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    r === 1 ? /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(v, { size: "xs", icon: V }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, r - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(v, { size: "xs", icon: V }) }),
+    ce(r, e).map((d, i) => /* @__PURE__ */ n(
       a,
       {
-        active: l === t,
-        isEllipsis: B(l),
-        ...d(l),
-        children: zt(l)
+        active: d === r,
+        isEllipsis: A(d),
+        ...l(d),
+        children: we(d)
       },
-      qt(l, s)
+      me(d, i)
     )),
-    t === r ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...d(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) })
+    r === e ? /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(v, { size: "xs", icon: tt }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(e, r + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(v, { size: "xs", icon: tt }) })
   ] });
-}, Qt = ({
-  open: t,
-  children: r,
-  className: e,
+}, be = ({ buttonLabel: r = "Options", buttonSize: e = "md", ...t }) => /* @__PURE__ */ n(
+  I,
+  {
+    buttonContent: /* @__PURE__ */ n(
+      v,
+      {
+        icon: ft,
+        className: f({ "tw:px-1": e === "sm" })
+      }
+    ),
+    caretless: !0,
+    buttonLabel: r,
+    buttonSize: e,
+    ...t
+  }
+), _e = Object.assign(be, {
+  Item: I.Item,
+  Separator: I.Separator,
+  Title: I.Title,
+  Misc: I.Misc
+}), ue = ({
+  open: r,
+  children: e,
+  className: t,
   onClose: o,
   ...a
 }) => {
-  const d = I(null);
-  return M(() => {
+  const l = T(null);
+  return B(() => {
     var c, m;
-    const l = document.body, s = l.style.overflow, i = l.style.paddingRight;
-    if (t) {
-      const u = window.outerWidth - l.clientWidth, f = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", f && (l.style.paddingRight = `${u}px`), (c = d.current) == null || c.showModal();
+    const d = document.body, i = d.style.overflow, s = d.style.paddingRight;
+    if (r) {
+      const b = window.outerWidth - d.clientWidth, u = d.scrollHeight > d.clientHeight;
+      d.style.overflow = "hidden", u && (d.style.paddingRight = `${b}px`), (c = l.current) == null || c.showModal();
     } else
-      (m = d.current) == null || m.close();
+      (m = l.current) == null || m.close();
     return () => {
-      l.style.overflow = s, l.style.paddingRight = i;
+      d.style.overflow = i, d.style.paddingRight = s;
     };
-  }, [t]), gt(
+  }, [r]), Ft(
     /* @__PURE__ */ n(
       "dialog",
       {
-        ref: d,
-        className: w("tw:bg-transparent tw:backdrop:bg-black/50", e),
-        onCancel: (l) => {
-          l.preventDefault(), o();
+        ref: l,
+        className: w("tw:bg-transparent tw:backdrop:bg-black/50", t),
+        onCancel: (d) => {
+          d.preventDefault(), o();
         },
         ...a,
-        children: t && r
+        children: r && e
       }
     ),
     document.body
   );
-}, he = ({
-  open: t,
-  onClose: r,
-  variant: e = "default",
+}, $e = ({
+  open: r,
+  onClose: e,
+  variant: t = "default",
   title: o,
   children: a,
-  className: d,
-  ...l
+  className: l,
+  ...d
 }) => {
   const {
-    size: s = "md",
-    confirmText: i = "Confirm",
+    size: i = "md",
+    confirmText: s = "Confirm",
     cancelText: c = "Cancel",
     confirmDisabled: m,
-    onConfirm: u,
-    onClosed: f,
+    onConfirm: b,
+    onClosed: u,
     ...x
-  } = "onConfirm" in l ? l : { ...l }, [b, p] = R(t), F = I(null), H = I("cancel"), ot = T((k) => {
-    k.preventDefault(), k.stopPropagation(), H.current = "confirm", u == null || u();
-  }, [u]);
-  return M(() => {
-    if (t) {
-      H.current = "cancel", p(!0);
+  } = "onConfirm" in d ? d : { ...d }, [g, h] = R(r), D = T(null), E = T("cancel"), K = P((k) => {
+    k.preventDefault(), k.stopPropagation(), E.current = "confirm", b == null || b();
+  }, [b]);
+  return B(() => {
+    if (r) {
+      E.current = "cancel", h(!0);
       return;
     }
-    const k = F.current;
+    const k = D.current;
     if (k) {
-      delete F.current.dataset.open;
-      let z = !1;
-      const q = (nt) => {
-        z || nt.target !== k || (z = !0, p(!1), f == null || f(H.current));
+      delete D.current.dataset.open;
+      let S = !1;
+      const L = (N) => {
+        S || N.target !== k || (S = !0, h(!1), u == null || u(E.current));
       };
-      return k.addEventListener("transitionend", q), () => {
-        k.removeEventListener("transitionend", q);
+      return k.addEventListener("transitionend", L), () => {
+        k.removeEventListener("transitionend", L);
       };
     }
-  }, [f, t]), M(() => {
-    const k = F.current;
-    b && k && (k.dataset.open = "");
-  }, [b]), /* @__PURE__ */ n(
-    Qt,
+  }, [u, r]), B(() => {
+    const k = D.current;
+    g && k && (k.dataset.open = "");
+  }, [g]), /* @__PURE__ */ n(
+    ue,
     {
-      open: b,
-      onClose: r,
+      open: g,
+      onClose: e,
       className: w(
         {
-          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": b,
-          "tw:overflow-hidden": e === "cover"
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": g,
+          "tw:overflow-hidden": t === "cover"
         },
-        d
+        l
       ),
       ...x,
       children: /* @__PURE__ */ n(
         "form",
         {
           "data-testid": "transition-container",
-          ref: F,
+          ref: D,
           className: w(
             "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
             // CSS transitions are based on the presence of the `data-open` attribute
             "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
             "tw:transition-[opacity_,_translate] tw:duration-300",
             // Handle modal dimensions for different variants and sizes
-            e !== "cover" && {
-              "tw:sm:w-sm": s === "sm",
-              "tw:md:w-lg": s === "md",
-              "tw:md:w-4xl": s === "lg",
-              "tw:md:w-6xl": s === "xl"
+            t !== "cover" && {
+              "tw:sm:w-sm": i === "sm",
+              "tw:md:w-lg": i === "md",
+              "tw:md:w-4xl": i === "lg",
+              "tw:md:w-6xl": i === "xl"
             },
-            { "tw:h-full": e === "cover" }
+            { "tw:h-full": t === "cover" }
           ),
-          onSubmit: ot,
-          children: /* @__PURE__ */ n(N, { className: w(
+          onSubmit: K,
+          children: /* @__PURE__ */ n(C, { className: w(
             "tw:w-full",
-            { "tw:h-full tw:relative tw:overflow-auto": e === "cover" }
-          ), children: e === "cover" ? /* @__PURE__ */ g(O, { children: [
-            /* @__PURE__ */ g(
+            { "tw:h-full tw:relative tw:overflow-auto": t === "cover" }
+          ), children: t === "cover" ? /* @__PURE__ */ p(_, { children: [
+            /* @__PURE__ */ p(
               "div",
               {
                 className: w(
@@ -862,22 +1058,22 @@ const ue = ({ currentPage: t, pagesCount: r, ...e }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(Q, { onClick: r, label: "Close dialog" })
+                  /* @__PURE__ */ n(et, { onClick: e, label: "Close dialog" })
                 ]
               }
             ),
             a
-          ] }) : /* @__PURE__ */ g(O, { children: [
-            /* @__PURE__ */ g(N.Header, { className: w(
+          ] }) : /* @__PURE__ */ p(_, { children: [
+            /* @__PURE__ */ p(C.Header, { className: w(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
-              /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": e === "danger" }), children: o }),
-              /* @__PURE__ */ n(Q, { onClick: r, label: "Close dialog" })
+              /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": t === "danger" }), children: o }),
+              /* @__PURE__ */ n(et, { onClick: e, label: "Close dialog" })
             ] }),
-            /* @__PURE__ */ n(N.Body, { children: a }),
-            u && /* @__PURE__ */ g(
-              N.Footer,
+            /* @__PURE__ */ n(C.Body, { children: a }),
+            b && /* @__PURE__ */ p(
+              C.Footer,
               {
                 "data-testid": "footer",
                 className: w(
@@ -885,15 +1081,15 @@ const ue = ({ currentPage: t, pagesCount: r, ...e }) => {
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ n(Ot, { onClick: r, children: c }),
+                  /* @__PURE__ */ n(oe, { onClick: e, children: c }),
                   /* @__PURE__ */ n(
-                    _t,
+                    Jt,
                     {
                       solid: !0,
-                      variant: e === "danger" ? "danger" : "primary",
+                      variant: t === "danger" ? "danger" : "primary",
                       disabled: m,
                       type: "submit",
-                      children: i
+                      children: s
                     }
                   )
                 ]
@@ -904,109 +1100,109 @@ const ue = ({ currentPage: t, pagesCount: r, ...e }) => {
       )
     }
   );
-}, fe = ({ className: t, children: r, loading: e = !1, variant: o = "default" }) => /* @__PURE__ */ n(It, { className: y({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: y("tw:text-center", {
+}, He = ({ className: r, children: e, loading: t = !1, variant: o = "default" }) => /* @__PURE__ */ n($t, { className: f({ "tw:[&]:border-danger": o === "error" }, r), children: /* @__PURE__ */ p("h3", { className: f("tw:text-center", {
   "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
   "tw:text-danger": o === "error"
 }), children: [
-  e && /* @__PURE__ */ g(O, { children: [
-    /* @__PURE__ */ n(v, { icon: X, spin: !0 }),
-    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: r ?? "Loading..." })
+  t && /* @__PURE__ */ p(_, { children: [
+    /* @__PURE__ */ n(v, { icon: nt, spin: !0 }),
+    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
-  !e && r
-] }) }), xe = ({ variant: t, className: r, size: e = "md", children: o }) => /* @__PURE__ */ n(
+  !t && e
+] }) }), Ue = ({ variant: r, className: e, size: t = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: y(
+    className: f(
       "tw:rounded-md tw:text-center",
       {
-        "tw:p-2": e === "sm",
-        "tw:p-4": e === "md",
-        "tw:p-6": e === "lg",
-        "tw:[&]:text-white": t !== "warning",
-        "tw:bg-lm-brand tw:dark:bg-dm-brand": t === "success",
-        "tw:bg-danger": t === "error",
-        "tw:bg-warning tw:text-black": t === "warning"
+        "tw:p-2": t === "sm",
+        "tw:p-4": t === "md",
+        "tw:p-6": t === "lg",
+        "tw:[&]:text-white": r !== "warning",
+        "tw:bg-lm-brand tw:dark:bg-dm-brand": r === "success",
+        "tw:bg-danger": r === "error",
+        "tw:bg-warning tw:text-black": r === "warning"
       },
-      r
+      e
     ),
     children: o
   }
-), ye = ({ placement: t = "auto" } = {}) => {
-  const r = I(null), e = (() => {
-    const p = [];
-    return t === "auto" && p.push(pt()), p.push(ut({ element: r })), p;
-  })(), [o, a] = R(!1), { refs: d, floatingStyles: l, context: s, middlewareData: i } = ht({
-    placement: t === "auto" ? void 0 : t,
+), We = ({ placement: r = "auto" } = {}) => {
+  const e = T(null), t = (() => {
+    const h = [];
+    return r === "auto" && h.push(Lt()), h.push(Mt({ element: e })), h;
+  })(), [o, a] = R(!1), { refs: l, floatingStyles: d, context: i, middlewareData: s } = ot({
+    placement: r === "auto" ? void 0 : r,
     open: o,
     onOpenChange: a,
-    middleware: e
-  }), c = ft(s, {
+    middleware: t
+  }), c = Bt(i, {
     delay: { open: 300 },
     move: !0
-  }), { getFloatingProps: m, getReferenceProps: u } = xt([c]), { isMounted: f, styles: x } = yt(s, { duration: 200 }), b = $(() => {
-    const p = s.placement.split("-")[0];
+  }), { getFloatingProps: m, getReferenceProps: b } = at([c]), { isMounted: u, styles: x } = Rt(i, { duration: 200 }), g = W(() => {
+    const h = i.placement.split("-")[0];
     return {
       top: "bottom",
       right: "left",
       bottom: "top",
       left: "right"
-    }[p] ?? "";
-  }, [s.placement]);
+    }[h] ?? "";
+  }, [i.placement]);
   return {
-    anchor: { ...u(), ref: d.setReference },
+    anchor: { ...b(), ref: l.setReference },
     tooltip: {
       ...m(),
-      refSetter: d.setFloating,
-      isMounted: f,
-      styles: { ...l, ...x },
-      arrowPos: i.arrow,
-      arrowRef: r,
-      arrowSide: b
+      refSetter: l.setFloating,
+      isMounted: u,
+      styles: { ...d, ...x },
+      arrowPos: s.arrow,
+      arrowRef: e,
+      arrowSide: g
     }
   };
-}, ke = ({ children: t, isMounted: r, styles: e, refSetter: o, arrowRef: a, arrowPos: d, arrowSide: l, ...s }) => {
-  var i;
-  return r && /* @__PURE__ */ n(
+}, Ke = ({ children: r, isMounted: e, styles: t, refSetter: o, arrowRef: a, arrowPos: l, arrowSide: d, ...i }) => {
+  var s;
+  return e && /* @__PURE__ */ n(
     "div",
     {
       role: "tooltip",
       "aria-live": "polite",
-      className: y(
+      className: f(
         "tw:z-1000 tw:max-w-64",
         // Add space between anchor and tooltip via padding, so that if the tooltip is inside the anchor, you can hover it
         // and it's never closed
         {
-          "tw:pt-2.5": l === "top",
-          "tw:pb-2.5": l === "bottom",
-          "tw:pr-2.5": l === "right",
-          "tw:pl-2.5": l === "left"
+          "tw:pt-2.5": d === "top",
+          "tw:pb-2.5": d === "bottom",
+          "tw:pr-2.5": d === "right",
+          "tw:pl-2.5": d === "left"
         }
       ),
       ref: o,
-      style: e,
-      ...s,
-      children: /* @__PURE__ */ g("div", { className: "tw:relative tw:px-1.5 tw:py-1 tw:rounded tw:bg-black/90 tw:text-white tw:text-center", children: [
+      style: t,
+      ...i,
+      children: /* @__PURE__ */ p("div", { className: "tw:relative tw:px-1.5 tw:py-1 tw:rounded tw:bg-black/90 tw:text-white tw:text-center", children: [
         /* @__PURE__ */ n("span", { className: "tw:sr-only", children: "Tooltip: " }),
-        t,
+        r,
         /* @__PURE__ */ n(
           "div",
           {
             ref: a,
-            className: y(
+            className: f(
               "tw:absolute",
               // Render as a triangle
               "tw:border-l-6 tw:border-r-6 tw:border-b-6 tw:border-l-transparent tw:border-r-transparent tw:border-b-black/90",
               // Rotate triangle so that it points to the correct direction
               {
-                "tw:rotate-180": l === "bottom",
-                "tw:rotate-90 tw:mr-[-3px]": l === "right",
-                "tw:rotate-270 tw:ml-[-3px]": l === "left"
+                "tw:rotate-180": d === "bottom",
+                "tw:rotate-90 tw:mr-[-3px]": d === "right",
+                "tw:rotate-270 tw:ml-[-3px]": d === "left"
               }
             ),
             style: {
-              left: d == null ? void 0 : d.x,
-              top: d == null ? void 0 : d.y,
-              [l]: `${-(((i = a.current) == null ? void 0 : i.offsetWidth) ?? 0) / 2}px`
+              left: l == null ? void 0 : l.x,
+              top: l == null ? void 0 : l.y,
+              [d]: `${-(((s = a.current) == null ? void 0 : s.offsetWidth) ?? 0) / 2}px`
             },
             "data-testid": "arrow"
           }
@@ -1014,66 +1210,111 @@ const ue = ({ currentPage: t, pagesCount: r, ...e }) => {
       ] })
     }
   );
-}, ve = ({ text: t, className: r, size: e = "lg", initialCopied: o = !1, navigator_: a = globalThis.navigator, ...d }) => {
-  const [l, s] = bt(o), i = T(
-    () => a.clipboard.writeText(t).then(s),
-    [a.clipboard, t, s]
+};
+function ze({ items: r, order: e, onChange: t, prefixed: o = !0, buttonVariant: a = "button", ...l }) {
+  const d = P((s) => {
+    const c = Tt({ currentOrderDir: e.dir, currentField: e.field, newField: s });
+    t(c);
+  }, [t, e.dir, e.field]), i = a === "button";
+  return /* @__PURE__ */ p(
+    I,
+    {
+      buttonContent: /* @__PURE__ */ p(_, { children: [
+        !i && "Order by",
+        i && !e.field && /* @__PURE__ */ n("i", { children: "Order by..." }),
+        i && e.field && /* @__PURE__ */ p(_, { children: [
+          o && "Order by: ",
+          r[e.field],
+          " - ",
+          e.dir ?? "DESC"
+        ] })
+      ] }),
+      buttonVariant: a,
+      ...l,
+      children: [
+        Object.entries(r).map(([s, c]) => /* @__PURE__ */ p(
+          I.Item,
+          {
+            selected: e.field === s,
+            onClick: () => d(s),
+            className: "tw:flex tw:items-center tw:justify-between tw:gap-2",
+            children: [
+              c,
+              e.field === s && /* @__PURE__ */ n(v, { icon: e.dir === "ASC" ? xt : yt })
+            ]
+          },
+          s
+        )),
+        /* @__PURE__ */ n(I.Separator, {}),
+        /* @__PURE__ */ n(I.Item, { disabled: !e.field, onClick: () => t({}), children: /* @__PURE__ */ n("i", { children: "Clear selection" }) })
+      ]
+    }
+  );
+}
+const qe = ({ text: r, className: e, size: t = "lg", initialCopied: o = !1, navigator_: a = globalThis.navigator, ...l }) => {
+  const [d, i] = It(o), s = P(
+    () => a.clipboard.writeText(r).then(i),
+    [a.clipboard, r, i]
   );
   return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: y(
-        "tw:focus-ring tw:rounded-sm",
+      className: f(
+        "tw:focus-ring tw:rounded-sm tw:cursor-pointer",
         {
-          "tw:text-md": e === "sm",
-          "tw:text-lg": e === "md",
-          "tw:text-xl": e === "lg"
+          "tw:text-md": t === "sm",
+          "tw:text-lg": t === "md",
+          "tw:text-xl": t === "lg"
         },
-        r
+        e
       ),
-      "aria-label": `Copy ${t} to clipboard`,
+      "aria-label": `Copy ${r} to clipboard`,
       title: "Copy to clipboard",
-      onClick: i,
-      ...d,
-      children: /* @__PURE__ */ n(v, { icon: l ? wt : kt, fixedWidth: !0 })
+      onClick: s,
+      ...l,
+      children: /* @__PURE__ */ n(v, { icon: d ? kt : Et, fixedWidth: !0 })
     }
   );
 };
 export {
-  _t as Button,
-  N as Card,
-  he as CardModal,
-  se as Checkbox,
-  Q as CloseButton,
-  ve as CopyToClipboardButton,
-  le as Details,
-  _ as ELLIPSIS,
-  W as Input,
-  U as Label,
-  ie as LabelledInput,
-  we as LabelledRevealablePasswordInput,
-  ce as LabelledSelect,
-  Ot as LinkButton,
-  Pt as Listbox,
-  fe as Message,
-  Qt as ModalDialog,
-  ge as NavPills,
-  ue as Paginator,
-  xe as Result,
-  Dt as RevealablePasswordInput,
-  me as SearchCombobox,
-  Ht as SearchInput,
-  $t as Select,
-  It as SimpleCard,
-  de as Table,
-  be as ToggleSwitch,
-  ke as Tooltip,
-  Wt as formatNumber,
-  qt as keyForPage,
-  B as pageIsEllipsis,
-  zt as prettifyPageNumber,
-  Kt as progressivePagination,
-  pe as roundTen,
-  ye as useTooltip
+  Jt as Button,
+  C as Card,
+  $e as CardModal,
+  Le as Checkbox,
+  et as CloseButton,
+  qe as CopyToClipboardButton,
+  Oe as Details,
+  I as Dropdown,
+  U as ELLIPSIS,
+  J as Input,
+  Q as Label,
+  Me as LabelledInput,
+  Be as LabelledRevealablePasswordInput,
+  Re as LabelledSelect,
+  oe as LinkButton,
+  Ht as Listbox,
+  j as Menu,
+  He as Message,
+  ue as ModalDialog,
+  Se as NavPills,
+  ze as OrderingDropdown,
+  Ae as Paginator,
+  Ue as Result,
+  Qt as RevealablePasswordInput,
+  _e as RowDropdown,
+  Fe as SearchCombobox,
+  Yt as SearchInput,
+  Xt as Select,
+  $t as SimpleCard,
+  De as Table,
+  Ee as ToggleSwitch,
+  Ke as Tooltip,
+  ie as formatNumber,
+  me as keyForPage,
+  A as pageIsEllipsis,
+  we as prettifyPageNumber,
+  ce as progressivePagination,
+  je as roundTen,
+  We as useTooltip
 };