@shlinkio/shlink-frontend-kit 0.8.2 → 0.8.4

package/dist/index.d.ts

@@ -16,6 +16,8 @@ declare type BooleanControlProps = PropsWithChildren<{
     inline?: boolean;
 }>;
 
+export declare type Callback = () => unknown;
+
 export declare const changeThemeInMarkup: (theme: Theme) => void | undefined;
 
 export declare const Checkbox: FC<BooleanControlProps>;
@@ -191,7 +193,7 @@ export declare type Theme = 'dark' | 'light';
 
 export declare type TimeoutToggle = typeof useTimeoutToggle;
 
-declare type ToggleResult = [boolean, () => void, () => void, () => void];
+export declare type ToggleResult = [boolean, () => void, () => void, () => void];
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
@@ -203,7 +205,23 @@ export declare const useParsedQuery: <T>() => T;
 
 export declare const useTheme: (initialTheme?: Theme) => readonly [Theme, Dispatch<SetStateAction<Theme>>];
 
-export declare const useTimeoutToggle: (initialValue?: boolean, delay?: number, setTimeout?: ((handler: TimerHandler, timeout?: number, ...arguments: any[]) => number) & typeof globalThis.setTimeout, clearTimeout?: ((id: number | undefined) => void) & typeof globalThis.clearTimeout) => [boolean, () => void];
+export declare function useTimeout(defaultDelay: number, 
+/** Test seam. Defaults to global setTimeout */
+setTimeout_?: typeof globalThis.setTimeout, 
+/** Test seam. Defaults to global clearTimeout */
+clearTimeout_?: typeof clearTimeout): UseTimeoutResult;
+
+export declare type UseTimeoutResult = {
+    /**
+     * Clears any in-progress timeout, and schedules a new callback.
+     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
+     */
+    setTimeout: (callback: Callback, delay?: number) => void;
+    /** Clears any in-progress timeout */
+    clearCurrentTimeout: () => void;
+};
+
+export declare const useTimeoutToggle: (initialValue?: boolean, delay?: number, setTimeout_?: typeof setTimeout, clearTimeout_?: typeof clearTimeout) => [boolean, () => void];
 
 export declare const useToggle: (initialValue?: boolean) => ToggleResult;
 

package/dist/index.js

@@ -1,17 +1,18 @@
-import { jsx as o, jsxs as d, Fragment as N } from "react/jsx-runtime";
+import { jsx as s, jsxs as d, Fragment as N } from "react/jsx-runtime";
 import { faCircleNotch as I, faSearch as A, faEllipsisV as E, faSortAmountUp as F, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as w } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
 import { clsx as u } from "clsx";
-import { Card as _, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as k, DropdownMenu as S, NavItem as j, NavLink as G, Nav as U, UncontrolledDropdown as q, DropdownItem as g } from "reactstrap";
-import { useId as T, useState as p, useRef as C, useCallback as f, useMemo as Q, Children as V, isValidElement as Y, useEffect as W } from "react";
+import { Card as C, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as O, DropdownMenu as k, NavItem as j, NavLink as G, Nav as U, UncontrolledDropdown as q, DropdownItem as w } from "reactstrap";
+import { useId as v, useState as p, useRef as S, useMemo as Q, useCallback as f, Children as V, isValidElement as Y, useEffect as W } from "react";
 import { useLocation as z, NavLink as J } from "react-router";
-const he = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: c = !1 }) => /* @__PURE__ */ o(
-  _,
+import { u as X } from "./use-timeout-mQ792qNj.js";
+const pe = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: o = !1 }) => /* @__PURE__ */ s(
+  C,
   {
     body: !0,
     className: u(e, {
-      "w-100": c,
-      "w-75 mx-auto": !c,
+      "w-100": o,
+      "w-75 mx-auto": !o,
       "border-danger": n === "error"
     }),
     children: /* @__PURE__ */ d(
@@ -22,18 +23,18 @@ const he = ({ className: e, children: r, loading: t = !1, type: n = "default", f
           "text-danger": n === "error"
         }),
         children: [
-          t && /* @__PURE__ */ o(w, { icon: I, spin: !0 }),
-          t && /* @__PURE__ */ o("span", { className: "ms-2", children: r ?? "Loading..." }),
+          t && /* @__PURE__ */ s(g, { icon: I, spin: !0 }),
+          t && /* @__PURE__ */ s("span", { className: "ms-2", children: r ?? "Loading..." }),
           !t && r
         ]
       }
     )
   }
