@shlinkio/shlink-frontend-kit 0.8.0 → 0.8.2

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 import { CardProps } from 'reactstrap';
 import { ChangeEvent } from 'react';
+import { Dispatch } from 'react';
 import { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
 import { FC } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { SetStateAction } from 'react';
 
 declare type BooleanControlProps = PropsWithChildren<{
     checked?: boolean;
@@ -199,6 +201,8 @@ export declare const useOrder: <T>(initialOrder: Order<T>) => [Order<T>, (orderF
 
 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 const useToggle: (initialValue?: boolean) => ToggleResult;

package/dist/index.js

@@ -1,11 +1,11 @@
 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 b } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as w } 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 w, useRef as C, useCallback as f, useMemo as Q, Children as V, isValidElement as Y } from "react";
-import { useLocation as W, NavLink as z } from "react-router";
-const de = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: c = !1 }) => /* @__PURE__ */ o(
+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 { 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(
   _,
   {
     body: !0,
@@ -22,18 +22,18 @@ const de = ({ className: e, children: r, loading: t = !1, type: n = "default", f
           "text-danger": n === "error"
         }),
         children: [
-          t && /* @__PURE__ */ o(b, { icon: I, spin: !0 }),
+          t && /* @__PURE__ */ o(w, { icon: I, spin: !0 }),
           t && /* @__PURE__ */ o("span", { className: "ms-2", children: r ?? "Loading..." }),
           !t && r
         ]
       }
     )
   }
-), J = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(_, { ...n, children: [
+), X = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(_, { ...n, children: [
   e && /* @__PURE__ */ o(H, { role: "heading", "aria-level": 4, children: e }),
   /* @__PURE__ */ o(M, { className: t, children: r })
-] }), me = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
-  J,
+] }), fe = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
+  X,
   {
     role: "document",
     className: u("text-center", {
@@ -56,12 +56,12 @@ const de = ({ className: e, children: r, loading: t = !1, type: n = "default", f
     /* @__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 })
   ] });
-}, ue = (e) => /* @__PURE__ */ o(x, { type: "checkbox", ...e }), he = (e) => /* @__PURE__ */ o(x, { type: "switch", ...e }), X = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: c = !1, id: s }) => /* @__PURE__ */ d("div", { className: `${t} ${c ? "" : "mb-3"}`, children: [
+}, 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 }),
   e
-] }), fe = ({ children: e, value: r, onChange: t, type: n, required: c, placeholder: s, className: l, labelClassName: a }) => {
+] }), we = ({ children: e, value: r, onChange: t, type: n, required: c, placeholder: s, className: l, labelClassName: a }) => {
   const i = T();
-  return /* @__PURE__ */ o(X, { label: /* @__PURE__ */ d(N, { children: [
+  return /* @__PURE__ */ o(Z, { label: /* @__PURE__ */ d(N, { children: [
     e,
     ":"
   ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ o(
@@ -76,13 +76,13 @@ const de = ({ className: e, children: r, loading: t = !1, type: n = "default", f
       onChange: (m) => t(m.target.value)
     }
   ) });
-}, Z = 500;
-let p;
+}, B = 500;
+let b;
 const v = () => {
-  p !== null && clearTimeout(p), p = null;
-}, pe = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: c = "", setTimeout_: s = setTimeout }) => {
-  const [l, a] = w(c), i = (m, h = Z) => {
-    a(m), v(), p = s(() => {
+  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();
     }, h);
   };
@@ -100,7 +100,7 @@ const v = () => {
         onChange: (m) => i(m.target.value)
       }
     ),
-    /* @__PURE__ */ o(b, { icon: A, className: "search-field__icon" }),
+    /* @__PURE__ */ o(w, { icon: A, className: "search-field__icon" }),
     /* @__PURE__ */ o(
       "button",
       {
@@ -113,7 +113,7 @@ const v = () => {
       }
     )
   ] });
-}, B = (e) => {
+}, K = (e) => {
   const r = new URLSearchParams(e), t = {};
   return r.forEach((n, c) => {
     if (c.endsWith("[]")) {
@@ -122,23 +122,23 @@ const v = () => {
     } else
       t[c] = n;
   }), t;
-}, be = (e) => {
+}, 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();
-}, K = (e = !1) => {
-  const [r, t] = w(e), n = f(() => t((l) => !l), []), c = f(() => t(!0), []), s = f(() => t(!1), []);
+}, 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];
-}, we = (e = !1, r = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
-  const [c, s] = w(e), l = C(e), a = C(void 0), i = f(() => {
+}, 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];
-}, ge = () => C(null), Ne = () => {
-  const { search: e } = W();
-  return Q(() => B(e), [e]);
-}, ee = ({
+}, _e = () => C(null), Oe = () => {
+  const { search: e } = z();
+  return Q(() => K(e), [e]);
+}, re = ({
   text: e,
   disabled: r = !1,
   className: t,
@@ -151,7 +151,7 @@ const v = () => {
   size: m,
   ...h
 }) => {
-  const [y, L] = K(), D = u("dropdown-btn__toggle", t, {
+  const [y, L] = ee(), D = u("dropdown-btn__toggle", t, {
     "btn-block": !i,
     "dropdown-btn__toggle--with-caret": !s
   }), R = { minWidth: a && `${a}px` };
@@ -159,10 +159,10 @@ const v = () => {
     /* @__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 })
   ] });
-}, Ce = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
-  ee,
+}, ve = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
+  re,
   {
-    text: /* @__PURE__ */ o(b, { className: "px-1", icon: E }),
+    text: /* @__PURE__ */ o(w, { className: "px-1", icon: E }),
     "aria-label": t,
     size: "sm",
     minWidth: r,
@@ -171,8 +171,8 @@ const v = () => {
     inline: !0,
     children: e
   }
-), re = ({ children: e, ...r }) => /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(G, { className: "nav-pills__nav-link", tag: z, ...r, children: e }) }), _e = ({ 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 !== re)
+), 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)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
 }) }) });
