welcome-ui 8.1.0-alpha.2 → 8.1.0

package/dist/Search.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { D as W } from "./downshift.esm-B7Jil1wW.mjs";
-import ct, { useState as pt, useCallback as ft, useMemo as mt, Fragment as ht } from "react";
-import { ClearButton as ut } from "./ClearButton.mjs";
+import ct, { useState as pt, useCallback as ft, useMemo as mt, Fragment as ut } from "react";
+import { ClearButton as ht } from "./ClearButton.mjs";
 import { IconWrapper as xt } from "./Field.mjs";
 import { shouldForwardProp as A, forwardRef as gt } from "./System.mjs";
 import { c as jt } from "./create-event-rXDe5aCQ.mjs";
 import { d as wt, F as $t } from "./field-styles-BVlRlvuu.mjs";
 import { t as bt } from "./throttle-CW18pWlW.mjs";
-import s, { css as F, th as i } from "@xstyled/styled-components";
+import s, { css as F, th as n } from "@xstyled/styled-components";
 import { StyledIcon as It } from "./Icon.mjs";
 import { o as L } from "./overflow-ellipsis-DGV5Kgt-.mjs";
 const Y = s.divBox.withConfig({ shouldForwardProp: A })`
@@ -16,9 +16,9 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
 `, St = s.div`
   position: relative;
 `, yt = s.inputBox.withConfig({ shouldForwardProp: A })(
-  ({ iconPlacement: n, size: o, transparent: l, variant: x }) => F`
+  ({ iconPlacement: i, size: o, transparent: l, variant: x }) => F`
     position: relative;
-    ${wt({ iconPlacement: n, isClearable: !0, size: o, transparent: l, variant: x })};
+    ${wt({ iconPlacement: i, isClearable: !0, size: o, transparent: l, variant: x })};
     ${L};
 
     br {
@@ -26,8 +26,8 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
     }
   `
 ), Ft = s.ul`
-  ${i("defaultFields.select.default")};
-  ${i("cards.default")};
+  ${n("defaultFields.select.default")};
+  ${n("cards.default")};
   position: absolute;
   color: neutral-90;
   z-index: 2;
@@ -40,18 +40,18 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 `, O = s.li(
-  ({ isExisting: n, isHighlighted: o, isSelected: l }) => F`
+  ({ isExisting: i, isHighlighted: o, isSelected: l }) => F`
     color: beige-70;
-    ${o && i("defaultFields.select.highlighted")};
-    ${l && i("defaultFields.select.selected")};
-    ${n && i("defaultFields.select.existing")};
-    ${l && o && i("defaultFields.select.selectedAndHighlighted")};
+    ${o && n("defaultFields.select.highlighted")};
+    ${l && n("defaultFields.select.selected")};
+    ${i && n("defaultFields.select.existing")};
+    ${l && o && n("defaultFields.select.selectedAndHighlighted")};
     ${L};
     padding: sm;
     list-style: none;
     text-decoration: none;
     font-size: sm;
-    transition: background ${i.transition("medium")};
+    transition: background ${n.transition("medium")};
   `
 ), vt = s.div`
   position: absolute;
@@ -61,10 +61,10 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
   right: 0;
   display: flex;
 `, Rt = s.buttonBox(
-  ({ isOpen: n, size: o }) => F`
+  ({ isOpen: i, size: o }) => F`
     position: relative;
     height: 100%;
-    width: ${i(`defaultFields.sizes.${o}.height`)};
+    width: ${n(`defaultFields.sizes.${o}.height`)};
     padding: 0;
     outline: none !important; /* important for firefox */
     appearance: none;
@@ -76,7 +76,7 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
     justify-content: center;
 
     ${It} {
-      transform: ${n ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
+      transform: ${i ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
       transition: medium;
     }
 
@@ -86,7 +86,7 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
   `
 ), V = "", kt = W.default || W, Ct = gt(
   ({
-    autoComplete: n = "off",
+    autoComplete: i = "off",
     autoFocus: o,
     dataTestId: l,
     disabled: x,
@@ -147,15 +147,15 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
           getMenuProps: et,
           getRootProps: ot,
           highlightedIndex: M,
-          inputValue: it,
+          inputValue: nt,
           isOpen: P,
-          selectedItem: h,
-          toggleMenu: nt
+          selectedItem: u,
+          toggleMenu: it
         }) => {
           const st = P && D.length > 0, lt = () => {
             c([]), S(), t();
-          }, at = /* @__PURE__ */ e.jsx(Rt, { as: "div", size: b, children: /* @__PURE__ */ e.jsx(ut, { onClick: lt }) }), rt = p({
-            autoComplete: n,
+          }, at = /* @__PURE__ */ e.jsx(Rt, { as: "div", size: b, children: /* @__PURE__ */ e.jsx(ht, { onClick: lt }) }), rt = p({
+            autoComplete: i,
             autoFocus: o,
             "data-testid": l,
             disabled: x,
@@ -165,7 +165,7 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
             onBlur: J,
             onClick: K,
             onFocus: (r) => {
-              w == null || w(r), B(""), nt();
+              w == null || w(r), B(""), it();
             },
             placeholder: Q,
             ref: X,
@@ -178,32 +178,34 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
           return /* @__PURE__ */ e.jsxs(Y, { ...ot(I), children: [
             /* @__PURE__ */ e.jsxs(St, { children: [
               /* @__PURE__ */ e.jsx(yt, { ...rt }),
-              f && /* @__PURE__ */ e.jsx(xt, { iconPlacement: "left", size: N, children: ct.cloneElement(f, { ...f.props, size: N }) }),
-              /* @__PURE__ */ e.jsx(vt, { children: it && at })
+              f ? /* @__PURE__ */ e.jsx(xt, { iconPlacement: "left", size: N, children: ct.cloneElement(f, { ...f.props, size: N }) }) : null,
+              /* @__PURE__ */ e.jsx(vt, { children: nt ? at : null })
             ] }),
-            st && /* @__PURE__ */ e.jsx(Ft, { ...et(), children: D.reduce(
-              (r, d, u) => (Z ? r.itemsToRender.push(
+            st ? /* @__PURE__ */ e.jsx(Ft, { ...et(), children: D.reduce(
+              (r, d, h) => (Z ? r.itemsToRender.push(
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
-                /* @__PURE__ */ e.jsxs(ht, { children: [
+                /* @__PURE__ */ e.jsxs(ut, { children: [
                   $ == null ? void 0 : $(d),
-                  d.options && d.options.map((y, dt) => {
-                    const T = r.itemIndex++;
-                    return /* @__PURE__ */ e.jsx(
-                      O,
-                      {
-                        ...z({
-                          index: T,
-                          isSelected: !!(h && a(h) === a(y)),
-                          item: y
-                        }),
-                        isHighlighted: M === T,
-                        children: R(y)
-                      },
-                      dt
-                    );
-                  })
-                ] }, u)
+                  d.options ? d.options.map(
+                    (y, dt) => {
+                      const T = r.itemIndex++;
+                      return /* @__PURE__ */ e.jsx(
+                        O,
+                        {
+                          ...z({
+                            index: T,
+                            isSelected: !!(u && a(u) === a(y)),
+                            item: y
+                          }),
+                          isHighlighted: M === T,
+                          children: R(y)
+                        },
+                        dt
+                      );
+                    }
+                  ) : null
+                ] }, h)
               ) : r.itemsToRender.push(
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
@@ -211,18 +213,18 @@ const Y = s.divBox.withConfig({ shouldForwardProp: A })`
                   O,
                   {
                     ...z({
-                      index: u,
-                      isSelected: !!(h && a(h) === a(d)),
+                      index: h,
+                      isSelected: !!(u && a(u) === a(d)),
                       item: d
                     }),
-                    isHighlighted: M === u,
+                    isHighlighted: M === h,
                     children: R(d)
                   },
-                  u
+                  h
                 )
               ), r),
               { itemIndex: 0, itemsToRender: [] }
