@shlinkio/shlink-frontend-kit 0.8.2 → 0.8.4

package/dist/tailwind.js

@@ -1,109 +1,111 @@
-import { jsx as n, jsxs as w, Fragment as I } from "react/jsx-runtime";
-import a from "clsx";
-import { createContext as L, useContext as g, useId as R, useRef as M, useCallback as k, useEffect as E, useMemo as T } from "react";
-import { Link as _ } from "react-router";
-import { faClose as U, faSearch as A, faChevronLeft as P, faChevronRight as B } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as h } from "@fortawesome/react-fontawesome";
-const f = L(void 0), u = L({ responsive: !0 }), O = ({ children: t, className: r }) => {
-  const { responsive: e } = g(u);
-  return /* @__PURE__ */ n(f.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+import { jsx as n, jsxs as i, Fragment as T } from "react/jsx-runtime";
+import w, { clsx as f } from "clsx";
+import { createContext as S, useContext as g, useCallback as F, useId as H, useMemo as O, useRef as $, useEffect as L, useState as Q } from "react";
+import { Link as U, NavLink as V } from "react-router";
+import { faClose as X, faSearch as Y, faChevronLeft as M, faChevronRight as R, faCircleNotch as Z } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+import { createPortal as tt } from "react-dom";
+import { u as et } from "./use-timeout-mQ792qNj.js";
+const N = S(void 0), x = S({ responsive: !0 }), rt = ({ children: t, className: e }) => {
+  const { responsive: r } = g(x);
+  return /* @__PURE__ */ n(N.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
-      className: a(
-        { "tw:hidden tw:lg:table-header-group": e },
-        r
+      className: w(
+        { "tw:hidden tw:lg:table-header-group": r },
+        e
       ),
       children: t
     }
   ) });
-}, W = ({ children: t, className: r }) => {
-  const { responsive: e } = g(u);
-  return /* @__PURE__ */ n(f.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+}, ot = ({ children: t, className: e }) => {
+  const { responsive: r } = g(x);
+  return /* @__PURE__ */ n(N.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
-      className: a(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
-        r
+      className: w(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": r },
+        e
       ),
       children: t
     }
   ) });
-}, q = ({ children: t, className: r }) => {
-  const { responsive: e } = g(u);
-  return /* @__PURE__ */ n(f.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+}, nt = ({ children: t, className: e }) => {
+  const { responsive: r } = g(x);
+  return /* @__PURE__ */ n(N.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
-      className: a(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
-        r
+      className: w(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": r },
+        e
       ),
       children: t
     }
   ) });