@@ -182,23 +182,23 @@ function O(e, r, t) {
     DESC: void 0
   }[t] : "ASC";
 }
-function te(e, r, t) {
-  return typeof e == "object" ? te(e.currentField, e.newField, e.currentOrderDir) : {
+function ne(e, r, t) {
+  return typeof e == "object" ? ne(e.currentField, e.newField, e.currentOrderDir) : {
     field: r,
     dir: O(e, r, t)
   };
 }
-const Oe = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, c) => {
+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;
-}), ve = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, ke = (e) => {
+}), Te = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, xe = (e) => {
   const [r, t] = e.split("-");
   return { field: r, dir: t };
-}, Se = (e) => {
-  const [r, t] = w(e), n = f((c, s) => t({ field: c, dir: s }), []);
+}, ye = (e) => {
+  const [r, t] = p(e), n = f((c, s) => t({ field: c, dir: s }), []);
   return [r, n];
 };
-function Te({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1, prefixed: s = !0 }) {
+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);
@@ -234,7 +234,7 @@ function Te({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1,
           className: "d-flex justify-content-between align-items-center",
           children: [
             i,
-            r.field === a && /* @__PURE__ */ o(b, { icon: r.dir === "ASC" ? F : P })
+            r.field === a && /* @__PURE__ */ o(w, { icon: r.dir === "ASC" ? F : P })
           ]
         },
         a
@@ -244,46 +244,52 @@ function Te({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1,
     ] })
   ] });
 }
