@shlinkio/shlink-frontend-kit 0.8.3 → 0.8.5

package/dist/index.d.ts

@@ -16,6 +16,8 @@ declare type BooleanControlProps = PropsWithChildren<{
     inline?: boolean;
 }>;
 
+export declare type Callback = () => unknown;
+
 export declare const changeThemeInMarkup: (theme: Theme) => void | undefined;
 
 export declare const Checkbox: FC<BooleanControlProps>;
@@ -191,7 +193,20 @@ export declare type Theme = 'dark' | 'light';
 
 export declare type TimeoutToggle = typeof useTimeoutToggle;
 
-declare type ToggleResult = [boolean, () => void, () => void, () => void];
+export declare type TimeoutToggleOptions = {
+    /**
+     * What should the flag value be initially.
+     * This will drive the behavior of the callback, which will set the opposite value, and then go back to the initial
+     * value after a delay.
+     *
+     * Defaults to false.
+     */
+    initialValue?: boolean;
+    /** Delay in ms after which the flag should return to its initial value. Defaults to 2000 */
+    delay?: number;
+};
+
+export declare type ToggleResult = [boolean, () => void, () => void, () => void];
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
@@ -203,7 +218,26 @@ export declare const useParsedQuery: <T>() => T;
 
 export declare const useTheme: (initialTheme?: Theme) => readonly [Theme, Dispatch<SetStateAction<Theme>>];
 
-export declare const useTimeoutToggle: (initialValue?: boolean, delay?: number, setTimeout?: ((handler: TimerHandler, timeout?: number, ...arguments: any[]) => number) & typeof globalThis.setTimeout, clearTimeout?: ((id: number | undefined) => void) & typeof globalThis.clearTimeout) => [boolean, () => void];
+export declare function useTimeout(defaultDelay: number, 
+/** Test seam. Defaults to global setTimeout */
+setTimeout_?: typeof globalThis.setTimeout, 
+/** Test seam. Defaults to global clearTimeout */
+clearTimeout_?: typeof clearTimeout): UseTimeoutResult;
+
+export declare type UseTimeoutResult = {
+    /**
+     * Clears any in-progress timeout, and schedules a new callback.
+     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
+     */
+    setTimeout: (callback: Callback, delay?: number) => void;
+    /** Clears any in-progress timeout */
+    clearCurrentTimeout: () => void;
+};
+
+/**
+ * Passing individual args is deprecated. Pass an object of options instead.
+ */
+export declare const useTimeoutToggle: (initialValueOrOptions?: TimeoutToggleOptions | boolean, secondArg?: number, setTimeout_?: typeof setTimeout, clearTimeout_?: typeof clearTimeout) => [boolean, () => void];
 
 export declare const useToggle: (initialValue?: boolean) => ToggleResult;
 

package/dist/index.js

