@shlinkio/shlink-frontend-kit 0.9.3 → 0.9.5

package/dist/tailwind.d.ts

@@ -33,10 +33,10 @@ export declare type ButtonProps = PropsWithChildren<{
     solid?: boolean;
 } & (RegularButtonProps | LinkButtonProps_2)>;
 
-export declare const Card: FC<CardProps> & {
-    Body: FC<CardProps>;
-    Header: FC<CardProps>;
-    Footer: FC<CardProps>;
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> & {
+    Body: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+    Header: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
 };
 
 /**
@@ -46,7 +46,7 @@ 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 CardProps = Omit<HTMLProps<HTMLDivElement>, 'ref'>;
 
 export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
     /**
@@ -70,6 +70,7 @@ export declare const CloseButton: FC<CloseButtonProps>;
 export declare type CloseButtonProps = {
     label?: string;
     onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+    className?: string;
 };
 
 declare type CommonCardModalProps = {
@@ -372,7 +373,7 @@ declare type SelectElementProps = Omit<HTMLProps<HTMLSelectElement>, 'size' | 'c
 
 export declare type SelectProps = PropsWithChildren<SelectElementProps & BaseInputProps>;
 
-export declare const SimpleCard: FC<SimpleCardProps>;
+export declare const SimpleCard: ForwardRefExoticComponent<SimpleCardProps & RefAttributes<HTMLDivElement>>;
 
 export declare type SimpleCardProps = Omit<CardProps, 'title' | 'size'> & {
     bodyClassName?: string;

package/dist/tailwind.js

@@ -1,22 +1,22 @@
 import { jsxs as g, jsx as n, Fragment as S } from "react/jsx-runtime";
-import w, { clsx as x } from "clsx";
-import { useRef as I, useState as F, useEffect as M, useCallback as C, createContext as H, useContext as N, forwardRef as y, useId as $, useMemo as O } from "react";
+import w, { clsx as y } from "clsx";
+import { useRef as I, useState as D, useEffect as M, forwardRef as u, useCallback as P, createContext as H, useContext as C, useId as F, useMemo as O } from "react";
 import { Link as j, NavLink as at } from "react-router";
 import { faClose as dt, faEyeSlash as lt, faEye as it, faCircleNotch as Y, faSearch as st, faChevronLeft as J, faChevronRight as Q, faCheck as wt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as v } from "@fortawesome/react-fontawesome";
 import { u as ct, a as mt, b as gt } from "./use-toggle-C1uZwbSD.js";
 import { createPortal as bt } from "react-dom";
 import { faClone as ut } from "@fortawesome/free-regular-svg-icons";
-const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
-  const a = I(null), [l, d] = F(!1);
+const zt = ({ children: t, summary: r, summaryClasses: e, ...o }) => {
+  const a = I(null), [l, d] = D(!1);
   return M(() => {
     const i = a.current, s = () => d(!!(i != null && i.open));
     return i == null || i.addEventListener("toggle", s), () => i == null ? void 0 : i.removeEventListener("toggle", s);
   }, []), /* @__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 }),
+    /* @__PURE__ */ n("summary", { className: y("tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm", e), children: r }),
     l && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: t })
   ] });
-}, pt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+}, pt = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
@@ -24,9 +24,10 @@ const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
-    ...e
+    ...r,
+    ref: e
   }
-), ht = ({ className: t, ...e }) => /* @__PURE__ */ n(
+)), ht = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
@@ -34,9 +35,10 @@ const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
       "tw:first:rounded-t-md tw:last:rounded-b-md",
       t
     ),
-    ...e
+    ...r,
+    ref: e
   }
-), ft = ({ className: t, ...e }) => /* @__PURE__ */ n(
+)), ft = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
@@ -44,9 +46,10 @@ const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
-    ...e
+    ...r,
+    ref: e
   }
