@shlinkio/shlink-frontend-kit 0.8.8 → 0.8.9

package/dist/tailwind.d.ts

@@ -15,7 +15,7 @@ export declare type BaseInputProps = {
     feedback?: 'error';
 };
 
-declare type BaseInputProps_2 = Omit<SearchInputProps, 'role' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'onChange'>;
+declare type BaseInputProps_2 = Omit<SearchInputProps, 'role' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'onChange' | 'autoComplete' | 'autoCorrect'>;
 
 declare type BooleanControlProps = Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
     onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
@@ -159,13 +159,15 @@ export declare type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'
 
 declare type LinkButtonProps_2 = LinkProps;
 
-export declare function Listbox<Item>({ id, items, onSelectItem, renderItem, className, noItemsMessage, anchor, 'aria-label': label, ...rest }: ListboxProps<Item>): JSX.Element;
+export declare function Listbox<Item>({ id, items, onSelectItem, onActiveItemChange, renderItem, className, noItemsMessage, anchor, 'aria-label': label, ...rest }: ListboxProps<Item>): JSX.Element;
 
 export declare type ListboxProps<Item> = Omit<CardProps, 'id' | 'role' | 'aria-orientation'> & {
     /** Map of items in the listbox, with a key representing them uniquely */
     items: Map<string, Item>;
     /** Invoked when the active item is selected via click or `Enter` */
     onSelectItem: (item: Item) => void;
+    /** Invoked when the active item changes via vertical arrows or hover */
+    onActiveItemChange?: (key: string, item: Item) => void;
     /** To customize the shape of an item */
     renderItem: (item: Item) => ReactNode;
     /** Used to link with the element controlling this listbox */
@@ -288,7 +290,8 @@ export declare const roundTen: (number: number) => number;
  * The main difference is that the input is used only to search in the listbox, and once an item is selected, the input
  * is cleared and the listbox is closed.
  */
-export declare function SearchCombobox<Item>({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, listboxSpan, onFocus, ...rest }: SearchComboboxProps<Item>): JSX.Element;
+export declare function SearchCombobox<Item>({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, // SearchInput defaults its size to 'lg'. Change it to 'md'
+    listboxSpan, onFocus, ...rest }: SearchComboboxProps<Item>): JSX.Element;
 
 export declare type SearchComboboxProps<Item> = BaseInputProps_2 & {
     /** If defined, it will display a listbox with the search results */

package/dist/tailwind.js

@@ -1,12 +1,12 @@
-import { jsx as o, jsxs as b, Fragment as S } from "react/jsx-runtime";
-import i, { clsx as x } from "clsx";
-import { useState as K, useEffect as M, createContext as H, useContext as v, forwardRef as p, useCallback as I, useId as _, useRef as L, useMemo as Q } 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 q, faChevronRight as z } from "@fortawesome/free-solid-svg-icons";
+import { jsx as n, jsxs as g, Fragment as F } from "react/jsx-runtime";
+import i, { clsx as v } from "clsx";
+import { useState as $, useCallback as I, useEffect as _, createContext as H, useContext as N, forwardRef as x, useId as A, useRef as E, useMemo as O } from "react";
+import { Link as S, NavLink as nt } from "react-router";
+import { faClose as at, faEyeSlash as lt, faEye as dt, faCircleNotch as V, faSearch as st, faChevronLeft as z, faChevronRight as G } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
 import { a as it, u as wt } from "./use-toggle-CNvdDGvy.js";
 import { createPortal as ct } from "react-dom";
-const mt = ({ className: t, ...e }) => /* @__PURE__ */ o(
+const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -16,7 +16,7 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ o(
     ),
     ...e
   }
-), gt = ({ className: t, ...e }) => /* @__PURE__ */ o(
+), gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -26,7 +26,7 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ o(
     ),
     ...e
   }
-), bt = ({ className: t, ...e }) => /* @__PURE__ */ o(
+), bt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -36,7 +36,7 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ o(
     ),
     ...e
   }
-), ut = ({ className: t, ...e }) => /* @__PURE__ */ o(
+), ut = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
     className: i(
@@ -46,76 +46,83 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ o(
     ),
     ...e
   }