-}, G = ({ children: t, className: r, ...e }) => {
-  const o = g(f), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = g(u);
+}, dt = ({ children: t, className: e, ...r }) => {
+  const o = g(N), d = (o == null ? void 0 : o.section) === "body", { responsive: a } = g(x);
   return /* @__PURE__ */ n(
     "tr",
     {
-      className: a(
+      className: w(
         "tw:group",
         {
-          "tw:lg:table-row tw:flex tw:flex-col": l,
-          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
+          "tw:lg:table-row tw:flex tw:flex-col": a,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": a,
           "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": d,
           // Use a different hover bg color depending on the table being inside a card or not
           "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": d
         },
-        r
+        e
       ),
-      ...e,
+      ...r,
       children: t
     }
   );
-}, J = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
-  const l = g(f), s = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = g(u);
+}, lt = ({ children: t, className: e, columnName: r, type: o, ...d }) => {
+  const a = g(N), l = o ?? ((a == null ? void 0 : a.section) !== "body" ? "th" : "td"), { responsive: s } = g(x);
   return /* @__PURE__ */ n(
-    s,
+    l,
     {
-      "data-column": i ? e : void 0,
-      className: a(
+      "data-column": s ? r : void 0,
+      className: w(
         "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
         {
-          "tw:border-b-1": !i,
-          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": i,
+          "tw:border-b-1": !s,
+          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
           // For md and lower, display the content in data-column attribute as before
-          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && s === "td"
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && l === "td"
         },
-        r
+        e
       ),
       ...d,
       children: t
     }
   );
-}, K = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(u.Provider, { value: { responsive: o }, children: /* @__PURE__ */ w("table", { className: "tw:w-full", ...d, children: [
-  /* @__PURE__ */ n(O, { children: t }),
-  /* @__PURE__ */ n(W, { children: e }),
-  r && /* @__PURE__ */ n(q, { children: r })
-] }) }), xt = Object.assign(K, { Row: G, Cell: J }), Q = ({
+}, at = ({ header: t, footer: e, children: r, responsive: o = !0, ...d }) => /* @__PURE__ */ n(x.Provider, { value: { responsive: o }, children: /* @__PURE__ */ i("table", { className: "tw:w-full", ...d, children: [
+  /* @__PURE__ */ n(rt, { children: t }),
+  /* @__PURE__ */ n(ot, { children: r }),
+  e && /* @__PURE__ */ n(nt, { children: e })
+] }) }), Rt = Object.assign(at, { Row: dt, Cell: lt }), wt = ({
   children: t,
-  className: r,
-  disabled: e,
+  className: e,
+  disabled: r,
   variant: o = "primary",
   size: d = "md",
-  inline: l = !1,
-  solid: s = !1,
-  ...i
+  inline: a = !1,
+  solid: l = !1,
+  ...s
 }) => {
-  const c = "to" in i ? _ : "button";
+  const c = "to" in s ? U : "button";
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
       c,
       {
-        className: a(
+        className: w(
           {
-            "tw:inline-flex": l,
-            "tw:flex": !l
+            "tw:inline-flex": a,
+            "tw:flex": !a
           },
           "tw:gap-2 tw:items-center tw:justify-center",
           "tw:border tw:rounded-md tw:no-underline",
@@ -120,11 +122,11 @@ const f = L(void 0), u = L({ responsive: !0 }), O = ({ children: t, className: r
           {
             "tw:border-brand tw:text-brand": o === "primary",
             "tw:border-zinc-500": o === "secondary",
-            "tw:text-zinc-500": o === "secondary" && !s,
+            "tw:text-zinc-500": o === "secondary" && !l,
             "tw:border-danger": o === "danger",
-            "tw:text-danger": o === "danger" && !s
+            "tw:text-danger": o === "danger" && !l
           },
-          s && {
+          l && {
             "tw:text-white": !0,
             "tw:bg-brand": o === "primary",
             "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
@@ -133,118 +135,143 @@ const f = L(void 0), u = L({ responsive: !0 }), O = ({ children: t, className: r
             "tw:bg-danger": o === "danger",
             "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
           },
-          !e && {
-            "tw:highlight:text-white": !s,
+          !r && {
+            "tw:highlight:text-white": !l,
             "tw:highlight:bg-brand": o === "primary",
             "tw:highlight:bg-zinc-500": o === "secondary",
             "tw:highlight:bg-danger": o === "danger"
           },
           {
-            "tw:pointer-events-none tw:opacity-65": e
+            "tw:pointer-events-none tw:opacity-65": r
           },
-          r
+          e
         ),
-        disabled: e,
-        ...i,
+        disabled: r,
+        ...s,
         children: t
       }
     )
   );
-}, S = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+}, z = ({ className: t, onChange: e, ...r }) => {
+  const o = F((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      type: "checkbox",
+      className: f(
+        "tw:appearance-none tw:focus-ring",
+        "tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border",
+        "tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-brand tw:bg-no-repeat",
+        // Use different background color when rendered inside a card
+        "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input",
+        t
+      ),
+      onChange: o,
+      ...r
+    }
+  );
+}, jt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+  z,
+  {
+    className: f("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
+    ...e
+  }
+), j = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     onClick: t,
-    className: a(
+    className: w(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
       "tw:rounded-md tw:focus-ring"
     ),
-    "aria-label": r,
-    children: /* @__PURE__ */ n(h, { icon: U, size: "xl" })
+    "aria-label": e,
+    children: /* @__PURE__ */ n(b, { icon: X, size: "xl" })
   }
-), j = ({
+), A = ({
   borderless: t = !1,
-  size: r = "md",
-  feedback: e,
+  size: e = "md",
+  feedback: r,
   className: o,
   disabled: d,
-  readOnly: l,
-  ...s
+  readOnly: a,
+  ...l
 }) => {
-  const i = !d && !l;
+  const s = !d && !a;
   return /* @__PURE__ */ n(
     "input",
     {
-      className: a(
+      className: w(
         "tw:w-full",
         {
-          "tw:focus-ring": !e,
-          "tw:focus-ring-danger": e === "error"
+          "tw:focus-ring": !r,
+          "tw:focus-ring-danger": r === "error"
         },
         {
-          "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
-          "tw:px-3 tw:py-1.5": r === "md",
-          "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
+          "tw:px-2 tw:py-1 tw:text-sm": e === "sm",
+          "tw:px-3 tw:py-1.5": e === "md",
+          "tw:px-4 tw:py-2 tw:text-xl": e === "lg"
         },
         {
           "tw:rounded-md tw:border": !t,
-          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
-          "tw:border-danger": !t && e === "error",
-          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !i,
-          "tw:bg-lm-primary tw:dark:bg-dm-primary": i,
+          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !r,
+          "tw:border-danger": !t && r === "error",
+          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !s,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": s,
           // Use different background color when rendered inside a card
-          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": i
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": s
         },
         o
       ),
       disabled: d,
-      readOnly: l,
-      ...s
+      readOnly: a,
+      ...l
     }
   );
-}, H = ({ required: t, children: r, ...e }) => /* @__PURE__ */ w("label", { ...e, children: [
-  r,
+}, W = ({ required: t, children: e, ...r }) => /* @__PURE__ */ i("label", { ...r, children: [
+  e,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), yt = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
-  const s = R();
-  return /* @__PURE__ */ w("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(H, { htmlFor: s, required: e, children: t }),
+] }), Dt = ({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: d, ...a }) => {
+  const l = H();
+  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(W, { htmlFor: l, required: r, children: t }),
     /* @__PURE__ */ n(
-      j,
+      A,
       {
-        id: s,
-        className: r,
-        required: e || o,
+        id: l,
+        className: e,
+        required: r || o,
         feedback: d ? "error" : void 0,
-        ...l
+        ...a
       }
     ),
     d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
   ] });
-}, V = String.raw`data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>`, X = ({
+}, st = ({
   className: t,
-  size: r = "md",
-  feedback: e,
+  size: e = "md",
+  feedback: r,
   style: o = {},
   disabled: d,
-  ...l
+  ...a
 }) => /* @__PURE__ */ n(
   "select",
   {
-    className: a(
-      "tw:w-full tw:appearance-none tw:pr-9 tw:bg-no-repeat",
+    className: w(
+      "tw:w-full tw:appearance-none tw:pr-9",
+      "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
       {
-        "tw:focus-ring": !e,
-        "tw:focus-ring-danger": e === "error"
+        "tw:focus-ring": !r,
+        "tw:focus-ring-danger": r === "error"
       },
       "tw:rounded-md tw:border",
       {
-        "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
-        "tw:border-danger": e === "error"
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !r,
+        "tw:border-danger": r === "error"
       },
       {
-        "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
-        "tw:pl-3 tw:py-1.5": r === "md",
-        "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
+        "tw:pl-2 tw:py-1 tw:text-sm": e === "sm",
+        "tw:pl-3 tw:py-1.5": e === "md",
+        "tw:pl-4 tw:py-2 tw:text-xl": e === "lg",
         "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": d,
         // Apply different background color when rendered inside a card
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !d
@@ -253,50 +280,34 @@ const f = L(void 0), u = L({ responsive: !0 }), O = ({ children: t, className: r
     ),
     style: {
       ...o,
-      backgroundImage: `url("${V}")`,
-      backgroundSize: "16px 12px",
-      backgroundPosition: "right 0.75rem center"
+      background: "right 0.75rem center / 16px 12px"
     },
     disabled: d,
-    ...l
+    ...a
   }
-), kt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
-  const l = R();
-  return /* @__PURE__ */ w("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(H, { htmlFor: l, required: e, children: r }),
-    /* @__PURE__ */ n(X, { id: l, className: t, required: e || o, ...d })
+), Ht = ({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...d }) => {
+  const a = H();
+  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(W, { htmlFor: a, required: r, children: e }),
+    /* @__PURE__ */ n(st, { id: a, className: t, required: r || o, ...d })
   ] });
-};
-function Y(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
-  const o = M(null), d = k(() => {
-    o.current && e(o.current);
-  }, [e]), l = k((s, i) => {
-    d(), o.current = r(() => {
-      s(), o.current = null;
-    }, i ?? t);
-  }, [d, t, r]);
-  return E(() => d, [d]), T(
-    () => ({ setTimeout: l, clearCurrentTimeout: d }),
-    [d, l]
-  );
-}
-const vt = ({
+}, Ot = ({
   onChange: t,
-  containerClassName: r,
-  inputClassName: e,
+  containerClassName: e,
+  inputClassName: r,
   // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
   size: o = "lg",
   ...d
 }) => {
-  const { setTimeout: l, clearCurrentTimeout: s } = Y(500), i = k((c) => {
-    c ? l(() => t(c)) : (s(), t(c));
-  }, [s, t, l]);
-  return /* @__PURE__ */ w("div", { className: a("tw:group tw:relative tw:focus-within:z-10", r), children: [
+  const { setTimeout: a, clearCurrentTimeout: l } = et(500), s = F((c) => {
+    c ? a(() => t(c)) : (l(), t(c));
+  }, [l, t, a]);
+  return /* @__PURE__ */ i("div", { className: w("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
-      h,
+      b,
       {
-        icon: A,
-        className: a(
+        icon: Y,
+        className: w(
           "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
           "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
           {
@@ -307,214 +318,278 @@ const vt = ({
       }
     ),
     /* @__PURE__ */ n(
-      j,
+      A,
       {
         type: "search",
-        className: a(
+        className: w(
           {
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
           },
-          e
+          r
         ),
         placeholder: "Search...",
-        onChange: (c) => i(c.target.value),
+        onChange: (c) => s(c.target.value),
         size: o,
         ...d
       }
     )
   ] });
-}, Z = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+}, $t = ({ className: t, ...e }) => /* @__PURE__ */ n(
+  z,
+  {
+    className: f(
+      "tw:rounded-full tw:w-8 tw:h-4",
+      "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
+      "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
+      "tw:checked:bg-right tw:transition-[background-position]",
+      t
+    ),
+    ...e
+  }
+), it = ({ className: t, disabled: e, size: r = "md", ...o }) => /* @__PURE__ */ n(
   "button",
   {
-    className: a(
+    className: w(
       "tw:inline-flex tw:rounded-md tw:focus-ring",
       "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
       {
-        "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
-        "tw:px-3 tw:py-1.5": e === "md",
-        "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
-        "tw:pointer-events-none tw:opacity-65": r
+        "tw:px-1.5 tw:py-1 tw:text-sm": r === "sm",
+        "tw:px-3 tw:py-1.5": r === "md",
+        "tw:px-4 tw:py-2 tw:text-lg": r === "lg",
+        "tw:pointer-events-none tw:opacity-65": e
       },
       t
     ),
-    disabled: r,
+    disabled: e,
     ...o
   }
-), tt = new Intl.NumberFormat("en-US"), rt = (t) => tt.format(Number(t)), F = 10, Nt = (t) => Math.ceil(t / F) * F, b = 2, v = "...", et = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), ot = (t, r) => {
-  const e = et(
-    Math.max(b, t - b),
-    Math.min(r - 1, t + b) + 1
-  );
-  return t - b > b && e.unshift(v), t + b < r - 1 && e.push(v), e.unshift(1), e.push(r), e;
-}, p = (t) => t === v, nt = (t) => p(t) ? t : rt(t), dt = (t, r) => p(t) ? `${t}_${r}` : `${t}`, z = [
-  "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
-  "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
-], D = (t = !1) => a(
-  z,
-  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
-  "tw:focus-ring tw:focus-visible:z-1",
-  {
-    "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
-    "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
-  }
-), C = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: a(z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), $ = () => /* @__PURE__ */ n(C, { children: v });
-function lt({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
-  const l = T(() => D(r), [r]);
-  return e ? /* @__PURE__ */ n($, {}) : /* @__PURE__ */ n(_, { className: l, to: o, ...d, children: t });
-}
-function st({ children: t, active: r, isEllipsis: e, ...o }) {
-  const d = T(() => D(r), [r]);
-  return e ? /* @__PURE__ */ n($, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
-}
-const Ct = ({ currentPage: t, pagesCount: r, ...e }) => {
-  const o = "urlForPage" in e, d = o ? lt : st, l = k(
-    (s) => o ? { href: p(s) ? void 0 : e.urlForPage(s) } : { onClick: () => !p(s) && e.onPageChange(s) },
-    [o, e]
-  );
-  return r < 2 ? null : /* @__PURE__ */ w("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(C, { children: /* @__PURE__ */ n(h, { size: "xs", icon: P }) }) : /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(h, { size: "xs", icon: P }) }),
-    ot(t, r).map((s, i) => /* @__PURE__ */ n(
-      d,
-      {
-        active: s === t,
-        isEllipsis: p(s),
-        ...l(s),
-        children: nt(s)
-      },
-      dt(s, i)
-    )),
-    t === r ? /* @__PURE__ */ n(C, { children: /* @__PURE__ */ n(h, { size: "xs", icon: B }) }) : /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(h, { size: "xs", icon: B }) })
-  ] });
-}, at = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), ct = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: w(
       "tw:px-4 tw:py-3 tw:rounded-t-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
-    ...r
+    ...e
   }
-), it = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: w(
       "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
       "tw:first:rounded-t-md tw:last:rounded-b-md",
       t
     ),
-    ...r
+    ...e
   }
-), wt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: w(
       "tw:px-4 tw:py-3 tw:rounded-b-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
-    ...r
+    ...e
   }
-), ct = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: w(
       "tw:group/card tw:rounded-md tw:shadow-md",
       "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
       t
     ),
-    ...r
+    ...e
   }
-), m = Object.assign(ct, { Body: it, Header: at, Footer: wt }), Tt = ({ bodyClassName: t, children: r, ...e }) => {
-  const { title: o, titleSize: d = "md", ...l } = "title" in e ? e : {
-    ...e,
+), m = Object.assign(bt, { Body: mt, Header: ct, Footer: gt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
+  const { title: o, titleSize: d = "md", ...a } = "title" in r ? r : {
+    ...r,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ w(m, { ...l, children: [
-    o && /* @__PURE__ */ w(m.Header, { children: [
+  return /* @__PURE__ */ i(m, { ...a, children: [
+    o && /* @__PURE__ */ i(m.Header, { children: [
       d === "lg" && /* @__PURE__ */ n("h4", { children: o }),
       d === "md" && /* @__PURE__ */ n("h5", { children: o }),
       d === "sm" && /* @__PURE__ */ n("h6", { children: o })
     ] }),
-    /* @__PURE__ */ n(m.Body, { className: t, children: r })
+    /* @__PURE__ */ n(m.Body, { className: t, children: e })
+  ] });
+}, q = S(null), ht = ({ className: t, to: e, ...r }) => {
+  const o = g(q);
+  return /* @__PURE__ */ n(
+    V,
+    {
+      role: "menuitem",
+      to: e,
+      className: ({ isActive: d }) => w(
+        "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
+        "tw:font-bold tw:no-underline tw:text-center tw:highlight:text-brand tw:transition-colors",
+        "tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2 tw:focus-visible:inset-ring-brand/50",
+        {
+          "tw:border-b-brand active": d,
+          "tw:border-b-transparent tw:text-gray-500": !d,
+          "tw:flex-grow": o == null ? void 0 : o.fill
+        },
+        t
+      ),
+      ...r
+    }
+  );
+}, ut = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(q.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(m, { role: "menubar", className: w("tw:flex tw:overflow-hidden", e), children: t }) }), Ut = Object.assign(ut, { Pill: ht }), ft = new Intl.NumberFormat("en-US"), xt = (t) => ft.format(Number(t)), D = 10, zt = (t) => Math.ceil(t / D) * D, u = 2, C = "...", yt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), kt = (t, e) => {
+  const r = yt(
+    Math.max(u, t - u),
+    Math.min(e - 1, t + u) + 1
+  );
+  return t - u > u && r.unshift(C), t + u < e - 1 && r.push(C), r.unshift(1), r.push(e), r;
+}, k = (t) => t === C, Nt = (t) => k(t) ? t : xt(t), vt = (t, e) => k(t) ? `${t}_${e}` : `${t}`, G = [
+  "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
+  "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
+], J = (t = !1) => w(
+  G,
+  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
+  "tw:focus-ring tw:focus-visible:z-1",
+  {
+    "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
+    "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
+  }
+), B = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: w(G, "tw:px-3 py-2 tw:text-gray-400"), children: t }), K = () => /* @__PURE__ */ n(B, { children: C });
+function Pt({ children: t, active: e, isEllipsis: r, href: o, ...d }) {
+  const a = O(() => J(e), [e]);
+  return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n(U, { className: a, to: o, ...d, children: t });
+}
+function Ct({ children: t, active: e, isEllipsis: r, ...o }) {
+  const d = O(() => J(e), [e]);
+  return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
+}
+const At = ({ currentPage: t, pagesCount: e, ...r }) => {
+  const o = "urlForPage" in r, d = o ? Pt : Ct, a = F(
+    (l) => o ? { href: k(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !k(l) && r.onPageChange(l) },
+    [o, r]
+  );
+  return e < 2 ? null : /* @__PURE__ */ i("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    t === 1 ? /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(b, { size: "xs", icon: M }) }) : /* @__PURE__ */ n(d, { ...a(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: M }) }),
+    kt(t, e).map((l, s) => /* @__PURE__ */ n(
+      d,
+      {
+        active: l === t,
+        isEllipsis: k(l),
+        ...a(l),
+        children: Nt(l)
+      },
+      vt(l, s)
+    )),
+    t === e ? /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(b, { size: "xs", icon: R }) }) : /* @__PURE__ */ n(d, { ...a(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: R }) })
   ] });
-}, mt = ({
+}, It = ({
   open: t,
-  children: r,
-  className: e,
-  ...o
+  children: e,
+  className: r,
+  onClose: o,
+  ...d
 }) => {
-  const d = M(null);
-  return E(() => {
-    var c, x;
-    const l = document.body, s = l.style.overflow, i = l.style.paddingRight;
+  const a = $(null);
+  return L(() => {
+    var v, y;
+    const l = document.body, s = l.style.overflow, c = l.style.paddingRight;
     if (t) {
-      const y = window.outerWidth - l.clientWidth, N = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", N && (l.style.paddingRight = `${y}px`), (c = d.current) == null || c.showModal();
+      const I = window.outerWidth - l.clientWidth, p = l.scrollHeight > l.clientHeight;
+      l.style.overflow = "hidden", p && (l.style.paddingRight = `${I}px`), (v = a.current) == null || v.showModal();
     } else
-      (x = d.current) == null || x.close();
+      (y = a.current) == null || y.close();
     return () => {
-      l.style.overflow = s, l.style.paddingRight = i;
+      l.style.overflow = s, l.style.paddingRight = c;
     };
-  }, [t]), /* @__PURE__ */ n(
-    "dialog",
-    {
-      ref: d,
-      className: a("tw:bg-transparent tw:backdrop:bg-black/50", e),
-      ...o,
-      children: t && r
-    }
+  }, [t]), tt(
+    /* @__PURE__ */ n(
+      "dialog",
+      {
+        ref: a,
+        className: w("tw:bg-transparent tw:backdrop:bg-black/50", r),
+        onCancel: (l) => {
+          l.preventDefault(), o();
+        },
+        ...d,
+        children: t && e
+      }
+    ),
+    document.body
   );
-}, It = ({
+}, Wt = ({
   open: t,
-  onClose: r,
-  variant: e = "default",
+  onClose: e,
+  variant: r = "default",
   title: o,
   children: d,
-  className: l,
-  ...s
+  className: a,
+  ...l
 }) => {
   const {
-    size: i = "md",
+    size: s = "md",
     confirmText: c = "Confirm",
-    confirmDisabled: x,
+    confirmDisabled: v,
     onConfirm: y,
-    ...N
-  } = "onConfirm" in s ? s : { ...s };
-  return /* @__PURE__ */ n(
-    mt,
+    ...I
+  } = "onConfirm" in l ? l : { ...l }, [p, _] = Q(t), P = $(null);
+  return L(() => {
+    if (t) {
+      _(!0);
+      return;
+    }
+    const h = P.current;
+    if (h) {
+      delete P.current.dataset.open;
+      const E = () => _(!1);
+      return h.addEventListener("transitionend", E, { once: !0 }), () => {
+        h.removeEventListener("transitionend", E);
+      };
+    }
+  }, [t]), L(() => {
+    const h = P.current;
+    p && h && (h.dataset.open = "");
+  }, [p]), /* @__PURE__ */ n(
+    It,
     {
-      open: t,
-      onClose: r,
-      className: a(
-        { "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": t },
-        l
+      open: p,
+      onClose: e,
+      className: w(
+        {
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": p,
+          "tw:overflow-hidden": r === "cover"
+        },
+        a
       ),
-      ...N,
+      ...I,
       children: /* @__PURE__ */ n(
         "div",
         {
-          className: a("tw:m-auto tw:p-4", {
-            "tw:w-full tw:h-full": e === "cover"
-          }),
-          children: /* @__PURE__ */ n(m, { className: a(
-            "tw:w-full",
-            e !== "cover" && {
-              "tw:md:w-sm": i === "sm",
-              "tw:md:w-lg": i === "md",
-              "tw:md:w-4xl": i === "lg",
-              "tw:md:w-6xl": i === "xl"
+          "data-testid": "transition-container",
+          ref: P,
+          className: w(
+            "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
+            // CSS transitions are based on the presence of the `data-open` attribute
+            "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
+            "tw:transition-[opacity_transform] tw:duration-300",
+            // Handle modal dimensions for different variants and sizes
+            r !== "cover" && {
+              "tw:sm:w-sm": s === "sm",
+              "tw:md:w-lg": s === "md",
+              "tw:md:w-4xl": s === "lg",
+              "tw:md:w-6xl": s === "xl"
             },
-            {
-              "tw:h-full tw:overflow-auto tw:relative": e === "cover"
-            }
-          ), children: e === "cover" ? /* @__PURE__ */ w(I, { children: [
-            /* @__PURE__ */ w(
+            { "tw:h-full": r === "cover" }
+          ),
+          children: /* @__PURE__ */ n(m, { className: w(
+            "tw:w-full",
+            { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
+          ), children: r === "cover" ? /* @__PURE__ */ i(T, { children: [
+            /* @__PURE__ */ i(
               "div",
               {
-                className: a(
+                className: w(
                   "tw:px-4 tw:py-3 tw:absolute tw:top-0 tw:left-0 tw:right-0",
                   "tw:flex tw:items-center tw:justify-between",
                   "tw:text-white tw:bg-linear-to-b tw:from-black/70 tw:to-black/10",
@@ -522,34 +597,40 @@ const Ct = ({ currentPage: t, pagesCount: r, ...e }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(S, { onClick: r, label: "Close dialog" })
+                  /* @__PURE__ */ n(j, { onClick: e, label: "Close dialog" })
                 ]
               }
             ),
             /* @__PURE__ */ n("div", { children: d })
-          ] }) : /* @__PURE__ */ w(I, { children: [
-            /* @__PURE__ */ w(m.Header, { className: "tw:flex tw:items-center tw:justify-between tw:sticky tw:top-0", children: [
-              /* @__PURE__ */ n("h5", { className: a({ "tw:text-danger": e === "danger" }), children: o }),
-              /* @__PURE__ */ n(S, { onClick: r, label: "Close dialog" })
+          ] }) : /* @__PURE__ */ i(T, { children: [
+            /* @__PURE__ */ i(m.Header, { className: w(
+              "tw:sticky tw:top-0",
+              "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
+            ), children: [
+              /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
+              /* @__PURE__ */ n(j, { onClick: e, label: "Close dialog" })
             ] }),
             /* @__PURE__ */ n(m.Body, { children: d }),
-            y && /* @__PURE__ */ w(
+            y && /* @__PURE__ */ i(
               m.Footer,
               {
                 "data-testid": "footer",
-                className: "tw:flex tw:flex-row-reverse tw:gap-x-2 tw:items-center tw:[&]:px-3 tw:sticky tw:bottom-0",
+                className: w(
+                  "tw:flex tw:justify-end tw:items-center tw:gap-x-2",
+                  "tw:[&]:px-3 tw:sticky tw:bottom-0"
+                ),
                 children: [
+                  /* @__PURE__ */ n(it, { onClick: e, children: "Cancel" }),
                   /* @__PURE__ */ n(
-                    Q,
+                    wt,
                     {
                       solid: !0,
-                      variant: e === "danger" ? "danger" : "primary",
-                      disabled: x,
+                      variant: r === "danger" ? "danger" : "primary",
+                      disabled: v,
                       onClick: y,
                       children: c
                     }
-                  ),
-                  /* @__PURE__ */ n(Z, { onClick: r, children: "Cancel" })
+                  )
                 ]
               }
             )
@@ -558,29 +639,60 @@ const Ct = ({ currentPage: t, pagesCount: r, ...e }) => {
       )
     }
   );
-};
+}, qt = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: f({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ i("h3", { className: f("tw:text-center", {
+  "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
+  "tw:text-danger": o === "error"
+}), children: [
+  r && /* @__PURE__ */ i(T, { children: [
+    /* @__PURE__ */ n(b, { icon: Z, spin: !0 }),
+    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
+  ] }),
+  !r && e
+] }) }), Gt = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: f(
+      "tw:rounded-md tw:text-center",
+      {
+        "tw:p-2": r === "sm",
+        "tw:p-4": r === "md",
+        "tw:p-6": r === "lg",
+        "tw:[&]:text-white": t !== "warning",
+        "tw:bg-brand": t === "success",
+        "tw:bg-danger": t === "error",
+        "tw:bg-warning tw:text-black": t === "warning"
+      },
+      e
+    ),
+    children: o
+  }
+);
 export {
-  Q as Button,
+  wt as Button,
   m as Card,
-  It as CardModal,
-  S as CloseButton,
-  v as ELLIPSIS,
-  j as Input,
-  H as Label,
-  yt as LabelledInput,
-  kt as LabelledSelect,
-  Z as LinkButton,
-  mt as ModalDialog,
-  Ct as Paginator,
-  vt as SearchInput,
-  X as Select,
-  Tt as SimpleCard,
-  xt as Table,
-  rt as formatNumber,
-  dt as keyForPage,
-  p as pageIsEllipsis,
-  nt as prettifyPageNumber,
-  ot as progressivePagination,
-  Nt as roundTen,
-  Y as useTimeout
+  Wt as CardModal,
+  jt as Checkbox,
+  j as CloseButton,
+  C as ELLIPSIS,
+  A as Input,
+  W as Label,
+  Dt as LabelledInput,
+  Ht as LabelledSelect,
+  it as LinkButton,
+  qt as Message,
+  It as ModalDialog,
+  Ut as NavPills,
+  At as Paginator,
+  Gt as Result,
+  Ot as SearchInput,
+  st as Select,
+  pt as SimpleCard,
+  Rt as Table,
+  $t as ToggleSwitch,
+  xt as formatNumber,
+  vt as keyForPage,
+  k as pageIsEllipsis,
+  Nt as prettifyPageNumber,
+  kt as progressivePagination,
+  zt as roundTen
 };