welcome-ui 8.1.0-alpha.1 → 8.1.0-alpha.3

package/dist/InputText.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
-import u from "react";
+import n from "react";
 import { Box as _ } from "./Box.mjs";
 import { ClearButton as y } from "./ClearButton.mjs";
 import { IconWrapper as S, IconGroupWrapper as T } from "./Field.mjs";
@@ -9,11 +9,11 @@ import { c as $ } from "./create-event-rXDe5aCQ.mjs";
 import { d as k, F as A } from "./field-styles-BVlRlvuu.mjs";
 import D, { css as G } from "@xstyled/styled-components";
 const L = D.inputBox.withConfig({ shouldForwardProp: N })(
-  ({ iconPlacement: p, isClearable: i, size: d, transparent: t, variant: r }) => G`
+  ({ iconPlacement: p, isClearable: l, size: i, transparent: t, variant: r }) => G`
     ${k({
     iconPlacement: p,
-    isClearable: i,
-    size: d,
+    isClearable: l,
+    size: i,
     transparent: t,
     variant: r
   })};
@@ -22,27 +22,27 @@ const L = D.inputBox.withConfig({ shouldForwardProp: N })(
 ), O = W(
   ({
     autoFocus: p,
-    dataTestId: i,
-    disabled: d,
+    dataTestId: l,
+    disabled: i,
     icon: t,
     iconPlacement: r = "left",
-    isClearable: m,
-    name: l,
-    onBlur: n,
+    isClearable: d,
+    name: m,
+    onBlur: x,
     onChange: s,
     onFocus: c,
     onKeyDown: I,
     placeholder: a,
-    size: f = "md",
+    size: u = "md",
     transparent: j,
     type: h = "text",
-    value: x,
+    value: f,
     variant: E,
     ...v
   }, w) => {
-    const z = m && r === "right", B = t && r, e = A[f], F = () => {
+    const z = d && r === "right", B = t && r, e = A[u], F = () => {
       const R = $({
-        name: l,
+        name: m,
         value: ""
       });
       s == null || s(R);
@@ -52,31 +52,31 @@ const L = D.inputBox.withConfig({ shouldForwardProp: N })(
         L,
         {
           autoFocus: p,
-          "data-testid": i,
-          disabled: d,
+          "data-testid": l,
+          disabled: i,
           iconPlacement: !!t && r,
-          id: l,
-          isClearable: m,
-          name: l,
-          onBlur: n,
+          id: m,
+          isClearable: d,
+          name: m,
+          onBlur: x,
           onChange: s,
           onFocus: c,
           onKeyDown: I,
           placeholder: a,
           ref: w,
-          size: f,
+          size: u,
           transparent: j,
           type: h,
-          value: x,
+          value: f,
           variant: E,
           ...v
         }
       ),
-      B && !z && /* @__PURE__ */ o.jsx(S, { iconPlacement: r, size: e, children: u.cloneElement(t, { ...t.props, size: e }) }),
-      m && /* @__PURE__ */ o.jsxs(T, { size: e, children: [
-        x && /* @__PURE__ */ o.jsx(y, { onClick: F }),
-        r === "right" && t && u.cloneElement(t, { ...t.props, size: e })
-      ] })
+      B && !z ? /* @__PURE__ */ o.jsx(S, { iconPlacement: r, size: e, children: n.cloneElement(t, { ...t.props, size: e }) }) : null,
+      d ? /* @__PURE__ */ o.jsxs(T, { size: e, children: [
+        f ? /* @__PURE__ */ o.jsx(y, { onClick: F }) : null,
+        r === "right" && t ? n.cloneElement(t, { ...t.props, size: e }) : null
+      ] }) : null
     ] });
   }
 );

package/dist/Label.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { j as t } from "./jsx-runtime-B7I4PJ0H.mjs";
 import "./Icon.mjs";
