@ogcio/design-system-react 1.29.0 → 1.30.0

package/dist/heading/heading.d.ts

@@ -35,7 +35,41 @@ export declare const headingVariants: import('tailwind-variants').TVReturnType<{
 }, {
     text: string;
     base: string;
-}, undefined, TVConfig<V, EV>, {
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}>, {
     size: {
         xl: string;
         lg: string;
@@ -75,7 +109,41 @@ export declare const headingVariants: import('tailwind-variants').TVReturnType<{
 }, {
     text: string;
     base: string;
-}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}>, unknown, unknown, undefined>>;
 export type HeadingProps = VariantProps<typeof headingVariants> & {
     caption?: string;
 } & React.HTMLAttributes<HTMLHeadingElement>;

package/dist/hooks/use-breakpoint.js

@@ -1,24 +1,27 @@
 "use client";
-import { useState as i, useEffect as o } from "react";
-const r = {
+import { useState as i, useEffect as s } from "react";
+const t = {
   ExtraSmall: "xs",
   Small: "sm",
   Medium: "md",
   Large: "lg",
   ExtraLarge: "xl"
-}, u = (e) => e < 480 ? r.ExtraSmall : e < 640 ? r.Small : e < 768 ? r.Medium : e < 1024 ? r.Large : r.ExtraLarge, c = () => {
-  const [e, a] = i(null), [s, l] = i(null);
-  return o(() => {
-    const t = () => {
-      const n = globalThis.window.innerWidth;
-      l(n), a(u(n));
+}, u = (e) => e < 480 ? t.ExtraSmall : e < 640 ? t.Small : e < 768 ? t.Medium : e < 1024 ? t.Large : t.ExtraLarge, c = () => {
+  const [e, l] = i(null), [a, o] = i(null);
+  return s(() => {
+    const n = () => {
+      const r = Math.min(
+        globalThis.document.documentElement.clientWidth,
+        globalThis.window.innerWidth
+      );
+      o(r), l(u(r));
     };
-    return t(), globalThis.window.addEventListener("resize", t), () => {
-      globalThis.window.removeEventListener("resize", t);
+    return n(), globalThis.window.addEventListener("resize", n), () => {
+      globalThis.window.removeEventListener("resize", n);
     };
-  }, []), { breakpoint: e, width: s };
+  }, []), { breakpoint: e, width: a };
 };
 export {
-  r as Breakpoint,
+  t as Breakpoint,
   c as useBreakpoint
 };

package/dist/icon/icon.d.ts

@@ -12,6 +12,11 @@ export type IconProps = {
     inline?: boolean;
     className?: string;
     onClick?: MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Use font icon instead of svg
+     * Used as a fallback for consistency during Mitosis migration.
+     */
+    useFontIcon?: boolean;
 } & Omit<ComponentPropsWithoutRef<'span'>, 'children'>;
 export declare const Icon: import('react').ForwardRefExoticComponent<{
     icon: IconId;
@@ -23,5 +28,10 @@ export declare const Icon: import('react').ForwardRefExoticComponent<{
     inline?: boolean;
     className?: string;
     onClick?: MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Use font icon instead of svg
+     * Used as a fallback for consistency during Mitosis migration.
+     */
+    useFontIcon?: boolean;
 } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/dist/icon/icon.js

@@ -1,86 +1,98 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
-import { cn as m } from "../cn.js";
-import _ from "./svgs/bluesky.js";
-import x from "./svgs/facebook.js";
-import h from "./svgs/instagram.js";
-import I from "./svgs/linkedin.js";
-import S from "./svgs/placeholder.js";
-import R from "./svgs/threads.js";
-import z from "./svgs/tiktok.js";
-import T from "./svgs/x.js";
-import v from "./svgs/youtube.js";
+import x from "../atoms/icons/KeyboardArrowDown.js";
+import h from "../atoms/icons/KeyboardArrowUp.js";
+import w from "../atoms/icons/Close.js";
+import I from "../atoms/icons/Visibility.js";
+import S from "../atoms/icons/VisibilityOff.js";
+import { cn as l } from "../cn.js";
+import v from "./svgs/bluesky.js";
+import A from "./svgs/facebook.js";
+import R from "./svgs/instagram.js";
+import z from "./svgs/linkedin.js";
+import T from "./svgs/placeholder.js";
+import V from "./svgs/threads.js";
+import D from "./svgs/tiktok.js";
+import E from "./svgs/x.js";
+import F from "./svgs/youtube.js";
 const d = {
   sm: "16px",
   md: "24px",
   lg: "32px",
   xl: "48px"
-}, w = {
-  social_bluesky: { Component: _, disabledClass: "gi-stroke-gray-700" },
-  social_facebook: { Component: x, disabledClass: "gi-stroke-gray-700" },
+}, G = {
+  social_bluesky: { Component: v, disabledClass: "gi-stroke-gray-700" },
+  social_facebook: { Component: A, disabledClass: "gi-stroke-gray-700" },
   social_instagram: {
-    Component: h,
+    Component: R,
     disabledClass: "gi-stroke-gray-700"
   },
-  social_linkedin: { Component: I, disabledClass: "gi-stroke-gray-700" },
-  social_threads: { Component: R, disabledClass: "gi-stroke-gray-700" },
-  social_tiktok: { Component: z, disabledClass: "gi-stroke-gray-700" },
-  social_x: { Component: T, disabledClass: "gi-stroke-gray-700" },
-  social_youtube: { Component: v, disabledClass: "gi-stroke-gray-700" },
-  placeholder: { Component: S, disabledClass: "gi-fill-gray-700" }
-}, M = u(
+  social_linkedin: { Component: z, disabledClass: "gi-stroke-gray-700" },
+  social_threads: { Component: V, disabledClass: "gi-stroke-gray-700" },
+  social_tiktok: { Component: D, disabledClass: "gi-stroke-gray-700" },
+  social_x: { Component: E, disabledClass: "gi-stroke-gray-700" },
+  social_youtube: { Component: F, disabledClass: "gi-stroke-gray-700" },
+  placeholder: { Component: T },
+  keyboard_arrow_down: { Component: x },
+  keyboard_arrow_up: { Component: h },
+  close: { Component: w },
+  visibility: { Component: I },
+  visibility_off: { Component: S }
+}, W = u(
   ({
-    icon: i,
+    icon: r,
     size: g = "md",
-    filled: c,
-    disabled: e,
-    ariaHidden: k,
-    ariaLabel: a,
+    filled: p,
+    disabled: s,
+    ariaHidden: c,
+    ariaLabel: e,
     inline: o,
-    className: r,
-    onClick: C,
-    ...s
-  }, p) => {
-    const t = d[g] ?? d.md, l = w[String(i)];
-    if (l) {
-      const { Component: f, disabledClass: b } = l, y = m(
+    className: a,
+    onClick: f,
+    useFontIcon: C,
+    ...i
+  }, b) => {
+    const t = d[g] ?? d.md, n = G[String(r)];
+    if (n && !C) {
+      const { Component: k, disabledClass: y } = n, _ = l(
         { "gi-block": !o, "gi-inline-block": o },
-        e && b,
-        r
+        "gi-shrink-0",
+        s && (y || "gi-fill-gray-700"),
+        a
       );
-      return /* @__PURE__ */ n(f, { size: t, className: y });
+      return /* @__PURE__ */ m(k, { size: t, className: _ });
     }
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ m(
       "span",
       {
-        "aria-hidden": k,
-        "aria-label": a,
+        "aria-hidden": c,
+        "aria-label": e,
         "data-testid": "govie-icon",
-        ...s,
-        ref: p,
-        onClick: C,
-        role: a ? "img" : "presentation",
-        className: m(
+        ...i,
+        ref: b,
+        onClick: f,
+        role: e ? "img" : "presentation",
+        className: l(
           {
             "gi-block": !o,
             "gi-inline-block": o,
-            "gi-text-gray-700": e
+            "gi-text-gray-700": s
           },
           "material-symbols-outlined",
-          r
+          a
         ),
         style: {
           fontSize: t,
-          fontVariationSettings: `'FILL' ${c ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${t}`,
-          ...s == null ? void 0 : s.style
+          fontVariationSettings: `'FILL' ${p ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${t}`,
+          ...i == null ? void 0 : i.style
         },
-        children: i
+        children: r
       }
     );
   }
 );
 export {
-  M as Icon,
-  M as default
+  W as Icon,
+  W as default
 };

package/dist/icon/icons.d.ts

@@ -1,2 +1,2 @@
 export declare const iconIds: readonly ["accessibility_new", "add_circle", "apps", "arrow_back", "arrow_downward", "arrow_drop_down", "arrow_drop_up", "arrow_forward", "arrow_left_alt", "arrow_outward", "arrow_right_alt", "arrow_upward", "attach_file", "block", "call", "cancel", "candlestick_chart", "chat_bubble", "check", "check_circle", "chevron_left", "chevron_right", "child_care", "close", "content_copy", "credit_card", "delete", "directions_car", "do_not_disturb_on", "download", "edit", "error", "event", "filter_list", "health_and_safety", "home", "info", "keyboard_arrow_down", "keyboard_arrow_up", "link", "location_on", "login", "logout", "mail", "menu", "mic", "more_horiz", "more_vert", "open_in_new", "person", "person_cancel", "person_check", "refresh", "search", "send", "settings", "sort", "space_dashboard", "sync", "swap_vert", "thumb_down", "thumb_up", "unfold_more", "upload", "visibility", "visibility_off", "warning", "work", "social_bluesky", "social_facebook", "social_instagram", "social_linkedin", "social_threads", "social_tiktok", "social_x", "social_youtube", "placeholder", "first_page", "last_page"];
-export declare const Icons: ("accessibility_new" | "add_circle" | "apps" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_left_alt" | "arrow_outward" | "arrow_right_alt" | "arrow_upward" | "attach_file" | "block" | "call" | "cancel" | "candlestick_chart" | "chat_bubble" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "child_care" | "close" | "content_copy" | "credit_card" | "delete" | "directions_car" | "do_not_disturb_on" | "download" | "edit" | "error" | "event" | "filter_list" | "health_and_safety" | "home" | "info" | "keyboard_arrow_down" | "keyboard_arrow_up" | "link" | "location_on" | "login" | "logout" | "mail" | "menu" | "mic" | "more_horiz" | "more_vert" | "open_in_new" | "person" | "person_cancel" | "person_check" | "refresh" | "search" | "send" | "settings" | "sort" | "space_dashboard" | "sync" | "swap_vert" | "thumb_down" | "thumb_up" | "unfold_more" | "upload" | "visibility" | "visibility_off" | "warning" | "work" | "social_bluesky" | "social_facebook" | "social_instagram" | "social_linkedin" | "social_threads" | "social_tiktok" | "social_x" | "social_youtube" | "placeholder" | "first_page" | "last_page")[];
+export declare const Icons: ("search" | "link" | "sort" | "menu" | "keyboard_arrow_down" | "keyboard_arrow_up" | "close" | "visibility" | "accessibility_new" | "add_circle" | "apps" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_left_alt" | "arrow_outward" | "arrow_right_alt" | "arrow_upward" | "attach_file" | "block" | "call" | "cancel" | "candlestick_chart" | "chat_bubble" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "child_care" | "content_copy" | "credit_card" | "delete" | "directions_car" | "do_not_disturb_on" | "download" | "edit" | "error" | "event" | "filter_list" | "health_and_safety" | "home" | "info" | "location_on" | "login" | "logout" | "mail" | "mic" | "more_horiz" | "more_vert" | "open_in_new" | "person" | "person_cancel" | "person_check" | "refresh" | "send" | "settings" | "space_dashboard" | "sync" | "swap_vert" | "thumb_down" | "thumb_up" | "unfold_more" | "upload" | "visibility_off" | "warning" | "work" | "social_bluesky" | "social_facebook" | "social_instagram" | "social_linkedin" | "social_threads" | "social_tiktok" | "social_x" | "social_youtube" | "placeholder" | "first_page" | "last_page")[];

package/dist/input-password/input-password.js

@@ -1,34 +1,35 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as r, useState as c } from "react";
-import { InputText as l } from "../input-text/input-text.js";
-const u = r(
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as r, useState as a } from "react";
+import { InputText as c } from "../input-text/input-text.js";
+const l = r(
   (o, s) => {
-    const [t, n] = c({
+    const [t, e] = a({
       icon: "visibility",
       type: "password"
-    }), p = () => {
+    }), n = () => {
       const i = t.type === "text";
-      n({
+      e({
         type: i ? "password" : "text",
         icon: i ? "visibility" : "visibility_off"
       });
     };
-    return /* @__PURE__ */ e(
-      l,
+    return /* @__PURE__ */ p(
+      c,
       {
         ...o,
         type: t.type,
         inputActionButton: {
           icon: t.icon,
-          onClick: p
+          onClick: n,
+          ariaLabel: t.type === "text" ? "show" : "hide"
         },
         ref: s
       }
     );
   }
 );
-u.displayName = "InputPassword";
+l.displayName = "InputPassword";
 export {
-  u as InputPassword
+  l as InputPassword
 };

package/dist/input-text/input-text.js

@@ -24,7 +24,9 @@ const H = d(
               __origin: "clear_button"
             };
             a && a(f);
-          }
+          },
+          ariaLabel: "Clear input"
+          // TODO I18N: translation
         }
       }
     );
@@ -35,18 +37,18 @@ const H = d(
     inputActionButton: e,
     inputActionPosition: r = "beforeSuffix",
     suffix: t,
-    halfFluid: l = !1,
+    halfFluid: s = !1,
     className: f,
     type: g = "text",
     iconStart: c,
     iconStartClassName: v,
     onIconStartClick: N,
-    iconEnd: s,
+    iconEnd: l,
     iconEndClassName: T,
     onIconEndClick: C,
     disabled: i,
-    inputClassName: w,
-    iconEndRef: b,
+    inputClassName: b,
+    iconEndRef: w,
     containerProps: k,
     ...o
   }, z) => {
@@ -55,7 +57,7 @@ const H = d(
       {
         className: "gi-input-text-action-before-suffix",
         "data-suffix": !!t,
-        "data-has-icon-end": !!s,
+        "data-has-icon-end": !!l,
         children: /* @__PURE__ */ n(p, { ...e, disabled: i })
       }
     ) : null, [e]);
@@ -70,7 +72,7 @@ const H = d(
             "div",
             {
               className: u("gi-input-text-inner", {
-                "gi-input-half-width": l
+                "gi-input-half-width": s
               }),
               children: [
                 c && /* @__PURE__ */ n(
@@ -94,26 +96,26 @@ const H = d(
                   {
                     type: g,
                     "data-icon-start": !!c,
-                    "data-icon-end": !!s,
+                    "data-icon-end": !!l,
                     "data-end-element": !!e,
                     "data-prefix": !!a,
                     "data-suffix": !!t,
                     "data-testid": o.dataTestId,
-                    className: u("gi-input-text", w),
+                    className: u("gi-input-text", b),
                     ref: z,
                     disabled: i,
                     ...o
                   }
                 ),
-                s && /* @__PURE__ */ n(
+                l && /* @__PURE__ */ n(
                   "div",
                   {
                     className: u("gi-input-text-icon-end", T),
                     "data-end-element": !!e && r === "afterSuffix",
                     "data-suffix": !!t,
                     onClick: C,
-                    ref: b,
-                    children: typeof s == "string" ? /* @__PURE__ */ n(x, { icon: s, size: "md", disabled: i }) : s
+                    ref: w,
+                    children: typeof l == "string" ? /* @__PURE__ */ n(x, { icon: l, size: "md", disabled: i }) : l
                   }
                 ),
                 R
@@ -131,11 +133,11 @@ const H = d(
   ariaLabel: e,
   icon: r,
   dataTestId: t,
-  ...l
+  ...s
 }) => /* @__PURE__ */ n(
   O,
   {
-    ...l,
+    ...s,
     icon: {
       icon: r
     },
@@ -150,7 +152,7 @@ const H = d(
   ({ type: a = "text", clearButtonEnabled: e, ...r }, t) => e || a === "search" ? /* @__PURE__ */ n(H, { ref: t, type: a, ...r }) : /* @__PURE__ */ n(h, { ref: t, type: a, ...r })
 );
 I.displayName = "InputText";
-const F = d(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
+const D = d(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
   I,
   {
     ...r,
@@ -166,5 +168,5 @@ const F = d(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
 export {
   p as InputActionButton,
   I as InputText,
-  F as InputTextTableCell
+  D as InputTextTableCell
 };

package/dist/label/label.d.ts

@@ -3,6 +3,49 @@ export declare const LabelSize: {
     readonly Medium: "md";
     readonly Large: "lg";
 };
+export declare const styles: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "gi-label", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "gi-label", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const Label: import('react').ForwardRefExoticComponent<import('react').LabelHTMLAttributes<HTMLLabelElement> & {
     text?: string | React.ReactElement;
     size?: import('./types.js').LabelSizeType;

package/dist/label/label.js

@@ -1,4 +1,4 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { c as o } from "../index-CB-zPpNk.js";
 const d = {
@@ -17,11 +17,12 @@ const d = {
   defaultVariants: {
     size: "md"
   }
-}), b = r(
-  ({ text: e, size: a = d.Medium, className: l, children: m, ...t }, i) => /* @__PURE__ */ s("label", { className: g({ size: a, className: l }), ref: i, ...t, children: m ?? e })
+}), c = r(
+  ({ text: e, size: a = d.Medium, className: m, children: s, ...t }, l) => /* @__PURE__ */ i("label", { className: g({ size: a, className: m }), ref: l, ...t, children: s ?? e })
 );
-b.displayName = "Label";
+c.displayName = "Label";
 export {
-  b as Label,
-  d as LabelSize
+  c as Label,
+  d as LabelSize,
+  g as styles
 };

package/dist/modal/modal.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as i, jsxs as y, Fragment as j } from "react/jsx-runtime";
-import { isValidElement as U, cloneElement as N, useState as A, useRef as W, useMemo as _, Children as z, useId as G, useEffect as C } from "react";
+import { isValidElement as U, cloneElement as T, useState as A, useRef as W, useMemo as _, Children as z, useId as G, useEffect as C } from "react";
 import { createPortal as J } from "react-dom";
 import { Button as E } from "../button/button.js";
 import { cn as u } from "../cn.js";
@@ -45,6 +45,7 @@ const I = {
       variant: "flat",
       size: t,
       appearance: "dark",
+      dataTestid: "modal-close-button",
       ...o
     }
   );
@@ -85,12 +86,12 @@ const I = {
   const [D, S] = _(
     () => R(v),
     [v]
-  ), F = z.toArray(g), T = (m) => F.find(
+  ), F = z.toArray(g), b = (m) => F.find(
     (p) => et(p) === m
-  ), f = T("ModalTitle"), b = T("ModalFooter") || T("DrawerFooter"), L = G(), H = ((k = f == null ? void 0 : f.props) == null ? void 0 : k.id) || `gi-modal-title-${L}`, $ = f ? N(f, {
+  ), f = b("ModalTitle"), N = b("ModalFooter") || b("DrawerFooter"), L = G(), H = ((k = f == null ? void 0 : f.props) == null ? void 0 : k.id) || `gi-modal-title-${L}`, $ = f ? T(f, {
     as: t === "sm" ? "h5" : "h4",
     id: H
-  }) : null, V = b ? N(b, {
+  }) : null, V = N ? T(N, {
     dataModalSize: t
   }) : null, q = F.filter(
     (m) => !tt(m, ["ModalTitle", "ModalFooter", "DrawerFooter"])
@@ -159,7 +160,7 @@ const I = {
                 closeButtonSize: a
               }
             ),
-            /* @__PURE__ */ y("div", { className: u({ "gi-pb-6": !b }), children: [
+            /* @__PURE__ */ y("div", { className: u({ "gi-pb-6": !N }), children: [
               q,
               V
             ] })
@@ -223,7 +224,7 @@ const ht = ({
           children: d.map(
             (a, l) => {
               var c;
-              return N(a, {
+              return T(a, {
                 key: a.key || a.props.id || a.props.dataTestid || `modal-footer-button-${l}`,
                 id: a.props.id || `modal-footer-button-${l}`,
                 className: u((c = a == null ? void 0 : a.props) == null ? void 0 : c.className, g)
@@ -259,7 +260,7 @@ const nt = ({
   startsOpen: o,
   ...n
 }) => {
-  const [r, s] = A(!!o), h = () => s(!0), d = () => s(!1), g = N(t, {
+  const [r, s] = A(!!o), h = () => s(!0), d = () => s(!1), g = T(t, {
     "data-testid": "modal-trigger-button-container",
     "aria-haspopup": "dialog",
     onClick: h

package/dist/spinner/spinner.d.ts

@@ -12,7 +12,21 @@ declare const spinnerVariants: import('tailwind-variants').TVReturnType<{
         md: string;
         sm: string;
     };
-}, undefined, undefined, TVConfig<V, EV>, {
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}>, {
     size: {
         xl: string;
         lg: string;
@@ -26,7 +40,21 @@ declare const spinnerVariants: import('tailwind-variants').TVReturnType<{
         md: string;
         sm: string;
     };
-}, undefined, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}>, unknown, unknown, undefined>>;
 export type SpinnerProps = VariantProps<typeof spinnerVariants> & {
     inline?: boolean;
     dataTestid?: string;