@shlinkio/shlink-frontend-kit 0.8.12 → 0.8.13

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export declare type InputFormGroupProps = PropsWithChildren<{
 
 export declare const isDarkThemeEnabled: () => boolean;
 
+/** @deprecated */
 export declare const LabeledFormGroup: FC<LabeledFormGroupProps>;
 
 declare type LabeledFormGroupProps = PropsWithChildren<{

package/dist/tailwind.d.ts

@@ -100,6 +100,14 @@ export declare type ExitAction = 'confirm' | 'cancel';
 
 export declare const formatNumber: (number: number | string) => string;
 
+declare type FormControlWithFeedbackProps = PropsWithChildren<{
+    /** An error message to display under the input. Will cause the input to be set with `error` feedback. */
+    error?: ReactNode;
+    /** Informative help to be display under the input */
+    helpText?: ReactNode;
+    'data-testid'?: string;
+}>;
+
 export declare const Input: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "checked" | "size"> & BaseInputProps & {
 borderless?: boolean;
 } & RefAttributes<HTMLInputElement>>;
@@ -113,40 +121,48 @@ export declare const keyForPage: (pageNumber: NumberOrEllipsis, index: number) =
 export declare const Label: FC<LabelProps>;
 
 export declare const LabelledInput: ForwardRefExoticComponent<Omit<InputProps, "className" | "id" | "feedback"> & {
+error?: ReactNode;
+helpText?: ReactNode;
+'data-testid'?: string;
+} & {
+children?: ReactNode | undefined;
+} & {
 label: RequiredReactNode;
 inputClassName?: string;
-error?: string;
 /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
 hiddenRequired?: boolean;
 } & RefAttributes<HTMLInputElement>>;
 
-export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | 'feedback'> & {
+export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | 'feedback'> & FormControlWithFeedbackProps & {
     label: RequiredReactNode;
     inputClassName?: string;
-    error?: string;
     /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
     hiddenRequired?: boolean;
 };
 
 export declare const LabelledRevealablePasswordInput: ForwardRefExoticComponent<Omit<RevealablePasswordInputProps, "className" | "id" | "feedback"> & {
+error?: ReactNode;
+helpText?: ReactNode;
+'data-testid'?: string;
+} & {
+children?: ReactNode | undefined;
+} & {
 label: RequiredReactNode;
 inputClassName?: string;
-error?: string;
 /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
 hiddenRequired?: boolean;
 } & RefAttributes<HTMLInputElement>>;
 
-export declare type LabelledRevealablePasswordInputProps = Omit<RevealablePasswordInputProps, 'className' | 'id' | 'feedback'> & {
+export declare type LabelledRevealablePasswordInputProps = Omit<RevealablePasswordInputProps, 'className' | 'id' | 'feedback'> & FormControlWithFeedbackProps & {
     label: RequiredReactNode;
     inputClassName?: string;
-    error?: string;
     /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
     hiddenRequired?: boolean;
 };
 
 export declare const LabelledSelect: ForwardRefExoticComponent<Omit<LabelledSelectProps, "ref"> & RefAttributes<HTMLSelectElement>>;
 
-export declare type LabelledSelectProps = Omit<SelectProps, 'className' | 'id'> & {
+export declare type LabelledSelectProps = Omit<SelectProps, 'className' | 'id'> & FormControlWithFeedbackProps & {
     label: RequiredReactNode;
     selectClassName?: string;
     /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */

package/dist/tailwind.js

@@ -1,34 +1,34 @@
-import { jsxs as g, jsx as n, Fragment as S } from "react/jsx-runtime";
-import i, { clsx as x } from "clsx";
-import { useRef as L, useState as D, useEffect as M, useCallback as I, createContext as $, useContext as N, forwardRef as y, useId as A, useMemo as O } from "react";
-import { Link as j, NavLink as nt } from "react-router";
-import { faClose as at, faEyeSlash as lt, faEye as dt, faCircleNotch as V, faSearch as st, faChevronLeft as z, faChevronRight as G } from "@fortawesome/free-solid-svg-icons";
+import { jsxs as g, jsx as n, Fragment as A } from "react/jsx-runtime";
+import w, { clsx as x } from "clsx";
+import { useRef as L, useState as F, useEffect as M, useCallback as C, createContext as H, useContext as N, forwardRef as y, useId as D, useMemo as O } from "react";
+import { Link as S, NavLink as at } from "react-router";
+import { faClose as dt, faEyeSlash as lt, faEye as st, faCircleNotch as X, faSearch as it, faChevronLeft as G, faChevronRight as J } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
-import { a as it, u as wt } from "./use-toggle-PWLikLl6.js";
-import { createPortal as ct } from "react-dom";
-const Jt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
-  const a = L(null), [d, l] = D(!1);
+import { a as wt, u as ct } from "./use-toggle-PWLikLl6.js";
+import { createPortal as mt } from "react-dom";
+const Qt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
+  const a = L(null), [l, d] = F(!1);
   return M(() => {
-    const s = a.current, w = () => l(!!(s != null && s.open));
-    return s == null || s.addEventListener("toggle", w), () => s == null ? void 0 : s.removeEventListener("toggle", w);
+    const s = a.current, i = () => d(!!(s != null && s.open));
+    return s == null || s.addEventListener("toggle", i), () => s == null ? void 0 : s.removeEventListener("toggle", i);
   }, []), /* @__PURE__ */ g("details", { ref: a, ...o, children: [
     /* @__PURE__ */ n("summary", { className: x("tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm", r), children: e }),
-    d && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: t })
+    l && /* @__PURE__ */ n("div", { className: "tw:mt-3 tw:flex tw:flex-col tw:gap-y-3", children: t })
   ] });
-}, mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+}, gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: i(
+    className: w(
       "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
     ),
     ...e
   }
-), gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: i(
+    className: w(
       "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
@@ -38,30 +38,30 @@ const Jt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
 ), ut = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: i(
+    className: w(
       "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
     ),
     ...e
   }
-), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+), pt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: i(
+    className: w(
       "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
     ),
     ...e
   }