-), f = Object.assign(ut, { Body: gt, Header: mt, Footer: bt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
-  const { title: n, titleSize: a = "md", ...d } = "title" in r ? r : {
+), y = Object.assign(ut, { Body: gt, Header: mt, Footer: bt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
+  const { title: o, titleSize: a = "md", ...d } = "title" in r ? r : {
     ...r,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ b(f, { ...d, children: [
-    n && /* @__PURE__ */ b(f.Header, { children: [
-      a === "lg" && /* @__PURE__ */ o("h4", { children: n }),
-      a === "md" && /* @__PURE__ */ o("h5", { children: n }),
-      a === "sm" && /* @__PURE__ */ o("h6", { children: n })
+  return /* @__PURE__ */ g(y, { ...d, children: [
+    o && /* @__PURE__ */ g(y.Header, { children: [
+      a === "lg" && /* @__PURE__ */ n("h4", { children: o }),
+      a === "md" && /* @__PURE__ */ n("h5", { children: o }),
+      a === "sm" && /* @__PURE__ */ n("h6", { children: o })
     ] }),
-    /* @__PURE__ */ o(f.Body, { className: t, children: e })
+    /* @__PURE__ */ n(y.Body, { className: t, children: e })
   ] });
 };
 function ht({
   id: t,
   items: e,
   onSelectItem: r,
-  renderItem: n,
-  className: a,
-  noItemsMessage: d = "No items",
-  anchor: l,
-  "aria-label": s = "Items",
-  ...c
+  onActiveItemChange: o,
+  renderItem: a,
+  className: d,
+  noItemsMessage: l = "No items",
+  anchor: s,
+  "aria-label": c = "Items",
+  ...b
 }) {
-  const [g, m] = K(0);
-  return M(() => {
-    const w = l == null ? void 0 : l.current;
-    if (!w)
+  const [w, u] = $(0), p = I((f) => {
+    if (u(f), o) {
+      const [m, h] = [...e.entries()][f];
+      o(m, h);
+    }
+  }, [e, o]);
+  return _(() => {
+    const f = s == null ? void 0 : s.current;
+    if (!f)
       return;
-    const u = (h) => {
-      h.key === "ArrowDown" ? m((y) => Math.min(y + 1, e.size - 1)) : h.key === "ArrowUp" ? m((y) => Math.max(y - 1, 0)) : h.key === "Enter" && r([...e.values()][g]);
+    const m = (h) => {
+      ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? p(Math.min(w + 1, e.size - 1)) : h.key === "ArrowUp" ? p(Math.max(w - 1, 0)) : h.key === "Enter" && r([...e.values()][w]);
     };
-    return w.addEventListener("keydown", u), () => w.removeEventListener("keydown", u);
-  }, [g, l, e, r]), /* @__PURE__ */ b(
-    f,
+    return f.addEventListener("keydown", m), () => f.removeEventListener("keydown", m);
+  }, [w, s, p, e, r]), /* @__PURE__ */ g(
+    y,
     {
       id: t,
-      className: i("tw:py-1 tw:flex tw:flex-col", a),
+      className: i("tw:py-1 tw:flex tw:flex-col", d),
       role: "listbox",
       "aria-orientation": "vertical",
-      "aria-label": s,
-      ...c,
+      "aria-label": c,
+      ...b,
       children: [
-        e.size === 0 && /* @__PURE__ */ o("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(([w, u], h) => /* @__PURE__ */ o(
+        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(
           "button",
           {
+            id: `${t}_${f}`,
             type: "button",
             role: "option",
-            "aria-selected": h === g,
+            "aria-selected": h === w,
             className: i(
               "tw:px-2 tw:py-1 tw:text-left tw:truncate",
-              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === g }
+              { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === w }
             ),
             tabIndex: -1,
-            onClick: () => r(u),
-            onMouseOver: () => m(h),
-            children: n(u)
+            onClick: () => r(m),
+            onMouseOver: () => p(h),
+            children: a(m)
           },
-          w
+          f
         ))
       ]
     }
   );
 }
-const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className: e }) => {
-  const { responsive: r } = v(C);
-  return /* @__PURE__ */ o(B.Provider, { value: { section: "head" }, children: /* @__PURE__ */ o(
+const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className: e }) => {
+  const { responsive: r } = N(T);
+  return /* @__PURE__ */ n(B.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
       className: i(
@@ -126,8 +133,8 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
     }
   ) });
 }, xt = ({ children: t, className: e }) => {
-  const { responsive: r } = v(C);
-  return /* @__PURE__ */ o(B.Provider, { value: { section: "body" }, children: /* @__PURE__ */ o(
+  const { responsive: r } = N(T);
+  return /* @__PURE__ */ n(B.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
       className: i(
@@ -138,8 +145,8 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
     }
   ) });
 }, yt = ({ children: t, className: e }) => {
-  const { responsive: r } = v(C);
-  return /* @__PURE__ */ o(B.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ o(
+  const { responsive: r } = N(T);
+  return /* @__PURE__ */ n(B.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
       className: i(
@@ -149,9 +156,9 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
       children: t
     }
   ) });
-}, kt = ({ children: t, className: e, ...r }) => {
-  const n = v(B), a = (n == null ? void 0 : n.section) === "body", { responsive: d } = v(C);
-  return /* @__PURE__ */ o(
+}, vt = ({ children: t, className: e, ...r }) => {
+  const o = N(B), a = (o == null ? void 0 : o.section) === "body", { responsive: d } = N(T);
+  return /* @__PURE__ */ n(
     "tr",
     {
       className: i(
@@ -169,9 +176,9 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
       children: t
     }
   );
-}, vt = ({ children: t, className: e, columnName: r, type: n, ...a }) => {
-  const d = v(B), l = n ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s } = v(C);
-  return /* @__PURE__ */ o(
+}, kt = ({ children: t, className: e, columnName: r, type: o, ...a }) => {
+  const d = N(B), l = o ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s } = N(T);
+  return /* @__PURE__ */ n(
     l,
     {
       "data-column": s ? r : void 0,
@@ -189,26 +196,26 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
       children: t
     }
   );
-}, Nt = ({ header: t, footer: e, children: r, responsive: n = !0, ...a }) => /* @__PURE__ */ o(C.Provider, { value: { responsive: n }, children: /* @__PURE__ */ b("table", { className: "tw:w-full", ...a, children: [
-  /* @__PURE__ */ o(ft, { children: t }),
-  /* @__PURE__ */ o(xt, { children: r }),
-  e && /* @__PURE__ */ o(yt, { children: e })
-] }) }), Kt = Object.assign(Nt, { Row: kt, Cell: vt }), Pt = ({
+}, 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 })
+] }) }), Jt = Object.assign(Nt, { Row: vt, Cell: kt }), Pt = ({
   children: t,
   className: e,
   disabled: r,
-  variant: n = "primary",
+  variant: o = "primary",
   size: a = "md",
   inline: d = !1,
   solid: l = !1,
   type: s = "button",
   ...c
 }) => {
-  const g = "to" in c ? j : "button", m = g === j ? void 0 : s;
+  const b = "to" in c ? S : "button", w = b === S ? void 0 : s;
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
-    /* @__PURE__ */ o(
-      g,
+    /* @__PURE__ */ n(
+      b,
       {
         className: i(
           {
@@ -219,8 +226,8 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
           "tw:border tw:rounded-md tw:no-underline",
           "tw:transition-colors",
           {
-            "tw:focus-ring": n !== "danger",
-            "tw:focus-ring-danger": n === "danger"
+            "tw:focus-ring": o !== "danger",
+            "tw:focus-ring-danger": o === "danger"
           },
           {
             "tw:px-1.5 tw:py-1 tw:text-sm": a === "sm",
@@ -228,26 +235,26 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
             "tw:px-4 tw:py-2 tw:text-lg": a === "lg"
           },
           {
-            "tw:border-brand tw:text-brand": n === "primary",
-            "tw:border-zinc-500": n === "secondary",
-            "tw:text-zinc-500": n === "secondary" && !l,
-            "tw:border-danger": n === "danger",
-            "tw:text-danger": n === "danger" && !l
+            "tw:border-brand tw:text-brand": o === "primary",
+            "tw:border-zinc-500": o === "secondary",
+            "tw:text-zinc-500": o === "secondary" && !l,
+            "tw:border-danger": o === "danger",
+            "tw:text-danger": o === "danger" && !l
           },
           l && {
             "tw:text-white": !0,
-            "tw:bg-brand": n === "primary",
-            "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": n === "primary",
-            "tw:bg-zinc-500": n === "secondary",
-            "tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600": n === "secondary",
-            "tw:bg-danger": n === "danger",
-            "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": n === "danger"
+            "tw:bg-brand": o === "primary",
+            "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
+            "tw:bg-zinc-500": o === "secondary",
+            "tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600": o === "secondary",
+            "tw:bg-danger": o === "danger",
+            "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
           },
           !r && {
             "tw:highlight:text-white": !l,
-            "tw:highlight:bg-brand": n === "primary",
-            "tw:highlight:bg-zinc-500": n === "secondary",
-            "tw:highlight:bg-danger": n === "danger"
+            "tw:highlight:bg-brand": o === "primary",
+            "tw:highlight:bg-zinc-500": o === "secondary",
+            "tw:highlight:bg-danger": o === "danger"
           },
           {
             "tw:pointer-events-none tw:opacity-65": r
@@ -255,20 +262,20 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
           e
         ),
         disabled: r,
-        type: m,
+        type: w,
         ...c,
         children: t
       }
     )
   );
-}, X = p(({ className: t, onChange: e, ...r }, n) => {
+}, X = x(({ className: t, onChange: e, ...r }, o) => {
   const a = I((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(
     "input",
     {
-      ref: n,
+      ref: o,
       type: "checkbox",
-      className: x(
+      className: v(
         "tw:appearance-none tw:focus-ring",
         "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-brand tw:bg-no-repeat",
@@ -280,14 +287,14 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
       ...r
     }
   );
-}), Qt = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+}), Qt = x(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   X,
   {
     ref: r,
-    className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
+    className: v("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
     ...e
   }
-)), G = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ o(
+)), J = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
@@ -297,19 +304,19 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
       "tw:rounded-md tw:focus-ring"
     ),
     "aria-label": e,
-    children: /* @__PURE__ */ o(k, { icon: at, size: "xl" })
+    children: /* @__PURE__ */ n(k, { icon: at, size: "xl" })
   }
-), A = p(({
+), U = x(({
   borderless: t = !1,
   size: e = "md",
   feedback: r,
-  className: n,
+  className: o,
   disabled: a,
   readOnly: d,
   ...l
 }, s) => {
   const c = !a && !d;
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(
     "input",
     {
       ref: s,
@@ -333,51 +340,51 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
           // Use different background color when rendered inside a card
           "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": c
         },
-        n
+        o
       ),
       disabled: a,
       readOnly: d,
       ...l
     }
   );
-}), O = ({ required: t, children: e, ...r }) => /* @__PURE__ */ b("label", { ...r, children: [
+}), K = ({ required: t, children: e, ...r }) => /* @__PURE__ */ g("label", { ...r, children: [
   e,
-  t && /* @__PURE__ */ o("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), Vt = p(({ label: t, inputClassName: e, required: r, hiddenRequired: n, error: a, ...d }, l) => {
-  const s = _();
-  return /* @__PURE__ */ b("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ o(O, { htmlFor: s, required: r, children: t }),
-    /* @__PURE__ */ o(
-      A,
+  t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
+] }), Vt = x(({ 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 }),
+    /* @__PURE__ */ n(
+      U,
       {
         ref: l,
         id: s,
         className: e,
-        required: r || n,
+        required: r || o,
         feedback: a ? "error" : void 0,
         ...d
       }
     ),
-    a && /* @__PURE__ */ o("span", { className: "tw:text-danger", children: a })
+    a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
   ] });
-}), It = p(({ containerClassName: t, className: e, size: r, ...n }, a) => {
-  const [d, l, , s] = it(!1), c = L(null), g = I(({ relatedTarget: m }) => {
-    var w;
-    (w = c.current) != null && w.contains(m) || s();
+}), It = x(({ containerClassName: t, className: e, size: r, ...o }, a) => {
+  const [d, l, , s] = it(!1), c = E(null), b = I(({ relatedTarget: w }) => {
+    var u;
+    (u = c.current) != null && u.contains(w) || s();
   }, [c, s]);
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: x("tw:group tw:relative", t),
+      className: v("tw:group tw:relative", t),
       ref: c,
-      onBlurCapture: g,
+      onBlurCapture: b,
       children: [
-        /* @__PURE__ */ o(
-          A,
+        /* @__PURE__ */ n(
+          U,
           {
             ref: a,
             type: d ? "text" : "password",
-            className: x(
+            className: v(
               {
                 "tw:pr-10": r !== "sm",
                 "tw:pr-8": r === "sm"
@@ -386,17 +393,17 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
             ),
             size: r,
             "data-testid": "input",
-            ...n
+            ...o
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             onClick: l,
             title: d ? "Hide password" : "Show password",
             "aria-label": d ? "Hide password" : "Show password",
-            className: x(
+            className: v(
               "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",
               {
@@ -405,37 +412,37 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
               }
             ),
             tabIndex: -1,
-            children: /* @__PURE__ */ o(k, { fixedWidth: !0, icon: d ? lt : dt })
+            children: /* @__PURE__ */ n(k, { fixedWidth: !0, icon: d ? lt : dt })
           }
         )
       ]
     }
   );
-}), Xt = p(({ label: t, inputClassName: e, required: r, hiddenRequired: n, error: a, ...d }, l) => {
-  const s = _();
-  return /* @__PURE__ */ b("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ o(O, { htmlFor: s, required: r, children: t }),
-    /* @__PURE__ */ o(
+}), Xt = x(({ 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 }),
+    /* @__PURE__ */ n(
       It,
       {
         ref: l,
         id: s,
         className: e,
-        required: r || n,
+        required: r || o,
         feedback: a ? "error" : void 0,
         ...d
       }
     ),
-    a && /* @__PURE__ */ o("span", { className: "tw:text-danger", children: a })
+    a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
   ] });
-}), Ct = p(({
+}), Ct = x(({
   className: t,
   size: e = "md",
   feedback: r,
-  style: n = {},
+  style: o = {},
   disabled: a,
   ...d
-}, l) => /* @__PURE__ */ o(
+}, l) => /* @__PURE__ */ n(
   "select",
   {
     ref: l,
@@ -462,32 +469,32 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
       t
     ),
     style: {
-      ...n,
+      ...o,
       background: "right 0.75rem center / 16px 12px"
     },
     disabled: a,
     ...d
   }
-)), Yt = p(({ selectClassName: t, label: e, required: r, hiddenRequired: n, ...a }, d) => {
-  const l = _();
-  return /* @__PURE__ */ b("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ o(O, { htmlFor: l, required: r, children: e }),
-    /* @__PURE__ */ o(Ct, { ref: d, id: l, className: t, required: r || n, ...a })
+)), Yt = x(({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...a }, d) => {
+  const l = A();
+  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(K, { htmlFor: l, required: r, children: e }),
+    /* @__PURE__ */ n(Ct, { ref: d, id: l, className: t, required: r || o, ...a })
   ] });
-}), Tt = p(({
+}), Tt = x(({
   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: n = "lg",
+  size: o = "lg",
   loading: a = !1,
   ...d
 }, l) => {
-  const { setTimeout: s, clearCurrentTimeout: c } = wt(500), g = I((m) => {
-    m ? s(() => t(m)) : (c(), t(m));
+  const { setTimeout: s, clearCurrentTimeout: c } = wt(500), b = I((w) => {
+    w ? s(() => t(w)) : (c(), t(w));
   }, [c, t, s]);
-  return /* @__PURE__ */ b("div", { className: i("tw:group tw:relative tw:focus-within:z-10", e), children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ g("div", { className: i("tw:group tw:relative tw:focus-within:z-10", e), children: [
+    /* @__PURE__ */ n(
       k,
       {
         icon: a ? V : st,
@@ -496,27 +503,27 @@ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className:
           "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",
           {
-            "tw:left-3": n !== "sm",
-            "tw:scale-85 tw:left-2": n === "sm"
+            "tw:left-3": o !== "sm",
+            "tw:scale-85 tw:left-2": o === "sm"
           }
         )
       }
     ),
-    /* @__PURE__ */ o(
-      A,
+    /* @__PURE__ */ n(
+      U,
       {
         ref: l,
         type: "search",
         className: i(
           {
-            "tw:pl-9": n !== "sm",
-            "tw:pl-7": n === "sm"
+            "tw:pl-9": o !== "sm",
+            "tw:pl-7": o === "sm"
           },
           r
         ),
         placeholder: "Search...",
-        onChange: (m) => g(m.target.value),
-        size: n,
+        onChange: (w) => b(w.target.value),
+        size: o,
         ...d
       }
     )
@@ -526,24 +533,28 @@ function Zt({
   searchResults: t,
   onSearch: e,
   onSelectSearchResult: r,
-  renderSearchResult: n,
+  renderSearchResult: o,
   size: a = "md",
+  // SearchInput defaults its size to 'lg'. Change it to 'md'
   listboxSpan: d = "full",
   onFocus: l,
   ...s
 }) {
-  const c = L(null), g = _(), m = I((w) => {
-    r(w), e(""), c.current.value = "";
+  const c = E(null), b = A(), [w, u] = $(), p = O(
+    () => t ? w ?? [...t.keys()][0] : void 0,
+    [w, t]
+  ), f = I((m) => {
+    r(m), e(""), c.current.value = "";
   }, [e, r]);
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ g(
     "div",
     {
       className: "tw:relative",
-      onBlur: (w) => {
-        w.currentTarget.contains(w.relatedTarget) || e("");
+      onBlur: (m) => {
+        m.currentTarget.contains(m.relatedTarget) || e("");
       },
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           Tt,
           {
             onChange: e,
@@ -552,21 +563,25 @@ function Zt({
             role: "combobox",
             "aria-autocomplete": "list",
             "aria-expanded": !!t,
-            "aria-controls": g,
-            onFocus: (w) => {
-              l == null || l(w), e(w.target.value);
+            "aria-controls": b,
+            "aria-activedescendant": p ? `${b}_${p}` : void 0,
+            autoComplete: "off",
+            autoCorrect: "off",
+            onFocus: (m) => {
+              l == null || l(m), e(m.target.value);
             },
             ...s
           }
         ),
-        t && /* @__PURE__ */ o(
+        t && /* @__PURE__ */ n(
           ht,
           {
-            id: g,
+            id: b,
             items: t,
             anchor: c,
-            onSelectItem: m,
-            renderItem: n,
+            onSelectItem: f,
+            onActiveItemChange: u,
+            renderItem: o,
             className: i(
               "tw:absolute tw:top-full tw:mt-1 tw:z-10",
               {
@@ -582,11 +597,11 @@ function Zt({
     }
   );
 }
-const te = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+const te = x(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   X,
   {
     ref: r,
-    className: x(
+    className: v(
       "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)",
@@ -595,7 +610,7 @@ const te = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
     ),
     ...e
   }
-)), Lt = ({ className: t, disabled: e, size: r = "md", type: n = "button", ...a }) => /* @__PURE__ */ o(
+)), Lt = ({ className: t, disabled: e, size: r = "md", type: o = "button", ...a }) => /* @__PURE__ */ n(
   "button",
   {
     className: i(
@@ -610,12 +625,12 @@ const te = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
       t
     ),
     disabled: e,
-    type: n,
+    type: o,
     ...a
   }
-), Y = H(null), Bt = ({ className: t, to: e, ...r }) => {
-  const n = v(Y);
-  return /* @__PURE__ */ o(
+), Y = H(null), Et = ({ className: t, to: e, ...r }) => {
+  const o = N(Y);
+  return /* @__PURE__ */ n(
     nt,
     {
       role: "menuitem",
@@ -627,20 +642,20 @@ const te = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
         {
           "tw:border-b-brand active": a,
           "tw:border-b-transparent tw:text-gray-500": !a,
-          "tw:flex-grow": n == null ? void 0 : n.fill
+          "tw:flex-grow": o == null ? void 0 : o.fill
         },
         t
       ),
       ...r
     }
   );
-}, Et = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ o(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ o(f, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), ee = Object.assign(Et, { Pill: Bt }), Mt = new Intl.NumberFormat("en-US"), Rt = (t) => Mt.format(Number(t)), J = 10, re = (t) => Math.ceil(t / J) * J, P = 2, R = "...", _t = (t, e) => Array.from({ length: e - t }, (r, n) => t + n), Ft = (t, e) => {
-  const r = _t(
-    Math.max(P, t - P),
-    Math.min(e - 1, t + P) + 1
+}, Bt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(y, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), ee = Object.assign(Bt, { Pill: Et }), Mt = new Intl.NumberFormat("en-US"), _t = (t) => Mt.format(Number(t)), Q = 10, re = (t) => Math.ceil(t / Q) * Q, C = 2, R = "...", Rt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), At = (t, e) => {
+  const r = Rt(
+    Math.max(C, t - C),
+    Math.min(e - 1, t + C) + 1
   );
-  return t - P > P && r.unshift(R), t + P < e - 1 && r.push(R), r.unshift(1), r.push(e), r;
-}, T = (t) => t === R, St = (t) => T(t) ? t : Rt(t), jt = (t, e) => T(t) ? `${t}_${e}` : `${t}`, Z = [
+  return t - C > C && r.unshift(R), t + C < e - 1 && r.push(R), r.unshift(1), r.push(e), r;
+}, L = (t) => t === R, Dt = (t) => L(t) ? t : _t(t), Ft = (t, e) => L(t) ? `${t}_${e}` : `${t}`, Z = [
   "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(
@@ -651,61 +666,61 @@ const te = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
     "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
   }
-), D = ({ children: t }) => /* @__PURE__ */ o("span", { "aria-hidden": !0, className: i(Z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), et = () => /* @__PURE__ */ o(D, { children: R });
-function Dt({ children: t, active: e, isEllipsis: r, href: n, ...a }) {
-  const d = Q(() => tt(e), [e]);
-  return r ? /* @__PURE__ */ o(et, {}) : /* @__PURE__ */ o(j, { className: d, to: n, ...a, children: t });
+), j = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: i(Z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), et = () => /* @__PURE__ */ n(j, { children: R });
+function St({ children: t, active: e, isEllipsis: r, href: o, ...a }) {
+  const d = O(() => tt(e), [e]);
+  return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n(S, { className: d, to: o, ...a, children: t });
 }
-function Ht({ children: t, active: e, isEllipsis: r, ...n }) {
-  const a = Q(() => tt(e), [e]);
-  return r ? /* @__PURE__ */ o(et, {}) : /* @__PURE__ */ o("button", { type: "button", className: a, ...n, children: t });
+function jt({ children: t, active: e, isEllipsis: r, ...o }) {
+  const a = O(() => tt(e), [e]);
+  return r ? /* @__PURE__ */ n(et, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
 }
 const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
-  const n = "urlForPage" in r, a = n ? Dt : Ht, d = I(
-    (l) => n ? { href: T(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !T(l) && r.onPageChange(l) },
-    [n, r]
+  const o = "urlForPage" in r, a = o ? St : jt, d = I(
+    (l) => o ? { href: L(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !L(l) && r.onPageChange(l) },
+    [o, r]
   );
-  return e < 2 ? null : /* @__PURE__ */ b("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(k, { size: "xs", icon: q }) }) : /* @__PURE__ */ o(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ o(k, { size: "xs", icon: q }) }),
-    Ft(t, e).map((l, s) => /* @__PURE__ */ o(
+  return e < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    t === 1 ? /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }) : /* @__PURE__ */ n(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: z }) }),
+    At(t, e).map((l, s) => /* @__PURE__ */ n(
       a,
       {
         active: l === t,
-        isEllipsis: T(l),
+        isEllipsis: L(l),
         ...d(l),
-        children: St(l)
+        children: Dt(l)
       },
-      jt(l, s)
+      Ft(l, s)
     )),
-    t === e ? /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(k, { size: "xs", icon: z }) }) : /* @__PURE__ */ o(a, { ...d(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ o(k, { size: "xs", icon: z }) })
+    t === e ? /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...d(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: G }) })
   ] });
-}, At = ({
+}, $t = ({
   open: t,
   children: e,
   className: r,
-  onClose: n,
+  onClose: o,
   ...a
 }) => {
-  const d = L(null);
-  return M(() => {
-    var g, m;
+  const d = E(null);
+  return _(() => {
+    var b, w;
     const l = document.body, s = l.style.overflow, c = l.style.paddingRight;
     if (t) {
-      const w = window.outerWidth - l.clientWidth, u = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", u && (l.style.paddingRight = `${w}px`), (g = d.current) == null || g.showModal();
+      const u = window.outerWidth - l.clientWidth, p = l.scrollHeight > l.clientHeight;
+      l.style.overflow = "hidden", p && (l.style.paddingRight = `${u}px`), (b = d.current) == null || b.showModal();
     } else
-      (m = d.current) == null || m.close();
+      (w = d.current) == null || w.close();
     return () => {
       l.style.overflow = s, l.style.paddingRight = c;
     };
   }, [t]), ct(
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ n(
       "dialog",
       {
         ref: d,
         className: i("tw:bg-transparent tw:backdrop:bg-black/50", r),
         onCancel: (l) => {
-          l.preventDefault(), n();
+          l.preventDefault(), o();
         },
         ...a,
         children: t && e
@@ -717,7 +732,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
   open: t,
   onClose: e,
   variant: r = "default",
-  title: n,
+  title: o,
   children: a,
   className: d,
   ...l
@@ -725,51 +740,51 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
   const {
     size: s = "md",
     confirmText: c = "Confirm",
-    cancelText: g = "Cancel",
-    confirmDisabled: m,
-    onConfirm: w,
-    onClosed: u,
-    ...h
-  } = "onConfirm" in l ? l : { ...l }, [y, $] = K(t), E = L(null), F = L("cancel"), rt = I(() => {
-    F.current = "confirm", w == null || w();
-  }, [w]);
-  return M(() => {
+    cancelText: b = "Cancel",
+    confirmDisabled: w,
+    onConfirm: u,
+    onClosed: p,
+    ...f
+  } = "onConfirm" in l ? l : { ...l }, [m, h] = $(t), M = E(null), D = E("cancel"), rt = I(() => {
+    D.current = "confirm", u == null || u();
+  }, [u]);
+  return _(() => {
     if (t) {
-      F.current = "cancel", $(!0);
+      D.current = "cancel", h(!0);
       return;
     }
-    const N = E.current;
-    if (N) {
-      delete E.current.dataset.open;
-      let U = !1;
-      const W = (ot) => {
-        U || ot.target !== N || (U = !0, $(!1), u == null || u(F.current));
+    const P = M.current;
+    if (P) {
+      delete M.current.dataset.open;
+      let W = !1;
+      const q = (ot) => {
+        W || ot.target !== P || (W = !0, h(!1), p == null || p(D.current));
       };
-      return N.addEventListener("transitionend", W), () => {
-        N.removeEventListener("transitionend", W);
+      return P.addEventListener("transitionend", q), () => {
+        P.removeEventListener("transitionend", q);
       };
     }
-  }, [u, t]), M(() => {
-    const N = E.current;
-    y && N && (N.dataset.open = "");
-  }, [y]), /* @__PURE__ */ o(
-    At,
+  }, [p, t]), _(() => {
+    const P = M.current;
+    m && P && (P.dataset.open = "");
+  }, [m]), /* @__PURE__ */ n(
+    $t,
     {
-      open: y,
+      open: m,
       onClose: e,
       className: i(
         {
-          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": y,
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": m,
           "tw:overflow-hidden": r === "cover"
         },
         d
       ),
-      ...h,
-      children: /* @__PURE__ */ o(
+      ...f,
+      children: /* @__PURE__ */ n(
         "div",
         {
           "data-testid": "transition-container",
-          ref: E,
+          ref: M,
           className: i(
             "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
             // CSS transitions are based on the presence of the `data-open` attribute
@@ -784,11 +799,11 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
             },
             { "tw:h-full": r === "cover" }
           ),
-          children: /* @__PURE__ */ o(f, { className: i(
+          children: /* @__PURE__ */ n(y, { className: i(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
-          ), children: r === "cover" ? /* @__PURE__ */ b(S, { children: [
-            /* @__PURE__ */ b(
+          ), children: r === "cover" ? /* @__PURE__ */ g(F, { children: [
+            /* @__PURE__ */ g(
               "div",
               {
                 className: i(
@@ -798,23 +813,23 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
                   "tw:[text-shadow:_0_2px_4px_rgb(0_0_0/_0.8)]"
                 ),
                 children: [
-                  /* @__PURE__ */ o("h5", { children: n }),
-                  /* @__PURE__ */ o(G, { onClick: e, label: "Close dialog" })
+                  /* @__PURE__ */ n("h5", { children: o }),
+                  /* @__PURE__ */ n(J, { onClick: e, label: "Close dialog" })
                 ]
               }
             ),
-            /* @__PURE__ */ o("div", { children: a })
-          ] }) : /* @__PURE__ */ b(S, { children: [
-            /* @__PURE__ */ b(f.Header, { className: i(
+            /* @__PURE__ */ n("div", { children: a })
+          ] }) : /* @__PURE__ */ g(F, { children: [
+            /* @__PURE__ */ g(y.Header, { className: i(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
-              /* @__PURE__ */ o("h5", { className: i({ "tw:text-danger": r === "danger" }), children: n }),
-              /* @__PURE__ */ o(G, { onClick: e, label: "Close dialog" })
+              /* @__PURE__ */ n("h5", { className: i({ "tw:text-danger": r === "danger" }), children: o }),
+              /* @__PURE__ */ n(J, { onClick: e, label: "Close dialog" })
             ] }),
-            /* @__PURE__ */ o(f.Body, { children: a }),
-            w && /* @__PURE__ */ b(
-              f.Footer,
+            /* @__PURE__ */ n(y.Body, { children: a }),
+            u && /* @__PURE__ */ g(
+              y.Footer,
               {
                 "data-testid": "footer",
                 className: i(
@@ -822,13 +837,13 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
                   "tw:[&]:px-3 tw:sticky tw:bottom-0"
                 ),
                 children: [
-                  /* @__PURE__ */ o(Lt, { onClick: e, children: g }),
-                  /* @__PURE__ */ o(
+                  /* @__PURE__ */ n(Lt, { onClick: e, children: b }),
+                  /* @__PURE__ */ n(
                     Pt,
                     {
                       solid: !0,
                       variant: r === "danger" ? "danger" : "primary",
-                      disabled: m,
+                      disabled: w,
                       onClick: rt,
                       children: c
                     }
@@ -841,19 +856,19 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
       )
     }
   );
-}, ae = ({ className: t, children: e, loading: r = !1, variant: n = "default" }) => /* @__PURE__ */ o(pt, { className: x({ "tw:[&]:border-danger": n === "error" }, t), children: /* @__PURE__ */ b("h3", { className: x("tw:text-center", {
-  "tw:text-gray-500 tw:dark:text-gray-400": n === "default",
-  "tw:text-danger": n === "error"
+}, ae = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: v({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: v("tw:text-center", {
+  "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
+  "tw:text-danger": o === "error"
 }), children: [
-  r && /* @__PURE__ */ b(S, { children: [
-    /* @__PURE__ */ o(k, { icon: V, spin: !0 }),
-    /* @__PURE__ */ o("span", { className: "tw:ml-2", children: e ?? "Loading..." })
+  r && /* @__PURE__ */ g(F, { children: [
+    /* @__PURE__ */ n(k, { icon: V, spin: !0 }),
+    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
   !r && e
-] }) }), le = ({ variant: t, className: e, size: r = "md", children: n }) => /* @__PURE__ */ o(
+] }) }), le = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: x(
+    className: v(
       "tw:rounded-md tw:text-center",
       {
         "tw:p-2": r === "sm",
@@ -866,25 +881,25 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
       },
       e
     ),
-    children: n
+    children: o
   }
 );
 export {
   Pt as Button,
-  f as Card,
+  y as Card,
   ne as CardModal,
   Qt as Checkbox,
-  G as CloseButton,
+  J as CloseButton,
   R as ELLIPSIS,
-  A as Input,
-  O as Label,
+  U as Input,
+  K as Label,
   Vt as LabelledInput,
   Xt as LabelledRevealablePasswordInput,
   Yt as LabelledSelect,
   Lt as LinkButton,
   ht as Listbox,
   ae as Message,
-  At as ModalDialog,
+  $t as ModalDialog,
   ee as NavPills,
   oe as Paginator,
   le as Result,
@@ -893,12 +908,12 @@ export {
   Tt as SearchInput,
   Ct as Select,
   pt as SimpleCard,
-  Kt as Table,
+  Jt as Table,
   te as ToggleSwitch,
-  Rt as formatNumber,
-  jt as keyForPage,
-  T as pageIsEllipsis,
-  St as prettifyPageNumber,
-  Ft as progressivePagination,
+  _t as formatNumber,
+  Ft as keyForPage,
+  L as pageIsEllipsis,
+  Dt as prettifyPageNumber,
+  At as progressivePagination,
   re as roundTen
 };

package/package.json

@@ -63,6 +63,7 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.1.1",
     "@vitest/coverage-v8": "^3.1.1",
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
@@ -74,7 +75,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
-    "jsdom": "^26.0.0",
+    "playwright": "^1.51.1",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.86.3",
     "typescript": "^5.8.3",
@@ -89,5 +90,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.8"
+  "version": "0.8.9"
 }