-            ).itemsToRender })
+            ).itemsToRender }) : null
           ] });
         }
       }

package/dist/Select.mjs

@@ -975,7 +975,7 @@ const re = "", we = (e) => {
             ) }), Be = /* @__PURE__ */ p.jsx(
               Ee,
               {
-                "data-testid": r && `${r}-arrow-icon`,
+                "data-testid": r ? `${r}-arrow-icon` : null,
                 disabled: s,
                 isOpen: j,
                 size: W,
@@ -1013,13 +1013,13 @@ const re = "", we = (e) => {
             return /* @__PURE__ */ p.jsxs(ke, { ...Ye, disabled: s, children: [
               /* @__PURE__ */ p.jsxs(xt, { children: [
                 m ? /* @__PURE__ */ p.jsx(ve, { as: "input", type: "text", ...ue }) : /* @__PURE__ */ p.jsx(ve, { ...ue, children: ae }),
-                l && /* @__PURE__ */ p.jsx(Se, { iconPlacement: "left", size: de, children: Le.cloneElement(l, { ...l.props, size: de }) }),
+                l ? /* @__PURE__ */ p.jsx(Se, { iconPlacement: "left", size: de, children: Le.cloneElement(l, { ...l.props, size: de }) }) : null,
                 /* @__PURE__ */ p.jsxs(vt, { size: W, children: [
-                  Me && Pe,
+                  Me ? Pe : null,
                   Be
                 ] })
               ] }),
-              We && /* @__PURE__ */ p.jsxs(yt, { ...N(), children: [
+              We ? /* @__PURE__ */ p.jsxs(yt, { ...N(), children: [
                 M.reduce(
                   (D, y, fe) => {
                     if (u && "options" in y)
@@ -1028,7 +1028,7 @@ const re = "", we = (e) => {
                         // @ts-ignore
                         /* @__PURE__ */ p.jsxs(Qe, { children: [
                           Y == null ? void 0 : Y(y),
-                          y.options && y.options.map((C) => {
+                          y.options ? y.options.map((C) => {
                             const me = D.itemIndex++, he = J(C.value, w);
                             return /* @__PURE__ */ p.jsx(
                               q,
@@ -1046,7 +1046,7 @@ const re = "", we = (e) => {
                               },
                               C.value
                             );
-                          })
+                          }) : null
                         ] }, y.label)
                       );
                     else if ("value" in y) {
@@ -1074,7 +1074,7 @@ const re = "", we = (e) => {
                   },
                   { itemIndex: 0, itemsToRender: [] }
                 ).itemsToRender,
-                ce && E.length && /* @__PURE__ */ p.jsx(
+                ce && E.length ? /* @__PURE__ */ p.jsx(
                   q,
                   {
                     isHighlighted: X === M.length,
@@ -1088,9 +1088,9 @@ const re = "", we = (e) => {
                     children: je(E)
                   },
                   "add"
-                )
-              ] }),
-              i && Te(w, De)
+                ) : null
+              ] }) : null,
+              i ? Te(w, De) : null
             ] });
           }
         }

package/dist/Slider.mjs

@@ -309,7 +309,7 @@ const H = $`
         }
       }
     }, [p]), /* @__PURE__ */ s.jsxs(m, { position: "relative", ref: J, w: "100%", children: [
-      v && /* @__PURE__ */ s.jsx(ae, { as: "label", variant: "sm", children: v }),
+      v ? /* @__PURE__ */ s.jsx(ae, { as: "label", variant: "sm", children: v }) : null,
       /* @__PURE__ */ s.jsxs(m, { alignItems: "center", display: "flex", gap: "sm", children: [
         (b === "inline" || b === "fields") && (b === "fields" ? /* @__PURE__ */ s.jsx(
           W,
@@ -348,10 +348,10 @@ const H = $`
           }
         ) : /* @__PURE__ */ s.jsx(m, { children: i })),
         /* @__PURE__ */ s.jsxs(m, { flexGrow: "1", position: "relative", children: [
-          R && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+          R ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
             /* @__PURE__ */ s.jsx(Y, { isVisible: A, ref: K, children: /* @__PURE__ */ s.jsx(Z, { children: u }) }),
             /* @__PURE__ */ s.jsx(Y, { isVisible: O, ref: C, children: /* @__PURE__ */ s.jsx(Z, { children: d }) })
-          ] }),
+          ] }) : null,
           /* @__PURE__ */ s.jsxs(m, { h: 20, pb: "sm", position: "relative", pt: "sm", w: "100%", children: [
             /* @__PURE__ */ s.jsx(
               re,
@@ -392,7 +392,7 @@ const H = $`
             /* @__PURE__ */ s.jsx(pe, {}),
             /* @__PURE__ */ s.jsx(me, { disabled: c, ref: k })
           ] }),
-          E && /* @__PURE__ */ s.jsx(m, { h: 24, ml: 10, mr: 10, position: "relative", children: E.reduce((e, t) => e.includes(t) ? e : [...e, t], []).filter((e) => e >= i && e <= n).map((e, t) => /* @__PURE__ */ s.jsx(ue, { left: `${V(e)}%`, children: /* @__PURE__ */ s.jsx(de, { children: e }) }, `${e}-${t}`)) })
+          E ? /* @__PURE__ */ s.jsx(m, { h: 24, ml: 10, mr: 10, position: "relative", children: E.reduce((e, t) => e.includes(t) ? e : [...e, t], []).filter((e) => e >= i && e <= n).map((e, t) => /* @__PURE__ */ s.jsx(ue, { left: `${V(e)}%`, children: /* @__PURE__ */ s.jsx(de, { children: e }) }, `${e}-${t}`)) }) : null
         ] }),
         (b === "inline" || b === "fields") && (b === "fields" ? /* @__PURE__ */ s.jsx(
           W,
@@ -431,7 +431,7 @@ const H = $`
           }
         ) : /* @__PURE__ */ s.jsx(m, { children: n }))
       ] }),