-), v = Object.assign(bt, { Body: gt, Header: mt, Footer: ut }), pt = ({ bodyClassName: t, children: e, ...r }) => {
-  const { title: o, titleSize: a = "md", ...d } = "title" in r ? r : {
+), v = Object.assign(pt, { Body: bt, Header: gt, Footer: ut }), ht = ({ bodyClassName: t, children: e, ...r }) => {
+  const { title: o, titleSize: a = "md", ...l } = "title" in r ? r : {
     ...r,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ g(v, { ...d, children: [
+  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 }),
@@ -70,58 +70,58 @@ const Jt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
     /* @__PURE__ */ n(v.Body, { className: t, children: e })
   ] });
 };
-function ht({
+function ft({
   id: t,
   items: e,
   onSelectItem: r,
   onActiveItemChange: o,
   renderItem: a,
-  className: d,
-  noItemsMessage: l = "No items",
+  className: l,
+  noItemsMessage: d = "No items",
   anchor: s,
-  "aria-label": w = "Items",
-  ...u
+  "aria-label": i = "Items",
+  ...c
 }) {
-  const [c, b] = D(0), p = I((f) => {
-    if (b(f), o) {
-      const [m, h] = [...e.entries()][f];
-      o(m, h);
+  const [m, u] = F(0), p = C((f) => {
+    if (u(f), o) {
+      const [b, h] = [...e.entries()][f];
+      o(b, h);
     }
   }, [e, o]);
   return M(() => {
     const f = s == null ? void 0 : s.current;
     if (!f)
       return;
-    const m = (h) => {
-      ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? p(Math.min(c + 1, e.size - 1)) : h.key === "ArrowUp" ? p(Math.max(c - 1, 0)) : h.key === "Enter" && r([...e.values()][c]);
+    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]);
     };
-    return f.addEventListener("keydown", m), () => f.removeEventListener("keydown", m);
-  }, [c, s, p, e, r]), /* @__PURE__ */ g(
+    return f.addEventListener("keydown", b), () => f.removeEventListener("keydown", b);
+  }, [m, s, p, e, r]), /* @__PURE__ */ g(
     v,
     {
       id: t,
-      className: i("tw:py-1 tw:flex tw:flex-col", d),
+      className: w("tw:py-1 tw:flex tw:flex-col", l),
       role: "listbox",
       "aria-orientation": "vertical",
-      "aria-label": w,
-      ...u,
+      "aria-label": i,
+      ...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: l }),
-        [...e.entries()].map(([f, m], h) => /* @__PURE__ */ n(
+        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(
           "button",
           {
             id: `${t}_${f}`,
             type: "button",
             role: "option",
-            "aria-selected": h === c,
-            className: i(
+            "aria-selected": h === m,
+            className: w(
               "tw:px-2 tw:py-1 tw:text-left tw:truncate",
-              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === c }
+              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === m }
             ),
             tabIndex: -1,
-            onClick: () => r(m),
+            onClick: () => r(b),
             onMouseOver: () => p(h),
-            children: a(m)
+            children: a(b)
           },
           f
         ))
@@ -129,52 +129,52 @@ function ht({
     }
   );
 }
-const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className: e }) => {
+const E = H(void 0), T = H({ responsive: !0 }), xt = ({ children: t, className: e }) => {
   const { responsive: r } = N(T);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
-      className: i(
+      className: w(
         { "tw:hidden tw:lg:table-header-group": r },
         e
       ),
       children: t
     }
   ) });
-}, xt = ({ children: t, className: e }) => {
+}, yt = ({ children: t, className: e }) => {
   const { responsive: r } = N(T);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
-      className: i(
+      className: w(
         { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": r },
         e
       ),
       children: t
     }
   ) });
