welcome-ui 8.1.0 → 8.2.0-alpha.0

package/dist/Drawer.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { j as r } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { forwardRef as m } from "./System.mjs";
-import n, { th as s, css as d, useTheme as x } from "@xstyled/styled-components";
+import n, { th as s, css as d, useTheme as u } from "@xstyled/styled-components";
 import { Box as l } from "./Box.mjs";
 import { Button as b } from "./Button.mjs";
 import "./Icon.mjs";
@@ -34,10 +34,10 @@ const I = n.divBox`
     `}
   `
 ), T = m(
-  ({ children: t, maxWidth: e = 820, store: o, ...i }, a) => {
-    const c = x();
-    return /* @__PURE__ */ r.jsx(
-      J,
+  ({ children: t, maxWidth: r = 820, store: o, ...i }, a) => {
+    const c = u();
+    return /* @__PURE__ */ e.jsx(
+      G,
       {
         ...i,
         autoFocusOnShow: !1,
@@ -52,17 +52,17 @@ const I = n.divBox`
         },
         withBackdrop: !0,
         withCloseButton: !0,
-        children: /* @__PURE__ */ r.jsx(I, { maxWidth: e, children: /* @__PURE__ */ r.jsx(l, { p: { _: "xl md", md: "3xl xl" }, children: t }) })
+        children: /* @__PURE__ */ e.jsx(I, { maxWidth: r, children: /* @__PURE__ */ e.jsx(l, { p: { _: "xl md", md: "3xl xl" }, children: t }) })
       }
     );
   }
 ), F = ({
   action: t,
-  icon: e,
+  icon: r,
   onBackButtonClick: o,
   subtitle: i,
   title: a
-}) => /* @__PURE__ */ r.jsxs(
+}) => /* @__PURE__ */ e.jsxs(
   l,
   {
     alignItems: { md: "center" },
@@ -78,18 +78,18 @@ const I = n.divBox`
     top: 0,
     zIndex: 1,
     children: [
-      /* @__PURE__ */ r.jsxs(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" }, children: [
-        !!o && /* @__PURE__ */ r.jsx(b, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ r.jsx($, {}) }),
-        !!e && /* @__PURE__ */ r.jsx(O, { icon: e }),
-        /* @__PURE__ */ r.jsxs(l, { display: "flex", flexDirection: "column", gap: "xxs", children: [
-          /* @__PURE__ */ r.jsx(p, { pr: "xl", variant: "h3", children: a }),
+      /* @__PURE__ */ e.jsxs(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" }, children: [
+        !!o && /* @__PURE__ */ e.jsx(b, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e.jsx($, {}) }),
+        !!r && /* @__PURE__ */ e.jsx(O, { icon: r }),
+        /* @__PURE__ */ e.jsxs(l, { display: "flex", flexDirection: "column", gap: "xxs", children: [
+          /* @__PURE__ */ e.jsx(p, { pr: "xl", variant: "h3", children: a }),
           i
         ] })
       ] }),
-      t ? /* @__PURE__ */ r.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t }) : null
+      t ? /* @__PURE__ */ e.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t }) : null
     ]
   }
-), O = ({ icon: t, size: e = "md" }) => /* @__PURE__ */ r.jsx(S, { size: e, children: /* @__PURE__ */ r.jsx(t, { color: "neutral-90", size: e }) }), R = (t) => {
+), O = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.jsx(S, { size: r, children: /* @__PURE__ */ e.jsx(t, { color: "neutral-90", size: r }) }), R = (t) => {
   switch (t) {
     case "bottom":
       return {
@@ -119,30 +119,26 @@ const I = n.divBox`
         top: "0 !important",
         transform: "translateY(-100%)"
       };
-    default:
-      return {};
   }