-), xt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+)), xt = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
   "div",
   {
     className: w(
@@ -54,27 +57,28 @@ const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
       "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
       t
     ),
-    ...e
-  }
-), v = Object.assign(xt, { Body: ht, Header: pt, Footer: ft }), yt = ({ bodyClassName: t, children: e, ...r }) => {
-  const { title: o, titleSize: a = "md", ...l } = "title" in r ? r : {
     ...r,
+    ref: e
+  }
+)), N = Object.assign(xt, { Body: ht, Header: pt, Footer: ft }), yt = u(({ bodyClassName: t, children: r, ...e }, o) => {
+  const { title: a, titleSize: l = "md", ...d } = "title" in e ? e : {
+    ...e,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ g(v, { ...l, children: [
-    o && /* @__PURE__ */ g(v.Header, { children: [
-      a === "lg" && /* @__PURE__ */ n("h4", { children: o }),
-      a === "md" && /* @__PURE__ */ n("h5", { children: o }),
-      a === "sm" && /* @__PURE__ */ n("h6", { children: o })
+  return /* @__PURE__ */ g(N, { ...d, ref: o, children: [
+    a && /* @__PURE__ */ g(N.Header, { children: [
+      l === "lg" && /* @__PURE__ */ n("h4", { children: a }),
+      l === "md" && /* @__PURE__ */ n("h5", { children: a }),
+      l === "sm" && /* @__PURE__ */ n("h6", { children: a })
     ] }),
-    /* @__PURE__ */ n(v.Body, { className: t, children: e })
+    /* @__PURE__ */ n(N.Body, { className: t, children: r })
   ] });
-};
+});
 function kt({
   id: t,
-  items: e,
-  onSelectItem: r,
+  items: r,
+  onSelectItem: e,
   onActiveItemChange: o,
   renderItem: a,
   className: l,
@@ -83,22 +87,22 @@ function kt({
   "aria-label": s = "Items",
   ...c
 }) {
-  const [m, u] = F(0), p = C((f) => {
-    if (u(f), o) {
-      const [b, h] = [...e.entries()][f];
-      o(b, h);
+  const [m, p] = D(0), h = P((x) => {
+    if (p(x), o) {
+      const [b, f] = [...r.entries()][x];
+      o(b, f);
     }
-  }, [e, o]);
+  }, [r, o]);
   return M(() => {
-    const f = i == null ? void 0 : i.current;
-    if (!f)
+    const x = i == null ? void 0 : i.current;
+    if (!x)
       return;
-    const b = (h) => {
-      ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? p(Math.min(m + 1, e.size - 1)) : h.key === "ArrowUp" ? p(Math.max(m - 1, 0)) : h.key === "Enter" && r([...e.values()][m]);
+    const b = (f) => {
+      ["Enter", "ArrowUp", "ArrowDown"].includes(f.key) && f.preventDefault(), f.key === "ArrowDown" ? h(Math.min(m + 1, r.size - 1)) : f.key === "ArrowUp" ? h(Math.max(m - 1, 0)) : f.key === "Enter" && e([...r.values()][m]);
     };
-    return f.addEventListener("keydown", b), () => f.removeEventListener("keydown", b);
-  }, [m, i, p, e, r]), /* @__PURE__ */ g(
-    v,
+    return x.addEventListener("keydown", b), () => x.removeEventListener("keydown", b);
+  }, [m, i, h, r, e]), /* @__PURE__ */ g(
+    N,
     {
       id: t,
       className: w("tw:py-1 tw:flex tw:flex-col", l),
@@ -107,67 +111,67 @@ function kt({
       "aria-label": s,
       ...c,
       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: d }),
-        [...e.entries()].map(([f, b], h) => /* @__PURE__ */ n(
+        r.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: d }),
+        [...r.entries()].map(([x, b], f) => /* @__PURE__ */ n(
           "button",
           {
-            id: `${t}_${f}`,
+            id: `${t}_${x}`,
             type: "button",
             role: "option",
-            "aria-selected": h === m,
+            "aria-selected": f === m,
             className: w(
               "tw:px-2 tw:py-1 tw:text-left tw:truncate",
-              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === m }
+              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": f === m }
             ),
             tabIndex: -1,
-            onClick: () => r(b),
-            onMouseOver: () => p(h),
+            onClick: () => e(b),
+            onMouseOver: () => h(f),
             children: a(b)
           },
-          f
+          x
         ))
       ]
     }
   );
 }
-const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className: e }) => {
-  const { responsive: r } = N(L);
+const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className: r }) => {
+  const { responsive: e } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
       className: w(
-        { "tw:hidden tw:lg:table-header-group": r },
-        e
+        { "tw:hidden tw:lg:table-header-group": e },
+        r
       ),
       children: t
     }
   ) });
-}, Nt = ({ children: t, className: e }) => {
-  const { responsive: r } = N(L);
+}, Nt = ({ children: t, className: r }) => {
+  const { responsive: e } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
       className: w(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": r },
-        e
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
+        r
       ),
       children: t
     }
   ) });
-}, Ct = ({ children: t, className: e }) => {
-  const { responsive: r } = N(L);
+}, Ct = ({ children: t, className: r }) => {
+  const { responsive: e } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
       className: w(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": r },
-        e
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
+        r
       ),
       children: t
     }
   ) });
-}, Pt = ({ children: t, className: e, ...r }) => {
-  const o = N(E), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = N(L);
+}, Pt = ({ children: t, className: r, ...e }) => {
+  const o = C(E), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = C(L);
   return /* @__PURE__ */ n(
     "tr",
     {
@@ -180,18 +184,18 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
           // Use a different hover bg color depending on the table being inside a card or not
           "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": a
         },
-        e
+        r
       ),
-      ...r,
+      ...e,
       children: t
     }
   );