-), X = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(_, { ...n, children: [
-  e && /* @__PURE__ */ o(H, { role: "heading", "aria-level": 4, children: e }),
-  /* @__PURE__ */ o(M, { className: t, children: r })
-] }), fe = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
-  X,
+), Z = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(C, { ...n, children: [
+  e && /* @__PURE__ */ s(H, { role: "heading", "aria-level": 4, children: e }),
+  /* @__PURE__ */ s(M, { className: t, children: r })
+] }), be = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ s(
+  Z,
   {
     role: "document",
     className: u("text-center", {
@@ -47,47 +48,47 @@ const he = ({ className: e, children: r, loading: t = !1, type: n = "default", f
     bodyClassName: u({ "p-2": n }),
     children: e
   }
-), x = ({ checked: e = !1, onChange: r, className: t, children: n, type: c, inline: s = !1 }) => {
-  const l = T(), a = (h) => r == null ? void 0 : r(h.target.checked, h), i = {
-    "form-switch": c === "switch",
-    "form-checkbox": c === "checkbox"
-  }, m = s ? { display: "inline-block" } : {};
+), y = ({ checked: e = !1, onChange: r, className: t, children: n, type: o, inline: c = !1 }) => {
+  const l = v(), a = (h) => r == null ? void 0 : r(h.target.checked, h), i = {
+    "form-switch": o === "switch",
+    "form-checkbox": o === "checkbox"
+  }, m = c ? { display: "inline-block" } : {};
   return /* @__PURE__ */ d("span", { className: u("form-check", i, t), style: m, children: [
-    /* @__PURE__ */ o("input", { type: "checkbox", className: "form-check-input", id: l, checked: e, onChange: a }),
-    /* @__PURE__ */ o("label", { className: "form-check-label", htmlFor: l, children: n })
+    /* @__PURE__ */ s("input", { type: "checkbox", className: "form-check-input", id: l, checked: e, onChange: a }),
+    /* @__PURE__ */ s("label", { className: "form-check-label", htmlFor: l, children: n })
   ] });
-}, pe = (e) => /* @__PURE__ */ o(x, { type: "checkbox", ...e }), be = (e) => /* @__PURE__ */ o(x, { type: "switch", ...e }), Z = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: c = !1, id: s }) => /* @__PURE__ */ d("div", { className: `${t} ${c ? "" : "mb-3"}`, children: [
-  /* @__PURE__ */ o("label", { className: `form-label ${n}`, htmlFor: s, children: r }),
+}, ge = (e) => /* @__PURE__ */ s(y, { type: "checkbox", ...e }), we = (e) => /* @__PURE__ */ s(y, { type: "switch", ...e }), B = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: o = !1, id: c }) => /* @__PURE__ */ d("div", { className: `${t} ${o ? "" : "mb-3"}`, children: [
+  /* @__PURE__ */ s("label", { className: `form-label ${n}`, htmlFor: c, children: r }),
   e
-] }), we = ({ children: e, value: r, onChange: t, type: n, required: c, placeholder: s, className: l, labelClassName: a }) => {
-  const i = T();
-  return /* @__PURE__ */ o(Z, { label: /* @__PURE__ */ d(N, { children: [
+] }), Ne = ({ children: e, value: r, onChange: t, type: n, required: o, placeholder: c, className: l, labelClassName: a }) => {
+  const i = v();
+  return /* @__PURE__ */ s(B, { label: /* @__PURE__ */ d(N, { children: [
     e,
     ":"
-  ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ o(
+  ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ s(
     "input",
     {
       id: i,
       className: "form-control",
       type: n ?? "text",
       value: r,
-      required: c ?? !0,
-      placeholder: s,
+      required: o ?? !0,
+      placeholder: c,
       onChange: (m) => t(m.target.value)
     }
   ) });
-}, B = 500;
+}, K = 500;
 let b;
-const v = () => {
+const _ = () => {
   b !== null && clearTimeout(b), b = null;
-}, ge = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: c = "", setTimeout_: s = setTimeout }) => {
-  const [l, a] = p(c), i = (m, h = B) => {
-    a(m), v(), b = s(() => {
-      e(m), v();
+}, Ce = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: o = "", setTimeout_: c = setTimeout }) => {
+  const [l, a] = p(o), i = (m, h = K) => {
+    a(m), _(), b = c(() => {
+      e(m), _();
     }, h);
   };
   return /* @__PURE__ */ d("div", { className: u("search-field", r), children: [
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ s(
       "input",
       {
         type: "text",
@@ -100,8 +101,8 @@ const v = () => {
         onChange: (m) => i(m.target.value)
       }
     ),
-    /* @__PURE__ */ o(w, { icon: A, className: "search-field__icon" }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ s(g, { icon: A, className: "search-field__icon" }),
+    /* @__PURE__ */ s(
       "button",
       {
         "aria-label": "Clear search",
@@ -113,56 +114,56 @@ const v = () => {
       }
     )
   ] });
-}, K = (e) => {
+}, Te = () => S(null), ee = (e) => {
   const r = new URLSearchParams(e), t = {};
-  return r.forEach((n, c) => {
-    if (c.endsWith("[]")) {
-      const s = c.slice(0, -2);
-      t[s] ?? (t[s] = []), t[s].push(n);
+  return r.forEach((n, o) => {
+    if (o.endsWith("[]")) {
+      const c = o.slice(0, -2);
+      t[c] ?? (t[c] = []), t[c].push(n);
     } else
-      t[c] = n;
+      t[o] = n;
   }), t;
-}, Ne = (e) => {
+}, _e = (e) => {
   const r = new URLSearchParams();
   for (const [t, n] of Object.entries(e))
-    n !== void 0 && (Array.isArray(n) ? n.forEach((c) => r.append(`${t}[]`, `${c}`)) : r.append(t, `${n}`));
+    n !== void 0 && (Array.isArray(n) ? n.forEach((o) => r.append(`${t}[]`, `${o}`)) : r.append(t, `${n}`));
   return r.toString();
-}, ee = (e = !1) => {
-  const [r, t] = p(e), n = f(() => t((l) => !l), []), c = f(() => t(!0), []), s = f(() => t(!1), []);
-  return [r, n, c, s];
-}, Ce = (e = !1, r = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
-  const [c, s] = p(e), l = C(e), a = C(void 0), i = f(() => {
-    s(!l.current), a.current && n(a.current), a.current = t(() => s(l.current), r);
-  }, [n, r, t]);
-  return [c, i];
-}, _e = () => C(null), Oe = () => {
+}, Oe = () => {
   const { search: e } = z();
-  return Q(() => K(e), [e]);
-}, re = ({
+  return Q(() => ee(e), [e]);
+}, ke = (e = !1, r = 2e3, t = globalThis.setTimeout.bind(globalThis), n = globalThis.clearTimeout.bind(globalThis)) => {
+  const { setTimeout: o } = X(r, t, n), [c, l] = p(e), a = S(e), i = f(() => {
+    l(!a.current), o(() => l(a.current));
+  }, [o]);
+  return [c, i];
+}, re = (e = !1) => {
+  const [r, t] = p(e), n = f(() => t((l) => !l), []), o = f(() => t(!0), []), c = f(() => t(!1), []);
+  return [r, n, o, c];
+}, te = ({
   text: e,
   disabled: r = !1,
   className: t,
   children: n,
-  dropdownClassName: c,
-  noCaret: s,
+  dropdownClassName: o,
+  noCaret: c,
   end: l = !1,
   minWidth: a,
   inline: i,
   size: m,
   ...h
 }) => {
-  const [y, L] = ee(), D = u("dropdown-btn__toggle", t, {
+  const [x, L] = re(), D = u("dropdown-btn__toggle", t, {
     "btn-block": !i,
-    "dropdown-btn__toggle--with-caret": !s
+    "dropdown-btn__toggle--with-caret": !c
   }), R = { minWidth: a && `${a}px` };
-  return /* @__PURE__ */ d($, { isOpen: y, toggle: L, disabled: r, className: c, children: [
-    /* @__PURE__ */ o(k, { size: m, caret: !s, className: D, color: "primary", ...h, children: e }),
-    /* @__PURE__ */ o(S, { className: "w-100", end: l, style: R, children: n })
+  return /* @__PURE__ */ d($, { isOpen: x, toggle: L, disabled: r, className: o, children: [
+    /* @__PURE__ */ s(O, { size: m, caret: !c, className: D, color: "primary", ...h, children: e }),
+    /* @__PURE__ */ s(k, { className: "w-100", end: l, style: R, children: n })
   ] });
-}, ve = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
-  re,
+}, ve = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ s(
+  te,
   {
-    text: /* @__PURE__ */ o(w, { className: "px-1", icon: E }),
+    text: /* @__PURE__ */ s(g, { className: "px-1", icon: E }),
     "aria-label": t,
     size: "sm",
     minWidth: r,
@@ -171,41 +172,41 @@ const v = () => {
     inline: !0,
     children: e
   }
-), te = ({ children: e, ...r }) => /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(G, { className: "nav-pills__nav-link", tag: J, ...r, children: e }) }), ke = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ o(_, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ o(U, { pills: !0, fill: r, children: V.map(e, (n) => {
-  if (!Y(n) || n.type !== te)
+), ne = ({ children: e, ...r }) => /* @__PURE__ */ s(j, { children: /* @__PURE__ */ s(G, { className: "nav-pills__nav-link", tag: J, ...r, children: e }) }), Se = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ s(C, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ s(U, { pills: !0, fill: r, children: V.map(e, (n) => {
+  if (!Y(n) || n.type !== ne)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
 }) }) });
-function O(e, r, t) {
-  return typeof e == "object" ? O(e.currentField, e.newField, e.currentOrderDir) : e !== r ? "ASC" : t ? {
+function T(e, r, t) {
+  return typeof e == "object" ? T(e.currentField, e.newField, e.currentOrderDir) : e !== r ? "ASC" : t ? {
     ASC: "DESC",
     DESC: void 0
   }[t] : "ASC";
 }
-function ne(e, r, t) {
-  return typeof e == "object" ? ne(e.currentField, e.newField, e.currentOrderDir) : {
+function se(e, r, t) {
+  return typeof e == "object" ? se(e.currentField, e.newField, e.currentOrderDir) : {
     field: r,
-    dir: O(e, r, t)
+    dir: T(e, r, t)
   };
 }
-const Se = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, c) => {
-  const s = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
-  return n[r] > c[r] ? s : l;
-}), Te = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, xe = (e) => {
+const ye = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, o) => {
+  const c = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
+  return n[r] > o[r] ? c : l;
+}), xe = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Le = (e) => {
   const [r, t] = e.split("-");
   return { field: r, dir: t };
-}, ye = (e) => {
-  const [r, t] = p(e), n = f((c, s) => t({ field: c, dir: s }), []);
+}, De = (e) => {
+  const [r, t] = p(e), n = f((o, c) => t({ field: o, dir: c }), []);
   return [r, n];
 };
-function Le({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1, prefixed: s = !0 }) {
+function Re({ items: e, order: r, onChange: t, isButton: n = !0, right: o = !1, prefixed: c = !0 }) {
   const l = (a) => () => {
-    const i = O(a, r.field, r.dir);
+    const i = T(a, r.field, r.dir);
     t(i ? a : void 0, i);
   };
   return /* @__PURE__ */ d(q, { children: [
     /* @__PURE__ */ d(
-      k,
+      O,
       {
         caret: !0,
         color: n ? "primary" : "link",
@@ -214,82 +215,83 @@ function Le({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1,
           "btn-sm p-0": !n
         }),
         children: [
-          !n && /* @__PURE__ */ o(N, { children: "Order by" }),
-          n && !r.field && /* @__PURE__ */ o("i", { children: "Order by..." }),
+          !n && /* @__PURE__ */ s(N, { children: "Order by" }),
+          n && !r.field && /* @__PURE__ */ s("i", { children: "Order by..." }),
           n && r.field && /* @__PURE__ */ d(N, { children: [
-            s && "Order by: ",
+            c && "Order by: ",
             e[r.field],
             " - ",
-            /* @__PURE__ */ o("small", { children: r.dir ?? "DESC" })
+            /* @__PURE__ */ s("small", { children: r.dir ?? "DESC" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ d(S, { end: c, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
+    /* @__PURE__ */ d(k, { end: o, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
       Object.entries(e).map(([a, i]) => /* @__PURE__ */ d(
-        g,
+        w,
         {
           active: r.field === a,
           onClick: l(a),
           className: "d-flex justify-content-between align-items-center",
           children: [
             i,
-            r.field === a && /* @__PURE__ */ o(w, { icon: r.dir === "ASC" ? F : P })
+            r.field === a && /* @__PURE__ */ s(g, { icon: r.dir === "ASC" ? F : P })
           ]
         },
         a
       )),
-      /* @__PURE__ */ o(g, { divider: !0 }),
-      /* @__PURE__ */ o(g, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
+      /* @__PURE__ */ s(w, { divider: !0 }),
+      /* @__PURE__ */ s(w, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ s("i", { children: "Clear selection" }) })
     ] })
   ] });
 }
-const De = "#4696e5", Re = "rgba(70, 150, 229, 0.4)", Ie = "#f77f28", Ae = "rgba(247, 127, 40, 0.4)", Ee = "white", Fe = "#161b22", oe = (e) => {
+const Ie = "#4696e5", Ae = "rgba(70, 150, 229, 0.4)", Ee = "#f77f28", Fe = "rgba(247, 127, 40, 0.4)", Pe = "white", He = "#161b22", oe = (e) => {
   var r;
   return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", e);
-}, Pe = () => {
+}, Me = () => {
   var e;
   return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
-}, ce = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", He = (e) => {
+}, ce = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", $e = (e) => {
   const [r, t] = p(() => e ?? ce());
   return W(() => {
     oe(r);
   }, [r]), [r, t];
 };
 export {
-  pe as Checkbox,
-  re as DropdownBtn,
-  Ie as HIGHLIGHTED_COLOR,
-  Ae as HIGHLIGHTED_COLOR_ALPHA,
-  we as InputFormGroup,
-  Z as LabeledFormGroup,
-  De as MAIN_COLOR,
-  Re as MAIN_COLOR_ALPHA,
-  he as Message,
-  te as NavPillItem,
-  ke as NavPills,
-  Le as OrderingDropdown,
-  Fe as PRIMARY_DARK_COLOR,
-  Ee as PRIMARY_LIGHT_COLOR,
-  fe as Result,
+  ge as Checkbox,
+  te as DropdownBtn,
+  Ee as HIGHLIGHTED_COLOR,
+  Fe as HIGHLIGHTED_COLOR_ALPHA,
+  Ne as InputFormGroup,
+  B as LabeledFormGroup,
+  Ie as MAIN_COLOR,
+  Ae as MAIN_COLOR_ALPHA,
+  pe as Message,
+  ne as NavPillItem,
+  Se as NavPills,
+  Re as OrderingDropdown,
+  He as PRIMARY_DARK_COLOR,
+  Pe as PRIMARY_LIGHT_COLOR,
+  be as Result,
   ve as RowDropdownBtn,
-  ge as SearchField,
-  X as SimpleCard,
-  be as ToggleSwitch,
+  Ce as SearchField,
+  Z as SimpleCard,
+  we as ToggleSwitch,
   oe as changeThemeInMarkup,
-  ne as determineOrder,
-  O as determineOrderDir,
+  se as determineOrder,
+  T as determineOrderDir,
   ce as getSystemPreferredTheme,
-  Pe as isDarkThemeEnabled,
-  Te as orderToString,
-  K as parseQueryString,
-  Se as sortList,
-  xe as stringToOrder,
-  Ne as stringifyQueryParams,
-  _e as useElementRef,
-  ye as useOrder,
+  Me as isDarkThemeEnabled,
+  xe as orderToString,
+  ee as parseQueryString,
+  ye as sortList,
+  Le as stringToOrder,
+  _e as stringifyQueryParams,
+  Te as useElementRef,
+  De as useOrder,
   Oe as useParsedQuery,
-  He as useTheme,
-  Ce as useTimeoutToggle,
-  ee as useToggle
+  $e as useTheme,
+  X as useTimeout,
+  ke as useTimeoutToggle,
+  re as useToggle
 };

package/dist/tailwind.d.ts

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { FC } from 'react';
 import { HTMLProps } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -10,6 +11,10 @@ export declare type BaseInputProps = {
     feedback?: 'error';
 };
 
+declare type BooleanControlProps = Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+};
+
 export declare const Button: FC<ButtonProps>;
 
 export declare type ButtonProps = PropsWithChildren<{
@@ -21,8 +26,6 @@ export declare type ButtonProps = PropsWithChildren<{
     solid?: boolean;
 } & (RegularButtonProps | LinkButtonProps_2)>;
 
-export declare type Callback = () => unknown;
-
 export declare const Card: FC<CardProps> & {
     Body: FC<CardProps>;
     Header: FC<CardProps>;
@@ -51,6 +54,10 @@ export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
     type?: 'td' | 'th';
 };
 
+export declare const Checkbox: FC<CheckboxProps>;
+
+export declare type CheckboxProps = BooleanControlProps;
+
 export declare const CloseButton: FC<CloseButtonProps>;
 
 export declare type CloseButtonProps = {
@@ -90,7 +97,7 @@ export declare const Label: FC<LabelProps>;
 export declare const LabelledInput: FC<LabelledInputProps>;
 
 export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | 'feedback'> & {
-    label: string;
+    label: RequiredReactNode;
     inputClassName?: string;
     error?: string;
     /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
@@ -100,7 +107,7 @@ export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | '
 export declare const LabelledSelect: FC<LabelledSelectProps>;
 
 export declare type LabelledSelectProps = Omit<SelectProps, 'className' | 'id'> & {
-    label: string;
+    label: RequiredReactNode;
     selectClassName?: string;
     /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
     hiddenRequired?: boolean;
@@ -119,6 +126,17 @@ export declare type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'
 
 declare type LinkButtonProps_2 = LinkProps;
 
+/**
+ * Component used to display a card with general information, about current page status, loading, etc.
+ */
+export declare const Message: FC<MessageProps>;
+
+export declare type MessageProps = PropsWithChildren<{
+    className?: string;
+    loading?: boolean;
+    variant?: 'default' | 'error';
+}>;
+
 export declare const ModalDialog: FC<ModalDialogProps>;
 
 export declare type ModalDialogProps = HTMLProps<HTMLDialogElement> & {
@@ -128,6 +146,15 @@ export declare type ModalDialogProps = HTMLProps<HTMLDialogElement> & {
     onClose: () => void;
 };
 
+export declare const NavPills: FC<NavPillsProps> & {
+    Pill: FC<LinkProps>;
+};
+
+export declare type NavPillsProps = PropsWithChildren<{
+    fill?: boolean;
+    className?: string;
+}>;
+
 declare type NoTitleProps = {
     title?: never;
     titleSize?: never;
@@ -148,6 +175,8 @@ export declare type PaginatorProps = {
     urlForPage: (pageNumber: number) => string;
 });
 
+export declare type PillProps = LinkProps;
+
 export declare const prettifyPageNumber: (pageNumber: NumberOrEllipsis) => string;
 
 export declare const progressivePagination: (currentPage: number, pageCount: number) => NumberOrEllipsis[];
@@ -170,6 +199,19 @@ declare type RegularCardModalProps = CommonCardModalProps & {
     onConfirm?: () => void;
 };
 
+export declare type RequiredReactNode = Exclude<ReactNode, undefined | null>;
+
+/**
+ * Component used to display the result of an operation, which can be a success, failure or warning.
+ */
+export declare const Result: FC<ResultProps>;
+
+export declare type ResultProps = PropsWithChildren<{
+    variant: 'success' | 'error' | 'warning';
+    className?: string;
+    size?: Size;
+}>;
+
 export declare const roundTen: (number: number) => number;
 
 export declare const SearchInput: FC<SearchInputProps>;
@@ -194,7 +236,7 @@ export declare type SimpleCardProps = Omit<CardProps, 'title' | 'size'> & {
     bodyClassName?: string;
 } & (TitleProps | NoTitleProps);
 
-declare type Size = 'sm' | 'md' | 'lg';
+export declare type Size = 'sm' | 'md' | 'lg';
 
 export declare const Table: FC<TableProps> & {
     Row: FC<HTMLProps<HTMLTableRowElement>>;
@@ -220,20 +262,8 @@ declare type TitleProps = {
     titleSize?: Size;
 };
 
-export declare function useTimeout(defaultDelay: number, 
-/** Test seam. Defaults to global setTimeout */
-setTimeout_?: typeof globalThis.setTimeout, 
-/** Test seam. Defaults to global clearTimeout */
-clearTimeout_?: typeof clearTimeout): UseTimeoutResult;
+export declare const ToggleSwitch: FC<ToggleSwitchProps>;
 
-export declare type UseTimeoutResult = {
-    /**
-     * Clears any in-progress timeout, and schedules a new callback.
-     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
-     */
-    setTimeout: (callback: Callback, delay?: number) => void;
-    /** Clears any in-progress timeout */
-    clearCurrentTimeout: () => void;
-};
+export declare type ToggleSwitchProps = BooleanControlProps;
 
 export { }