-      x && /* @__PURE__ */ s.jsx(ee, { color: "neutral-50", mt: 0, children: x })
+      x ? /* @__PURE__ */ s.jsx(ee, { color: "neutral-50", mt: 0, children: x }) : null
     ] });
   }
 ), be = 20, q = (o, c) => Math.round(o / c) * c, U = (o, c, x, v) => (o = q(o, v), o < c ? c : o > x ? x : o), fe = le(
@@ -483,7 +483,7 @@ const H = $`
     }, [w, A]), F(() => {
       !isNaN(p) && p !== w && p && (T(p), g(p));
     }, [p]), /* @__PURE__ */ s.jsxs(m, { display: "flex", flexDirection: "column", position: "relative", ref: J, children: [
-      v && /* @__PURE__ */ s.jsx(ae, { as: "label", variant: "sm", children: v }),
+      v ? /* @__PURE__ */ s.jsx(ae, { as: "label", variant: "sm", children: v }) : null,
       /* @__PURE__ */ s.jsxs(m, { alignItems: "center", display: "flex", gap: "sm", children: [
         (b === "inline" || b === "left-field") && (b === "left-field" ? /* @__PURE__ */ s.jsx(
           W,
@@ -520,8 +520,8 @@ const H = $`
               ...G
             }
           ),