-}, Tt = ({ children: t, className: e, columnName: r, type: o, ...a }) => {
-  const l = N(E), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = N(L);
+}, Tt = ({ children: t, className: r, columnName: e, type: o, ...a }) => {
+  const l = C(E), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = C(L);
   return /* @__PURE__ */ n(
     d,
     {
-      "data-column": i ? r : void 0,
+      "data-column": i ? e : void 0,
       className: w(
         "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
         {
@@ -200,20 +204,20 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
           // For md and lower, display the content in data-column attribute as before
           "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && d === "td"
         },
-        e
+        r
       ),
       ...a,
       children: t
     }
   );
-}, It = ({ header: t, footer: e, children: r, responsive: o = !0, ...a }) => /* @__PURE__ */ n(L.Provider, { value: { responsive: o }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...a, children: [
+}, It = ({ header: t, footer: r, children: e, responsive: o = !0, ...a }) => /* @__PURE__ */ n(L.Provider, { value: { responsive: o }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...a, children: [
   /* @__PURE__ */ n(vt, { children: t }),
-  /* @__PURE__ */ n(Nt, { children: r }),
-  e && /* @__PURE__ */ n(Ct, { children: e })
+  /* @__PURE__ */ n(Nt, { children: e }),
+  r && /* @__PURE__ */ n(Ct, { children: r })
 ] }) }), te = Object.assign(It, { Row: Pt, Cell: Tt }), Lt = ({
   children: t,
-  className: e,
-  disabled: r,
+  className: r,
+  disabled: e,
   variant: o = "primary",
   size: a = "md",
   inline: l = !1,
@@ -263,32 +267,32 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
             "tw:bg-danger": o === "danger",
             "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
           },
-          !r && {
+          !e && {
             "tw:highlight:text-white": !d,
             "tw:highlight:bg-lm-brand tw:dark:highlight:bg-dm-brand": o === "primary",
             "tw:highlight:bg-zinc-500": o === "secondary",
             "tw:highlight:bg-danger": o === "danger"
           },
           {
-            "tw:pointer-events-none tw:opacity-65": r
+            "tw:pointer-events-none tw:opacity-65": e
           },
-          e
+          r
         ),
-        disabled: r,
+        disabled: e,
         type: m,
         ...s,
         children: t
       }
     )
   );
