welcome-ui 8.1.1 → 8.1.2

package/dist/Drawer.mjs

@@ -1,17 +1,17 @@
 "use client";
-import e from "react";
-import a, { th as n, css as m, useTheme as p } from "@xstyled/styled-components";
-import { CloseButton as b } from "./CloseButton.mjs";
+import r from "react";
+import a, { th as n, css as c, useTheme as x } from "@xstyled/styled-components";
+import { CloseButton as k } from "./CloseButton.mjs";
 import { Box as l } from "./Box.mjs";
-import { D as $ } from "./SYRFVSLH-jn06-eLy.mjs";
-import { forwardRef as d } from "./System.mjs";
-import { Text as f } from "./Text.mjs";
+import { D as v } from "./SYRFVSLH-jn06-eLy.mjs";
+import { forwardRef as m } from "./System.mjs";
+import { Text as h } from "./Text.mjs";
 import "./Icon.mjs";
-import { A as D } from "./index-Bkl89twW.mjs";
-import { Button as B } from "./Button.mjs";
-import { D as k, u as v } from "./JC64G2H7-BzklVBKM.mjs";
-import { D as C } from "./AXB53BZF-BOEe01VW.mjs";
-const I = (t) => {
+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) => {
   switch (t) {
     case "top":
       return {
@@ -42,25 +42,25 @@ const I = (t) => {
         transform: "translateX(-100%)"
       };
   }
-}, u = ["sm", "md", "lg"], S = (t, r) => {
-  switch (r) {
+}, g = ["sm", "md", "lg"], _ = (t, e) => {
+  switch (e) {
     case "top":
     case "bottom":
-      return u.includes(t) ? n(`drawers.sizes.vertical.${t}`) : {
+      return g.includes(t) ? n(`drawers.sizes.vertical.${t}`) : {
         height: t
       };
     case "right":
     case "left":
-      return u.includes(t) ? n(`drawers.sizes.horizontal.${t}`) : {
+      return g.includes(t) ? n(`drawers.sizes.horizontal.${t}`) : {
         width: t
       };
   }
-}, T = a.divBox(
-  ({ placement: t, size: r }) => m`
+}, j = a.divBox(
+  ({ placement: t, size: e }) => c`
     ${n("cards.default")};
     ${n("drawers.default")};
-    ${I(t)}
-    ${S(r, t)}
+    ${F(t)}
+    ${_(e, t)}
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -74,10 +74,10 @@ const I = (t) => {
       transform: translate(0, 0);
     }
   `
-), g = a.divBox.withConfig({
+), w = a.divBox.withConfig({
   shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
 })(
-  ({ hideOnInteractOutside: t }) => m`
+  ({ hideOnInteractOutside: t }) => c`
     ${n("drawers.backdrop")};
     position: fixed;
     top: 0;
@@ -87,7 +87,7 @@ const I = (t) => {
     opacity: 0;
     transition: opacity 150ms ease-in-out;
 
-    ${t && m`
+    ${t && c`
       cursor: pointer;
     `}
 
@@ -95,43 +95,40 @@ const I = (t) => {
       opacity: 1;
     }
   `
-), _ = a.divBox`
+), A = a.divBox`
   ${n("drawers.title")};
-`, j = a.divBox`
+`, R = a.divBox`
   ${n("drawers.content")};
-`, F = a(b)`
+`, P = a(k)`
   ${n("drawers.closeButton")};
-`, O = a.divBox`
+`, Y = a.divBox`
   ${n("drawers.footer")};
-`, x = ({ zIndex: t = "2", ...r }) => {
-  const o = p();
-  return /* @__PURE__ */ e.createElement(l, { h: "0" }, /* @__PURE__ */ e.createElement(
-    $,
+`, E = ({ zIndex: t = "2", ...e }) => {
+  const o = x();
+  return /* @__PURE__ */ r.createElement(l, { h: "0", position: "sticky", top: 0, zIndex: t }, /* @__PURE__ */ r.createElement(
+    v,
     {
-      render: /* @__PURE__ */ e.createElement(
-        F,
+      render: /* @__PURE__ */ r.createElement(
+        P,
         {
           left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
           mt: "lg",
-          position: "sticky",
-          top: "0",
-          zIndex: t,
-          ...r
+          ...e
         }
       )
     }
   ));
-}, R = d((t, r) => /* @__PURE__ */ e.createElement(j, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), A = d((t, r) => /* @__PURE__ */ e.createElement(
-  O,
+}, L = m((t, e) => /* @__PURE__ */ r.createElement(R, { flex: "1", overflowY: { md: "auto" }, ref: e, ...t })), W = m((t, e) => /* @__PURE__ */ r.createElement(
+  Y,
   {
     bottom: { xs: 0, md: "auto" },
     position: { xs: "sticky", md: "static" },
-    ref: r,
+    ref: e,
     w: "100%",
     ...t
   }
-)), Y = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.createElement(
-  _,
+)), X = ({ children: t, zIndex: e = "1", ...o }) => /* @__PURE__ */ r.createElement(
+  A,
   {
     alignItems: "center",
     display: "flex",
@@ -139,17 +136,16 @@ const I = (t) => {
     position: { xs: "sticky", md: "static" },
     top: { xs: 0, md: "auto" },
     w: "100%",
-    zIndex: r,
+    zIndex: e,
     ...o
   },
-  /* @__PURE__ */ e.createElement(f, { m: "0", variant: "h3", w: "100%" }, t)
-), L = a.divBox`
-  overflow-y: scroll;
+  /* @__PURE__ */ r.createElement(h, { m: "0", variant: "h3", w: "100%" }, t)
+), q = a.divBox`
   flex: 1;
   margin: 0 auto;
   width: 100%;
-`, P = a.divBox(
-  ({ size: t }) => m`
+`, z = a.divBox(
+  ({ size: t }) => c`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -160,41 +156,54 @@ const I = (t) => {
     background-color: beige-20;
     transition: background-color ${n("transitions.medium")};
 
-    ${t === "sm" && m`
+    ${t === "sm" && c`
       height: 32;
       width: 32;
     `}
   `
-), X = d(
-  ({ children: t, maxWidth: r = 820, store: o, ...s }, i) => {
-    const c = p();
-    return /* @__PURE__ */ e.createElement(
-      G,
+), H = m(
+  ({
+    children: t,
+    getPersistentElements: e,
+    maxWidth: o = 820,
+    store: s,
+    ...i
+  }, d) => {
+    const u = x(), p = () => Array.from(
+      e ? e() : document.querySelectorAll("[data-wui-persistent]")
+    ), b = !!e || (($) => {
+      const D = $.target;
+      return !p().some(
+        (B) => B.contains(D)
+      );
+    });
+    return /* @__PURE__ */ r.createElement(
+      N,
       {
-        ...s,
+        ...i,
         autoFocusOnShow: !1,
+        getPersistentElements: p,
         h: { _: "100%", md: "calc(100% - 3rem)" },
-        hideOnInteractOutside: !0,
+        hideOnInteractOutside: b,
         placement: "bottom",
-        ref: i,
-        store: o,
+        ref: d,
+        store: s,
         style: {
-          borderTopLeftRadius: c.radii.xxl,
-          borderTopRightRadius: c.radii.xxl
+          borderTopLeftRadius: u.radii.xxl,
+          borderTopRightRadius: u.radii.xxl
         },
-        withBackdrop: !0,
-        withCloseButton: !0
+        withBackdrop: !0
       },
-      /* @__PURE__ */ e.createElement(L, { maxWidth: r }, /* @__PURE__ */ e.createElement(l, { p: { _: "xl md", md: "3xl xl" } }, t))
+      /* @__PURE__ */ r.createElement(q, { maxWidth: o }, /* @__PURE__ */ r.createElement(l, { p: { _: "xl md", md: "3xl xl" } }, t))
     );
   }
-), z = ({
+), Z = ({
   action: t,
-  icon: r,
+  icon: e,
   onBackButtonClick: o,
   subtitle: s,
   title: i
-}) => /* @__PURE__ */ e.createElement(
+}) => /* @__PURE__ */ r.createElement(
   l,
   {
     alignItems: { md: "center" },
@@ -210,58 +219,58 @@ const I = (t) => {
     top: 0,
     zIndex: 1
   },
-  /* @__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)
-), H = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.createElement(P, { size: r }, /* @__PURE__ */ e.createElement(t, { color: "neutral-90", size: r })), Z = d(
+  /* @__PURE__ */ r.createElement(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" } }, !!o && /* @__PURE__ */ r.createElement(I, { onClick: o, shape: "circle", size: "lg", variant: "ghost" }, /* @__PURE__ */ r.createElement(C, null)), !!e && /* @__PURE__ */ r.createElement(J, { icon: e }), /* @__PURE__ */ r.createElement(l, { display: "flex", flexDirection: "column", gap: "xxs" }, /* @__PURE__ */ r.createElement(h, { pr: "xl", variant: "h3" }, i), s)),
+  t && /* @__PURE__ */ r.createElement(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md" }, t)
+), J = ({ icon: t, size: e = "md" }) => /* @__PURE__ */ r.createElement(z, { size: e }, /* @__PURE__ */ r.createElement(t, { color: "neutral-90", size: e })), K = m(
   ({
     children: t,
-    hideOnInteractOutside: r = !0,
+    hideOnInteractOutside: e = !0,
     placement: o = "right",
     size: s = "lg",
     store: i,
-    withBackdrop: c = !1,
-    withCloseButton: w = !0,
-    ...E
-  }, y) => /* @__PURE__ */ e.createElement(
-    k,
+    withBackdrop: d = !1,
+    withCloseButton: u = !0,
+    ...p
+  }, f) => /* @__PURE__ */ r.createElement(
+    O,
     {
-      backdrop: c ? /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: r }) : !1,
-      hideOnInteractOutside: r,
-      modal: c,
-      ref: y,
-      render: /* @__PURE__ */ e.createElement(T, { placement: o, size: s }),
+      backdrop: d ? /* @__PURE__ */ r.createElement(w, { hideOnInteractOutside: e }) : !1,
+      hideOnInteractOutside: e,
+      modal: d,
+      ref: f,
+      render: /* @__PURE__ */ r.createElement(j, { placement: o, size: s }),
       store: i,
-      ...E
+      ...p
     },
-    /* @__PURE__ */ e.createElement(e.Fragment, null, w && /* @__PURE__ */ e.createElement(x, null), t)
+    /* @__PURE__ */ r.createElement(r.Fragment, null, u && /* @__PURE__ */ r.createElement(E, null), t)
   )
 );
-function nt(t = {}) {
-  return v({ animated: !0, ...t });
+function ct(t = {}) {
+  return S({ animated: !0, ...t });
 }
-const q = ({
+const M = ({
   hideOnInteractOutside: t = !0,
-  ...r
-}) => /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: t, ...r }), h = d(({ as: t, store: r, ...o }, s) => /* @__PURE__ */ e.createElement(
-  C,
+  ...e
+}) => /* @__PURE__ */ r.createElement(w, { hideOnInteractOutside: t, ...e }), y = m(({ as: t, store: e, ...o }, s) => /* @__PURE__ */ r.createElement(
+  T,
   {
     ref: s,
-    render: t ? (i) => /* @__PURE__ */ e.createElement(t, { ...i }) : void 0,
-    store: r,
+    render: t ? (i) => /* @__PURE__ */ r.createElement(t, { ...i }) : void 0,
+    store: e,
     ...o
   }
-)), G = Object.assign(Z, {
-  Trigger: h,
-  Backdrop: q,
-  Close: x,
-  Title: Y,
-  Content: R,
-  Footer: A
-}), at = Object.assign(X, { Trigger: h, Header: z });
+)), N = Object.assign(K, {
+  Trigger: y,
+  Backdrop: M,
+  Close: E,
+  Title: X,
+  Content: L,
+  Footer: W
+}), mt = Object.assign(H, { Trigger: y, Header: Z });
 export {
-  at as AssetDrawer,
-  G as Drawer,
-  q as DrawerBackdrop,
-  h as Trigger,
-  nt as useDrawer
+  mt as AssetDrawer,
+  N as Drawer,
+  M as DrawerBackdrop,
+  y as Trigger,
+  ct as useDrawer
 };

package/package.json

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