welcome-ui 8.1.0 → 8.1.1

package/dist/Popover.mjs

@@ -1,151 +1,144 @@
 "use client";
-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 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 "./Icon.mjs";
-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`
+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`
     transform: ${t};
   `
-), v = i.div`
-  ${p("popovers.content")};
-`, m = i.h6`
+), d = a.div`
+  ${l("popovers.content")};
+`, u = a.h6`
   margin: 0;
-  ${p("popovers.title")};
-`, f = i($)(
-  ({ $withCloseButton: t }) => l`
-    ${p("popovers.default")};
+  ${l("popovers.title")};
+`, f = a(P)(
+  ({ $withCloseButton: t }) => p`
+    ${l("popovers.default")};
     outline: none;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
-    ${u};
+    ${m};
 
     /* on open popover for animation */
     &[data-enter] {
       opacity: 1;
     }
 
-    ${t && l`
-      ${m} {
+    ${t && p`
+      ${u} {
         padding-right: 50;
       }
     `}
   `
 );
-i(d)`
-  ${u};
+a(v)`
+  ${m};
 `;
-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,
+const y = a($)`
+  ${m};
+`, Z = i(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
+    v,
     {
       ref: n,
-      render: t ? (s) => /* @__PURE__ */ e.jsx(t, { ...s }) : void 0,
-      store: r,
-      ...o
+      render: t ? (s) => /* @__PURE__ */ r.createElement(t, { ...s }) : void 0,
+      store: o,
+      ...e
     }
   )
-), 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 }) });
+), 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));
   }
-), 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(
+), 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(
       f,
       {
-        as: w,
-        store: o,
+        as: C,
+        store: e,
         ...n,
-        $withCloseButton: a,
-        ref: s,
-        children: /* @__PURE__ */ e.jsx(g, { onClose: r, store: o, children: t })
-      }
+        $withCloseButton: c,
+        ref: s
+      },
+      /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
     );
   }
-), K = Object.assign(z, {
-  Content: v,
-  Title: m,
-  Trigger: R
-}), N = ({
+), J = Object.assign(z, {
+  Content: d,
+  Title: u,
+  Trigger: A
+}), K = ({
   animated: t = 150,
-  withCloseButton: r = !1,
-  ...o
+  withCloseButton: o = !1,
+  ...e
 } = {}) => ({
-  ...H({
+  ...w({
     animated: t,
-    ...o
+    ...e
   }),
-  withCloseButton: r
-}), Q = ({
+  withCloseButton: o
+}), N = ({
   animated: t = 150,
-  hideTimeout: r = 300,
-  showTimeout: o = 500,
+  hideTimeout: o = 300,
+  showTimeout: e = 500,
   withCloseButton: n = !1,
   ...s
 } = {}) => ({
-  ...B({
+  ...E({
     animated: t,
-    hideTimeout: r,
-    showTimeout: o,
+    hideTimeout: o,
+    showTimeout: e,
     ...s
   }),
   withCloseButton: n
 });
 export {
-  J as Popover,
-  K as PopoverHover,
-  N as usePopover,
-  Q as usePopoverHover
+  G as Popover,
+  J as PopoverHover,
+  K as usePopover,
+  N as usePopoverHover
 };

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

@@ -1,10 +1,9 @@
 "use client";
-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 { 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 { useMemo as T, useState as W } from "react";
-import { j as p } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { u as M } from "./AXB53BZF-XKOjjeWO.mjs";
-var H = "div", y = d(
+import { u as M } from "./AXB53BZF-BOEe01VW.mjs";
+var H = "div", _ = d(
   function(t) {
     var r = t, { store: e } = r, o = m(r, ["store"]);
     const s = E();
@@ -14,7 +13,7 @@ var H = "div", y = d(
   }
 );
 f(function(t) {
-  const r = y(t);
+  const r = _(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 = {
@@ -25,26 +24,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 V(() => {
+  return j(() => {
     if (!e) return;
-    const s = R(e).getComputedStyle(e);
+    const s = z(e).getComputedStyle(e);
     r(s);
   }, [e]), t;
 }
-var I = d(
+var G = d(
   function(t) {
     var r = t, { store: e, size: o = v } = r, s = m(r, ["store", "size"]);
-    const l = j();
-    e = e || l, w(
+    const p = C();
+    e = e || p, 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), _ = (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 })
+    ), 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 })
       ] }) }),
       [b]
     );
@@ -60,39 +59,39 @@ var I = d(
         width: "1em",
         height: "1em",
         pointerEvents: "none",
-        fill: _,
+        fill: y,
         stroke: A,
         strokeWidth: $
       }, s.style)
-    }), N(s);
+    }), V(s);
   }
-), Y = f(function(t) {
-  const r = I(t);
+), X = f(function(t) {
+  const r = G(t);
   return h(L, r);
-}), U = "button", q = d(function(t) {
+}), I = "button", U = 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 l = o.onClick, u = z((n) => {
-    e == null || e.setAnchorElement(n.currentTarget), l == null || l(n);
+  const p = o.onClick, u = R((n) => {
+    e == null || e.setAnchorElement(n.currentTarget), p == null || p(n);
   });
   return o = O(
     o,
-    (n) => /* @__PURE__ */ p.jsx(C, { value: e, children: n }),
+    (n) => /* @__PURE__ */ l.jsx(N, { value: e, children: n }),
     [e]
   ), o = P(i({}, o), {
     onClick: u
-  }), 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);
+  }), o = _(i({ store: e }, o)), o = M(i({ store: e }, o)), o;
+}), Y = f(function(t) {
+  const r = U(t);
+  return h(I, r);
 });
 export {
-  Y as P,
-  Z as a,
-  q as b,
-  I as u
+  X as P,
+  Y as a,
+  U as b,
+  G as u
 };

package/dist/Radio.mjs

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

package/dist/RadioGroup.mjs

@@ -1,62 +1,62 @@
 "use client";
-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`
+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`
     display: flex;
-    flex-direction: ${r};
+    flex-direction: ${a};
     flex-wrap: wrap;
     gap: md;
   `
-), k = h(
+), k = w(
   ({
-    dataTestId: r,
-    flexDirection: d,
-    id: o,
-    label: t,
-    maxWidth: m,
-    name: i,
-    onChange: a,
-    options: f = [],
-    renderOption: c = b,
+    dataTestId: a,
+    flexDirection: i,
+    id: m,
+    label: o,
+    maxWidth: s,
+    name: u,
+    onChange: r,
+    options: c = [],
+    renderOption: f = G,
     required: p,
     value: v,
-    ...u
-  }, x) => {
-    const l = w({ defaultValue: v }), R = l.useState("value"), $ = (e) => {
-      u.disabled || (l.setValue(e), a == null || a(e));
+    ...d
+  }, R) => {
+    const l = E({ defaultValue: v }), $ = l.useState("value"), x = (e) => {
+      d.disabled || (l.setValue(e), r == null || r(e));
     };
-    return /* @__PURE__ */ s.jsx(
-      j,
+    return /* @__PURE__ */ t.createElement(
+      y,
       {
-        as: y,
-        dataTestId: r,
-        label: t,
+        as: V,
+        dataTestId: a,
+        label: o,
         mb: 0,
-        ref: x,
+        ref: R,
         required: p,
-        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
-        )) })
-      }
+        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
+        }
+      )))
     );
   }
 );