-}, Z = y(({ className: t, onChange: e, ...r }, o) => {
-  const a = C((l) => e == null ? void 0 : e(l.target.checked, l), [e]);
+}, Z = u(({ className: t, onChange: r, ...e }, o) => {
+  const a = P((l) => r == null ? void 0 : r(l.target.checked, l), [r]);
   return /* @__PURE__ */ n(
     "input",
     {
       ref: o,
       type: "checkbox",
-      className: x(
+      className: y(
         "tw:appearance-none tw:focus-ring tw:cursor-[inherit]",
         "tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border",
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-lm-brand tw:dark:checked:bg-dm-brand tw:bg-no-repeat",
@@ -297,32 +301,33 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
         t
       ),
       onChange: a,
-      ...r
+      ...e
     }
   );
-}), ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+}), ee = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
   Z,
   {
-    ref: r,
-    className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
-    ...e
+    ref: e,
+    className: y("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
+    ...r
   }
-)), V = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
+)), V = ({ onClick: t, className: r, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
     onClick: t,
     className: w(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
-      "tw:rounded-md tw:focus-ring"
+      "tw:rounded-md tw:focus-ring",
+      r
     ),
     "aria-label": e,
-    children: /* @__PURE__ */ n(k, { icon: dt, size: "xl" })
+    children: /* @__PURE__ */ n(v, { icon: dt, size: "xl" })
   }
-), U = y(({
+), U = u(({
   borderless: t = !1,
-  size: e = "md",
-  feedback: r,
+  size: r = "md",
+  feedback: e,
   className: o,
   disabled: a,
   readOnly: l,
@@ -336,18 +341,18 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       className: w(
         "tw:w-full",
         {
-          "tw:focus-ring": !r,
-          "tw:focus-ring-danger": r === "error"
+          "tw:focus-ring": !e,
+          "tw:focus-ring-danger": e === "error"
         },
         {
-          "tw:px-2 tw:py-1 tw:text-sm": e === "sm",
-          "tw:px-3 tw:py-1.5": e === "md",
-          "tw:px-4 tw:py-2 tw:text-xl": e === "lg"
+          "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
+          "tw:px-3 tw:py-1.5": r === "md",
+          "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
         },
         {
           "tw: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: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,
           // Use different background color when rendered inside a card
@@ -360,45 +365,45 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       ...d
     }
   );
-}), W = ({ required: t, children: e, className: r, ...o }) => /* @__PURE__ */ g("label", { className: x("tw:cursor-pointer", r), ...o, children: [
-  e,
+}), W = ({ required: t, children: r, className: e, ...o }) => /* @__PURE__ */ g("label", { className: y("tw:cursor-pointer", e), ...o, children: [
+  r,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), K = ({ children: t, helpText: e, error: r, "data-testid": o }) => /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", "data-testid": o, children: [
+] }), K = ({ children: t, helpText: r, error: e, "data-testid": o }) => /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", "data-testid": o, children: [
   t,
-  e && /* @__PURE__ */ n(
+  r && /* @__PURE__ */ n(
     "small",
     {
       "data-testid": o ? `${o}-help-text` : "help-text",
       className: "tw:text-gray-500 tw:dark:text-gray-400",
-      children: e
+      children: r
     }
   ),
-  r && /* @__PURE__ */ n("span", { "data-testid": o ? `${o}-error` : "error", className: "tw:text-danger", children: r })
-] }), re = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
-  const c = $();
+  e && /* @__PURE__ */ n("span", { "data-testid": o ? `${o}-error` : "error", className: "tw:text-danger", children: e })
+] }), re = u(({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
+  const c = F();
   return /* @__PURE__ */ g(K, { error: a, helpText: l, "data-testid": d, children: [
-    /* @__PURE__ */ n(W, { htmlFor: c, required: r, children: t }),
+    /* @__PURE__ */ n(W, { htmlFor: c, required: e, children: t }),
     /* @__PURE__ */ n(
       U,
       {
         ref: s,
         id: c,
-        className: e,
-        required: r || o,
+        className: r,
+        required: e || o,
         feedback: a ? "error" : void 0,
         ...i
       }
     )
   ] });
-}), Bt = y(({ containerClassName: t, className: e, size: r, ...o }, a) => {
-  const [l, d, , i] = ct(!1), s = I(null), c = C(({ relatedTarget: m }) => {
-    var u;
-    (u = s.current) != null && u.contains(m) || i();
+}), Bt = u(({ containerClassName: t, className: r, size: e, ...o }, a) => {
+  const [l, d, , i] = ct(!1), s = I(null), c = P(({ relatedTarget: m }) => {
+    var p;
+    (p = s.current) != null && p.contains(m) || i();
   }, [s, i]);
   return /* @__PURE__ */ g(
     "div",
     {
-      className: x("tw:group tw:relative", t),
+      className: y("tw:group tw:relative", t),
       ref: s,
       onBlurCapture: c,
       children: [
@@ -407,14 +412,14 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
           {
             ref: a,
             type: l ? "text" : "password",
-            className: x(
+            className: y(
               {
-                "tw:pr-10": r !== "sm",
-                "tw:pr-8": r === "sm"
+                "tw:pr-10": e !== "sm",
+                "tw:pr-8": e === "sm"
               },
-              e
+              r
             ),
-            size: r,
+            size: e,
             "data-testid": "input",
             ...o
           }
@@ -426,41 +431,41 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
             onClick: d,
             title: l ? "Hide password" : "Show password",
             "aria-label": l ? "Hide password" : "Show password",
-            className: x(
+            className: y(
               "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1",
               "tw:text-placeholder tw:hover:text-lm-text tw:hover:dark:text-dm-text tw:transition-colors",
               {
-                "tw:right-1.5": r !== "sm",
-                "tw:scale-85 tw:right-1": r === "sm"
+                "tw:right-1.5": e !== "sm",
+                "tw:scale-85 tw:right-1": e === "sm"
               }
             ),
             tabIndex: -1,
-            children: /* @__PURE__ */ n(k, { fixedWidth: !0, icon: l ? lt : it })
+            children: /* @__PURE__ */ n(v, { fixedWidth: !0, icon: l ? lt : it })
           }
         )
       ]
     }
   );
-}), oe = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
-  const c = $();
+}), oe = u(({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
+  const c = F();
   return /* @__PURE__ */ g(K, { error: a, helpText: l, "data-testid": d, children: [
-    /* @__PURE__ */ n(W, { htmlFor: c, required: r, children: t }),
+    /* @__PURE__ */ n(W, { htmlFor: c, required: e, children: t }),
     /* @__PURE__ */ n(
       Bt,
       {
         ref: s,
         id: c,
-        className: e,
-        required: r || o,
+        className: r,
+        required: e || o,
         feedback: a ? "error" : void 0,
         ...i
       }
     )
   ] });
-}), Mt = y(({
+}), Mt = u(({
   className: t,
-  size: e = "md",
-  feedback: r,
+  size: r = "md",
+  feedback: e,
   style: o = {},
   disabled: a,
   ...l
@@ -472,18 +477,18 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       "tw:w-full tw:appearance-none tw:pr-9",
       "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
       {
-        "tw:focus-ring": !r,
-        "tw:focus-ring-danger": r === "error"
+        "tw:focus-ring": !e,
+        "tw:focus-ring-danger": e === "error"
       },
       "tw:rounded-md tw:border",
       {
-        "tw:border-lm-input-border tw:dark:border-dm-input-border": !r,
-        "tw:border-danger": r === "error"
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
+        "tw:border-danger": e === "error"
       },
       {
-        "tw:pl-2 tw:py-1 tw:text-sm": e === "sm",
-        "tw:pl-3 tw:py-1.5": e === "md",
-        "tw:pl-4 tw:py-2 tw:text-xl": e === "lg",
+        "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
+        "tw:pl-3 tw:py-1.5": r === "md",
+        "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
         "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": a,
         // Apply different background color when rendered inside a card
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !a
@@ -497,10 +502,10 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     disabled: a,
     ...l
   }
-)), ne = y(({ selectClassName: t, label: e, error: r, helpText: o, required: a, hiddenRequired: l, "data-testid": d, ...i }, s) => {
-  const c = $();
-  return /* @__PURE__ */ g(K, { error: r, helpText: o, "data-testid": d, children: [
-    /* @__PURE__ */ n(W, { htmlFor: c, required: a, children: e }),
+)), ne = u(({ selectClassName: t, label: r, error: e, helpText: o, required: a, hiddenRequired: l, "data-testid": d, ...i }, s) => {
+  const c = F();
+  return /* @__PURE__ */ g(K, { error: e, helpText: o, "data-testid": d, children: [
+    /* @__PURE__ */ n(W, { htmlFor: c, required: a, children: r }),
     /* @__PURE__ */ n(
       Mt,
       {
@@ -508,26 +513,26 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
         id: c,
         className: t,
         required: a || l,
-        feedback: r ? "error" : void 0,
+        feedback: e ? "error" : void 0,
         ...i
       }
     )
   ] });
-}), Et = y(({
+}), Et = u(({
   onChange: t,
-  containerClassName: e,
-  inputClassName: r,
+  containerClassName: r,
+  inputClassName: e,
   // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
   size: o = "lg",
   loading: a = !1,
   ...l
 }, d) => {
-  const { setTimeout: i, clearCurrentTimeout: s } = mt(500), c = C((m) => {
+  const { setTimeout: i, clearCurrentTimeout: s } = mt(500), c = P((m) => {
     m ? i(() => t(m)) : (s(), t(m));
   }, [s, t, i]);
-  return /* @__PURE__ */ g("div", { className: w("tw:group tw:relative tw:focus-within:z-10", e), children: [
+  return /* @__PURE__ */ g("div", { className: w("tw:group tw:relative tw:focus-within:z-10", r), children: [
     /* @__PURE__ */ n(
-      k,
+      v,
       {
         icon: a ? Y : st,
         spin: a,
@@ -551,7 +556,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
           },
-          r
+          e
         ),
         placeholder: "Search...",
         onChange: (m) => c(m.target.value),
@@ -563,8 +568,8 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
 });
 function ae({
   searchResults: t,
-  onSearch: e,
-  onSelectSearchResult: r,
+  onSearch: r,
+  onSelectSearchResult: e,
   renderSearchResult: o,
   size: a = "md",
   // SearchInput defaults its size to 'lg'. Change it to 'md'
@@ -572,35 +577,35 @@ function ae({
   onFocus: d,
   ...i
 }) {
-  const s = I(null), c = $(), [m, u] = F(), p = O(
+  const s = I(null), c = F(), [m, p] = D(), h = O(
     () => t ? m ?? [...t.keys()][0] : void 0,
     [m, t]
-  ), f = C((b) => {
-    r(b), e(""), s.current.value = "";
-  }, [e, r]);
+  ), x = P((b) => {
+    e(b), r(""), s.current.value = "";
+  }, [r, e]);
   return /* @__PURE__ */ g(
     "div",
     {
       className: "tw:relative",
       onBlur: (b) => {
-        b.currentTarget.contains(b.relatedTarget) || e("");
+        b.currentTarget.contains(b.relatedTarget) || r("");
       },
       children: [
         /* @__PURE__ */ n(
           Et,
           {
-            onChange: e,
+            onChange: r,
             size: a,
             ref: s,
             role: "combobox",
             "aria-autocomplete": "list",
             "aria-expanded": !!t,
             "aria-controls": c,
-            "aria-activedescendant": p ? `${c}_${p}` : void 0,
+            "aria-activedescendant": h ? `${c}_${h}` : void 0,
             autoComplete: "off",
             autoCorrect: "off",
             onFocus: (b) => {
-              d == null || d(b), e(b.target.value);
+              d == null || d(b), r(b.target.value);
             },
             ...i
           }
@@ -611,8 +616,8 @@ function ae({
             id: c,
             items: t,
             anchor: s,
-            onSelectItem: f,
-            onActiveItemChange: u,
+            onSelectItem: x,
+            onActiveItemChange: p,
             renderItem: o,
             className: w(
               "tw:absolute tw:top-full tw:mt-1 tw:z-10",
@@ -629,20 +634,20 @@ function ae({
     }
   );
 }
-const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+const de = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
   Z,
   {
-    ref: r,
-    className: x(
+    ref: e,
+    className: y(
       "tw:rounded-full tw:w-8 tw:h-4",
       "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
       "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
       "tw:checked:bg-right tw:transition-[background-position]",
       t
     ),
-    ...e
+    ...r
   }
-)), Rt = ({ className: t, disabled: e, size: r = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
+)), Rt = ({ className: t, disabled: r, size: e = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
   "button",
   {
     className: w(
@@ -650,24 +655,24 @@ const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
       "tw:text-lm-brand tw:dark:text-dm-brand",
       "tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline",
       {
-        "tw:px-1.5 tw:py-1 tw:text-sm": r === "sm",
-        "tw:px-3 tw:py-1.5": r === "md",
-        "tw:px-4 tw:py-2 tw:text-lg": r === "lg",
-        "tw:pointer-events-none tw:opacity-65": e
+        "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
+        "tw:px-3 tw:py-1.5": e === "md",
+        "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
+        "tw:pointer-events-none tw:opacity-65": r
       },
       t
     ),
-    disabled: e,
+    disabled: r,
     type: o,
     ...a
   }
-), z = H(null), _t = ({ className: t, to: e, ...r }) => {
-  const o = N(z);
+), z = H(null), _t = ({ className: t, to: r, ...e }) => {
+  const o = C(z);
   return /* @__PURE__ */ n(
     at,
     {
       role: "menuitem",
-      to: e,
+      to: r,
       className: ({ isActive: a }) => w(
         "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
         "tw:highlight:text-lm-brand tw:dark:highlight:text-dm-brand",
@@ -682,16 +687,16 @@ const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
         },
         t
       ),
-      ...r
+      ...e
     }
   );
-}, Ft = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(z.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(v, { role: "menubar", className: w("tw:flex tw:overflow-hidden", e), children: t }) }), le = Object.assign(Ft, { Pill: _t }), $t = new Intl.NumberFormat("en-US"), Dt = (t) => $t.format(Number(t)), X = 10, ie = (t) => Math.ceil(t / X) * X, T = 2, _ = "...", St = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), jt = (t, e) => {
-  const r = St(
+}, Dt = ({ children: t, className: r, fill: e }) => /* @__PURE__ */ n(z.Provider, { value: { fill: e }, children: /* @__PURE__ */ n(N, { role: "menubar", className: w("tw:flex tw:overflow-hidden", r), children: t }) }), le = Object.assign(Dt, { Pill: _t }), Ft = new Intl.NumberFormat("en-US"), $t = (t) => Ft.format(Number(t)), X = 10, ie = (t) => Math.ceil(t / X) * X, T = 2, _ = "...", St = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), jt = (t, r) => {
+  const e = St(
     Math.max(T, t - T),
-    Math.min(e - 1, t + T) + 1
+    Math.min(r - 1, t + T) + 1
   );
-  return t - T > T && r.unshift(_), t + T < e - 1 && r.push(_), r.unshift(1), r.push(e), r;
-}, B = (t) => t === _, At = (t) => B(t) ? t : Dt(t), Ht = (t, e) => B(t) ? `${t}_${e}` : `${t}`, tt = [
+  return t - T > T && e.unshift(_), t + T < r - 1 && e.push(_), e.unshift(1), e.push(r), e;
+}, B = (t) => t === _, At = (t) => B(t) ? t : $t(t), Ht = (t, r) => B(t) ? `${t}_${r}` : `${t}`, tt = [
   "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"
 ], et = (t = !1) => w(
@@ -705,22 +710,22 @@ const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   ],
   t && "tw:bg-lm-main tw:dark:bg-dm-main tw:text-white"
 ), A = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: w(tt, "tw:px-3 py-2 tw:text-gray-400"), children: t }), rt = () => /* @__PURE__ */ n(A, { children: _ });
-function Ot({ children: t, active: e, isEllipsis: r, href: o, ...a }) {
-  const l = O(() => et(e), [e]);
-  return r ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n(j, { className: l, to: o, ...a, children: t });
+function Ot({ children: t, active: r, isEllipsis: e, href: o, ...a }) {
+  const l = O(() => et(r), [r]);
+  return e ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n(j, { className: l, to: o, ...a, children: t });
 }
-function Ut({ children: t, active: e, isEllipsis: r, ...o }) {
-  const a = O(() => et(e), [e]);
-  return r ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
+function Ut({ children: t, active: r, isEllipsis: e, ...o }) {
+  const a = O(() => et(r), [r]);
+  return e ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
 }
-const se = ({ currentPage: t, pagesCount: e, ...r }) => {
-  const o = "urlForPage" in r, a = o ? Ot : Ut, l = C(
-    (d) => o ? { href: B(d) ? void 0 : r.urlForPage(d) } : { onClick: () => !B(d) && r.onPageChange(d) },
-    [o, r]
+const se = ({ currentPage: t, pagesCount: r, ...e }) => {
+  const o = "urlForPage" in e, a = o ? Ot : Ut, l = P(
+    (d) => o ? { href: B(d) ? void 0 : e.urlForPage(d) } : { onClick: () => !B(d) && e.onPageChange(d) },
+    [o, e]
   );
-  return e < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(k, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: J }) }),
-    jt(t, e).map((d, i) => /* @__PURE__ */ n(
+  return r < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    t === 1 ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) }),
+    jt(t, r).map((d, i) => /* @__PURE__ */ n(
       a,
       {
         active: d === t,
@@ -730,12 +735,12 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
       },
       Ht(d, i)
     )),
-    t === e ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(k, { size: "xs", icon: Q }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: Q }) })
+    t === r ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: Q }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(v, { size: "xs", icon: Q }) })
   ] });
 }, Wt = ({
   open: t,
-  children: e,
-  className: r,
+  children: r,
+  className: e,
   onClose: o,
   ...a
 }) => {
@@ -744,8 +749,8 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
     var c, m;
     const d = document.body, i = d.style.overflow, s = d.style.paddingRight;
     if (t) {
-      const u = window.outerWidth - d.clientWidth, p = d.scrollHeight > d.clientHeight;
-      d.style.overflow = "hidden", p && (d.style.paddingRight = `${u}px`), (c = l.current) == null || c.showModal();
+      const p = window.outerWidth - d.clientWidth, h = d.scrollHeight > d.clientHeight;
+      d.style.overflow = "hidden", h && (d.style.paddingRight = `${p}px`), (c = l.current) == null || c.showModal();
     } else
       (m = l.current) == null || m.close();
     return () => {
@@ -756,20 +761,20 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
       "dialog",
       {
         ref: l,
-        className: w("tw:bg-transparent tw:backdrop:bg-black/50", r),
+        className: w("tw:bg-transparent tw:backdrop:bg-black/50", e),
         onCancel: (d) => {
           d.preventDefault(), o();
         },
         ...a,
-        children: t && e
+        children: t && r
       }
     ),
     document.body
   );
 }, we = ({
   open: t,
-  onClose: e,
-  variant: r = "default",
+  onClose: r,
+  variant: e = "default",
   title: o,
   children: a,
   className: l,
@@ -780,46 +785,46 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
     confirmText: s = "Confirm",
     cancelText: c = "Cancel",
     confirmDisabled: m,
-    onConfirm: u,
-    onClosed: p,
-    ...f
-  } = "onConfirm" in d ? d : { ...d }, [b, h] = F(t), R = I(null), D = I("cancel"), ot = C(() => {
-    D.current = "confirm", u == null || u();
-  }, [u]);
+    onConfirm: p,
+    onClosed: h,
+    ...x
+  } = "onConfirm" in d ? d : { ...d }, [b, f] = D(t), R = I(null), $ = I("cancel"), ot = P((k) => {
+    k.preventDefault(), k.stopPropagation(), $.current = "confirm", p == null || p();
+  }, [p]);
   return M(() => {
     if (t) {
-      D.current = "cancel", h(!0);
+      $.current = "cancel", f(!0);
       return;
     }
-    const P = R.current;
-    if (P) {
+    const k = R.current;
+    if (k) {
       delete R.current.dataset.open;
       let q = !1;
       const G = (nt) => {
-        q || nt.target !== P || (q = !0, h(!1), p == null || p(D.current));
+        q || nt.target !== k || (q = !0, f(!1), h == null || h($.current));
       };
-      return P.addEventListener("transitionend", G), () => {
-        P.removeEventListener("transitionend", G);
+      return k.addEventListener("transitionend", G), () => {
+        k.removeEventListener("transitionend", G);
       };
     }
-  }, [p, t]), M(() => {
-    const P = R.current;
-    b && P && (P.dataset.open = "");
+  }, [h, t]), M(() => {
+    const k = R.current;
+    b && k && (k.dataset.open = "");
   }, [b]), /* @__PURE__ */ n(
     Wt,
     {
       open: b,
-      onClose: e,
+      onClose: r,
       className: w(
         {
           "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": b,
-          "tw:overflow-hidden": r === "cover"
+          "tw:overflow-hidden": e === "cover"
         },
         l
       ),
-      ...f,
+      ...x,
       children: /* @__PURE__ */ n(
-        "div",
+        "form",
         {
           "data-testid": "transition-container",
           ref: R,
@@ -829,18 +834,19 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
             "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
             "tw:transition-[opacity_,_translate] tw:duration-300",
             // Handle modal dimensions for different variants and sizes
-            r !== "cover" && {
+            e !== "cover" && {
               "tw:sm: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": r === "cover" }
+            { "tw:h-full": e === "cover" }
           ),
-          children: /* @__PURE__ */ n(v, { className: w(
+          onSubmit: ot,
+          children: /* @__PURE__ */ n(N, { className: w(
             "tw:w-full",
-            { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
-          ), children: r === "cover" ? /* @__PURE__ */ g(S, { children: [
+            { "tw:h-full tw:relative tw:overflow-auto": e === "cover" }
+          ), children: e === "cover" ? /* @__PURE__ */ g(S, { children: [
             /* @__PURE__ */ g(
               "div",
               {
@@ -852,22 +858,22 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(V, { onClick: e, label: "Close dialog" })
+                  /* @__PURE__ */ n(V, { onClick: r, label: "Close dialog" })
                 ]
               }
             ),
             /* @__PURE__ */ n("div", { children: a })
           ] }) : /* @__PURE__ */ g(S, { children: [
-            /* @__PURE__ */ g(v.Header, { className: w(
+            /* @__PURE__ */ g(N.Header, { className: w(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
-              /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
-              /* @__PURE__ */ n(V, { onClick: e, label: "Close dialog" })
+              /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": e === "danger" }), children: o }),
+              /* @__PURE__ */ n(V, { onClick: r, label: "Close dialog" })
             ] }),
-            /* @__PURE__ */ n(v.Body, { children: a }),
-            u && /* @__PURE__ */ g(
-              v.Footer,
+            /* @__PURE__ */ n(N.Body, { children: a }),
+            p && /* @__PURE__ */ g(
+              N.Footer,
               {
                 "data-testid": "footer",
                 className: w(
@@ -875,14 +881,14 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ n(Rt, { onClick: e, children: c }),
+                  /* @__PURE__ */ n(Rt, { onClick: r, children: c }),
                   /* @__PURE__ */ n(
                     Lt,
                     {
                       solid: !0,
-                      variant: r === "danger" ? "danger" : "primary",
+                      variant: e === "danger" ? "danger" : "primary",
                       disabled: m,
-                      onClick: ot,
+                      type: "submit",
                       children: s
                     }
                   )
@@ -894,35 +900,35 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
       )
     }
   );
-}, ce = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(yt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: x("tw:text-center", {
+}, ce = ({ className: t, children: r, loading: e = !1, variant: o = "default" }) => /* @__PURE__ */ n(yt, { className: y({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: y("tw:text-center", {
   "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
   "tw:text-danger": o === "error"
 }), children: [
-  r && /* @__PURE__ */ g(S, { children: [
-    /* @__PURE__ */ n(k, { icon: Y, spin: !0 }),
-    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
+  e && /* @__PURE__ */ g(S, { children: [
+    /* @__PURE__ */ n(v, { icon: Y, spin: !0 }),
+    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: r ?? "Loading..." })
   ] }),
-  !r && e
-] }) }), me = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
+  !e && r
+] }) }), me = ({ variant: t, className: r, size: e = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: x(
+    className: y(
       "tw:rounded-md tw:text-center",
       {
-        "tw:p-2": r === "sm",
-        "tw:p-4": r === "md",
-        "tw:p-6": r === "lg",
+        "tw:p-2": e === "sm",
+        "tw:p-4": e === "md",
+        "tw:p-6": e === "lg",
         "tw:[&]:text-white": t !== "warning",
         "tw:bg-lm-brand tw:dark:bg-dm-brand": t === "success",
         "tw:bg-danger": t === "error",
         "tw:bg-warning tw:text-black": t === "warning"
       },
-      e
+      r
     ),
     children: o
   }
-), ge = ({ text: t, className: e, size: r = "lg", initialCopied: o = !1, navigator_: a = globalThis.navigator, ...l }) => {
-  const [d, i] = gt(o), s = C(
+), ge = ({ text: t, className: r, size: e = "lg", initialCopied: o = !1, navigator_: a = globalThis.navigator, ...l }) => {
+  const [d, i] = gt(o), s = P(
     () => a.clipboard.writeText(t).then(i),
     [a.clipboard, t, i]
   );
@@ -930,26 +936,26 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
     "button",
     {
       type: "button",
-      className: x(
+      className: y(
         "tw:focus-ring tw:rounded-sm",
         {
-          "tw:text-md": r === "sm",
-          "tw:text-lg": r === "md",
-          "tw:text-xl": r === "lg"
+          "tw:text-md": e === "sm",
+          "tw:text-lg": e === "md",
+          "tw:text-xl": e === "lg"
         },
-        e
+        r
       ),
       "aria-label": `Copy ${t} to clipboard`,
       title: "Copy to clipboard",
       onClick: s,
       ...l,
-      children: /* @__PURE__ */ n(k, { icon: d ? wt : ut, fixedWidth: !0 })
+      children: /* @__PURE__ */ n(v, { icon: d ? wt : ut, fixedWidth: !0 })
     }
   );
 };
 export {
   Lt as Button,
-  v as Card,
+  N as Card,
   we as CardModal,
   ee as Checkbox,
   V as CloseButton,
@@ -975,7 +981,7 @@ export {
   yt as SimpleCard,
   te as Table,
   de as ToggleSwitch,
-  Dt as formatNumber,
+  $t as formatNumber,
   Ht as keyForPage,
   B as pageIsEllipsis,
   At as prettifyPageNumber,

package/dist/tailwind.preset.css

@@ -197,3 +197,45 @@
         @slot;
     }
 }
+
+/* For sticky-positioned cells with a background */
+@utility sticky-cell-base {
+    @apply tw:z-1 tw:relative tw:sticky;
+    @apply tw:before:absolute tw:before:bg-lm-table-border tw:dark:before:bg-dm-table-border tw:before:-z-2;
+    @apply tw:after:absolute tw:after:bg-lm-primary tw:dark:after:bg-dm-primary tw:after:-z-1;
+
+    &:before, &:after {
+        content: '';
+    }
+    &:first-child:after {
+        left: 0;
+    }
+}
+
+@utility sticky-cell {
+    @apply tw:sticky-cell-base;
+
+    &:before {
+        inset: -1px 0 -1px 0;
+    }
+    &:first-child:before {
+        left: 0;
+    }
+    &:after {
+        inset: 0 0 0 0;
+    }
+}
+
+@utility sticky-cell-separated {
+    @apply tw:sticky-cell-base;
+
+    &:before {
+        inset: -1px -1px -1px 0;
+    }
+    &:first-child:before {
+        left: -1px;
+    }
+    &:after {
+        inset: 0 0 0 1px;
+    }
+}

package/package.json

@@ -57,20 +57,20 @@
   },
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/vite": "^4.1.5",
+    "@stylistic/eslint-plugin": "^4.4.0",
+    "@tailwindcss/vite": "^4.1.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.3",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.2",
-    "@vitest/coverage-v8": "^3.1.2",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.5.0",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
@@ -79,11 +79,11 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
     "playwright": "^1.52.0",
-    "sass": "^1.87.0",
+    "sass": "^1.89.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.1",
-    "vite": "^6.3.4",
-    "vite-plugin-dts": "^4.5.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.0.2"
   },
   "browserslist": [
@@ -92,5 +92,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.9.3"
+  "version": "0.9.5"
 }