-}, yt = ({ children: t, className: e }) => {
+}, vt = ({ children: t, className: e }) => {
   const { responsive: r } = N(T);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
-      className: i(
+      className: w(
         { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": r },
         e
       ),
       children: t
     }
   ) });
-}, vt = ({ children: t, className: e, ...r }) => {
-  const o = N(E), a = (o == null ? void 0 : o.section) === "body", { responsive: d } = N(T);
+}, kt = ({ children: t, className: e, ...r }) => {
+  const o = N(E), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = N(T);
   return /* @__PURE__ */ n(
     "tr",
     {
-      className: i(
+      className: w(
         "tw:group",
         {
-          "tw:lg:table-row tw:flex tw:flex-col": d,
-          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": d,
+          "tw:lg:table-row tw:flex tw:flex-col": l,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
           "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": a,
           // 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
@@ -185,19 +185,19 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
       children: t
     }
   );
-}, kt = ({ children: t, className: e, columnName: r, type: o, ...a }) => {
-  const d = N(E), l = o ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s } = N(T);
+}, Nt = ({ 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: s } = N(T);
   return /* @__PURE__ */ n(
-    l,
+    d,
     {
       "data-column": s ? r : void 0,
-      className: i(
+      className: w(
         "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,
           // 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 && l === "td"
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && d === "td"
         },
         e
       ),
@@ -205,31 +205,31 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
       children: t
     }
   );
-}, Nt = ({ header: t, footer: e, children: r, responsive: o = !0, ...a }) => /* @__PURE__ */ n(T.Provider, { value: { responsive: o }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...a, children: [
-  /* @__PURE__ */ n(ft, { children: t }),
-  /* @__PURE__ */ n(xt, { children: r }),
-  e && /* @__PURE__ */ n(yt, { children: e })
-] }) }), Qt = Object.assign(Nt, { Row: vt, Cell: kt }), Pt = ({
+}, Pt = ({ header: t, footer: e, children: r, responsive: o = !0, ...a }) => /* @__PURE__ */ n(T.Provider, { value: { responsive: o }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...a, children: [
+  /* @__PURE__ */ n(xt, { children: t }),
+  /* @__PURE__ */ n(yt, { children: r }),
+  e && /* @__PURE__ */ n(vt, { children: e })
+] }) }), Vt = Object.assign(Pt, { Row: kt, Cell: Nt }), Ct = ({
   children: t,
   className: e,
   disabled: r,
   variant: o = "primary",
   size: a = "md",
-  inline: d = !1,
-  solid: l = !1,
+  inline: l = !1,
+  solid: d = !1,
   type: s = "button",
-  ...w
+  ...i
 }) => {
-  const u = "to" in w ? j : "button", c = u === j ? void 0 : s;
+  const c = "to" in i ? S : "button", m = c === S ? void 0 : s;
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
-      u,
+      c,
       {
-        className: i(
+        className: w(
           {
-            "tw:inline-flex": d,
-            "tw:flex": !d
+            "tw:inline-flex": l,
+            "tw:flex": !l
           },
           "tw:gap-2 tw:items-center tw:justify-center",
           "tw:border tw:rounded-md tw:no-underline",
@@ -247,11 +247,11 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
           {
             "tw:border-brand tw:text-brand": o === "primary",
             "tw:border-zinc-500": o === "secondary",
-            "tw:text-zinc-500": o === "secondary" && !l,
+            "tw:text-zinc-500": o === "secondary" && !d,
             "tw:border-danger": o === "danger",
-            "tw:text-danger": o === "danger" && !l
+            "tw:text-danger": o === "danger" && !d
           },
-          l && {
+          d && {
             "tw:text-white": !0,
             "tw:bg-brand": o === "primary",
             "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
@@ -261,7 +261,7 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
             "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
           },
           !r && {
-            "tw:highlight:text-white": !l,
+            "tw:highlight:text-white": !d,
             "tw:highlight:bg-brand": o === "primary",
             "tw:highlight:bg-zinc-500": o === "secondary",
             "tw:highlight:bg-danger": o === "danger"
@@ -272,14 +272,14 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
           e
         ),
         disabled: r,
-        type: c,
-        ...w,
+        type: m,
+        ...i,
         children: t
       }
     )
   );
-}, X = y(({ className: t, onChange: e, ...r }, o) => {
-  const a = I((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
+}, Y = y(({ className: t, onChange: e, ...r }, o) => {
+  const a = C((l) => e == null ? void 0 : e(l.target.checked, l), [e]);
   return /* @__PURE__ */ n(
     "input",
     {
@@ -297,24 +297,24 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
       ...r
     }
   );
-}), Vt = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
-  X,
+}), Xt = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+  Y,
   {
     ref: r,
     className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
     ...e
   }
-)), J = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
+)), Q = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
     onClick: t,