-import { L as x } from "./index-SQQQ4dEE.mjs";
-import { shouldForwardProp as u, forwardRef as g } from "./System.mjs";
+import { L as u } from "./index-SQQQ4dEE.mjs";
+import { shouldForwardProp as x, forwardRef as g } from "./System.mjs";
 import { VariantIcon as w } from "./VariantIcon.mjs";
 import { w as y } from "./wrap-children-DBSD-X5-.mjs";
 import o, { th as b, css as l } from "@xstyled/styled-components";
-const n = o.labelBox.withConfig({ shouldForwardProp: u })(
+const n = o.labelBox.withConfig({ shouldForwardProp: x })(
   ({ required: e }) => l`
     position: relative;
     display: flex;
@@ -22,7 +22,7 @@ const n = o.labelBox.withConfig({ shouldForwardProp: u })(
         margin-right: sm;
       }
 
-      :last-child {
+      &:last-child {
         ${e && j};
       }
     }
@@ -65,7 +65,7 @@ const n = o.labelBox.withConfig({ shouldForwardProp: u })(
         ...c,
         children: [
           !e && /* @__PURE__ */ t.jsx(w, { icon: p, size: "sm", variant: r }),
-          i && h && /* @__PURE__ */ t.jsx(L, { children: s || /* @__PURE__ */ t.jsx(x, { size: "sm" }) }),
+          i && h ? /* @__PURE__ */ t.jsx(L, { children: s || /* @__PURE__ */ t.jsx(u, { size: "sm" }) }) : null,
           f
         ]
       }

package/dist/Link.mjs

@@ -1,13 +1,13 @@
 "use client";
 import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
-import l from "react";
+import h from "react";
 import "./Icon.mjs";
 import { E as f } from "./index-DvzWKxKE.mjs";
-import { shouldForwardProp as g, forwardRef as k } from "./System.mjs";
-import y, { th as i, typography as $, css as w } from "@xstyled/styled-components";
-import { UniversalLink as j } from "./UniversalLink.mjs";
-const E = y(j).withConfig({ shouldForwardProp: g })(
-  ({ isExternal: t, variant: n = "primary" }) => w`
+import { shouldForwardProp as g, forwardRef as y } from "./System.mjs";
+import k, { system as $, th as i, typography as w, css as j } from "@xstyled/styled-components";
+import { UniversalLink as E } from "./UniversalLink.mjs";
+const L = k(E).withConfig({ shouldForwardProp: g })(
+  ({ isExternal: t, variant: n = "primary" }) => j`
     display: inline-flex;
     flex-direction: row;
     align-items: center;
@@ -15,6 +15,7 @@ const E = y(j).withConfig({ shouldForwardProp: g })(
     line-height: 1.5;
     text-decoration: none;
     cursor: pointer;
+    ${$}
 
     > .wui-text {
       margin-right: -2px;
@@ -25,7 +26,7 @@ const E = y(j).withConfig({ shouldForwardProp: g })(
       ${i("links.default")};
       ${i(`links.${n}.default`)};
       ${t && i("links.withExternalLink")};
-      ${$};
+      ${w};
     }
 
     &:hover,
@@ -48,33 +49,33 @@ const E = y(j).withConfig({ shouldForwardProp: g })(
       margin-right: xs;
     }
   `
-), L = (t) => {
-  var n, r, o;
+), W = (t) => {
+  var n, r, e;
   return (
     // <span />
     (t == null ? void 0 : t.type) === "span" || // <Box as="span" />
     ((n = t == null ? void 0 : t.props) == null ? void 0 : n.as) === "span" || // <FormattedMessage />
-    ((r = t == null ? void 0 : t.props) == null ? void 0 : r.tagName) === "span" || ((o = t == null ? void 0 : t.props) == null ? void 0 : o["data-wui-link"]) === !0
+    ((r = t == null ? void 0 : t.props) == null ? void 0 : r.tagName) === "span" || ((e = t == null ? void 0 : t.props) == null ? void 0 : e["data-wui-link"]) === !0
   );
-}, d = (t) => typeof t == "object" ? L(t) : typeof t == "string", m = ({ children: t, isExternal: n }) => /* @__PURE__ */ s.jsxs("span", { className: "wui-text", children: [
+}, d = (t) => typeof t == "object" ? W(t) : typeof t == "string", m = ({ children: t, isExternal: n }) => /* @__PURE__ */ s.jsxs("span", { className: "wui-text", children: [
   t,
-  n && /* @__PURE__ */ s.jsx(f, { mb: "-2px", ml: "sm", size: "sm" })
-] }), W = k((t, n) => {
-  const { children: r, dataTestId: o, disabled: a, isExternal: e, variant: x = "primary", ...c } = t, h = d(r) ? /* @__PURE__ */ s.jsx(m, { isExternal: e, children: r }) : l.Children.map(r, (p) => d(p) ? /* @__PURE__ */ s.jsx(m, { isExternal: e, children: p }) : p);
+  n ? /* @__PURE__ */ s.jsx(f, { mb: "-2px", ml: "sm", size: "sm" }) : null
+] }), b = y((t, n) => {
+  const { children: r, dataTestId: e, disabled: a, isExternal: o, variant: x = "primary", ...l } = t, c = d(r) ? /* @__PURE__ */ s.jsx(m, { isExternal: o, children: r }) : h.Children.map(r, (p) => d(p) ? /* @__PURE__ */ s.jsx(m, { isExternal: o, children: p }) : p);
   return /* @__PURE__ */ s.jsx(
-    E,
+    L,
     {
-      "data-testid": o,
+      "data-testid": e,
       disabled: a,
-      isExternal: e,
+      isExternal: o,
       ref: n,
       variant: x,
-      ...c,
-      children: h
+      ...l,
+      children: c
     }
   );
 });
-W.displayName = "Link";
+b.displayName = "Link";
 export {
-  W as Link
+  b as Link
 };

package/dist/Modal.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
-import a, { css as h, th as l, up as J, system as K, useTheme as B } from "@xstyled/styled-components";
-import j, { useState as L, useMemo as Q, Children as F, useEffect as U, cloneElement as H } from "react";
+import a, { css as h, th as l, up as J, system as K, useTheme as w } from "@xstyled/styled-components";
+import F, { useState as L, useMemo as Q, Children as D, useEffect as U, cloneElement as H } from "react";
 import { Shape as X } from "./Shape.mjs";
-import { forwardRef as m } from "./System.mjs";
+import { forwardRef as c } from "./System.mjs";
 import { Box as $ } from "./Box.mjs";
 import { Text as x } from "./Text.mjs";
 import { StyledSwiper as Y } from "./Swiper.mjs";
@@ -37,7 +37,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     width: 100%;
     height: 100%;
   }
-`, v = a.divBox`
+`, j = a.divBox`
   transition: margin-top 250ms ease-in-out;
 
   > img,
@@ -54,7 +54,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
       max-width: 1600;
     }
   }
