@shlinkio/shlink-frontend-kit 0.9.10 → 0.9.12

package/dist/tailwind.js

@@ -1,27 +1,27 @@
-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 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 { jsxs as m, jsx as n, Fragment as H } from "react/jsx-runtime";
+import c, { clsx as p } from "clsx";
+import { useRef as O, useState as E, useEffect as B, forwardRef as v, useCallback as I, createContext as Q, useContext as S, useId as W, useImperativeHandle as ht, useMemo as G } from "react";
+import { Link as q, useLocation as ft, NavLink as xt } from "react-router";
+import { faClose as yt, faEyeSlash as kt, faEye as vt, faCircleNotch as lt, faSearch as Nt, faCaretDown as Ct, faChevronUp as It, faChevronDown as Ot, faChevronLeft as et, faChevronRight as rt, faEllipsisV as Rt, faSortAmountUp as Pt, faSortAmountDown as Lt, faCheck as Dt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as C } from "@fortawesome/react-fontawesome";
+import { u as it, b as St, i as Mt, a as Bt, e as Et, c as At } from "./ordering-pAYMfJPl.js";
+import { useFloating as st, flip as Tt, offset as _t, useClick as $t, useInteractions as dt, autoPlacement as jt, arrow as Ft, useHover as Ht, useTransitionStyles as Wt } from "@floating-ui/react";
+import { createPortal as Ut } 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);
+import { faClone as Kt } from "@fortawesome/free-regular-svg-icons";
+const Ke = ({ children: r, summary: e, summaryClasses: t, ...o }) => {
+  const l = O(null), [a, i] = E(!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 })
+    const s = l.current, d = () => i(!!(s != null && s.open));
+    return s == null || s.addEventListener("toggle", d), () => s == null ? void 0 : s.removeEventListener("toggle", d);
+  }, []), /* @__PURE__ */ m("details", { ref: l, ...o, children: [
+    /* @__PURE__ */ n("summary", { className: p("tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm", t), children: e }),
+    a && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: r })
   ] });
-}, St = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+}, Gt = v(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: c(
       "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",
       r
@@ -29,10 +29,10 @@ const Oe = ({ children: r, summary: e, summaryClasses: t, ...o }) => {
     ...e,
     ref: t
   }
-)), jt = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+)), qt = v(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: c(
       "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",
       r
@@ -40,10 +40,10 @@ const Oe = ({ children: r, summary: e, summaryClasses: t, ...o }) => {
     ...e,
     ref: t
   }
-)), At = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+)), Xt = v(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: c(
       "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",
       r
@@ -51,10 +51,10 @@ const Oe = ({ children: r, summary: e, summaryClasses: t, ...o }) => {
     ...e,
     ref: t
   }
-)), _t = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+)), Jt = v(({ className: r, ...e }, t) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: c(
       "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",
       r
@@ -62,129 +62,129 @@ const Oe = ({ children: r, summary: e, summaryClasses: t, ...o }) => {
     ...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 : {
+)), P = Object.assign(Jt, { Body: qt, Header: Gt, Footer: Xt }), Qt = v(({ bodyClassName: r, children: e, ...t }, o) => {
+  const { title: l, titleSize: a = "md", ...i } = "title" in t ? t : {
     ...t,
     title: void 0,
     titleSize: void 0
   };
-  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 })
+  return /* @__PURE__ */ m(P, { ...i, ref: o, children: [
+    l && /* @__PURE__ */ m(P.Header, { children: [
+      a === "lg" && /* @__PURE__ */ n("h4", { children: l }),
+      a === "md" && /* @__PURE__ */ n("h5", { children: l }),
+      a === "sm" && /* @__PURE__ */ n("h6", { children: l })
     ] }),
-    /* @__PURE__ */ n(C.Body, { className: r, children: e })
+    /* @__PURE__ */ n(P.Body, { className: r, children: e })
   ] });
 });
