@shlinkio/shlink-frontend-kit 0.8.11 → 0.8.12

package/dist/tailwind.d.ts

@@ -85,6 +85,13 @@ declare type CoverCardModalProps = CommonCardModalProps & {
     variant: 'cover';
 };
 
+export declare const Details: FC<DetailsProps>;
+
+export declare type DetailsProps = Omit<HTMLProps<HTMLDetailsElement>, 'ref'> & {
+    summary: ReactNode;
+    summaryClasses?: string;
+};
+
 export declare const ELLIPSIS = "...";
 
 declare type Ellipsis = typeof ELLIPSIS;

package/dist/tailwind.js

@@ -1,12 +1,21 @@
-import { jsx as n, jsxs as g, Fragment as F } from "react/jsx-runtime";
+import { jsxs as g, jsx as n, Fragment as S } from "react/jsx-runtime";
 import i, { clsx as x } from "clsx";
-import { useState as $, useCallback as I, useEffect as _, createContext as H, useContext as N, forwardRef as y, useId as A, useRef as E, useMemo as O } from "react";
-import { Link as S, NavLink as nt } from "react-router";
+import { useRef as L, useState as D, useEffect as M, useCallback as I, createContext as $, useContext as N, forwardRef as y, useId as A, useMemo as O } from "react";
+import { Link as j, NavLink as nt } from "react-router";
 import { faClose as at, faEyeSlash as lt, faEye as dt, faCircleNotch as V, faSearch as st, faChevronLeft as z, faChevronRight as G } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
 import { a as it, u as wt } from "./use-toggle-PWLikLl6.js";
 import { createPortal as ct } from "react-dom";
-const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+const Jt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
+  const a = L(null), [d, l] = D(!1);
+  return M(() => {
+    const s = a.current, w = () => l(!!(s != null && s.open));
+    return s == null || s.addEventListener("toggle", w), () => s == null ? void 0 : s.removeEventListener("toggle", w);
+  }, []), /* @__PURE__ */ g("details", { ref: a, ...o, children: [
+    /* @__PURE__ */ n("summary", { className: x("tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm", r), children: e }),
+    d && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: t })
+  ] });
+}, mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -26,7 +35,7 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
     ),
     ...e
   }
-), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), ut = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -36,7 +45,7 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
     ),
     ...e
   }
-), ut = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -46,7 +55,7 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
     ),
     ...e
   }