-`, st = a.div`
+`, nt = a.div`
   ${l("modals.default")};
   position: fixed;
   inset: 0;
@@ -70,20 +70,20 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     ${N};
   }
 
-  ${v} {
+  ${j} {
     margin-top: xl;
   }
 
   &[data-enter] {
     opacity: 1;
 
-    ${v} {
+    ${j} {
       margin-top: 0;
     }
   }
 `, z = a(x).attrs({ lines: 2, variant: "h4" })`
   margin: 0;
-`, b = "4rem", w = "6rem", nt = a.divBox`
+`, v = "4rem", b = "6rem", st = a.divBox`
   display: flex;
   flex-direction: column;
   border-radius: xxl;
@@ -92,24 +92,24 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   > img {
     width: auto;
     max-width: fit-content;
-    max-height: calc(100vh - 2 * 5rem - ${b});
+    max-height: calc(100vh - 2 * 5rem - ${v});
     flex-shrink: 0;
 
     @media (min-width: md) {
-      max-height: calc(100vh - 2 * 5rem - ${w});
+      max-height: calc(100vh - 2 * 5rem - ${b});
     }
   }
 
   ${T} {
     background-color: neutral-90;
-    max-height: calc(100vh - 2 * 5rem - ${b});
+    max-height: calc(100vh - 2 * 5rem - ${v});
 
     @media (min-width: md) {
-      max-height: calc(100vh - 2 * 5rem - ${w});
+      max-height: calc(100vh - 2 * 5rem - ${b});
     }
   }
-`, at = m(
-  ({ children: t, customContent: e, subtitle: r, title: s }, d) => /* @__PURE__ */ o.jsxs(nt, { ref: d, children: [
+`, at = c(
+  ({ children: t, customContent: e, subtitle: r, title: n }, d) => /* @__PURE__ */ o.jsxs(st, { ref: d, children: [
     t,
     /* @__PURE__ */ o.jsxs(
       $,
@@ -119,14 +119,14 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
         flexDirection: "column",
         flexShrink: 0,
         gap: "xxs",
-        h: { _: b, md: w },
+        h: { _: v, md: b },
         justifyContent: "center",
         px: { _: "md", md: "xl" },
         w: "100%",
         children: [
           e,
-          !e && r && /* @__PURE__ */ o.jsx(x, { variant: "subtitle-sm", children: r }),
-          !e && s && /* @__PURE__ */ o.jsx(z, { children: s })
+          !e && r ? /* @__PURE__ */ o.jsx(x, { variant: "subtitle-sm", children: r }) : null,
+          !e && n ? /* @__PURE__ */ o.jsx(z, { children: n }) : null
         ]
       }
     )
@@ -190,13 +190,13 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   `
 ), dt = a.sectionBox`
   ${l("modals.body")};
-`, mt = a.headerBox`
+`, ct = a.headerBox`
   position: sticky;
   top: 0;
   flex-shrink: 0;
   z-index: 1;
   ${l("modals.header")};
-`, ct = a(x)`
+`, mt = a(x)`
   ${l(".modals.header.subtitle")};
   margin-bottom: 0;
 `, ut = a.footerBox`
@@ -224,7 +224,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   }
 
   ${K}
-`, _ = m(
+`, _ = c(
   ({ hideOnInteractOutside: t, ...e }, r) => /* @__PURE__ */ o.jsx(
     I,
     {
@@ -242,14 +242,14 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   )
 );
 _.displayName = "Backdrop";
-const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE__ */ o.jsx($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 }, children: t }) }), gt = Object.assign(st, {
+const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE__ */ o.jsx($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 }, children: t }) }), gt = Object.assign(nt, {
   AssetWithTitle: at,
   Backdrop: _,
-  Content: v,
+  Content: j,
   Iframe: ft,
   Title: z
 }), A = ({ isOnHeader: t, ...e }) => {
-  const r = B();
+  const r = w();
   return /* @__PURE__ */ o.jsx(
     S,
     {
@@ -266,108 +266,108 @@ const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE_
       )
     }
   );
