@shlinkio/shlink-frontend-kit 0.8.1 → 0.8.2

package/dist/tailwind.d.ts

@@ -29,6 +29,13 @@ export declare const Card: FC<CardProps> & {
     Footer: FC<CardProps>;
 };
 
+/**
+ * A ModalDialog that renders a Card as its content
+ */
+export declare const CardModal: FC<CardModalProps>;
+
+export declare type CardModalProps = Omit<ModalDialogProps, 'title' | 'size'> & (CoverCardModalProps | RegularCardModalProps);
+
 export declare type CardProps = HTMLProps<HTMLDivElement>;
 
 export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
@@ -51,6 +58,19 @@ export declare type CloseButtonProps = {
     onClick?: HTMLProps<HTMLButtonElement>['onClick'];
 };
 
+declare type CommonCardModalProps = {
+    /** Modal header title */
+    title: string;
+};
+
+declare type CoverCardModalProps = CommonCardModalProps & {
+    /**
+     * Cover dialogs have a body that span the whole dialog, and no buttons.
+     * The header overlaps the body with semi-transparent background.
+     */
+    variant: 'cover';
+};
+
 export declare const ELLIPSIS = "...";
 
 declare type Ellipsis = typeof ELLIPSIS;
@@ -134,6 +154,22 @@ export declare const progressivePagination: (currentPage: number, pageCount: num
 
 declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
 
+declare type RegularCardModalProps = CommonCardModalProps & {
+    /** Danger dialogs use danger variants in title and confirm button */
+    variant?: 'default' | 'danger';
+    /** Determines the horizontal size of the dialog */
+    size?: Size | 'xl';
+    /** Value to display in confirm button. Defaults to 'Confirm' */
+    confirmText?: string;
+    /** Whether the confirm button is disabled or not */
+    confirmDisabled?: boolean;
+    /**
+     * A footer with confirm and cancel buttons will be rendered if provided.
+     * Invoked when the confirm button is actioned.
+     */
+    onConfirm?: () => void;
+};
+
 export declare const roundTen: (number: number) => number;
 
 export declare const SearchInput: FC<SearchInputProps>;

package/dist/tailwind.js

@@ -1,12 +1,12 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as w, Fragment as I } from "react/jsx-runtime";
 import a from "clsx";
-import { createContext as C, useContext as m, useRef as S, useEffect as B, useId as L, useCallback as f, useMemo as v } from "react";
-import { Link as R } from "react-router";
-import { faClose as U, faSearch as A, faChevronLeft as T, faChevronRight as I } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
-const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r }) => {
-  const { responsive: e } = m(h);
-  return /* @__PURE__ */ n(p.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+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(
     "thead",
     {
       className: a(
@@ -16,9 +16,9 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       children: t
     }
   ) });
-}, O = ({ children: t, className: r }) => {
-  const { responsive: e } = m(h);
-  return /* @__PURE__ */ n(p.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+}, W = ({ children: t, className: r }) => {
+  const { responsive: e } = g(u);
+  return /* @__PURE__ */ n(f.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
       className: a(
@@ -28,9 +28,9 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       children: t
     }
   ) });
-}, W = ({ children: t, className: r }) => {
-  const { responsive: e } = m(h);
-  return /* @__PURE__ */ n(p.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+}, q = ({ children: t, className: r }) => {
+  const { responsive: e } = g(u);
+  return /* @__PURE__ */ n(f.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
       className: a(
@@ -40,8 +40,8 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       children: t
     }
   ) });
-}, _ = ({ children: t, className: r, ...e }) => {
-  const o = m(p), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = m(h);
+}, G = ({ children: t, className: r, ...e }) => {
+  const o = g(f), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = g(u);
   return /* @__PURE__ */ n(
     "tr",
     {
@@ -60,8 +60,8 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       children: t
     }
   );
-}, q = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
-  const l = m(p), s = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = m(h);
+}, 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);
   return /* @__PURE__ */ n(
     s,
     {
@@ -80,38 +80,11 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       children: t
     }
   );