-), v = Object.assign(ut, { Body: gt, Header: mt, Footer: bt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
+), v = Object.assign(bt, { Body: gt, Header: mt, Footer: ut }), pt = ({ bodyClassName: t, children: e, ...r }) => {
   const { title: o, titleSize: a = "md", ...d } = "title" in r ? r : {
     ...r,
     title: void 0,
@@ -70,32 +79,32 @@ function ht({
   className: d,
   noItemsMessage: l = "No items",
   anchor: s,
-  "aria-label": c = "Items",
-  ...b
+  "aria-label": w = "Items",
+  ...u
 }) {
-  const [w, u] = $(0), p = I((f) => {
-    if (u(f), o) {
+  const [c, b] = D(0), p = I((f) => {
+    if (b(f), o) {
       const [m, h] = [...e.entries()][f];
       o(m, h);
     }
   }, [e, o]);
-  return _(() => {
+  return M(() => {
     const f = s == null ? void 0 : s.current;
     if (!f)
       return;
     const m = (h) => {
-      ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? p(Math.min(w + 1, e.size - 1)) : h.key === "ArrowUp" ? p(Math.max(w - 1, 0)) : h.key === "Enter" && r([...e.values()][w]);
+      ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? p(Math.min(c + 1, e.size - 1)) : h.key === "ArrowUp" ? p(Math.max(c - 1, 0)) : h.key === "Enter" && r([...e.values()][c]);
     };
     return f.addEventListener("keydown", m), () => f.removeEventListener("keydown", m);
-  }, [w, s, p, e, r]), /* @__PURE__ */ g(
+  }, [c, s, p, e, r]), /* @__PURE__ */ g(
     v,
     {
       id: t,
       className: i("tw:py-1 tw:flex tw:flex-col", d),
       role: "listbox",
       "aria-orientation": "vertical",
-      "aria-label": c,
-      ...b,
+      "aria-label": w,
+      ...u,
       children: [
         e.size === 0 && /* @__PURE__ */ n("i", { role: "option", "aria-disabled": !0, "aria-selected": !1, "data-testid": "no-items", className: "tw:px-2 tw:py-1", children: l }),
         [...e.entries()].map(([f, m], h) => /* @__PURE__ */ n(
@@ -104,10 +113,10 @@ function ht({
             id: `${t}_${f}`,
             type: "button",
             role: "option",
-            "aria-selected": h === w,
+            "aria-selected": h === c,
             className: i(
               "tw:px-2 tw:py-1 tw:text-left tw:truncate",
-              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === w }
+              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === c }
             ),
             tabIndex: -1,
             onClick: () => r(m),
@@ -120,9 +129,9 @@ function ht({
     }
   );
 }
-const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className: e }) => {
+const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className: e }) => {
   const { responsive: r } = N(T);
-  return /* @__PURE__ */ n(B.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(E.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
       className: i(
@@ -134,7 +143,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   ) });
 }, xt = ({ children: t, className: e }) => {
   const { responsive: r } = N(T);
-  return /* @__PURE__ */ n(B.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(E.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
       className: i(
@@ -146,7 +155,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   ) });
 }, yt = ({ children: t, className: e }) => {
   const { responsive: r } = N(T);
-  return /* @__PURE__ */ n(B.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(E.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
       className: i(
@@ -157,7 +166,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     }
   ) });
 }, vt = ({ children: t, className: e, ...r }) => {
-  const o = N(B), a = (o == null ? void 0 : o.section) === "body", { responsive: d } = N(T);
+  const o = N(E), a = (o == null ? void 0 : o.section) === "body", { responsive: d } = N(T);
   return /* @__PURE__ */ n(
     "tr",
     {
@@ -177,7 +186,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     }
   );
 }, kt = ({ children: t, className: e, columnName: r, type: o, ...a }) => {
-  const d = N(B), l = o ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s } = N(T);
+  const d = N(E), l = o ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s } = N(T);
   return /* @__PURE__ */ n(
     l,
     {
@@ -200,7 +209,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   /* @__PURE__ */ n(ft, { children: t }),
   /* @__PURE__ */ n(xt, { children: r }),
   e && /* @__PURE__ */ n(yt, { children: e })
-] }) }), Jt = Object.assign(Nt, { Row: vt, Cell: kt }), Pt = ({
+] }) }), Qt = Object.assign(Nt, { Row: vt, Cell: kt }), Pt = ({
   children: t,
   className: e,
   disabled: r,
@@ -209,13 +218,13 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   inline: d = !1,
   solid: l = !1,
   type: s = "button",
-  ...c
+  ...w
 }) => {
-  const b = "to" in c ? S : "button", w = b === S ? void 0 : s;
+  const u = "to" in w ? j : "button", c = u === j ? void 0 : s;
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
-      b,
+      u,
       {
         className: i(
           {
@@ -263,8 +272,8 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
           e
         ),
         disabled: r,
-        type: w,
-        ...c,
+        type: c,
+        ...w,
         children: t
       }
     )
@@ -288,7 +297,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
       ...r
     }
   );
-}), Qt = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+}), Vt = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   X,
   {
     ref: r,
@@ -316,7 +325,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   readOnly: d,
   ...l
 }, s) => {
-  const c = !a && !d;
+  const w = !a && !d;
   return /* @__PURE__ */ n(
     "input",
     {
@@ -336,10 +345,10 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
           "tw:rounded-md tw:border": !t,
           "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": !c,
-          "tw:bg-lm-primary tw:dark:bg-dm-primary": c,
+          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !w,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": w,
           // Use different background color when rendered inside a card
-          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": c
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": w
         },
         o
       ),
@@ -351,7 +360,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
 }), K = ({ required: t, children: e, className: r, ...o }) => /* @__PURE__ */ g("label", { className: x("tw:cursor-pointer", r), ...o, children: [
   e,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), Vt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
+] }), Xt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
   const s = A();
   return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
     /* @__PURE__ */ n(K, { htmlFor: s, required: r, children: t }),
@@ -369,16 +378,16 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
   ] });
 }), It = y(({ containerClassName: t, className: e, size: r, ...o }, a) => {
-  const [d, l, , s] = it(!1), c = E(null), b = I(({ relatedTarget: w }) => {
-    var u;
-    (u = c.current) != null && u.contains(w) || s();
-  }, [c, s]);
+  const [d, l, , s] = it(!1), w = L(null), u = I(({ relatedTarget: c }) => {
+    var b;
+    (b = w.current) != null && b.contains(c) || s();
+  }, [w, s]);
   return /* @__PURE__ */ g(
     "div",
     {
       className: x("tw:group tw:relative", t),
-      ref: c,
-      onBlurCapture: b,
+      ref: w,
+      onBlurCapture: u,
       children: [
         /* @__PURE__ */ n(
           U,
@@ -419,7 +428,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
       ]
     }
   );
-}), Xt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
+}), Yt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
   const s = A();
   return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
     /* @__PURE__ */ n(K, { htmlFor: s, required: r, children: t }),