@@ -1,20 +1,21 @@
-import { jsx as o, jsxs as d, Fragment as N } from "react/jsx-runtime";
-import { faCircleNotch as I, faSearch as A, faEllipsisV as E, faSortAmountUp as F, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as w } from "@fortawesome/react-fontawesome";
+import { jsx as o, jsxs as m, Fragment as N } from "react/jsx-runtime";
+import { faCircleNotch as A, faSearch as I, faEllipsisV as E, faSortAmountUp as F, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
 import { clsx as u } from "clsx";
-import { Card as _, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as k, DropdownMenu as S, NavItem as j, NavLink as G, Nav as U, UncontrolledDropdown as q, DropdownItem as g } from "reactstrap";
-import { useId as T, useState as p, useRef as C, useCallback as f, useMemo as Q, Children as V, isValidElement as Y, useEffect as W } from "react";
+import { Card as C, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as k, DropdownMenu as v, NavItem as j, NavLink as G, Nav as U, UncontrolledDropdown as V, DropdownItem as w } from "reactstrap";
+import { useId as S, useState as p, useRef as y, useMemo as q, useCallback as f, Children as Q, isValidElement as Y, useEffect as W } from "react";
 import { useLocation as z, NavLink as J } from "react-router";
-const he = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: c = !1 }) => /* @__PURE__ */ o(
-  _,
+import { u as X } from "./use-timeout-BbfWTbuj.js";
+const be = ({ className: e, children: t, loading: r = !1, type: n = "default", fullWidth: s = !1 }) => /* @__PURE__ */ o(
+  C,
   {
     body: !0,
     className: u(e, {
-      "w-100": c,
-      "w-75 mx-auto": !c,
+      "w-100": s,
+      "w-75 mx-auto": !s,
       "border-danger": n === "error"
     }),
-    children: /* @__PURE__ */ d(
+    children: /* @__PURE__ */ m(
       "h3",
       {
         className: u("text-center mb-0", {
@@ -22,189 +23,192 @@ const he = ({ className: e, children: r, loading: t = !1, type: n = "default", f
           "text-danger": n === "error"
         }),
         children: [
-          t && /* @__PURE__ */ o(w, { icon: I, spin: !0 }),
-          t && /* @__PURE__ */ o("span", { className: "ms-2", children: r ?? "Loading..." }),
-          !t && r
+          r && /* @__PURE__ */ o(g, { icon: A, spin: !0 }),
+          r && /* @__PURE__ */ o("span", { className: "ms-2", children: t ?? "Loading..." }),
+          !r && t
         ]
       }
     )
   }
-), X = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(_, { ...n, children: [
+), Z = ({ title: e, children: t, bodyClassName: r, ...n }) => /* @__PURE__ */ m(C, { ...n, children: [
   e && /* @__PURE__ */ o(H, { role: "heading", "aria-level": 4, children: e }),
-  /* @__PURE__ */ o(M, { className: t, children: r })
-] }), fe = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
-  X,
+  /* @__PURE__ */ o(M, { className: r, children: t })
+] }), ge = ({ children: e, type: t, className: r, small: n = !1 }) => /* @__PURE__ */ o(
+  Z,
   {
     role: "document",
     className: u("text-center", {
       "w-75 mx-auto": !n,
       "w-100": n,
-      "bg-main": r === "success",
-      "bg-danger": r === "error",
-      "bg-warning": r === "warning",
-      "text-white": r !== "warning"
-    }, t),
+      "bg-main": t === "success",
+      "bg-danger": t === "error",
+      "bg-warning": t === "warning",
+      "text-white": t !== "warning"
+    }, r),
     bodyClassName: u({ "p-2": n }),
     children: e
   }
-), x = ({ checked: e = !1, onChange: r, className: t, children: n, type: c, inline: s = !1 }) => {
-  const l = T(), a = (h) => r == null ? void 0 : r(h.target.checked, h), i = {
-    "form-switch": c === "switch",
-    "form-checkbox": c === "checkbox"
-  }, m = s ? { display: "inline-block" } : {};
-  return /* @__PURE__ */ d("span", { className: u("form-check", i, t), style: m, children: [
-    /* @__PURE__ */ o("input", { type: "checkbox", className: "form-check-input", id: l, checked: e, onChange: a }),
-    /* @__PURE__ */ o("label", { className: "form-check-label", htmlFor: l, children: n })
+), O = ({ checked: e = !1, onChange: t, className: r, children: n, type: s, inline: c = !1 }) => {
+  const a = S(), l = (h) => t == null ? void 0 : t(h.target.checked, h), i = {
+    "form-switch": s === "switch",
+    "form-checkbox": s === "checkbox"
+  }, d = c ? { display: "inline-block" } : {};
+  return /* @__PURE__ */ m("span", { className: u("form-check", i, r), style: d, children: [
+    /* @__PURE__ */ o("input", { type: "checkbox", className: "form-check-input", id: a, checked: e, onChange: l }),
+    /* @__PURE__ */ o("label", { className: "form-check-label", htmlFor: a, children: n })
   ] });
-}, pe = (e) => /* @__PURE__ */ o(x, { type: "checkbox", ...e }), be = (e) => /* @__PURE__ */ o(x, { type: "switch", ...e }), Z = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: c = !1, id: s }) => /* @__PURE__ */ d("div", { className: `${t} ${c ? "" : "mb-3"}`, children: [
-  /* @__PURE__ */ o("label", { className: `form-label ${n}`, htmlFor: s, children: r }),
+}, we = (e) => /* @__PURE__ */ o(O, { type: "checkbox", ...e }), Ne = (e) => /* @__PURE__ */ o(O, { type: "switch", ...e }), B = ({ children: e, label: t, className: r = "", labelClassName: n = "", noMargin: s = !1, id: c }) => /* @__PURE__ */ m("div", { className: `${r} ${s ? "" : "mb-3"}`, children: [
+  /* @__PURE__ */ o("label", { className: `form-label ${n}`, htmlFor: c, children: t }),
   e
-] }), we = ({ children: e, value: r, onChange: t, type: n, required: c, placeholder: s, className: l, labelClassName: a }) => {
-  const i = T();
-  return /* @__PURE__ */ o(Z, { label: /* @__PURE__ */ d(N, { children: [
+] }), Ce = ({ children: e, value: t, onChange: r, type: n, required: s, placeholder: c, className: a, labelClassName: l }) => {
+  const i = S();
+  return /* @__PURE__ */ o(B, { label: /* @__PURE__ */ m(N, { children: [
     e,
     ":"
-  ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ o(
+  ] }), className: a, labelClassName: l, id: i, children: /* @__PURE__ */ o(
     "input",
     {
       id: i,
       className: "form-control",
       type: n ?? "text",
-      value: r,
-      required: c ?? !0,
-      placeholder: s,
-      onChange: (m) => t(m.target.value)
+      value: t,
+      required: s ?? !0,
+      placeholder: c,
+      onChange: (d) => r(d.target.value)
     }
   ) });
-}, B = 500;
+}, K = 500;
 let b;
-const v = () => {
+const _ = () => {
   b !== null && clearTimeout(b), b = null;
-}, ge = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: c = "", setTimeout_: s = setTimeout }) => {
-  const [l, a] = p(c), i = (m, h = B) => {
-    a(m), v(), b = s(() => {
-      e(m), v();
+}, Te = ({ onChange: e, className: t, large: r = !0, noBorder: n = !1, initialValue: s = "", setTimeout_: c = setTimeout }) => {
+  const [a, l] = p(s), i = (d, h = K) => {
+    l(d), _(), b = c(() => {
+      e(d), _();
     }, h);
   };
-  return /* @__PURE__ */ d("div", { className: u("search-field", r), children: [
+  return /* @__PURE__ */ m("div", { className: u("search-field", t), children: [
     /* @__PURE__ */ o(
       "input",
       {
         type: "text",
         className: u("form-control search-field__input", {
-          "form-control-lg": t,
+          "form-control-lg": r,
           "search-field__input--no-border": n
         }),
         placeholder: "Search...",
-        value: l,
-        onChange: (m) => i(m.target.value)
+        value: a,
+        onChange: (d) => i(d.target.value)
       }
     ),
-    /* @__PURE__ */ o(w, { icon: A, className: "search-field__icon" }),
+    /* @__PURE__ */ o(g, { icon: I, className: "search-field__icon" }),
     /* @__PURE__ */ o(
       "button",
       {
         "aria-label": "Clear search",
         type: "button",
         className: "close search-field__close btn-close",
-        hidden: l === "",
+        hidden: a === "",
         id: "search-field__close",
         onClick: () => i("", 0)
       }
     )
   ] });
-}, K = (e) => {
-  const r = new URLSearchParams(e), t = {};
-  return r.forEach((n, c) => {
-    if (c.endsWith("[]")) {
-      const s = c.slice(0, -2);
-      t[s] ?? (t[s] = []), t[s].push(n);
+}, _e = () => y(null), ee = (e) => {
+  const t = new URLSearchParams(e), r = {};
+  return t.forEach((n, s) => {
+    if (s.endsWith("[]")) {
+      const c = s.slice(0, -2);
+      r[c] ?? (r[c] = []), r[c].push(n);
     } else
-      t[c] = n;
-  }), t;
-}, Ne = (e) => {
-  const r = new URLSearchParams();
-  for (const [t, n] of Object.entries(e))
-    n !== void 0 && (Array.isArray(n) ? n.forEach((c) => r.append(`${t}[]`, `${c}`)) : r.append(t, `${n}`));
-  return r.toString();
-}, ee = (e = !1) => {
-  const [r, t] = p(e), n = f(() => t((l) => !l), []), c = f(() => t(!0), []), s = f(() => t(!1), []);
-  return [r, n, c, s];
-}, Ce = (e = !1, r = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
-  const [c, s] = p(e), l = C(e), a = C(void 0), i = f(() => {
-    s(!l.current), a.current && n(a.current), a.current = t(() => s(l.current), r);
-  }, [n, r, t]);
-  return [c, i];
-}, _e = () => C(null), Oe = () => {
+      r[s] = n;
+  }), r;
+}, ke = (e) => {
+  const t = new URLSearchParams();
+  for (const [r, n] of Object.entries(e))
+    n !== void 0 && (Array.isArray(n) ? n.forEach((s) => t.append(`${r}[]`, `${s}`)) : t.append(r, `${n}`));
+  return t.toString();
+}, ve = () => {
   const { search: e } = z();
-  return Q(() => K(e), [e]);
-}, re = ({
+  return q(() => ee(e), [e]);
+}, te = 2e3, Se = (e = {}, t, r = globalThis.setTimeout, n = globalThis.clearTimeout) => {
+  const { initialValue: s = !1, delay: c = te } = typeof e == "boolean" ? {
+    initialValue: e,
+    delay: t
+  } : e, { setTimeout: a } = X(c, r, n), [l, i] = p(s), d = y(s), h = f(() => {
+    i(!d.current), a(() => i(d.current));
+  }, [a]);
+  return [l, h];
+}, re = (e = !1) => {
+  const [t, r] = p(e), n = f(() => r((a) => !a), []), s = f(() => r(!0), []), c = f(() => r(!1), []);
+  return [t, n, s, c];
+}, ne = ({
   text: e,
-  disabled: r = !1,
-  className: t,
+  disabled: t = !1,
+  className: r,
   children: n,
-  dropdownClassName: c,
-  noCaret: s,
-  end: l = !1,
-  minWidth: a,
+  dropdownClassName: s,
+  noCaret: c,
+  end: a = !1,
+  minWidth: l,
   inline: i,
-  size: m,
+  size: d,
   ...h
 }) => {
-  const [y, L] = ee(), D = u("dropdown-btn__toggle", t, {
+  const [L, x] = re(), D = u("dropdown-btn__toggle", r, {
     "btn-block": !i,
-    "dropdown-btn__toggle--with-caret": !s
-  }), R = { minWidth: a && `${a}px` };
-  return /* @__PURE__ */ d($, { isOpen: y, toggle: L, disabled: r, className: c, children: [
-    /* @__PURE__ */ o(k, { size: m, caret: !s, className: D, color: "primary", ...h, children: e }),
-    /* @__PURE__ */ o(S, { className: "w-100", end: l, style: R, children: n })
+    "dropdown-btn__toggle--with-caret": !c
+  }), R = { minWidth: l && `${l}px` };
+  return /* @__PURE__ */ m($, { isOpen: L, toggle: x, disabled: t, className: s, children: [
+    /* @__PURE__ */ o(k, { size: d, caret: !c, className: D, color: "primary", ...h, children: e }),
+    /* @__PURE__ */ o(v, { className: "w-100", end: a, style: R, children: n })
   ] });
-}, ve = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
-  re,
+}, ye = ({ children: e, minWidth: t, label: r = "Options" }) => /* @__PURE__ */ o(
+  ne,
   {
-    text: /* @__PURE__ */ o(w, { className: "px-1", icon: E }),
-    "aria-label": t,
+    text: /* @__PURE__ */ o(g, { className: "px-1", icon: E }),
+    "aria-label": r,
     size: "sm",
-    minWidth: r,
+    minWidth: t,
     end: !0,
     noCaret: !0,
     inline: !0,
     children: e
   }
-), te = ({ children: e, ...r }) => /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(G, { className: "nav-pills__nav-link", tag: J, ...r, children: e }) }), ke = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ o(_, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ o(U, { pills: !0, fill: r, children: V.map(e, (n) => {
-  if (!Y(n) || n.type !== te)
+), oe = ({ children: e, ...t }) => /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(G, { className: "nav-pills__nav-link", tag: J, ...t, children: e }) }), Oe = ({ children: e, fill: t = !1, className: r = "" }) => /* @__PURE__ */ o(C, { className: `nav-pills__nav p-0 overflow-hidden ${r}`, body: !0, children: /* @__PURE__ */ o(U, { pills: !0, fill: t, children: Q.map(e, (n) => {
+  if (!Y(n) || n.type !== oe)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
 }) }) });
-function O(e, r, t) {
-  return typeof e == "object" ? O(e.currentField, e.newField, e.currentOrderDir) : e !== r ? "ASC" : t ? {
+function T(e, t, r) {
+  return typeof e == "object" ? T(e.currentField, e.newField, e.currentOrderDir) : e !== t ? "ASC" : r ? {
     ASC: "DESC",
     DESC: void 0
-  }[t] : "ASC";
+  }[r] : "ASC";
 }
-function ne(e, r, t) {
-  return typeof e == "object" ? ne(e.currentField, e.newField, e.currentOrderDir) : {
-    field: r,
-    dir: O(e, r, t)
+function se(e, t, r) {
+  return typeof e == "object" ? se(e.currentField, e.newField, e.currentOrderDir) : {
+    field: t,
+    dir: T(e, t, r)
   };
 }
-const Se = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, c) => {
-  const s = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
-  return n[r] > c[r] ? s : l;
-}), Te = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, xe = (e) => {
-  const [r, t] = e.split("-");
-  return { field: r, dir: t };
-}, ye = (e) => {
-  const [r, t] = p(e), n = f((c, s) => t({ field: c, dir: s }), []);
-  return [r, n];
+const Le = (e, { field: t, dir: r }) => !t || !r ? e : e.sort((n, s) => {
+  const c = r === "ASC" ? 1 : -1, a = r === "ASC" ? -1 : 1;
+  return n[t] > s[t] ? c : a;
+}), xe = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, De = (e) => {
+  const [t, r] = e.split("-");
+  return { field: t, dir: r };
+}, Re = (e) => {
+  const [t, r] = p(e), n = f((s, c) => r({ field: s, dir: c }), []);
+  return [t, n];
 };
-function Le({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1, prefixed: s = !0 }) {
-  const l = (a) => () => {
-    const i = O(a, r.field, r.dir);
-    t(i ? a : void 0, i);
+function Ae({ items: e, order: t, onChange: r, isButton: n = !0, right: s = !1, prefixed: c = !0 }) {
+  const a = (l) => () => {
+    const i = T(l, t.field, t.dir);
+    r(i ? l : void 0, i);
   };
-  return /* @__PURE__ */ d(q, { children: [
-    /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(V, { children: [
+    /* @__PURE__ */ m(
       k,
       {
         caret: !0,
@@ -215,81 +219,82 @@ function Le({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1,
         }),
         children: [
           !n && /* @__PURE__ */ o(N, { children: "Order by" }),
-          n && !r.field && /* @__PURE__ */ o("i", { children: "Order by..." }),
-          n && r.field && /* @__PURE__ */ d(N, { children: [
-            s && "Order by: ",
-            e[r.field],
+          n && !t.field && /* @__PURE__ */ o("i", { children: "Order by..." }),
+          n && t.field && /* @__PURE__ */ m(N, { children: [
+            c && "Order by: ",
+            e[t.field],
             " - ",
-            /* @__PURE__ */ o("small", { children: r.dir ?? "DESC" })
+            /* @__PURE__ */ o("small", { children: t.dir ?? "DESC" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ d(S, { end: c, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
-      Object.entries(e).map(([a, i]) => /* @__PURE__ */ d(
-        g,
+    /* @__PURE__ */ m(v, { end: s, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
+      Object.entries(e).map(([l, i]) => /* @__PURE__ */ m(
+        w,
         {
-          active: r.field === a,
-          onClick: l(a),
+          active: t.field === l,
+          onClick: a(l),
           className: "d-flex justify-content-between align-items-center",
           children: [
             i,
-            r.field === a && /* @__PURE__ */ o(w, { icon: r.dir === "ASC" ? F : P })
+            t.field === l && /* @__PURE__ */ o(g, { icon: t.dir === "ASC" ? F : P })
           ]
         },
-        a
+        l
       )),
-      /* @__PURE__ */ o(g, { divider: !0 }),
-      /* @__PURE__ */ o(g, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
+      /* @__PURE__ */ o(w, { divider: !0 }),
+      /* @__PURE__ */ o(w, { disabled: !t.field, onClick: () => r(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
     ] })
   ] });
 }
-const De = "#4696e5", Re = "rgba(70, 150, 229, 0.4)", Ie = "#f77f28", Ae = "rgba(247, 127, 40, 0.4)", Ee = "white", Fe = "#161b22", oe = (e) => {
-  var r;
-  return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", e);
-}, Pe = () => {
+const Ie = "#4696e5", Ee = "rgba(70, 150, 229, 0.4)", Fe = "#f77f28", Pe = "rgba(247, 127, 40, 0.4)", He = "white", Me = "#161b22", ce = (e) => {
+  var t;
+  return (t = document.querySelector("html")) == null ? void 0 : t.setAttribute("data-theme", e);
+}, $e = () => {
   var e;
   return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
-}, ce = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", He = (e) => {
-  const [r, t] = p(() => e ?? ce());
+}, ae = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", je = (e) => {
+  const [t, r] = p(() => e ?? ae());
   return W(() => {
-    oe(r);
-  }, [r]), [r, t];
+    ce(t);
+  }, [t]), [t, r];
 };
 export {
-  pe as Checkbox,
-  re as DropdownBtn,
-  Ie as HIGHLIGHTED_COLOR,
-  Ae as HIGHLIGHTED_COLOR_ALPHA,
-  we as InputFormGroup,
-  Z as LabeledFormGroup,
-  De as MAIN_COLOR,
-  Re as MAIN_COLOR_ALPHA,
-  he as Message,
-  te as NavPillItem,
-  ke as NavPills,
-  Le as OrderingDropdown,
-  Fe as PRIMARY_DARK_COLOR,
-  Ee as PRIMARY_LIGHT_COLOR,
-  fe as Result,
-  ve as RowDropdownBtn,
-  ge as SearchField,
-  X as SimpleCard,
-  be as ToggleSwitch,
-  oe as changeThemeInMarkup,
-  ne as determineOrder,
-  O as determineOrderDir,
-  ce as getSystemPreferredTheme,
-  Pe as isDarkThemeEnabled,
-  Te as orderToString,
-  K as parseQueryString,
-  Se as sortList,
-  xe as stringToOrder,
-  Ne as stringifyQueryParams,
+  we as Checkbox,
+  ne as DropdownBtn,
+  Fe as HIGHLIGHTED_COLOR,
+  Pe as HIGHLIGHTED_COLOR_ALPHA,
+  Ce as InputFormGroup,
+  B as LabeledFormGroup,
+  Ie as MAIN_COLOR,
+  Ee as MAIN_COLOR_ALPHA,
+  be as Message,
+  oe as NavPillItem,
+  Oe as NavPills,
+  Ae as OrderingDropdown,
+  Me as PRIMARY_DARK_COLOR,
+  He as PRIMARY_LIGHT_COLOR,
+  ge as Result,
+  ye as RowDropdownBtn,
+  Te as SearchField,
+  Z as SimpleCard,
+  Ne as ToggleSwitch,
+  ce as changeThemeInMarkup,
+  se as determineOrder,
+  T as determineOrderDir,
+  ae as getSystemPreferredTheme,
+  $e as isDarkThemeEnabled,
+  xe as orderToString,
+  ee as parseQueryString,
+  Le as sortList,
+  De as stringToOrder,
+  ke as stringifyQueryParams,
   _e as useElementRef,
-  ye as useOrder,
-  Oe as useParsedQuery,
-  He as useTheme,
-  Ce as useTimeoutToggle,
-  ee as useToggle
+  Re as useOrder,
+  ve as useParsedQuery,
+  je as useTheme,
+  X as useTimeout,
+  Se as useTimeoutToggle,
+  re as useToggle
 };

package/dist/tailwind.d.ts

@@ -26,8 +26,6 @@ export declare type ButtonProps = PropsWithChildren<{
     solid?: boolean;
 } & (RegularButtonProps | LinkButtonProps_2)>;
 
-export declare type Callback = () => unknown;
-
 export declare const Card: FC<CardProps> & {
     Body: FC<CardProps>;
     Header: FC<CardProps>;
@@ -84,6 +82,8 @@ export declare const ELLIPSIS = "...";
 
 declare type Ellipsis = typeof ELLIPSIS;
 
+export declare type ExitAction = 'confirm' | 'cancel';
+
 export declare const formatNumber: (number: number | string) => string;
 
 export declare const Input: FC<InputProps>;
@@ -191,7 +191,9 @@ declare type RegularCardModalProps = CommonCardModalProps & {
     /** Determines the horizontal size of the dialog */
     size?: Size | 'xl';
     /** Value to display in confirm button. Defaults to 'Confirm' */
-    confirmText?: string;
+    confirmText?: ReactNode;
+    /** Value to display in cancel button. Defaults to 'Cancel' */
+    cancelText?: ReactNode;
     /** Whether the confirm button is disabled or not */
     confirmDisabled?: boolean;
     /**
@@ -199,6 +201,8 @@ declare type RegularCardModalProps = CommonCardModalProps & {
      * Invoked when the confirm button is actioned.
      */
     onConfirm?: () => void;
+    /** Invoked after finishing the close transition */
+    onClosed?: (exitAction: ExitAction) => void;
 };
 
 export declare type RequiredReactNode = Exclude<ReactNode, undefined | null>;
@@ -268,20 +272,4 @@ export declare const ToggleSwitch: FC<ToggleSwitchProps>;
 
 export declare type ToggleSwitchProps = BooleanControlProps;
 
-export declare function useTimeout(defaultDelay: number, 
-/** Test seam. Defaults to global setTimeout */
-setTimeout_?: typeof globalThis.setTimeout, 
-/** Test seam. Defaults to global clearTimeout */
-clearTimeout_?: typeof clearTimeout): UseTimeoutResult;
-
-export declare type UseTimeoutResult = {
-    /**
-     * Clears any in-progress timeout, and schedules a new callback.
-     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
-     */
-    setTimeout: (callback: Callback, delay?: number) => void;
-    /** Clears any in-progress timeout */
-    clearCurrentTimeout: () => void;
-};
-
 export { }

package/dist/tailwind.js

@@ -1,12 +1,14 @@
-import { jsx as n, jsxs as i, Fragment as B } from "react/jsx-runtime";
-import s, { clsx as f } from "clsx";
-import { createContext as F, useContext as g, useCallback as N, useId as $, useRef as R, useEffect as T, useMemo as E, useState as Q } from "react";
-import { Link as U, NavLink as V } from "react-router";
-import { faClose as X, faSearch as Y, faChevronLeft as j, faChevronRight as D, faCircleNotch as Z } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
-const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className: e }) => {
-  const { responsive: r } = g(x);
-  return /* @__PURE__ */ n(v.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+import { jsx as n, jsxs as i, Fragment as S } from "react/jsx-runtime";
+import s, { clsx as x } from "clsx";
+import { createContext as M, useContext as g, useCallback as L, useId as U, useMemo as z, useRef as _, useEffect as F, useState as et } from "react";
+import { Link as W, NavLink as rt } from "react-router";
+import { faClose as ot, faSearch as nt, faChevronLeft as H, faChevronRight as O, faCircleNotch as dt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
+import { createPortal as lt } from "react-dom";
+import { u as at } from "./use-timeout-BbfWTbuj.js";
+const N = M(void 0), y = M({ responsive: !0 }), st = ({ children: t, className: e }) => {
+  const { responsive: r } = g(y);
+  return /* @__PURE__ */ n(N.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
       className: s(
@@ -16,9 +18,9 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       children: t
     }
   ) });
-}, et = ({ children: t, className: e }) => {
-  const { responsive: r } = g(x);
-  return /* @__PURE__ */ n(v.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+}, wt = ({ children: t, className: e }) => {
+  const { responsive: r } = g(y);
+  return /* @__PURE__ */ n(N.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
       className: s(
@@ -28,9 +30,9 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       children: t
     }
   ) });
-}, rt = ({ children: t, className: e }) => {
-  const { responsive: r } = g(x);
-  return /* @__PURE__ */ n(v.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+}, it = ({ children: t, className: e }) => {
+  const { responsive: r } = g(y);
+  return /* @__PURE__ */ n(N.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
       className: s(
@@ -40,8 +42,8 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       children: t
     }
   ) });
-}, ot = ({ children: t, className: e, ...r }) => {
-  const o = g(v), d = (o == null ? void 0 : o.section) === "body", { responsive: a } = g(x);
+}, ct = ({ children: t, className: e, ...r }) => {
+  const o = g(N), d = (o == null ? void 0 : o.section) === "body", { responsive: a } = g(y);
   return /* @__PURE__ */ n(
     "tr",
     {
@@ -60,8 +62,8 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       children: t
     }
   );
-}, nt = ({ children: t, className: e, columnName: r, type: o, ...d }) => {
-  const a = g(v), l = o ?? ((a == null ? void 0 : a.section) !== "body" ? "th" : "td"), { responsive: w } = g(x);
+}, mt = ({ 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: w } = g(y);
   return /* @__PURE__ */ n(
     l,
     {
@@ -80,11 +82,11 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       children: t
     }
   );
-}, dt = ({ 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(tt, { children: t }),
-  /* @__PURE__ */ n(et, { children: r }),
-  e && /* @__PURE__ */ n(rt, { children: e })
-] }) }), Rt = Object.assign(dt, { Row: ot, Cell: nt }), lt = ({
+}, gt = ({ header: t, footer: e, children: r, responsive: o = !0, ...d }) => /* @__PURE__ */ n(y.Provider, { value: { responsive: o }, children: /* @__PURE__ */ i("table", { className: "tw:w-full", ...d, children: [
+  /* @__PURE__ */ n(st, { children: t }),
+  /* @__PURE__ */ n(wt, { children: r }),
+  e && /* @__PURE__ */ n(it, { children: e })
+] }) }), At = Object.assign(gt, { Row: ct, Cell: mt }), bt = ({
   children: t,
   className: e,
   disabled: r,
@@ -94,7 +96,7 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
   solid: l = !1,
   ...w
 }) => {
-  const c = "to" in w ? U : "button";
+  const c = "to" in w ? W : "button";
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
@@ -150,13 +152,13 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       }
     )
   );
-}, z = ({ className: t, onChange: e, ...r }) => {
-  const o = N((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
+}, q = ({ className: t, onChange: e, ...r }) => {
+  const o = L((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
   return /* @__PURE__ */ n(
     "input",
     {
       type: "checkbox",
-      className: f(
+      className: x(
         "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",
@@ -168,13 +170,13 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       ...r
     }
   );
-}, Et = ({ className: t, ...e }) => /* @__PURE__ */ n(
-  z,
+}, Ut = ({ className: t, ...e }) => /* @__PURE__ */ n(
+  q,
   {
-    className: f("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
+    className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
     ...e
   }
-), H = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
+), $ = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     onClick: t,
@@ -183,9 +185,9 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       "tw:rounded-md tw:focus-ring"
     ),
     "aria-label": e,
-    children: /* @__PURE__ */ n(b, { icon: X, size: "xl" })
+    children: /* @__PURE__ */ n(p, { icon: ot, size: "xl" })
   }
-), A = ({
+), G = ({
   borderless: t = !1,
   size: e = "md",
   feedback: r,
@@ -225,15 +227,15 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
       ...l
     }
   );
-}, W = ({ required: t, children: e, ...r }) => /* @__PURE__ */ i("label", { ...r, children: [
+}, J = ({ 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: "*" })
-] }), Mt = ({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: d, ...a }) => {
-  const l = $();
+] }), zt = ({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: d, ...a }) => {
+  const l = U();
   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, { htmlFor: l, required: r, children: t }),
     /* @__PURE__ */ n(
-      A,
+      G,
       {
         id: l,
         className: e,
@@ -244,7 +246,7 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
     ),
     d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
   ] });
-}, at = ({
+}, ut = ({
   className: t,
   size: e = "md",
   feedback: r,
@@ -283,27 +285,13 @@ const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className:
     disabled: d,
     ...a
   }
-), _t = ({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...d }) => {
-  const a = $();
+), Wt = ({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...d }) => {
+  const a = U();
   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(at, { id: a, className: t, required: r || o, ...d })
+    /* @__PURE__ */ n(J, { htmlFor: a, required: r, children: e }),
+    /* @__PURE__ */ n(ut, { id: a, className: t, required: r || o, ...d })
   ] });
-};
-function st(t, e = globalThis.setTimeout.bind(globalThis), r = globalThis.clearTimeout.bind(globalThis)) {
-  const o = R(null), d = N(() => {
-    o.current && r(o.current);
-  }, [r]), a = N((l, w) => {
-    d(), o.current = e(() => {
-      l(), o.current = null;
-    }, w ?? t);
-  }, [d, t, e]);
-  return T(() => d, [d]), E(
-    () => ({ setTimeout: a, clearCurrentTimeout: d }),
-    [d, a]
-  );
-}
-const jt = ({
+}, qt = ({
   onChange: t,
   containerClassName: e,
   inputClassName: r,
@@ -311,14 +299,14 @@ const jt = ({
   size: o = "lg",
   ...d
 }) => {
-  const { setTimeout: a, clearCurrentTimeout: l } = st(500), w = N((c) => {
+  const { setTimeout: a, clearCurrentTimeout: l } = at(500), w = L((c) => {
     c ? a(() => t(c)) : (l(), t(c));
   }, [l, t, a]);
   return /* @__PURE__ */ i("div", { className: s("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
-      b,
+      p,
       {
-        icon: Y,
+        icon: nt,
         className: s(
           "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",
@@ -330,7 +318,7 @@ const jt = ({
       }
     ),
     /* @__PURE__ */ n(
-      A,
+      G,
       {
         type: "search",
         className: s(
@@ -347,10 +335,10 @@ const jt = ({
       }
     )
   ] });
-}, Dt = ({ className: t, ...e }) => /* @__PURE__ */ n(
-  z,
+}, Gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+  q,
   {
-    className: f(
+    className: x(
       "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)",
@@ -359,7 +347,7 @@ const jt = ({
     ),
     ...e
   }
-), wt = ({ className: t, disabled: e, size: r = "md", ...o }) => /* @__PURE__ */ n(
+), pt = ({ className: t, disabled: e, size: r = "md", ...o }) => /* @__PURE__ */ n(
   "button",
   {
     className: s(
@@ -376,7 +364,7 @@ const jt = ({
     disabled: e,
     ...o
   }
-), it = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), ht = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: s(
@@ -386,7 +374,7 @@ const jt = ({
     ),
     ...e
   }
-), ct = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), ft = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: s(
@@ -396,7 +384,7 @@ const jt = ({
     ),
     ...e
   }
-), mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), xt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: s(
@@ -406,7 +394,7 @@ const jt = ({
     ),
     ...e
   }
-), gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), yt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: s(
@@ -416,7 +404,7 @@ const jt = ({
     ),
     ...e
   }
-), m = Object.assign(gt, { Body: ct, Header: it, Footer: mt }), bt = ({ bodyClassName: t, children: e, ...r }) => {
+), m = Object.assign(yt, { Body: ft, Header: ht, Footer: xt }), kt = ({ bodyClassName: t, children: e, ...r }) => {
   const { title: o, titleSize: d = "md", ...a } = "title" in r ? r : {
     ...r,
     title: void 0,
@@ -430,10 +418,10 @@ const jt = ({
     ] }),
     /* @__PURE__ */ n(m.Body, { className: t, children: e })
   ] });
-}, q = F(null), ut = ({ className: t, to: e, ...r }) => {
-  const o = g(q);
+}, K = M(null), Nt = ({ className: t, to: e, ...r }) => {
+  const o = g(K);
   return /* @__PURE__ */ n(
-    V,
+    rt,
     {
       role: "menuitem",
       to: e,
@@ -451,83 +439,86 @@ const jt = ({
       ...r
     }
   );
-}, ht = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(q.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(m, { role: "menubar", className: s("tw:flex tw:overflow-hidden", e), children: t }) }), Ht = Object.assign(ht, { Pill: ut }), pt = new Intl.NumberFormat("en-US"), ft = (t) => pt.format(Number(t)), O = 10, Ot = (t) => Math.ceil(t / O) * O, p = 2, I = "...", xt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), yt = (t, e) => {
-  const r = xt(
-    Math.max(p, t - p),
-    Math.min(e - 1, t + p) + 1
+}, vt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(K.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(m, { role: "menubar", className: s("tw:flex tw:overflow-hidden", e), children: t }) }), Jt = Object.assign(vt, { Pill: Nt }), Pt = new Intl.NumberFormat("en-US"), Ct = (t) => Pt.format(Number(t)), A = 10, Kt = (t) => Math.ceil(t / A) * A, f = 2, I = "...", Tt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), It = (t, e) => {
+  const r = Tt(
+    Math.max(f, t - f),
+    Math.min(e - 1, t + f) + 1
   );
-  return t - p > p && r.unshift(I), t + p < e - 1 && r.push(I), r.unshift(1), r.push(e), r;
-}, k = (t) => t === I, kt = (t) => k(t) ? t : ft(t), Nt = (t, e) => k(t) ? `${t}_${e}` : `${t}`, G = [
+  return t - f > f && r.unshift(I), t + f < e - 1 && r.push(I), r.unshift(1), r.push(e), r;
+}, k = (t) => t === I, Lt = (t) => k(t) ? t : Ct(t), Bt = (t, e) => k(t) ? `${t}_${e}` : `${t}`, Q = [
   "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) => s(
-  G,
+], V = (t = !1) => s(
+  Q,
   "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
   }
-), S = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: s(G, "tw:px-3 py-2 tw:text-gray-400"), children: t }), K = () => /* @__PURE__ */ n(S, { children: I });
-function vt({ children: t, active: e, isEllipsis: r, href: o, ...d }) {
-  const a = E(() => J(e), [e]);
-  return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n(U, { className: a, to: o, ...d, children: t });
+), E = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: s(Q, "tw:px-3 py-2 tw:text-gray-400"), children: t }), X = () => /* @__PURE__ */ n(E, { children: I });
+function St({ children: t, active: e, isEllipsis: r, href: o, ...d }) {
+  const a = z(() => V(e), [e]);
+  return r ? /* @__PURE__ */ n(X, {}) : /* @__PURE__ */ n(W, { className: a, to: o, ...d, children: t });
 }
-function Pt({ children: t, active: e, isEllipsis: r, ...o }) {
-  const d = E(() => J(e), [e]);
-  return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
+function _t({ children: t, active: e, isEllipsis: r, ...o }) {
+  const d = z(() => V(e), [e]);
+  return r ? /* @__PURE__ */ n(X, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
 }
-const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
-  const o = "urlForPage" in r, d = o ? vt : Pt, a = N(
+const Qt = ({ currentPage: t, pagesCount: e, ...r }) => {
+  const o = "urlForPage" in r, d = o ? St : _t, a = L(
     (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(S, { children: /* @__PURE__ */ n(b, { size: "xs", icon: j }) }) : /* @__PURE__ */ n(d, { ...a(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: j }) }),
-    yt(t, e).map((l, w) => /* @__PURE__ */ n(
+    t === 1 ? /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(p, { size: "xs", icon: H }) }) : /* @__PURE__ */ n(d, { ...a(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(p, { size: "xs", icon: H }) }),
+    It(t, e).map((l, w) => /* @__PURE__ */ n(
       d,
       {
         active: l === t,
         isEllipsis: k(l),
         ...a(l),
-        children: kt(l)
+        children: Lt(l)
       },
-      Nt(l, w)
+      Bt(l, w)
     )),
-    t === e ? /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(b, { size: "xs", icon: D }) }) : /* @__PURE__ */ n(d, { ...a(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: D }) })
+    t === e ? /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(p, { size: "xs", icon: O }) }) : /* @__PURE__ */ n(d, { ...a(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(p, { size: "xs", icon: O }) })
   ] });
-}, Ct = ({
+}, Ft = ({
   open: t,
   children: e,
   className: r,
   onClose: o,
   ...d
 }) => {
-  const a = R(null);
-  return T(() => {
-    var P, y;
+  const a = _(null);
+  return F(() => {
+    var v, P;
     const l = document.body, w = l.style.overflow, c = l.style.paddingRight;
     if (t) {
-      const L = window.outerWidth - l.clientWidth, u = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", u && (l.style.paddingRight = `${L}px`), (P = a.current) == null || P.showModal();
+      const b = window.outerWidth - l.clientWidth, h = l.scrollHeight > l.clientHeight;
+      l.style.overflow = "hidden", h && (l.style.paddingRight = `${b}px`), (v = a.current) == null || v.showModal();
     } else
-      (y = a.current) == null || y.close();
+      (P = a.current) == null || P.close();
     return () => {
       l.style.overflow = w, l.style.paddingRight = c;
     };
-  }, [t]), /* @__PURE__ */ n(
-    "dialog",
-    {
-      ref: a,
-      className: s("tw:bg-transparent tw:backdrop:bg-black/50", r),
-      onCancel: (l) => {
-        l.preventDefault(), o();
-      },
-      ...d,
-      children: t && e
-    }
+  }, [t]), lt(
+    /* @__PURE__ */ n(
+      "dialog",
+      {
+        ref: a,
+        className: s("tw:bg-transparent tw:backdrop:bg-black/50", r),
+        onCancel: (l) => {
+          l.preventDefault(), o();
+        },
+        ...d,
+        children: t && e
+      }
+    ),
+    document.body
   );
-}, Ut = ({
+}, Vt = ({
   open: t,
   onClose: e,
   variant: r = "default",
@@ -539,49 +530,56 @@ const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
   const {
     size: w = "md",
     confirmText: c = "Confirm",
+    cancelText: v = "Cancel",
     confirmDisabled: P,
-    onConfirm: y,
-    ...L
-  } = "onConfirm" in l ? l : { ...l }, [u, M] = Q(t), C = R(null);
-  return T(() => {
+    onConfirm: b,
+    onClosed: h,
+    ...Y
+  } = "onConfirm" in l ? l : { ...l }, [C, R] = et(t), T = _(null), B = _("cancel"), Z = L(() => {
+    B.current = "confirm", b == null || b();
+  }, [b]);
+  return F(() => {
     if (t) {
-      M(!0);
+      B.current = "cancel", R(!0);
       return;
     }
-    const h = C.current;
-    if (h) {
-      delete C.current.dataset.open;
-      const _ = () => M(!1);
-      return h.addEventListener("transitionend", _, { once: !0 }), () => {
-        h.removeEventListener("transitionend", _);
+    const u = T.current;
+    if (u) {
+      delete T.current.dataset.open;
+      let j = !1;
+      const D = (tt) => {
+        j || tt.target !== u || (j = !0, R(!1), h == null || h(B.current));
+      };
+      return u.addEventListener("transitionend", D), () => {
+        u.removeEventListener("transitionend", D);
       };
     }
-  }, [t]), T(() => {
-    const h = C.current;
-    u && h && (h.dataset.open = "");
-  }, [u]), /* @__PURE__ */ n(
-    Ct,
+  }, [h, t]), F(() => {
+    const u = T.current;
+    C && u && (u.dataset.open = "");
+  }, [C]), /* @__PURE__ */ n(
+    Ft,
     {
-      open: u,
+      open: C,
       onClose: e,
       className: s(
         {
-          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": u,
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": C,
           "tw:overflow-hidden": r === "cover"
         },
         a
       ),
-      ...L,
+      ...Y,
       children: /* @__PURE__ */ n(
         "div",
         {
           "data-testid": "transition-container",
-          ref: C,
+          ref: T,
           className: s(
             "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",
+            "tw:transition-[opacity_,_translate] tw:duration-300",
             // Handle modal dimensions for different variants and sizes
             r !== "cover" && {
               "tw:sm:w-sm": w === "sm",
@@ -594,7 +592,7 @@ const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
           children: /* @__PURE__ */ n(m, { className: s(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
-          ), children: r === "cover" ? /* @__PURE__ */ i(B, { children: [
+          ), children: r === "cover" ? /* @__PURE__ */ i(S, { children: [
             /* @__PURE__ */ i(
               "div",
               {
@@ -606,21 +604,21 @@ const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(H, { onClick: e, label: "Close dialog" })
+                  /* @__PURE__ */ n($, { onClick: e, label: "Close dialog" })
                 ]
               }
             ),
             /* @__PURE__ */ n("div", { children: d })
-          ] }) : /* @__PURE__ */ i(B, { children: [
+          ] }) : /* @__PURE__ */ i(S, { children: [
             /* @__PURE__ */ i(m.Header, { className: s(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
               /* @__PURE__ */ n("h5", { className: s({ "tw:text-danger": r === "danger" }), children: o }),
-              /* @__PURE__ */ n(H, { onClick: e, label: "Close dialog" })
+              /* @__PURE__ */ n($, { onClick: e, label: "Close dialog" })
             ] }),
             /* @__PURE__ */ n(m.Body, { children: d }),
-            y && /* @__PURE__ */ i(
+            b && /* @__PURE__ */ i(
               m.Footer,
               {
                 "data-testid": "footer",
@@ -629,14 +627,14 @@ const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ n(wt, { onClick: e, children: "Cancel" }),
+                  /* @__PURE__ */ n(pt, { onClick: e, children: v }),
                   /* @__PURE__ */ n(
-                    lt,
+                    bt,
                     {
                       solid: !0,
                       variant: r === "danger" ? "danger" : "primary",
                       disabled: P,
-                      onClick: y,
+                      onClick: Z,
                       children: c
                     }
                   )
@@ -648,19 +646,19 @@ const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
       )
     }
   );
-}, zt = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(bt, { className: f({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ i("h3", { className: f("tw:text-center", {
+}, Xt = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(kt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ i("h3", { className: x("tw:text-center", {
   "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
   "tw:text-danger": o === "error"
 }), children: [
-  r && /* @__PURE__ */ i(B, { children: [
-    /* @__PURE__ */ n(b, { icon: Z, spin: !0 }),
+  r && /* @__PURE__ */ i(S, { children: [
+    /* @__PURE__ */ n(p, { icon: dt, spin: !0 }),
     /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
   !r && e
-] }) }), At = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
+] }) }), Yt = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: f(
+    className: x(
       "tw:rounded-md tw:text-center",
       {
         "tw:p-2": r === "sm",
@@ -677,32 +675,31 @@ const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
   }
 );
 export {
-  lt as Button,
+  bt as Button,
   m as Card,
-  Ut as CardModal,
-  Et as Checkbox,
-  H as CloseButton,
+  Vt as CardModal,
+  Ut as Checkbox,
+  $ as CloseButton,
   I as ELLIPSIS,
-  A as Input,
-  W as Label,
-  Mt as LabelledInput,
-  _t as LabelledSelect,
-  wt as LinkButton,
-  zt as Message,
-  Ct as ModalDialog,
-  Ht as NavPills,
-  $t as Paginator,
-  At as Result,
-  jt as SearchInput,
-  at as Select,
-  bt as SimpleCard,
-  Rt as Table,
-  Dt as ToggleSwitch,
-  ft as formatNumber,
-  Nt as keyForPage,
+  G as Input,
+  J as Label,
+  zt as LabelledInput,
+  Wt as LabelledSelect,
+  pt as LinkButton,
+  Xt as Message,
+  Ft as ModalDialog,
+  Jt as NavPills,
+  Qt as Paginator,
+  Yt as Result,
+  qt as SearchInput,
+  ut as Select,
+  kt as SimpleCard,
+  At as Table,
+  Gt as ToggleSwitch,
+  Ct as formatNumber,
+  Bt as keyForPage,
   k as pageIsEllipsis,
-  kt as prettifyPageNumber,
-  yt as progressivePagination,
-  Ot as roundTen,
-  st as useTimeout
+  Lt as prettifyPageNumber,
+  It as progressivePagination,
+  Kt as roundTen
 };

package/dist/tailwind.preset.css

@@ -157,6 +157,19 @@
     @apply tw:focus-ring-base tw:focus-visible:ring-danger/50;
 }
 
+@utility scroll-thin {
+    /* Standard. New browsers */
+    scrollbar-width: thin;
+
+    /* Fallbacks */
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: .5rem;
+    }
+}
+
 @custom-variant highlight {
     &:hover,
     &:focus {

package/dist/use-timeout-BbfWTbuj.js

@@ -0,0 +1,17 @@
+import { useRef as l, useCallback as s, useEffect as m, useMemo as f } from "react";
+function a(u, r = globalThis.setTimeout, o = globalThis.clearTimeout) {
+  const t = l(null), e = s(() => {
+    t.current && o(t.current);
+  }, [o]), n = s((c, i) => {
+    e(), t.current = r(() => {
+      c(), t.current = null;
+    }, i ?? u);
+  }, [e, u, r]);
+  return m(() => e, [e]), f(
+    () => ({ setTimeout: n, clearCurrentTimeout: e }),
+    [e, n]
+  );
+}
+export {
+  a as u
+};

package/package.json

@@ -89,5 +89,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.3"
+  "version": "0.8.5"
 }