welcome-ui 7.4.0 → 8.0.0-alpha.0

package/dist/DatePicker.mjs

@@ -1,7 +1,7 @@
 "use client";
 import d, { useState as R, useRef as w, useEffect as I } from "react";
 import { forwardRef as G } from "./System.mjs";
-import { S as J, c as Q, b as V, C as W, D as P, g as X } from "./CustomInput-BqaOGHm4.mjs";
+import { S as J, c as Q, b as V, C as W, D as P, g as X } from "./CustomInput-D_13Gd_3.mjs";
 const Z = G(
   ({
     autoFocus: S,
@@ -50,55 +50,59 @@ const Z = G(
       const c = o(e);
       e.setHours(c.getHours(), c.getMinutes()), a(e), s && s(new Date(e));
     };
-    return /* @__PURE__ */ d.createElement(
-      J,
-      {
-        autoComplete: "off",
-        calendarClassName: "date-picker-popper",
-        customInput: /* @__PURE__ */ d.createElement(
-          Q,
-          {
-            className: "date-picker",
-            "data-testid": b,
-            focused: j,
-            handleBlur: (e) => O(e),
-            handleFocus: (e) => L(e),
-            icon: l,
-            iconPlacement: u,
-            inputMode: h ? "none" : "text",
-            onReset: Y,
-            ref: (e) => {
-              E.current = e, typeof n == "function" ? n(e) : n.current = e;
-            },
-            size: y
-          }
-        ),
-        dateFormat: x,
-        disabled: F,
-        iconPlacement: !!l && u,
-        locale: p,
-        onChange: q,
-        onKeyDown: U,
-        placeholderText: K,
-        popperContainer: V,
-        popperProps: g,
-        renderCustomHeader: (e) => /* @__PURE__ */ d.createElement(
-          W,
-          {
-            endYear: H,
-            isMonthYearPicker: f,
-            locale: p,
-            startYear: C,
-            ...e
-          }
-        ),
-        selected: B,
-        showMonthYearPicker: f,
-        size: y,
-        transparent: N,
-        useWeekdaysShort: _,
-        ...r
-      }
+    return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      /* @__PURE__ */ d.createElement(
+        J,
+        {
+          autoComplete: "off",
+          calendarClassName: "date-picker-popper",
+          customInput: /* @__PURE__ */ d.createElement(
+            Q,
+            {
+              className: "date-picker",
+              "data-testid": b,
+              focused: j,
+              handleBlur: (e) => O(e),
+              handleFocus: (e) => L(e),
+              icon: l,
+              iconPlacement: u,
+              inputMode: h ? "none" : "text",
+              onReset: Y,
+              ref: (e) => {
+                E.current = e, typeof n == "function" ? n(e) : n.current = e;
+              },
+              size: y
+            }
+          ),
+          dateFormat: x,
+          disabled: F,
+          iconPlacement: !!l && u,
+          locale: p,
+          onChange: q,
+          onKeyDown: U,
+          placeholderText: K,
+          popperContainer: V,
+          popperProps: g,
+          renderCustomHeader: (e) => /* @__PURE__ */ d.createElement(
+            W,
+            {
+              endYear: H,
+              isMonthYearPicker: f,
+              locale: p,
+              startYear: C,
+              ...e
+            }
+          ),
+          selected: B,
+          showMonthYearPicker: f,
+          size: y,
+          transparent: N,
+          useWeekdaysShort: _,
+          ...r
+        }
+      )
     );
   }
 );

package/dist/DateTimePicker.mjs

@@ -1,16 +1,16 @@
 "use client";
-import r, { Children as p, useState as E, useEffect as P, cloneElement as $ } from "react";
-import x, { css as _, system as b } from "@xstyled/styled-components";
-import { S as w, a as h, D as S, g as A } from "./CustomInput-BqaOGHm4.mjs";
-import { DatePicker as N } from "./DatePicker.mjs";
-import { TimePicker as R } from "./TimePicker.mjs";
-import { forwardRef as C } from "./System.mjs";
-const T = _`
+import r, { Children as p, useState as E, useEffect as P, cloneElement as x } from "react";
+import $, { css as b } from "@xstyled/styled-components";
+import { S as w, a as h, D as S, g as _ } from "./CustomInput-D_13Gd_3.mjs";
+import { DatePicker as A } from "./DatePicker.mjs";
+import { TimePicker as N } from "./TimePicker.mjs";
+import { forwardRef as R } from "./System.mjs";
+const T = b`
   &:focus {
     position: relative;
     z-index: 1;
   }
-`, F = x.divBox`
+`, C = $.divBox`
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
@@ -40,9 +40,7 @@ const T = _`
   .react-datepicker {
     font-family: inherit;
   }
-
-  ${b};
-`, I = C(
+`, F = R(
   ({
     children: i,
     dataTestId: c,
@@ -55,7 +53,7 @@ const T = _`
   }, k) => {
     const u = p.count(i) > 1 && p.toArray(i).find(
       (e) => e.type.displayName === "TimePicker"
-    ), y = r.isValidElement(u) ? u.props.timeIntervals : void 0, d = (e) => A(e, y), [D, g] = E(d(t)), o = (e) => {
+    ), y = r.isValidElement(u) ? u.props.timeIntervals : void 0, d = (e) => _(e, y), [D, g] = E(d(t)), o = (e) => {
       g(e || null), m && m(e && new Date(e));
     };
     return P(() => {
@@ -64,9 +62,9 @@ const T = _`
       var a;
       const e = d(t);
       ((a = new Date(t)) == null ? void 0 : a.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && m && o(e), g(e);
-    }, [t]), /* @__PURE__ */ r.createElement(F, { "data-testid": c }, i && p.map(
+    }, [t]), /* @__PURE__ */ r.createElement(C, { "data-testid": c }, i && p.map(
       i,
-      (e, a) => $(e, {
+      (e, a) => x(e, {
         // eslint-disable-next-line react/no-array-index-key
         key: a,
         onChange: o,
@@ -78,7 +76,7 @@ const T = _`
         transparent: s
       })
     ), !i && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