-}, O = m(
-  ({ children: t, store: e, withClosingButton: r = !0, ...s }, d) => {
-    const { borderWidths: u, space: c } = B(), [y, p] = L(!1), f = e.useState("contentElement"), k = e.useState("open"), i = Q(
-      () => F.map(t, (n) => {
-        if (j.isValidElement(n)) {
-          const g = n.type;
+}, O = c(
+  ({ children: t, store: e, withClosingButton: r = !0, ...n }, d) => {
+    const { borderWidths: u, space: m } = w(), [y, p] = L(!1), f = e.useState("contentElement"), B = e.useState("open"), i = Q(
+      () => D.map(t, (s) => {
+        if (F.isValidElement(s)) {
+          const g = s.type;
           return g.displayName ?? g.name ?? "";
         }
         return "";
       }),
       [t]
-    ), q = !(i != null && i.includes("Header")) && r, G = (n) => n === "Header" ? {
+    ), q = !(i != null && i.includes("Header")) && r, G = (s) => s === "Header" ? {
       // if the Modal have a Body but not a Footer || have a Footer but not a Body
-      pb: i != null && i.includes("Body") && !i.includes("Footer") || i != null && i.includes("Footer") && !i.includes("Body") ? c.lg : c.xxl
-    } : n === "Body" ? {
-      pb: i != null && i.includes("Footer") ? c.lg : null,
-      pr: i != null && i.includes("Header") ? c.xxl : null
-    } : n === "Footer" ? {
+      pb: i != null && i.includes("Body") && !i.includes("Footer") || i != null && i.includes("Footer") && !i.includes("Body") ? m.lg : m.xxl
+    } : s === "Body" ? {
+      pb: i != null && i.includes("Footer") ? m.lg : null,
+      pr: i != null && i.includes("Header") ? m.xxl : null
+    } : s === "Footer" ? {
       borderWidth: y ? u.sm : "0",
-      pt: i != null && i.includes("Header") || i != null && i.includes("Body") ? null : c.lg
+      pt: i != null && i.includes("Header") || i != null && i.includes("Body") ? null : m.lg
     } : {};
     return U(() => {
-      k ? f && p(f.scrollHeight > f.offsetHeight) : p(!1);
-    }, [e, k, f]), j.isValidElement(t) ? /* @__PURE__ */ o.jsxs($, { ref: d, ...s, children: [
+      B ? f && p(f.scrollHeight > f.offsetHeight) : p(!1);
+    }, [e, B, f]), /* @__PURE__ */ o.jsxs($, { ref: d, ...n, children: [
       q ? /* @__PURE__ */ o.jsx(A, {}) : null,
-      F.map(t, (n) => {
-        var C, D;
-        if (!n) return null;
-        const g = ((C = n == null ? void 0 : n.type) == null ? void 0 : C.displayName) || ((D = n == null ? void 0 : n.type) == null ? void 0 : D.name);
-        return H(n, {
+      D.map(t, (s) => {
+        var k, C;
+        if (!s) return null;
+        const g = ((k = s == null ? void 0 : s.type) == null ? void 0 : k.displayName) || ((C = s == null ? void 0 : s.type) == null ? void 0 : C.name);
+        return H(s, {
           ...G(g),
-          ...n.props
+          ...s.props
         });
       })
-    ] }) : null;
+    ] });
   }
 );
 O.displayName = "Content";
-const R = m(({ children: t, information: e, ...r }, s) => /* @__PURE__ */ o.jsxs(ut, { ref: s, w: "100%", ...r, children: [
-  t && /* @__PURE__ */ o.jsx(xt, { children: t }),
-  e && /* @__PURE__ */ o.jsxs(ht, { children: [
+const R = c(({ children: t, information: e, ...r }, n) => /* @__PURE__ */ o.jsxs(ut, { ref: n, w: "100%", ...r, children: [
+  t ? /* @__PURE__ */ o.jsx(xt, { children: t }) : null,
+  e ? /* @__PURE__ */ o.jsxs(ht, { children: [
     /* @__PURE__ */ o.jsx(x, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm", children: e.title }),
     /* @__PURE__ */ o.jsx(x, { color: "neutral-90", mb: "0", mt: "md", variant: "sm", children: e.subtitle })
-  ] })
+  ] }) : null
 ] }));
 R.displayName = "Footer";
-const V = m(({ icon: t, subtitle: e, title: r, ...s }, d) => /* @__PURE__ */ o.jsxs(mt, { ref: d, textAlign: t ? "center" : null, w: "100%", ...s, children: [
+const V = c(({ icon: t, subtitle: e, title: r, ...n }, d) => /* @__PURE__ */ o.jsxs(ct, { ref: d, textAlign: t ? "center" : null, w: "100%", ...n, children: [
   /* @__PURE__ */ o.jsx(A, { isOnHeader: !0 }),
   t,
   /* @__PURE__ */ o.jsx(x, { mb: e ? "lg" : 0, mt: t ? "xl" : 0, variant: "h4", children: r }),
-  e && /* @__PURE__ */ o.jsx(ct, { children: e })
+  e ? /* @__PURE__ */ o.jsx(mt, { children: e }) : null
 ] }));
 V.displayName = "Header";
 function zt(t) {
-  const { onClose: e, setOpen: r, ...s } = t || {};
+  const { onClose: e, setOpen: r, ...n } = t || {};
   return rt({
     animated: !0,
     setOpen: (u) => {
       !u && e && e(), r == null || r(u);
     },
-    ...s
+    ...n
   });
 }
-const $t = m(
-  ({ backdrop: t, hideOnInteractOutside: e, ...r }, s) => t === !0 ? /* @__PURE__ */ o.jsx(I, { hideOnInteractOutside: e, ref: s, ...r }) : j.isValidElement(t) ? H(t, {
+const $t = c(
+  ({ backdrop: t, hideOnInteractOutside: e, ...r }, n) => t === !0 ? /* @__PURE__ */ o.jsx(I, { hideOnInteractOutside: e, ref: n, ...r }) : F.isValidElement(t) ? H(t, {
     hideOnInteractOutside: e,
-    ref: s,
+    ref: n,
     ...r
   }) : null
-), yt = m(
+), yt = c(
   ({
     ariaLabel: t,
     /** for render property */
     as: e = lt,
     backdrop: r = !0,
-    children: s,
+    children: n,
     hideOnInteractOutside: d = !0,
     size: u = "lg",
-    store: c,
+    store: m,
     ...y
   }, p) => /* @__PURE__ */ o.jsx(
     ot,
     {
       "aria-label": t,
-      backdrop: r && /* @__PURE__ */ o.jsx($t, { backdrop: r, hideOnInteractOutside: d }),
+      backdrop: !!r && /* @__PURE__ */ o.jsx($t, { backdrop: r, hideOnInteractOutside: d }),
       hideOnInteractOutside: d,
       ref: p,
       render: /* @__PURE__ */ o.jsx(e, { size: u }),
-      store: c,
+      store: m,
       ...y,
-      children: s
+      children: n
     }
   )
-), P = m((t, e) => /* @__PURE__ */ o.jsx(dt, { ref: e, ...t }));
+), P = c((t, e) => /* @__PURE__ */ o.jsx(dt, { ref: e, ...t }));
 P.displayName = "Body";
 const jt = (t) => {
-  const { modals: e } = B();
+  const { modals: e } = w();
   return /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(X, { ...e.cover, ...t }) });
-}, vt = m(({ as: t, store: e, ...r }, s) => /* @__PURE__ */ o.jsx(
+}, vt = c(({ as: t, store: e, ...r }, n) => /* @__PURE__ */ o.jsx(
   it,
   {
-    ref: s,
+    ref: n,
     render: t ? (d) => /* @__PURE__ */ o.jsx(t, { ...d }) : void 0,
     store: e,
     ...r

package/dist/PasswordInput.mjs

@@ -16,7 +16,7 @@ const f = ({
   {
     "aria-controls": "password",
     "aria-expanded": `${!s}`,
-    dataTestId: o && `${o}-action`,
+    dataTestId: o ? `${o}-action` : void 0,
     onClick: r,
     shape: "circle",
     size: "xs",
@@ -26,8 +26,8 @@ const f = ({
   }
 ), w = x(
   ({ dataTestId: o, title: s, ...r }, e) => {
-    const [n, a] = c("password"), p = n === "password", i = () => {
-      a(p ? "text" : "password");
+    const [n, p] = c("password"), i = n === "password", a = () => {
+      p(i ? "text" : "password");
     };
     return /* @__PURE__ */ t.jsx(
       m,
@@ -38,8 +38,8 @@ const f = ({
           f,
           {
             dataTestId: o,
-            isHidden: p,
-            onClick: i,
+            isHidden: i,
+            onClick: a,
             title: s
           }
         ),

package/dist/Picker.mjs

@@ -15,25 +15,25 @@ const h = k(b).withConfig({ shouldForwardProp: j })`
 
   ${y};
 `, F = n(
-  ({ dataTestId: s, label: m, name: t, onChange: e, options: p, required: a, value: l, ...c }, d) => {
+  ({ dataTestId: s, label: m, name: t, onChange: e, options: p, required: d, value: l, ...a }, c) => {
     const f = w({ defaultValue: l }), x = (r) => {
       r.stopPropagation(), e == null || e(r);
     };
     return /* @__PURE__ */ o.jsx(
       R,
       {
-        ...c,
+        ...a,
         as: P,
         dataTestId: s,
         mb: 0,
-        ref: d,
-        required: a,
+        ref: c,
+        required: d,
         store: f,
         children: /* @__PURE__ */ o.jsx(u, { display: "flex", flexWrap: "wrap", children: p.map(({ element: r, value: i }) => /* @__PURE__ */ o.jsxs(
           $,
           {
             checkableField: !0,
-            dataTestId: s && `${s}-item-${t}-${i}`,
+            dataTestId: s ? `${s}-item-${t}-${i}` : void 0,
             onClick: x,
             children: [
               /* @__PURE__ */ o.jsx(h, { name: t, value: i }),

package/dist/Popover.mjs

@@ -5,7 +5,7 @@ import { Box as h } from "./Box.mjs";
 import { Button as x } from "./Button.mjs";
 import "./Icon.mjs";
 import { C as j } from "./index-BaLGEKs7.mjs";
-import i, { th as p, css as l, system as m } from "@xstyled/styled-components";
+import i, { th as p, css as l, system as u } from "@xstyled/styled-components";
 import { P, a as d } from "./QYJ6MIDR-DJ-vUdAM.mjs";
 import { P as $, H as C, a as w, u as H, b as B } from "./BYC7LY2E-CWSI38FM.mjs";
 const T = i(P)`
@@ -16,7 +16,7 @@ const T = i(P)`
   `
 ), v = i.div`
   ${p("popovers.content")};
-`, u = i.h6`
+`, m = i.h6`
   margin: 0;
   ${p("popovers.title")};
 `, f = i($)(
@@ -25,7 +25,7 @@ const T = i(P)`
     outline: none;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
-    ${m};
+    ${u};
 
     /* on open popover for animation */
     &[data-enter] {
@@ -33,17 +33,17 @@ const T = i(P)`
     }
 
     ${t && l`
-      ${u} {
+      ${m} {
         padding-right: 50;
       }
     `}
   `
 );
 i(d)`
-  ${m};
+  ${u};
 `;
 const y = i(C)`
-  ${m};
+  ${u};
 `, Z = {
   bottom: "rotateZ(360deg)",
   left: "rotateZ(90deg)",
@@ -62,7 +62,7 @@ const y = i(C)`
   return /* @__PURE__ */ e.jsxs(h, { position: "relative", children: [
     /* @__PURE__ */ e.jsx(A, { store: o }),
     t,
-    s && /* @__PURE__ */ e.jsx(
+    s ? /* @__PURE__ */ e.jsx(
       x,
       {
         flex: "0 0 auto",
@@ -76,7 +76,7 @@ const y = i(C)`
         variant: "secondary",
         children: /* @__PURE__ */ e.jsx(j, {})
       }
-    )
+    ) : null
   ] });
 }, L = c(
   ({ as: t, store: r, ...o }, n) => /* @__PURE__ */ e.jsx(
@@ -97,7 +97,7 @@ const y = i(C)`
   }
 ), J = Object.assign(k, {
   Content: v,
-  Title: u,
+  Title: m,
   Trigger: L
 }), z = c(
   ({ children: t, onClose: r, store: o, ...n }, s) => {
@@ -116,7 +116,7 @@ const y = i(C)`
   }
 ), K = Object.assign(z, {
   Content: v,
-  Title: u,
+  Title: m,
   Trigger: R
 }), N = ({
   animated: t = 150,