@@ -476,13 +485,13 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     disabled: a,
     ...d
   }
-)), Yt = y(({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...a }, d) => {
+)), Zt = y(({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...a }, d) => {
   const l = A();
   return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
     /* @__PURE__ */ n(K, { htmlFor: l, required: r, children: e }),
     /* @__PURE__ */ n(Ct, { ref: d, id: l, className: t, required: r || o, ...a })
   ] });
-}), Tt = y(({
+}), Lt = y(({
   onChange: t,
   containerClassName: e,
   inputClassName: r,
@@ -491,9 +500,9 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   loading: a = !1,
   ...d
 }, l) => {
-  const { setTimeout: s, clearCurrentTimeout: c } = wt(500), b = I((w) => {
-    w ? s(() => t(w)) : (c(), t(w));
-  }, [c, t, s]);
+  const { setTimeout: s, clearCurrentTimeout: w } = wt(500), u = I((c) => {
+    c ? s(() => t(c)) : (w(), t(c));
+  }, [w, t, s]);
   return /* @__PURE__ */ g("div", { className: i("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
       k,
@@ -523,14 +532,14 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
           r
         ),
         placeholder: "Search...",
-        onChange: (w) => b(w.target.value),
+        onChange: (c) => u(c.target.value),
         size: o,
         ...d
       }
     )
   ] });
 });
