@shlinkio/shlink-frontend-kit 0.8.1 → 0.8.3

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<{
@@ -29,6 +34,13 @@ export declare const Card: FC<CardProps> & {
     Footer: FC<CardProps>;
 };
 
+/**
+ * A ModalDialog that renders a Card as its content
+ */
+export declare const CardModal: FC<CardModalProps>;
+
+export declare type CardModalProps = Omit<ModalDialogProps, 'title' | 'size'> & (CoverCardModalProps | RegularCardModalProps);
+
 export declare type CardProps = HTMLProps<HTMLDivElement>;
 
 export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
@@ -44,6 +56,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 = {
@@ -51,6 +67,19 @@ export declare type CloseButtonProps = {
     onClick?: HTMLProps<HTMLButtonElement>['onClick'];
 };
 
+declare type CommonCardModalProps = {
+    /** Modal header title */
+    title: string;
+};
+
+declare type CoverCardModalProps = CommonCardModalProps & {
+    /**
+     * Cover dialogs have a body that span the whole dialog, and no buttons.
+     * The header overlaps the body with semi-transparent background.
+     */
+    variant: 'cover';
+};
+
 export declare const ELLIPSIS = "...";
 
 declare type Ellipsis = typeof ELLIPSIS;
@@ -70,7 +99,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 */
@@ -80,7 +109,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;
@@ -99,6 +128,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> & {
@@ -108,6 +148,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;
@@ -128,12 +177,43 @@ 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[];
 
 declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
 
+declare type RegularCardModalProps = CommonCardModalProps & {
+    /** Danger dialogs use danger variants in title and confirm button */
+    variant?: 'default' | 'danger';
+    /** Determines the horizontal size of the dialog */
+    size?: Size | 'xl';
+    /** Value to display in confirm button. Defaults to 'Confirm' */
+    confirmText?: string;
+    /** Whether the confirm button is disabled or not */
+    confirmDisabled?: boolean;
+    /**
+     * A footer with confirm and cancel buttons will be rendered if provided.
+     * Invoked when the confirm button is actioned.
+     */
+    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>;
@@ -158,7 +238,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>>;
@@ -184,6 +264,10 @@ declare type TitleProps = {
     titleSize?: Size;
 };
 
+export declare const ToggleSwitch: FC<ToggleSwitchProps>;
+
+export declare type ToggleSwitchProps = BooleanControlProps;
+
 export declare function useTimeout(defaultDelay: number, 
 /** Test seam. Defaults to global setTimeout */
 setTimeout_?: typeof globalThis.setTimeout, 

package/dist/tailwind.js

@@ -1,136 +1,109 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import a from "clsx";
-import { createContext as C, useContext as m, useRef as S, useEffect as B, useId as L, useCallback as f, useMemo as v } from "react";
-import { Link as R } from "react-router";
-import { faClose as U, faSearch as A, faChevronLeft as T, faChevronRight as I } from "@fortawesome/free-solid-svg-icons";
+import { jsx as n, jsxs as i, Fragment as B } from "react/jsx-runtime";
+import s, { clsx as f } from "clsx";
+import { createContext as F, useContext as g, useCallback as N, useId as $, useRef as R, useEffect as T, useMemo as E, useState as Q } from "react";
+import { Link as U, NavLink as V } from "react-router";
+import { faClose as X, faSearch as Y, faChevronLeft as j, faChevronRight as D, faCircleNotch as Z } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
-const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r }) => {
-  const { responsive: e } = m(h);
-  return /* @__PURE__ */ n(p.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+const v = F(void 0), x = F({ responsive: !0 }), tt = ({ children: t, className: e }) => {
+  const { responsive: r } = g(x);
+  return /* @__PURE__ */ n(v.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
-      className: a(
-        { "tw:hidden tw:lg:table-header-group": e },
-        r
+      className: s(
+        { "tw:hidden tw:lg:table-header-group": r },
+        e
       ),
       children: t
     }
   ) });
-}, O = ({ children: t, className: r }) => {
-  const { responsive: e } = m(h);
-  return /* @__PURE__ */ n(p.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+}, et = ({ children: t, className: e }) => {
+  const { responsive: r } = g(x);
+  return /* @__PURE__ */ n(v.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
-      className: a(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
-        r
+      className: s(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": r },
+        e
       ),
       children: t
     }
   ) });
-}, W = ({ children: t, className: r }) => {
-  const { responsive: e } = m(h);
-  return /* @__PURE__ */ n(p.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+}, rt = ({ children: t, className: e }) => {
+  const { responsive: r } = g(x);
+  return /* @__PURE__ */ n(v.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
-      className: a(
-        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
-        r
+      className: s(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": r },
+        e
       ),
       children: t
     }
   ) });
-}, _ = ({ children: t, className: r, ...e }) => {
-  const o = m(p), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = m(h);
+}, ot = ({ children: t, className: e, ...r }) => {
+  const o = g(v), d = (o == null ? void 0 : o.section) === "body", { responsive: a } = g(x);
   return /* @__PURE__ */ n(
     "tr",
     {
-      className: a(
+      className: s(
         "tw:group",
         {
-          "tw:lg:table-row tw:flex tw:flex-col": l,
-          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
+          "tw:lg:table-row tw:flex tw:flex-col": a,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": a,
           "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": d,
           // Use a different hover bg color depending on the table being inside a card or not
           "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": d
         },
-        r
+        e
       ),
-      ...e,
+      ...r,
       children: t
     }
   );
-}, q = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
-  const l = m(p), s = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = m(h);
+}, nt = ({ children: t, className: e, columnName: r, type: o, ...d }) => {
+  const a = g(v), l = o ?? ((a == null ? void 0 : a.section) !== "body" ? "th" : "td"), { responsive: w } = g(x);
   return /* @__PURE__ */ n(
-    s,
+    l,
     {
-      "data-column": i ? e : void 0,
-      className: a(
+      "data-column": w ? r : void 0,
+      className: s(
         "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
         {
-          "tw:border-b-1": !i,
-          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": i,
+          "tw:border-b-1": !w,
+          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": w,
           // For md and lower, display the content in data-column attribute as before
-          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && s === "td"
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": w && l === "td"
         },
-        r
+        e
       ),
       ...d,
       children: t
     }
   );
-}, G = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(h.Provider, { value: { responsive: o }, children: /* @__PURE__ */ c("table", { className: "tw:w-full", ...d, children: [
-  /* @__PURE__ */ n(D, { children: t }),
-  /* @__PURE__ */ n(O, { children: e }),
-  r && /* @__PURE__ */ n(W, { children: r })
-] }) }), bt = Object.assign(G, { Row: _, Cell: q }), ht = ({
-  open: t,
-  children: r,
-  className: e,
-  ...o
-}) => {
-  const d = S(null);
-  return B(() => {
-    var w, N;
-    const l = document.body, s = l.style.overflow, i = l.style.paddingRight;
-    if (t) {
-      const $ = window.outerWidth - l.clientWidth, z = l.scrollHeight > l.clientHeight;
-      l.style.overflow = "hidden", z && (l.style.paddingRight = `${$}px`), (w = d.current) == null || w.showModal();
-    } else
-      (N = d.current) == null || N.close();
-    return () => {
-      l.style.overflow = s, l.style.paddingRight = i;
-    };
-  }, [t]), /* @__PURE__ */ n(
-    "dialog",
-    {
-      ref: d,
-      className: a("tw:bg-transparent tw:backdrop:bg-black/50", e),
-      ...o,
-      children: t && r
-    }
-  );
-}, ut = ({
+}, dt = ({ header: t, footer: e, children: r, responsive: o = !0, ...d }) => /* @__PURE__ */ n(x.Provider, { value: { responsive: o }, children: /* @__PURE__ */ i("table", { className: "tw:w-full", ...d, children: [
+  /* @__PURE__ */ n(tt, { children: t }),
+  /* @__PURE__ */ n(et, { children: r }),
+  e && /* @__PURE__ */ n(rt, { children: e })
+] }) }), Rt = Object.assign(dt, { Row: ot, Cell: nt }), lt = ({
   children: t,
-  className: r,
-  disabled: e,
+  className: e,
+  disabled: r,
   variant: o = "primary",
   size: d = "md",
-  inline: l = !1,
-  solid: s = !1,
-  ...i
+  inline: a = !1,
+  solid: l = !1,
+  ...w
 }) => {
-  const w = "to" in i ? R : "button";
+  const c = "to" in w ? U : "button";
   return (
     // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     /* @__PURE__ */ n(
-      w,
+      c,
       {
-        className: a(
+        className: s(
           {
-            "tw:inline-flex": l,
-            "tw:flex": !l
+            "tw:inline-flex": a,
+            "tw:flex": !a
           },
           "tw:gap-2 tw:items-center tw:justify-center",
           "tw:border tw:rounded-md tw:no-underline",
@@ -147,11 +120,11 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
           {
             "tw:border-brand tw:text-brand": o === "primary",
             "tw:border-zinc-500": o === "secondary",
-            "tw:text-zinc-500": o === "secondary" && !s,
+            "tw:text-zinc-500": o === "secondary" && !l,
             "tw:border-danger": o === "danger",
-            "tw:text-danger": o === "danger" && !s
+            "tw:text-danger": o === "danger" && !l
           },
-          s && {
+          l && {
             "tw:text-white": !0,
             "tw:bg-brand": o === "primary",
             "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
@@ -160,118 +133,143 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
             "tw:bg-danger": o === "danger",
             "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
           },
-          !e && {
-            "tw:highlight:text-white": !s,
+          !r && {
+            "tw:highlight:text-white": !l,
             "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": e
+            "tw:pointer-events-none tw:opacity-65": r
           },
-          r
+          e
         ),
-        disabled: e,
-        ...i,
+        disabled: r,
+        ...w,
         children: t
       }
     )
   );
-}, pt = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+}, z = ({ className: t, onChange: e, ...r }) => {
+  const o = N((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      type: "checkbox",
+      className: f(
+        "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",
+        // Use different background color when rendered inside a card
+        "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input",
+        t
+      ),
+      onChange: o,
+      ...r
+    }
+  );
+}, Et = ({ className: t, ...e }) => /* @__PURE__ */ n(
+  z,
+  {
+    className: f("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
+    ...e
+  }
+), H = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     onClick: t,
-    className: a(
+    className: s(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
       "tw:rounded-md tw:focus-ring"
     ),
-    "aria-label": r,
-    children: /* @__PURE__ */ n(b, { icon: U, size: "xl" })
+    "aria-label": e,
+    children: /* @__PURE__ */ n(b, { icon: X, size: "xl" })
   }
-), F = ({
+), A = ({
   borderless: t = !1,
-  size: r = "md",
-  feedback: e,
+  size: e = "md",
+  feedback: r,
   className: o,
   disabled: d,
-  readOnly: l,
-  ...s
+  readOnly: a,
+  ...l
 }) => {
-  const i = !d && !l;
+  const w = !d && !a;
   return /* @__PURE__ */ n(
     "input",
     {
-      className: a(
+      className: s(
         "tw:w-full",
         {
-          "tw:focus-ring": !e,
-          "tw:focus-ring-danger": e === "error"
+          "tw:focus-ring": !r,
+          "tw:focus-ring-danger": r === "error"
         },
         {
-          "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
-          "tw:px-3 tw:py-1.5": r === "md",
-          "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
+          "tw:px-2 tw:py-1 tw:text-sm": e === "sm",
+          "tw:px-3 tw:py-1.5": e === "md",
+          "tw:px-4 tw:py-2 tw:text-xl": e === "lg"
         },
         {
           "tw:rounded-md tw:border": !t,
-          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
-          "tw:border-danger": !t && e === "error",
-          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !i,
-          "tw:bg-lm-primary tw:dark:bg-dm-primary": i,
+          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !r,
+          "tw:border-danger": !t && r === "error",
+          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !w,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": w,
           // Use different background color when rendered inside a card
-          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": i
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": w
         },
         o
       ),
       disabled: d,
-      readOnly: l,
-      ...s
+      readOnly: a,
+      ...l
     }
   );
-}, E = ({ required: t, children: r, ...e }) => /* @__PURE__ */ c("label", { ...e, children: [
-  r,
+}, W = ({ required: t, children: e, ...r }) => /* @__PURE__ */ i("label", { ...r, children: [
+  e,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), ft = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
-  const s = L();
-  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(E, { htmlFor: s, required: e, children: t }),
+] }), Mt = ({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: d, ...a }) => {
+  const l = $();
+  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(W, { htmlFor: l, required: r, children: t }),
     /* @__PURE__ */ n(
-      F,
+      A,
       {
-        id: s,
-        className: r,
-        required: e || o,
+        id: l,
+        className: e,
+        required: r || o,
         feedback: d ? "error" : void 0,
-        ...l
+        ...a
       }
     ),
     d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
   ] });
-}, J = String.raw`data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>`, K = ({
+}, at = ({
   className: t,
-  size: r = "md",
-  feedback: e,
+  size: e = "md",
+  feedback: r,
   style: o = {},
   disabled: d,
-  ...l
+  ...a
 }) => /* @__PURE__ */ n(
   "select",
   {
-    className: a(
-      "tw:w-full tw:appearance-none tw:pr-9 tw:bg-no-repeat",
+    className: s(
+      "tw:w-full tw:appearance-none tw:pr-9",
+      "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
       {
-        "tw:focus-ring": !e,
-        "tw:focus-ring-danger": e === "error"
+        "tw:focus-ring": !r,
+        "tw:focus-ring-danger": r === "error"
       },
       "tw:rounded-md tw:border",
       {
-        "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
-        "tw:border-danger": e === "error"
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !r,
+        "tw:border-danger": r === "error"
       },
       {
-        "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
-        "tw:pl-3 tw:py-1.5": r === "md",
-        "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
+        "tw:pl-2 tw:py-1 tw:text-sm": e === "sm",
+        "tw:pl-3 tw:py-1.5": e === "md",
+        "tw:pl-4 tw:py-2 tw:text-xl": e === "lg",
         "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": d,
         // Apply different background color when rendered inside a card
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !d
@@ -280,50 +278,48 @@ const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r
     ),
     style: {
       ...o,
-      backgroundImage: `url("${J}")`,
-      backgroundSize: "16px 12px",
-      backgroundPosition: "right 0.75rem center"
+      background: "right 0.75rem center / 16px 12px"
     },
     disabled: d,
-    ...l
+    ...a
   }
-), yt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
-  const l = L();
-  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-    /* @__PURE__ */ n(E, { htmlFor: l, required: e, children: r }),
-    /* @__PURE__ */ n(K, { id: l, className: t, required: e || o, ...d })
+), _t = ({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...d }) => {
+  const a = $();
+  return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(W, { htmlFor: a, required: r, children: e }),
+    /* @__PURE__ */ n(at, { id: a, className: t, required: r || o, ...d })
   ] });
 };
-function Q(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
-  const o = S(null), d = f(() => {
-    o.current && e(o.current);
-  }, [e]), l = f((s, i) => {
-    d(), o.current = r(() => {
-      s(), o.current = null;
-    }, i ?? t);
-  }, [d, t, r]);
-  return B(() => d, [d]), v(
-    () => ({ setTimeout: l, clearCurrentTimeout: d }),
-    [d, l]
+function st(t, e = globalThis.setTimeout.bind(globalThis), r = globalThis.clearTimeout.bind(globalThis)) {
+  const o = R(null), d = N(() => {
+    o.current && r(o.current);
+  }, [r]), a = N((l, w) => {
+    d(), o.current = e(() => {
+      l(), o.current = null;
+    }, w ?? t);
+  }, [d, t, e]);
+  return T(() => d, [d]), E(
+    () => ({ setTimeout: a, clearCurrentTimeout: d }),
+    [d, a]
   );
 }
-const xt = ({
+const jt = ({
   onChange: t,
-  containerClassName: r,
-  inputClassName: e,
+  containerClassName: e,
+  inputClassName: r,
   // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
   size: o = "lg",
   ...d
 }) => {
-  const { setTimeout: l, clearCurrentTimeout: s } = Q(500), i = f((w) => {
-    w ? l(() => t(w)) : (s(), t(w));
-  }, [s, t, l]);
-  return /* @__PURE__ */ c("div", { className: a("tw:group tw:relative tw:focus-within:z-10", r), children: [
+  const { setTimeout: a, clearCurrentTimeout: l } = st(500), w = N((c) => {
+    c ? a(() => t(c)) : (l(), t(c));
+  }, [l, t, a]);
+  return /* @__PURE__ */ i("div", { className: s("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
       b,
       {
-        icon: A,
-        className: a(
+        icon: Y,
+        className: s(
           "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",
           {
@@ -334,161 +330,379 @@ const xt = ({
       }
     ),
     /* @__PURE__ */ n(
-      F,
+      A,
       {
         type: "search",
-        className: a(
+        className: s(
           {
             "tw:pl-9": o !== "sm",
             "tw:pl-7": o === "sm"
           },
-          e
+          r
         ),
         placeholder: "Search...",
-        onChange: (w) => i(w.target.value),
+        onChange: (c) => w(c.target.value),
         size: o,
         ...d
       }
     )
   ] });
-}, V = new Intl.NumberFormat("en-US"), X = (t) => V.format(Number(t)), P = 10, kt = (t) => Math.ceil(t / P) * P, g = 2, y = "...", Y = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), Z = (t, r) => {
-  const e = Y(
-    Math.max(g, t - g),
-    Math.min(r - 1, t + g) + 1
-  );
-  return t - g > g && e.unshift(y), t + g < r - 1 && e.push(y), e.unshift(1), e.push(r), e;
-}, u = (t) => t === y, tt = (t) => u(t) ? t : X(t), rt = (t, r) => u(t) ? `${t}_${r}` : `${t}`, vt = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+}, Dt = ({ className: t, ...e }) => /* @__PURE__ */ n(
+  z,
+  {
+    className: f(
+      "tw:rounded-full tw:w-8 tw:h-4",
+      "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
+      "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
+      "tw:checked:bg-right tw:transition-[background-position]",
+      t
+    ),
+    ...e
+  }
+), wt = ({ className: t, disabled: e, size: r = "md", ...o }) => /* @__PURE__ */ n(
   "button",
   {
-    className: a(
+    className: s(
       "tw:inline-flex tw:rounded-md tw:focus-ring",
       "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
       {
-        "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
-        "tw:px-3 tw:py-1.5": e === "md",
-        "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
-        "tw:pointer-events-none tw:opacity-65": r
+        "tw:px-1.5 tw:py-1 tw:text-sm": r === "sm",
+        "tw:px-3 tw:py-1.5": r === "md",
+        "tw:px-4 tw:py-2 tw:text-lg": r === "lg",
+        "tw:pointer-events-none tw:opacity-65": e
       },
       t
     ),
-    disabled: r,
+    disabled: e,
     ...o
   }
-), M = [
-  "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"
-], j = (t = !1) => a(
-  M,
-  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
-  "tw:focus-ring tw:focus-visible:z-1",
-  {
-    "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
-    "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
-  }
-), k = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: a(M, "tw:px-3 py-2 tw:text-gray-400"), children: t }), H = () => /* @__PURE__ */ n(k, { children: y });
-function et({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
-  const l = v(() => j(r), [r]);
-  return e ? /* @__PURE__ */ n(H, {}) : /* @__PURE__ */ n(R, { className: l, to: o, ...d, children: t });
-}
-function ot({ children: t, active: r, isEllipsis: e, ...o }) {
-  const d = v(() => j(r), [r]);
-  return e ? /* @__PURE__ */ n(H, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
-}
-const Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
-  const o = "urlForPage" in e, d = o ? et : ot, l = f(
-    (s) => o ? { href: u(s) ? void 0 : e.urlForPage(s) } : { onClick: () => !u(s) && e.onPageChange(s) },
-    [o, e]
-  );
-  return r < 2 ? null : /* @__PURE__ */ c("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(b, { size: "xs", icon: T }) }) : /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: T }) }),
-    Z(t, r).map((s, i) => /* @__PURE__ */ n(
-      d,
-      {
-        active: s === t,
-        isEllipsis: u(s),
-        ...l(s),
-        children: tt(s)
-      },
-      rt(s, i)
-    )),
-    t === r ? /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(b, { size: "xs", icon: I }) }) : /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: I }) })
-  ] });
-}, nt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), it = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: s(
       "tw:px-4 tw:py-3 tw:rounded-t-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
-    ...r
+    ...e
   }
-), dt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), ct = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: s(
       "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
       "tw:first:rounded-t-md tw:last:rounded-b-md",
       t
     ),
-    ...r
+    ...e
   }
-), lt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: s(
       "tw:px-4 tw:py-3 tw:rounded-b-md",
       "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
       t
     ),
