welcome-ui 8.1.0-alpha.0 → 8.1.0-alpha.1

package/dist/Modal.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
-import a, { css as h, th as l, up as J, system as K, useTheme as w } from "@xstyled/styled-components";
-import F, { useState as L, useMemo as Q, Children as D, useEffect as U, cloneElement as H } from "react";
+import a, { css as h, th as l, up as J, system as K, useTheme as B } from "@xstyled/styled-components";
+import j, { useState as L, useMemo as Q, Children as F, useEffect as U, cloneElement as H } from "react";
 import { Shape as X } from "./Shape.mjs";
-import { forwardRef as c } from "./System.mjs";
+import { forwardRef as m } from "./System.mjs";
 import { Box as $ } from "./Box.mjs";
 import { Text as x } from "./Text.mjs";
 import { StyledSwiper as Y } from "./Swiper.mjs";
@@ -37,7 +37,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     width: 100%;
     height: 100%;
   }
-`, j = a.divBox`
+`, v = a.divBox`
   transition: margin-top 250ms ease-in-out;
 
   > img,
@@ -70,20 +70,20 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
     ${N};
   }
 
-  ${j} {
+  ${v} {
     margin-top: xl;
   }
 
   &[data-enter] {
     opacity: 1;
 
-    ${j} {
+    ${v} {
       margin-top: 0;
     }
   }
 `, z = a(x).attrs({ lines: 2, variant: "h4" })`
   margin: 0;
-`, v = "4rem", b = "6rem", nt = a.divBox`
+`, b = "4rem", w = "6rem", nt = a.divBox`
   display: flex;
   flex-direction: column;
   border-radius: xxl;
@@ -92,23 +92,23 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   > img {
     width: auto;
     max-width: fit-content;
-    max-height: calc(100vh - 2 * 5rem - ${v});
+    max-height: calc(100vh - 2 * 5rem - ${b});
     flex-shrink: 0;
 
     @media (min-width: md) {
-      max-height: calc(100vh - 2 * 5rem - ${b});
+      max-height: calc(100vh - 2 * 5rem - ${w});
     }
   }
 
   ${T} {
     background-color: neutral-90;
-    max-height: calc(100vh - 2 * 5rem - ${v});
+    max-height: calc(100vh - 2 * 5rem - ${b});
 
     @media (min-width: md) {
-      max-height: calc(100vh - 2 * 5rem - ${b});
+      max-height: calc(100vh - 2 * 5rem - ${w});
     }
   }
-`, at = c(
+`, at = m(
   ({ children: t, customContent: e, subtitle: r, title: s }, d) => /* @__PURE__ */ o.jsxs(nt, { ref: d, children: [
     t,
     /* @__PURE__ */ o.jsxs(
@@ -119,7 +119,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
         flexDirection: "column",
         flexShrink: 0,
         gap: "xxs",
-        h: { _: v, md: b },
+        h: { _: b, md: w },
         justifyContent: "center",
         px: { _: "md", md: "xl" },
         w: "100%",
@@ -190,13 +190,13 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   `
 ), dt = a.sectionBox`
   ${l("modals.body")};
-`, ct = a.headerBox`
+`, mt = a.headerBox`
   position: sticky;
   top: 0;
   flex-shrink: 0;
   z-index: 1;
   ${l("modals.header")};
-`, mt = a(x)`
+`, ct = a(x)`
   ${l(".modals.header.subtitle")};
   margin-bottom: 0;
 `, ut = a.footerBox`
@@ -224,7 +224,7 @@ const E = "calc(100vw - 2 * 2rem);", W = "calc(100vw - 2 * 1rem);", M = "calc(10
   }
 
   ${K}
-`, _ = c(
+`, _ = m(
   ({ hideOnInteractOutside: t, ...e }, r) => /* @__PURE__ */ o.jsx(
     I,
     {
@@ -245,11 +245,11 @@ _.displayName = "Backdrop";
 const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE__ */ o.jsx($, { h: "100%", margin: "0 auto", style: { aspectRatio: 16 / 9 }, children: t }) }), gt = Object.assign(st, {
   AssetWithTitle: at,
   Backdrop: _,
-  Content: j,
+  Content: v,
   Iframe: ft,
   Title: z
 }), A = ({ isOnHeader: t, ...e }) => {
-  const r = w();
+  const r = B();
   return /* @__PURE__ */ o.jsx(
     S,
     {
@@ -266,11 +266,11 @@ const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE_
       )
     }
   );
-}, O = c(
+}, O = m(
   ({ children: t, store: e, withClosingButton: r = !0, ...s }, d) => {
-    const { borderWidths: u, space: m } = w(), [y, p] = L(!1), f = e.useState("contentElement"), B = e.useState("open"), i = Q(
-      () => D.map(t, (n) => {
-        if (F.isValidElement(n)) {
+    const { borderWidths: u, space: c } = B(), [y, p] = L(!1), f = e.useState("contentElement"), k = e.useState("open"), i = Q(
+      () => F.map(t, (n) => {
+        if (j.isValidElement(n)) {
           const g = n.type;
           return g.displayName ?? g.name ?? "";
         }
@@ -279,32 +279,32 @@ const ft = ({ children: t }) => /* @__PURE__ */ o.jsx(T, { children: /* @__PURE_
       [t]
     ), q = !(i != null && i.includes("Header")) && r, G = (n) => n === "Header" ? {
       // if the Modal have a Body but not a Footer || have a Footer but not a Body
-      pb: i != null && i.includes("Body") && !i.includes("Footer") || i != null && i.includes("Footer") && !i.includes("Body") ? m.lg : m.xxl
+      pb: i != null && i.includes("Body") && !i.includes("Footer") || i != null && i.includes("Footer") && !i.includes("Body") ? c.lg : c.xxl
     } : n === "Body" ? {
-      pb: i != null && i.includes("Footer") ? m.lg : null,
-      pr: i != null && i.includes("Header") ? m.xxl : null
+      pb: i != null && i.includes("Footer") ? c.lg : null,
+      pr: i != null && i.includes("Header") ? c.xxl : null
     } : n === "Footer" ? {
       borderWidth: y ? u.sm : "0",
-      pt: i != null && i.includes("Header") || i != null && i.includes("Body") ? null : m.lg
+      pt: i != null && i.includes("Header") || i != null && i.includes("Body") ? null : c.lg
     } : {};
     return U(() => {
-      B ? f && p(f.scrollHeight > f.offsetHeight) : p(!1);
-    }, [e, B, f]), /* @__PURE__ */ o.jsxs($, { ref: d, ...s, children: [
+      k ? f && p(f.scrollHeight > f.offsetHeight) : p(!1);
+    }, [e, k, f]), j.isValidElement(t) ? /* @__PURE__ */ o.jsxs($, { ref: d, ...s, children: [
       q ? /* @__PURE__ */ o.jsx(A, {}) : null,
-      D.map(t, (n) => {
-        var k, C;
+      F.map(t, (n) => {
+        var C, D;
         if (!n) return null;
-        const g = ((k = n == null ? void 0 : n.type) == null ? void 0 : k.displayName) || ((C = n == null ? void 0 : n.type) == null ? void 0 : C.name);
+        const g = ((C = n == null ? void 0 : n.type) == null ? void 0 : C.displayName) || ((D = n == null ? void 0 : n.type) == null ? void 0 : D.name);
         return H(n, {
           ...G(g),
           ...n.props
         });
       })
-    ] });
+    ] }) : null;
   }
 );
 O.displayName = "Content";
-const R = c(({ children: t, information: e, ...r }, s) => /* @__PURE__ */ o.jsxs(ut, { ref: s, w: "100%", ...r, children: [
+const R = m(({ children: t, information: e, ...r }, s) => /* @__PURE__ */ o.jsxs(ut, { ref: s, w: "100%", ...r, children: [
   t && /* @__PURE__ */ o.jsx(xt, { children: t }),
   e && /* @__PURE__ */ o.jsxs(ht, { children: [
     /* @__PURE__ */ o.jsx(x, { color: "neutral-90", fontWeight: "bold", variant: "subtitle-sm", children: e.title }),
@@ -312,11 +312,11 @@ const R = c(({ children: t, information: e, ...r }, s) => /* @__PURE__ */ o.jsxs
   ] })
 ] }));
 R.displayName = "Footer";
-const V = c(({ icon: t, subtitle: e, title: r, ...s }, d) => /* @__PURE__ */ o.jsxs(ct, { ref: d, textAlign: t ? "center" : null, w: "100%", ...s, children: [
+const V = m(({ icon: t, subtitle: e, title: r, ...s }, d) => /* @__PURE__ */ o.jsxs(mt, { ref: d, textAlign: t ? "center" : null, w: "100%", ...s, children: [
   /* @__PURE__ */ o.jsx(A, { isOnHeader: !0 }),
   t,
   /* @__PURE__ */ o.jsx(x, { mb: e ? "lg" : 0, mt: t ? "xl" : 0, variant: "h4", children: r }),
-  e && /* @__PURE__ */ o.jsx(mt, { children: e })
+  e && /* @__PURE__ */ o.jsx(ct, { children: e })
 ] }));
 V.displayName = "Header";
 function zt(t) {
@@ -329,13 +329,13 @@ function zt(t) {
     ...s
   });
 }
-const $t = c(
-  ({ backdrop: t, hideOnInteractOutside: e, ...r }, s) => t === !0 ? /* @__PURE__ */ o.jsx(I, { hideOnInteractOutside: e, ref: s, ...r }) : F.isValidElement(t) ? H(t, {
+const $t = m(
+  ({ backdrop: t, hideOnInteractOutside: e, ...r }, s) => t === !0 ? /* @__PURE__ */ o.jsx(I, { hideOnInteractOutside: e, ref: s, ...r }) : j.isValidElement(t) ? H(t, {
     hideOnInteractOutside: e,
     ref: s,
     ...r
   }) : null
-), yt = c(
+), yt = m(
   ({
     ariaLabel: t,
     /** for render property */
@@ -344,7 +344,7 @@ const $t = c(
     children: s,
     hideOnInteractOutside: d = !0,
     size: u = "lg",
-    store: m,
+    store: c,
     ...y
   }, p) => /* @__PURE__ */ o.jsx(
     ot,
@@ -354,17 +354,17 @@ const $t = c(
       hideOnInteractOutside: d,
       ref: p,
       render: /* @__PURE__ */ o.jsx(e, { size: u }),
-      store: m,
+      store: c,
       ...y,
       children: s
     }
   )
-), P = c((t, e) => /* @__PURE__ */ o.jsx(dt, { ref: e, ...t }));
+), P = m((t, e) => /* @__PURE__ */ o.jsx(dt, { ref: e, ...t }));
 P.displayName = "Body";
 const jt = (t) => {
-  const { modals: e } = w();
+  const { modals: e } = B();
   return /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(X, { ...e.cover, ...t }) });
-}, vt = c(({ as: t, store: e, ...r }, s) => /* @__PURE__ */ o.jsx(
+}, vt = m(({ as: t, store: e, ...r }, s) => /* @__PURE__ */ o.jsx(
   it,
   {
     ref: s,

package/dist/types/components/Modal/Content.d.ts

@@ -1,7 +1,6 @@
 import { CreateWuiProps } from '../System';
 import { UseModal } from '.';
 export type ContentOptions = {
-    children: JSX.Element | JSX.Element[];
     store: UseModal;
     /**
      * show or hide the closing button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "8.1.0-alpha.0",
+  "version": "8.1.0-alpha.1",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"