-          R && /* @__PURE__ */ s.jsx(Y, { isVisible: d, ref: M, children: /* @__PURE__ */ s.jsx(Z, { children: w }) }),
-          E && /* @__PURE__ */ s.jsx(m, { h: 24, ml: 10, mr: 10, mt: 5, position: "relative", children: E.reduce((r, f) => r.includes(f) ? r : [...r, f], []).filter((r) => r >= i && r <= n).map((r, f) => /* @__PURE__ */ s.jsx(ue, { left: `${A(r)}%`, children: /* @__PURE__ */ s.jsx(de, { children: r }) }, `${r}-${f}`)) })
+          R ? /* @__PURE__ */ s.jsx(Y, { isVisible: d, ref: M, children: /* @__PURE__ */ s.jsx(Z, { children: w }) }) : null,
+          E ? /* @__PURE__ */ s.jsx(m, { h: 24, ml: 10, mr: 10, mt: 5, position: "relative", children: E.reduce((r, f) => r.includes(f) ? r : [...r, f], []).filter((r) => r >= i && r <= n).map((r, f) => /* @__PURE__ */ s.jsx(ue, { left: `${A(r)}%`, children: /* @__PURE__ */ s.jsx(de, { children: r }) }, `${r}-${f}`)) }) : null
         ] }),
         (b === "inline" || b === "right-field") && (b === "right-field" ? /* @__PURE__ */ s.jsx(
           W,
@@ -539,7 +539,7 @@ const H = $`
           }
         ) : /* @__PURE__ */ s.jsx(m, { children: n }))
       ] }),
-      x && /* @__PURE__ */ s.jsx(ee, { color: "neutral-50", mt: 0, children: x })
+      x ? /* @__PURE__ */ s.jsx(ee, { color: "neutral-50", mt: 0, children: x }) : null
     ] });
   }
 );

package/dist/Swiper.mjs

@@ -394,7 +394,7 @@ const $t = /* @__PURE__ */ ft(bt), k = (r = 3, e, a) => {
       at,
       {
         "aria-label": "Previous slide",
-        "data-testid": e && `${e}-prev-button`,
+        "data-testid": e ? `${e}-prev-button` : null,
         disabled: !U,
         left: 10,
         onClick: _,
@@ -411,7 +411,7 @@ const $t = /* @__PURE__ */ ft(bt), k = (r = 3, e, a) => {
       at,
       {
         "aria-label": "Next slide",
-        "data-testid": e && `${e}-next-button`,
+        "data-testid": e ? `${e}-next-button` : null,
         disabled: !q,
         onClick: F,
         position: "absolute",
@@ -428,7 +428,7 @@ const $t = /* @__PURE__ */ ft(bt), k = (r = 3, e, a) => {
       yt,
       {
         className: "swiper-pagination",
-        "data-testid": e && `${e}-pagination`,
+        "data-testid": e ? `${e}-pagination` : null,
         role: "tablist",
         withPagination: L,
         children: m.length > 1 && m.map((l, s) => {

package/dist/TimePicker.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { j as p } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { useState as x, useEffect as j } from "react";
-import { f as I, g as L, D as O, a as U, c as W, b as _ } from "./CustomPopper-CZt4RioF.mjs";
+import { f as I, g as L, D as O, a as U, c as W, b as _ } from "./CustomPopper-B2Cqfph4.mjs";
 import { forwardRef as $ } from "./System.mjs";
 import q from "@xstyled/styled-components";
 const G = q.div`

package/dist/Toast.mjs

@@ -171,7 +171,7 @@ const ot = x($)(
         ref: n,
         variant: o,
         children: [
-          s && /* @__PURE__ */ d.jsx(
+          s ? /* @__PURE__ */ d.jsx(
             M,
             {
               dataTestId: a,
@@ -180,7 +180,7 @@ const ot = x($)(
               right: "sm",
               top: "sm"
             }
-          ),
+          ) : null,
           /* @__PURE__ */ d.jsx($, { pr: "xl", children: t })
         ]
       }
@@ -191,8 +191,8 @@ N.displayName = "Growl";
 const G = D(
   ({ children: t, cta: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default", ...n }, a) => /* @__PURE__ */ d.jsx(at, { icon: i, ref: a, variant: o, ...n, children: /* @__PURE__ */ d.jsxs($, { alignItems: "center", display: "flex", gap: "sm", children: [
     t,
-    e && /* @__PURE__ */ d.jsx(nt, { variant: o, children: e }),
-    s && /* @__PURE__ */ d.jsx(M, { onClick: r, size: "xs" })
+    e ? /* @__PURE__ */ d.jsx(nt, { variant: o, children: e }) : null,
+    s ? /* @__PURE__ */ d.jsx(M, { onClick: r, size: "xs" }) : null
   ] }) })
 ), lt = D((t, e) => /* @__PURE__ */ d.jsx(_, { flexShrink: 0, ref: e, size: "xs", variant: "ghost", ...t }));
 G.displayName = "Snackbar";