-    ...r
+    ...e
   }
-), st = ({ className: t, ...r }) => /* @__PURE__ */ n(
+), gt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
   {
-    className: a(
+    className: s(
       "tw:group/card tw:rounded-md tw:shadow-md",
       "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
       t
     ),
-    ...r
+    ...e
   }
-), x = Object.assign(st, { Body: dt, Header: nt, Footer: lt }), Tt = ({ bodyClassName: t, children: r, ...e }) => {
-  const { title: o, titleSize: d = "md", ...l } = "title" in e ? e : {
-    ...e,
+), m = Object.assign(gt, { Body: ct, Header: it, Footer: mt }), bt = ({ bodyClassName: t, children: e, ...r }) => {
+  const { title: o, titleSize: d = "md", ...a } = "title" in r ? r : {
+    ...r,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ c(x, { ...l, children: [
-    o && /* @__PURE__ */ c(x.Header, { children: [
+  return /* @__PURE__ */ i(m, { ...a, children: [
+    o && /* @__PURE__ */ i(m.Header, { children: [
       d === "lg" && /* @__PURE__ */ n("h4", { children: o }),
       d === "md" && /* @__PURE__ */ n("h5", { children: o }),
       d === "sm" && /* @__PURE__ */ n("h6", { children: o })
     ] }),
-    /* @__PURE__ */ n(x.Body, { className: t, children: r })
+    /* @__PURE__ */ n(m.Body, { className: t, children: e })
   ] });
-};
+}, q = F(null), ut = ({ className: t, to: e, ...r }) => {
+  const o = g(q);
+  return /* @__PURE__ */ n(
+    V,
+    {
+      role: "menuitem",
+      to: e,
+      className: ({ isActive: d }) => s(
+        "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
+        "tw:font-bold tw:no-underline tw:text-center tw:highlight:text-brand tw:transition-colors",
+        "tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2 tw:focus-visible:inset-ring-brand/50",
+        {
+          "tw:border-b-brand active": d,
+          "tw:border-b-transparent tw:text-gray-500": !d,
+          "tw:flex-grow": o == null ? void 0 : o.fill
+        },
+        t
+      ),
+      ...r
+    }
+  );
+}, ht = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(q.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(m, { role: "menubar", className: s("tw:flex tw:overflow-hidden", e), children: t }) }), Ht = Object.assign(ht, { Pill: ut }), pt = new Intl.NumberFormat("en-US"), ft = (t) => pt.format(Number(t)), O = 10, Ot = (t) => Math.ceil(t / O) * O, p = 2, I = "...", xt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), yt = (t, e) => {
+  const r = xt(
+    Math.max(p, t - p),
+    Math.min(e - 1, t + p) + 1
+  );
+  return t - p > p && r.unshift(I), t + p < e - 1 && r.push(I), r.unshift(1), r.push(e), r;
+}, k = (t) => t === I, kt = (t) => k(t) ? t : ft(t), Nt = (t, e) => k(t) ? `${t}_${e}` : `${t}`, G = [
+  "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"
+], J = (t = !1) => s(
+  G,
+  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
+  "tw:focus-ring tw:focus-visible:z-1",
+  {
+    "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
+    "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
+  }
+), S = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: s(G, "tw:px-3 py-2 tw:text-gray-400"), children: t }), K = () => /* @__PURE__ */ n(S, { children: I });
+function vt({ children: t, active: e, isEllipsis: r, href: o, ...d }) {
+  const a = E(() => J(e), [e]);
+  return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n(U, { className: a, to: o, ...d, children: t });
+}
+function Pt({ children: t, active: e, isEllipsis: r, ...o }) {
+  const d = E(() => J(e), [e]);
+  return r ? /* @__PURE__ */ n(K, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
+}
+const $t = ({ currentPage: t, pagesCount: e, ...r }) => {
+  const o = "urlForPage" in r, d = o ? vt : Pt, a = N(
+    (l) => o ? { href: k(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !k(l) && r.onPageChange(l) },
+    [o, r]
+  );
+  return e < 2 ? null : /* @__PURE__ */ i("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    t === 1 ? /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(b, { size: "xs", icon: j }) }) : /* @__PURE__ */ n(d, { ...a(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: j }) }),
+    yt(t, e).map((l, w) => /* @__PURE__ */ n(
+      d,
+      {
+        active: l === t,
+        isEllipsis: k(l),
+        ...a(l),
+        children: kt(l)
+      },
+      Nt(l, w)
+    )),
+    t === e ? /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(b, { size: "xs", icon: D }) }) : /* @__PURE__ */ n(d, { ...a(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: D }) })
+  ] });
+}, Ct = ({
+  open: t,
+  children: e,
+  className: r,
+  onClose: o,
+  ...d
+}) => {
+  const a = R(null);
+  return T(() => {
+    var P, y;
+    const l = document.body, w = l.style.overflow, c = l.style.paddingRight;
+    if (t) {
+      const L = window.outerWidth - l.clientWidth, u = l.scrollHeight > l.clientHeight;
+      l.style.overflow = "hidden", u && (l.style.paddingRight = `${L}px`), (P = a.current) == null || P.showModal();
+    } else
+      (y = a.current) == null || y.close();
+    return () => {
+      l.style.overflow = w, l.style.paddingRight = c;
+    };
+  }, [t]), /* @__PURE__ */ n(
+    "dialog",
+    {
+      ref: a,
+      className: s("tw:bg-transparent tw:backdrop:bg-black/50", r),
+      onCancel: (l) => {
+        l.preventDefault(), o();
+      },
+      ...d,
+      children: t && e
+    }
+  );
+}, Ut = ({
+  open: t,
+  onClose: e,
+  variant: r = "default",
+  title: o,
+  children: d,
+  className: a,
+  ...l
+}) => {
+  const {
+    size: w = "md",
+    confirmText: c = "Confirm",
+    confirmDisabled: P,
+    onConfirm: y,
+    ...L
+  } = "onConfirm" in l ? l : { ...l }, [u, M] = Q(t), C = R(null);
+  return T(() => {
+    if (t) {
+      M(!0);
+      return;
+    }
+    const h = C.current;
+    if (h) {
+      delete C.current.dataset.open;
+      const _ = () => M(!1);
+      return h.addEventListener("transitionend", _, { once: !0 }), () => {
+        h.removeEventListener("transitionend", _);
+      };
+    }
+  }, [t]), T(() => {
+    const h = C.current;
+    u && h && (h.dataset.open = "");
+  }, [u]), /* @__PURE__ */ n(
+    Ct,
+    {
+      open: u,
+      onClose: e,
+      className: s(
+        {
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": u,
+          "tw:overflow-hidden": r === "cover"
+        },
+        a
+      ),
+      ...L,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          "data-testid": "transition-container",
+          ref: C,
+          className: s(
+            "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
+            // CSS transitions are based on the presence of the `data-open` attribute
+            "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
+            "tw:transition-[opacity_transform] tw:duration-300",
+            // Handle modal dimensions for different variants and sizes
+            r !== "cover" && {
+              "tw:sm:w-sm": w === "sm",
+              "tw:md:w-lg": w === "md",
+              "tw:md:w-4xl": w === "lg",
+              "tw:md:w-6xl": w === "xl"
+            },
+            { "tw:h-full": r === "cover" }
+          ),
+          children: /* @__PURE__ */ n(m, { className: s(
+            "tw:w-full",
+            { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
+          ), children: r === "cover" ? /* @__PURE__ */ i(B, { children: [
+            /* @__PURE__ */ i(
+              "div",
+              {
+                className: s(
+                  "tw:px-4 tw:py-3 tw:absolute tw:top-0 tw:left-0 tw:right-0",
+                  "tw:flex tw:items-center tw:justify-between",
+                  "tw:text-white tw:bg-linear-to-b tw:from-black/70 tw:to-black/10",
+                  "tw:[text-shadow:_0_2px_4px_rgb(0_0_0/_0.8)]"
+                ),
+                children: [
+                  /* @__PURE__ */ n("h5", { children: o }),
+                  /* @__PURE__ */ n(H, { onClick: e, label: "Close dialog" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ n("div", { children: d })
+          ] }) : /* @__PURE__ */ i(B, { children: [
+            /* @__PURE__ */ i(m.Header, { className: s(
+              "tw:sticky tw:top-0",
+              "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
+            ), children: [
+              /* @__PURE__ */ n("h5", { className: s({ "tw:text-danger": r === "danger" }), children: o }),
+              /* @__PURE__ */ n(H, { onClick: e, label: "Close dialog" })
+            ] }),
+            /* @__PURE__ */ n(m.Body, { children: d }),
+            y && /* @__PURE__ */ i(
+              m.Footer,
+              {
+                "data-testid": "footer",
+                className: s(
+                  "tw:flex tw:justify-end tw:items-center tw:gap-x-2",
+                  "tw:[&]:px-3 tw:sticky tw:bottom-0"
+                ),
+                children: [
+                  /* @__PURE__ */ n(wt, { onClick: e, children: "Cancel" }),
+                  /* @__PURE__ */ n(
+                    lt,
+                    {
+                      solid: !0,
+                      variant: r === "danger" ? "danger" : "primary",
+                      disabled: P,
+                      onClick: y,
+                      children: c
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) })
+        }
+      )
+    }
+  );
+}, zt = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(bt, { className: f({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ i("h3", { className: f("tw:text-center", {
+  "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
+  "tw:text-danger": o === "error"
+}), children: [
+  r && /* @__PURE__ */ i(B, { children: [
+    /* @__PURE__ */ n(b, { icon: Z, spin: !0 }),
+    /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
+  ] }),
+  !r && e
+] }) }), At = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: f(
+      "tw:rounded-md tw:text-center",
+      {
+        "tw:p-2": r === "sm",
+        "tw:p-4": r === "md",
+        "tw:p-6": r === "lg",
+        "tw:[&]:text-white": t !== "warning",
+        "tw:bg-brand": t === "success",
+        "tw:bg-danger": t === "error",
+        "tw:bg-warning tw:text-black": t === "warning"
+      },
+      e
+    ),
+    children: o
+  }
+);
 export {
-  ut as Button,
-  x as Card,
-  pt as CloseButton,
-  y as ELLIPSIS,
-  F as Input,
-  E as Label,
-  ft as LabelledInput,
-  yt as LabelledSelect,
-  vt as LinkButton,
-  ht as ModalDialog,
-  Nt as Paginator,
-  xt as SearchInput,
-  K as Select,
-  Tt as SimpleCard,
-  bt as Table,
-  X as formatNumber,
-  rt as keyForPage,
-  u as pageIsEllipsis,
-  tt as prettifyPageNumber,
-  Z as progressivePagination,
-  kt as roundTen,
-  Q as useTimeout
+  lt as Button,
+  m as Card,
+  Ut as CardModal,
+  Et as Checkbox,
+  H as CloseButton,
+  I as ELLIPSIS,
+  A as Input,
+  W as Label,
+  Mt as LabelledInput,
+  _t as LabelledSelect,
+  wt as LinkButton,
+  zt as Message,
+  Ct as ModalDialog,
+  Ht as NavPills,
+  $t as Paginator,
+  At as Result,
+  jt as SearchInput,
+  at as Select,
+  bt as SimpleCard,
+  Rt as Table,
+  Dt as ToggleSwitch,
+  ft as formatNumber,
+  Nt as keyForPage,
+  k as pageIsEllipsis,
+  kt as prettifyPageNumber,
+  yt as progressivePagination,
+  Ot as roundTen,
+  st as useTimeout
 };

package/dist/tailwind.preset.css

@@ -89,6 +89,18 @@
 @layer base {
     :root {
         --header-height: 56px;
+
+        /* Chevron image for selects */
+        --chevron-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+        /* Tick image for checkboxes */
+        --tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+
+        /* Circle images for toggle switches */
+        --circle-grey-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba%280, 0, 0, 0.25%29'/></svg>");
+        --circle-grey-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba%28255, 255, 255, 0.25%29'/></svg>");
+        --circle-white: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
+        --circle-light-blue: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%2386b7fe'/></svg>");
+
         @apply tw:scheme-normal tw:dark:scheme-dark tw:scroll-auto;
     }
 

package/package.json

@@ -30,7 +30,7 @@
     "test": "vitest run",
     "test:ci": "npm run test -- --coverage",
     "lint": "eslint dev src test",
-    "lint:fix": "npm run lint:js -- --fix",
+    "lint:fix": "npm run lint -- --fix",
     "types": "tsc",
     "dev": "vite serve --host=0.0.0.0 --port 3001"
   },
@@ -53,9 +53,9 @@
     }
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~3.4.0",
+    "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
     "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/vite": "^4.0.16",
+    "@tailwindcss/vite": "^4.0.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -67,9 +67,10 @@
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
     "eslint": "^9.23.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-714736e-20250131",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-aeaed83-20250323",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
@@ -78,7 +79,7 @@
     "sass": "^1.86.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.27.0",
-    "vite": "^6.2.2",
+    "vite": "^6.2.3",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.2"
   },
@@ -88,5 +89,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.1"
+  "version": "0.8.3"
 }