-}, G = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(h.Provider, { value: { responsive: o }, children: /* @__PURE__ */ c("table", { className: "tw:w-full", ...d, children: [
-  /* @__PURE__ */ n(D, { children: t }),
-  /* @__PURE__ */ n(O, { children: e }),
-  r && /* @__PURE__ */ n(W, { children: r })
-] }) }), bt = Object.assign(G, { Row: _, Cell: q }), ht = ({
-  open: t,
-  children: r,
-  className: e,
-  ...o
-}) => {
-  const d = S(null);
-  return B(() => {
-    var w, N;
-    const l = document.body, s = l.style.overflow, i = l.style.paddingRight;
-    if (t) {
-      const $ = window.outerWidth - l.clientWidth, z = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", z && (l.style.paddingRight = `${$}px`), (w = d.current) == null || w.showModal();
-    } else
-      (N = d.current) == null || N.close();
-    return () => {
-      l.style.overflow = s, l.style.paddingRight = i;
-    };
-  }, [t]), /* @__PURE__ */ n(
-    "dialog",
-    {
-      ref: d,
-      className: a("tw:bg-transparent tw:backdrop:bg-black/50", e),
-      ...o,
-      children: t && r
-    }
-  );
-}, ut = ({
+}, 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 = ({
   children: t,
   className: r,
   disabled: e,
@@ -121,11 +94,11 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
   solid: s = !1,
   ...i
 }) => {
-  const w = "to" in i ? R : "button";
+  const c = "to" in i ? _ : "button";
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
-      w,
+      c,
       {
         className: a(
           {
@@ -177,7 +150,7 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       }
     )
   );
-}, pt = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+}, S = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     onClick: t,
@@ -186,9 +159,9 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       "tw:rounded-md tw:focus-ring"
     ),
     "aria-label": r,
-    children: /* @__PURE__ */ n(b, { icon: U, size: "xl" })
+    children: /* @__PURE__ */ n(h, { icon: U, size: "xl" })
   }
-), F = ({
+), j = ({
   borderless: t = !1,
   size: r = "md",
   feedback: e,
@@ -228,15 +201,15 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
       ...s
     }
   );
-}, E = ({ required: t, children: r, ...e }) => /* @__PURE__ */ c("label", { ...e, children: [
+}, H = ({ required: t, children: r, ...e }) => /* @__PURE__ */ w("label", { ...e, children: [
   r,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), ft = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
-  const s = L();
-  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(E, { htmlFor: s, required: e, children: t }),
+] }), 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 }),
     /* @__PURE__ */ n(
-      F,
+      j,
       {
         id: s,
         className: r,
@@ -247,7 +220,7 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
     ),
     d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
   ] });