-    className: i(
+    className: w(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
       "tw:rounded-md tw:focus-ring"
     ),
     "aria-label": e,
-    children: /* @__PURE__ */ n(k, { icon: at, size: "xl" })
+    children: /* @__PURE__ */ n(k, { icon: dt, size: "xl" })
   }
 ), U = y(({
   borderless: t = !1,
@@ -322,15 +322,15 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
   feedback: r,
   className: o,
   disabled: a,
-  readOnly: d,
-  ...l
+  readOnly: l,
+  ...d
 }, s) => {
-  const w = !a && !d;
+  const i = !a && !l;
   return /* @__PURE__ */ n(
     "input",
     {
       ref: s,
-      className: i(
+      className: w(
         "tw:w-full",
         {
           "tw:focus-ring": !r,
@@ -345,55 +345,65 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
           "tw:rounded-md tw:border": !t,
           "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !r,
           "tw:border-danger": !t && r === "error",
-          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !w,
-          "tw:bg-lm-primary tw:dark:bg-dm-primary": w,
+          "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": w
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": i
         },
         o
       ),
       disabled: a,
-      readOnly: d,
-      ...l
+      readOnly: l,
+      ...d
     }
   );
 }), K = ({ required: t, children: e, className: r, ...o }) => /* @__PURE__ */ g("label", { className: x("tw:cursor-pointer", r), ...o, children: [
   e,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), Xt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
-  const s = A();
-  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(K, { htmlFor: s, required: r, children: t }),
+] }), W = ({ 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: [
+  t,
+  e && /* @__PURE__ */ n(
+    "small",
+    {
+      "data-testid": o ? `${o}-help-text` : "help-text",
+      className: "tw:text-gray-500 tw:dark:text-gray-400",
+      children: e
+    }
+  ),
+  r && /* @__PURE__ */ n("span", { "data-testid": o ? `${o}-error` : "error", className: "tw:text-danger", children: r })
+] }), Yt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...s }, i) => {
+  const c = D();
+  return /* @__PURE__ */ g(W, { error: a, helpText: l, "data-testid": d, children: [
+    /* @__PURE__ */ n(K, { htmlFor: c, required: r, children: t }),
     /* @__PURE__ */ n(
       U,
       {
-        ref: l,
-        id: s,
+        ref: i,
+        id: c,
         className: e,
         required: r || o,
         feedback: a ? "error" : void 0,
-        ...d
+        ...s
       }
-    ),
-    a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
+    )
   ] });
 }), It = y(({ containerClassName: t, className: e, size: r, ...o }, a) => {
-  const [d, l, , s] = it(!1), w = L(null), u = I(({ relatedTarget: c }) => {
-    var b;
-    (b = w.current) != null && b.contains(c) || s();
-  }, [w, s]);
+  const [l, d, , s] = wt(!1), i = L(null), c = C(({ relatedTarget: m }) => {
+    var u;
+    (u = i.current) != null && u.contains(m) || s();
+  }, [i, s]);
   return /* @__PURE__ */ g(
     "div",
     {
       className: x("tw:group tw:relative", t),
-      ref: w,
-      onBlurCapture: u,
+      ref: i,
+      onBlurCapture: c,
       children: [
         /* @__PURE__ */ n(
           U,
           {
             ref: a,
-            type: d ? "text" : "password",
+            type: l ? "text" : "password",
             className: x(
               {
                 "tw:pr-10": r !== "sm",
@@ -410,9 +420,9 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
           "button",
           {
             type: "button",
-            onClick: l,
-            title: d ? "Hide password" : "Show password",
-            "aria-label": d ? "Hide password" : "Show password",
+            onClick: d,
+            title: l ? "Hide password" : "Show password",
+            "aria-label": l ? "Hide password" : "Show password",
             className: x(
               "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",
@@ -422,41 +432,40 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
               }
             ),
             tabIndex: -1,
-            children: /* @__PURE__ */ n(k, { fixedWidth: !0, icon: d ? lt : dt })
+            children: /* @__PURE__ */ n(k, { fixedWidth: !0, icon: l ? lt : st })
           }
         )
       ]
     }
   );
-}), Yt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
-  const s = A();
-  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(K, { htmlFor: s, required: r, children: t }),
+}), Zt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...s }, i) => {
+  const c = D();
+  return /* @__PURE__ */ g(W, { error: a, helpText: l, "data-testid": d, children: [
+    /* @__PURE__ */ n(K, { htmlFor: c, required: r, children: t }),
     /* @__PURE__ */ n(
       It,
       {
-        ref: l,
-        id: s,
+        ref: i,
+        id: c,
         className: e,
         required: r || o,
         feedback: a ? "error" : void 0,
-        ...d
+        ...s
       }
-    ),
-    a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
+    )
   ] });