-      N,
+      A,
       {
         dataTestId: `${c}-datePicker`,
         disabled: l,
@@ -90,7 +88,7 @@ const T = _`
         value: t
       }
     ), /* @__PURE__ */ r.createElement(
-      R,
+      N,
       {
         dataTestId: `${c}-timePicker`,
         disabled: l,
@@ -103,7 +101,7 @@ const T = _`
     )));
   }
 );
-I.displayName = "DateTimePicker";
+F.displayName = "DateTimePicker";
 export {
-  I as DateTimePicker
+  F as DateTimePicker
 };

package/dist/DateTimePickerCommon.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { C as a, c as t, b as r, D as o, S as i, a as g, f as m, g as u, d as D, e as c } from "./CustomInput-BqaOGHm4.mjs";
+import { C as a, c as t, b as r, D as o, S as i, a as g, f as m, g as u, d as D, e as c } from "./CustomInput-D_13Gd_3.mjs";
 export {
   a as CustomHeader,
   t as CustomInput,

package/dist/Drawer.mjs

@@ -1,17 +1,17 @@
 "use client";
 import e from "react";
-import a, { css as m, th as n, system as $, useTheme as p } from "@xstyled/styled-components";
+import a, { css as m, th as n, useTheme as p } from "@xstyled/styled-components";
 import { CloseButton as b } from "./CloseButton.mjs";
 import { Box as l } from "./Box.mjs";
-import { D } from "./SYRFVSLH-cVmYtx36.mjs";
+import { D as $ } from "./SYRFVSLH-cVmYtx36.mjs";
 import { forwardRef as d } from "./System.mjs";
 import { Text as f } from "./Text.mjs";
 import "./Icon.mjs";
-import { A as B } from "./index-BJAZgeHL.mjs";
-import { Button as k } from "./Button.mjs";
-import { D as C, u as v } from "./JC64G2H7-Dey-8h60.mjs";
-import { D as I } from "./AXB53BZF-CGoc4K3d.mjs";
-const S = (t) => {
+import { A as D } from "./index-BJAZgeHL.mjs";
+import { Button as B } from "./Button.mjs";
+import { D as k, u as C } from "./JC64G2H7-Dey-8h60.mjs";
+import { D as v } from "./AXB53BZF-CGoc4K3d.mjs";
+const I = (t) => {
   switch (t) {
     case "top":
       return {
@@ -42,7 +42,7 @@ const S = (t) => {
         transform: "translateX(-100%)"
       };
   }
-}, u = ["sm", "md", "lg"], _ = (t, r) => {
+}, u = ["sm", "md", "lg"], S = (t, r) => {
   switch (r) {
     case "top":
     case "bottom":
@@ -59,8 +59,8 @@ const S = (t) => {
   ({ placement: t, size: r }) => m`
     ${n("cards.default")};
     ${n("drawers.default")};
-    ${S(t)}
-    ${_(r, t)}
+    ${I(t)}
+    ${S(r, t)}
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -74,7 +74,7 @@ const S = (t) => {
       transform: translate(0, 0);
     }
   `
-), g = a.div.withConfig({
+), g = a.divBox.withConfig({
   shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
 })(
   ({ hideOnInteractOutside: t }) => m`
@@ -86,7 +86,6 @@ const S = (t) => {
     bottom: 0;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
-    ${$};
 
     ${t && m`
       cursor: pointer;
@@ -96,21 +95,21 @@ const S = (t) => {
       opacity: 1;
     }
   `
-), j = a.divBox`
+), _ = a.divBox`
   ${n("drawers.title")};
-`, F = a.divBox`
+`, j = a.divBox`
   ${n("drawers.content")};
-`, O = a(b)`
+`, F = a(b)`
   ${n("drawers.closeButton")};
-`, R = a.divBox`
+`, O = a.divBox`
   ${n("drawers.footer")};
 `, x = ({ zIndex: t = "2", ...r }) => {
   const o = p();
   return /* @__PURE__ */ e.createElement(l, { h: "0" }, /* @__PURE__ */ e.createElement(
-    D,
+    $,
     {
       render: /* @__PURE__ */ e.createElement(
-        O,
+        F,
         {
           left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
           mt: "lg",
@@ -122,8 +121,8 @@ const S = (t) => {
       )
     }
   ));
-}, A = d((t, r) => /* @__PURE__ */ e.createElement(F, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), Y = d((t, r) => /* @__PURE__ */ e.createElement(
-  R,
+}, R = d((t, r) => /* @__PURE__ */ e.createElement(j, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), A = d((t, r) => /* @__PURE__ */ e.createElement(
+  O,
   {
     bottom: { xs: 0, md: "auto" },
     position: { xs: "sticky", md: "static" },
@@ -131,8 +130,8 @@ const S = (t) => {
     w: "100%",
     ...t
   }
-)), L = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.createElement(
-  j,
+)), Y = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.createElement(
+  _,
   {
     alignItems: "center",
     display: "flex",
@@ -144,12 +143,12 @@ const S = (t) => {
     ...o
   },
   /* @__PURE__ */ e.createElement(f, { m: "0", variant: "h3", w: "100%" }, t)
-), P = a.divBox`
+), L = a.divBox`
   overflow-y: scroll;
   flex: 1;
   margin: 0 auto;
   width: 100%;
-`, X = a.divBox(
+`, P = a.divBox(
   ({ size: t }) => m`
     display: flex;
     align-items: center;
@@ -166,11 +165,11 @@ const S = (t) => {
       width: 32;
     `}
   `
-), z = d(
+), X = d(
   ({ children: t, maxWidth: r = 820, store: o, ...s }, i) => {
     const c = p();
     return /* @__PURE__ */ e.createElement(
-      J,
+      G,
       {
         ...s,
         autoFocusOnShow: !1,
@@ -186,10 +185,10 @@ const S = (t) => {
         withBackdrop: !0,
         withCloseButton: !0
       },
-      /* @__PURE__ */ e.createElement(P, { maxWidth: r }, /* @__PURE__ */ e.createElement(l, { p: { _: "xl md", md: "3xl xl" } }, t))
+      /* @__PURE__ */ e.createElement(L, { maxWidth: r }, /* @__PURE__ */ e.createElement(l, { p: { _: "xl md", md: "3xl xl" } }, t))
     );
   }
-), H = ({
+), z = ({
   action: t,
   icon: r,
   onBackButtonClick: o,
@@ -211,9 +210,9 @@ const S = (t) => {
     top: 0,
     zIndex: 1
   },
-  /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" } }, !!o && /* @__PURE__ */ e.createElement(k, { onClick: o, shape: "circle", size: "lg", variant: "ghost" }, /* @__PURE__ */ e.createElement(B, null)), !!r && /* @__PURE__ */ e.createElement(Z, { icon: r }), /* @__PURE__ */ e.createElement(l, { display: "flex", flexDirection: "column", gap: "xxs" }, /* @__PURE__ */ e.createElement(f, { pr: "xl", variant: "h3" }, i), s)),
+  /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" } }, !!o && /* @__PURE__ */ e.createElement(B, { onClick: o, shape: "circle", size: "lg", variant: "ghost" }, /* @__PURE__ */ e.createElement(D, null)), !!r && /* @__PURE__ */ e.createElement(H, { icon: r }), /* @__PURE__ */ e.createElement(l, { display: "flex", flexDirection: "column", gap: "xxs" }, /* @__PURE__ */ e.createElement(f, { pr: "xl", variant: "h3" }, i), s)),
   t && /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md" }, t)
-), Z = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.createElement(X, { size: r }, /* @__PURE__ */ e.createElement(t, { color: "neutral-90", size: r })), q = d(
+), H = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.createElement(P, { size: r }, /* @__PURE__ */ e.createElement(t, { color: "neutral-90", size: r })), Z = d(
   ({
     children: t,
     hideOnInteractOutside: r = !0,
@@ -224,7 +223,7 @@ const S = (t) => {
     withCloseButton: w = !0,
     ...E
   }, y) => /* @__PURE__ */ e.createElement(
-    C,
+    k,
     {
       backdrop: c ? /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: r }) : !1,
       hideOnInteractOutside: r,
@@ -237,32 +236,32 @@ const S = (t) => {
     /* @__PURE__ */ e.createElement(e.Fragment, null, w && /* @__PURE__ */ e.createElement(x, null), t)
   )
 );
-function at(t = {}) {
-  return v({ animated: !0, ...t });
+function nt(t = {}) {
+  return C({ animated: !0, ...t });
 }
-const G = ({
+const q = ({
   hideOnInteractOutside: t = !0,
   ...r
 }) => /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: t, ...r }), h = d(({ as: t, store: r, ...o }, s) => /* @__PURE__ */ e.createElement(
-  I,
+  v,
   {
     ref: s,
     render: t ? (i) => /* @__PURE__ */ e.createElement(t, { ...i }) : void 0,
     store: r,
     ...o
   }
-)), J = Object.assign(q, {
+)), G = Object.assign(Z, {
   Trigger: h,
-  Backdrop: G,
+  Backdrop: q,
   Close: x,
-  Title: L,
-  Content: A,
-  Footer: Y
-}), st = Object.assign(z, { Trigger: h, Header: H });
+  Title: Y,
+  Content: R,
+  Footer: A
+}), at = Object.assign(X, { Trigger: h, Header: z });
 export {
-  st as AssetDrawer,
-  J as Drawer,
-  G as DrawerBackdrop,
+  at as AssetDrawer,
+  G as Drawer,
+  q as DrawerBackdrop,
   h as Trigger,
-  at as useDrawer
+  nt as useDrawer
 };