-const xe = "#4696e5", ye = "rgba(70, 150, 229, 0.4)", Le = "#f77f28", De = "rgba(247, 127, 40, 0.4)", Re = "white", Ie = "#161b22", Ae = (e) => {
+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);
-}, Ee = () => {
+}, Pe = () => {
   var e;
   return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
-}, Fe = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}, ce = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", He = (e) => {
+  const [r, t] = p(() => e ?? ce());
+  return W(() => {
+    oe(r);
+  }, [r]), [r, t];
+};
 export {
-  ue as Checkbox,
-  ee as DropdownBtn,
-  Le as HIGHLIGHTED_COLOR,
-  De as HIGHLIGHTED_COLOR_ALPHA,
-  fe as InputFormGroup,
-  X as LabeledFormGroup,
-  xe as MAIN_COLOR,
-  ye as MAIN_COLOR_ALPHA,
-  de as Message,
-  re as NavPillItem,
-  _e as NavPills,
-  Te as OrderingDropdown,
-  Ie as PRIMARY_DARK_COLOR,
-  Re as PRIMARY_LIGHT_COLOR,
-  me as Result,
-  Ce as RowDropdownBtn,
-  pe as SearchField,
-  J as SimpleCard,
-  he as ToggleSwitch,
-  Ae as changeThemeInMarkup,
-  te as determineOrder,
+  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,
-  Fe as getSystemPreferredTheme,
-  Ee as isDarkThemeEnabled,
-  ve as orderToString,
-  B as parseQueryString,
-  Oe as sortList,
-  ke as stringToOrder,
-  be as stringifyQueryParams,
-  ge as useElementRef,
-  Se as useOrder,
-  Ne as useParsedQuery,
-  we as useTimeoutToggle,
-  K as useToggle
+  ce as getSystemPreferredTheme,
+  Pe as isDarkThemeEnabled,
+  Te as orderToString,
+  K as parseQueryString,
+  Se as sortList,
+  xe as stringToOrder,
+  Ne as stringifyQueryParams,
+  _e as useElementRef,
+  ye as useOrder,
+  Oe as useParsedQuery,
+  He as useTheme,
+  Ce as useTimeoutToggle,
+  ee as useToggle
 };

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,16 +58,12 @@ export declare type CloseButtonProps = {
     onClick?: HTMLProps<HTMLButtonElement>['onClick'];
 };
 
