@shlinkio/shlink-frontend-kit 1.3.1 → 1.5.0

package/dist/index.js

@@ -1,1664 +1,1328 @@
-import { jsxs as g, jsx as a, Fragment as B } from "react/jsx-runtime";
-import { clsx as d } from "clsx";
-import { useRef as C, useState as L, useEffect as R, forwardRef as k, useCallback as w, createContext as K, useContext as E, useId as S, useImperativeHandle as we, useMemo as P } from "react";
-import { Link as W, useNavigate as ke, useLocation as oe, NavLink as ve } from "react-router";
-import { faClose as Ne, faEyeSlash as Ce, faEye as Te, faCircleNotch as ae, faSearch as Ae, faCheck as Ie, faCaretDown as Oe, faChevronUp as Re, faChevronDown as Le, faChevronLeft as ee, faChevronRight as te, faEllipsisV as Pe, faSortAmountUp as Ee, faSortAmountDown as Se } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as N } from "@fortawesome/react-fontawesome";
-import { useFloating as se, flip as De, offset as Me, useClick as _e, useInteractions as le, autoPlacement as Fe, arrow as Be, useHover as He, useTransitionStyles as $e } from "@floating-ui/react";
-import { faClone as je } from "@fortawesome/free-regular-svg-icons";
-import { createPortal as Ue } from "react-dom";
-const tr = ({ children: e, summary: r, summaryClasses: t, ...n }) => {
-  const o = C(null), [s, l] = L(!1);
-  return R(() => {
-    const i = o.current, c = () => l(!!i?.open);
-    return i?.addEventListener("toggle", c), () => i?.removeEventListener("toggle", c);
-  }, []), /* @__PURE__ */ g("details", { ref: o, ...n, children: [
-    /* @__PURE__ */ a("summary", { className: d("focus-ring px-1 -mx-1 rounded-sm", t), children: r }),
-    s && /* @__PURE__ */ a("div", { className: "mt-3 flex flex-col gap-y-3", children: e })
-  ] });
-}, Ge = k(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: d(
-      "px-4 py-3 rounded-t-md",
-      "bg-lm-primary dark:bg-dm-primary border-b border-lm-border dark:border-dm-border",
-      e
-    ),
-    ...r,
-    ref: t
-  }
-)), Ke = k(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: d(
-      "p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md",
-      "first:rounded-t-md last:rounded-b-md",
-      e
-    ),
-    ...r,
-    ref: t
-  }
-)), We = k(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: d(
-      "px-4 py-3 rounded-b-md",
-      "bg-lm-primary dark:bg-dm-primary border-t border-lm-border dark:border-dm-border",
-      e
-    ),
-    ...r,
-    ref: t
-  }
-)), qe = k(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: d(
-      "group/card rounded-md shadow-md",
-      "border border-lm-border dark:border-dm-border bg-lm-primary dark:bg-dm-primary",
-      e
-    ),
-    ...r,
-    ref: t
-  }
-)), I = Object.assign(qe, { Body: Ke, Header: Ge, Footer: We }), Qe = k(({ bodyClassName: e, children: r, ...t }, n) => {
-  const { title: o, titleSize: s = "md", ...l } = "title" in t ? t : {
-    ...t,
-    title: void 0,
-    titleSize: void 0
-  };
-  return /* @__PURE__ */ g(I, { ...l, ref: n, children: [
-    o && /* @__PURE__ */ g(I.Header, { children: [
-      s === "lg" && /* @__PURE__ */ a("h4", { children: o }),
-      s === "md" && /* @__PURE__ */ a("h5", { children: o }),
-      s === "sm" && /* @__PURE__ */ a("h6", { children: o })
-    ] }),
-    /* @__PURE__ */ a(I.Body, { className: e, children: r })
-  ] });
+import { clsx as e } from "clsx";
+import { createContext as t, useCallback as n, useContext as r, useEffect as i, useId as a, useImperativeHandle as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Link as p, NavLink as m, useLocation as h, useNavigate as g } from "react-router";
+import { faCaretDown as _, faCheck as v, faChevronDown as y, faChevronLeft as b, faChevronRight as x, faChevronUp as S, faCircleNotch as C, faClose as w, faEllipsisV as T, faEye as E, faEyeSlash as ee, faSearch as D, faSortAmountDown as O, faSortAmountUp as k } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as A } from "@fortawesome/react-fontawesome";
+import { arrow as j, autoPlacement as te, flip as ne, offset as re, useClick as ie, useFloating as ae, useHover as oe, useInteractions as se, useTransitionStyles as ce } from "@floating-ui/react";
+import { faClone as le } from "@fortawesome/free-regular-svg-icons";
+import { createPortal as ue } from "react-dom";
+//#region src/content/Details.tsx
+var de = ({ children: t, summary: n, summaryClasses: r, ...a }) => {
+	let o = c(null), [s, u] = l(!1);
+	return i(() => {
+		let e = o.current, t = () => u(!!e?.open);
+		return e?.addEventListener("toggle", t), () => e?.removeEventListener("toggle", t);
+	}, []), /* @__PURE__ */ f("details", {
+		ref: o,
+		...a,
+		children: [/* @__PURE__ */ d("summary", {
+			className: e("focus-ring px-1 -mx-1 rounded-sm", r),
+			children: n
+		}), s && /* @__PURE__ */ d("div", {
+			className: "mt-3 flex flex-col gap-y-3",
+			children: t
+		})]
+	});
+}, fe = ({ className: t, ...n }) => /* @__PURE__ */ d("div", {
+	className: e("px-4 py-3 rounded-t-md", "bg-lm-primary dark:bg-dm-primary border-b border-lm-border dark:border-dm-border", t),
+	...n
 });
-function Ye({
-  id: e,
-  items: r,
-  onSelectItem: t,
-  onActiveItemChange: n,
-  renderItem: o,
-  className: s,
-  noItemsMessage: l = "No items",
-  anchor: i,
-  "aria-label": c = "Items",
-  ...u
-}) {
-  const [b, x] = L(0), f = w((h) => {
-    if (x(h), n) {
-      const [p, m] = [...r.entries()][h];
-      n(p, m);
-    }
-  }, [r, n]);
-  return R(() => {
-    const h = i?.current;
-    if (!h)
-      return;
-    const p = (m) => {
-      ["Enter", "ArrowUp", "ArrowDown"].includes(m.key) && m.preventDefault(), m.key === "ArrowDown" ? f(Math.min(b + 1, r.size - 1)) : m.key === "ArrowUp" ? f(Math.max(b - 1, 0)) : m.key === "Enter" && t([...r.values()][b]);
-    };
-    return h.addEventListener("keydown", p), () => h.removeEventListener("keydown", p);
-  }, [b, i, f, r, t]), /* @__PURE__ */ g(
-    I,
-    {
-      id: e,
-      className: d("py-1 flex flex-col", s),
-      role: "listbox",
-      "aria-orientation": "vertical",
-      "aria-label": c,
-      ...u,
-      children: [
-        r.size === 0 && /* @__PURE__ */ a("i", { role: "option", "aria-disabled": !0, "aria-selected": !1, "data-testid": "no-items", className: "px-2 py-1", children: l }),
-        [...r.entries()].map(([h, p], m) => /* @__PURE__ */ a(
-          "button",
-          {
-            id: `${e}_${h}`,
-            type: "button",
-            role: "option",
-            "aria-selected": m === b,
-            className: d(
-              "px-2 py-1 text-left truncate",
-              { "bg-lm-secondary dark:bg-dm-secondary": m === b }
-            ),
-            tabIndex: -1,
-            onClick: () => t(p),
-            onMouseOver: () => f(m),
-            children: o(p)
-          },
-          h
-        ))
-      ]
-    }
-  );
+fe.displayName = "Card.Header";
+var pe = ({ className: t, ...n }) => /* @__PURE__ */ d("div", {
+	className: e("p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md", "first:rounded-t-md last:rounded-b-md", t),
+	...n
+});
+pe.displayName = "Card.Body";
+var me = ({ className: t, ...n }) => /* @__PURE__ */ d("div", {
+	className: e("px-4 py-3 rounded-b-md", "bg-lm-primary dark:bg-dm-primary border-t border-lm-border dark:border-dm-border", t),
+	...n
+});
+me.displayName = "Card.Footer";
+var he = ({ className: t, ...n }) => /* @__PURE__ */ d("div", {
+	className: e("group/card rounded-md shadow-md", "border border-lm-border dark:border-dm-border bg-lm-primary dark:bg-dm-primary", t),
+	...n
+});
+he.displayName = "Card";
+var M = Object.assign(he, {
+	Body: pe,
+	Header: fe,
+	Footer: me
+}), ge = ({ bodyClassName: e, children: t, ...n }) => {
+	let { title: r, titleSize: i = "md", ...a } = "title" in n ? n : {
+		...n,
+		title: void 0,
+		titleSize: void 0
+	};
+	return /* @__PURE__ */ f(M, {
+		...a,
+		children: [r && /* @__PURE__ */ f(M.Header, { children: [
+			i === "lg" && /* @__PURE__ */ d("h4", { children: r }),
+			i === "md" && /* @__PURE__ */ d("h5", { children: r }),
+			i === "sm" && /* @__PURE__ */ d("h6", { children: r })
+		] }), /* @__PURE__ */ d(M.Body, {
+			className: e,
+			children: t
+		})]
+	});
+};
+//#endregion
+//#region src/content/Listbox.tsx
+function _e({ id: t, items: r, onSelectItem: a, onActiveItemChange: o, renderItem: s, className: c, noItemsMessage: u = "No items", anchor: p, "aria-label": m = "Items", ...h }) {
+	let [g, _] = l(0), v = n((e) => {
+		if (_(e), o) {
+			let [t, n] = [...r.entries()][e];
+			o(t, n);
+		}
+	}, [r, o]);
+	return i(() => {
+		let e = p?.current;
+		if (!e) return;
+		let t = (e) => {
+			[
+				"Enter",
+				"ArrowUp",
+				"ArrowDown"
+			].includes(e.key) && e.preventDefault(), e.key === "ArrowDown" ? v(Math.min(g + 1, r.size - 1)) : e.key === "ArrowUp" ? v(Math.max(g - 1, 0)) : e.key === "Enter" && a([...r.values()][g]);
+		};
+		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+	}, [
+		g,
+		p,
+		v,
+		r,
+		a
+	]), /* @__PURE__ */ f(M, {
+		id: t,
+		className: e("py-1 flex flex-col", c),
+		role: "listbox",
+		"aria-orientation": "vertical",
+		"aria-label": m,
+		...h,
+		children: [r.size === 0 && /* @__PURE__ */ d("i", {
+			role: "option",
+			"aria-disabled": !0,
+			"aria-selected": !1,
+			"data-testid": "no-items",
+			className: "px-2 py-1",
+			children: u
+		}), [...r.entries()].map(([n, r], i) => /* @__PURE__ */ d("button", {
+			id: `${t}_${n}`,
+			type: "button",
+			role: "option",
+			"aria-selected": i === g,
+			className: e("px-2 py-1 text-left truncate", { "bg-lm-secondary dark:bg-dm-secondary": i === g }),
+			tabIndex: -1,
+			onClick: () => a(r),
+			onMouseOver: () => v(i),
+			children: s(r)
+		}, n))]
+	});
 }
-const H = K(void 0), M = K({ responsive: !0, size: "md" }), Xe = ({ children: e, className: r }) => {
-  const { responsive: t } = E(M);
-  return /* @__PURE__ */ a(H.Provider, { value: { section: "head" }, children: /* @__PURE__ */ a(
-    "thead",
-    {
-      className: d(
-        { "hidden lg:table-header-group": t },
-        r
-      ),
-      children: e
-    }
-  ) });
-}, Je = ({ children: e, className: r }) => {
-  const { responsive: t } = E(M);
-  return /* @__PURE__ */ a(H.Provider, { value: { section: "body" }, children: /* @__PURE__ */ a(
-    "tbody",
-    {
-      className: d(
-        { "lg:table-row-group flex flex-col gap-y-3": t },
-        r
-      ),
-      children: e
-    }
-  ) });
-}, Ze = ({ children: e, className: r }) => {
-  const { responsive: t } = E(M);
-  return /* @__PURE__ */ a(H.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ a(
-    "tfoot",
-    {
-      className: d(
-        { "lg:table-row-group flex flex-col gap-y-3 mt-4": t },
-        r
-      ),
-      children: e
-    }
-  ) });
-}, Ve = ({ children: e, className: r, ...t }) => {
-  const o = E(H)?.section === "body", { responsive: s } = E(M);
-  return /* @__PURE__ */ a(
-    "tr",
-    {
-      className: d(
-        "group",
-        {
-          "lg:table-row flex flex-col": s,
-          "lg:border-0 border-y-2 border-lm-border dark:border-dm-border": s,
-          "hover:bg-lm-primary dark:hover:bg-dm-primary": o,
-          // Use a different hover bg color depending on the table being inside a card or not
-          "group-[&]/card:hover:bg-lm-secondary dark:group-[&]/card:hover:bg-dm-secondary": o
-        },
-        r
-      ),
-      ...t,
-      children: e
-    }
-  );
-}, ze = ({ children: e, className: r, columnName: t, type: n, ...o }) => {
-  const s = E(H), l = n ?? (s?.section !== "body" ? "th" : "td"), { responsive: i, size: c } = E(M);
-  return /* @__PURE__ */ a(
-    l,
-    {
-      "data-column": i ? t : void 0,
-      className: d(
-        "border-lm-border dark:border-dm-border",
-        {
-          "p-1": c === "sm",
-          "p-2": c === "md",
-          "p-3": c === "lg",
-          "border-b-1": !i,
-          "block lg:table-cell not-last:border-b-1 lg:border-b-1": i,
-          "text-left": l === "th",
-          // For responsive tables, display the content in data-column attribute for md sizes and lower
-          "before:lg:hidden before:content-[attr(data-column)] before:font-bold before:mr-1": i && l === "td"
-        },
-        r
-      ),
-      ...o,
-      children: e
-    }
-  );
-}, et = ({ header: e, footer: r, children: t, responsive: n = !0, size: o = "md", ...s }) => /* @__PURE__ */ a(M.Provider, { value: { responsive: n, size: o }, children: /* @__PURE__ */ g("table", { className: "w-full", ...s, children: [
-  /* @__PURE__ */ a(Xe, { children: e }),
-  /* @__PURE__ */ a(Je, { children: t }),
-  r && /* @__PURE__ */ a(Ze, { children: r })
-] }) }), rr = Object.assign(et, { Row: Ve, Cell: ze }), ie = k(({
-  className: e,
-  disabled: r,
-  variant: t = "primary",
-  size: n = "md",
-  inline: o = !1,
-  solid: s = !1,
-  type: l = "button",
-  ...i
-}, c) => {
-  const u = "to" in i && typeof i.to == "string", b = u ? W : "button", x = u ? void 0 : l;
-  return /* @__PURE__ */ a(
-    b,
-    {
-      ref: c,
-      className: d(
-        {
-          "inline-flex": o,
-          flex: !o
-        },
-        "gap-2 items-center justify-center",
-        "border rounded-md no-underline",
-        "transition-colors",
-        {
-          "focus-ring": t === "primary",
-          "focus-ring-secondary": t === "secondary",
-          "focus-ring-danger": t === "danger"
-        },
-        {
-          "px-1.5 py-1 text-sm": n === "sm",
-          "px-3 py-1.5": n === "md",
-          "px-4 py-2 text-lg": n === "lg"
-        },
-        {
-          "border-lm-brand dark:border-dm-brand": t === "primary",
-          "text-lm-brand dark:text-dm-brand": t === "primary" && !s,
-          "border-zinc-500": t === "secondary",
-          "text-zinc-500": t === "secondary" && !s,
-          "border-danger": t === "danger",
-          "text-danger": t === "danger" && !s
-        },
-        s && {
-          "text-white": !0,
-          "bg-lm-brand dark:bg-dm-brand": t === "primary",
-          "highlight:bg-lm-brand-dark dark:highlight:bg-dm-brand-dark": t === "primary",
-          "highlight:border-lm-brand-dark dark:highlight:border-dm-brand-dark": t === "primary",
-          "bg-zinc-500": t === "secondary",
-          "highlight:bg-zinc-600 highlight:border-zinc-600": t === "secondary",
-          "bg-danger": t === "danger",
-          "highlight:bg-danger-dark highlight:border-danger-dark": t === "danger"
-        },
-        !r && {
-          "highlight:text-white": !s,
-          "highlight:bg-lm-brand dark:highlight:bg-dm-brand": t === "primary",
-          "highlight:bg-zinc-500": t === "secondary",
-          "highlight:bg-danger": t === "danger"
-        },
-        {
-          "cursor-pointer": !r,
-          "pointer-events-none opacity-65": r
-        },
-        e
-      ),
-      disabled: u ? void 0 : r,
-      "aria-disabled": u ? r : void 0,
-      type: x,
-      ...i
-    }
-  );
-}), de = k(({ className: e, onChange: r, ...t }, n) => {
-  const o = w((s) => r?.(s.target.checked, s), [r]);
-  return /* @__PURE__ */ a(
-    "input",
-    {
-      ref: n,
-      type: "checkbox",
-      className: d(
-        "appearance-none focus-ring cursor-[inherit]",
-        "border-1 border-lm-input-border dark:border-dm-input-border",
-        "bg-lm-primary dark:bg-dm-primary checked:bg-lm-brand dark:checked:bg-dm-brand bg-no-repeat",
-        // Use different background color when rendered inside a card
-        "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input",
-        e
-      ),
-      onChange: o,
-      ...t
-    }
-  );
-}), nr = k(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  de,
-  {
-    ref: t,
-    className: d("rounded-sm min-w-4 w-4 h-4 checked:bg-(image:--tick) bg-center", e),
-    ...r
-  }
-)), Y = k(({ onClick: e, className: r, label: t = "Close", size: n = "lg", solid: o }, s) => /* @__PURE__ */ a(
-  "button",
-  {
-    ref: s,
-    type: "button",
-    onClick: e,
-    className: d(
-      "rounded-md focus-ring cursor-pointer",
-      {
-        "opacity-50 highlight:opacity-80 transition-opacity": !o
-      },
-      r
-    ),
-    "aria-label": t,
-    children: /* @__PURE__ */ a(N, { icon: Ne, size: n === "lg" ? "xl" : n === "md" ? "lg" : void 0 })
-  }
-)), J = k(({
-  borderless: e = !1,
-  size: r = "md",
-  feedback: t,
-  variant: n = "default",
-  className: o,
-  disabled: s,
-  ...l
-}, i) => /* @__PURE__ */ a(
-  "input",
-  {
-    ref: i,
-    className: d(
-      "outline-none",
-      n === "default" && [
-        "w-full",
-        {
-          "focus-ring": !t,
-          "focus-ring-danger": t === "error",
-          "px-2 py-1 text-sm": r === "sm",
-          "px-3 py-1.5": r === "md",
-          "px-4 py-2 text-xl": r === "lg",
-          "rounded-md border": !e,
-          "border-lm-input-border dark:border-dm-input-border": !e && !t,
-          "border-danger": !e && t === "error",
-          "bg-lm-disabled-input dark:bg-dm-disabled-input": s,
-          "bg-lm-primary dark:bg-dm-primary": !s,
-          // Use different background color when rendered inside a card
-          "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !s
-        }
-      ],
-      o
-    ),
-    disabled: s,
-    ...l
-  }
-)), Z = ({ required: e, children: r, className: t, ...n }) => /* @__PURE__ */ g("label", { className: d("cursor-pointer", t), ...n, children: [
-  r,
-  e && /* @__PURE__ */ a("span", { className: "text-danger ml-1", "data-testid": "required-indicator", children: "*" })
-] }), V = ({ children: e, helpText: r, error: t, "data-testid": n }) => /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", "data-testid": n, children: [
-  e,
-  r && /* @__PURE__ */ a(
-    "small",
-    {
-      "data-testid": n ? `${n}-help-text` : "help-text",
-      className: "text-gray-500 dark:text-gray-400",
-      children: r
-    }
-  ),
-  t && /* @__PURE__ */ a("span", { "data-testid": n ? `${n}-error` : "error", className: "text-danger", children: t })
-] }), or = k(({ label: e, inputClassName: r, required: t, hiddenRequired: n, error: o, helpText: s, "data-testid": l, ...i }, c) => {
-  const u = S();
-  return /* @__PURE__ */ g(V, { error: o, helpText: s, "data-testid": l, children: [
-    /* @__PURE__ */ a(Z, { htmlFor: u, required: t, children: e }),
-    /* @__PURE__ */ a(
-      J,
-      {
-        ref: c,
-        id: u,
-        className: r,
-        required: t || n,
-        feedback: o ? "error" : void 0,
-        ...i
-      }
-    )
-  ] });
-}), tt = k(({ containerClassName: e, className: r, size: t, ...n }, o) => {
-  const { flag: s, toggle: l, setToFalse: i } = ue(), c = C(null), u = w(({ relatedTarget: b }) => {
-    c.current?.contains(b) || i();
-  }, [c, i]);
-  return /* @__PURE__ */ g(
-    "div",
-    {
-      className: d("group relative", e),
-      ref: c,
-      onBlurCapture: u,
-      children: [
-        /* @__PURE__ */ a(
-          J,
-          {
-            ref: o,
-            type: s ? "text" : "password",
-            className: d(
-              {
-                "pr-10": t !== "sm",
-                "pr-8": t === "sm"
-              },
-              r
-            ),
-            size: t,
-            "data-testid": "input",
-            ...n
-          }
-        ),
-        /* @__PURE__ */ a(
-          "button",
-          {
-            type: "button",
-            onClick: l,
-            title: s ? "Hide password" : "Show password",
-            "aria-label": s ? "Hide password" : "Show password",
-            className: d(
-              "absolute top-[50%] translate-y-[-50%] px-1 cursor-pointer",
-              "text-placeholder hover:text-lm-text hover:dark:text-dm-text transition-colors",
-              {
-                "right-1.5": t !== "sm",
-                "scale-85 right-1": t === "sm"
-              }
-            ),
-            tabIndex: -1,
-            children: /* @__PURE__ */ a(N, { icon: s ? Ce : Te })
-          }
-        )
-      ]
-    }
-  );
-}), ar = k(({ label: e, inputClassName: r, required: t, hiddenRequired: n, error: o, helpText: s, "data-testid": l, ...i }, c) => {
-  const u = S();
-  return /* @__PURE__ */ g(V, { error: o, helpText: s, "data-testid": l, children: [
-    /* @__PURE__ */ a(Z, { htmlFor: u, required: t, children: e }),
-    /* @__PURE__ */ a(
-      tt,
-      {
-        ref: c,
-        id: u,
-        className: r,
-        required: t || n,
-        feedback: o ? "error" : void 0,
-        ...i
-      }
-    )
-  ] });
-}), rt = k(({
-  className: e,
-  size: r = "md",
-  feedback: t,
-  disabled: n,
-  ...o
-}, s) => /* @__PURE__ */ a(
-  "select",
-  {
-    ref: s,
-    className: d(
-      "w-full rounded-md border appearance-none pr-9",
-      "bg-(image:--chevron-down) bg-no-repeat bg-position-[right_0.75rem_center] bg-size-[16px_12px]",
-      {
-        "focus-ring": !t,
-        "focus-ring-danger": t === "error",
-        "border-lm-input-border dark:border-dm-input-border": !t,
-        "border-danger": t === "error",
-        "pl-2 py-1 text-sm": r === "sm",
-        "pl-3 py-1.5": r === "md",
-        "pl-4 py-2 text-xl": r === "lg",
-        "bg-lm-disabled-input dark:bg-dm-disabled-input": n,
-        // Apply different background color when rendered inside a card
-        "bg-lm-primary dark:bg-dm-primary group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !n
-      },
-      e
-    ),
-    disabled: n,
-    ...o
-  }
-)), sr = k(({ selectClassName: e, label: r, error: t, helpText: n, required: o, hiddenRequired: s, "data-testid": l, ...i }, c) => {
-  const u = S();
-  return /* @__PURE__ */ g(V, { error: t, helpText: n, "data-testid": l, children: [
-    /* @__PURE__ */ a(Z, { htmlFor: u, required: o, children: r }),
-    /* @__PURE__ */ a(
-      rt,
-      {
-        ref: c,
-        id: u,
-        className: e,
-        required: o || s,
-        feedback: t ? "error" : void 0,
-        ...i
-      }
-    )
-  ] });
-}), nt = k(({
-  onChange: e,
-  containerClassName: r,
-  inputClassName: t,
-  // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
-  size: n = "lg",
-  loading: o = !1,
-  variant: s = "default",
-  immediate: l = !1,
-  ...i
-}, c) => {
-  const { setTimeout: u, clearCurrentTimeout: b } = me(500), x = w((f) => {
-    !f || l ? (b(), e(f)) : u(() => e(f));
-  }, [b, l, e, u]);
-  return /* @__PURE__ */ g("div", { className: d("group relative focus-within:z-10", r), children: [
-    s === "default" && /* @__PURE__ */ a(
-      N,
-      {
-        icon: o ? ae : Ae,
-        spin: o,
-        className: d(
-          "absolute top-[50%] translate-y-[-50%] transition-colors",
-          "text-placeholder group-focus-within:text-lm-text dark:group-focus-within:text-dm-text",
-          {
-            "left-3": n !== "sm",
-            "scale-85 left-2": n === "sm"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ a(
-      J,
-      {
-        ref: c,
-        variant: s,
-        type: "search",
-        className: d(
-          s === "default" && {
-            "pl-9": n !== "sm",
-            "pl-7": n === "sm"
-          },
-          t
-        ),
-        placeholder: "Search...",
-        onChange: (f) => x(f.target.value),
-        size: n,
-        ...i
-      }
-    )
-  ] });
+//#endregion
+//#region src/content/Table.tsx
+var N = t(void 0), P = t({
+	responsive: !0,
+	size: "md"
+}), ve = ({ children: t, className: n }) => {
+	let { responsive: i } = r(P);
+	return /* @__PURE__ */ d(N.Provider, {
+		value: { section: "head" },
+		children: /* @__PURE__ */ d("thead", {
+			className: e({ "hidden lg:table-header-group": i }, n),
+			children: t
+		})
+	});
+}, ye = ({ children: t, className: n }) => {
+	let { responsive: i } = r(P);
+	return /* @__PURE__ */ d(N.Provider, {
+		value: { section: "body" },
+		children: /* @__PURE__ */ d("tbody", {
+			className: e({ "lg:table-row-group flex flex-col gap-y-3": i }, n),
+			children: t
+		})
+	});
+}, be = ({ children: t, className: n }) => {
+	let { responsive: i } = r(P);
+	return /* @__PURE__ */ d(N.Provider, {
+		value: { section: "footer" },
+		children: /* @__PURE__ */ d("tfoot", {
+			className: e({ "lg:table-row-group flex flex-col gap-y-3 mt-4": i }, n),
+			children: t
+		})
+	});
+}, F = ({ children: t, className: n, ...i }) => {
+	let a = r(N)?.section === "body", { responsive: o } = r(P);
+	return /* @__PURE__ */ d("tr", {
+		className: e("group", {
+			"lg:table-row flex flex-col": o,
+			"lg:border-0 border-y-2 border-lm-border dark:border-dm-border": o,
+			"hover:bg-lm-primary dark:hover:bg-dm-primary": a,
+			"group-[&]/card:hover:bg-lm-secondary dark:group-[&]/card:hover:bg-dm-secondary": a
+		}, n),
+		...i,
+		children: t
+	});
+};
+F.displayName = "Table.Row";
+var I = ({ children: t, className: n, columnName: i, type: a, ...o }) => {
+	let s = r(N), c = a ?? (s?.section === "body" ? "td" : "th"), { responsive: l, size: u } = r(P);
+	return /* @__PURE__ */ d(c, {
+		"data-column": l ? i : void 0,
+		className: e("border-lm-border dark:border-dm-border", {
+			"p-1": u === "sm",
+			"p-2": u === "md",
+			"p-3": u === "lg",
+			"border-b-1": !l,
+			"block lg:table-cell not-last:border-b-1 lg:border-b-1": l,
+			"text-left": c === "th",
+			"before:lg:hidden before:content-[attr(data-column)] before:font-bold before:mr-1": l && c === "td"
+		}, n),
+		...o,
+		children: t
+	});
+};
+I.displayName = "Table.Cell";
+var xe = ({ header: e, footer: t, children: n, responsive: r = !0, size: i = "md", ...a }) => /* @__PURE__ */ d(P.Provider, {
+	value: {
+		responsive: r,
+		size: i
+	},
+	children: /* @__PURE__ */ f("table", {
+		className: "w-full",
+		...a,
+		children: [
+			/* @__PURE__ */ d(ve, { children: e }),
+			/* @__PURE__ */ d(ye, { children: n }),
+			t && /* @__PURE__ */ d(be, { children: t })
+		]
+	})
 });
-function ot({
-  searchResults: e,
-  onSearch: r,
-  onSelectSearchResult: t,
-  renderSearchResult: n,
-  size: o = "md",
-  // SearchInput defaults its size to 'lg'. Change it to 'md'
-  listboxSpan: s = "full",
-  onFocus: l,
-  containerClassName: i,
-  listboxClassName: c,
-  ...u
-}, b) {
-  const x = S(), [f, h] = L(), p = C(null);
-  we(b, () => p.current);
-  const m = P(
-    () => e ? f ?? [...e.keys()][0] : void 0,
-    [f, e]
-  ), v = w((y) => {
-    t(y), r(""), p.current.value = "";
-  }, [r, t, p]);
-  return /* @__PURE__ */ g(
-    "div",
-    {
-      className: d("relative", i),
-      onBlur: (y) => {
-        y.currentTarget.contains(y.relatedTarget) || r("");
-      },
-      children: [
-        /* @__PURE__ */ a(
-          nt,
-          {
-            onChange: r,
-            size: o,
-            ref: p,
-            role: "combobox",
-            "aria-autocomplete": "list",
-            "aria-expanded": !!e,
-            "aria-controls": x,
-            "aria-activedescendant": m ? `${x}_${m}` : void 0,
-            autoComplete: "off",
-            autoCorrect: "off",
-            onFocus: (y) => {
-              l?.(y), r(y.target.value);
-            },
-            ...u
-          }
-        ),
-        e && /* @__PURE__ */ a(
-          Ye,
-          {
-            id: x,
-            items: e,
-            anchor: p,
-            onSelectItem: v,
-            onActiveItemChange: h,
-            renderItem: n,
-            className: d(
-              "absolute top-full mt-1 z-10",
-              {
-                "min-w-60": s === "auto",
-                "w-full": s === "full"
-              },
-              c
-            ),
-            "aria-label": "Matching items",
-            noItemsMessage: "No results found matching search"
-          }
-        )
-      ]
-    }
-  );
+xe.displayName = "Table";
+var Se = Object.assign(xe, {
+	Row: F,
+	Cell: I
+}), L = ({ className: t, disabled: n, variant: r = "primary", size: i = "md", inline: a = !1, solid: o = !1, type: s = "button", ref: c, ...l }) => {
+	let u = "to" in l && typeof l.to == "string", f = u ? p : "button", m = u ? void 0 : s;
+	return /* @__PURE__ */ d(f, {
+		ref: c,
+		className: e({
+			"inline-flex": a,
+			flex: !a
+		}, "gap-2 items-center justify-center", "border rounded-md no-underline", "transition-colors", {
+			"focus-ring": r === "primary",
+			"focus-ring-secondary": r === "secondary",
+			"focus-ring-danger": r === "danger"
+		}, {
+			"px-1.5 py-1 text-sm": i === "sm",
+			"px-3 py-1.5": i === "md",
+			"px-4 py-2 text-lg": i === "lg"
+		}, {
+			"border-lm-brand dark:border-dm-brand": r === "primary",
+			"text-lm-brand dark:text-dm-brand": r === "primary" && !o,
+			"border-zinc-500": r === "secondary",
+			"text-zinc-500": r === "secondary" && !o,
+			"border-danger": r === "danger",
+			"text-danger": r === "danger" && !o
+		}, o && {
+			"text-white": !0,
+			"bg-lm-brand dark:bg-dm-brand": r === "primary",
+			"highlight:bg-lm-brand-dark dark:highlight:bg-dm-brand-dark": r === "primary",
+			"highlight:border-lm-brand-dark dark:highlight:border-dm-brand-dark": r === "primary",
+			"bg-zinc-500": r === "secondary",
+			"highlight:bg-zinc-600 highlight:border-zinc-600": r === "secondary",
+			"bg-danger": r === "danger",
+			"highlight:bg-danger-dark highlight:border-danger-dark": r === "danger"
+		}, !n && {
+			"highlight:text-white": !o,
+			"highlight:bg-lm-brand dark:highlight:bg-dm-brand": r === "primary",
+			"highlight:bg-zinc-500": r === "secondary",
+			"highlight:bg-danger": r === "danger"
+		}, {
+			"cursor-pointer": !n,
+			"pointer-events-none opacity-65": n
+		}, t),
+		disabled: u ? void 0 : n,
+		"aria-disabled": u ? n : void 0,
+		type: m,
+		...l
+	});
+}, Ce = ({ className: t, onChange: r, ref: i, ...a }) => {
+	let o = n((e) => r?.(e.target.checked, e), [r]);
+	return /* @__PURE__ */ d("input", {
+		ref: i,
+		type: "checkbox",
+		className: e("appearance-none focus-ring cursor-[inherit]", "border-1 border-lm-input-border dark:border-dm-input-border", "bg-lm-primary dark:bg-dm-primary checked:bg-lm-brand dark:checked:bg-dm-brand bg-no-repeat", "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input", t),
+		onChange: o,
+		...a
+	});
+}, we = ({ className: t, ...n }) => /* @__PURE__ */ d(Ce, {
+	className: e("rounded-sm min-w-4 w-4 h-4 checked:bg-(image:--tick) bg-center", t),
+	...n
+}), R = ({ onClick: t, className: n, label: r = "Close", size: i = "lg", solid: a, ref: o }) => /* @__PURE__ */ d("button", {
+	ref: o,
+	type: "button",
+	onClick: t,
+	className: e("rounded-md focus-ring cursor-pointer", { "opacity-50 highlight:opacity-80 transition-opacity": !a }, n),
+	"aria-label": r,
+	children: /* @__PURE__ */ d(A, {
+		icon: w,
+		size: i === "lg" ? "xl" : i === "md" ? "lg" : void 0
+	})
+}), z = ({ borderless: t = !1, size: n = "md", feedback: r, variant: i = "default", className: a, disabled: o, ref: s, ...c }) => /* @__PURE__ */ d("input", {
+	ref: s,
+	className: e("outline-none", i === "default" && ["w-full", {
+		"focus-ring": !r,
+		"focus-ring-danger": r === "error",
+		"px-2 py-1 text-sm": n === "sm",
+		"px-3 py-1.5": n === "md",
+		"px-4 py-2 text-xl": n === "lg",
+		"rounded-md border": !t,
+		"border-lm-input-border dark:border-dm-input-border": !t && !r,
+		"border-danger": !t && r === "error",
+		"bg-lm-disabled-input dark:bg-dm-disabled-input": o,
+		"bg-lm-primary dark:bg-dm-primary": !o,
+		"group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !o
+	}], a),
+	disabled: o,
+	...c
+}), B = ({ required: t, children: n, className: r, ...i }) => /* @__PURE__ */ f("label", {
+	className: e("cursor-pointer", r),
+	...i,
+	children: [n, t && /* @__PURE__ */ d("span", {
+		className: "text-danger ml-1",
+		"data-testid": "required-indicator",
+		children: "*"
+	})]
+}), V = ({ children: e, helpText: t, error: n, "data-testid": r }) => /* @__PURE__ */ f("div", {
+	className: "flex flex-col gap-1",
+	"data-testid": r,
+	children: [
+		e,
+		t && /* @__PURE__ */ d("small", {
+			"data-testid": r ? `${r}-help-text` : "help-text",
+			className: "text-gray-500 dark:text-gray-400",
+			children: t
+		}),
+		n && /* @__PURE__ */ d("span", {
+			"data-testid": r ? `${r}-error` : "error",
+			className: "text-danger",
+			children: n
+		})
+	]
+}), Te = ({ label: e, inputClassName: t, required: n, hiddenRequired: r, error: i, helpText: o, "data-testid": s, ...c }) => {
+	let l = a();
+	return /* @__PURE__ */ f(V, {
+		error: i,
+		helpText: o,
+		"data-testid": s,
+		children: [/* @__PURE__ */ d(B, {
+			htmlFor: l,
+			required: n,
+			children: e
+		}), /* @__PURE__ */ d(z, {
+			id: l,
+			className: t,
+			required: n || r,
+			feedback: i ? "error" : void 0,
+			...c
+		})]
+	});
+}, Ee = ({ containerClassName: t, className: r, size: i, ...a }) => {
+	let { flag: o, toggle: s, setToFalse: l } = J(), u = c(null), p = n(({ relatedTarget: e }) => {
+		u.current?.contains(e) || l();
+	}, [u, l]);
+	return /* @__PURE__ */ f("div", {
+		className: e("group relative", t),
+		ref: u,
+		onBlurCapture: p,
+		children: [/* @__PURE__ */ d(z, {
+			type: o ? "text" : "password",
+			className: e({
+				"pr-10": i !== "sm",
+				"pr-8": i === "sm"
+			}, r),
+			size: i,
+			"data-testid": "input",
+			...a
+		}), /* @__PURE__ */ d("button", {
+			type: "button",
+			onClick: s,
+			title: o ? "Hide password" : "Show password",
+			"aria-label": o ? "Hide password" : "Show password",
+			className: e("absolute top-[50%] translate-y-[-50%] px-1 cursor-pointer", "text-placeholder hover:text-lm-text hover:dark:text-dm-text transition-colors", {
+				"right-1.5": i !== "sm",
+				"scale-85 right-1": i === "sm"
+			}),
+			tabIndex: -1,
+			children: /* @__PURE__ */ d(A, { icon: o ? ee : E })
+		})]
+	});
+}, De = ({ label: e, inputClassName: t, required: n, hiddenRequired: r, error: i, helpText: o, "data-testid": s, ...c }) => {
+	let l = a();
+	return /* @__PURE__ */ f(V, {
+		error: i,
+		helpText: o,
+		"data-testid": s,
+		children: [/* @__PURE__ */ d(B, {
+			htmlFor: l,
+			required: n,
+			children: e
+		}), /* @__PURE__ */ d(Ee, {
+			id: l,
+			className: t,
+			required: n || r,
+			feedback: i ? "error" : void 0,
+			...c
+		})]
+	});
+}, Oe = ({ className: t, size: n = "md", feedback: r, disabled: i, ...a }) => /* @__PURE__ */ d("select", {
+	className: e("w-full rounded-md border appearance-none pr-9", "bg-(image:--chevron-down) bg-no-repeat bg-position-[right_0.75rem_center] bg-size-[16px_12px]", {
+		"focus-ring": !r,
+		"focus-ring-danger": r === "error",
+		"border-lm-input-border dark:border-dm-input-border": !r,
+		"border-danger": r === "error",
+		"pl-2 py-1 text-sm": n === "sm",
+		"pl-3 py-1.5": n === "md",
+		"pl-4 py-2 text-xl": n === "lg",
+		"bg-lm-disabled-input dark:bg-dm-disabled-input": i,
+		"bg-lm-primary dark:bg-dm-primary group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !i
+	}, t),
+	disabled: i,
+	...a
+}), ke = ({ selectClassName: e, label: t, error: n, helpText: r, required: i, hiddenRequired: o, "data-testid": s, ...c }) => {
+	let l = a();
+	return /* @__PURE__ */ f(V, {
+		error: n,
+		helpText: r,
+		"data-testid": s,
+		children: [/* @__PURE__ */ d(B, {
+			htmlFor: l,
+			required: i,
+			children: t
+		}), /* @__PURE__ */ d(Oe, {
+			id: l,
+			className: e,
+			required: i || o,
+			feedback: n ? "error" : void 0,
+			...c
+		})]
+	});
+}, Ae = ({ onChange: t, containerClassName: r, inputClassName: i, size: a = "lg", loading: o = !1, variant: s = "default", immediate: c = !1, ...l }) => {
+	let { setTimeout: u, clearCurrentTimeout: p } = q(500), m = n((e) => {
+		!e || c ? (p(), t(e)) : u(() => t(e));
+	}, [
+		p,
+		c,
+		t,
+		u
+	]);
+	return /* @__PURE__ */ f("div", {
+		className: e("group relative focus-within:z-10", r),
+		children: [s === "default" && /* @__PURE__ */ d(A, {
+			icon: o ? C : D,
+			spin: o,
+			className: e("absolute top-[50%] translate-y-[-50%] transition-colors", "text-placeholder group-focus-within:text-lm-text dark:group-focus-within:text-dm-text", {
+				"left-3": a !== "sm",
+				"scale-85 left-2": a === "sm"
+			})
+		}), /* @__PURE__ */ d(z, {
+			variant: s,
+			type: "search",
+			className: e(s === "default" && {
+				"pl-9": a !== "sm",
+				"pl-7": a === "sm"
+			}, i),
+			placeholder: "Search...",
+			onChange: (e) => m(e.target.value),
+			size: a,
+			...l
+		})]
+	});
+};
+//#endregion
+//#region src/form/SearchCombobox.tsx
+function je({ searchResults: t, onSearch: r, onSelectSearchResult: i, renderSearchResult: u, size: p = "md", listboxSpan: m = "full", onFocus: h, containerClassName: g, listboxClassName: _, ref: v, ...y }) {
+	let b = a(), [x, S] = l(), C = c(null);
+	o(v, () => C.current);
+	let w = s(() => t ? x ?? [...t.keys()][0] : void 0, [x, t]), T = n((e) => {
+		i(e), r(""), C.current.value = "";
+	}, [
+		r,
+		i,
+		C
+	]);
+	return /* @__PURE__ */ f("div", {
+		className: e("relative", g),
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || r("");
+		},
+		children: [/* @__PURE__ */ d(Ae, {
+			onChange: r,
+			size: p,
+			ref: C,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": !!t,
+			"aria-controls": b,
+			"aria-activedescendant": w ? `${b}_${w}` : void 0,
+			autoComplete: "off",
+			autoCorrect: "off",
+			onFocus: (e) => {
+				h?.(e), r(e.target.value);
+			},
+			...y
+		}), t && /* @__PURE__ */ d(_e, {
+			id: b,
+			items: t,
+			anchor: C,
+			onSelectItem: T,
+			onActiveItemChange: S,
+			renderItem: u,
+			className: e("absolute top-full mt-1 z-10", {
+				"min-w-60": m === "auto",
+				"w-full": m === "full"
+			}, _),
+			"aria-label": "Matching items",
+			noItemsMessage: "No results found matching search"
+		})]
+	});
 }
-const at = k(ot), st = ({ name: e, color: r }) => /* @__PURE__ */ g("div", { className: "inline-flex items-center gap-2", children: [
-  /* @__PURE__ */ a("div", { "aria-hidden": !0, className: "w-4 h-4 rounded-full", style: { backgroundColor: r } }),
-  e
-] }), lt = ({ tag: e, color: r, size: t, onRemove: n }) => (
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-  /* @__PURE__ */ g(
-    "li",
-    {
-      className: d(
-        "inline-flex items-center gap-1 font-bold [&]:rounded-md",
-        {
-          "px-1 text-sm": t === "sm",
-          "py-0.25 px-1.5": t === "md",
-          "py-0.5 px-1.5": t === "lg"
-        }
-      ),
-      style: {
-        backgroundColor: r,
-        color: ct(r) ? "#000" : "#fff"
-      },
-      onClick: (o) => o.stopPropagation(),
-      children: [
-        e,
-        /* @__PURE__ */ a(Y, { label: `Remove ${e}`, solid: !0, size: "sm", onClick: () => n(e) })
-      ]
-    }
-  )
-), re = "#99a1af", lr = ({
-  tags: e,
-  selectedTags: r = [],
-  onTagsChange: t,
-  getColorForTag: n,
-  searchMode: o = "startsWith",
-  immutable: s = !1,
-  size: l = "md",
-  disabled: i,
-  containerClassName: c,
-  ...u
-}) => {
-  const { searchResults: b, onSearch: x } = yt({ tags: e, selectedTags: r, searchMode: o, allowAdding: !s }), f = w((m) => {
-    const y = (m.match(/Add\s+"([^"]+)"\s+tag/)?.[1] ?? m).split(",").map(ce);
-    t?.([.../* @__PURE__ */ new Set([...r, ...y])]);
-  }, [t, r]), h = w(
-    (m) => t?.(r.filter((v) => v !== m)),
-    [t, r]
-  ), p = C(null);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ g(
-      "div",
-      {
-        className: d(
-          "rounded-md flex flex-wrap gap-1",
-          "border border-lm-input-border dark:border-dm-input-border",
-          "cursor-text focus-within:focus-within-ring",
-          {
-            "p-0.5": l === "sm",
-            "p-1.25": l === "md",
-            "p-2": l === "lg",
-            "bg-lm-disabled-input dark:bg-dm-disabled-input": i,
-            "bg-lm-primary dark:bg-dm-primary": !i,
-            // Use different background color when rendered inside a card
-            "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !i
-          },
-          c
-        ),
-        onClick: (m) => {
-          m.target !== p.current && p.current?.focus();
-        },
-        children: [
-          /* @__PURE__ */ a("ul", { className: "m-0 p-0 flex flex-wrap gap-1", children: r.map((m, v) => {
-            const y = n?.(m) ?? re;
-            return /* @__PURE__ */ a(lt, { tag: m, color: y, onRemove: h, size: l }, `${m}${v}`);
-          }) }),
-          /* @__PURE__ */ a(
-            at,
-            {
-              variant: "unstyled",
-              listboxSpan: "auto",
-              containerClassName: "flex items-center",
-              listboxClassName: "whitespace-nowrap",
-              inputClassName: d(
-                "no-clear-button",
-                {
-                  "px-1 text-sm": l === "sm",
-                  "px-2 h-[26px]": l === "md",
-                  "px-3 text-xl": l === "lg"
-                }
-              ),
-              searchResults: b,
-              onSearch: x,
-              onSelectSearchResult: f,
-              renderSearchResult: (m) => m.match(/Add\s+"([^"]+)"\s+tag/) ? m : /* @__PURE__ */ a(st, { name: m, color: n?.(m) ?? re }),
-              onKeyDown: (m) => {
-                m.key === "Backspace" && !b && h(r[r.length - 1]);
-              },
-              size: l,
-              disabled: i,
-              ref: p,
-              immediate: !0,
-              ...u
-            }
-          )
-        ]
-      }
-    )
-  );
-}, ir = k(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  de,
-  {
-    ref: t,
-    className: d(
-      "rounded-full min-w-8 w-8 h-4",
-      "bg-(image:--circle-grey-dark) dark:bg-(image:--circle-grey-light) checked:bg-(image:--circle-white)",
-      "focus-visible:not-checked:bg-(image:--circle-blue-light)",
-      "checked:bg-right transition-[background-position]",
-      e
-    ),
-    ...r
-  }
-));
-function it(e, { elementsSelector: r, focusFirstItem: t = !1, vertical: n = !0, horizontal: o = !0 }) {
-  const s = P(() => {
-    const c = [];
-    return n && c.push("ArrowDown"), o && c.push("ArrowRight"), c;
-  }, [o, n]), l = P(() => {
-    const c = [];
-    return n && c.push("ArrowUp"), o && c.push("ArrowLeft"), c;
-  }, [o, n]), i = P(() => [...s, ...l], [s, l]);
-  R(() => {
-    const c = e.current;
-    if (!c)
-      return () => {
-      };
-    const u = new AbortController(), b = () => [...c.querySelectorAll(r)], x = b(), f = Math.max(x.findIndex((h) => h.dataset.selected === "true"), 0);
-    return x.forEach((h, p) => {
-      h.tabIndex = p === f ? 0 : -1, t && p === f && h.focus();
-    }), c.addEventListener("keydown", (h) => {
-      if (!i.includes(h.key))
-        return;
-      h.preventDefault();
-      const p = b(), m = p.findIndex((y) => y.tabIndex === 0), v = s.includes(h.key) ? p[m + 1] ?? p[0] : p[m - 1] ?? p[p.length - 1];
-      p.forEach((y) => {
-        y.tabIndex = -1;
-      }), v.tabIndex = 0, v.focus();
-    }, { signal: u.signal }), () => u.abort();
-  }, [i, e, r, t, s]);
+//#endregion
+//#region src/form/TagsAutocomplete.tsx
+var Me = ({ name: e, color: t }) => /* @__PURE__ */ f("div", {
+	className: "inline-flex items-center gap-2",
+	children: [/* @__PURE__ */ d("div", {
+		"aria-hidden": !0,
+		className: "w-4 h-4 rounded-full",
+		style: { backgroundColor: t }
+	}), e]
+}), Ne = ({ tag: t, color: n, size: r, onRemove: i }) => /* @__PURE__ */ f("li", {
+	className: e("inline-flex items-center gap-1 font-bold [&]:rounded-md", {
+		"px-1 text-sm": r === "sm",
+		"py-0.25 px-1.5": r === "md",
+		"py-0.5 px-1.5": r === "lg"
+	}),
+	style: {
+		backgroundColor: n,
+		color: ze(n) ? "#000" : "#fff"
+	},
+	onClick: (e) => e.stopPropagation(),
+	children: [t, /* @__PURE__ */ d(R, {
+		label: `Remove ${t}`,
+		solid: !0,
+		size: "sm",
+		onClick: () => i(t)
+	})]
+}), Pe = "#99a1af", Fe = ({ tags: t, selectedTags: r = [], onTagsChange: i, getColorForTag: a, searchMode: o = "startsWith", immutable: s = !1, size: l = "md", disabled: u, containerClassName: p, ...m }) => {
+	let { searchResults: h, onSearch: g } = $e({
+		tags: t,
+		selectedTags: r,
+		searchMode: o,
+		allowAdding: !s
+	}), _ = n((e) => {
+		let t = (e.match(/Add\s+"([^"]+)"\s+tag/)?.[1] ?? e).split(",").map(W);
+		i?.([...new Set([...r, ...t])]);
+	}, [i, r]), v = n((e) => i?.(r.filter((t) => t !== e)), [i, r]), y = c(null);
+	return /* @__PURE__ */ f("div", {
+		className: e("rounded-md flex flex-wrap gap-1", "border border-lm-input-border dark:border-dm-input-border", "cursor-text focus-within:focus-within-ring", {
+			"p-0.5": l === "sm",
+			"p-1.25": l === "md",
+			"p-2": l === "lg",
+			"bg-lm-disabled-input dark:bg-dm-disabled-input": u,
+			"bg-lm-primary dark:bg-dm-primary": !u,
+			"group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !u
+		}, p),
+		onClick: (e) => {
+			e.target !== y.current && y.current?.focus();
+		},
+		children: [/* @__PURE__ */ d("ul", {
+			className: "m-0 p-0 flex flex-wrap gap-1",
+			children: r.map((e, t) => /* @__PURE__ */ d(Ne, {
+				tag: e,
+				color: a?.(e) ?? Pe,
+				onRemove: v,
+				size: l
+			}, `${e}${t}`))
+		}), /* @__PURE__ */ d(je, {
+			variant: "unstyled",
+			listboxSpan: "auto",
+			containerClassName: "flex items-center",
+			listboxClassName: "whitespace-nowrap",
+			inputClassName: e("no-clear-button", {
+				"px-1 text-sm": l === "sm",
+				"px-2 h-[26px]": l === "md",
+				"px-3 text-xl": l === "lg"
+			}),
+			searchResults: h,
+			onSearch: g,
+			onSelectSearchResult: _,
+			renderSearchResult: (e) => e.match(/Add\s+"([^"]+)"\s+tag/) ? e : /* @__PURE__ */ d(Me, {
+				name: e,
+				color: a?.(e) ?? Pe
+			}),
+			onKeyDown: (e) => {
+				e.key === "Backspace" && !h && v(r[r.length - 1]);
+			},
+			size: l,
+			disabled: u,
+			ref: y,
+			immediate: !0,
+			...m
+		})]
+	});
+}, Ie = ({ className: t, ...n }) => /* @__PURE__ */ d(Ce, {
+	className: e("rounded-full min-w-8 w-8 h-4", "bg-(image:--circle-grey-dark) dark:bg-(image:--circle-grey-light) checked:bg-(image:--circle-white)", "focus-visible:not-checked:bg-(image:--circle-blue-light)", "checked:bg-right transition-[background-position]", t),
+	...n
+});
+//#endregion
+//#region src/hooks/use-arrow-key-navigation.ts
+function H(e, { elementsSelector: t, focusFirstItem: n = !1, vertical: r = !0, horizontal: a = !0 }) {
+	let o = s(() => {
+		let e = [];
+		return r && e.push("ArrowDown"), a && e.push("ArrowRight"), e;
+	}, [a, r]), c = s(() => {
+		let e = [];
+		return r && e.push("ArrowUp"), a && e.push("ArrowLeft"), e;
+	}, [a, r]), l = s(() => [...o, ...c], [o, c]);
+	i(() => {
+		let r = e.current;
+		if (!r) return () => {};
+		let i = new AbortController(), a = () => [...r.querySelectorAll(t)], s = a(), c = Math.max(s.findIndex((e) => e.dataset.selected === "true"), 0);
+		return s.forEach((e, t) => {
+			e.tabIndex = t === c ? 0 : -1, n && t === c && e.focus();
+		}), r.addEventListener("keydown", (e) => {
+			if (!l.includes(e.key)) return;
+			e.preventDefault();
+			let t = a(), n = t.findIndex((e) => e.tabIndex === 0), r = o.includes(e.key) ? t[n + 1] ?? t[0] : t[n - 1] ?? t[t.length - 1];
+			t.forEach((e) => {
+				e.tabIndex = -1;
+			}), r.tabIndex = 0, r.focus();
+		}, { signal: i.signal }), () => i.abort();
+	}, [
+		l,
+		e,
+		t,
+		n,
+		o
+	]);
 }
-const dr = () => {
-  const e = ke();
-  return w(() => e(-1), [e]);
-}, dt = 128;
-function ct(e) {
-  const [r, t, n] = (e.match(/../g) ?? []).map((s) => parseInt(s, 16) || 0);
-  return Math.round(Math.sqrt(0.299 * r ** 2 + 0.587 * t ** 2 + 0.114 * n ** 2)) >= dt;
+//#endregion
+//#region src/hooks/use-go-back.ts
+var Le = () => {
+	let e = g();
+	return n(() => e(-1), [e]);
+}, Re = 128;
+function ze(e) {
+	let [t, n, r] = (e.match(/../g) ?? []).map((e) => parseInt(e, 16) || 0);
+	return Math.round(Math.sqrt(.299 * t ** 2 + .587 * n ** 2 + .114 * r ** 2)) >= Re;
 }
-const cr = ({ text: e, className: r, size: t = "lg", initialCopied: n = !1, navigator_: o = globalThis.navigator, ...s }) => {
-  const [l, i] = kt({ initialValue: n }), c = w(
-    () => o.clipboard.writeText(e).then(i),
-    [o.clipboard, e, i]
-  );
-  return /* @__PURE__ */ a(
-    "button",
-    {
-      type: "button",
-      className: d(
-        "focus-ring rounded-sm cursor-pointer",
-        {
-          "text-md": t === "sm",
-          "text-lg": t === "md",
-          "text-xl": t === "lg"
-        },
-        r
-      ),
-      "aria-label": `Copy ${e} to clipboard`,
-      title: "Copy to clipboard",
-      onClick: c,
-      ...s,
-      children: /* @__PURE__ */ a(N, { icon: l ? Ie : je })
-    }
-  );
-}, mt = (e) => {
-  const r = new URLSearchParams(e), t = {};
-  return r.forEach((n, o) => {
-    if (o.endsWith("[]")) {
-      const s = o.slice(0, -2);
-      t[s] ??= [], t[s].push(n);
-    } else
-      t[o] = n;
-  }), t;
-}, mr = (e) => {
-  const r = new URLSearchParams();
-  for (const [t, n] of Object.entries(e))
-    n !== void 0 && (Array.isArray(n) ? n.forEach((o) => r.append(`${t}[]`, `${o}`)) : r.append(t, `${n}`));
-  return r.toString();
-}, ur = () => {
-  const { search: e } = oe();
-  return P(() => mt(e), [e]);
-}, ut = /\s+/g, ce = (e) => e.trim().toLowerCase().replace(ut, "-"), pt = new Intl.NumberFormat("en-US"), gt = (e) => pt.format(Number(e)), ne = 10, pr = (e) => Math.ceil(e / ne) * ne, D = 2, G = "...", bt = (e, r) => Array.from({ length: r - e }, (t, n) => e + n), ht = (e, r) => {
-  const t = bt(
-    Math.max(D, e - D),
-    Math.min(r - 1, e + D) + 1
-  );
-  return e - D > D && t.unshift(G), e + D < r - 1 && t.push(G), t.unshift(1), t.push(r), t;
-}, F = (e) => e === G, ft = (e) => F(e) ? e : gt(e), xt = (e, r) => F(e) ? `${e}_${r}` : `${e}`;
-function yt({ tags: e, selectedTags: r, searchMode: t, searchLimit: n = 5, allowAdding: o = !1 }) {
-  const [s, l] = L(), i = w((c) => {
-    const u = c.toLowerCase().trim();
-    if (!u) {
-      l(void 0);
-      return;
-    }
-    const b = e.filter((x) => r.includes(x) ? !1 : x.toLowerCase()[t](u)).slice(0, n);
-    o && b.push(`Add "${u.split(",").map(ce).join(",")}" tag`), l(new Map(b.map((x) => [x, x])));
-  }, [o, n, t, r, e]);
-  return { searchResults: s, onSearch: i };
+//#endregion
+//#region src/utils/CopyToClipboardButton.tsx
+var Be = ({ text: t, className: r, size: i = "lg", initialCopied: a = !1, navigator_: o = globalThis.navigator, ...s }) => {
+	let [c, l] = tt({ initialValue: a }), u = n(() => o.clipboard.writeText(t).then(l), [
+		o.clipboard,
+		t,
+		l
+	]);
+	return /* @__PURE__ */ d("button", {
+		type: "button",
+		className: e("focus-ring rounded-sm cursor-pointer", {
+			"text-md": i === "sm",
+			"text-lg": i === "md",
+			"text-xl": i === "lg"
+		}, r),
+		"aria-label": `Copy ${t} to clipboard`,
+		title: "Copy to clipboard",
+		onClick: u,
+		...s,
+		children: /* @__PURE__ */ d(A, { icon: c ? v : le })
+	});
+}, U = (e) => {
+	let t = new URLSearchParams(e), n = {};
+	return t.forEach((e, t) => {
+		if (t.endsWith("[]")) {
+			let r = t.slice(0, -2);
+			n[r] ??= [], n[r].push(e);
+		} else n[t] = e;
+	}), n;
+}, Ve = (e) => {
+	let t = new URLSearchParams();
+	for (let [n, r] of Object.entries(e)) r !== void 0 && (Array.isArray(r) ? r.forEach((e) => t.append(`${n}[]`, `${e}`)) : t.append(n, `${r}`));
+	return t.toString();
+}, He = () => {
+	let { search: e } = h();
+	return s(() => U(e), [e]);
+}, Ue = /\s+/g, W = (e) => e.trim().toLowerCase().replace(Ue, "-"), We = new Intl.NumberFormat("en-US"), Ge = (e) => We.format(Number(e)), Ke = 10, qe = (e) => Math.ceil(e / Ke) * Ke, G = 2, Je = "...", Ye = (e, t) => Array.from({ length: t - e }, (t, n) => e + n), Xe = (e, t) => {
+	let n = Ye(Math.max(G, e - G), Math.min(t - 1, e + G) + 1);
+	return e - G > G && n.unshift("..."), e + G < t - 1 && n.push("..."), n.unshift(1), n.push(t), n;
+}, K = (e) => e === "...", Ze = (e) => K(e) ? e : Ge(e), Qe = (e, t) => K(e) ? `${e}_${t}` : `${e}`;
+//#endregion
+//#region src/hooks/use-tags-search.ts
+function $e({ tags: e, selectedTags: t, searchMode: r, searchLimit: i = 5, allowAdding: a = !1 }) {
+	let [o, s] = l();
+	return {
+		searchResults: o,
+		onSearch: n((n) => {
+			let o = n.toLowerCase().trim();
+			if (!o) {
+				s(void 0);
+				return;
+			}
+			let c = e.filter((e) => t.includes(e) ? !1 : e.toLowerCase()[r](o)).slice(0, i);
+			a && c.push(`Add "${o.split(",").map(W).join(",")}" tag`), s(new Map(c.map((e) => [e, e])));
+		}, [
+			a,
+			i,
+			r,
+			t,
+			e
+		])
+	};
 }
-function me(e, r = globalThis.setTimeout, t = globalThis.clearTimeout) {
-  const n = C(null), o = w(() => {
-    n.current && t(n.current);
-  }, [t]), s = w((l, i) => {
-    o(), n.current = r(() => {
-      l(), n.current = null;
-    }, i ?? e);
-  }, [o, e, r]);
-  return R(() => o, [o]), P(
-    () => ({ setTimeout: s, clearCurrentTimeout: o }),
-    [o, s]
-  );
+//#endregion
+//#region src/hooks/use-timeout.ts
+function q(e, t = globalThis.setTimeout, r = globalThis.clearTimeout) {
+	let a = c(null), o = n(() => {
+		a.current && r(a.current);
+	}, [r]), l = n((n, r) => {
+		o(), a.current = t(() => {
+			n(), a.current = null;
+		}, r ?? e);
+	}, [
+		o,
+		e,
+		t
+	]);
+	return i(() => o, [o]), s(() => ({
+		setTimeout: l,
+		clearCurrentTimeout: o
+	}), [o, l]);
 }
-const wt = 2e3, kt = ({ initialValue: e = !1, delay: r = wt } = {}, t = globalThis.setTimeout, n = globalThis.clearTimeout) => {
-  const { setTimeout: o } = me(r, t, n), [s, l] = L(e), i = C(e), c = w(() => {
-    l(!i.current), o(() => l(i.current));
-  }, [o]);
-  return [s, c];
+//#endregion
+//#region src/hooks/use-timeout-toggle.ts
+var et = 2e3, tt = ({ initialValue: e = !1, delay: t = et } = {}, r = globalThis.setTimeout, i = globalThis.clearTimeout) => {
+	let { setTimeout: a } = q(t, r, i), [o, s] = l(e), u = c(e);
+	return [o, n(() => {
+		s(!u.current), a(() => s(u.current));
+	}, [a])];
 };
-function ue(e = !1) {
-  const [r, t] = L(e), n = w(() => t((l) => !l), []), o = w(() => t(!0), []), s = w(() => t(!1), []);
-  return { flag: r, toggle: n, setToTrue: o, setToFalse: s };
+//#endregion
+//#region src/hooks/use-toggle.ts
+function J(e = !1) {
+	let [t, r] = l(e);
+	return {
+		flag: t,
+		toggle: n(() => r((e) => !e), []),
+		setToTrue: n(() => r(!0), []),
+		setToFalse: n(() => r(!1), [])
+	};
 }
-const pe = K({}), vt = ({ className: e, selected: r, disabled: t, onClick: n, ...o }) => {
-  const s = "to" in o && typeof o.to == "string", l = s ? W : "button", { onItemClick: i } = E(pe);
-  return (
-    // @ts-expect-error The Tag is inferred from provided props, so they should always match
-    /* @__PURE__ */ a(
-      l,
-      {
-        role: "menuitem",
-        "data-selected": r,
-        className: d(
-          "flex items-center gap-2",
-          "w-full px-3 py-1.5 focus-ring",
-          // Overwrite link styles in case a Link is being used
-          "no-underline text-inherit",
-          {
-            "cursor-pointer": !t,
-            "pointer-events-none opacity-50": t,
-            "bg-lm-secondary dark:bg-dm-secondary": r && !t,
-            "highlight:bg-lm-secondary dark:highlight:bg-dm-secondary highlight:z-1 relative": !r && !t
-          },
-          e
-        ),
-        tabIndex: -1,
-        disabled: s ? void 0 : t,
-        "aria-disabled": s ? t : void 0,
-        type: s ? void 0 : "button",
-        onClick: (c) => {
-          n?.(c), i?.();
-        },
-        ...o
-      }
-    )
-  );
-}, Nt = () => (
-  // TODO Use an <hr /> tag once tailwind styles are not set with !important
-  /* @__PURE__ */ a("div", { role: "separator", "aria-hidden": !0, className: "border-b border-lm-border dark:border-dm-border my-2" })
-), Ct = ({ children: e }) => /* @__PURE__ */ a(
-  "div",
-  {
-    role: "heading",
-    "aria-level": 6,
-    "aria-hidden": !0,
-    className: d(
-      "flex items-center w-full px-3 py-1.5",
-      "text-gray-500 text-sm font-semibold"
-    ),
-    onClick: (r) => r.stopPropagation(),
-    children: e
-  }
-), Tt = ({ className: e, ...r }) => /* @__PURE__ */ a("div", { className: d("px-3 py-1.5", e), ...r }), At = ({
-  children: e,
-  className: r,
-  focusableElementsSelector: t = '[role="menuitem"]:not([disabled]):not([aria-disabled])',
-  focusFirstItem: n = !1,
-  onItemClick: o,
-  ...s
-}) => {
-  const l = C(null);
-  return it(l, { elementsSelector: t, focusFirstItem: n }), /* @__PURE__ */ a(I, { ref: l, role: "menu", className: d("py-2 whitespace-nowrap", r), ...s, children: /* @__PURE__ */ a(pe.Provider, { value: { onItemClick: o }, children: e }) });
-}, _ = Object.assign(At, { Item: vt, Separator: Nt, Title: Ct, Misc: Tt }), It = ({
-  children: e,
-  menuAlignment: r = "left",
-  buttonVariant: t = "button",
-  buttonContent: n,
-  buttonClassName: o,
-  buttonSize: s = "md",
-  buttonDisabled: l = !1,
-  containerClassName: i,
-  menuClassName: c,
-  caretless: u,
-  buttonLabel: b,
-  menuOffset: x = 3
-}) => {
-  const [f, h] = L(!1), p = w(() => h(!1), []), m = C(null), { refs: v, floatingStyles: y, context: q } = se({
-    open: f,
-    onOpenChange: h,
-    placement: r === "right" ? "bottom-end" : "bottom-start",
-    middleware: [De(), Me(x)],
-    // eslint-disable-next-line react-compiler/react-compiler
-    elements: { reference: m.current }
-  }), T = _e(q), { getReferenceProps: $, getFloatingProps: j } = le([
-    T
-  ]), U = S(), Q = C(null);
-  return R(() => {
-    const A = Q.current;
-    if (!A || !f)
-      return () => {
-      };
-    const z = new AbortController();
-    return document.body.addEventListener("click", (ye) => {
-      ye.composedPath().includes(A) || p();
-    }, { signal: z.signal }), () => z.abort();
-  }, [p, f]), // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  /* @__PURE__ */ g(
-    "div",
-    {
-      ref: Q,
-      className: d("relative inline-block", i),
-      onKeyDown: (A) => {
-        A.key === "Escape" && p();
-      },
-      onBlur: (A) => {
-        A.relatedTarget && !Q.current.contains(A.relatedTarget) && p();
-      },
-      children: [
-        /* @__PURE__ */ g(
-          "button",
-          {
-            ref: m,
-            ...$(),
-            type: "button",
-            "aria-haspopup": !0,
-            "aria-expanded": f,
-            "aria-controls": U,
-            "aria-label": b,
-            disabled: l,
-            className: d(
-              "flex items-center rounded-md focus-ring",
-              {
-                "justify-between": !u,
-                "cursor-pointer": !l,
-                "pointer-events-none opacity-50": l,
-                // Button variant
-                "border border-lm-border dark:border-dm-border": t === "button",
-                "bg-lm-primary dark:bg-dm-primary": t === "button",
-                // Use different bg color when inside a card
-                "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": t === "button",
-                // Link variant
-                "text-lm-brand dark:text-dm-brand": t === "link",
-                "highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline": t === "link",
-                // Button sizes
-                "px-1.5 py-1 text-sm": t !== "text" && s === "sm",
-                "px-3 py-1.5": t !== "text" && s === "md",
-                "px-4 py-2 text-lg": t !== "text" && s === "lg",
-                "gap-x-1.5": s === "sm",
-                "gap-x-2": s !== "sm"
-              },
-              o
-            ),
-            onKeyDown: (A) => {
-              A.key === "ArrowDown" && (A.preventDefault(), h(!0));
-            },
-            children: [
-              n,
-              !u && /* @__PURE__ */ a(N, { icon: Oe, size: "xs", widthAuto: !0 })
-            ]
-          }
-        ),
-        f && /* @__PURE__ */ a(
-          "div",
-          {
-            ref: v.setFloating,
-            style: y,
-            className: "min-w-full z-500",
-            ...j(),
-            children: /* @__PURE__ */ a(
-              _,
-              {
-                className: c,
-                id: U,
-                focusableElementsSelector: '[role="menuitem"]:not([disabled]):not([aria-disabled]),input:not([disabled]),select:not([disabled])',
-                focusFirstItem: !0,
-                onItemClick: p,
-                children: e
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, O = Object.assign(It, {
-  Item: _.Item,
-  Separator: _.Separator,
-  Title: _.Title,
-  Misc: _.Misc
-}), Ot = k(({ className: e, disabled: r, size: t = "md", type: n = "button", ...o }, s) => /* @__PURE__ */ a(
-  "button",
-  {
-    className: d(
-      "inline-flex rounded-md focus-ring",
-      "text-lm-brand dark:text-dm-brand",
-      "highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline",
-      {
-        "px-1.5 py-1 text-sm": t === "sm",
-        "px-3 py-1.5": t === "md",
-        "px-4 py-2 text-lg": t === "lg",
-        "cursor-pointer": !r,
-        "pointer-events-none opacity-65": r
-      },
-      e
-    ),
-    disabled: r,
-    type: n,
-    ...o,
-    ref: s
-  }
-)), Rt = ({ className: e, active: r, ...t }) => /* @__PURE__ */ a("li", { role: "menuitem", className: "w-full flex", "data-active": r, children: /* @__PURE__ */ a(
-  W,
-  {
-    className: d(
-      "px-2 py-3",
-      "max-md:w-full max-md:px-3 max-md:py-2",
-      "text-white no-underline highlight:opacity-100 transition-opacity",
-      {
-        "opacity-60": !r,
-        "opacity-100": r
-      },
-      e
-    ),
-    ...t
-  }
-) }), Lt = ({ containerClassName: e, buttonClassName: r, menuClassName: t, active: n, ...o }) => /* @__PURE__ */ a("li", { role: "menuitem", "aria-haspopup": !0, className: "w-full flex", "data-active": n, children: /* @__PURE__ */ a(
-  O,
-  {
-    containerClassName: d("max-md:w-full", e),
-    buttonVariant: "text",
-    buttonClassName: d(
-      "px-2 py-3",
-      "max-md:w-full max-md:px-3 max-md:py-2",
-      "text-white highlight:opacity-100 transition-opacity",
-      {
-        "opacity-60": !n,
-        "opacity-100": n
-      },
-      r
-    ),
-    menuAlignment: "right",
-    menuOffset: -3,
-    menuClassName: d("mx-2", t),
-    ...o
-  }
-) }), Pt = ({ className: e, brand: r, children: t }) => {
-  const { flag: n, toggle: o, setToFalse: s } = ue(), l = S(), i = S(), { pathname: c } = oe();
-  return R(() => s(), [c, s]), /* @__PURE__ */ g(
-    "nav",
-    {
-      className: d(
-        "w-full relative",
-        "bg-lm-main dark:bg-dm-main",
-        "flex max-md:flex-col items-center justify-between",
-        e
-      ),
-      children: [
-        /* @__PURE__ */ g("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ a(
-            "h4",
-            {
-              className: d(
-                "text-white px-4 py-3",
-                "max-md:w-full max-md:flex max-md:flex-col items-center"
-              ),
-              children: r
-            }
-          ),
-          /* @__PURE__ */ a(
-            ie,
-            {
-              id: i,
-              variant: "secondary",
-              className: d(
-                "absolute right-0 top-[50%] translate-y-[-50%]",
-                "md:hidden mx-2 [&]:px-2",
-                "opacity-60 highlight:opacity-100 transition-opacity",
-                "[&]:text-white [&]:border-white [&]:highlight:bg-transparent"
-              ),
-              onClick: o,
-              "aria-label": `${n ? "Hide" : "Show"} menu`,
-              "aria-controls": l,
-              children: /* @__PURE__ */ a(N, { icon: n ? Re : Le })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ a(
-          "ul",
-          {
-            id: l,
-            "aria-labelledby": i,
-            role: "menu",
-            className: d(
-              "m-0 p-0",
-              "max-md:w-full md:mr-2 max-md:absolute max-md:top-full z-2000",
-              "flex max-md:flex-col items-center",
-              "bg-lm-main dark:bg-dm-main",
-              { "max-md:hidden": !n }
-            ),
-            children: t
-          }
-        )
-      ]
-    }
-  );
-}, gr = Object.assign(Pt, { MenuItem: Rt, Dropdown: Lt }), ge = K(null), Et = ({ className: e, to: r, ...t }) => {
-  const n = E(ge);
-  return /* @__PURE__ */ a(
-    ve,
-    {
-      role: "menuitem",
-      to: r,
-      className: ({ isActive: o }) => d(
-        "px-4 pt-2 pb-[calc(0.5rem-3px)] border-b-3",
-        "highlight:text-lm-brand dark:highlight:text-dm-brand",
-        "font-bold text-center no-underline transition-colors",
-        "rounded-none outline-none focus-visible:inset-ring-2",
-        "focus-visible:inset-ring-lm-brand/50 dark:focus-visible:inset-ring-dm-brand/50",
-        {
-          "text-lm-brand dark:text-dm-brand": o,
-          "border-b-lm-brand dark:border-b-dm-brand active": o,
-          "border-b-transparent text-gray-500": !o,
-          "flex-grow": n?.fill
-        },
-        e
-      ),
-      ...t
-    }
-  );
-}, St = ({ children: e, className: r, fill: t }) => /* @__PURE__ */ a(ge.Provider, { value: { fill: t }, children: /* @__PURE__ */ a(I, { role: "menubar", className: d("flex overflow-hidden", r), children: e }) }), br = Object.assign(St, { Pill: Et }), be = [
-  "border border-r-0 last:border-r border-lm-border dark:border-dm-border",
-  "rounded-none first:rounded-l last:rounded-r"
-], he = (e = !1) => d(
-  be,
-  "px-3 py-2 cursor-pointer no-underline",
-  "focus-ring focus-visible:z-1",
-  !e && [
-    "text-lm-brand dark:text-dm-brand",
-    "bg-lm-primary dark:bg-dm-primary",
-    "highlight:bg-lm-secondary dark:highlight:bg-dm-secondary"
-  ],
-  e && "bg-lm-main dark:bg-dm-main text-white"
-), X = ({ children: e }) => /* @__PURE__ */ a("span", { "aria-hidden": !0, className: d(be, "px-3 py-2 text-gray-400"), children: e }), fe = () => /* @__PURE__ */ a(X, { children: G });
-function Dt({ children: e, active: r, isEllipsis: t, href: n, ...o }) {
-  const s = P(() => he(r), [r]);
-  return t ? /* @__PURE__ */ a(fe, {}) : /* @__PURE__ */ a(W, { className: s, to: n, ...o, "data-active": r, children: e });
+//#endregion
+//#region src/navigation/Menu.tsx
+var nt = t({}), rt = ({ className: t, selected: n, disabled: i, onClick: a, ...o }) => {
+	let s = "to" in o && typeof o.to == "string", c = s ? p : "button", { onItemClick: l } = r(nt);
+	return /* @__PURE__ */ d(c, {
+		role: "menuitem",
+		"data-selected": n,
+		className: e("flex items-center gap-2", "w-full px-3 py-1.5 focus-ring", "no-underline text-inherit", {
+			"cursor-pointer": !i,
+			"pointer-events-none opacity-50": i,
+			"bg-lm-secondary dark:bg-dm-secondary": n && !i,
+			"highlight:bg-lm-secondary dark:highlight:bg-dm-secondary highlight:z-1 relative": !n && !i
+		}, t),
+		tabIndex: -1,
+		disabled: s ? void 0 : i,
+		"aria-disabled": s ? i : void 0,
+		type: s ? void 0 : "button",
+		onClick: (e) => {
+			a?.(e), l?.();
+		},
+		...o
+	});
+};
+rt.displayName = "Menu.Item";
+var it = () => /* @__PURE__ */ d("div", {
+	role: "separator",
+	"aria-hidden": !0,
+	className: "border-b border-lm-border dark:border-dm-border my-2"
+});
+it.displayName = "Menu.Separator";
+var at = ({ children: t }) => /* @__PURE__ */ d("div", {
+	role: "heading",
+	"aria-level": 6,
+	"aria-hidden": !0,
+	className: e("flex items-center w-full px-3 py-1.5", "text-gray-500 text-sm font-semibold"),
+	onClick: (e) => e.stopPropagation(),
+	children: t
+});
+at.displayName = "Menu.Title";
+var ot = ({ className: t, ...n }) => /* @__PURE__ */ d("div", {
+	className: e("px-3 py-1.5", t),
+	...n
+});
+ot.displayName = "Menu.Misc";
+var st = ({ children: t, className: n, focusableElementsSelector: r = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled])", focusFirstItem: i = !1, onItemClick: a, ...o }) => {
+	let s = c(null);
+	return H(s, {
+		elementsSelector: r,
+		focusFirstItem: i
+	}), /* @__PURE__ */ d(M, {
+		ref: s,
+		role: "menu",
+		className: e("py-2 whitespace-nowrap", n),
+		...o,
+		children: /* @__PURE__ */ d(nt.Provider, {
+			value: { onItemClick: a },
+			children: t
+		})
+	});
+};
+st.displayName = "Menu";
+var Y = Object.assign(st, {
+	Item: rt,
+	Separator: it,
+	Title: at,
+	Misc: ot
+}), ct = ({ children: t, menuAlignment: r = "left", buttonVariant: o = "button", buttonContent: s, buttonClassName: u, buttonSize: p = "md", buttonDisabled: m = !1, containerClassName: h, menuClassName: g, caretless: v, buttonLabel: y, menuOffset: b = 3 }) => {
+	let [x, S] = l(!1), C = c(null), w = n(({ focusButton: e = !0 } = {}) => {
+		S(!1), e && C.current?.focus();
+	}, []), { refs: T, floatingStyles: E, context: ee } = ae({
+		open: x,
+		onOpenChange: S,
+		placement: r === "right" ? "bottom-end" : "bottom-start",
+		middleware: [ne(), re(b)],
+		elements: { reference: C.current }
+	}), { getReferenceProps: D, getFloatingProps: O } = se([ie(ee)]), k = a(), j = c(null);
+	return i(() => {
+		let e = j.current;
+		if (!e || !x) return () => {};
+		let t = new AbortController();
+		return document.body.addEventListener("click", (t) => {
+			t.composedPath().includes(e) || w();
+		}, { signal: t.signal }), () => t.abort();
+	}, [w, x]), /* @__PURE__ */ f("div", {
+		ref: j,
+		className: e("relative inline-block", h),
+		onKeyDown: (e) => {
+			e.key === "Escape" && w();
+		},
+		onBlur: (e) => {
+			e.relatedTarget && !j.current.contains(e.relatedTarget) && w({ focusButton: !1 });
+		},
+		children: [/* @__PURE__ */ f("button", {
+			ref: C,
+			...D(),
+			type: "button",
+			"aria-haspopup": !0,
+			"aria-expanded": x,
+			"aria-controls": k,
+			"aria-label": y,
+			disabled: m,
+			className: e("flex items-center rounded-md focus-ring", {
+				"justify-between": !v,
+				"cursor-pointer": !m,
+				"pointer-events-none opacity-50": m,
+				"border border-lm-border dark:border-dm-border": o === "button",
+				"bg-lm-primary dark:bg-dm-primary": o === "button",
+				"group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": o === "button",
+				"text-lm-brand dark:text-dm-brand": o === "link",
+				"highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline": o === "link",
+				"px-1.5 py-1 text-sm": o !== "text" && p === "sm",
+				"px-3 py-1.5": o !== "text" && p === "md",
+				"px-4 py-2 text-lg": o !== "text" && p === "lg",
+				"gap-x-1.5": p === "sm",
+				"gap-x-2": p !== "sm"
+			}, u),
+			onKeyDown: (e) => {
+				e.key === "ArrowDown" && (e.preventDefault(), S(!0));
+			},
+			children: [s, !v && /* @__PURE__ */ d(A, {
+				icon: _,
+				size: "xs",
+				widthAuto: !0
+			})]
+		}), x && /* @__PURE__ */ d("div", {
+			ref: T.setFloating,
+			style: E,
+			className: "min-w-full z-500",
+			...O(),
+			children: /* @__PURE__ */ d(Y, {
+				className: g,
+				id: k,
+				focusableElementsSelector: "[role=\"menuitem\"]:not([disabled]):not([aria-disabled]),input:not([disabled]),select:not([disabled])",
+				focusFirstItem: !0,
+				onItemClick: w,
+				children: t
+			})
+		})]
+	});
+};
+ct.displayName = "Dropdown";
+var X = Object.assign(ct, {
+	Item: Y.Item,
+	Separator: Y.Separator,
+	Title: Y.Title,
+	Misc: Y.Misc
+}), lt = ({ className: t, disabled: n, size: r = "md", type: i = "button", ...a }) => /* @__PURE__ */ d("button", {
+	className: e("inline-flex rounded-md focus-ring", "text-lm-brand dark:text-dm-brand", "highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline", {
+		"px-1.5 py-1 text-sm": r === "sm",
+		"px-3 py-1.5": r === "md",
+		"px-4 py-2 text-lg": r === "lg",
+		"cursor-pointer": !n,
+		"pointer-events-none opacity-65": n
+	}, t),
+	disabled: n,
+	type: i,
+	...a
+}), ut = ({ className: t, active: n, ...r }) => /* @__PURE__ */ d("li", {
+	role: "menuitem",
+	className: "w-full flex",
+	"data-active": n,
+	children: /* @__PURE__ */ d(p, {
+		className: e("px-2 py-3", "max-md:w-full max-md:px-3 max-md:py-2", "text-white no-underline highlight:opacity-100 transition-opacity", {
+			"opacity-60": !n,
+			"opacity-100": n
+		}, t),
+		...r
+	})
+});
+ut.displayName = "NavBar.MenuItem";
+var dt = ({ containerClassName: t, buttonClassName: n, menuClassName: r, active: i, ...a }) => /* @__PURE__ */ d("li", {
+	role: "menuitem",
+	"aria-haspopup": !0,
+	className: "w-full flex",
+	"data-active": i,
+	children: /* @__PURE__ */ d(X, {
+		containerClassName: e("max-md:w-full", t),
+		buttonVariant: "text",
+		buttonClassName: e("px-2 py-3", "max-md:w-full max-md:px-3 max-md:py-2", "text-white highlight:opacity-100 transition-opacity", {
+			"opacity-60": !i,
+			"opacity-100": i
+		}, n),
+		menuAlignment: "right",
+		menuOffset: -3,
+		menuClassName: e("mx-2", r),
+		...a
+	})
+});
+dt.displayName = "NavBar.Dropdown";
+var Z = ({ className: t, brand: n, children: r }) => {
+	let { flag: o, toggle: s, setToFalse: c } = J(), l = a(), u = a(), { pathname: p } = h();
+	return i(() => c(), [p, c]), /* @__PURE__ */ f("nav", {
+		className: e("w-full relative", "bg-lm-main dark:bg-dm-main", "flex max-md:flex-col items-center justify-between", t),
+		children: [/* @__PURE__ */ f("div", {
+			className: "w-full relative",
+			children: [/* @__PURE__ */ d("h4", {
+				className: e("text-white px-4 py-3", "max-md:w-full max-md:flex max-md:flex-col items-center"),
+				children: n
+			}), /* @__PURE__ */ d(L, {
+				id: u,
+				variant: "secondary",
+				className: e("absolute right-0 top-[50%] translate-y-[-50%]", "md:hidden mx-2 [&]:px-2", "opacity-60 highlight:opacity-100 transition-opacity", "[&]:text-white [&]:border-white [&]:highlight:bg-transparent"),
+				onClick: s,
+				"aria-label": `${o ? "Hide" : "Show"} menu`,
+				"aria-controls": l,
+				children: /* @__PURE__ */ d(A, { icon: o ? S : y })
+			})]
+		}), /* @__PURE__ */ d("ul", {
+			id: l,
+			"aria-labelledby": u,
+			role: "menu",
+			className: e("m-0 p-0", "max-md:w-full md:mr-2 max-md:absolute max-md:top-full z-2000", "flex max-md:flex-col items-center", "bg-lm-main dark:bg-dm-main", { "max-md:hidden": !o }),
+			children: r
+		})]
+	});
+};
+Z.displayName = "NavBar";
+var ft = Object.assign(Z, {
+	MenuItem: ut,
+	Dropdown: dt
+}), pt = t(null), mt = ({ className: t, to: n, ...i }) => {
+	let a = r(pt);
+	return /* @__PURE__ */ d(m, {
+		role: "menuitem",
+		to: n,
+		className: ({ isActive: n }) => e("px-4 pt-2 pb-[calc(0.5rem-3px)] border-b-3", "highlight:text-lm-brand dark:highlight:text-dm-brand", "font-bold text-center no-underline transition-colors", "rounded-none outline-none focus-visible:inset-ring-2", "focus-visible:inset-ring-lm-brand/50 dark:focus-visible:inset-ring-dm-brand/50", {
+			"text-lm-brand dark:text-dm-brand": n,
+			"border-b-lm-brand dark:border-b-dm-brand active": n,
+			"border-b-transparent text-gray-500": !n,
+			"flex-grow": a?.fill
+		}, t),
+		...i
+	});
+};
+mt.displayName = "NavPills.Pill";
+var ht = ({ children: t, className: n, fill: r }) => /* @__PURE__ */ d(pt.Provider, {
+	value: { fill: r },
+	children: /* @__PURE__ */ d(M, {
+		role: "menubar",
+		className: e("flex overflow-hidden", n),
+		children: t
+	})
+});
+ht.displayName = "NavPills";
+var gt = Object.assign(ht, { Pill: mt }), _t = ["border border-r-0 last:border-r border-lm-border dark:border-dm-border", "rounded-none first:rounded-l last:rounded-r"], vt = (t = !1) => e(_t, "px-3 py-2 cursor-pointer no-underline", "focus-ring focus-visible:z-1", !t && [
+	"text-lm-brand dark:text-dm-brand",
+	"bg-lm-primary dark:bg-dm-primary",
+	"highlight:bg-lm-secondary dark:highlight:bg-dm-secondary"
+], t && "bg-lm-main dark:bg-dm-main text-white"), Q = ({ children: t }) => /* @__PURE__ */ d("span", {
+	"aria-hidden": !0,
+	className: e(_t, "px-3 py-2 text-gray-400"),
+	children: t
+}), yt = () => /* @__PURE__ */ d(Q, { children: "..." });
+function bt({ children: e, active: t, isEllipsis: n, href: r, ...i }) {
+	let a = s(() => vt(t), [t]);
+	return n ? /* @__PURE__ */ d(yt, {}) : /* @__PURE__ */ d(p, {
+		className: a,
+		to: r,
+		...i,
+		"data-active": t,
+		children: e
+	});
 }
-function Mt({ children: e, active: r, isEllipsis: t, ...n }) {
-  const o = P(() => he(r), [r]);
-  return t ? /* @__PURE__ */ a(fe, {}) : /* @__PURE__ */ a("button", { type: "button", className: o, ...n, "data-active": r, children: e });
+function xt({ children: e, active: t, isEllipsis: n, ...r }) {
+	let i = s(() => vt(t), [t]);
+	return n ? /* @__PURE__ */ d(yt, {}) : /* @__PURE__ */ d("button", {
+		type: "button",
+		className: i,
+		...r,
+		"data-active": t,
+		children: e
+	});
 }
-const hr = ({ currentPage: e, pagesCount: r, ...t }) => {
-  const n = "urlForPage" in t, o = n ? Dt : Mt, s = w(
-    (l) => n ? { href: F(l) ? void 0 : t.urlForPage(l) } : { onClick: () => !F(l) && t.onPageChange(l) },
-    [n, t]
-  );
-  return r < 2 ? null : /* @__PURE__ */ g("div", { className: "select-none flex", "data-testid": "paginator", children: [
-    e === 1 ? /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a(N, { size: "xs", icon: ee }) }) : /* @__PURE__ */ a(o, { ...s(Math.max(1, e - 1)), "aria-label": "Previous", children: /* @__PURE__ */ a(N, { size: "xs", icon: ee }) }),
-    ht(e, r).map((l, i) => /* @__PURE__ */ a(
-      o,
-      {
-        active: l === e,
-        isEllipsis: F(l),
-        ...s(l),
-        children: ft(l)
-      },
-      xt(l, i)
-    )),
-    e === r ? /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a(N, { size: "xs", icon: te }) }) : /* @__PURE__ */ a(o, { ...s(Math.min(r, e + 1)), "aria-label": "Next", children: /* @__PURE__ */ a(N, { size: "xs", icon: te }) })
-  ] });
-}, _t = ({ buttonLabel: e = "Options", buttonSize: r = "md", ...t }) => /* @__PURE__ */ a(
-  O,
-  {
-    buttonContent: /* @__PURE__ */ a(
-      N,
-      {
-        icon: Pe,
-        widthAuto: !0,
-        className: d({ "px-1": r === "sm" })
-      }
-    ),
-    caretless: !0,
-    buttonLabel: e,
-    buttonSize: r,
-    ...t
-  }
-), fr = Object.assign(_t, {
-  Item: O.Item,
-  Separator: O.Separator,
-  Title: O.Title,
-  Misc: O.Misc
-}), Ft = ({
-  open: e,
-  children: r,
-  className: t,
-  onClose: n,
-  ...o
-}) => {
-  const s = C(null);
-  return R(() => {
-    const l = document.body, i = l.style.overflow, c = l.style.paddingRight;
-    if (e) {
-      const u = window.outerWidth - l.clientWidth, b = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", b && (l.style.paddingRight = `${u}px`), s.current?.showModal();
-    } else
-      s.current?.close();
-    return () => {
-      l.style.overflow = i, l.style.paddingRight = c;
-    };
-  }, [e]), Ue(
-    /* @__PURE__ */ a(
-      "dialog",
-      {
-        ref: s,
-        className: d("bg-transparent backdrop:bg-black/50", t),
-        onCancel: (l) => {
-          l.preventDefault(), n();
-        },
-        ...o,
-        children: e && r
-      }
-    ),
-    document.body
-  );
-}, xr = ({
-  open: e,
-  onClose: r,
-  variant: t = "default",
-  title: n,
-  children: o,
-  className: s,
-  ...l
-}) => {
-  const {
-    size: i = "md",
-    confirmText: c = "Confirm",
-    cancelText: u = "Cancel",
-    confirmDisabled: b,
-    onConfirm: x,
-    onClosed: f,
-    ...h
-  } = "onConfirm" in l ? l : { ...l }, [p, m] = L(e), v = C(null), y = C("cancel"), q = w((T) => {
-    T.preventDefault(), T.stopPropagation(), y.current = "confirm", x?.();
-  }, [x]);
-  return R(() => {
-    if (e) {
-      y.current = "cancel", m(!0);
-      return;
-    }
-    const T = v.current;
-    if (T) {
-      delete v.current.dataset.open;
-      let $ = !1;
-      const j = (U) => {
-        $ || U.target !== T || ($ = !0, m(!1), f?.(y.current));
-      };
-      return T.addEventListener("transitionend", j), () => {
-        T.removeEventListener("transitionend", j);
-      };
-    }
-  }, [f, e]), R(() => {
-    const T = v.current;
-    p && T && (T.dataset.open = "");
-  }, [p]), /* @__PURE__ */ a(
-    Ft,
-    {
-      open: p,
-      onClose: r,
-      className: d(
-        {
-          "flex w-screen h-screen max-w-screen max-h-screen": p,
-          "overflow-hidden": t === "cover"
-        },
-        s
-      ),
-      ...h,
-      children: /* @__PURE__ */ a(
-        "form",
-        {
-          "data-testid": "transition-container",
-          ref: v,
-          className: d(
-            "w-full m-auto p-4 sm:p-6",
-            // CSS transitions are based on the presence of the `data-open` attribute
-            "-translate-y-4 data-open:translate-y-0 opacity-0 data-open:opacity-100",
-            "transition-[opacity_,_translate] duration-300",
-            // Handle modal dimensions for different variants and sizes
-            t !== "cover" && {
-              "sm:w-sm": i === "sm",
-              "md:w-lg": i === "md",
-              "md:w-4xl": i === "lg",
-              "md:w-6xl": i === "xl"
-            },
-            { "h-full": t === "cover" }
-          ),
-          onSubmit: q,
-          children: /* @__PURE__ */ a(I, { className: d(
-            "w-full",
-            { "h-full relative overflow-auto": t === "cover" }
-          ), children: t === "cover" ? /* @__PURE__ */ g(B, { children: [
-            /* @__PURE__ */ g(
-              "div",
-              {
-                className: d(
-                  "px-4 py-3 absolute top-0 left-0 right-0 z-3000",
-                  "flex items-center justify-between",
-                  "text-white bg-linear-to-b from-black/70 to-black/10",
-                  "[text-shadow:_0_2px_4px_rgb(0_0_0/_0.8)]"
-                ),
-                children: [
-                  /* @__PURE__ */ a("h5", { children: n }),
-                  /* @__PURE__ */ a(Y, { onClick: r, label: "Close dialog" })
-                ]
-              }
-            ),
-            o
-          ] }) : /* @__PURE__ */ g(B, { children: [
-            /* @__PURE__ */ g(I.Header, { className: d(
-              "sticky top-0",
-              "flex items-center justify-between gap-x-2"
-            ), children: [
-              /* @__PURE__ */ a("h5", { className: d({ "text-danger": t === "danger" }), children: n }),
-              /* @__PURE__ */ a(Y, { onClick: r, label: "Close dialog" })
-            ] }),
-            /* @__PURE__ */ a(I.Body, { children: o }),
-            x && /* @__PURE__ */ g(
-              I.Footer,
-              {
-                "data-testid": "footer",
-                className: d(
-                  "flex justify-end items-center gap-x-2",
-                  "[&]:px-3 sticky bottom-0"
-                ),
-                children: [
-                  /* @__PURE__ */ a(Ot, { onClick: r, children: u }),
-                  /* @__PURE__ */ a(
-                    ie,
-                    {
-                      solid: !0,
-                      variant: t === "danger" ? "danger" : "primary",
-                      disabled: b,
-                      type: "submit",
-                      children: c
-                    }
-                  )
-                ]
-              }
-            )
-          ] }) })
-        }
-      )
-    }
-  );
-}, yr = ({ className: e, children: r, loading: t = !1, variant: n = "default" }) => /* @__PURE__ */ a(Qe, { className: d({ "[&]:border-danger": n === "error" }, e), children: /* @__PURE__ */ g("h3", { className: d("text-center", {
-  "text-gray-500 dark:text-gray-400": n === "default",
-  "text-danger": n === "error"
-}), children: [
-  t && /* @__PURE__ */ g(B, { children: [
-    /* @__PURE__ */ a(N, { icon: ae, spin: !0 }),
-    /* @__PURE__ */ a("span", { className: "ml-2", children: r ?? "Loading..." })
-  ] }),
-  !t && r
-] }) }), wr = ({ variant: e, className: r, size: t = "md", children: n }) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: d(
-      "rounded-md text-center",
-      {
-        "p-2": t === "sm",
-        "p-4": t === "md",
-        "p-6": t === "lg",
-        "[&]:text-white": e !== "warning",
-        "bg-lm-brand dark:bg-dm-brand": e === "success",
-        "bg-danger": e === "error",
-        "bg-warning text-black": e === "warning"
-      },
-      r
-    ),
-    children: n
-  }
-), kr = ({ placement: e = "auto" } = {}) => {
-  const r = C(null), t = (() => {
-    const m = [];
-    return e === "auto" && m.push(Fe()), m.push(Be({ element: r })), m;
-  })(), [n, o] = L(!1), { refs: s, floatingStyles: l, context: i, middlewareData: c } = se({
-    placement: e === "auto" ? void 0 : e,
-    open: n,
-    onOpenChange: o,
-    middleware: t
-  }), u = He(i, {
-    delay: { open: 300 },
-    move: !0
-  }), { getFloatingProps: b, getReferenceProps: x } = le([u]), { isMounted: f, styles: h } = $e(i, { duration: 200 }), p = P(() => {
-    const m = i.placement.split("-")[0];
-    return {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right"
-    }[m] ?? "";
-  }, [i.placement]);
-  return {
-    anchor: { ...x(), ref: s.setReference },
-    tooltip: {
-      ...b(),
-      refSetter: s.setFloating,
-      isMounted: f,
-      styles: { ...l, ...h },
-      arrowPos: c.arrow,
-      arrowRef: r,
-      arrowSide: p
-    }
-  };
-}, vr = ({ children: e, isMounted: r, styles: t, refSetter: n, arrowRef: o, arrowPos: s, arrowSide: l, ...i }) => r && /* @__PURE__ */ a(
-  "div",
-  {
-    role: "tooltip",
-    "aria-live": "polite",
-    className: d(
-      "z-500 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
-      {
-        "pt-2.5": l === "top",
-        "pb-2.5": l === "bottom",
-        "pr-2.5": l === "right",
-        "pl-2.5": l === "left"
-      }
-    ),
-    ref: n,
-    style: t,
-    ...i,
-    children: /* @__PURE__ */ g("div", { className: "relative px-1.5 py-1 rounded bg-black/90 text-white text-center", children: [
-      /* @__PURE__ */ a("span", { className: "sr-only", children: "Tooltip: " }),
-      e,
-      /* @__PURE__ */ a(
-        "div",
-        {
-          ref: o,
-          className: d(
-            "absolute",
-            // Render as a triangle
-            "border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-black/90",
-            // Rotate triangle so that it points to the correct direction
-            {
-              "rotate-180": l === "bottom",
-              "rotate-90 mr-[-3px]": l === "right",
-              "rotate-270 ml-[-3px]": l === "left"
-            }
-          ),
-          style: {
-            left: s?.x,
-            top: s?.y,
-            [l]: `${-(o.current?.offsetWidth ?? 0) / 2}px`
-          },
-          "data-testid": "arrow"
-        }
-      )
-    ] })
-  }
-);
-function Bt(e) {
-  if (e.currentField !== e.newField)
-    return "ASC";
-  const r = {
-    ASC: "DESC",
-    DESC: void 0
-  };
-  return e.currentOrderDir ? r[e.currentOrderDir] : "ASC";
+var St = ({ currentPage: e, pagesCount: t, ...r }) => {
+	let i = "urlForPage" in r, a = i ? bt : xt, o = n((e) => i ? { href: K(e) ? void 0 : r.urlForPage(e) } : { onClick: () => !K(e) && r.onPageChange(e) }, [i, r]), s = c(null);
+	return H(s, {
+		elementsSelector: "button,a",
+		vertical: !1
+	}), t < 2 ? null : /* @__PURE__ */ f("div", {
+		className: "select-none flex",
+		"data-testid": "paginator",
+		ref: s,
+		children: [
+			e === 1 ? /* @__PURE__ */ d(Q, { children: /* @__PURE__ */ d(A, {
+				size: "xs",
+				icon: b
+			}) }) : /* @__PURE__ */ d(a, {
+				...o(Math.max(1, e - 1)),
+				"aria-label": "Previous",
+				children: /* @__PURE__ */ d(A, {
+					size: "xs",
+					icon: b
+				})
+			}),
+			Xe(e, t).map((t, n) => /* @__PURE__ */ d(a, {
+				active: t === e,
+				isEllipsis: K(t),
+				...o(t),
+				children: Ze(t)
+			}, Qe(t, n))),
+			e === t ? /* @__PURE__ */ d(Q, { children: /* @__PURE__ */ d(A, {
+				size: "xs",
+				icon: x
+			}) }) : /* @__PURE__ */ d(a, {
+				...o(Math.min(t, e + 1)),
+				"aria-label": "Next",
+				children: /* @__PURE__ */ d(A, {
+					size: "xs",
+					icon: x
+				})
+			})
+		]
+	});
+}, Ct = ({ buttonLabel: t = "Options", buttonSize: n = "md", ...r }) => /* @__PURE__ */ d(X, {
+	buttonContent: /* @__PURE__ */ d(A, {
+		icon: T,
+		widthAuto: !0,
+		className: e({ "px-1": n === "sm" })
+	}),
+	caretless: !0,
+	buttonLabel: t,
+	buttonSize: n,
+	...r
+});
+Ct.displayName = "RowDropdown";
+var wt = Object.assign(Ct, {
+	Item: X.Item,
+	Separator: X.Separator,
+	Title: X.Title,
+	Misc: X.Misc
+}), Tt = ({ open: t, children: n, className: r, onClose: a, ...o }) => {
+	let s = c(null);
+	return i(() => {
+		let e = document.body, n = e.style.overflow, r = e.style.paddingRight;
+		if (t) {
+			let t = window.outerWidth - e.clientWidth, n = e.scrollHeight > e.clientHeight;
+			e.style.overflow = "hidden", n && (e.style.paddingRight = `${t}px`), s.current?.showModal();
+		} else s.current?.close();
+		return () => {
+			e.style.overflow = n, e.style.paddingRight = r;
+		};
+	}, [t]), ue(/* @__PURE__ */ d("dialog", {
+		ref: s,
+		className: e("bg-transparent backdrop:bg-black/50", r),
+		onCancel: (e) => {
+			e.preventDefault(), a();
+		},
+		...o,
+		children: t && n
+	}), document.body);
+}, Et = ({ open: t, onClose: r, variant: a = "default", title: o, children: s, className: p, ...m }) => {
+	let { size: h = "md", confirmText: g = "Confirm", cancelText: _ = "Cancel", confirmDisabled: v, onConfirm: y, onClosed: b, ...x } = "onConfirm" in m ? m : { ...m }, [S, C] = l(t), w = c(null), T = c("cancel"), E = n((e) => {
+		e.preventDefault(), e.stopPropagation(), T.current = "confirm", y?.();
+	}, [y]);
+	return i(() => {
+		if (t) {
+			T.current = "cancel", C(!0);
+			return;
+		}
+		let e = w.current;
+		if (e) {
+			delete w.current.dataset.open;
+			let t = !1, n = (n) => {
+				t || n.target !== e || (t = !0, C(!1), b?.(T.current));
+			};
+			return e.addEventListener("transitionend", n), () => {
+				e.removeEventListener("transitionend", n);
+			};
+		}
+	}, [b, t]), i(() => {
+		let e = w.current;
+		S && e && (e.dataset.open = "");
+	}, [S]), /* @__PURE__ */ d(Tt, {
+		open: S,
+		onClose: r,
+		className: e({
+			"flex w-screen h-screen max-w-screen max-h-screen": S,
+			"overflow-hidden": a === "cover"
+		}, p),
+		...x,
+		children: /* @__PURE__ */ d("form", {
+			"data-testid": "transition-container",
+			ref: w,
+			className: e("w-full m-auto p-4 sm:p-6", "-translate-y-4 data-open:translate-y-0 opacity-0 data-open:opacity-100", "transition-[opacity_,_translate] duration-300", a !== "cover" && {
+				"sm:w-sm": h === "sm",
+				"md:w-lg": h === "md",
+				"md:w-4xl": h === "lg",
+				"md:w-6xl": h === "xl"
+			}, { "h-full": a === "cover" }),
+			onSubmit: E,
+			children: /* @__PURE__ */ d(M, {
+				className: e("w-full", { "h-full relative overflow-auto": a === "cover" }),
+				children: a === "cover" ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+					className: e("px-4 py-3 absolute top-0 left-0 right-0 z-3000", "flex items-center justify-between", "text-white bg-linear-to-b from-black/70 to-black/10", "[text-shadow:_0_2px_4px_rgb(0_0_0/_0.8)]"),
+					children: [/* @__PURE__ */ d("h5", { children: o }), /* @__PURE__ */ d(R, {
+						onClick: r,
+						label: "Close dialog"
+					})]
+				}), s] }) : /* @__PURE__ */ f(u, { children: [
+					/* @__PURE__ */ f(M.Header, {
+						className: e("sticky top-0", "flex items-center justify-between gap-x-2"),
+						children: [/* @__PURE__ */ d("h5", {
+							className: e({ "text-danger": a === "danger" }),
+							children: o
+						}), /* @__PURE__ */ d(R, {
+							onClick: r,
+							label: "Close dialog"
+						})]
+					}),
+					/* @__PURE__ */ d(M.Body, { children: s }),
+					y && /* @__PURE__ */ f(M.Footer, {
+						"data-testid": "footer",
+						className: e("flex justify-end items-center gap-x-2", "[&]:px-3 sticky bottom-0"),
+						children: [/* @__PURE__ */ d(lt, {
+							onClick: r,
+							children: _
+						}), /* @__PURE__ */ d(L, {
+							solid: !0,
+							variant: a === "danger" ? "danger" : "primary",
+							disabled: v,
+							type: "submit",
+							children: g
+						})]
+					})
+				] })
+			})
+		})
+	});
+}, Dt = ({ className: t, children: n, variant: r = "default", loading: i = !1 }) => {
+	let a = r === "loading" || i;
+	return /* @__PURE__ */ d(ge, {
+		className: e({ "[&]:border-danger": r === "error" }, t),
+		children: /* @__PURE__ */ f("h3", {
+			className: e("text-center", {
+				"text-gray-500 dark:text-gray-400": r !== "error",
+				"text-danger": r === "error"
+			}),
+			children: [a && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(A, {
+				icon: C,
+				spin: !0
+			}), /* @__PURE__ */ d("span", {
+				className: "ml-2",
+				children: n ?? "Loading..."
+			})] }), !a && n]
+		})
+	});
+}, Ot = ({ variant: t, className: n, size: r = "md", children: i }) => /* @__PURE__ */ d("div", {
+	className: e("rounded-md text-center", {
+		"p-2": r === "sm",
+		"p-4": r === "md",
+		"p-6": r === "lg",
+		"[&]:text-white": t !== "warning",
+		"bg-lm-brand dark:bg-dm-brand": t === "success",
+		"bg-danger": t === "error",
+		"bg-warning text-black": t === "warning"
+	}, n),
+	children: i
+}), kt = ({ placement: e = "auto" } = {}) => {
+	let t = c(null), n = s(() => {
+		let n = j({ element: t });
+		return e === "auto" ? [te(), n] : [n];
+	}, [e]), [r, i] = l(!1), { refs: a, floatingStyles: o, context: u, middlewareData: d } = ae({
+		placement: e === "auto" ? void 0 : e,
+		open: r,
+		onOpenChange: i,
+		middleware: n
+	}), { getFloatingProps: f, getReferenceProps: p } = se([oe(u, {
+		delay: { open: 300 },
+		move: !0
+	})]), { isMounted: m, styles: h } = ce(u, { duration: 200 }), g = s(() => ({
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	})[u.placement.split("-")[0]] ?? "", [u.placement]);
+	return {
+		anchor: {
+			...p(),
+			ref: a.setReference
+		},
+		tooltip: {
+			...f(),
+			refSetter: a.setFloating,
+			isMounted: m,
+			styles: {
+				...o,
+				...h
+			},
+			arrowPos: d.arrow,
+			arrowRef: t,
+			arrowSide: g
+		}
+	};
+}, At = ({ children: t, isMounted: n, styles: r, refSetter: i, arrowRef: a, arrowPos: o, arrowSide: s, ...c }) => n && /* @__PURE__ */ d("div", {
+	role: "tooltip",
+	"aria-live": "polite",
+	className: e("z-500 max-w-64", {
+		"pt-2.5": s === "top",
+		"pb-2.5": s === "bottom",
+		"pr-2.5": s === "right",
+		"pl-2.5": s === "left"
+	}),
+	ref: i,
+	style: r,
+	...c,
+	children: /* @__PURE__ */ f("div", {
+		className: "relative px-1.5 py-1 rounded bg-black/90 text-white text-center",
+		children: [
+			/* @__PURE__ */ d("span", {
+				className: "sr-only",
+				children: "Tooltip: "
+			}),
+			t,
+			/* @__PURE__ */ d("div", {
+				ref: a,
+				className: e("absolute", "border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-black/90", {
+					"rotate-180": s === "bottom",
+					"rotate-90 mr-[-3px]": s === "right",
+					"rotate-270 ml-[-3px]": s === "left"
+				}),
+				style: {
+					left: o?.x,
+					top: o?.y,
+					[s]: `${-(a.current?.offsetWidth ?? 0) / 2}px`
+				},
+				"data-testid": "arrow"
+			})
+		]
+	})
+});
+//#endregion
+//#region src/ordering/ordering.ts
+function jt(e) {
+	return e.currentField === e.newField && e.currentOrderDir ? {
+		ASC: "DESC",
+		DESC: void 0
+	}[e.currentOrderDir] : "ASC";
 }
-function Ht(e) {
-  const r = Bt(e);
-  return {
-    field: r ? e.newField : void 0,
-    dir: r
-  };
+function Mt(e) {
+	let t = jt(e);
+	return {
+		field: t ? e.newField : void 0,
+		dir: t
+	};
 }
-const Nr = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, o) => {
-  const s = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
-  return n[r] > o[r] ? s : l;
-}), Cr = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Tr = (e) => {
-  const [r, t] = e.split("-");
-  return { field: r, dir: t };
+var Nt = (e, { field: t, dir: n }) => !t || !n ? e : e.sort((e, r) => {
+	let i = n === "ASC" ? 1 : -1, a = n === "ASC" ? -1 : 1;
+	return e[t] > r[t] ? i : a;
+}), Pt = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Ft = (e) => {
+	let [t, n] = e.split("-");
+	return {
+		field: t,
+		dir: n
+	};
 };
-function Ar({ items: e, order: r, onChange: t, prefixed: n = !0, buttonVariant: o = "button", ...s }) {
-  const l = w((c) => {
-    const u = Ht({ currentOrderDir: r.dir, currentField: r.field, newField: c });
-    t(u);
-  }, [t, r.dir, r.field]), i = o === "button";
-  return /* @__PURE__ */ g(
-    O,
-    {
-      buttonContent: /* @__PURE__ */ g(B, { children: [
-        !i && "Order by",
-        i && !r.field && /* @__PURE__ */ a("i", { children: "Order by..." }),
-        i && r.field && /* @__PURE__ */ g(B, { children: [
-          n && "Order by: ",
-          e[r.field],
-          " - ",
-          r.dir ?? "DESC"
-        ] })
-      ] }),
-      buttonVariant: o,
-      ...s,
-      children: [
-        Object.entries(e).map(([c, u]) => /* @__PURE__ */ g(
-          O.Item,
-          {
-            selected: r.field === c,
-            onClick: () => l(c),
-            className: "flex items-center justify-between gap-2",
-            children: [
-              u,
-              r.field === c && /* @__PURE__ */ a(N, { icon: r.dir === "ASC" ? Ee : Se })
-            ]
-          },
-          c
-        )),
-        /* @__PURE__ */ a(O.Separator, {}),
-        /* @__PURE__ */ a(O.Item, { disabled: !r.field, onClick: () => t({}), children: /* @__PURE__ */ a("i", { children: "Clear selection" }) })
-      ]
-    }
-  );
+//#endregion
+//#region src/ordering/OrderingDropdown.tsx
+function It({ items: e, order: t, onChange: r, prefixed: i = !0, buttonVariant: a = "button", ...o }) {
+	let s = n((e) => {
+		r(Mt({
+			currentOrderDir: t.dir,
+			currentField: t.field,
+			newField: e
+		}));
+	}, [
+		r,
+		t.dir,
+		t.field
+	]), c = a === "button";
+	return /* @__PURE__ */ f(X, {
+		buttonContent: /* @__PURE__ */ f(u, { children: [
+			!c && "Order by",
+			c && !t.field && /* @__PURE__ */ d("i", { children: "Order by..." }),
+			c && t.field && /* @__PURE__ */ f(u, { children: [
+				i && "Order by: ",
+				e[t.field],
+				" - ",
+				t.dir ?? "DESC"
+			] })
+		] }),
+		buttonVariant: a,
+		...o,
+		children: [
+			Object.entries(e).map(([e, n]) => /* @__PURE__ */ f(X.Item, {
+				selected: t.field === e,
+				onClick: () => s(e),
+				className: "flex items-center justify-between gap-2",
+				children: [n, t.field === e && /* @__PURE__ */ d(A, { icon: t.dir === "ASC" ? k : O })]
+			}, e)),
+			/* @__PURE__ */ d(X.Separator, {}),
+			/* @__PURE__ */ d(X.Item, {
+				disabled: !t.field,
+				onClick: () => r({}),
+				children: /* @__PURE__ */ d("i", { children: "Clear selection" })
+			})
+		]
+	});
 }
-const $t = "#4696e5", jt = "rgba(70, 150, 229, 0.4)", Ut = "#2078CF", Gt = "rgba(32, 120, 207, 0.4)", Ir = () => xe() ? $t : Ut, Or = () => xe() ? jt : Gt, Rr = "#f77f28", Lr = "rgba(247, 127, 40, 0.4)", Pr = "white", Er = "#161b22", Kt = (e) => document.querySelector("html")?.setAttribute("data-theme", e), xe = () => document.querySelector("html")?.getAttribute("data-theme") === "dark", Wt = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", Sr = (e) => {
-  const [r, t] = L(() => e ?? Wt());
-  return R(() => {
-    Kt(r);
-  }, [r]), [r, t];
-};
-export {
-  jt as BRAND_COLOR_ALPHA_DM,
-  Gt as BRAND_COLOR_ALPHA_LM,
-  $t as BRAND_COLOR_DM,
-  Ut as BRAND_COLOR_LM,
-  Pt as BaseNavBar,
-  ie as Button,
-  I as Card,
-  xr as CardModal,
-  nr as Checkbox,
-  Y as CloseButton,
-  cr as CopyToClipboardButton,
-  tr as Details,
-  O as Dropdown,
-  G as ELLIPSIS,
-  Rr as HIGHLIGHTED_COLOR,
-  Lr as HIGHLIGHTED_COLOR_ALPHA,
-  J as Input,
-  Z as Label,
-  or as LabelledInput,
-  ar as LabelledRevealablePasswordInput,
-  sr as LabelledSelect,
-  Ot as LinkButton,
-  Ye as Listbox,
-  _ as Menu,
-  yr as Message,
-  Ft as ModalDialog,
-  gr as NavBar,
-  br as NavPills,
-  Ar as OrderingDropdown,
-  Er as PRIMARY_DARK_COLOR,
-  Pr as PRIMARY_LIGHT_COLOR,
-  hr as Paginator,
-  wr as Result,
-  tt as RevealablePasswordInput,
-  fr as RowDropdown,
-  at as SearchCombobox,
-  nt as SearchInput,
-  rt as Select,
-  Qe as SimpleCard,
-  rr as Table,
-  lr as TagsAutocomplete,
-  ir as ToggleSwitch,
-  vr as Tooltip,
-  Ir as brandColor,
-  Or as brandColorAlpha,
-  Kt as changeThemeInMarkup,
-  Ht as determineOrder,
-  Bt as determineOrderDir,
-  gt as formatNumber,
-  Wt as getSystemPreferredTheme,
-  xe as isDarkThemeEnabled,
-  ct as isLightColor,
-  xt as keyForPage,
-  ce as normalizeTag,
-  Cr as orderToString,
-  F as pageIsEllipsis,
-  mt as parseQueryString,
-  ft as prettifyPageNumber,
-  ht as progressivePagination,
-  pr as roundTen,
-  Nr as sortList,
-  Tr as stringToOrder,
-  mr as stringifyQueryParams,
-  it as useArrowKeyNavigation,
-  dr as useGoBack,
-  ur as useParsedQuery,
-  yt as useTagsSearch,
-  Sr as useTheme,
-  me as useTimeout,
-  kt as useTimeoutToggle,
-  ue as useToggle,
-  kr as useTooltip
+//#endregion
+//#region src/theme/index.ts
+var Lt = "#4696e5", Rt = "rgba(70, 150, 229, 0.4)", zt = "#2078CF", Bt = "rgba(32, 120, 207, 0.4)", Vt = () => $() ? Lt : zt, Ht = () => $() ? Rt : Bt, Ut = "#f77f28", Wt = "rgba(247, 127, 40, 0.4)", Gt = "white", Kt = "#161b22", qt = (e) => document.querySelector("html")?.setAttribute("data-theme", e), $ = () => document.querySelector("html")?.getAttribute("data-theme") === "dark", Jt = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", Yt = (e) => {
+	let [t, n] = l(() => e ?? Jt());
+	return i(() => {
+		qt(t);
+	}, [t]), [t, n];
 };
+//#endregion
+export { Rt as BRAND_COLOR_ALPHA_DM, Bt as BRAND_COLOR_ALPHA_LM, Lt as BRAND_COLOR_DM, zt as BRAND_COLOR_LM, Z as BaseNavBar, L as Button, M as Card, Et as CardModal, we as Checkbox, R as CloseButton, Be as CopyToClipboardButton, de as Details, X as Dropdown, Je as ELLIPSIS, Ut as HIGHLIGHTED_COLOR, Wt as HIGHLIGHTED_COLOR_ALPHA, z as Input, B as Label, Te as LabelledInput, De as LabelledRevealablePasswordInput, ke as LabelledSelect, lt as LinkButton, _e as Listbox, Y as Menu, Dt as Message, Tt as ModalDialog, ft as NavBar, gt as NavPills, It as OrderingDropdown, Kt as PRIMARY_DARK_COLOR, Gt as PRIMARY_LIGHT_COLOR, St as Paginator, Ot as Result, Ee as RevealablePasswordInput, wt as RowDropdown, je as SearchCombobox, Ae as SearchInput, Oe as Select, ge as SimpleCard, Se as Table, Fe as TagsAutocomplete, Ie as ToggleSwitch, At as Tooltip, Vt as brandColor, Ht as brandColorAlpha, qt as changeThemeInMarkup, Mt as determineOrder, jt as determineOrderDir, Ge as formatNumber, Jt as getSystemPreferredTheme, $ as isDarkThemeEnabled, ze as isLightColor, Qe as keyForPage, W as normalizeTag, Pt as orderToString, K as pageIsEllipsis, U as parseQueryString, Ze as prettifyPageNumber, Xe as progressivePagination, qe as roundTen, Nt as sortList, Ft as stringToOrder, Ve as stringifyQueryParams, H as useArrowKeyNavigation, Le as useGoBack, He as useParsedQuery, $e as useTagsSearch, Yt as useTheme, q as useTimeout, tt as useTimeoutToggle, J as useToggle, kt as useTooltip };