welcome-ui 8.0.0 → 8.1.0-alpha.0

package/dist/PasswordInput.mjs

@@ -1,55 +1,56 @@
 "use client";
-import t, { useState as i } from "react";
+import { j as t } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { useState as c } from "react";
+import { InputText as m } from "./InputText.mjs";
+import { forwardRef as x } from "./System.mjs";
+import { Button as d } from "./Button.mjs";
 import "./Icon.mjs";
-import { S as l, H as m } from "./index-u1oHKa7X.mjs";
-import { Button as u } from "./Button.mjs";
-import { InputText as d } from "./InputText.mjs";
-import { forwardRef as f } from "./System.mjs";
-const w = ({
-  dataTestId: e,
-  isHidden: o,
+import { S as l, H as u } from "./index-wl3X6EM1.mjs";
+const f = ({
+  dataTestId: o,
+  isHidden: s,
   onClick: r,
-  title: n
-}) => /* @__PURE__ */ t.createElement(
-  u,
+  title: e
+}) => /* @__PURE__ */ t.jsx(
+  d,
   {
     "aria-controls": "password",
-    "aria-expanded": `${!o}`,
-    dataTestId: e && `${e}-action`,
+    "aria-expanded": `${!s}`,
+    dataTestId: o && `${o}-action`,
     onClick: r,
     shape: "circle",
     size: "xs",
-    title: n,
-    variant: "ghost"
-  },
-  o ? /* @__PURE__ */ t.createElement(l, null) : /* @__PURE__ */ t.createElement(m, null)
-), x = f(
-  ({ dataTestId: e, title: o, ...r }, n) => {
-    const [a, c] = i("password"), s = a === "password", p = () => {
-      c(s ? "text" : "password");
+    title: e,
+    variant: "ghost",
+    children: s ? /* @__PURE__ */ t.jsx(l, {}) : /* @__PURE__ */ t.jsx(u, {})
+  }
+), w = x(
+  ({ dataTestId: o, title: s, ...r }, e) => {
+    const [n, a] = c("password"), p = n === "password", i = () => {
+      a(p ? "text" : "password");
     };
-    return /* @__PURE__ */ t.createElement(
-      d,
+    return /* @__PURE__ */ t.jsx(
+      m,
       {
         ...r,
-        dataTestId: e,
-        icon: /* @__PURE__ */ t.createElement(
-          w,
+        dataTestId: o,
+        icon: /* @__PURE__ */ t.jsx(
+          f,
           {
-            dataTestId: e,
-            isHidden: s,
-            onClick: p,
-            title: o
+            dataTestId: o,
+            isHidden: p,
+            onClick: i,
+            title: s
           }
         ),
         iconPlacement: "right",
-        ref: n,
-        type: a
+        ref: e,
+        type: n
       }
     );
   }
 );
-x.displayName = "PasswordInput";
+w.displayName = "PasswordInput";
 export {
-  x as PasswordInput
+  w as PasswordInput
 };

package/dist/Picker.mjs

@@ -1,46 +1,48 @@
 "use client";
-import e from "react";
-import u, { system as R } from "@xstyled/styled-components";
-import { shouldForwardProp as $, forwardRef as k } from "./System.mjs";
-import { R as y } from "./NLEBE274-C94QU78N.mjs";
-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 h = u(y).withConfig({ shouldForwardProp: $ })`
+import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { Box as u } from "./Box.mjs";
+import { FieldGroup as R } from "./FieldGroup.mjs";
+import { Label as $ } from "./Label.mjs";
+import { shouldForwardProp as j, forwardRef as n } from "./System.mjs";
+import k, { system as y } from "@xstyled/styled-components";
+import { R as b } from "./NLEBE274-oSxMftGy.mjs";
+import { u as w, R as P } from "./radio-group-C0fUHvam.mjs";
+const h = k(b).withConfig({ shouldForwardProp: j })`
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
 
-  ${R};
-`, 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);
+  ${y};
+`, F = n(
+  ({ dataTestId: s, label: m, name: t, onChange: e, options: p, required: a, value: l, ...c }, d) => {
+    const f = w({ defaultValue: l }), x = (r) => {
+      r.stopPropagation(), e == null || e(r);
     };
-    return /* @__PURE__ */ e.createElement(
-      b,
+    return /* @__PURE__ */ o.jsx(
+      R,
       {
-        ...p,
+        ...c,
         as: P,
-        dataTestId: t,
+        dataTestId: s,
         mb: 0,
-        ref: f,
-        required: c,
-        store: d
-      },
-      /* @__PURE__ */ e.createElement(w, { display: "flex", flexWrap: "wrap" }, s.map(({ element: o, value: r }) => /* @__PURE__ */ e.createElement(
-        E,
-        {
-          checkableField: !0,
-          dataTestId: t && `${t}-item-${i}-${r}`,
-          key: `${l}-${i}-${r}`,
-          onClick: n
-        },
-        /* @__PURE__ */ e.createElement(h, { name: i, value: r }),
-        /* @__PURE__ */ e.createElement(o, { selected: m === r })
-      )))
+        ref: d,
+        required: a,
+        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}`,
+            onClick: x,
+            children: [
+              /* @__PURE__ */ o.jsx(h, { name: t, value: i }),
+              /* @__PURE__ */ o.jsx(r, { selected: l === i })
+            ]
+          },
+          `${m}-${t}-${i}`
+        )) })
+      }
     );
   }
 );

package/dist/Popover.mjs

@@ -1,27 +1,27 @@
 "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-BLLqyXdd.mjs";
-import { P, H as $, a as C, u as w, b as E } from "./BYC7LY2E-CVjUW1dr.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 m } 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")};
+`, u = 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;
@@ -32,113 +32,120 @@ const b = a(h)`
       opacity: 1;
     }
 
-    ${t && p`
+    ${t && l`
       ${u} {
         padding-right: 50;
       }
     `}
   `
 );
-a(v)`
+i(d)`
   ${m};
 `;
-const y = a($)`
+const y = i(C)`
   ${m};
-`, Z = i(
-  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
-    v,
+`, 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, {})
+      }
+    )
+  ] });
+}, 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,
+), J = Object.assign(k, {
+  Content: v,
   Title: u,
-  Trigger: Z
-}), z = i(
-  ({ children: t, onClose: o, store: e, ...n }, s) => {
-    const { withCloseButton: c } = e;
-    return /* @__PURE__ */ r.createElement(
+  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,
+), K = Object.assign(z, {
+  Content: v,
   Title: u,
-  Trigger: A
-}), K = ({
+  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-DJ-vUdAM.mjs

@@ -0,0 +1,98 @@
+"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 { 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(
+  function(t) {
+    var r = t, { store: e } = r, o = m(r, ["store"]);
+    const s = E();
+    return e = e || s, o = P(i({}, o), {
+      ref: x(e == null ? void 0 : e.setAnchorElement, o.ref)
+    }), o;
+  }
+);
+f(function(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 = {
+  top: `rotate(180 ${a} ${a})`,
+  right: `rotate(-90 ${a} ${a})`,
+  bottom: `rotate(0 ${a} ${a})`,
+  left: `rotate(90 ${a} ${a})`
+};
+function F(c) {
+  const [t, r] = W(), e = c.useState("contentElement");
+  return V(() => {
+    if (!e) return;
+    const s = R(e).getComputedStyle(e);
+    r(s);
+  }, [e]), t;
+}
+var I = d(
+  function(t) {
+    var r = t, { store: e, size: o = v } = r, s = m(r, ["store", "size"]);
+    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), _ = (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]
+    );
+    return s = P(i({
+      children: D,
+      "aria-hidden": !0
+    }, s), {
+      ref: x(e.setArrowElement, s.ref),
+      style: i({
+        // server side rendering
+        position: "absolute",
+        fontSize: o,
+        width: "1em",
+        height: "1em",
+        pointerEvents: "none",
+        fill: _,
+        stroke: A,
+        strokeWidth: $
+      }, s.style)
+    }), N(s);
+  }
+), Y = f(function(t) {
+  const r = I(t);
+  return h(L, r);
+}), 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 l = o.onClick, u = z((n) => {
+    e == null || e.setAnchorElement(n.currentTarget), l == null || l(n);
+  });
+  return o = O(
+    o,
+    (n) => /* @__PURE__ */ p.jsx(C, { 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);
+});
+export {
+  Y as P,
+  Z as a,
+  q as b,
+  I as u
+};