welcome-ui 8.1.1 → 8.2.0-alpha.0

package/dist/Popover.mjs

@@ -1,144 +1,151 @@
 "use client";
-import r from "react";
-import a, { th as l, css as p, system as m } from "@xstyled/styled-components";
-import { P as h, a as v } from "./QYJ6MIDR-Bb0O5xUM.mjs";
-import { P, H as $, a as C, u as w, b as E } from "./BYC7LY2E-B1IDizRs.mjs";
-import { forwardRef as i } from "./System.mjs";
+import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { forwardRef as c } from "./System.mjs";
+import { Box as h } from "./Box.mjs";
+import { Button as x } from "./Button.mjs";
 import "./Icon.mjs";
-import { C as H } from "./index-C7zM96J_.mjs";
-import { Box as B } from "./Box.mjs";
-import { Button as T } from "./Button.mjs";
-const b = a(h)`
-  color: ${l("popovers.default.backgroundColor")};
-`, x = a.svgBox(
-  ({ $transform: t }) => p`
+import { C as j } from "./index-BaLGEKs7.mjs";
+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)`
+  color: ${p("popovers.default.backgroundColor")};
+`, b = i.svgBox(
+  ({ $transform: t }) => l`
     transform: ${t};
   `
-), d = a.div`
-  ${l("popovers.content")};
-`, u = a.h6`
+), v = i.div`
+  ${p("popovers.content")};
+`, m = i.h6`
   margin: 0;
-  ${l("popovers.title")};
-`, f = a(P)(
-  ({ $withCloseButton: t }) => p`
-    ${l("popovers.default")};
+  ${p("popovers.title")};
+`, f = i($)(
+  ({ $withCloseButton: t }) => l`
+    ${p("popovers.default")};
     outline: none;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
-    ${m};
+    ${u};
 
     /* on open popover for animation */
     &[data-enter] {
       opacity: 1;
     }
 
-    ${t && p`
-      ${u} {
+    ${t && l`
+      ${m} {
         padding-right: 50;
       }
     `}
   `
 );
-a(v)`
-  ${m};
+i(d)`
+  ${u};
 `;
-const y = a($)`
-  ${m};
-`, Z = i(
-  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
-    v,
+const y = i(C)`
+  ${u};
+`, Z = {
+  bottom: "rotateZ(360deg)",
+  left: "rotateZ(90deg)",
+  right: "rotateZ(-90deg)",
+  top: "rotateZ(180deg)"
+}, A = ({ store: t }) => {
+  const r = t.useState("currentPlacement"), [o] = r.split("-"), n = Z[o];
+  return /* @__PURE__ */ e.jsx(T, { store: t, children: /* @__PURE__ */ e.jsxs(b, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ e.jsx("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }),
+    /* @__PURE__ */ e.jsx("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })
+  ] }) });
+}, g = ({ children: t, onClose: r, store: o }) => {
+  const n = () => {
+    r && r(), o == null || o.hide();
+  }, { withCloseButton: s } = o;
+  return /* @__PURE__ */ e.jsxs(h, { position: "relative", children: [
+    /* @__PURE__ */ e.jsx(A, { store: o }),
+    t,
+    s ? /* @__PURE__ */ e.jsx(
+      x,
+      {
+        flex: "0 0 auto",
+        ml: "md",
+        onClick: n,
+        position: "absolute",
+        right: 1,
+        shape: "square",
+        size: "xs",
+        top: 1,
+        variant: "secondary",
+        children: /* @__PURE__ */ e.jsx(j, {})
+      }
+    ) : null
+  ] });
+}, L = c(
+  ({ as: t, store: r, ...o }, n) => /* @__PURE__ */ e.jsx(
+    d,
     {
       ref: n,
-      render: t ? (s) => /* @__PURE__ */ r.createElement(t, { ...s }) : void 0,
-      store: o,
-      ...e
+      render: t ? (s) => /* @__PURE__ */ e.jsx(t, { ...s }) : void 0,
+      store: r,
+      ...o
     }
   )
-), A = i(
-  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(y, { store: o, ...e, forwardedAs: t, ref: n })
-), L = {
-  top: "rotateZ(180deg)",
-  right: "rotateZ(-90deg)",
-  bottom: "rotateZ(360deg)",
-  left: "rotateZ(90deg)"
-}, R = ({ store: t }) => {
-  const o = t.useState("currentPlacement"), [e] = o.split("-"), n = L[e];
-  return /* @__PURE__ */ r.createElement(b, { store: t }, /* @__PURE__ */ r.createElement(x, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ r.createElement("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }), /* @__PURE__ */ r.createElement("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })));
-}, g = ({ children: t, onClose: o, store: e }) => {
-  const n = () => {
-    o && o(), e == null || e.hide();
-  }, { withCloseButton: s } = e;
-  return /* @__PURE__ */ r.createElement(B, { position: "relative" }, /* @__PURE__ */ r.createElement(R, { store: e }), t, s && /* @__PURE__ */ r.createElement(
-    T,
-    {
-      flex: "0 0 auto",
-      ml: "md",
-      onClick: n,
-      position: "absolute",
-      right: 1,
-      shape: "square",
-      size: "xs",
-      top: 1,
-      variant: "secondary"
-    },
-    /* @__PURE__ */ r.createElement(H, null)
-  ));
-}, 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));
+), R = c(
+  ({ as: t, store: r, ...o }, n) => /* @__PURE__ */ e.jsx(y, { store: r, ...o, forwardedAs: t, ref: n })
+), k = c(
+  ({ children: t, onClose: r, store: o, ...n }, s) => {
+    const { withCloseButton: a } = o;
+    return /* @__PURE__ */ e.jsx(f, { $withCloseButton: a, ref: s, store: o, ...n, children: /* @__PURE__ */ e.jsx(g, { onClose: r, store: o, children: t }) });
   }
-), G = Object.assign(k, {
-  Content: d,
-  Title: u,
-  Trigger: Z
-}), z = i(
-  ({ children: t, onClose: o, store: e, ...n }, s) => {
-    const { withCloseButton: c } = e;
-    return /* @__PURE__ */ r.createElement(
+), J = Object.assign(k, {
+  Content: v,
+  Title: m,
+  Trigger: L
+}), z = c(
+  ({ children: t, onClose: r, store: o, ...n }, s) => {
+    const { withCloseButton: a } = o;
+    return /* @__PURE__ */ e.jsx(
       f,
       {
-        as: C,
-        store: e,
+        as: w,
+        store: o,
         ...n,
-        $withCloseButton: c,
-        ref: s
-      },
-      /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
+        $withCloseButton: a,
+        ref: s,
+        children: /* @__PURE__ */ e.jsx(g, { onClose: r, store: o, children: t })
+      }
     );
   }
-), J = Object.assign(z, {
-  Content: d,
-  Title: u,
-  Trigger: A
-}), K = ({
+), K = Object.assign(z, {
+  Content: v,
+  Title: m,
+  Trigger: R
+}), N = ({
   animated: t = 150,
-  withCloseButton: o = !1,
-  ...e
+  withCloseButton: r = !1,
+  ...o
 } = {}) => ({
-  ...w({
+  ...H({
     animated: t,
-    ...e
+    ...o
   }),
-  withCloseButton: o
-}), N = ({
+  withCloseButton: r
+}), Q = ({
   animated: t = 150,
-  hideTimeout: o = 300,
-  showTimeout: e = 500,
+  hideTimeout: r = 300,
+  showTimeout: o = 500,
   withCloseButton: n = !1,
   ...s
 } = {}) => ({
-  ...E({
+  ...B({
     animated: t,
-    hideTimeout: o,
-    showTimeout: e,
+    hideTimeout: r,
+    showTimeout: o,
     ...s
   }),
   withCloseButton: n
 });
 export {
-  G as Popover,
-  J as PopoverHover,
-  K as usePopover,
-  N as usePopoverHover
+  J as Popover,
+  K as PopoverHover,
+  N as usePopover,
+  Q as usePopoverHover
 };

package/dist/{QYJ6MIDR-Bb0O5xUM.mjs → QYJ6MIDR-DJ-vUdAM.mjs}

@@ -1,9 +1,10 @@
 "use client";
-import { u as E, b as C, P as N } from "./MTZPJQMC-CMjAwC0N.mjs";
-import { c as d, _ as m, d as P, e as x, g as i, f, h, i as w, t as l, z as V, F as j, G as z, b as R, E as O } from "./LVA2YJMS-DDEmK0pp.mjs";
+import { u as E, b as j, P as C } from "./MTZPJQMC-TybFZCho.mjs";
+import { c as d, _ as m, d as P, e as x, g as i, f, h, i as w, y as N, E as V, F as R, b as z, D as O } from "./LVA2YJMS-C-kJ1lkr.mjs";
 import { useMemo as T, useState as W } from "react";
-import { u as M } from "./AXB53BZF-BOEe01VW.mjs";
-var H = "div", _ = d(
+import { j as p } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { u as M } from "./AXB53BZF-XKOjjeWO.mjs";
+var H = "div", y = d(
   function(t) {
     var r = t, { store: e } = r, o = m(r, ["store"]);
     const s = E();
@@ -13,7 +14,7 @@ var H = "div", _ = d(
   }
 );
 f(function(t) {
-  const r = _(t);
+  const r = y(t);
   return h(H, r);
 });
 var g = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z", L = "div", v = 30, a = v / 2, B = {
@@ -24,26 +25,26 @@ var g = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,
 };
 function F(c) {
   const [t, r] = W(), e = c.useState("contentElement");
-  return j(() => {
+  return V(() => {
     if (!e) return;
-    const s = z(e).getComputedStyle(e);
+    const s = R(e).getComputedStyle(e);
     r(s);
   }, [e]), t;
 }
-var G = d(
+var I = d(
   function(t) {
     var r = t, { store: e, size: o = v } = r, s = m(r, ["store", "size"]);
-    const p = C();
-    e = e || p, w(
+    const l = j();
+    e = e || l, w(
       e,
       process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
     );
     const u = e.useState(
       (k) => k.currentPlacement.split("-")[0]
-    ), n = F(e), y = (n == null ? void 0 : n.getPropertyValue("background-color")) || "none", A = (n == null ? void 0 : n.getPropertyValue(`border-${u}-color`)) || "none", S = (n == null ? void 0 : n.getPropertyValue(`border-${u}-width`)) || "0px", $ = Number.parseInt(S) * 2 * (v / o), b = B[u], D = T(
-      () => /* @__PURE__ */ l.jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ l.jsxs("g", { transform: b, children: [
-        /* @__PURE__ */ l.jsx("path", { fill: "none", d: g }),
-        /* @__PURE__ */ l.jsx("path", { stroke: "none", d: g })
+    ), n = F(e), _ = (n == null ? void 0 : n.getPropertyValue("background-color")) || "none", A = (n == null ? void 0 : n.getPropertyValue(`border-${u}-color`)) || "none", S = (n == null ? void 0 : n.getPropertyValue(`border-${u}-width`)) || "0px", $ = Number.parseInt(S) * 2 * (v / o), b = B[u], D = T(
+      () => /* @__PURE__ */ p.jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ p.jsxs("g", { transform: b, children: [
+        /* @__PURE__ */ p.jsx("path", { fill: "none", d: g }),
+        /* @__PURE__ */ p.jsx("path", { stroke: "none", d: g })
       ] }) }),
       [b]
     );
@@ -59,39 +60,39 @@ var G = d(
         width: "1em",
         height: "1em",
         pointerEvents: "none",
-        fill: y,
+        fill: _,
         stroke: A,
         strokeWidth: $
       }, s.style)
-    }), V(s);
+    }), N(s);
   }
-), X = f(function(t) {
-  const r = G(t);
+), Y = f(function(t) {
+  const r = I(t);
   return h(L, r);
-}), I = "button", U = d(function(t) {
+}), U = "button", q = d(function(t) {
   var r = t, { store: e } = r, o = m(r, ["store"]);
   const s = E();
   e = e || s, w(
     e,
     process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
   );
-  const p = o.onClick, u = R((n) => {
-    e == null || e.setAnchorElement(n.currentTarget), p == null || p(n);
+  const l = o.onClick, u = z((n) => {
+    e == null || e.setAnchorElement(n.currentTarget), l == null || l(n);
   });
   return o = O(
     o,
-    (n) => /* @__PURE__ */ l.jsx(N, { value: e, children: n }),
+    (n) => /* @__PURE__ */ p.jsx(C, { value: e, children: n }),
     [e]
   ), o = P(i({}, o), {
     onClick: u
-  }), o = _(i({ store: e }, o)), o = M(i({ store: e }, o)), o;
-}), Y = f(function(t) {
-  const r = U(t);
-  return h(I, r);
+  }), o = y(i({ store: e }, o)), o = M(i({ store: e }, o)), o;
+}), Z = f(function(t) {
+  const r = q(t);
+  return h(U, r);
 });
 export {
-  X as P,
-  Y as a,
-  U as b,
-  G as u
+  Y as P,
+  Z as a,
+  q as b,
+  I as u
 };

package/dist/Radio.mjs

@@ -1,22 +1,22 @@
 "use client";
-import t from "react";
-import o, { th as i, system as g, css as x } from "@xstyled/styled-components";
-import { d as $ } from "./field-styles-CfVLcVQp.mjs";
-import { shouldForwardProp as k, forwardRef as w } from "./System.mjs";
-import { Label as y } from "./Label.mjs";
-import { R as E } from "./NLEBE274-QOMV1l7e.mjs";
-import { Hint as R } from "./Hint.mjs";
-const v = o(E).withConfig({ shouldForwardProp: k })(
-  ({ order: e = "-1", size: r, variant: a }) => x`
-    ${$({ size: r, variant: a })};
-    ${i("radios.default")}
+import { j as i } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { Hint as b } from "./Hint.mjs";
+import { shouldForwardProp as g, forwardRef as $ } from "./System.mjs";
+import e, { th as r, system as k, css as j } from "@xstyled/styled-components";
+import { Label as w } from "./Label.mjs";
+import { d as y } from "./field-styles-CfVLcVQp.mjs";
+import { R } from "./NLEBE274-oSxMftGy.mjs";
+const v = e(R).withConfig({ shouldForwardProp: g })(
+  ({ order: o = "-1", size: t, variant: s }) => j`
+    ${y({ size: t, variant: s })};
+    ${r("radios.default")}
     position: relative;
     padding: 0;
-    order: ${e};
+    order: ${o};
     cursor: pointer;
     border-radius: 50%;
     transition: medium;
-    ${g};
+    ${k};
 
     &::after {
       content: '';
@@ -32,30 +32,30 @@ const v = o(E).withConfig({ shouldForwardProp: k })(
 
     &[aria-checked='true'] {
       &:not([disabled]) {
-        ${i("radios.checked")};
+        ${r("radios.checked")};
       }
 
       &[disabled] {
         &::after {
-          background-color: ${i("radios.checkedCenteredColor.disabled")};
+          background-color: ${r("radios.checkedCenteredColor.disabled")};
         }
       }
 
       &::after {
-        background-color: ${i("radios.checkedCenteredColor.default")};
+        background-color: ${r("radios.checkedCenteredColor.default")};
       }
     }
   `
-), C = o(y)`
+), C = e(w)`
   max-width: 100%;
   /** we need to reset margin-bottom from Label component */
   margin-bottom: 0 !important;
-`, L = o.divBox`
+`, L = e.divBox`
   flex-shrink: 0;
   position: relative;
   align-items: center;
   display: flex;
-`, F = o.divBox`
+`, F = e.divBox`
   display: flex;
   align-items: flex-start;
   gap: sm;
@@ -63,50 +63,56 @@ const v = o(E).withConfig({ shouldForwardProp: k })(
   input {
     margin-top: xs;
   }
-`, B = o.div`
+`, B = e.div`
   display: flex;
   flex-direction: column;
-`, D = w(
+`, D = $(
   ({
-    dataTestId: e,
-    disabled: r,
-    disabledIcon: a,
+    dataTestId: o,
+    disabled: t,
+    disabledIcon: s,
     flexDirection: p,
-    hint: n,
-    label: d,
+    hint: d,
+    label: l,
     maxWidth: f,
-    onChange: s,
+    onChange: n,
     onClick: c,
     variant: m,
     ...u
-  }, b) => {
-    const h = (l) => {
-      l.stopPropagation(), c && c(l), s && s(l);
+  }, x) => {
+    const h = (a) => {
+      a.stopPropagation(), c && c(a), n && n(a);
     };
-    return /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ i.jsx(
       C,
       {
         alignItems: "flex-start",
         checkableField: !0,
-        disabled: r,
-        disabledIcon: a,
+        disabled: t,
+        disabledIcon: s,
         flexDirection: "column",
         maxWidth: f,
         onClick: h,
         variant: m,
-        withDisabledIcon: !1
-      },
-      /* @__PURE__ */ t.createElement(F, { flexDirection: p }, /* @__PURE__ */ t.createElement(L, null, /* @__PURE__ */ t.createElement(
-        v,
-        {
-          "data-testid": e,
-          disabled: r,
-          label: d,
-          ref: b,
-          variant: m,
-          ...u
-        }
-      )), /* @__PURE__ */ t.createElement(B, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), n && /* @__PURE__ */ t.createElement(R, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, n)))
+        withDisabledIcon: !1,
+        children: /* @__PURE__ */ i.jsxs(F, { flexDirection: p, children: [
+          /* @__PURE__ */ i.jsx(L, { children: /* @__PURE__ */ i.jsx(
+            v,
+            {
+              "data-testid": o,
+              disabled: t,
+              label: l,
+              ref: x,
+              variant: m,
+              ...u
+            }
+          ) }),
+          /* @__PURE__ */ i.jsxs(B, { children: [
+            /* @__PURE__ */ i.jsx("div", { "data-testid": o ? `${o}-label` : void 0, children: l }),
+            d ? /* @__PURE__ */ i.jsx(b, { "data-testid": o ? `${o}-hint` : void 0, mt: "0", children: d }) : null
+          ] })
+        ] })
+      }
     );
   }
 );

package/dist/RadioGroup.mjs

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