-function Zt({
+function te({
   searchResults: t,
   onSearch: e,
   onSelectSearchResult: r,
@@ -541,11 +550,11 @@ function Zt({
   onFocus: l,
   ...s
 }) {
-  const c = E(null), b = A(), [w, u] = $(), p = O(
-    () => t ? w ?? [...t.keys()][0] : void 0,
-    [w, t]
+  const w = L(null), u = A(), [c, b] = D(), p = O(
+    () => t ? c ?? [...t.keys()][0] : void 0,
+    [c, t]
   ), f = I((m) => {
-    r(m), e(""), c.current.value = "";
+    r(m), e(""), w.current.value = "";
   }, [e, r]);
   return /* @__PURE__ */ g(
     "div",
@@ -556,16 +565,16 @@ function Zt({
       },
       children: [
         /* @__PURE__ */ n(
-          Tt,
+          Lt,
           {
             onChange: e,
             size: a,
-            ref: c,
+            ref: w,
             role: "combobox",
             "aria-autocomplete": "list",
             "aria-expanded": !!t,
-            "aria-controls": b,
-            "aria-activedescendant": p ? `${b}_${p}` : void 0,
+            "aria-controls": u,
+            "aria-activedescendant": p ? `${u}_${p}` : void 0,
             autoComplete: "off",
             autoCorrect: "off",
             onFocus: (m) => {
@@ -577,11 +586,11 @@ function Zt({
         t && /* @__PURE__ */ n(
           ht,
           {
-            id: b,
+            id: u,
             items: t,
-            anchor: c,
+            anchor: w,
             onSelectItem: f,
-            onActiveItemChange: u,
+            onActiveItemChange: b,
             renderItem: o,
             className: i(
               "tw:absolute tw:top-full tw:mt-1 tw:z-10",
@@ -598,7 +607,7 @@ function Zt({
     }
   );
 }
-const te = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+const ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   X,
   {
     ref: r,
@@ -611,7 +620,7 @@ const te = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
     ),
     ...e
   }
-)), Lt = ({ className: t, disabled: e, size: r = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
+)), Tt = ({ className: t, disabled: e, size: r = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
   "button",
   {
     className: i(
@@ -629,7 +638,7 @@ const te = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
     type: o,
     ...a
   }
-), Y = H(null), Et = ({ className: t, to: e, ...r }) => {
+), Y = $(null), Bt = ({ className: t, to: e, ...r }) => {
   const o = N(Y);
   return /* @__PURE__ */ n(
     nt,
@@ -650,13 +659,13 @@ const te = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
       ...r
     }
   );
-}, Bt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(v, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), ee = Object.assign(Bt, { Pill: Et }), Mt = new Intl.NumberFormat("en-US"), _t = (t) => Mt.format(Number(t)), Q = 10, re = (t) => Math.ceil(t / Q) * Q, C = 2, R = "...", Rt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), At = (t, e) => {
+}, Mt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(v, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), re = Object.assign(Mt, { Pill: Bt }), Et = new Intl.NumberFormat("en-US"), _t = (t) => Et.format(Number(t)), Q = 10, oe = (t) => Math.ceil(t / Q) * Q, C = 2, R = "...", Rt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), Dt = (t, e) => {
   const r = Rt(
     Math.max(C, t - C),
     Math.min(e - 1, t + C) + 1
   );
   return t - C > C && r.unshift(R), t + C < e - 1 && r.push(R), r.unshift(1), r.push(e), r;
-}, L = (t) => t === R, Dt = (t) => L(t) ? t : _t(t), Ft = (t, e) => L(t) ? `${t}_${e}` : `${t}`, Z = [
+}, B = (t) => t === R, At = (t) => B(t) ? t : _t(t), Ft = (t, e) => B(t) ? `${t}_${e}` : `${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"
 ], tt = (t = !1) => i(
@@ -667,52 +676,52 @@ const te = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
     "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
   }
-), j = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: i(Z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), et = () => /* @__PURE__ */ n(j, { children: R });
+), H = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: i(Z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), et = () => /* @__PURE__ */ n(H, { children: R });
 function St({ children: t, active: e, isEllipsis: r, href: o, ...a }) {
   const d = O(() => tt(e), [e]);
-  return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n(S, { className: d, to: o, ...a, children: t });
+  return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n(j, { className: d, to: o, ...a, children: t });
 }
 function jt({ children: t, active: e, isEllipsis: r, ...o }) {
   const a = O(() => tt(e), [e]);
   return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
 }
-const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
+const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
   const o = "urlForPage" in r, a = o ? St : jt, d = I(
-    (l) => o ? { href: L(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !L(l) && r.onPageChange(l) },
+    (l) => o ? { href: B(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !B(l) && r.onPageChange(l) },
     [o, r]
   );
   return e < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }) : /* @__PURE__ */ n(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }),
-    At(t, e).map((l, s) => /* @__PURE__ */ n(
+    t === 1 ? /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }) : /* @__PURE__ */ n(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }),
+    Dt(t, e).map((l, s) => /* @__PURE__ */ n(
       a,
       {
         active: l === t,
-        isEllipsis: L(l),
+        isEllipsis: B(l),
         ...d(l),
-        children: Dt(l)
+        children: At(l)
       },
       Ft(l, s)
     )),
-    t === e ? /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...d(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) })
+    t === e ? /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...d(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) })
   ] });
-}, $t = ({
+}, Ht = ({
   open: t,
   children: e,
   className: r,
   onClose: o,
   ...a
 }) => {
-  const d = E(null);
-  return _(() => {
-    var b, w;
-    const l = document.body, s = l.style.overflow, c = l.style.paddingRight;
+  const d = L(null);
+  return M(() => {
+    var u, c;
+    const l = document.body, s = l.style.overflow, w = l.style.paddingRight;
     if (t) {
-      const u = window.outerWidth - l.clientWidth, p = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", p && (l.style.paddingRight = `${u}px`), (b = d.current) == null || b.showModal();
+      const b = window.outerWidth - l.clientWidth, p = l.scrollHeight > l.clientHeight;
+      l.style.overflow = "hidden", p && (l.style.paddingRight = `${b}px`), (u = d.current) == null || u.showModal();
     } else
-      (w = d.current) == null || w.close();
+      (c = d.current) == null || c.close();
     return () => {
-      l.style.overflow = s, l.style.paddingRight = c;
+      l.style.overflow = s, l.style.paddingRight = w;
     };
   }, [t]), ct(
     /* @__PURE__ */ n(
@@ -729,7 +738,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
     ),
     document.body
   );
-}, ne = ({
+}, ae = ({
   open: t,
   onClose: e,
   variant: r = "default",
@@ -740,36 +749,36 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
 }) => {
   const {
     size: s = "md",
-    confirmText: c = "Confirm",
-    cancelText: b = "Cancel",
-    confirmDisabled: w,
-    onConfirm: u,
+    confirmText: w = "Confirm",
+    cancelText: u = "Cancel",
+    confirmDisabled: c,
+    onConfirm: b,
     onClosed: p,
     ...f
-  } = "onConfirm" in l ? l : { ...l }, [m, h] = $(t), M = E(null), D = E("cancel"), rt = I(() => {
-    D.current = "confirm", u == null || u();
-  }, [u]);
-  return _(() => {
+  } = "onConfirm" in l ? l : { ...l }, [m, h] = D(t), _ = L(null), F = L("cancel"), rt = I(() => {
+    F.current = "confirm", b == null || b();
+  }, [b]);
+  return M(() => {
     if (t) {
-      D.current = "cancel", h(!0);
+      F.current = "cancel", h(!0);
       return;
     }
-    const P = M.current;
+    const P = _.current;
     if (P) {
-      delete M.current.dataset.open;
+      delete _.current.dataset.open;
       let W = !1;
       const q = (ot) => {
-        W || ot.target !== P || (W = !0, h(!1), p == null || p(D.current));
+        W || ot.target !== P || (W = !0, h(!1), p == null || p(F.current));
       };
       return P.addEventListener("transitionend", q), () => {
         P.removeEventListener("transitionend", q);
       };
     }
-  }, [p, t]), _(() => {
-    const P = M.current;
+  }, [p, t]), M(() => {
+    const P = _.current;
     m && P && (P.dataset.open = "");
   }, [m]), /* @__PURE__ */ n(
-    $t,
+    Ht,
     {
       open: m,
       onClose: e,
@@ -785,7 +794,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
         "div",
         {
           "data-testid": "transition-container",
-          ref: M,
+          ref: _,
           className: i(
             "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
@@ -803,7 +812,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
           children: /* @__PURE__ */ n(v, { className: i(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
-          ), children: r === "cover" ? /* @__PURE__ */ g(F, { children: [
+          ), children: r === "cover" ? /* @__PURE__ */ g(S, { children: [
             /* @__PURE__ */ g(
               "div",
               {
@@ -820,7 +829,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
               }
             ),
             /* @__PURE__ */ n("div", { children: a })
-          ] }) : /* @__PURE__ */ g(F, { children: [
+          ] }) : /* @__PURE__ */ g(S, { children: [
             /* @__PURE__ */ g(v.Header, { className: i(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
@@ -829,7 +838,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
               /* @__PURE__ */ n(J, { onClick: e, label: "Close dialog" })
             ] }),
             /* @__PURE__ */ n(v.Body, { children: a }),
-            u && /* @__PURE__ */ g(
+            b && /* @__PURE__ */ g(
               v.Footer,
               {
                 "data-testid": "footer",
@@ -838,15 +847,15 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ n(Lt, { onClick: e, children: b }),
+                  /* @__PURE__ */ n(Tt, { onClick: e, children: u }),
                   /* @__PURE__ */ n(
                     Pt,
                     {
                       solid: !0,
                       variant: r === "danger" ? "danger" : "primary",
-                      disabled: w,
+                      disabled: c,
                       onClick: rt,
-                      children: c
+                      children: w
                     }
                   )
                 ]
@@ -857,16 +866,16 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
       )
     }
   );
-}, ae = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: x("tw:text-center", {
+}, le = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("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__ */ g(F, { children: [
+  r && /* @__PURE__ */ g(S, { children: [
     /* @__PURE__ */ n(k, { icon: V, spin: !0 }),
     /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
   !r && e
-] }) }), le = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
+] }) }), de = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
     className: x(
@@ -888,33 +897,34 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
 export {
   Pt as Button,
   v as Card,
-  ne as CardModal,
-  Qt as Checkbox,
+  ae as CardModal,
+  Vt as Checkbox,
   J as CloseButton,
+  Jt as Details,
   R as ELLIPSIS,
   U as Input,
   K as Label,
-  Vt as LabelledInput,
-  Xt as LabelledRevealablePasswordInput,
-  Yt as LabelledSelect,
-  Lt as LinkButton,
+  Xt as LabelledInput,
+  Yt as LabelledRevealablePasswordInput,
+  Zt as LabelledSelect,
+  Tt as LinkButton,
   ht as Listbox,
-  ae as Message,
-  $t as ModalDialog,
-  ee as NavPills,
-  oe as Paginator,
-  le as Result,
+  le as Message,
+  Ht as ModalDialog,
+  re as NavPills,
+  ne as Paginator,
+  de as Result,
   It as RevealablePasswordInput,
-  Zt as SearchCombobox,
-  Tt as SearchInput,
+  te as SearchCombobox,
+  Lt as SearchInput,
   Ct as Select,
   pt as SimpleCard,
-  Jt as Table,
-  te as ToggleSwitch,
+  Qt as Table,
+  ee as ToggleSwitch,
   _t as formatNumber,
   Ft as keyForPage,
-  L as pageIsEllipsis,
-  Dt as prettifyPageNumber,
-  At as progressivePagination,
-  re as roundTen
+  B as pageIsEllipsis,
+  At as prettifyPageNumber,
+  Dt as progressivePagination,
+  oe as roundTen
 };

package/package.json

@@ -90,5 +90,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.11"
+  "version": "0.8.12"
 }