welcome-ui 8.1.3 → 8.2.0-alpha.1

package/dist/Drawer.mjs

@@ -1,66 +1,156 @@
 "use client";
-import e from "react";
-import a, { th as n, css as c, useTheme as x } from "@xstyled/styled-components";
-import { CloseButton as v } from "./CloseButton.mjs";
+import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { forwardRef as d } from "./System.mjs";
+import n, { th as s, css as c, useTheme as h } from "@xstyled/styled-components";
 import { Box as l } from "./Box.mjs";
-import { D as k } from "./SYRFVSLH-jn06-eLy.mjs";
-import { forwardRef as m } from "./System.mjs";
-import { Text as h } from "./Text.mjs";
+import { Button as v } from "./Button.mjs";
 import "./Icon.mjs";
-import { A as C } from "./index-Bkl89twW.mjs";
-import { Button as I } from "./Button.mjs";
-import { D as O, u as S } from "./JC64G2H7-BzklVBKM.mjs";
-import { D as T } from "./AXB53BZF-BOEe01VW.mjs";
-const F = (t) => {
+import { A as k } from "./index-QaLwIvZS.mjs";
+import { Text as g } from "./Text.mjs";
+import { CloseButton as C } from "./CloseButton.mjs";
+import { D as I } from "./SYRFVSLH-B6m278Vb.mjs";
+import { D as O, u as S } from "./JC64G2H7-afsomHuH.mjs";
+import { D as T } from "./AXB53BZF-XKOjjeWO.mjs";
+const F = n.divBox`
+  flex: 1;
+  margin: 0 auto;
+  width: 100%;
+`, A = n.divBox(
+  ({ size: t }) => c`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 48;
+    width: 48;
+    border-radius: md;
+    background-color: beige-20;
+    transition: background-color ${s("transitions.medium")};
+
+    ${t === "sm" && c`
+      height: 32;
+      width: 32;
+    `}
+  `
+), R = d(
+  ({
+    children: t,
+    getPersistentElements: r,
+    maxWidth: o = 820,
+    store: i,
+    ...a
+  }, m) => {
+    const u = h(), x = () => Array.from(
+      r ? r() : document.querySelectorAll("[data-wui-persistent]")
+    ), b = !!r || (($) => {
+      const D = $.target;
+      return !x().some(
+        (B) => B.contains(D)
+      );
+    });
+    return /* @__PURE__ */ e.jsx(
+      N,
+      {
+        ...a,
+        autoFocusOnShow: !1,
+        getPersistentElements: x,
+        h: { _: "100%", md: "calc(100% - 3rem)" },
+        hideOnInteractOutside: b,
+        overflow: "hidden",
+        placement: "bottom",
+        ref: m,
+        store: i,
+        style: {
+          borderTopLeftRadius: u.radii.xxl,
+          borderTopRightRadius: u.radii.xxl
+        },
+        withBackdrop: !0,
+        children: /* @__PURE__ */ e.jsx(l, { h: "100%", mt: { _: "xl", md: "3xl" }, overflowY: "auto", w: "100%", children: /* @__PURE__ */ e.jsx(F, { maxWidth: o, children: /* @__PURE__ */ e.jsx(l, { p: { _: "0 md xl", md: "0 xl 3xl" }, children: t }) }) })
+      }
+    );
+  }
+), _ = ({
+  action: t,
+  icon: r,
+  onBackButtonClick: o,
+  subtitle: i,
+  title: a
+}) => /* @__PURE__ */ e.jsxs(
+  l,
+  {
+    alignItems: { md: "center" },
+    backgroundColor: "neutral-10",
+    display: "flex",
+    flexDirection: { _: "column", md: "row" },
+    gap: "xl",
+    justifyContent: "space-between",
+    mb: "xl",
+    pb: "md",
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    children: [
+      /* @__PURE__ */ e.jsxs(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" }, children: [
+        !!o && /* @__PURE__ */ e.jsx(v, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e.jsx(k, {}) }),
+        !!r && /* @__PURE__ */ e.jsx(E, { icon: r }),
+        /* @__PURE__ */ e.jsxs(l, { display: "flex", flexDirection: "column", gap: "xxs", children: [
+          /* @__PURE__ */ e.jsx(g, { pr: "xl", variant: "h3", children: a }),
+          i
+        ] })
+      ] }),
+      t ? /* @__PURE__ */ e.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t }) : null
+    ]
+  }
+), E = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.jsx(A, { size: r, children: /* @__PURE__ */ e.jsx(t, { color: "neutral-90", size: r }) }), P = (t) => {
   switch (t) {
-    case "top":
+    case "bottom":
       return {
-        top: "0 !important",
+        bottom: 0,
+        left: 0,
         right: 0,
+        transform: "translateY(100%)"
+      };
+    case "left":
+      return {
+        bottom: 0,
         left: 0,
-        transform: "translateY(-100%)"
+        top: "0 !important",
+        transform: "translateX(-100%)"
       };
     case "right":
       return {
-        top: "0 !important",
-        right: 0,
         bottom: 0,
+        right: 0,
+        top: "0 !important",
         transform: "translateX(100%)"
       };
-    case "bottom":
+    case "top":
       return {
-        right: 0,
-        bottom: 0,
         left: 0,
-        transform: "translateY(100%)"
-      };
-    case "left":
-      return {
+        right: 0,
         top: "0 !important",
-        bottom: 0,
-        left: 0,
-        transform: "translateX(-100%)"
+        transform: "translateY(-100%)"
       };
   }
-}, g = ["sm", "md", "lg"], _ = (t, r) => {
+}, f = ["sm", "md", "lg"], Y = (t, r) => {
   switch (r) {
-    case "top":
     case "bottom":
-      return g.includes(t) ? n(`drawers.sizes.vertical.${t}`) : {
+    case "top":
+      return f.includes(t) ? s(`drawers.sizes.vertical.${t}`) : {
         height: t
       };
-    case "right":
     case "left":
-      return g.includes(t) ? n(`drawers.sizes.horizontal.${t}`) : {
+    case "right":
+      return f.includes(t) ? s(`drawers.sizes.horizontal.${t}`) : {
         width: t
       };
   }
-}, j = a.divBox(
+}, L = n.divBox(
   ({ placement: t, size: r }) => c`
-    ${n("cards.default")};
-    ${n("drawers.default")};
-    ${F(t)}
-    ${_(r, t)}
+    ${s("cards.default")};
+    ${s("drawers.default")};
+    ${P(t)}
+    ${Y(r, t)}
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -74,11 +164,11 @@ const F = (t) => {
       transform: translate(0, 0);
     }
   `
-), w = a.divBox.withConfig({
+), w = n.divBox.withConfig({
   shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
 })(
   ({ hideOnInteractOutside: t }) => c`
-    ${n("drawers.backdrop")};
+    ${s("drawers.backdrop")};
     position: fixed;
     top: 0;
     right: 0;
@@ -95,21 +185,21 @@ const F = (t) => {
       opacity: 1;
     }
   `
-), A = a.divBox`
-  ${n("drawers.title")};
-`, R = a.divBox`
-  ${n("drawers.content")};
-`, P = a(v)`
-  ${n("drawers.closeButton")};
-`, Y = a.divBox`
-  ${n("drawers.footer")};
-`, E = ({ zIndex: t = "2", ...r }) => {
-  const o = x();
-  return /* @__PURE__ */ e.createElement(l, { h: "0", position: "sticky", top: 0, zIndex: t }, /* @__PURE__ */ e.createElement(
-    k,
+), W = n.divBox`
+  ${s("drawers.title")};
+`, X = n.divBox`
+  ${s("drawers.content")};
+`, q = n(C)`
+  ${s("drawers.closeButton")};
+`, z = n.divBox`
+  ${s("drawers.footer")};
+`, j = ({ zIndex: t = "2", ...r }) => {
+  const o = h();
+  return /* @__PURE__ */ e.jsx(l, { h: "0", position: "sticky", top: 0, zIndex: t, children: /* @__PURE__ */ e.jsx(
+    I,
     {
-      render: /* @__PURE__ */ e.createElement(
-        P,
+      render: /* @__PURE__ */ e.jsx(
+        q,
         {
           left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
           mt: "lg",
@@ -117,132 +207,54 @@ const F = (t) => {
         }
       )
     }
-  ));
-}, L = m((t, r) => /* @__PURE__ */ e.createElement(R, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), W = m((t, r) => /* @__PURE__ */ e.createElement(
-  Y,
+  ) });
+}, H = d((t, r) => /* @__PURE__ */ e.jsx(X, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), Z = d((t, r) => /* @__PURE__ */ e.jsx(
+  z,
   {
-    bottom: { xs: 0, md: "auto" },
-    position: { xs: "sticky", md: "static" },
+    bottom: { md: "auto", xs: 0 },
+    position: { md: "static", xs: "sticky" },
     ref: r,
     w: "100%",
     ...t
   }
-)), X = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.createElement(
-  A,
+)), J = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.jsx(
+  W,
   {
     alignItems: "center",
     display: "flex",
     justifyContent: "space-between",
-    position: { xs: "sticky", md: "static" },
-    top: { xs: 0, md: "auto" },
+    position: { md: "static", xs: "sticky" },
+    top: { md: "auto", xs: 0 },
     w: "100%",
     zIndex: r,
-    ...o
-  },
-  /* @__PURE__ */ e.createElement(h, { m: "0", variant: "h3", w: "100%" }, t)
-), q = a.divBox`
-  flex: 1;
-  margin: 0 auto;
-  width: 100%;
-`, z = a.divBox(
-  ({ size: t }) => c`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    height: 48;
-    width: 48;
-    border-radius: md;
-    background-color: beige-20;
-    transition: background-color ${n("transitions.medium")};
-
-    ${t === "sm" && c`
-      height: 32;
-      width: 32;
-    `}
-  `
-), H = m(
-  ({
-    children: t,
-    getPersistentElements: r,
-    maxWidth: o = 820,
-    store: s,
-    ...i
-  }, d) => {
-    const u = x(), p = () => Array.from(
-      r ? r() : document.querySelectorAll("[data-wui-persistent]")
-    ), b = !!r || (($) => {
-      const D = $.target;
-      return !p().some(
-        (B) => B.contains(D)
-      );
-    });
-    return /* @__PURE__ */ e.createElement(
-      N,
-      {
-        ...i,
-        autoFocusOnShow: !1,
-        getPersistentElements: p,
-        h: { _: "100%", md: "calc(100% - 3rem)" },
-        hideOnInteractOutside: b,
-        overflow: "hidden",
-        placement: "bottom",
-        ref: d,
-        store: s,
-        style: {
-          borderTopLeftRadius: u.radii.xxl,
-          borderTopRightRadius: u.radii.xxl
-        },
-        withBackdrop: !0
-      },
-      /* @__PURE__ */ e.createElement(l, { h: "100%", mt: { _: "xl", md: "3xl" }, overflowY: "auto", w: "100%" }, /* @__PURE__ */ e.createElement(q, { maxWidth: o }, /* @__PURE__ */ e.createElement(l, { p: { _: "0 md xl", md: "0 xl 3xl" } }, t)))
-    );
+    ...o,
+    children: /* @__PURE__ */ e.jsx(g, { m: "0", variant: "h3", w: "100%", children: t })
   }
-), Z = ({
-  action: t,
-  icon: r,
-  onBackButtonClick: o,
-  subtitle: s,
-  title: i
-}) => /* @__PURE__ */ e.createElement(
-  l,
-  {
-    alignItems: { md: "center" },
-    backgroundColor: "neutral-10",
-    display: "flex",
-    flexDirection: { _: "column", md: "row" },
-    gap: "xl",
-    justifyContent: "space-between",
-    mb: "xl",
-    pb: "md",
-    position: "sticky",
-    top: 0,
-    zIndex: 1
-  },
-  /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" } }, !!o && /* @__PURE__ */ e.createElement(I, { onClick: o, shape: "circle", size: "lg", variant: "ghost" }, /* @__PURE__ */ e.createElement(C, null)), !!r && /* @__PURE__ */ e.createElement(J, { icon: r }), /* @__PURE__ */ e.createElement(l, { display: "flex", flexDirection: "column", gap: "xxs" }, /* @__PURE__ */ e.createElement(h, { pr: "xl", variant: "h3" }, i), s)),
-  t && /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md" }, t)
-), J = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.createElement(z, { size: r }, /* @__PURE__ */ e.createElement(t, { color: "neutral-90", size: r })), K = m(
+), K = d(
   ({
     children: t,
     hideOnInteractOutside: r = !0,
     placement: o = "right",
-    size: s = "lg",
-    store: i,
-    withBackdrop: d = !1,
+    size: i = "lg",
+    store: a,
+    withBackdrop: m = !1,
     withCloseButton: u = !0,
-    ...p
-  }, f) => /* @__PURE__ */ e.createElement(
+    ...x
+  }, p) => /* @__PURE__ */ e.jsx(
     O,
     {
-      backdrop: d ? /* @__PURE__ */ e.createElement(w, { hideOnInteractOutside: r }) : !1,
+      backdrop: m ? /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: r }) : !1,
       hideOnInteractOutside: r,
-      modal: d,
-      ref: f,
-      render: /* @__PURE__ */ e.createElement(j, { placement: o, size: s }),
-      store: i,
-      ...p
-    },
-    /* @__PURE__ */ e.createElement(e.Fragment, null, u && /* @__PURE__ */ e.createElement(E, null), t)
+      modal: m,
+      ref: p,
+      render: /* @__PURE__ */ e.jsx(L, { placement: o, size: i }),
+      store: a,
+      ...x,
+      children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        u ? /* @__PURE__ */ e.jsx(j, {}) : null,
+        t
+      ] })
+    }
   )
 );
 function ct(t = {}) {
@@ -251,24 +263,24 @@ function ct(t = {}) {
 const M = ({
   hideOnInteractOutside: t = !0,
   ...r
-}) => /* @__PURE__ */ e.createElement(w, { hideOnInteractOutside: t, ...r }), y = m(({ as: t, store: r, ...o }, s) => /* @__PURE__ */ e.createElement(
+}) => /* @__PURE__ */ e.jsx(w, { hideOnInteractOutside: t, ...r }), y = d(({ as: t, store: r, ...o }, i) => /* @__PURE__ */ e.jsx(
   T,
   {
-    ref: s,
-    render: t ? (i) => /* @__PURE__ */ e.createElement(t, { ...i }) : void 0,
+    ref: i,
+    render: t ? (a) => /* @__PURE__ */ e.jsx(t, { ...a }) : void 0,
     store: r,
     ...o
   }
 )), N = Object.assign(K, {
-  Trigger: y,
   Backdrop: M,
-  Close: E,
-  Title: X,
-  Content: L,
-  Footer: W
-}), mt = Object.assign(H, { Trigger: y, Header: Z });
+  Close: j,
+  Content: H,
+  Footer: Z,
+  Title: J,
+  Trigger: y
+}), dt = Object.assign(R, { Header: _, Trigger: y });
 export {
-  mt as AssetDrawer,
+  dt as AssetDrawer,
   N as Drawer,
   M as DrawerBackdrop,
   y as Trigger,