@shlinkio/shlink-frontend-kit 0.8.5 → 0.8.7

package/dist/index.js

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

package/dist/tailwind.d.ts

@@ -1,10 +1,12 @@
 import { ChangeEvent } from 'react';
 import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { HTMLProps } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { LinkProps } from 'react-router';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 
 export declare type BaseInputProps = {
     size?: Size;
@@ -21,6 +23,7 @@ export declare type ButtonProps = PropsWithChildren<{
     disabled?: boolean;
     className?: string;
     variant?: 'primary' | 'secondary' | 'danger';
+    type?: HTMLButtonElement['type'];
     size?: Size;
     inline?: boolean;
     solid?: boolean;
@@ -54,7 +57,7 @@ export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
     type?: 'td' | 'th';
 };
 
-export declare const Checkbox: FC<CheckboxProps>;
+export declare const Checkbox: ForwardRefExoticComponent<Omit<BooleanControlProps, "ref"> & RefAttributes<HTMLInputElement>>;
 
 export declare type CheckboxProps = BooleanControlProps;
 
@@ -86,9 +89,11 @@ export declare type ExitAction = 'confirm' | 'cancel';
 
 export declare const formatNumber: (number: number | string) => string;
 
-export declare const Input: FC<InputProps>;
+export declare const Input: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "checked" | "size"> & BaseInputProps & {
+borderless?: boolean;
+} & RefAttributes<HTMLInputElement>>;
 
-export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & BaseInputProps & {
+export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'defaultChecked'> & BaseInputProps & {
     borderless?: boolean;
 };
 
@@ -96,7 +101,13 @@ export declare const keyForPage: (pageNumber: NumberOrEllipsis, index: number) =
 
 export declare const Label: FC<LabelProps>;
 
-export declare const LabelledInput: FC<LabelledInputProps>;
+export declare const LabelledInput: ForwardRefExoticComponent<Omit<InputProps, "className" | "id" | "feedback"> & {
+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'> & {
     label: RequiredReactNode;
@@ -106,7 +117,23 @@ export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | '
     hiddenRequired?: boolean;
 };
 
-export declare const LabelledSelect: FC<LabelledSelectProps>;
+export declare const LabelledRevealablePasswordInput: ForwardRefExoticComponent<Omit<RevealablePasswordInputProps, "className" | "id" | "feedback"> & {
+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'> & {
+    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'> & {
     label: RequiredReactNode;
@@ -183,7 +210,7 @@ export declare const prettifyPageNumber: (pageNumber: NumberOrEllipsis) => strin
 
 export declare const progressivePagination: (currentPage: number, pageCount: number) => NumberOrEllipsis[];
 
-declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
+declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
 
 declare type RegularCardModalProps = CommonCardModalProps & {
     /** Danger dialogs use danger variants in title and confirm button */
@@ -218,9 +245,21 @@ export declare type ResultProps = PropsWithChildren<{
     size?: Size;
 }>;
 
+export declare const RevealablePasswordInput: ForwardRefExoticComponent<Omit<InputProps, "type"> & {
+containerClassName?: string;
+} & RefAttributes<HTMLInputElement>>;
+
+export declare type RevealablePasswordInputProps = Omit<InputProps, 'type'> & {
+    containerClassName?: string;
+};
+
 export declare const roundTen: (number: number) => number;
 
-export declare const SearchInput: FC<SearchInputProps>;
+export declare const SearchInput: ForwardRefExoticComponent<Omit<InputProps, "className" | "onChange" | "value"> & {
+onChange: (searchTerm: string) => void;
+containerClassName?: string;
+inputClassName?: string;
+} & RefAttributes<HTMLInputElement>>;
 
 export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange' | 'value'> & {
     onChange: (searchTerm: string) => void;
@@ -230,9 +269,9 @@ export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange'
 
 export declare type SectionType = 'head' | 'body' | 'footer';
 
-export declare const Select: FC<SelectProps>;
+export declare const Select: ForwardRefExoticComponent<Omit<SelectProps, "ref"> & RefAttributes<HTMLSelectElement>>;
 
-declare type SelectElementProps = Omit<HTMLProps<HTMLSelectElement>, 'size'>;
+declare type SelectElementProps = Omit<HTMLProps<HTMLSelectElement>, 'size' | 'checked' | 'defaultChecked'>;
 
 export declare type SelectProps = PropsWithChildren<SelectElementProps & BaseInputProps>;
 
@@ -268,7 +307,7 @@ declare type TitleProps = {
     titleSize?: Size;
 };
 
-export declare const ToggleSwitch: FC<ToggleSwitchProps>;
+export declare const ToggleSwitch: ForwardRefExoticComponent<Omit<BooleanControlProps, "ref"> & RefAttributes<HTMLInputElement>>;
 
 export declare type ToggleSwitchProps = BooleanControlProps;