-}), Ct = y(({
+}), Lt = y(({
   className: t,
   size: e = "md",
   feedback: r,
   style: o = {},
   disabled: a,
-  ...d
-}, l) => /* @__PURE__ */ n(
+  ...l
+}, d) => /* @__PURE__ */ n(
   "select",
   {
-    ref: l,
-    className: i(
+    ref: d,
+    className: w(
       "tw:w-full tw:appearance-none tw:pr-9",
       "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
       {
@@ -483,33 +492,43 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
       background: "right 0.75rem center / 16px 12px"
     },
     disabled: a,
-    ...d
+    ...l
   }
-)), Zt = y(({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...a }, d) => {
-  const l = A();
-  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(K, { htmlFor: l, required: r, children: e }),
-    /* @__PURE__ */ n(Ct, { ref: d, id: l, className: t, required: r || o, ...a })
+)), te = y(({ selectClassName: t, label: e, error: r, helpText: o, required: a, hiddenRequired: l, "data-testid": d, ...s }, i) => {
+  const c = D();
+  return /* @__PURE__ */ g(W, { error: r, helpText: o, "data-testid": d, children: [
+    /* @__PURE__ */ n(K, { htmlFor: c, required: a, children: e }),
+    /* @__PURE__ */ n(
+      Lt,
+      {
+        ref: i,
+        id: c,
+        className: t,
+        required: a || l,
+        feedback: r ? "error" : void 0,
+        ...s
+      }
+    )
   ] });
-}), Lt = y(({
+}), Tt = y(({
   onChange: t,
   containerClassName: e,
   inputClassName: r,
   // 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,
-  ...d
-}, l) => {
-  const { setTimeout: s, clearCurrentTimeout: w } = wt(500), u = I((c) => {
-    c ? s(() => t(c)) : (w(), t(c));
-  }, [w, t, s]);
-  return /* @__PURE__ */ g("div", { className: i("tw:group tw:relative tw:focus-within:z-10", e), children: [
+  ...l
+}, d) => {
+  const { setTimeout: s, clearCurrentTimeout: i } = ct(500), c = C((m) => {
+    m ? s(() => t(m)) : (i(), t(m));
+  }, [i, t, s]);
+  return /* @__PURE__ */ g("div", { className: w("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
       k,
       {
-        icon: a ? V : st,
+        icon: a ? X : it,
         spin: a,
-        className: i(
+        className: w(
           "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",
           {
@@ -522,9 +541,9 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
     /* @__PURE__ */ n(
       U,
       {
-        ref: l,
+        ref: d,
         type: "search",
-        className: i(
+        className: w(
           {
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
@@ -532,71 +551,71 @@ const E = $(void 0), T = $({ responsive: !0 }), ft = ({ children: t, className:
           r
         ),
         placeholder: "Search...",
-        onChange: (c) => u(c.target.value),
+        onChange: (m) => c(m.target.value),
         size: o,
-        ...d
+        ...l
       }
     )
   ] });
 });
-function te({
+function ee({
   searchResults: t,
   onSearch: e,
   onSelectSearchResult: r,
   renderSearchResult: o,
   size: a = "md",
   // SearchInput defaults its size to 'lg'. Change it to 'md'
-  listboxSpan: d = "full",
-  onFocus: l,
+  listboxSpan: l = "full",
+  onFocus: d,
   ...s
 }) {
-  const w = L(null), u = A(), [c, b] = D(), p = O(
-    () => t ? c ?? [...t.keys()][0] : void 0,
-    [c, t]
-  ), f = I((m) => {
-    r(m), e(""), w.current.value = "";
+  const i = L(null), c = D(), [m, u] = F(), p = O(
+    () => t ? m ?? [...t.keys()][0] : void 0,
+    [m, t]
+  ), f = C((b) => {
+    r(b), e(""), i.current.value = "";
   }, [e, r]);
   return /* @__PURE__ */ g(
     "div",
     {
       className: "tw:relative",
-      onBlur: (m) => {
-        m.currentTarget.contains(m.relatedTarget) || e("");
+      onBlur: (b) => {
+        b.currentTarget.contains(b.relatedTarget) || e("");
       },
       children: [
         /* @__PURE__ */ n(
-          Lt,
+          Tt,
           {
             onChange: e,
             size: a,
-            ref: w,
+            ref: i,
             role: "combobox",
             "aria-autocomplete": "list",
             "aria-expanded": !!t,
-            "aria-controls": u,
-            "aria-activedescendant": p ? `${u}_${p}` : void 0,
+            "aria-controls": c,
+            "aria-activedescendant": p ? `${c}_${p}` : void 0,
             autoComplete: "off",
             autoCorrect: "off",
-            onFocus: (m) => {
-              l == null || l(m), e(m.target.value);
+            onFocus: (b) => {
+              d == null || d(b), e(b.target.value);
             },
             ...s
           }
         ),
         t && /* @__PURE__ */ n(
-          ht,
+          ft,
           {
-            id: u,
+            id: c,
             items: t,
-            anchor: w,
+            anchor: i,
             onSelectItem: f,
-            onActiveItemChange: b,
+            onActiveItemChange: u,
             renderItem: o,
-            className: i(
+            className: w(
               "tw:absolute tw:top-full tw:mt-1 tw:z-10",
               {
-                "tw:min-w-60 tw:max-w-full": d === "auto",
-                "tw:w-full": d === "full"
+                "tw:min-w-60 tw:max-w-full": l === "auto",
+                "tw:w-full": l === "full"
               }
             ),
             "aria-label": "Matching items",
@@ -607,8 +626,8 @@ function te({
     }
   );
 }
-const ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
-  X,
+const re = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+  Y,
   {
     ref: r,
     className: x(
@@ -620,10 +639,10 @@ const ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
     ),
     ...e
   }
-)), Tt = ({ className: t, disabled: e, size: r = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
+)), Bt = ({ className: t, disabled: e, size: r = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
   "button",
   {
-    className: i(
+    className: w(
       "tw:inline-flex tw:rounded-md tw:focus-ring",
       "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
       {
@@ -638,14 +657,14 @@ const ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
     type: o,
     ...a
   }
-), Y = $(null), Bt = ({ className: t, to: e, ...r }) => {
-  const o = N(Y);
+), Z = H(null), Mt = ({ className: t, to: e, ...r }) => {
+  const o = N(Z);
   return /* @__PURE__ */ n(
-    nt,
+    at,
     {
       role: "menuitem",
       to: e,
-      className: ({ isActive: a }) => i(
+      className: ({ isActive: a }) => w(
         "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
         "tw:font-bold tw:no-underline tw:text-center tw:highlight:text-brand tw:transition-colors",
         "tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2 tw:focus-visible:inset-ring-brand/50",
@@ -659,50 +678,50 @@ const ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
       ...r
     }
   );
-}, Mt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(v, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), re = Object.assign(Mt, { Pill: Bt }), Et = new Intl.NumberFormat("en-US"), _t = (t) => Et.format(Number(t)), Q = 10, oe = (t) => Math.ceil(t / Q) * Q, C = 2, R = "...", Rt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), Dt = (t, e) => {
-  const r = Rt(
-    Math.max(C, t - C),
-    Math.min(e - 1, t + C) + 1
+}, Et = ({ 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 }) }), oe = Object.assign(Et, { Pill: Mt }), _t = new Intl.NumberFormat("en-US"), Rt = (t) => _t.format(Number(t)), V = 10, ne = (t) => Math.ceil(t / V) * V, I = 2, R = "...", Ft = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), Dt = (t, e) => {
+  const r = Ft(
+    Math.max(I, t - I),
+    Math.min(e - 1, t + I) + 1
   );
-  return t - C > C && r.unshift(R), t + C < e - 1 && r.push(R), r.unshift(1), r.push(e), r;
-}, B = (t) => t === R, At = (t) => B(t) ? t : _t(t), Ft = (t, e) => B(t) ? `${t}_${e}` : `${t}`, Z = [
+  return t - I > I && r.unshift(R), t + I < e - 1 && r.push(R), r.unshift(1), r.push(e), r;
+}, B = (t) => t === R, $t = (t) => B(t) ? t : Rt(t), At = (t, e) => B(t) ? `${t}_${e}` : `${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"
-], tt = (t = !1) => i(
-  Z,
+], et = (t = !1) => w(
+  tt,
   "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
   "tw:focus-ring tw:focus-visible:z-1",
   {
     "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
     "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
   }
-), H = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: i(Z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), et = () => /* @__PURE__ */ n(H, { children: R });
+), j = ({ 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(j, { children: R });
 function St({ children: t, active: e, isEllipsis: r, href: o, ...a }) {
-  const d = O(() => tt(e), [e]);
-  return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n(j, { className: d, to: o, ...a, children: t });
+  const l = O(() => et(e), [e]);
+  return r ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n(S, { className: l, to: o, ...a, children: t });
 }
 function jt({ children: t, active: e, isEllipsis: r, ...o }) {
-  const a = O(() => tt(e), [e]);
-  return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
+  const a = O(() => et(e), [e]);
+  return r ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
 }
-const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
-  const o = "urlForPage" in r, a = o ? St : jt, d = I(
-    (l) => o ? { href: B(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !B(l) && r.onPageChange(l) },
+const ae = ({ currentPage: t, pagesCount: e, ...r }) => {
+  const o = "urlForPage" in r, a = o ? St : jt, l = C(
+    (d) => o ? { href: B(d) ? void 0 : r.urlForPage(d) } : { onClick: () => !B(d) && r.onPageChange(d) },
     [o, r]
   );
   return e < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }) : /* @__PURE__ */ n(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }),
-    Dt(t, e).map((l, s) => /* @__PURE__ */ n(
+    t === 1 ? /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) }),
+    Dt(t, e).map((d, s) => /* @__PURE__ */ n(
       a,
       {
-        active: l === t,
-        isEllipsis: B(l),
-        ...d(l),
-        children: At(l)
+        active: d === t,
+        isEllipsis: B(d),
+        ...l(d),
+        children: $t(d)
       },
-      Ft(l, s)
+      At(d, s)
     )),
-    t === e ? /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...d(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) })
+    t === e ? /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: J }) })
   ] });
 }, Ht = ({
   open: t,
@@ -711,26 +730,26 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
   onClose: o,
   ...a
 }) => {
-  const d = L(null);
+  const l = L(null);
   return M(() => {
-    var u, c;
-    const l = document.body, s = l.style.overflow, w = l.style.paddingRight;
+    var c, m;
+    const d = document.body, s = d.style.overflow, i = d.style.paddingRight;
     if (t) {
-      const b = window.outerWidth - l.clientWidth, p = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", p && (l.style.paddingRight = `${b}px`), (u = d.current) == null || u.showModal();
+      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();
     } else
-      (c = d.current) == null || c.close();
+      (m = l.current) == null || m.close();
     return () => {
-      l.style.overflow = s, l.style.paddingRight = w;
+      d.style.overflow = s, d.style.paddingRight = i;
     };
-  }, [t]), ct(
+  }, [t]), mt(
     /* @__PURE__ */ n(
       "dialog",
       {
-        ref: d,
-        className: i("tw:bg-transparent tw:backdrop:bg-black/50", r),
-        onCancel: (l) => {
-          l.preventDefault(), o();
+        ref: l,
+        className: w("tw:bg-transparent tw:backdrop:bg-black/50", r),
+        onCancel: (d) => {
+          d.preventDefault(), o();
         },
         ...a,
         children: t && e
@@ -738,56 +757,56 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
     ),
     document.body
   );
-}, ae = ({
+}, de = ({
   open: t,
   onClose: e,
   variant: r = "default",
   title: o,
   children: a,
-  className: d,
-  ...l
+  className: l,
+  ...d
 }) => {
   const {
     size: s = "md",
-    confirmText: w = "Confirm",
-    cancelText: u = "Cancel",
-    confirmDisabled: c,
-    onConfirm: b,
+    confirmText: i = "Confirm",
+    cancelText: c = "Cancel",
+    confirmDisabled: m,
+    onConfirm: u,
     onClosed: p,
     ...f
-  } = "onConfirm" in l ? l : { ...l }, [m, h] = D(t), _ = L(null), F = L("cancel"), rt = I(() => {
-    F.current = "confirm", b == null || b();
-  }, [b]);
+  } = "onConfirm" in d ? d : { ...d }, [b, h] = F(t), _ = L(null), $ = L("cancel"), ot = C(() => {
+    $.current = "confirm", u == null || u();
+  }, [u]);
   return M(() => {
     if (t) {
-      F.current = "cancel", h(!0);
+      $.current = "cancel", h(!0);
       return;
     }
     const P = _.current;
     if (P) {
       delete _.current.dataset.open;
-      let W = !1;
-      const q = (ot) => {
-        W || ot.target !== P || (W = !0, h(!1), p == null || p(F.current));
+      let q = !1;
+      const z = (nt) => {
+        q || nt.target !== P || (q = !0, h(!1), p == null || p($.current));
       };
-      return P.addEventListener("transitionend", q), () => {
-        P.removeEventListener("transitionend", q);
+      return P.addEventListener("transitionend", z), () => {
+        P.removeEventListener("transitionend", z);
       };
     }
   }, [p, t]), M(() => {
     const P = _.current;
-    m && P && (P.dataset.open = "");
-  }, [m]), /* @__PURE__ */ n(
+    b && P && (P.dataset.open = "");
+  }, [b]), /* @__PURE__ */ n(
     Ht,
     {
-      open: m,
+      open: b,
       onClose: e,
-      className: i(
+      className: w(
         {
-          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": m,
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": b,
           "tw:overflow-hidden": r === "cover"
         },
-        d
+        l
       ),
       ...f,
       children: /* @__PURE__ */ n(
@@ -795,7 +814,7 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
         {
           "data-testid": "transition-container",
           ref: _,
-          className: i(
+          className: w(
             "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
             // CSS transitions are based on the presence of the `data-open` attribute
             "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
@@ -809,14 +828,14 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
             },
             { "tw:h-full": r === "cover" }
           ),
-          children: /* @__PURE__ */ n(v, { className: i(
+          children: /* @__PURE__ */ n(v, { className: w(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
-          ), children: r === "cover" ? /* @__PURE__ */ g(S, { children: [
+          ), children: r === "cover" ? /* @__PURE__ */ g(A, { children: [
             /* @__PURE__ */ g(
               "div",
               {
-                className: i(
+                className: w(
                   "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",
@@ -824,38 +843,38 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(J, { onClick: e, label: "Close dialog" })
+                  /* @__PURE__ */ n(Q, { onClick: e, label: "Close dialog" })
                 ]
               }
             ),
             /* @__PURE__ */ n("div", { children: a })
-          ] }) : /* @__PURE__ */ g(S, { children: [
-            /* @__PURE__ */ g(v.Header, { className: i(
+          ] }) : /* @__PURE__ */ g(A, { children: [
+            /* @__PURE__ */ g(v.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: i({ "tw:text-danger": r === "danger" }), children: o }),
-              /* @__PURE__ */ n(J, { onClick: e, label: "Close dialog" })
+              /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
+              /* @__PURE__ */ n(Q, { onClick: e, label: "Close dialog" })
             ] }),
             /* @__PURE__ */ n(v.Body, { children: a }),
-            b && /* @__PURE__ */ g(
+            u && /* @__PURE__ */ g(
               v.Footer,
               {
                 "data-testid": "footer",
-                className: i(
+                className: w(
                   "tw:flex tw:justify-end tw:items-center tw:gap-x-2",
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ n(Tt, { onClick: e, children: u }),
+                  /* @__PURE__ */ n(Bt, { onClick: e, children: c }),
                   /* @__PURE__ */ n(
-                    Pt,
+                    Ct,
                     {
                       solid: !0,
                       variant: r === "danger" ? "danger" : "primary",
-                      disabled: c,
-                      onClick: rt,
-                      children: w
+                      disabled: m,
+                      onClick: ot,
+                      children: i
                     }
                   )
                 ]
@@ -866,16 +885,16 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
       )
     }
   );
-}, le = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: x("tw:text-center", {
+}, le = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(ht, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: x("tw:text-center", {
   "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
   "tw:text-danger": o === "error"
 }), children: [
-  r && /* @__PURE__ */ g(S, { children: [
-    /* @__PURE__ */ n(k, { icon: V, spin: !0 }),
+  r && /* @__PURE__ */ g(A, { children: [
+    /* @__PURE__ */ n(k, { icon: X, spin: !0 }),
     /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
   !r && e
-] }) }), de = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
+] }) }), se = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
     className: x(
@@ -895,36 +914,36 @@ const ne = ({ currentPage: t, pagesCount: e, ...r }) => {
   }
 );
 export {
-  Pt as Button,
+  Ct as Button,
   v as Card,
-  ae as CardModal,
-  Vt as Checkbox,
-  J as CloseButton,
-  Jt as Details,
+  de as CardModal,
+  Xt as Checkbox,
+  Q as CloseButton,
+  Qt as Details,
   R as ELLIPSIS,
   U as Input,
   K as Label,
-  Xt as LabelledInput,
-  Yt as LabelledRevealablePasswordInput,
-  Zt as LabelledSelect,
-  Tt as LinkButton,
-  ht as Listbox,
+  Yt as LabelledInput,
+  Zt as LabelledRevealablePasswordInput,
+  te as LabelledSelect,
+  Bt as LinkButton,
+  ft as Listbox,
   le as Message,
   Ht as ModalDialog,
-  re as NavPills,
-  ne as Paginator,
-  de as Result,
+  oe as NavPills,
+  ae as Paginator,
+  se as Result,
   It as RevealablePasswordInput,
-  te as SearchCombobox,
-  Lt as SearchInput,
-  Ct as Select,
-  pt as SimpleCard,
-  Qt as Table,
-  ee as ToggleSwitch,
-  _t as formatNumber,
-  Ft as keyForPage,
+  ee as SearchCombobox,
+  Tt as SearchInput,
+  Lt as Select,
+  ht as SimpleCard,
+  Vt as Table,
+  re as ToggleSwitch,
+  Rt as formatNumber,
+  At as keyForPage,
   B as pageIsEllipsis,
-  At as prettifyPageNumber,
+  $t as prettifyPageNumber,
   Dt as progressivePagination,
-  oe as roundTen
+  ne as roundTen
 };

package/dist/tailwind.preset.css

@@ -50,6 +50,13 @@
     --color-warning: #ffc107;
     --color-warning-dark: #ffca2c;
     --color-placeholder: #6c757d;
+
+    /* Override breakpoints with the values from bootstrap, to keep sizing until fully migrated */
+    --breakpoint-sm: 576px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 992px;
+    --breakpoint-xl: 1200px;
+    --breakpoint-2xl: 1400px;
 }
 
 @layer base {

package/package.json

@@ -62,25 +62,24 @@
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.1.1",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
-    "eslint": "^9.25.0",
+    "eslint": "^9.25.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-ebf51a3-20250411",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-714736e-20250131",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
     "playwright": "^1.52.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.86.3",
+    "sass": "^1.87.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.2.6",
+    "typescript-eslint": "^8.31.0",
+    "vite": "^6.3.3",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.2"
   },
@@ -90,5 +89,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.12"
+  "version": "0.8.13"
 }