-}, J = 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>`, K = ({
+}, 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 = ({
   className: t,
   size: r = "md",
   feedback: e,
@@ -280,34 +253,34 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
     ),
     style: {
       ...o,
-      backgroundImage: `url("${J}")`,
+      backgroundImage: `url("${V}")`,
       backgroundSize: "16px 12px",
       backgroundPosition: "right 0.75rem center"
     },
     disabled: d,
     ...l
   }
-), yt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
-  const l = L();
-  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(E, { htmlFor: l, required: e, children: r }),
-    /* @__PURE__ */ n(K, { id: l, className: t, required: e || o, ...d })
+), 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 })
   ] });
 };
-function Q(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
-  const o = S(null), d = f(() => {
+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 = f((s, i) => {
+  }, [e]), l = k((s, i) => {
     d(), o.current = r(() => {
       s(), o.current = null;
     }, i ?? t);
   }, [d, t, r]);
-  return B(() => d, [d]), v(
+  return E(() => d, [d]), T(
     () => ({ setTimeout: l, clearCurrentTimeout: d }),
     [d, l]
   );
 }
-const xt = ({
+const vt = ({
   onChange: t,
   containerClassName: r,
   inputClassName: e,
@@ -315,12 +288,12 @@ const xt = ({
   size: o = "lg",
   ...d
 }) => {
-  const { setTimeout: l, clearCurrentTimeout: s } = Q(500), i = f((w) => {
-    w ? l(() => t(w)) : (s(), t(w));
+  const { setTimeout: l, clearCurrentTimeout: s } = Y(500), i = k((c) => {
+    c ? l(() => t(c)) : (s(), t(c));
   }, [s, t, l]);
-  return /* @__PURE__ */ c("div", { className: a("tw:group tw:relative tw:focus-within:z-10", r), children: [
+  return /* @__PURE__ */ w("div", { className: a("tw:group tw:relative tw:focus-within:z-10", r), children: [
     /* @__PURE__ */ n(
-      b,
+      h,
       {
         icon: A,
         className: a(
@@ -334,7 +307,7 @@ const xt = ({
       }
     ),
     /* @__PURE__ */ n(
-      F,
+      j,
       {
         type: "search",
         className: a(
@@ -345,19 +318,13 @@ const xt = ({
           e
         ),
         placeholder: "Search...",
-        onChange: (w) => i(w.target.value),
+        onChange: (c) => i(c.target.value),
         size: o,
         ...d
       }
     )
   ] });
-}, V = new Intl.NumberFormat("en-US"), X = (t) => V.format(Number(t)), P = 10, kt = (t) => Math.ceil(t / P) * P, g = 2, y = "...", Y = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), Z = (t, r) => {
-  const e = Y(
-    Math.max(g, t - g),
-    Math.min(r - 1, t + g) + 1
-  );
-  return t - g > g && e.unshift(y), t + g < r - 1 && e.push(y), e.unshift(1), e.push(r), e;
-}, u = (t) => t === y, tt = (t) => u(t) ? t : X(t), rt = (t, r) => u(t) ? `${t}_${r}` : `${t}`, vt = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+}, Z = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
   "button",
   {
     className: a(
@@ -374,46 +341,52 @@ const xt = ({
     disabled: r,
     ...o
   }
-), M = [
+), 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"
-], j = (t = !1) => a(
-  M,
+], 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
   }
-), k = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: a(M, "tw:px-3 py-2 tw:text-gray-400"), children: t }), H = () => /* @__PURE__ */ n(k, { children: y });
-function et({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
-  const l = v(() => j(r), [r]);
-  return e ? /* @__PURE__ */ n(H, {}) : /* @__PURE__ */ n(R, { className: l, to: o, ...d, children: 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 ot({ children: t, active: r, isEllipsis: e, ...o }) {
-  const d = v(() => j(r), [r]);
-  return e ? /* @__PURE__ */ n(H, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, 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 Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
-  const o = "urlForPage" in e, d = o ? et : ot, l = f(
-    (s) => o ? { href: u(s) ? void 0 : e.urlForPage(s) } : { onClick: () => !u(s) && e.onPageChange(s) },
+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__ */ c("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(b, { size: "xs", icon: T }) }) : /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: T }) }),
-    Z(t, r).map((s, i) => /* @__PURE__ */ n(
+  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: u(s),
+        isEllipsis: p(s),
         ...l(s),
-        children: tt(s)
+        children: nt(s)
       },
-      rt(s, i)
+      dt(s, i)
     )),
-    t === r ? /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(b, { size: "xs", icon: I }) }) : /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: 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 }) })
   ] });
-}, nt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+}, at = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
     className: a(
@@ -423,7 +396,7 @@ const Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
     ),
     ...r
   }
-), dt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), it = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
     className: a(
@@ -433,7 +406,7 @@ const Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
     ),
     ...r
   }
-), lt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), wt = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
     className: a(
@@ -443,7 +416,7 @@ const Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
     ),
     ...r
   }
-), st = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), ct = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
     className: a(
@@ -453,42 +426,161 @@ const Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
     ),
     ...r
   }
-), x = Object.assign(st, { Body: dt, Header: nt, Footer: lt }), Tt = ({ bodyClassName: t, children: 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,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ c(x, { ...l, children: [
-    o && /* @__PURE__ */ c(x.Header, { children: [
+  return /* @__PURE__ */ w(m, { ...l, children: [
+    o && /* @__PURE__ */ w(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(x.Body, { className: t, children: r })
+    /* @__PURE__ */ n(m.Body, { className: t, children: r })
   ] });
+}, mt = ({
+  open: t,
+  children: r,
+  className: e,
+  ...o
+}) => {
+  const d = M(null);
+  return E(() => {
+    var c, x;
+    const l = document.body, s = l.style.overflow, i = 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();
+    } else
+      (x = d.current) == null || x.close();
+    return () => {
+      l.style.overflow = s, l.style.paddingRight = i;
+    };
+  }, [t]), /* @__PURE__ */ n(
+    "dialog",
+    {
+      ref: d,
+      className: a("tw:bg-transparent tw:backdrop:bg-black/50", e),
+      ...o,
+      children: t && r
+    }
+  );
+}, It = ({
+  open: t,
+  onClose: r,
+  variant: e = "default",
+  title: o,
+  children: d,
+  className: l,
+  ...s
+}) => {
+  const {
+    size: i = "md",
+    confirmText: c = "Confirm",
+    confirmDisabled: x,
+    onConfirm: y,
+    ...N
+  } = "onConfirm" in s ? s : { ...s };
+  return /* @__PURE__ */ n(
+    mt,
+    {
+      open: t,
+      onClose: r,
+      className: a(
+        { "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": t },
+        l
+      ),
+      ...N,
+      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"
+            },
+            {
+              "tw:h-full tw:overflow-auto tw:relative": e === "cover"
+            }
+          ), children: e === "cover" ? /* @__PURE__ */ w(I, { children: [
+            /* @__PURE__ */ w(
+              "div",
+              {
+                className: a(
+                  "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",
+                  "tw:[text-shadow:_0_2px_4px_rgb(0_0_0/_0.8)]"
+                ),
+                children: [
+                  /* @__PURE__ */ n("h5", { children: o }),
+                  /* @__PURE__ */ n(S, { onClick: r, 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__ */ n(m.Body, { children: d }),
+            y && /* @__PURE__ */ w(
+              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",
+                children: [
+                  /* @__PURE__ */ n(
+                    Q,
+                    {
+                      solid: !0,
+                      variant: e === "danger" ? "danger" : "primary",
+                      disabled: x,
+                      onClick: y,
+                      children: c
+                    }
+                  ),
+                  /* @__PURE__ */ n(Z, { onClick: r, children: "Cancel" })
+                ]
+              }
+            )
+          ] }) })
+        }
+      )
+    }
+  );
 };
 export {
-  ut as Button,
-  x as Card,
-  pt as CloseButton,
-  y as ELLIPSIS,
-  F as Input,
-  E as Label,
-  ft as LabelledInput,
-  yt as LabelledSelect,
-  vt as LinkButton,
-  ht as ModalDialog,
-  Nt as Paginator,
-  xt as SearchInput,
-  K as Select,
+  Q 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,
-  bt as Table,
-  X as formatNumber,
-  rt as keyForPage,
-  u as pageIsEllipsis,
-  tt as prettifyPageNumber,
-  Z as progressivePagination,
-  kt as roundTen,
-  Q as useTimeout
+  xt as Table,
+  rt as formatNumber,
+  dt as keyForPage,
+  p as pageIsEllipsis,
+  nt as prettifyPageNumber,
+  ot as progressivePagination,
+  Nt as roundTen,
+  Y as useTimeout
 };

package/package.json

@@ -88,5 +88,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.1"
+  "version": "0.8.2"
 }