-declare type CommonModalDialogProps = {
-    open: boolean;
-    size?: Size | 'xl' | 'full';
+declare type CommonCardModalProps = {
     /** Modal header title */
     title: string;
-    /** Invoked when the modal is closed for any reason */
-    onClose?: () => void;
 };
 
-declare type CoverModalDialogProps = CommonModalDialogProps & {
+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.
@@ -118,7 +121,12 @@ declare type LinkButtonProps_2 = LinkProps;
 
 export declare const ModalDialog: FC<ModalDialogProps>;
 
-export declare type ModalDialogProps = Omit<HTMLProps<HTMLDialogElement>, 'title' | 'size'> & (CoverModalDialogProps | RegularModalDialogProps);
+export declare type ModalDialogProps = HTMLProps<HTMLDialogElement> & {
+    /** Whether the dialog is open or not */
+    open: boolean;
+    /** Invoked when the dialog is closed for any reason */
+    onClose: () => void;
+};
 
 declare type NoTitleProps = {
     title?: never;
@@ -146,12 +154,19 @@ export declare const progressivePagination: (currentPage: number, pageCount: num
 
 declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
 
-declare type RegularModalDialogProps = CommonModalDialogProps & {
+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;
-    /** Invoked when the modal is closed via confirm button */
+    /** 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;
 };
 

package/dist/tailwind.js

@@ -1,51 +1,51 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import w from "clsx";
-import { createContext as I, useContext as b, useId as B, useRef as S, useCallback as p, useEffect as F, useMemo as T } from "react";
-import { Link as L } from "react-router";
-import { faClose as $, faSearch as O, faChevronLeft as q, faChevronRight as _ } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
-const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r }) => {
-  const { responsive: e } = b(f);
-  return /* @__PURE__ */ n(y.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+import { jsx as n, jsxs as w, Fragment as I } from "react/jsx-runtime";
+import a from "clsx";
+import { createContext as L, useContext as g, useId as R, useRef as M, useCallback as k, useEffect as E, useMemo as T } from "react";
+import { Link as _ } from "react-router";
+import { faClose as U, faSearch as A, faChevronLeft as P, faChevronRight as B } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as h } from "@fortawesome/react-fontawesome";
+const f = L(void 0), u = L({ responsive: !0 }), O = ({ children: t, className: r }) => {
+  const { responsive: e } = g(u);
+  return /* @__PURE__ */ n(f.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
-      className: w(
+      className: a(
         { "tw:hidden tw:lg:table-header-group": e },
         r
       ),
       children: t
     }
   ) });
-}, J = ({ children: t, className: r }) => {
-  const { responsive: e } = b(f);
-  return /* @__PURE__ */ n(y.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: w(
+      className: a(
         { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
         r
       ),
       children: t
     }
   ) });
-}, K = ({ children: t, className: r }) => {
-  const { responsive: e } = b(f);
-  return /* @__PURE__ */ n(y.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: w(
+      className: a(
         { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
         r
       ),
       children: t
     }
   ) });
-}, Q = ({ children: t, className: r, ...e }) => {
-  const o = b(y), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = b(f);
+}, 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",
     {
-      className: w(
+      className: a(
         "tw:group",
         {
           "tw:lg:table-row tw:flex tw:flex-col": l,
@@ -60,19 +60,19 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
       children: t
     }
   );
-}, V = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
-  const l = b(y), a = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: s } = b(f);
+}, 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(
-    a,
+    s,
     {
-      "data-column": s ? e : void 0,
-      className: w(
+      "data-column": i ? e : void 0,
+      className: a(
         "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
         {
-          "tw:border-b-1": !s,
-          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
+          "tw:border-b-1": !i,
+          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": i,
           // For md and lower, display the content in data-column attribute as before
-          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && a === "td"
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && s === "td"
         },
         r
       ),
@@ -80,27 +80,27 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
       children: t
     }
   );
-}, W = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(f.Provider, { value: { responsive: o }, children: /* @__PURE__ */ c("table", { className: "tw:w-full", ...d, children: [
-  /* @__PURE__ */ n(G, { children: t }),
-  /* @__PURE__ */ n(J, { children: e }),
-  r && /* @__PURE__ */ n(K, { children: r })
-] }) }), yt = Object.assign(W, { Row: Q, Cell: V }), X = ({
+}, 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,
   variant: o = "primary",
   size: d = "md",
   inline: l = !1,
-  solid: a = !1,
-  ...s
+  solid: s = !1,
+  ...i
 }) => {
-  const m = "to" in s ? L : "button";
+  const c = "to" in i ? _ : "button";
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
-      m,
+      c,
       {
-        className: w(
+        className: a(
           {
             "tw:inline-flex": l,
             "tw:flex": !l
@@ -120,11 +120,11 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
           {
             "tw:border-brand tw:text-brand": o === "primary",
             "tw:border-zinc-500": o === "secondary",
-            "tw:text-zinc-500": o === "secondary" && !a,
+            "tw:text-zinc-500": o === "secondary" && !s,
             "tw:border-danger": o === "danger",
-            "tw:text-danger": o === "danger" && !a
+            "tw:text-danger": o === "danger" && !s
           },
-          a && {
+          s && {
             "tw:text-white": !0,
             "tw:bg-brand": o === "primary",
             "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
@@ -134,7 +134,7 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
             "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
           },
           !e && {
-            "tw:highlight:text-white": !a,
+            "tw:highlight:text-white": !s,
             "tw:highlight:bg-brand": o === "primary",
             "tw:highlight:bg-zinc-500": o === "secondary",
             "tw:highlight:bg-danger": o === "danger"
@@ -145,36 +145,36 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
           r
         ),
         disabled: e,
-        ...s,
+        ...i,
         children: t
       }
     )
   );
-}, Y = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+}, S = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     onClick: t,
-    className: w(
+    className: a(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
       "tw:rounded-md tw:focus-ring"
     ),
     "aria-label": r,
-    children: /* @__PURE__ */ n(k, { icon: $, size: "xl" })
+    children: /* @__PURE__ */ n(h, { icon: U, size: "xl" })
   }
-), R = ({
+), j = ({
   borderless: t = !1,
   size: r = "md",
   feedback: e,
   className: o,
   disabled: d,
   readOnly: l,
-  ...a
+  ...s
 }) => {
-  const s = !d && !l;
+  const i = !d && !l;
   return /* @__PURE__ */ n(
     "input",
     {
-      className: w(
+      className: a(
         "tw:w-full",
         {
           "tw:focus-ring": !e,
@@ -189,29 +189,29 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
           "tw:rounded-md tw:border": !t,
           "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
           "tw:border-danger": !t && e === "error",
-          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !s,
-          "tw:bg-lm-primary tw:dark:bg-dm-primary": s,
+          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !i,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": i,
           // Use different background color when rendered inside a card
-          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": s
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": i
         },
         o
       ),
       disabled: d,
       readOnly: l,
-      ...a
+      ...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: "*" })
-] }), kt = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
-  const a = B();
-  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(E, { htmlFor: a, 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(
-      R,
+      j,
       {
-        id: a,
+        id: s,
         className: r,
         required: e || o,
         feedback: d ? "error" : void 0,
@@ -220,7 +220,7 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
     ),
     d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
   ] });