-}, u = ["sm", "md", "lg"], _ = (t, e) => {
-  switch (e) {
+}, x = ["sm", "md", "lg"], _ = (t, r) => {
+  switch (r) {
     case "bottom":
     case "top":
-      return t && u.includes(t) ? s(`drawers.sizes.vertical.${t}`) : {
+      return x.includes(t) ? s(`drawers.sizes.vertical.${t}`) : {
         height: t
       };
     case "left":
     case "right":
-      return t && u.includes(t) ? s(`drawers.sizes.horizontal.${t}`) : {
+      return x.includes(t) ? s(`drawers.sizes.horizontal.${t}`) : {
         width: t
       };
-    default:
-      return {};
   }
 }, A = n.divBox(
-  ({ placement: t, size: e }) => d`
+  ({ placement: t, size: r }) => d`
     ${s("cards.default")};
     ${s("drawers.default")};
     ${R(t)}
-    ${_(e, t)}
+    ${_(r, t)}
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -185,12 +181,12 @@ const I = n.divBox`
   ${s("drawers.closeButton")};
 `, P = n.divBox`
   ${s("drawers.footer")};
-`, h = ({ zIndex: t = "2", ...e }) => {
-  const o = x();
-  return /* @__PURE__ */ r.jsx(l, { h: "0", children: /* @__PURE__ */ r.jsx(
+`, h = ({ zIndex: t = "2", ...r }) => {
+  const o = u();
+  return /* @__PURE__ */ e.jsx(l, { h: "0", children: /* @__PURE__ */ e.jsx(
     B,
     {
-      render: /* @__PURE__ */ r.jsx(
+      render: /* @__PURE__ */ e.jsx(
         L,
         {
           left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
@@ -198,21 +194,21 @@ const I = n.divBox`
           position: "sticky",
           top: "0",
           zIndex: t,
-          ...e
+          ...r
         }
       )
     }
   ) });
-}, X = m((t, e) => /* @__PURE__ */ r.jsx(E, { flex: "1", overflowY: { md: "auto" }, ref: e, ...t })), H = m((t, e) => /* @__PURE__ */ r.jsx(
+}, X = m((t, r) => /* @__PURE__ */ e.jsx(E, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), z = m((t, r) => /* @__PURE__ */ e.jsx(
   P,
   {
     bottom: { md: "auto", xs: 0 },
     position: { md: "static", xs: "sticky" },
-    ref: e,
+    ref: r,
     w: "100%",
     ...t
   }
-)), Z = ({ children: t, zIndex: e = "1", ...o }) => /* @__PURE__ */ r.jsx(
+)), H = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.jsx(
   Y,
   {
     alignItems: "center",
@@ -221,32 +217,32 @@ const I = n.divBox`
     position: { md: "static", xs: "sticky" },
     top: { md: "auto", xs: 0 },
     w: "100%",
-    zIndex: e,
+    zIndex: r,
     ...o,
-    children: /* @__PURE__ */ r.jsx(p, { m: "0", variant: "h3", w: "100%", children: t })
+    children: /* @__PURE__ */ e.jsx(p, { m: "0", variant: "h3", w: "100%", children: t })
   }
-), q = m(
+), Z = m(
   ({
     children: t,
-    hideOnInteractOutside: e = !0,
+    hideOnInteractOutside: r = !0,
     placement: o = "right",
     size: i = "lg",
     store: a,
     withBackdrop: c = !1,
     withCloseButton: w = !0,
     ...j
-  }, y) => /* @__PURE__ */ r.jsx(
+  }, y) => /* @__PURE__ */ e.jsx(
     k,
     {
-      backdrop: c ? /* @__PURE__ */ r.jsx(f, { hideOnInteractOutside: e }) : !1,
-      hideOnInteractOutside: e,
+      backdrop: c ? /* @__PURE__ */ e.jsx(f, { hideOnInteractOutside: r }) : !1,
+      hideOnInteractOutside: r,
       modal: c,
       ref: y,
-      render: /* @__PURE__ */ r.jsx(A, { placement: o, size: i }),
+      render: /* @__PURE__ */ e.jsx(A, { placement: o, size: i }),
       store: a,
       ...j,
-      children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        w ? /* @__PURE__ */ r.jsx(h, {}) : null,
+      children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        w ? /* @__PURE__ */ e.jsx(h, {}) : null,
         t
       ] })
     }
@@ -255,29 +251,29 @@ const I = n.divBox`
 function st(t = {}) {
   return v({ animated: !0, ...t });
 }
-const G = ({
+const q = ({
   hideOnInteractOutside: t = !0,
-  ...e
-}) => /* @__PURE__ */ r.jsx(f, { hideOnInteractOutside: t, ...e }), g = m(({ as: t, store: e, ...o }, i) => /* @__PURE__ */ r.jsx(
+  ...r
+}) => /* @__PURE__ */ e.jsx(f, { hideOnInteractOutside: t, ...r }), g = m(({ as: t, store: r, ...o }, i) => /* @__PURE__ */ e.jsx(
   C,
   {
     ref: i,
-    render: t ? (a) => /* @__PURE__ */ r.jsx(t, { ...a }) : void 0,
-    store: e,
+    render: t ? (a) => /* @__PURE__ */ e.jsx(t, { ...a }) : void 0,
+    store: r,
     ...o
   }
-)), J = Object.assign(q, {
-  Backdrop: G,
+)), G = Object.assign(Z, {
+  Backdrop: q,
   Close: h,
   Content: X,
-  Footer: H,
-  Title: Z,
+  Footer: z,
+  Title: H,
   Trigger: g
 }), nt = Object.assign(T, { Header: F, Trigger: g });
 export {
   nt as AssetDrawer,
-  J as Drawer,
-  G as DrawerBackdrop,
+  G as Drawer,
+  q as DrawerBackdrop,
   g as Trigger,
   st as useDrawer
 };