welcome-ui 7.4.0 → 8.0.0-alpha.0

package/dist/Pagination.mjs

@@ -1,35 +1,35 @@
 "use client";
-import i, { useMemo as j, useRef as y, useCallback as R } from "react";
-import m, { system as z, th as E, css as h } from "@xstyled/styled-components";
-import { h as G } from "./hide-focus-rings-root-BNyva1yb.mjs";
+import i, { useMemo as j, useRef as R, useCallback as y } from "react";
+import m, { th as x, css as E } from "@xstyled/styled-components";
+import { h as z } from "./hide-focus-rings-root-BNyva1yb.mjs";
 import "./Icon.mjs";
-import { L as F } from "./index-BpRjq7lj.mjs";
-import { R as M } from "./index-BRDOakbf.mjs";
-import { forwardRef as S } from "./System.mjs";
-const a = 5, q = 3;
+import { L as G } from "./index-BpRjq7lj.mjs";
+import { R as F } from "./index-BRDOakbf.mjs";
+import { forwardRef as M } from "./System.mjs";
+const a = 5, S = 3;
 function d(e, t) {
   return Array.from({ length: e }, (r, s) => t(s));
 }
-function J(e, t) {
+function q(e, t) {
   return e.reduce((r, s, c) => {
     const n = [];
     return n.push(...r), n.push(...s), s.length && c < e.length - 1 && n.push(t), n;
   }, []);
 }
-function K(e, t) {
+function J(e, t) {
   if (e < a) return "before";
   if (e >= a && e <= t - a + 1) return "center";
   if (e > t - a + 1) return "after";
 }
-function O({ page: e, pageCount: t, rangeDisplay: r }) {
+function K({ page: e, pageCount: t, rangeDisplay: r }) {
   return j(() => {
     if (t <= r || t <= a + 1)
       return d(t, (l) => l + 1);
-    const s = K(e, t), c = s === "before" ? d(a, (l) => l + 1) : [1], n = s === "center" ? d(q, (l) => l + e - 1) : [], u = s === "after" ? d(a, (l) => l + t - a + 1) : [t];
-    return J([c, n, u], "-");
+    const s = J(e, t), c = s === "before" ? d(a, (l) => l + 1) : [1], n = s === "center" ? d(S, (l) => l + e - 1) : [], u = s === "after" ? d(a, (l) => l + t - a + 1) : [t];
+    return q([c, n, u], "-");
   }, [e, t, r]);
 }
-const Q = m.nav(z), U = m.ul`
+const O = m.navBox``, Q = m.ulBox`
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -42,14 +42,14 @@ const Q = m.nav(z), U = m.ul`
   &:last-child {
     margin-right: 0;
   }
-`, V = m.span`
-  ${E("paginations.default")};
+`, U = m.span`
+  ${x("paginations.default")};
   display: flex;
   justify-content: center;
   align-items: center;
-`, A = h`
-  ${E("paginations.default")};
-  ${E("paginations.item")};
+`, p = E`
+  ${x("paginations.default")};
+  ${x("paginations.item")};
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -62,23 +62,23 @@ const Q = m.nav(z), U = m.ul`
     transition: none;
   }
 
-  [${G}] &:focus {
+  [${z}] &:focus {
     box-shadow: none;
   }
-`, p = m.aBox(
-  (e) => h`
-    ${A};
-    ${e["aria-disabled"] && h`
+`, B = m.aBox(
+  (e) => E`
+    ${p};
+    ${e["aria-disabled"] && E`
       color: beige-70;
       background-color: beige-40;
     `}
   `
-), W = m.aBox(
-  (e) => h`
-    ${A};
-    ${e["aria-current"] && E("paginations.active")}
+), V = m.aBox(
+  (e) => E`
+    ${p};
+    ${e["aria-current"] && x("paginations.active")}
   `
-), g = S(
+), C = M(
   ({
     "aria-label": e,
     dataTestId: t,
@@ -88,17 +88,17 @@ const Q = m.nav(z), U = m.ul`
     page: n,
     pageCount: u,
     rangeDisplay: l = 5,
-    rightArrow: D,
-    ...L
-  }, _) => {
-    const w = O({ page: n, pageCount: u, rangeDisplay: l }), k = y(null), v = y(null), x = n === 1, $ = n === u, B = R(
+    rightArrow: A,
+    ...D
+  }, L) => {
+    const w = K({ page: n, pageCount: u, rangeDisplay: l }), k = R(null), v = R(null), h = n === 1, $ = n === u, N = y(
       (o) => {
         o.preventDefault();
         const f = n - 1;
         f === 1 && k.current.focus(), c(f);
       },
       [n, c]
-    ), N = R(
+    ), P = y(
       (o) => {
         o.preventDefault();
         const f = n + 1;
@@ -107,54 +107,54 @@ const Q = m.nav(z), U = m.ul`
       [n, u, c]
     );
     return /* @__PURE__ */ i.createElement(
-      Q,
+      O,
       {
         "aria-label": e,
         "data-testid": t,
-        ref: _,
+        ref: L,
         role: "navigation",
-        ...L
+        ...D
       },
-      /* @__PURE__ */ i.createElement(U, null, /* @__PURE__ */ i.createElement(b, null, /* @__PURE__ */ i.createElement(
-        p,
+      /* @__PURE__ */ i.createElement(Q, null, /* @__PURE__ */ i.createElement(b, null, /* @__PURE__ */ i.createElement(
+        B,
         {
-          "aria-disabled": x,
+          "aria-disabled": h,
           "data-testid": t ? `${t}-arrow-prev` : void 0,
-          href: r ? r(x ? n : n - 1) : "",
-          onClick: x ? void 0 : B,
+          href: r ? r(h ? n : n - 1) : "",
+          onClick: h ? void 0 : N,
           ref: k
         },
-        s || /* @__PURE__ */ i.createElement(F, { size: "sm" })
+        s || /* @__PURE__ */ i.createElement(G, { size: "sm" })
       )), w.map(
         (o, f) => o === "-" ? (
           // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ i.createElement(b, { key: `${f}-` }, /* @__PURE__ */ i.createElement(V, null, "..."))
+          /* @__PURE__ */ i.createElement(b, { key: `${f}-` }, /* @__PURE__ */ i.createElement(U, null, "..."))
         ) : /* @__PURE__ */ i.createElement(b, { key: o }, /* @__PURE__ */ i.createElement(
-          W,
+          V,
           {
             "aria-current": o === n,
             "data-testid": t ? `${t}-${o}` : void 0,
             href: r ? r(o) : "",
-            onClick: (P) => {
-              P.preventDefault(), c(o);
+            onClick: (_) => {
+              _.preventDefault(), c(o);
             }
           },
           o
         ))
       ), /* @__PURE__ */ i.createElement(b, null, /* @__PURE__ */ i.createElement(
-        p,
+        B,
         {
           "aria-disabled": $,
           "data-testid": t ? `${t}-arrow-next` : void 0,
           href: r ? r($ ? n : n + 1) : "",
-          onClick: $ ? void 0 : N,
+          onClick: $ ? void 0 : P,
           ref: v
         },
-        D || /* @__PURE__ */ i.createElement(M, { size: "sm" })
+        A || /* @__PURE__ */ i.createElement(F, { size: "sm" })
       )))
     );
   }
 );
 export {
-  g as Pagination
+  C as Pagination
 };

package/dist/Picker.mjs

@@ -7,16 +7,16 @@ import { Label as E } from "./Label.mjs";
 import { FieldGroup as b } from "./FieldGroup.mjs";
 import { Box as w } from "./Box.mjs";
 import { u as x, R as P } from "./radio-group-CGC6DTFJ.mjs";
-const _ = u(y).withConfig({ shouldForwardProp: $ })`
+const h = u(y).withConfig({ shouldForwardProp: $ })`
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
 
   ${R};
-`, h = k(
-  ({ dataTestId: r, label: m, name: i, onChange: a, options: s, required: c, value: l, ...p }, f) => {
-    const d = x({ defaultValue: l }), n = (o) => {
+`, F = k(
+  ({ dataTestId: t, label: l, name: i, onChange: a, options: s, required: c, value: m, ...p }, f) => {
+    const d = x({ defaultValue: m }), n = (o) => {
       o.stopPropagation(), a && a(o);
     };
     return /* @__PURE__ */ e.createElement(
@@ -24,27 +24,27 @@ const _ = u(y).withConfig({ shouldForwardProp: $ })`
       {
         ...p,
         as: P,
-        dataTestId: r,
+        dataTestId: t,
         mb: 0,
         ref: f,
         required: c,
         store: d
       },
-      /* @__PURE__ */ e.createElement(w, { display: "flex", flexWrap: "wrap" }, s.map(({ element: o, value: t }) => /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement(w, { display: "flex", flexWrap: "wrap" }, s.map(({ element: o, value: r }) => /* @__PURE__ */ e.createElement(
         E,
         {
           checkableField: !0,
-          dataTestId: r && `${r}-item-${i}-${t}`,
-          key: `${m}-${i}-${t}`,
+          dataTestId: t && `${t}-item-${i}-${r}`,
+          key: `${l}-${i}-${r}`,
           onClick: n
         },
-        /* @__PURE__ */ e.createElement(_, { name: i, value: t }),
-        /* @__PURE__ */ e.createElement(o, { selected: l === t })
+        /* @__PURE__ */ e.createElement(h, { name: i, value: r }),
+        /* @__PURE__ */ e.createElement(o, { selected: m === r })
       )))
     );
   }
 );
-h.displayName = "Picker";
+F.displayName = "Picker";
 export {
-  h as Picker
+  F as Picker
 };

package/dist/Popover.mjs

@@ -83,16 +83,16 @@ const y = a($)`
     },
     /* @__PURE__ */ r.createElement(H, null)
   ));
-}, _ = i(
+}, k = i(
   ({ children: t, onClose: o, store: e, ...n }, s) => {
     const { withCloseButton: c } = e;
     return /* @__PURE__ */ r.createElement(f, { $withCloseButton: c, ref: s, store: e, ...n }, /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t));
   }
-), G = Object.assign(_, {
+), G = Object.assign(k, {
   Content: d,
   Title: u,
   Trigger: Z
-}), k = i(
+}), z = i(
   ({ children: t, onClose: o, store: e, ...n }, s) => {
     const { withCloseButton: c } = e;
     return /* @__PURE__ */ r.createElement(
@@ -107,7 +107,7 @@ const y = a($)`
       /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
     );
   }
-), J = Object.assign(k, {
+), J = Object.assign(z, {
   Content: d,
   Title: u,
   Trigger: A

package/dist/Radio.mjs

@@ -1,15 +1,14 @@
 "use client";
 import t from "react";
-import o, { css as $, th as i, system as f } from "@xstyled/styled-components";
-import { d as x } from "./field-styles-DLIhqG_8.mjs";
-import { Box as k } from "./Box.mjs";
-import { shouldForwardProp as w, forwardRef as y } from "./System.mjs";
-import { Label as E } from "./Label.mjs";
-import { R } from "./NLEBE274-C94QU78N.mjs";
-import { Hint as C } from "./Hint.mjs";
-const L = o(R).withConfig({ shouldForwardProp: w })(
-  ({ order: e = "-1", size: r, variant: a }) => $`
-    ${x({ size: r, variant: a })};
+import o, { css as g, th as i, system as x } from "@xstyled/styled-components";
+import { d as $ } from "./field-styles-DLIhqG_8.mjs";
+import { shouldForwardProp as k, forwardRef as w } from "./System.mjs";
+import { Label as y } from "./Label.mjs";
+import { R as E } from "./NLEBE274-C94QU78N.mjs";
+import { Hint as R } from "./Hint.mjs";
+const C = o(E).withConfig({ shouldForwardProp: k })(
+  ({ order: e = "-1", size: r, variant: a }) => g`
+    ${$({ size: r, variant: a })};
     ${i("radios.default")}
     position: relative;
     padding: 0;
@@ -17,7 +16,7 @@ const L = o(R).withConfig({ shouldForwardProp: w })(
     cursor: pointer;
     border-radius: 50%;
     transition: medium;
-    ${f};
+    ${x};
 
     &::after {
       content: '';
@@ -47,17 +46,16 @@ const L = o(R).withConfig({ shouldForwardProp: w })(
       }
     }
   `
-), _ = o(E)`
+), L = o(y)`
   max-width: 100%;
   /** we need to reset margin-bottom from Label component */
   margin-bottom: 0 !important;
-  ${f};
-`, F = o.div`
+`, v = o.divBox`
   flex-shrink: 0;
   position: relative;
   align-items: center;
   display: flex;
-`, v = o(k)`
+`, F = o.divBox`
   display: flex;
   align-items: flex-start;
   gap: sm;
@@ -65,54 +63,54 @@ const L = o(R).withConfig({ shouldForwardProp: w })(
   input {
     margin-top: xs;
   }
-`, D = o.div`
+`, B = o.div`
   display: flex;
   flex-direction: column;
-`, H = y(
+`, D = w(
   ({
     dataTestId: e,
     disabled: r,
     disabledIcon: a,
-    flexDirection: p,
-    hint: n,
+    flexDirection: f,
+    hint: l,
     label: d,
-    maxWidth: u,
+    maxWidth: p,
     onChange: s,
-    onClick: m,
-    variant: c,
-    ...b
-  }, h) => {
-    const g = (l) => {
-      l.stopPropagation(), m && m(l), s && s(l);
+    onClick: c,
+    variant: m,
+    ...u
+  }, b) => {
+    const h = (n) => {
+      n.stopPropagation(), c && c(n), s && s(n);
     };
     return /* @__PURE__ */ t.createElement(
-      _,
+      L,
       {
         alignItems: "flex-start",
         checkableField: !0,
         disabled: r,
         disabledIcon: a,
         flexDirection: "column",
-        maxWidth: u,
-        onClick: g,
-        variant: c,
+        maxWidth: p,
+        onClick: h,
+        variant: m,
         withDisabledIcon: !1
       },
-      /* @__PURE__ */ t.createElement(v, { flexDirection: p }, /* @__PURE__ */ t.createElement(F, null, /* @__PURE__ */ t.createElement(
-        L,
+      /* @__PURE__ */ t.createElement(F, { flexDirection: f }, /* @__PURE__ */ t.createElement(v, null, /* @__PURE__ */ t.createElement(
+        C,
         {
           "data-testid": e,
           disabled: r,
           label: d,
-          ref: h,
-          variant: c,
-          ...b
+          ref: b,
+          variant: m,
+          ...u
         }
-      )), /* @__PURE__ */ t.createElement(D, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), n && /* @__PURE__ */ t.createElement(C, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, n)))
+      )), /* @__PURE__ */ t.createElement(B, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), l && /* @__PURE__ */ t.createElement(R, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, l)))
     );
   }
 );
-H.displayName = "Radio";
+D.displayName = "Radio";
 export {
-  H as Radio
+  D as Radio
 };

package/dist/RadioGroup.mjs

@@ -1,43 +1,41 @@
 "use client";
 import t from "react";
-import x, { css as y, system as b } from "@xstyled/styled-components";
-import { FieldGroup as G } from "./FieldGroup.mjs";
-import { Radio as _ } from "./Radio.mjs";
+import x, { css as b } from "@xstyled/styled-components";
+import { FieldGroup as y } from "./FieldGroup.mjs";
+import { Radio as G } from "./Radio.mjs";
 import { forwardRef as w } from "./System.mjs";
 import { u as E, R as V } from "./radio-group-CGC6DTFJ.mjs";
 const h = x.divBox(
-  ({ flexDirection: a }) => y`
+  ({ flexDirection: a }) => b`
     display: flex;
     flex-direction: ${a};
     flex-wrap: wrap;
     gap: md;
-
-    ${b};
   `
 ), k = w(
   ({
     dataTestId: a,
     flexDirection: i,
-    id: s,
-    label: m,
+    id: m,
+    label: s,
     maxWidth: o,
     name: u,
     onChange: r,
     options: f = [],
-    renderOption: c = _,
+    renderOption: c = G,
     required: p,
     value: v,
     ...d
   }, R) => {
-    const l = E({ defaultValue: v }), $ = l.useState("value"), n = (e) => {
+    const l = E({ defaultValue: v }), n = l.useState("value"), $ = (e) => {
       d.disabled || (l.setValue(e), r == null || r(e));
     };
     return /* @__PURE__ */ t.createElement(
-      G,
+      y,
       {
         as: V,
         dataTestId: a,
-        label: m,
+        label: s,
         mb: 0,
         ref: R,
         required: p,
@@ -46,15 +44,15 @@ const h = x.divBox(
       /* @__PURE__ */ t.createElement(h, { flexDirection: i }, f.map((e) => /* @__PURE__ */ t.createElement(
         c,
         {
-          checked: e.value === $,
+          checked: e.value === n,
           dataTestId: a ? `${a}-${e.value}` : void 0,
           hint: e.hint,
-          id: `${s || u}.${e.value}`,
+          id: `${m || u}.${e.value}`,
           key: e.value,
           label: e.label,
           maxWidth: o,
           name: u,
-          onChange: () => n(e.value),
+          onChange: () => $(e.value),
           value: e.value,
           ...d
         }

package/dist/RadioTab.mjs

@@ -1,17 +1,17 @@
 "use client";
-import d from "react";
-import a, { css as e, th as i, system as p } from "@xstyled/styled-components";
-import { d as u } from "./field-styles-DLIhqG_8.mjs";
-import { o as b } from "./overflow-ellipsis-DGV5Kgt-.mjs";
-import { shouldForwardProp as h, forwardRef as c } from "./System.mjs";
-import { R as g } from "./NLEBE274-C94QU78N.mjs";
-import { Button as y } from "./Button.mjs";
-const $ = a(g).withConfig({ shouldForwardProp: h })`
+import s from "react";
+import a, { css as e, th as i } from "@xstyled/styled-components";
+import { d as f } from "./field-styles-DLIhqG_8.mjs";
+import { o as u } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+import { shouldForwardProp as b, forwardRef as h } from "./System.mjs";
+import { R as c } from "./NLEBE274-C94QU78N.mjs";
+import { Button as g } from "./Button.mjs";
+const y = a(c).withConfig({ shouldForwardProp: b })`
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
-`, w = e`
+`, $ = e`
   margin-top: -${i.borderWidth("sm")};
 
   &:first-of-type {
@@ -23,7 +23,7 @@ const $ = a(g).withConfig({ shouldForwardProp: h })`
     border-top-right-radius: 0;
     border-top-left-radius: 0;
   }
-`, x = e`
+`, w = e`
   margin-left: -${i.borderWidth("sm")};
 
   &:first-of-type {
@@ -36,8 +36,8 @@ const $ = a(g).withConfig({ shouldForwardProp: h })`
     border-bottom-left-radius: 0;
   }
 `;
-a.label(
-  ({ checked: o, flexDirection: t, size: r, variant: s }) => e`
+a.labelBox(
+  ({ checked: o, flexDirection: t, size: r, variant: d }) => e`
     ${i("radioTabs.default")};
     flex: 1;
     display: flex;
@@ -52,14 +52,13 @@ a.label(
     cursor: pointer;
     transition: medium;
 
-    ${u({ size: r, variant: s })};
+    ${f({ size: r, variant: d })};
     ${o && e`
       ${i("radioTabs.checked")};
       z-index: 2;
     `};
-    ${t === "column" && w};
-    ${t === "row" && x};
-    ${p};
+    ${t === "column" && $};
+    ${t === "row" && w};
     padding-top: 0;
     padding-bottom: 0;
   `
@@ -69,28 +68,28 @@ a.div`
   position: relative;
 `;
 a.div`
-  ${b};
+  ${u};
   max-width: 100%;
 `;
-const R = c(
-  ({ checked: o, dataTestId: t, disabled: r, id: s, label: l, onChange: m, value: n }, f) => /* @__PURE__ */ d.createElement(
-    y,
+const x = h(
+  ({ checked: o, dataTestId: t, disabled: r, id: d, label: l, onChange: m, value: n }, p) => /* @__PURE__ */ s.createElement(
+    g,
     {
       as: "label",
       borderColor: !o && "neutral-30",
       className: "label",
       dataTestId: t,
       disabled: r,
-      ref: f,
+      ref: p,
       variant: o ? "primary" : "ghost"
     },
-    /* @__PURE__ */ d.createElement(
-      $,
+    /* @__PURE__ */ s.createElement(
+      y,
       {
         checked: o,
         "data-testid": t ? `${t}-input` : void 0,
         disabled: r,
-        id: s,
+        id: d,
         onChange: m,
         value: n
       }
@@ -98,7 +97,7 @@ const R = c(
     l
   )
 );
-R.displayName = "RadioTab";
+x.displayName = "RadioTab";
 export {
-  R as RadioTab
+  x as RadioTab
 };