-}, Z = 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>`, z = ({
+}, 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,
@@ -230,7 +230,7 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
 }) => /* @__PURE__ */ n(
   "select",
   {
-    className: w(
+    className: a(
       "tw:w-full tw:appearance-none tw:pr-9 tw:bg-no-repeat",
       {
         "tw:focus-ring": !e,
@@ -253,34 +253,34 @@ const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r
     ),
     style: {
       ...o,
-      backgroundImage: `url("${Z}")`,
+      backgroundImage: `url("${V}")`,
       backgroundSize: "16px 12px",
       backgroundPosition: "right 0.75rem center"
     },
     disabled: d,
     ...l
   }
-), vt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
-  const l = B();
-  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(z, { 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 tt(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
-  const o = S(null), d = p(() => {
+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 = p((a, s) => {
+  }, [e]), l = k((s, i) => {
     d(), o.current = r(() => {
-      a(), o.current = null;
-    }, s ?? t);
+      s(), o.current = null;
+    }, i ?? t);
   }, [d, t, r]);
-  return F(() => d, [d]), T(
+  return E(() => d, [d]), T(
     () => ({ setTimeout: l, clearCurrentTimeout: d }),
     [d, l]
   );
 }
-const Nt = ({
+const vt = ({
   onChange: t,
   containerClassName: r,
   inputClassName: e,
@@ -288,15 +288,15 @@ const Nt = ({
   size: o = "lg",
   ...d
 }) => {
-  const { setTimeout: l, clearCurrentTimeout: a } = tt(500), s = p((m) => {
-    m ? l(() => t(m)) : (a(), t(m));
-  }, [a, t, l]);
-  return /* @__PURE__ */ c("div", { className: w("tw:group tw:relative tw:focus-within:z-10", r), children: [
+  const { setTimeout: l, clearCurrentTimeout: s } = Y(500), i = k((c) => {
+    c ? l(() => t(c)) : (s(), t(c));
+  }, [s, t, l]);
+  return /* @__PURE__ */ w("div", { className: a("tw:group tw:relative tw:focus-within:z-10", r), children: [
     /* @__PURE__ */ n(
-      k,
+      h,
       {
-        icon: O,
-        className: w(
+        icon: A,
+        className: a(
           "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
           "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
           {
@@ -307,10 +307,10 @@ const Nt = ({
       }
     ),
     /* @__PURE__ */ n(
-      R,
+      j,
       {
         type: "search",
-        className: w(
+        className: a(
           {
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
@@ -318,16 +318,16 @@ const Nt = ({
           e
         ),
         placeholder: "Search...",
-        onChange: (m) => s(m.target.value),
+        onChange: (c) => i(c.target.value),
         size: o,
         ...d
       }
     )
   ] });
-}, rt = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+}, Z = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
   "button",
   {
-    className: w(
+    className: a(
       "tw:inline-flex tw:rounded-md tw:focus-ring",
       "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
       {
@@ -341,194 +341,246 @@ const Nt = ({
     disabled: r,
     ...o
   }
-), et = new Intl.NumberFormat("en-US"), ot = (t) => et.format(Number(t)), P = 10, Tt = (t) => Math.ceil(t / P) * P, h = 2, v = "...", nt = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), dt = (t, r) => {
-  const e = nt(
-    Math.max(h, t - h),
-    Math.min(r - 1, t + h) + 1
+), 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 - h > h && e.unshift(v), t + h < r - 1 && e.push(v), e.unshift(1), e.push(r), e;
-}, x = (t) => t === v, lt = (t) => x(t) ? t : ot(t), at = (t, r) => x(t) ? `${t}_${r}` : `${t}`, M = (t = !1) => w(
+  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:first:rounded-l tw:last:rounded-r",
+  "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
+], D = (t = !1) => a(
+  z,
   "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
-  "tw:outline-none tw:focus-visible:ring-3 tw:focus-visible:ring-brand/75 tw:focus-visible:z-1",
+  "tw:focus-ring tw:focus-visible:z-1",
   {
-    "tw:hover:bg-lm-secondary tw:dark:hover:bg-dm-secondary tw:text-brand tw:border-r-lm-border tw:dark:border-r-dm-border": !t,
-    "tw:bg-brand tw:text-white tw:border-r-brand": t
+    "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
   }
-);
-function j() {
-  return /* @__PURE__ */ n(
-    "span",
-    {
-      "aria-hidden": !0,
-      className: "tw:border-r tw:last:border-none tw:px-3 py-2 tw:text-gray-400 tw:border-r-(--border-color)",
-      children: v
-    }
-  );
+), C = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: a(z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), $ = () => /* @__PURE__ */ n(C, { children: v });
+function lt({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
+  const l = T(() => D(r), [r]);
+  return e ? /* @__PURE__ */ n($, {}) : /* @__PURE__ */ n(_, { className: l, to: o, ...d, children: t });
 }
-function st({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
-  const l = T(() => M(r), [r]);
-  return e ? /* @__PURE__ */ n(j, {}) : /* @__PURE__ */ n(L, { className: l, to: o, ...d, children: t });
-}
-function wt({ children: t, active: r, isEllipsis: e, ...o }) {
-  const d = T(() => M(r), [r]);
-  return e ? /* @__PURE__ */ n(j, {}) : /* @__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 Ct = ({ currentPage: t, pagesCount: r, ...e }) => {
-  const o = "urlForPage" in e, d = o ? st : wt, l = p(
-    (a) => o ? { href: x(a) ? void 0 : e.urlForPage(a) } : { onClick: () => !x(a) && e.onPageChange(a) },
+  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: [
-    /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: q }) }),
-    dt(t, r).map((a, s) => /* @__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: a === t,
-        isEllipsis: x(a),
-        ...l(a),
-        children: lt(a)
+        active: s === t,
+        isEllipsis: p(s),
+        ...l(s),
+        children: nt(s)
       },
-      at(a, s)
+      dt(s, i)
     )),
-    /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: _ }) })
+    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 }) })
   ] });
-}, it = ({ className: t, ...r }) => /* @__PURE__ */ n(
+}, at = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: a(
       "tw:px-4 tw:py-3 tw:rounded-t-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
     ...r
   }
-), ct = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), it = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: a(
       "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
       "tw:first:rounded-t-md tw:last:rounded-b-md",
       t
     ),
     ...r
   }
-), mt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), wt = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: a(
       "tw:px-4 tw:py-3 tw:rounded-b-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
     ...r
   }
-), gt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), ct = ({ className: t, ...r }) => /* @__PURE__ */ n(
   "div",
   {
-    className: w(
+    className: a(
       "tw:group/card tw:rounded-md tw:shadow-md",
       "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
       t
     ),
     ...r
   }
-), g = Object.assign(gt, { Body: ct, Header: it, Footer: mt }), Pt = ({ 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(g, { ...l, children: [
-    o && /* @__PURE__ */ c(g.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(g.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,
-  variant: r = "default",
-  size: e = "md",
+  onClose: r,
+  variant: e = "default",
   title: o,
   children: d,
   className: l,
-  ...a
+  ...s
 }) => {
-  const { onConfirm: s, confirmText: m = "Confirm", ...H } = "onConfirm" in a ? a : {
-    ...a,
-    onConfirm: void 0,
-    confirmText: void 0
-  }, N = S(null), u = p(() => {
-    var i;
-    return (i = N.current) == null ? void 0 : i.close();
-  }, []), A = p(() => {
-    s == null || s(), u();
-  }, [u, s]);
-  return F(() => {
-    var C;
-    const i = document.querySelector("body"), D = i.style.overflow, U = i.style.paddingRight;
-    return t ? (i.style.overflow = "hidden", i.scrollHeight > i.clientHeight && (i.style.paddingRight = "15px"), (C = N.current) == null || C.showModal()) : u(), () => {
-      i.style.overflow = D, i.style.paddingRight = U;
-    };
-  }, [u, t]), /* @__PURE__ */ n(
-    "dialog",
+  const {
+    size: i = "md",
+    confirmText: c = "Confirm",
+    confirmDisabled: x,
+    onConfirm: y,
+    ...N
+  } = "onConfirm" in s ? s : { ...s };
+  return /* @__PURE__ */ n(
+    mt,
     {
-      ref: N,
-      className: w(
-        "tw:bg-transparent tw:backdrop:bg-black/50",
-        {
-          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen tw:px-4": t
-        },
+      open: t,
+      onClose: r,
+      className: a(
+        { "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": t },
         l
       ),
-      ...H,
-      children: t && /* @__PURE__ */ c(g, { className: w(
-        "tw:m-auto tw:w-full",
+      ...N,
+      children: /* @__PURE__ */ n(
+        "div",
         {
-          "tw:md:w-sm": e === "sm",
-          "tw:md:w-lg": e === "md",
-          "tw:md:w-4xl": e === "lg",
-          "tw:md:w-6xl": e === "xl",
-          "tw:w-full": e === "full"
+          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" })
+                ]
+              }
+            )
+          ] }) })
         }
-      ), children: [
-        /* @__PURE__ */ c(g.Header, { className: "tw:flex tw:items-center tw:justify-between tw:sticky tw:top-0", children: [
-          /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
-          /* @__PURE__ */ n(Y, { onClick: u, label: "Close dialog" })
-        ] }),
-        /* @__PURE__ */ n(g.Body, { children: d }),
-        /* @__PURE__ */ c(g.Footer, { className: "tw:flex tw:flex-row-reverse tw:gap-x-2 tw:items-center tw:py-4 tw:sticky tw:bottom-0", children: [
-          s && /* @__PURE__ */ n(X, { variant: r === "danger" ? "danger" : "primary", onClick: A, children: m }),
-          /* @__PURE__ */ n(rt, { onClick: u, children: "Cancel" })
-        ] })
-      ] })
+      )
     }
   );
 };
 export {
-  X as Button,
-  g as Card,
-  Y as CloseButton,
+  Q as Button,
+  m as Card,
+  It as CardModal,
+  S as CloseButton,
   v as ELLIPSIS,
-  R as Input,
-  E as Label,
-  kt as LabelledInput,
-  vt as LabelledSelect,
-  rt as LinkButton,
-  It as ModalDialog,
+  j as Input,
+  H as Label,
+  yt as LabelledInput,
+  kt as LabelledSelect,
+  Z as LinkButton,
+  mt as ModalDialog,
   Ct as Paginator,
-  Nt as SearchInput,
-  z as Select,
-  Pt as SimpleCard,
-  yt as Table,
-  ot as formatNumber,
-  at as keyForPage,
-  x as pageIsEllipsis,
-  lt as prettifyPageNumber,
-  dt as progressivePagination,
-  Tt as roundTen,
-  tt as useTimeout
+  vt as SearchInput,
+  X as Select,
+  Tt as SimpleCard,
+  xt as Table,
+  rt as formatNumber,
+  dt as keyForPage,
+  p as pageIsEllipsis,
+  nt as prettifyPageNumber,
+  ot as progressivePagination,
+  Nt as roundTen,
+  Y as useTimeout
 };

package/dist/tailwind.preset.css

@@ -10,7 +10,7 @@
     --color-lm-main: #4696e5; /* TODO Rename to "brand" */
     --color-lm-main-dark: #1f69c0;
     --color-lm-primary: #ffffff;
-    --color-lm-primary-alfa: rgba(var(--tw-color-lm-primary), .5);
+    --color-lm-primary-alfa: rgb(var(--tw-color-lm-primary) / .5);
     --color-lm-secondary: #f5f6fe;
     --color-lm-text: #232323;
     --color-lm-border: rgb(0 0 0 / .125);
@@ -27,7 +27,7 @@
     --color-dm-main: #4696e5; /* TODO Rename to "brand" */
     --color-dm-main-dark: #1f69c0;
     --color-dm-primary: #161b22;
-    --color-dm-primary-alfa: rgba(var(--tw-color-dm-primary), .8);
+    --color-dm-primary-alfa: rgb(var(--tw-color-dm-primary) / .8);
     --color-dm-secondary: #0f131a;
     --color-dm-text: rgb(201 209 217);
     --color-dm-border: rgb(255 255 255 / .15);

package/package.json

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