package/dist/Toggle.mjs

@@ -2,8 +2,8 @@
 import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { C as f, a as $ } from "./index-5HBq1O6Z.mjs";
 import { shouldForwardProp as g, forwardRef as c } from "./System.mjs";
-import r, { th as t, system as h, css as i } from "@xstyled/styled-components";
-const u = r(f).withConfig({ shouldForwardProp: g })(
+import r, { th as t, system as u, css as i } from "@xstyled/styled-components";
+const h = r(f).withConfig({ shouldForwardProp: g })(
   ({ order: e = "-1", size: o }) => i`
     ${t("toggles.item.default")};
     ${t(`toggles.item.sizes.${o}`)};
@@ -52,7 +52,7 @@ const u = r(f).withConfig({ shouldForwardProp: g })(
       }
     }
 
-    ${h};
+    ${u};
   `
 ), x = r.divBox`
   position: relative;
@@ -82,11 +82,11 @@ const u = r(f).withConfig({ shouldForwardProp: g })(
     `}
   `
 ), w = c(
-  ({ checked: e, checkedIcon: o, onClick: n, size: a = "xs", uncheckedIcon: l, ...d }, p) => {
-    const m = o && l;
-    return /* @__PURE__ */ s.jsxs(x, { onClick: n, children: [
-      m && /* @__PURE__ */ s.jsx(b, { checked: e, onClick: n, size: a, children: e ? o : l }),
-      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: u, ref: p, size: a })
+  ({ checked: e, checkedIcon: o, onClick: l, size: n = "xs", uncheckedIcon: a, ...d }, p) => {
+    const m = o && a;
+    return /* @__PURE__ */ s.jsxs(x, { onClick: l, children: [
+      m ? /* @__PURE__ */ s.jsx(b, { checked: e, onClick: l, size: n, children: e ? o : a }) : null,
+      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: h, ref: p, size: n })
     ] });
   }
 );

package/dist/WuiProvider.mjs

@@ -463,7 +463,7 @@ const d = p(
   theme: a,
   useReset: s
 }) => /* @__PURE__ */ r.jsx(m, { theme: a, children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-  e && /* @__PURE__ */ r.jsx(d, { useReset: s }),
+  e ? /* @__PURE__ */ r.jsx(d, { useReset: s }) : null,
   o ? /* @__PURE__ */ r.jsx(y, { reactRootId: n, children: t }) : t
 ] }) }), E = d;
 F.displayName = "WuiProvider";

package/dist/types/components/Alert/theme.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../theme';
-export type Size = 'md' | 'sm';
+export type Size = 'sm' | 'md';
 export type ThemeAlerts = {
     default: CSSObject;
     sizes: Record<Size, CSSObject>;

package/dist/types/components/AspectRatio/styles.d.ts

@@ -1,2 +1,3 @@
-import { AspectRatioOptions } from '.';
-export declare const AspectRatio: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, AspectRatioOptions>> & string;
+export declare const AspectRatio: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, {
+    ratio: number;
+}>> & string;

package/dist/types/components/Avatar/theme.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from '@xstyled/styled-components';
 import { ThemeColorTokens, ThemeValues } from '../theme';
 import { LiteralUnion } from '../utils';
 export type AvatarColors = LiteralUnion<ThemeColorTokens>;
-export type Size = 'lg' | 'md' | 'sm' | 'xl' | 'xxl';
+export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type ThemeAvatars = {
     sizes: Record<Size, string>;
     text: CSSObject;

package/dist/types/components/Button/theme.d.ts

@@ -1,7 +1,7 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../theme';
 import { ThemeFocus } from '../../theme/focus';
-export type Size = 'lg' | 'md' | 'sm' | 'xs';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export type ThemeButtons = Record<'active', Record<'ai' | 'danger' | Variant, CommonAttributesButton>> & Record<'ai' | 'danger' | Variant, CommonAttributesButton> & Record<'disabled', {
     '&:focus': ReturnType<ThemeFocus>;
 } & CommonAttributesButton> & Record<'focus', Record<'ai' | 'danger' | Variant, unknown>> & Record<'hover', Record<'ai' | 'danger' | Variant, CommonAttributesButton>> & Record<'icon', Record<Icon, Record<Size, string>>> & Record<'sizes', Record<Size, SizeAttributesButton>>;

package/dist/types/components/ButtonGroup/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { ReactElement } from 'react';
 import { Button, ButtonProps } from '../Button';
 import { CreateWuiProps } from '../System';
 export interface ButtonGroupOptions {
@@ -10,6 +10,6 @@ export interface ButtonGroupOptions {
 }
 export type ButtonGroupProps = CreateWuiProps<'div', ButtonGroupOptions>;
 type ChildrenProps = ChildType | ChildType[];
-type ChildType = boolean | null | React.ReactElement<typeof Button> | undefined;
+type ChildType = boolean | null | ReactElement<typeof Button> | undefined;
 export declare const ButtonGroup: import('../System').CreateWuiComponent<"div", ButtonGroupProps>;
 export {};

package/dist/types/components/Icon/theme.d.ts

@@ -2,6 +2,6 @@ import { ThemeValues } from '../theme';
 import { LiteralUnion } from '../utils';
 export type Size = LiteralUnion<IconSize, number | string>;
 export type ThemeIcons = Record<IconSize, string>;
-type IconSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl';
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export declare const getIcons: ({ toRem }: ThemeValues) => ThemeIcons;
 export {};

package/dist/types/components/Loader/theme.d.ts

@@ -2,6 +2,6 @@ import { ThemeValues } from '../theme';
 import { LiteralUnion } from '../utils';
 export type Size = LiteralUnion<LoaderSize, number | string>;
 export type ThemeLoaders = Record<LoaderSize, string>;
-type LoaderSize = 'lg' | 'md' | 'sm' | 'xs';
+type LoaderSize = 'xs' | 'sm' | 'md' | 'lg';
 export declare const getLoaders: ({ toRem }: ThemeValues) => ThemeLoaders;
 export {};

package/dist/types/components/Modal/theme.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../theme';
-export type Size = 'auto' | 'lg' | 'md' | 'sm' | 'xs';
+export type Size = 'auto' | 'xs' | 'sm' | 'md' | 'lg';
 export type ThemeModals = {
     backdrop: CSSObject;
     body: CSSObject;

package/dist/types/components/Swiper/index.d.ts

@@ -41,7 +41,7 @@ export declare const useSwiper: (options?: UseSwiperProps) => {
     firstSlideToShow: number;
     fullWidth: boolean;
     id: string;
-    navigationSize: "md" | "sm" | "xs" | "lg";
+    navigationSize: "sm" | "md" | "xs" | "lg";
     ref: import('react').MutableRefObject<HTMLUListElement | null>;
     setCurrentPage: import('react').Dispatch<import('react').SetStateAction<number>>;
     setShowLeftArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;

package/dist/types/components/Swiper/styles.d.ts

@@ -16,7 +16,7 @@ export declare const Arrow: import('styled-components/dist/types').IStyledCompon
     firstSlideToShow: number;
     fullWidth: boolean;
     id: string;
-    navigationSize: "md" | "sm" | "xs" | "lg";
+    navigationSize: "sm" | "md" | "xs" | "lg";
     ref: import('react').MutableRefObject<HTMLUListElement | null>;
     setCurrentPage: import('react').Dispatch<import('react').SetStateAction<number>>;
     setShowLeftArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;
@@ -49,7 +49,7 @@ export declare const Pagination: import('styled-components/dist/types').IStyledC
     firstSlideToShow: number;
     fullWidth: boolean;
     id: string;
-    navigationSize: "md" | "sm" | "xs" | "lg";
+    navigationSize: "sm" | "md" | "xs" | "lg";
     ref: import('react').MutableRefObject<HTMLUListElement | null>;
     setCurrentPage: import('react').Dispatch<import('react').SetStateAction<number>>;
     setShowLeftArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;
@@ -84,7 +84,7 @@ export declare const Bullet: import('styled-components/dist/types').IStyledCompo
     firstSlideToShow: number;
     fullWidth: boolean;
     id: string;
-    navigationSize: "md" | "sm" | "xs" | "lg";
+    navigationSize: "sm" | "md" | "xs" | "lg";
     ref: import('react').MutableRefObject<HTMLUListElement | null>;
     setCurrentPage: import('react').Dispatch<import('react').SetStateAction<number>>;
     setShowLeftArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;
@@ -117,7 +117,7 @@ export declare const Container: import('styled-components/dist/types').IStyledCo
     firstSlideToShow: number;
     fullWidth: boolean;
     id: string;
-    navigationSize: "md" | "sm" | "xs" | "lg";
+    navigationSize: "sm" | "md" | "xs" | "lg";
     ref: import('react').MutableRefObject<HTMLUListElement | null>;
     setCurrentPage: import('react').Dispatch<import('react').SetStateAction<number>>;
     setShowLeftArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;

package/dist/types/components/Tabs/theme.d.ts

@@ -23,6 +23,6 @@ export type ThemeTabs = {
         vertical: CSSObject;
     };
 };
-type Size = 'md' | 'sm';
+type Size = 'sm' | 'md';
 export declare const getTabs: (theme: ThemeValues) => ThemeTabs;
 export {};

package/dist/types/components/Tag/theme.d.ts

@@ -1,7 +1,7 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../theme';
 import { ThemeSecondaryColors } from '../../theme/colors';
-export type Size = 'md' | 'sm' | 'xs';
+export type Size = 'xs' | 'sm' | 'md';
 export type ThemeTags = {
     default: CSSObject;
     hover: Record<Variant, CSSObject>;

package/dist/types/components/Toggle/theme.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../theme';
-export type Size = 'md' | 'sm' | 'xs';
+export type Size = 'xs' | 'sm' | 'md';
 export type ThemeToggles = {
     after: Record<'sizes' | State, CSSObject>;
     icon: Record<'position' | 'sizes', CSSObject>;

package/dist/types/components/VariantIcon/theme.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../theme';
-export type Size = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type ThemeVariantIcon = Record<Variant, CSSObject>;
 export type Variant = 'ai' | 'danger' | 'default' | 'info' | 'success' | 'warning';
 export declare const getVariantIcon: (theme: ThemeValues) => ThemeVariantIcon;