-function Ht({
+function Yt({
   id: r,
   items: e,
   onSelectItem: t,
   onActiveItemChange: o,
-  renderItem: a,
-  className: l,
-  noItemsMessage: d = "No items",
-  anchor: i,
-  "aria-label": s = "Items",
-  ...c
+  renderItem: l,
+  className: a,
+  noItemsMessage: i = "No items",
+  anchor: s,
+  "aria-label": d = "Items",
+  ...w
 }) {
-  const [m, b] = R(0), u = P((x) => {
-    if (b(x), o) {
-      const [g, h] = [...e.entries()][x];
-      o(g, h);
+  const [f, x] = E(0), g = I((k) => {
+    if (x(k), o) {
+      const [y, u] = [...e.entries()][k];
+      o(y, u);
     }
   }, [e, o]);
   return B(() => {
-    const x = i == null ? void 0 : i.current;
-    if (!x)
+    const k = s == null ? void 0 : s.current;
+    if (!k)
       return;
-    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]);
+    const y = (u) => {
+      ["Enter", "ArrowUp", "ArrowDown"].includes(u.key) && u.preventDefault(), u.key === "ArrowDown" ? g(Math.min(f + 1, e.size - 1)) : u.key === "ArrowUp" ? g(Math.max(f - 1, 0)) : u.key === "Enter" && t([...e.values()][f]);
     };
-    return x.addEventListener("keydown", g), () => x.removeEventListener("keydown", g);
-  }, [m, i, u, e, t]), /* @__PURE__ */ p(
-    C,
+    return k.addEventListener("keydown", y), () => k.removeEventListener("keydown", y);
+  }, [f, s, g, e, t]), /* @__PURE__ */ m(
+    P,
     {
       id: r,
-      className: w("tw:py-1 tw:flex tw:flex-col", l),
+      className: c("tw:py-1 tw:flex tw:flex-col", a),
       role: "listbox",
       "aria-orientation": "vertical",
-      "aria-label": s,
-      ...c,
+      "aria-label": d,
+      ...w,
       children: [
-        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(
+        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: i }),
+        [...e.entries()].map(([k, y], u) => /* @__PURE__ */ n(
           "button",
           {
-            id: `${r}_${x}`,
+            id: `${r}_${k}`,
             type: "button",
             role: "option",
-            "aria-selected": h === m,
-            className: w(
+            "aria-selected": u === f,
+            className: c(
               "tw:px-2 tw:py-1 tw:text-left tw:truncate",
-              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === m }
+              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": u === f }
             ),
             tabIndex: -1,
-            onClick: () => t(g),
-            onMouseOver: () => u(h),
-            children: a(g)
+            onClick: () => t(y),
+            onMouseOver: () => g(u),
+            children: l(y)
           },
-          x
+          k
         ))
       ]
     }
   );
 }
-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(
+const U = Q(void 0), T = Q({ responsive: !0, size: "md" }), Zt = ({ children: r, className: e }) => {
+  const { responsive: t } = S(T);
+  return /* @__PURE__ */ n(U.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
-      className: w(
+      className: c(
         { "tw:hidden tw:lg:table-header-group": t },
         e
       ),
       children: r
     }
   ) });
-}, Wt = ({ children: r, className: e }) => {
-  const { responsive: t } = O(F);
-  return /* @__PURE__ */ n(H.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+}, zt = ({ children: r, className: e }) => {
+  const { responsive: t } = S(T);
+  return /* @__PURE__ */ n(U.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
-      className: w(
+      className: c(
         { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": t },
         e
       ),
       children: r
     }
   ) });
-}, Kt = ({ children: r, className: e }) => {
-  const { responsive: t } = O(F);
-  return /* @__PURE__ */ n(H.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+}, Vt = ({ children: r, className: e }) => {
+  const { responsive: t } = S(T);
+  return /* @__PURE__ */ n(U.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
-      className: w(
+      className: c(
         { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": t },
         e
       ),
       children: r
     }
   ) });
-}, zt = ({ children: r, className: e, ...t }) => {
-  const o = O(H), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = O(F);
+}, te = ({ children: r, className: e, ...t }) => {
+  const o = S(U), l = (o == null ? void 0 : o.section) === "body", { responsive: a } = S(T);
   return /* @__PURE__ */ n(
     "tr",
     {
-      className: w(
+      className: c(
         "tw:group",
         {
-          "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,
+          "tw:lg:table-row tw:flex tw:flex-col": a,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": a,
+          "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": l,
           // 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
+          "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": l
         },
         e
       ),
@@ -192,53 +192,53 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
       children: r
     }
   );
-}, 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);
+}, ee = ({ children: r, className: e, columnName: t, type: o, ...l }) => {
+  const a = S(U), i = o ?? ((a == null ? void 0 : a.section) !== "body" ? "th" : "td"), { responsive: s, size: d } = S(T);
   return /* @__PURE__ */ n(
-    d,
+    i,
     {
-      "data-column": i ? t : void 0,
-      className: w(
+      "data-column": s ? t : void 0,
+      className: c(
         "tw:border-lm-border tw:dark:border-dm-border",
         {
-          "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",
+          "tw:p-1": d === "sm",
+          "tw:p-2": d === "md",
+          "tw:p-3": d === "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:text-left": i === "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": i && d === "td"
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && i === "td"
         },
         e
       ),
-      ...a,
+      ...l,
       children: r
     }
   );
-}, 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(({
+}, re = ({ header: r, footer: e, children: t, responsive: o = !0, size: l = "md", ...a }) => /* @__PURE__ */ n(T.Provider, { value: { responsive: o, size: l }, children: /* @__PURE__ */ m("table", { className: "tw:w-full", ...a, children: [
+  /* @__PURE__ */ n(Zt, { children: r }),
+  /* @__PURE__ */ n(zt, { children: t }),
+  e && /* @__PURE__ */ n(Vt, { children: e })
+] }) }), Ge = Object.assign(re, { Row: te, Cell: ee }), wt = v(({
   className: r,
   disabled: e,
   variant: t = "primary",
   size: o = "md",
-  inline: a = !1,
-  solid: l = !1,
-  type: d = "button",
-  ...i
-}, s) => {
-  const c = "to" in i, m = c ? G : "button", b = c ? void 0 : d;
+  inline: l = !1,
+  solid: a = !1,
+  type: i = "button",
+  ...s
+}, d) => {
+  const w = "to" in s && typeof s.to == "string", f = w ? q : "button", x = w ? void 0 : i;
   return /* @__PURE__ */ n(
-    m,
+    f,
     {
-      ref: s,
-      className: w(
+      ref: d,
+      className: c(
         {
-          "tw:inline-flex": a,
-          "tw:flex": !a
+          "tw:inline-flex": l,
+          "tw:flex": !l
         },
         "tw:gap-2 tw:items-center tw:justify-center",
         "tw:border tw:rounded-md tw:no-underline",
@@ -255,13 +255,13 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
         },
         {
           "tw:border-lm-brand tw:dark:border-dm-brand": t === "primary",
-          "tw:text-lm-brand tw:dark:text-dm-brand": t === "primary" && !l,
+          "tw:text-lm-brand tw:dark:text-dm-brand": t === "primary" && !a,
           "tw:border-zinc-500": t === "secondary",
-          "tw:text-zinc-500": t === "secondary" && !l,
+          "tw:text-zinc-500": t === "secondary" && !a,
           "tw:border-danger": t === "danger",
-          "tw:text-danger": t === "danger" && !l
+          "tw:text-danger": t === "danger" && !a
         },
-        l && {
+        a && {
           "tw:text-white": !0,
           "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",
@@ -272,7 +272,7 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
           "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": t === "danger"
         },
         !e && {
-          "tw:highlight:text-white": !l,
+          "tw:highlight:text-white": !a,
           "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"
@@ -283,20 +283,20 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
         },
         r
       ),
-      disabled: c ? void 0 : e,
-      "aria-disabled": c ? e : void 0,
-      type: b,
-      ...i
+      disabled: w ? void 0 : e,
+      "aria-disabled": w ? e : void 0,
+      type: x,
+      ...s
     }
   );
-}), lt = y(({ className: r, onChange: e, ...t }, o) => {
-  const a = P((l) => e == null ? void 0 : e(l.target.checked, l), [e]);
+}), ct = v(({ className: r, onChange: e, ...t }, o) => {
+  const l = I((a) => e == null ? void 0 : e(a.target.checked, a), [e]);
   return /* @__PURE__ */ n(
     "input",
     {
       ref: o,
       type: "checkbox",
-      className: f(
+      className: p(
         "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",
@@ -304,71 +304,73 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
         "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input",
         r
       ),
-      onChange: a,
+      onChange: l,
       ...t
     }
   );
-}), Le = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
-  lt,
+}), qe = v(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+  ct,
   {
     ref: t,
-    className: f("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", r),
+    className: p("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", r),
     ...e
   }
-)), et = y(({ onClick: r, className: e, label: t = "Close" }, o) => /* @__PURE__ */ n(
+)), X = v(({ onClick: r, className: e, label: t = "Close", size: o = "lg", solid: l }, a) => /* @__PURE__ */ n(
   "button",
   {
-    ref: o,
+    ref: a,
     type: "button",
     onClick: r,
-    className: w(
-      "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
+    className: c(
       "tw:rounded-md tw:focus-ring tw:cursor-pointer",
+      {
+        "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity": !l
+      },
       e
     ),
     "aria-label": t,
-    children: /* @__PURE__ */ n(v, { icon: pt, size: "xl" })
+    children: /* @__PURE__ */ n(C, { icon: yt, size: o === "lg" ? "xl" : o === "md" ? "lg" : void 0 })
   }
-)), J = y(({
+)), Y = v(({
   borderless: r = !1,
   size: e = "md",
   feedback: t,
-  className: o,
+  variant: o = "default",
+  className: l,
   disabled: a,
-  ...l
-}, d) => /* @__PURE__ */ n(
+  ...i
+}, s) => /* @__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
+    ref: s,
+    className: c(
+      "tw:outline-none",
+      o === "default" && [
+        "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
+        }
+      ],
+      l
     ),
     disabled: a,
-    ...l
+    ...i
   }
-)), Q = ({ required: r, children: e, className: t, ...o }) => /* @__PURE__ */ p("label", { className: f("tw:cursor-pointer", t), ...o, children: [
+)), Z = ({ required: r, children: e, className: t, ...o }) => /* @__PURE__ */ m("label", { className: p("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: [
+] }), z = ({ children: r, helpText: e, error: t, "data-testid": o }) => /* @__PURE__ */ m("div", { className: "tw:flex tw:flex-col tw:gap-1", "data-testid": o, children: [
   r,
   e && /* @__PURE__ */ n(
     "small",
@@ -379,40 +381,40 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
     }
   ),
   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 }),
+] }), Xe = v(({ label: r, inputClassName: e, required: t, hiddenRequired: o, error: l, helpText: a, "data-testid": i, ...s }, d) => {
+  const w = W();
+  return /* @__PURE__ */ m(z, { error: l, helpText: a, "data-testid": i, children: [
+    /* @__PURE__ */ n(Z, { htmlFor: w, required: t, children: r }),
     /* @__PURE__ */ n(
-      J,
+      Y,
       {
-        ref: s,
-        id: c,
+        ref: d,
+        id: w,
         className: e,
         required: t || o,
-        feedback: a ? "error" : void 0,
-        ...i
+        feedback: l ? "error" : void 0,
+        ...s
       }
     )
   ] });
-}), 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(
+}), ne = v(({ containerClassName: r, className: e, size: t, ...o }, l) => {
+  const [a, i, , s] = it(!1), d = O(null), w = I(({ relatedTarget: f }) => {
+    var x;
+    (x = d.current) != null && x.contains(f) || s();
+  }, [d, s]);
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: f("tw:group tw:relative", r),
-      ref: s,
-      onBlurCapture: c,
+      className: p("tw:group tw:relative", r),
+      ref: d,
+      onBlurCapture: w,
       children: [
         /* @__PURE__ */ n(
-          J,
+          Y,
           {
-            ref: a,
-            type: l ? "text" : "password",
-            className: f(
+            ref: l,
+            type: a ? "text" : "password",
+            className: p(
               {
                 "tw:pr-10": t !== "sm",
                 "tw:pr-8": t === "sm"
@@ -428,10 +430,10 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
           "button",
           {
             type: "button",
-            onClick: d,
-            title: l ? "Hide password" : "Show password",
-            "aria-label": l ? "Hide password" : "Show password",
-            className: f(
+            onClick: i,
+            title: a ? "Hide password" : "Show password",
+            "aria-label": a ? "Hide password" : "Show password",
+            className: p(
               "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",
               {
@@ -440,40 +442,40 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
               }
             ),
             tabIndex: -1,
-            children: /* @__PURE__ */ n(v, { fixedWidth: !0, icon: l ? gt : bt })
+            children: /* @__PURE__ */ n(C, { fixedWidth: !0, icon: a ? kt : vt })
           }
         )
       ]
     }
   );
-}), 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 }),
+}), Je = v(({ label: r, inputClassName: e, required: t, hiddenRequired: o, error: l, helpText: a, "data-testid": i, ...s }, d) => {
+  const w = W();
+  return /* @__PURE__ */ m(z, { error: l, helpText: a, "data-testid": i, children: [
+    /* @__PURE__ */ n(Z, { htmlFor: w, required: t, children: r }),
     /* @__PURE__ */ n(
-      Qt,
+      ne,
       {
-        ref: s,
-        id: c,
+        ref: d,
+        id: w,
         className: e,
         required: t || o,
-        feedback: a ? "error" : void 0,
-        ...i
+        feedback: l ? "error" : void 0,
+        ...s
       }
     )
   ] });
-}), Xt = y(({
+}), oe = v(({
   className: r,
   size: e = "md",
   feedback: t,
   style: o = {},
-  disabled: a,
-  ...l
-}, d) => /* @__PURE__ */ n(
+  disabled: l,
+  ...a
+}, i) => /* @__PURE__ */ n(
   "select",
   {
-    ref: d,
-    className: w(
+    ref: i,
+    className: c(
       "tw:w-full tw:appearance-none tw:pr-9",
       "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
       {
@@ -489,9 +491,9 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
         "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,
+        "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": l,
         // 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
+        "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !l
       },
       r
     ),
@@ -499,44 +501,46 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
       ...o,
       background: "right 0.75rem center / 16px 12px"
     },
-    disabled: a,
-    ...l
+    disabled: l,
+    ...a
   }
-)), 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 }),
+)), Qe = v(({ selectClassName: r, label: e, error: t, helpText: o, required: l, hiddenRequired: a, "data-testid": i, ...s }, d) => {
+  const w = W();
+  return /* @__PURE__ */ m(z, { error: t, helpText: o, "data-testid": i, children: [
+    /* @__PURE__ */ n(Z, { htmlFor: w, required: l, children: e }),
     /* @__PURE__ */ n(
-      Xt,
+      oe,
       {
-        ref: s,
-        id: c,
+        ref: d,
+        id: w,
         className: r,
-        required: a || l,
+        required: l || a,
         feedback: t ? "error" : void 0,
-        ...i
+        ...s
       }
     )
   ] });
-}), Yt = y(({
+}), ae = v(({
   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,
-  ...l
+  loading: l = !1,
+  variant: a = "default",
+  immediate: i = !1,
+  ...s
 }, 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,
+  const { setTimeout: w, clearCurrentTimeout: f } = St(500), x = I((g) => {
+    !g || i ? (f(), r(g)) : w(() => r(g));
+  }, [f, i, r, w]);
+  return /* @__PURE__ */ m("div", { className: c("tw:group tw:relative tw:focus-within:z-10", e), children: [
+    a === "default" && /* @__PURE__ */ n(
+      C,
       {
-        icon: a ? nt : ut,
-        spin: a,
-        className: w(
+        icon: l ? lt : Nt,
+        spin: l,
+        className: c(
           "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
           "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
           {
@@ -547,84 +551,90 @@ const H = q(void 0), F = q({ responsive: !0, size: "md" }), Ut = ({ children: r,
       }
     ),
     /* @__PURE__ */ n(
-      J,
+      Y,
       {
         ref: d,
+        variant: a,
         type: "search",
-        className: w(
-          {
+        className: c(
+          a === "default" && {
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
           },
           t
         ),
         placeholder: "Search...",
-        onChange: (m) => c(m.target.value),
+        onChange: (g) => x(g.target.value),
         size: o,
-        ...l
+        ...s
       }
     )
   ] });
 });
-function Fe({
+function le({
   searchResults: r,
   onSearch: e,
   onSelectSearchResult: t,
   renderSearchResult: o,
-  size: a = "md",
+  size: l = "md",
   // SearchInput defaults its size to 'lg'. Change it to 'md'
-  listboxSpan: l = "full",
-  onFocus: d,
-  ...i
-}) {
-  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(
+  listboxSpan: a = "full",
+  onFocus: i,
+  containerClassName: s,
+  listboxClassName: d,
+  ...w
+}, f) {
+  const x = W(), [g, k] = E(), y = O(null);
+  ht(f, () => y.current);
+  const u = G(
+    () => r ? g ?? [...r.keys()][0] : void 0,
+    [g, r]
+  ), h = I((b) => {
+    t(b), e(""), y.current.value = "";
+  }, [e, t, y]);
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: "tw:relative",
-      onBlur: (g) => {
-        g.currentTarget.contains(g.relatedTarget) || e("");
+      className: c("tw:relative", s),
+      onBlur: (b) => {
+        b.currentTarget.contains(b.relatedTarget) || e("");
       },
       children: [
         /* @__PURE__ */ n(
-          Yt,
+          ae,
           {
             onChange: e,
-            size: a,
-            ref: s,
+            size: l,
+            ref: y,
             role: "combobox",
             "aria-autocomplete": "list",
             "aria-expanded": !!r,
-            "aria-controls": c,
-            "aria-activedescendant": u ? `${c}_${u}` : void 0,
+            "aria-controls": x,
+            "aria-activedescendant": u ? `${x}_${u}` : void 0,
             autoComplete: "off",
             autoCorrect: "off",
-            onFocus: (g) => {
-              d == null || d(g), e(g.target.value);
+            onFocus: (b) => {
+              i == null || i(b), e(b.target.value);
             },
-            ...i
+            ...w
           }
         ),
         r && /* @__PURE__ */ n(
-          Ht,
+          Yt,
           {
-            id: c,
+            id: x,
             items: r,
-            anchor: s,
-            onSelectItem: x,
-            onActiveItemChange: b,
+            anchor: y,
+            onSelectItem: h,
+            onActiveItemChange: k,
             renderItem: o,
-            className: w(
+            className: c(
               "tw:absolute tw:top-full tw:mt-1 tw:z-10",
               {
-                "tw:min-w-60 tw:max-w-full": l === "auto",
-                "tw:w-full": l === "full"
-              }
+                "tw:min-w-60": a === "auto",
+                "tw:w-full": a === "full"
+              },
+              d
             ),
             "aria-label": "Matching items",
             noItemsMessage: "No results found matching search"
@@ -634,11 +644,132 @@ function Fe({
     }
   );
 }
-const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
-  lt,
+const ie = v(le), se = ({ name: r, color: e }) => /* @__PURE__ */ m("div", { className: "tw:inline-flex tw:items-center tw:gap-2", children: [
+  /* @__PURE__ */ n("div", { "aria-hidden": !0, className: "tw:w-4 tw:h-4 tw:rounded-full", style: { backgroundColor: e } }),
+  r
+] }), de = ({ tag: r, color: e, size: t, onRemove: o }) => (
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+  /* @__PURE__ */ m(
+    "li",
+    {
+      className: p(
+        "tw:inline-flex tw:items-center tw:gap-1 tw:font-bold tw:[&]:rounded-md",
+        {
+          "tw:px-1 tw:text-sm": t === "sm",
+          "tw:py-0.25 tw:px-1.5": t === "md",
+          "tw:py-0.5 tw:px-1.5": t === "lg"
+        }
+      ),
+      style: {
+        backgroundColor: e,
+        color: Mt(e) ? "#000" : "#fff"
+      },
+      onClick: (l) => l.stopPropagation(),
+      children: [
+        r,
+        /* @__PURE__ */ n(X, { label: `Remove ${r}`, solid: !0, size: "sm", onClick: () => o(r) })
+      ]
+    }
+  )
+), we = /\s+/g, nt = "#99a1af", ot = (r) => r.trim().toLowerCase().replace(we, "-"), Ye = ({
+  tags: r,
+  selectedTags: e = [],
+  onTagsChange: t,
+  getColorForTag: o,
+  searchMode: l = "startsWith",
+  immutable: a = !1,
+  size: i = "md",
+  disabled: s,
+  containerClassName: d,
+  ...w
+}) => {
+  const [f, x] = E(), g = I((h) => {
+    const b = h.toLowerCase().trim();
+    if (!b) {
+      x(void 0);
+      return;
+    }
+    const R = r.filter((N) => {
+      if (e.includes(N))
+        return !1;
+      const M = N.toLowerCase();
+      return l === "startsWith" ? M.startsWith(b) : M.includes(b);
+    }).slice(0, 5);
+    a || R.push(`Add "${b.split(",").map(ot).join(",")}" tag`), x(new Map(R.map((N) => [N, N])));
+  }, [a, l, e, r]), k = I((h) => {
+    const b = h.match(/Add\s+"([^"]+)"\s+tag/), R = ((b == null ? void 0 : b[1]) ?? h).split(",").map(ot);
+    t == null || t([.../* @__PURE__ */ new Set([...e, ...R])]);
+  }, [t, e]), y = I(
+    (h) => t == null ? void 0 : t(e.filter((b) => b !== h)),
+    [t, e]
+  ), u = O(null);
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: p(
+          "tw:rounded-md tw:flex tw:flex-wrap tw:gap-1",
+          "tw:border tw:border-lm-input-border tw:dark:border-dm-input-border",
+          "tw:cursor-text tw:focus-within:focus-within-ring",
+          {
+            "tw:p-0.5": i === "sm",
+            "tw:p-1.25": i === "md",
+            "tw:p-2": i === "lg",
+            "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": s,
+            "tw:bg-lm-primary tw:dark:bg-dm-primary": !s,
+            // Use different background color when rendered inside a card
+            "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !s
+          },
+          d
+        ),
+        onClick: (h) => {
+          var b;
+          h.target !== u.current && ((b = u.current) == null || b.focus());
+        },
+        children: [
+          /* @__PURE__ */ n("ul", { className: "tw:m-0 tw:p-0 tw:flex tw:flex-wrap tw:gap-1", children: e.map((h, b) => {
+            const R = (o == null ? void 0 : o(h)) ?? nt;
+            return /* @__PURE__ */ n(de, { tag: h, color: R, onRemove: y, size: i }, `${h}${b}`);
+          }) }),
+          /* @__PURE__ */ n(
+            ie,
+            {
+              variant: "unstyled",
+              listboxSpan: "auto",
+              containerClassName: "tw:flex tw:items-center",
+              listboxClassName: "tw:whitespace-nowrap",
+              inputClassName: p(
+                "tw:no-clear-button",
+                {
+                  "tw:px-1 tw:text-sm": i === "sm",
+                  "tw:px-2 tw:h-[26px]": i === "md",
+                  "tw:px-3 tw:text-xl": i === "lg"
+                }
+              ),
+              searchResults: f,
+              onSearch: g,
+              onSelectSearchResult: k,
+              renderSearchResult: (h) => h.match(/Add\s+"([^"]+)"\s+tag/) ? h : /* @__PURE__ */ n(se, { name: h, color: (o == null ? void 0 : o(h)) ?? nt }),
+              onKeyDown: (h) => {
+                h.key === "Backspace" && !f && y(e[e.length - 1]);
+              },
+              size: i,
+              disabled: s,
+              ref: u,
+              immediate: !0,
+              ...w
+            }
+          )
+        ]
+      }
+    )
+  );
+}, Ze = v(({ className: r, ...e }, t) => /* @__PURE__ */ n(
+  ct,
   {
     ref: t,
-    className: f(
+    className: p(
       "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)",
@@ -647,17 +778,18 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
     ),
     ...e
   }
-)), Zt = ({ className: r, selected: e, disabled: t, ...o }) => {
-  const a = "to" in o;
+)), ce = ({ className: r, selected: e, disabled: t, ...o }) => {
+  const l = "to" in o && typeof o.to == "string";
   return (
     // @ts-expect-error The Tag is inferred from provided props, so they should always match
     /* @__PURE__ */ n(
-      a ? G : "button",
+      l ? q : "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",
+        className: p(
+          "tw:flex tw:items-center tw:gap-2",
+          "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",
           {
@@ -669,111 +801,112 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
           r
         ),
         tabIndex: -1,
-        disabled: a ? void 0 : t,
-        "aria-disabled": a ? t : void 0,
+        disabled: l ? void 0 : t,
+        "aria-disabled": l ? t : void 0,
         ...o
       }
     )
   );
-}, Vt = () => (
+}, me = () => (
   // 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(
+), pe = ({ children: r }) => /* @__PURE__ */ n(
   "div",
   {
     role: "heading",
     "aria-level": 6,
     "aria-hidden": !0,
-    className: f(
+    className: p(
       "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 }) => (
+), ue = ({ 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),
+      className: p("tw:px-3 tw:py-1.5", r),
       ...t,
       onClick: (o) => {
         o.stopPropagation(), e == null || e(o);
       }
     }
   )
-), re = ({
+), be = ({
   children: r,
   className: e,
   focusableElementsSelector: t = '[role="menuitem"]:not([disabled]):not([aria-disabled])',
   focusFirstItem: o = !1,
-  ...a
+  ...l
 }) => {
-  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 = ({
+  const a = O(null);
+  return Bt(a, { elementsSelector: t, focusFirstItem: o }), /* @__PURE__ */ n(P, { ref: a, role: "menu", className: p("tw:py-2 tw:whitespace-nowrap", e), ...l, children: r });
+}, j = Object.assign(be, { Item: ce, Separator: me, Title: pe, Misc: ue }), ge = ({
   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
+  buttonClassName: l,
+  buttonSize: a = "md",
+  buttonDisabled: i = !1,
+  containerClassName: s,
+  menuClassName: d,
+  caretless: w,
+  buttonLabel: f,
+  menuOffset: x = 3
 }) => {
-  const [b, u] = R(!1), x = T(null), { refs: g, floatingStyles: h, context: D } = ot({
-    open: b,
-    onOpenChange: u,
+  const [g, k] = E(!1), y = O(null), { refs: u, floatingStyles: h, context: b } = st({
+    open: g,
+    onOpenChange: k,
     placement: e === "right" ? "bottom-end" : "bottom-start",
-    middleware: [Pt(), Ot(3)],
+    middleware: [Tt(), _t(x)],
     // 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);
+    elements: { reference: y.current }
+  }), R = $t(b), { getReferenceProps: N, getFloatingProps: M } = dt([
+    R
+  ]), _ = W(), $ = O(null);
   return B(() => {
-    const N = L.current, Y = x.current;
-    if (!N || !Y)
+    const D = $.current, V = y.current;
+    if (!D || !V)
       return () => {
       };
-    const Z = new AbortController();
-    return document.body.addEventListener("click", (wt) => {
-      wt.composedPath().includes(Y) || u(!1);
-    }, { signal: Z.signal }), () => Z.abort();
+    const tt = new AbortController();
+    return document.body.addEventListener("click", (gt) => {
+      gt.composedPath().includes(V) || k(!1);
+    }, { signal: tt.signal }), () => tt.abort();
   }, []), // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  /* @__PURE__ */ p(
+  /* @__PURE__ */ m(
     "div",
     {
-      ref: L,
-      className: f("tw:relative tw:inline-block", i),
-      onKeyDown: (N) => {
-        N.key === "Escape" && u(!1);
+      ref: $,
+      className: p("tw:relative tw:inline-block", s),
+      onKeyDown: (D) => {
+        D.key === "Escape" && k(!1);
       },
-      onBlur: (N) => {
-        N.relatedTarget && !L.current.contains(N.relatedTarget) && u(!1);
+      onBlur: (D) => {
+        D.relatedTarget && !$.current.contains(D.relatedTarget) && k(!1);
       },
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ m(
           "button",
           {
-            ref: x,
-            ...K(),
+            ref: y,
+            ...N(),
             type: "button",
             "aria-haspopup": !0,
-            "aria-expanded": b,
-            "aria-controls": S,
-            "aria-label": m,
-            disabled: d,
-            className: f(
+            "aria-expanded": g,
+            "aria-controls": _,
+            "aria-label": f,
+            disabled: i,
+            className: p(
               "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,
+                "tw:justify-between": !w,
+                "tw:cursor-pointer": !i,
+                "tw:pointer-events-none tw:opacity-50": i,
                 // 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",
@@ -783,33 +916,35 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
                 "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"
+                "tw:px-1.5 tw:py-1 tw:text-sm": t !== "text" && a === "sm",
+                "tw:px-3 tw:py-1.5": t !== "text" && a === "md",
+                "tw:px-4 tw:py-2 tw:text-lg": t !== "text" && a === "lg",
+                "tw:gap-x-1.5": a === "sm",
+                "tw:gap-x-2": a !== "sm"
               },
-              a
+              l
             ),
-            onKeyDown: (N) => {
-              N.key === "ArrowDown" && (N.preventDefault(), u(!0));
+            onKeyDown: (D) => {
+              D.key === "ArrowDown" && (D.preventDefault(), k(!0));
             },
             children: [
               o,
-              !c && /* @__PURE__ */ n(v, { icon: ht, size: "xs" })
+              !w && /* @__PURE__ */ n(C, { icon: Ct, size: "xs" })
             ]
           }
         ),
-        b && /* @__PURE__ */ n(
+        g && /* @__PURE__ */ n(
           "div",
           {
-            ref: g.setFloating,
+            ref: u.setFloating,
             style: h,
-            className: "tw:min-w-full tw:z-1000",
-            ...k(),
+            className: "tw:min-w-full tw:z-500",
+            ...M(),
             children: /* @__PURE__ */ n(
               j,
               {
-                className: s,
-                id: S,
+                className: d,
+                id: _,
                 focusableElementsSelector: '[role="menuitem"]:not([disabled]):not([aria-disabled]),input:not([disabled]),select:not([disabled])',
                 focusFirstItem: !0,
                 children: r
@@ -820,15 +955,15 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
       ]
     }
   );
-}, I = Object.assign(ne, {
+}, L = Object.assign(ge, {
   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(
+}), he = v(({ className: r, disabled: e, size: t = "md", type: o = "button", ...l }, a) => /* @__PURE__ */ n(
   "button",
   {
-    className: w(
+    className: c(
       "tw:inline-flex tw:rounded-md tw:focus-ring",
       "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",
@@ -843,26 +978,117 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
     ),
     disabled: e,
     type: o,
-    ...a,
-    ref: l
+    ...l,
+    ref: a
+  }
+)), fe = ({ className: r, active: e, ...t }) => /* @__PURE__ */ n("li", { role: "menuitem", className: "tw:w-full tw:flex", children: /* @__PURE__ */ n(
+  q,
+  {
+    className: p(
+      "tw:px-2 tw:py-3",
+      "tw:max-md:w-full tw:max-md:px-3 tw:max-md:py-2",
+      "tw:text-white tw:no-underline tw:highlight:opacity-100 tw:transition-opacity",
+      {
+        "tw:opacity-60": !e,
+        "tw:opacity-100": e
+      },
+      r
+    ),
+    ...t
   }
-)), dt = q(null), ae = ({ className: r, to: e, ...t }) => {
-  const o = O(dt);
+) }), xe = ({ containerClassName: r, buttonClassName: e, menuClassName: t, active: o, ...l }) => /* @__PURE__ */ n("li", { role: "menuitem", className: "tw:w-full tw:flex", children: /* @__PURE__ */ n(
+  L,
+  {
+    containerClassName: p("tw:max-md:w-full", r),
+    buttonVariant: "text",
+    buttonClassName: p(
+      "tw:px-2 tw:py-3",
+      "tw:max-md:w-full tw:max-md:px-3 tw:max-md:py-2",
+      "tw:text-white tw:highlight:opacity-100 tw:transition-opacity",
+      {
+        "tw:opacity-60": !o,
+        "tw:opacity-100": o
+      },
+      e
+    ),
+    menuAlignment: "right",
+    menuOffset: -3,
+    menuClassName: p("tw:mx-2", t),
+    ...l
+  }
+) }), ye = ({ className: r, brand: e, children: t }) => {
+  const { flag: o, toggle: l, setToFalse: a } = it(!1, !0), { pathname: i } = ft();
+  return B(() => a(), [i, a]), /* @__PURE__ */ m(
+    "nav",
+    {
+      className: p(
+        "tw:w-full tw:relative",
+        "tw:bg-lm-main tw:dark:bg-dm-main",
+        "tw:flex tw:max-md:flex-col tw:items-center tw:justify-between",
+        r
+      ),
+      children: [
+        /* @__PURE__ */ m("div", { className: "tw:w-full tw:relative", children: [
+          /* @__PURE__ */ n(
+            "h4",
+            {
+              className: p(
+                "tw:text-white tw:px-4 tw:py-3",
+                "tw:max-md:w-full tw:max-md:flex tw:max-md:flex-col tw:items-center"
+              ),
+              children: e
+            }
+          ),
+          /* @__PURE__ */ n(
+            wt,
+            {
+              variant: "secondary",
+              className: p(
+                "tw:absolute tw:right-0 tw:top-[50%] tw:translate-y-[-50%]",
+                "tw:md:hidden tw:mx-2 tw:[&]:px-2",
+                "tw:opacity-60 tw:highlight:opacity-100 tw:transition-opacity",
+                "tw:[&]:text-inherit tw:[&]:border-white tw:[&]:highlight:bg-transparent"
+              ),
+              onClick: l,
+              "aria-label": `${o ? "Hide" : "Show"} menu`,
+              children: /* @__PURE__ */ n(C, { icon: o ? It : Ot })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          "ul",
+          {
+            role: "menu",
+            className: p(
+              "tw:m-0 tw:p-0",
+              "tw:max-md:w-full tw:md:mr-2 tw:max-md:absolute tw:max-md:top-full tw:z-2000",
+              "tw:flex tw:max-md:flex-col tw:items-center",
+              "tw:bg-lm-main tw:dark:bg-dm-main",
+              { "tw:max-md:hidden": !o }
+            ),
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}, ze = Object.assign(ye, { MenuItem: fe, Dropdown: xe }), mt = Q(null), ke = ({ className: r, to: e, ...t }) => {
+  const o = S(mt);
   return /* @__PURE__ */ n(
-    mt,
+    xt,
     {
       role: "menuitem",
       to: e,
-      className: ({ isActive: a }) => w(
+      className: ({ isActive: l }) => c(
         "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",
         "tw:font-bold tw:text-center tw:no-underline tw:transition-colors",
         "tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2",
         "tw:focus-visible:inset-ring-lm-brand/50 tw:dark:focus-visible:inset-ring-dm-brand/50",
         {
-          "tw:text-lm-brand tw:dark:text-dm-brand": a,
-          "tw:border-b-lm-brand tw:dark:border-b-dm-brand active": a,
-          "tw:border-b-transparent tw:text-gray-500": !a,
+          "tw:text-lm-brand tw:dark:text-dm-brand": l,
+          "tw:border-b-lm-brand tw:dark:border-b-dm-brand active": l,
+          "tw:border-b-transparent tw:text-gray-500": !l,
           "tw:flex-grow": o == null ? void 0 : o.fill
         },
         r
@@ -870,17 +1096,17 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
       ...t
     }
   );
-}, 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
+}, ve = ({ children: r, className: e, fill: t }) => /* @__PURE__ */ n(mt.Provider, { value: { fill: t }, children: /* @__PURE__ */ n(P, { role: "menubar", className: c("tw:flex tw:overflow-hidden", e), children: r }) }), Ve = Object.assign(ve, { Pill: ke }), Ne = new Intl.NumberFormat("en-US"), Ce = (r) => Ne.format(Number(r)), at = 10, tr = (r) => Math.ceil(r / at) * at, A = 2, K = "...", Ie = (r, e) => Array.from({ length: e - r }, (t, o) => r + o), Oe = (r, e) => {
+  const t = Ie(
+    Math.max(A, r - A),
+    Math.min(e - 1, r + A) + 1
   );
-  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 = [
+  return r - A > A && t.unshift(K), r + A < e - 1 && t.push(K), t.unshift(1), t.push(e), t;
+}, F = (r) => r === K, Re = (r) => F(r) ? r : Ce(r), Pe = (r, e) => F(r) ? `${r}_${e}` : `${r}`, pt = [
   "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"
-], st = (r = !1) => w(
-  it,
+], ut = (r = !1) => c(
+  pt,
   "tw:px-3 tw:py-2 tw:cursor-pointer tw:no-underline",
   "tw:focus-ring tw:focus-visible:z-1",
   !r && [
@@ -889,42 +1115,42 @@ const Ee = y(({ className: r, ...e }, t) => /* @__PURE__ */ n(
     "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary"
   ],
   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 });
+), J = ({ children: r }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: c(pt, "tw:px-3 tw:py-2 tw:text-gray-400"), children: r }), bt = () => /* @__PURE__ */ n(J, { children: K });
+function Le({ children: r, active: e, isEllipsis: t, href: o, ...l }) {
+  const a = G(() => ut(e), [e]);
+  return t ? /* @__PURE__ */ n(bt, {}) : /* @__PURE__ */ n(q, { className: a, to: o, ...l, children: r });
 }
-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 });
+function De({ children: r, active: e, isEllipsis: t, ...o }) {
+  const l = G(() => ut(e), [e]);
+  return t ? /* @__PURE__ */ n(bt, {}) : /* @__PURE__ */ n("button", { type: "button", className: l, ...o, children: r });
 }
-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) },
+const er = ({ currentPage: r, pagesCount: e, ...t }) => {
+  const o = "urlForPage" in t, l = o ? Le : De, a = I(
+    (i) => o ? { href: F(i) ? void 0 : t.urlForPage(i) } : { onClick: () => !F(i) && t.onPageChange(i) },
     [o, t]
   );
-  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,
+  return e < 2 ? null : /* @__PURE__ */ m("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    r === 1 ? /* @__PURE__ */ n(J, { children: /* @__PURE__ */ n(C, { size: "xs", icon: et }) }) : /* @__PURE__ */ n(l, { ...a(Math.max(1, r - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(C, { size: "xs", icon: et }) }),
+    Oe(r, e).map((i, s) => /* @__PURE__ */ n(
+      l,
       {
-        active: d === r,
-        isEllipsis: A(d),
-        ...l(d),
-        children: we(d)
+        active: i === r,
+        isEllipsis: F(i),
+        ...a(i),
+        children: Re(i)
       },
-      me(d, i)
+      Pe(i, s)
     )),
-    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 }) })
+    r === e ? /* @__PURE__ */ n(J, { children: /* @__PURE__ */ n(C, { size: "xs", icon: rt }) }) : /* @__PURE__ */ n(l, { ...a(Math.min(e, r + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(C, { size: "xs", icon: rt }) })
   ] });
-}, be = ({ buttonLabel: r = "Options", buttonSize: e = "md", ...t }) => /* @__PURE__ */ n(
-  I,
+}, Se = ({ buttonLabel: r = "Options", buttonSize: e = "md", ...t }) => /* @__PURE__ */ n(
+  L,
   {
     buttonContent: /* @__PURE__ */ n(
-      v,
+      C,
       {
-        icon: ft,
-        className: f({ "tw:px-1": e === "sm" })
+        icon: Rt,
+        className: p({ "tw:px-1": e === "sm" })
       }
     ),
     caretless: !0,
@@ -932,125 +1158,125 @@ const Ae = ({ currentPage: r, pagesCount: e, ...t }) => {
     buttonSize: e,
     ...t
   }
-), _e = Object.assign(be, {
-  Item: I.Item,
-  Separator: I.Separator,
-  Title: I.Title,
-  Misc: I.Misc
-}), ue = ({
+), rr = Object.assign(Se, {
+  Item: L.Item,
+  Separator: L.Separator,
+  Title: L.Title,
+  Misc: L.Misc
+}), Me = ({
   open: r,
   children: e,
   className: t,
   onClose: o,
-  ...a
+  ...l
 }) => {
-  const l = T(null);
+  const a = O(null);
   return B(() => {
-    var c, m;
-    const d = document.body, i = d.style.overflow, s = d.style.paddingRight;
+    var w, f;
+    const i = document.body, s = i.style.overflow, d = i.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();
+      const x = window.outerWidth - i.clientWidth, g = i.scrollHeight > i.clientHeight;
+      i.style.overflow = "hidden", g && (i.style.paddingRight = `${x}px`), (w = a.current) == null || w.showModal();
     } else
-      (m = l.current) == null || m.close();
+      (f = a.current) == null || f.close();
     return () => {
-      d.style.overflow = i, d.style.paddingRight = s;
+      i.style.overflow = s, i.style.paddingRight = d;
     };
-  }, [r]), Ft(
+  }, [r]), Ut(
     /* @__PURE__ */ n(
       "dialog",
       {
-        ref: l,
-        className: w("tw:bg-transparent tw:backdrop:bg-black/50", t),
-        onCancel: (d) => {
-          d.preventDefault(), o();
+        ref: a,
+        className: c("tw:bg-transparent tw:backdrop:bg-black/50", t),
+        onCancel: (i) => {
+          i.preventDefault(), o();
         },
-        ...a,
+        ...l,
         children: r && e
       }
     ),
     document.body
   );
-}, $e = ({
+}, nr = ({
   open: r,
   onClose: e,
   variant: t = "default",
   title: o,
-  children: a,
-  className: l,
-  ...d
+  children: l,
+  className: a,
+  ...i
 }) => {
   const {
-    size: i = "md",
-    confirmText: s = "Confirm",
-    cancelText: c = "Cancel",
-    confirmDisabled: m,
-    onConfirm: b,
-    onClosed: u,
-    ...x
-  } = "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]);
+    size: s = "md",
+    confirmText: d = "Confirm",
+    cancelText: w = "Cancel",
+    confirmDisabled: f,
+    onConfirm: x,
+    onClosed: g,
+    ...k
+  } = "onConfirm" in i ? i : { ...i }, [y, u] = E(r), h = O(null), b = O("cancel"), R = I((N) => {
+    N.preventDefault(), N.stopPropagation(), b.current = "confirm", x == null || x();
+  }, [x]);
   return B(() => {
     if (r) {
-      E.current = "cancel", h(!0);
+      b.current = "cancel", u(!0);
       return;
     }
-    const k = D.current;
-    if (k) {
-      delete D.current.dataset.open;
-      let S = !1;
-      const L = (N) => {
-        S || N.target !== k || (S = !0, h(!1), u == null || u(E.current));
+    const N = h.current;
+    if (N) {
+      delete h.current.dataset.open;
+      let M = !1;
+      const _ = ($) => {
+        M || $.target !== N || (M = !0, u(!1), g == null || g(b.current));
       };
-      return k.addEventListener("transitionend", L), () => {
-        k.removeEventListener("transitionend", L);
+      return N.addEventListener("transitionend", _), () => {
+        N.removeEventListener("transitionend", _);
       };
     }
-  }, [u, r]), B(() => {
-    const k = D.current;
-    g && k && (k.dataset.open = "");
-  }, [g]), /* @__PURE__ */ n(
-    ue,
+  }, [g, r]), B(() => {
+    const N = h.current;
+    y && N && (N.dataset.open = "");
+  }, [y]), /* @__PURE__ */ n(
+    Me,
     {
-      open: g,
+      open: y,
       onClose: e,
-      className: w(
+      className: c(
         {
-          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": g,
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": y,
           "tw:overflow-hidden": t === "cover"
         },
-        l
+        a
       ),
-      ...x,
+      ...k,
       children: /* @__PURE__ */ n(
         "form",
         {
           "data-testid": "transition-container",
-          ref: D,
-          className: w(
+          ref: h,
+          className: c(
             "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
             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:sm:w-sm": s === "sm",
+              "tw:md:w-lg": s === "md",
+              "tw:md:w-4xl": s === "lg",
+              "tw:md:w-6xl": s === "xl"
             },
             { "tw:h-full": t === "cover" }
           ),
-          onSubmit: K,
-          children: /* @__PURE__ */ n(C, { className: w(
+          onSubmit: R,
+          children: /* @__PURE__ */ n(P, { className: c(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": t === "cover" }
-          ), children: t === "cover" ? /* @__PURE__ */ p(_, { children: [
-            /* @__PURE__ */ p(
+          ), children: t === "cover" ? /* @__PURE__ */ m(H, { children: [
+            /* @__PURE__ */ m(
               "div",
               {
-                className: w(
+                className: c(
                   "tw:px-4 tw:py-3 tw:absolute tw:top-0 tw:left-0 tw:right-0 tw:z-3000",
                   "tw:flex tw:items-center tw:justify-between",
                   "tw:text-white tw:bg-linear-to-b tw:from-black/70 tw:to-black/10",
@@ -1058,38 +1284,38 @@ const Ae = ({ currentPage: r, pagesCount: e, ...t }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(et, { onClick: e, label: "Close dialog" })
+                  /* @__PURE__ */ n(X, { onClick: e, label: "Close dialog" })
                 ]
               }
             ),
-            a
-          ] }) : /* @__PURE__ */ p(_, { children: [
-            /* @__PURE__ */ p(C.Header, { className: w(
+            l
+          ] }) : /* @__PURE__ */ m(H, { children: [
+            /* @__PURE__ */ m(P.Header, { className: c(
               "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": t === "danger" }), children: o }),
-              /* @__PURE__ */ n(et, { onClick: e, label: "Close dialog" })
+              /* @__PURE__ */ n("h5", { className: c({ "tw:text-danger": t === "danger" }), children: o }),
+              /* @__PURE__ */ n(X, { onClick: e, label: "Close dialog" })
             ] }),
-            /* @__PURE__ */ n(C.Body, { children: a }),
-            b && /* @__PURE__ */ p(
-              C.Footer,
+            /* @__PURE__ */ n(P.Body, { children: l }),
+            x && /* @__PURE__ */ m(
+              P.Footer,
               {
                 "data-testid": "footer",
-                className: w(
+                className: c(
                   "tw:flex tw:justify-end tw:items-center tw:gap-x-2",
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ n(oe, { onClick: e, children: c }),
+                  /* @__PURE__ */ n(he, { onClick: e, children: w }),
                   /* @__PURE__ */ n(
-                    Jt,
+                    wt,
                     {
                       solid: !0,
                       variant: t === "danger" ? "danger" : "primary",
-                      disabled: m,
+                      disabled: f,
                       type: "submit",
-                      children: s
+                      children: d
                     }
                   )
                 ]
@@ -1100,19 +1326,19 @@ const Ae = ({ currentPage: r, pagesCount: e, ...t }) => {
       )
     }
   );
-}, 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", {
+}, or = ({ className: r, children: e, loading: t = !1, variant: o = "default" }) => /* @__PURE__ */ n(Qt, { className: p({ "tw:[&]:border-danger": o === "error" }, r), children: /* @__PURE__ */ m("h3", { className: p("tw:text-center", {
   "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
   "tw:text-danger": o === "error"
 }), children: [
-  t && /* @__PURE__ */ p(_, { children: [
-    /* @__PURE__ */ n(v, { icon: nt, spin: !0 }),
+  t && /* @__PURE__ */ m(H, { children: [
+    /* @__PURE__ */ n(C, { icon: lt, spin: !0 }),
     /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
   !t && e
-] }) }), Ue = ({ variant: r, className: e, size: t = "md", children: o }) => /* @__PURE__ */ n(
+] }) }), ar = ({ variant: r, className: e, size: t = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: f(
+    className: p(
       "tw:rounded-md tw:text-center",
       {
         "tw:p-2": t === "sm",
@@ -1127,82 +1353,82 @@ const Ae = ({ currentPage: r, pagesCount: e, ...t }) => {
     ),
     children: o
   }
-), 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({
+), lr = ({ placement: r = "auto" } = {}) => {
+  const e = O(null), t = (() => {
+    const u = [];
+    return r === "auto" && u.push(jt()), u.push(Ft({ element: e })), u;
+  })(), [o, l] = E(!1), { refs: a, floatingStyles: i, context: s, middlewareData: d } = st({
     placement: r === "auto" ? void 0 : r,
     open: o,
-    onOpenChange: a,
+    onOpenChange: l,
     middleware: t
-  }), c = Bt(i, {
+  }), w = Ht(s, {
     delay: { open: 300 },
     move: !0
-  }), { getFloatingProps: m, getReferenceProps: b } = at([c]), { isMounted: u, styles: x } = Rt(i, { duration: 200 }), g = W(() => {
-    const h = i.placement.split("-")[0];
+  }), { getFloatingProps: f, getReferenceProps: x } = dt([w]), { isMounted: g, styles: k } = Wt(s, { duration: 200 }), y = G(() => {
+    const u = s.placement.split("-")[0];
     return {
       top: "bottom",
       right: "left",
       bottom: "top",
       left: "right"
-    }[h] ?? "";
-  }, [i.placement]);
+    }[u] ?? "";
+  }, [s.placement]);
   return {
-    anchor: { ...b(), ref: l.setReference },
+    anchor: { ...x(), ref: a.setReference },
     tooltip: {
-      ...m(),
-      refSetter: l.setFloating,
-      isMounted: u,
-      styles: { ...d, ...x },
-      arrowPos: s.arrow,
+      ...f(),
+      refSetter: a.setFloating,
+      isMounted: g,
+      styles: { ...i, ...k },
+      arrowPos: d.arrow,
       arrowRef: e,
-      arrowSide: g
+      arrowSide: y
     }
   };
-}, Ke = ({ children: r, isMounted: e, styles: t, refSetter: o, arrowRef: a, arrowPos: l, arrowSide: d, ...i }) => {
-  var s;
+}, ir = ({ children: r, isMounted: e, styles: t, refSetter: o, arrowRef: l, arrowPos: a, arrowSide: i, ...s }) => {
+  var d;
   return e && /* @__PURE__ */ n(
     "div",
     {
       role: "tooltip",
       "aria-live": "polite",
-      className: f(
-        "tw:z-1000 tw:max-w-64",
+      className: p(
+        "tw:z-500 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": d === "top",
-          "tw:pb-2.5": d === "bottom",
-          "tw:pr-2.5": d === "right",
-          "tw:pl-2.5": d === "left"
+          "tw:pt-2.5": i === "top",
+          "tw:pb-2.5": i === "bottom",
+          "tw:pr-2.5": i === "right",
+          "tw:pl-2.5": i === "left"
         }
       ),
       ref: o,
       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: [
+      ...s,
+      children: /* @__PURE__ */ m("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: " }),
         r,
         /* @__PURE__ */ n(
           "div",
           {
-            ref: a,
-            className: f(
+            ref: l,
+            className: p(
               "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": d === "bottom",
-                "tw:rotate-90 tw:mr-[-3px]": d === "right",
-                "tw:rotate-270 tw:ml-[-3px]": d === "left"
+                "tw:rotate-180": i === "bottom",
+                "tw:rotate-90 tw:mr-[-3px]": i === "right",
+                "tw:rotate-270 tw:ml-[-3px]": i === "left"
               }
             ),
             style: {
-              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`
+              left: a == null ? void 0 : a.x,
+              top: a == null ? void 0 : a.y,
+              [i]: `${-(((d = l.current) == null ? void 0 : d.offsetWidth) ?? 0) / 2}px`
             },
             "data-testid": "arrow"
           }
@@ -1211,56 +1437,56 @@ const Ae = ({ currentPage: r, pagesCount: e, ...t }) => {
     }
   );
 };
-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,
+function sr({ items: r, order: e, onChange: t, prefixed: o = !0, buttonVariant: l = "button", ...a }) {
+  const i = I((d) => {
+    const w = Et({ currentOrderDir: e.dir, currentField: e.field, newField: d });
+    t(w);
+  }, [t, e.dir, e.field]), s = l === "button";
+  return /* @__PURE__ */ m(
+    L,
     {
-      buttonContent: /* @__PURE__ */ p(_, { children: [
-        !i && "Order by",
-        i && !e.field && /* @__PURE__ */ n("i", { children: "Order by..." }),
-        i && e.field && /* @__PURE__ */ p(_, { children: [
+      buttonContent: /* @__PURE__ */ m(H, { children: [
+        !s && "Order by",
+        s && !e.field && /* @__PURE__ */ n("i", { children: "Order by..." }),
+        s && e.field && /* @__PURE__ */ m(H, { children: [
           o && "Order by: ",
           r[e.field],
           " - ",
           e.dir ?? "DESC"
         ] })
       ] }),
-      buttonVariant: a,
-      ...l,
+      buttonVariant: l,
+      ...a,
       children: [
-        Object.entries(r).map(([s, c]) => /* @__PURE__ */ p(
-          I.Item,
+        Object.entries(r).map(([d, w]) => /* @__PURE__ */ m(
+          L.Item,
           {
-            selected: e.field === s,
-            onClick: () => d(s),
+            selected: e.field === d,
+            onClick: () => i(d),
             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 })
+              w,
+              e.field === d && /* @__PURE__ */ n(C, { icon: e.dir === "ASC" ? Pt : Lt })
             ]
           },
-          s
+          d
         )),
-        /* @__PURE__ */ n(I.Separator, {}),
-        /* @__PURE__ */ n(I.Item, { disabled: !e.field, onClick: () => t({}), children: /* @__PURE__ */ n("i", { children: "Clear selection" }) })
+        /* @__PURE__ */ n(L.Separator, {}),
+        /* @__PURE__ */ n(L.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]
+const dr = ({ text: r, className: e, size: t = "lg", initialCopied: o = !1, navigator_: l = globalThis.navigator, ...a }) => {
+  const [i, s] = At(o), d = I(
+    () => l.clipboard.writeText(r).then(s),
+    [l.clipboard, r, s]
   );
   return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: f(
+      className: p(
         "tw:focus-ring tw:rounded-sm tw:cursor-pointer",
         {
           "tw:text-md": t === "sm",
@@ -1271,50 +1497,53 @@ const qe = ({ text: r, className: e, size: t = "lg", initialCopied: o = !1, navi
       ),
       "aria-label": `Copy ${r} to clipboard`,
       title: "Copy to clipboard",
-      onClick: s,
-      ...l,
-      children: /* @__PURE__ */ n(v, { icon: d ? kt : Et, fixedWidth: !0 })
+      onClick: d,
+      ...a,
+      children: /* @__PURE__ */ n(C, { icon: i ? Dt : Kt, fixedWidth: !0 })
     }
   );
 };
 export {
-  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,
+  ye as BaseNavBar,
+  wt as Button,
+  P as Card,
+  nr as CardModal,
+  qe as Checkbox,
+  X as CloseButton,
+  dr as CopyToClipboardButton,
+  Ke as Details,
+  L as Dropdown,
+  K as ELLIPSIS,
+  Y as Input,
+  Z as Label,
+  Xe as LabelledInput,
+  Je as LabelledRevealablePasswordInput,
+  Qe as LabelledSelect,
+  he as LinkButton,
+  Yt 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
+  or as Message,
+  Me as ModalDialog,
+  ze as NavBar,
+  Ve as NavPills,
+  sr as OrderingDropdown,
+  er as Paginator,
+  ar as Result,
+  ne as RevealablePasswordInput,
+  rr as RowDropdown,
+  ie as SearchCombobox,
+  ae as SearchInput,
+  oe as Select,
+  Qt as SimpleCard,
+  Ge as Table,
+  Ye as TagsAutocomplete,
+  Ze as ToggleSwitch,
+  ir as Tooltip,
+  Ce as formatNumber,
+  Pe as keyForPage,
+  F as pageIsEllipsis,
+  Re as prettifyPageNumber,
+  Oe as progressivePagination,
+  tr as roundTen,
+  lr as useTooltip
 };