welcome-ui 10.0.0-alpha.4 → 10.0.0-alpha.5

package/dist/Modal.js

@@ -1,165 +1,196 @@
 "use client";
-import { jsx as o, jsxs as _ } from "react/jsx-runtime";
-import { u as k } from "./RTNCFSKZ-LcIdBwa8.js";
-import { D as y, u as I } from "./NI3IVY7K-DpF3td-7.js";
-import { forwardRef as c, isValidElement as B, cloneElement as C, useState as S, useEffect as A } from "react";
-import { c as a } from "./index-PAaZGbyz.js";
+import './Modal.css';
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import { b as R } from "./RTNCFSKZ-BywELldk.js";
+import { D as V, u as q } from "./NI3IVY7K-Dy240mkD.js";
+import { forwardRef as l, isValidElement as G, cloneElement as J, useState as K, useEffect as L } from "react";
+import { c as r } from "./index-PAaZGbyz.js";
 import { f as j } from "./forwardRefWithAs-8eP3ZN15.js";
-import { D as g } from "./DSAASPLT-C-2xDjIv.js";
-import { Icon as T } from "./Icon.js";
-import { Button as E } from "./Button.js";
-import { Text as u } from "./Text.js";
-import { CloseButton as M } from "./CloseButton.js";
-import { D as H } from "./ZTXFEM5L-CjFLRObi.js";
-const R = "_root_1ruus_3", W = "_hideOnInteractOutside_1ruus_19", F = "_dialog_1ruus_117", i = {
-  root: R,
+import { D as y } from "./DSAASPLT-Fx1kuAsk.js";
+import { Icon as P } from "./Icon.js";
+import { Button as Q } from "./Button.js";
+import { Text as m } from "./Text.js";
+import { CloseButton as U } from "./CloseButton.js";
+import { D as X } from "./ZTXFEM5L-WGHY_jqg.js";
+const Y = "_root_1ruus_3", Z = "_hideOnInteractOutside_1ruus_19", ee = "_dialog_1ruus_117", i = {
+  root: Y,
   "asset-backdrop": "_asset-backdrop_1ruus_8",
-  hideOnInteractOutside: W,
+  hideOnInteractOutside: Z,
   "iframe-wrapper": "_iframe-wrapper_1ruus_25",
   "asset-wrapper": "_asset-wrapper_1ruus_48",
   "asset-title-wrapper": "_asset-title-wrapper_1ruus_56",
   "asset-title": "_asset-title_1ruus_56",
   "asset-content": "_asset-content_1ruus_96",
-  dialog: F,
+  dialog: ee,
   "close-button": "_close-button_1ruus_159"
-}, V = a(i), q = ({ children: t, ...e }) => /* @__PURE__ */ o(E, { className: V("close-button"), variant: "primary-neutral", ...e, children: t }), G = a(i), J = c(
-  ({ hideOnInteractOutside: t, ...e }, s) => /* @__PURE__ */ o(
+}, te = r(i), x = ({ children: e, ...t }) => /* @__PURE__ */ s(Q, { className: te("close-button"), variant: "primary-neutral", ...t, children: e });
+x.displayName = "AssetModal.Close";
+const se = r(i), M = l(
+  ({ hideOnInteractOutside: e, ...t }, o) => /* @__PURE__ */ s(
     "div",
     {
-      className: G("asset-backdrop", t && "hideOnInteractOutside"),
-      ...e,
-      ref: s,
-      children: /* @__PURE__ */ o(
-        g,
+      className: se("asset-backdrop", e && "hideOnInteractOutside"),
+      ...t,
+      ref: o,
+      children: /* @__PURE__ */ s(
+        y,
         {
-          render: /* @__PURE__ */ o(q, { children: /* @__PURE__ */ o(T, { name: "times" }) })
+          render: /* @__PURE__ */ s(x, { children: /* @__PURE__ */ s(P, { name: "times" }) })
         }
       )
     }
   )
-), K = a(i), L = ({
-  children: t,
-  ...e
-}) => /* @__PURE__ */ o("div", { className: K("root", "asset-content"), ...e, children: t }), P = a(i), N = ({ children: t, ...e }) => /* @__PURE__ */ o(u, { as: "p", className: P("asset-title"), lines: 2, variant: "heading-md-strong", ...e, children: t }), z = a(i), Q = c(
-  ({ children: t, customContent: e, subtitle: s, title: r, ...d }, n) => /* @__PURE__ */ _("div", { className: z("root", "asset-wrapper"), ref: n, ...d, children: [
-    t,
-    /* @__PURE__ */ _("div", { className: z("root", "asset-title-wrapper"), children: [
-      e,
-      !e && s ? /* @__PURE__ */ o(u, { variant: "label-md", children: s }) : null,
-      !e && r ? /* @__PURE__ */ o(N, { children: r }) : null
+);
+M.displayName = "AssetModal.Backdrop";
+const oe = r(i), $ = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { className: oe("root", "asset-content"), ...t, children: e });
+$.displayName = "AssetModal.Content";
+const ae = r(i), f = ({ children: e, ...t }) => /* @__PURE__ */ s(m, { as: "p", className: ae("asset-title"), lines: 2, variant: "heading-md-strong", ...t, children: e });
+f.displayName = "AssetModal.Title";
+const g = r(i), v = l(
+  ({ children: e, customContent: t, subtitle: o, title: a, ...d }, n) => /* @__PURE__ */ _("div", { className: g("root", "asset-wrapper"), ref: n, ...d, children: [
+    e,
+    /* @__PURE__ */ _("div", { className: g("root", "asset-title-wrapper"), children: [
+      t,
+      !t && o ? /* @__PURE__ */ s(m, { variant: "label-md", children: o }) : null,
+      !t && a ? /* @__PURE__ */ s(f, { children: a }) : null
     ] })
   ] })
-), U = a(i), X = ({
-  children: t,
-  ...e
-}) => /* @__PURE__ */ o("div", { className: U("root", "dialog"), ...e, children: t }), Y = a(i), Z = ({ children: t }) => /* @__PURE__ */ o("div", { className: Y("root", "iframe-wrapper"), children: t }), tt = Object.assign(X, {
-  AssetWithTitle: Q,
-  Backdrop: J,
-  Content: L,
-  Iframe: Z,
-  Title: N
-}), et = "_root_a4zjh_4", ot = "_body_a4zjh_48", st = "_footer_a4zjh_48", rt = "_header_a4zjh_48", at = "_scrollable_a4zjh_60", nt = "_content_a4zjh_66", ct = "_close_a4zjh_66", it = "_backdrop_a4zjh_85", lt = "_hideOnInteractOutside_a4zjh_96", dt = "_icon_a4zjh_127", l = {
-  root: et,
-  body: ot,
-  footer: st,
-  header: rt,
-  scrollable: at,
-  content: nt,
+);
+v.displayName = "AssetModal.AssetWithTitle";
+const re = r(i), w = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { className: re("root", "dialog"), ...t, children: e });
+w.displayName = "AssetModal";
+const ne = r(i), O = ({ children: e }) => /* @__PURE__ */ s("div", { className: ne("root", "iframe-wrapper"), children: e });
+O.displayName = "AssetModal.Iframe";
+const le = Object.assign(w, {
+  AssetWithTitle: v,
+  Backdrop: M,
+  Content: $,
+  Iframe: O,
+  Title: f
+}), ie = "_root_a4zjh_4", ce = "_body_a4zjh_48", de = "_footer_a4zjh_48", _e = "_header_a4zjh_48", me = "_scrollable_a4zjh_60", ue = "_content_a4zjh_66", pe = "_close_a4zjh_66", he = "_backdrop_a4zjh_85", fe = "_hideOnInteractOutside_a4zjh_96", Ne = "_icon_a4zjh_127", c = {
+  root: ie,
+  body: ce,
+  footer: de,
+  header: _e,
+  scrollable: me,
+  content: ue,
   "with-close-button": "_with-close-button_a4zjh_66",
-  close: ct,
+  close: pe,
   "size-lg": "_size-lg_a4zjh_69",
   "size-md": "_size-md_a4zjh_73",
   "size-sm": "_size-sm_a4zjh_77",
   "size-xs": "_size-xs_a4zjh_81",
-  backdrop: it,
-  hideOnInteractOutside: lt,
+  backdrop: he,
+  hideOnInteractOutside: fe,
   "header-subtitle": "_header-subtitle_a4zjh_124",
   "header-title": "_header-title_a4zjh_124",
-  icon: dt,
+  icon: Ne,
   "footer-children-wrapper": "_footer-children-wrapper_a4zjh_158",
   "footer-information": "_footer-information_a4zjh_163",
   "footer-information-title": "_footer-information-title_a4zjh_170",
   "footer-information-subtitle": "_footer-information-subtitle_a4zjh_174"
-}, _t = a(l), ut = c(
-  ({ backdrop: t, hideOnInteractOutside: e, ...s }, r) => t === !0 ? /* @__PURE__ */ o(
+}, be = r(c), A = l(
+  ({ backdrop: e, hideOnInteractOutside: t, ...o }, a) => e === !0 ? /* @__PURE__ */ s(
     "div",
     {
-      className: _t("backdrop", e && "hideOnInteractOutside"),
-      ref: r,
-      ...s
+      className: be("backdrop", t && "hideOnInteractOutside"),
+      ref: a,
+      ...o
     }
-  ) : B(t) ? C(t, { ref: r, ...s }) : null
-), mt = a(l), ht = c((t, e) => /* @__PURE__ */ o("section", { className: mt("body"), ref: e, ...t })), ft = a(l), x = (t) => /* @__PURE__ */ o(g, { render: /* @__PURE__ */ o(M, { className: ft("close"), ...t }) }), pt = a(l), bt = c(
-  ({ children: t, withClosingButton: e = !0, ...s }, r) => /* @__PURE__ */ _("div", { className: pt("content", e && "with-close-button"), ref: r, ...s, children: [
-    /* @__PURE__ */ o(x, {}),
-    t
+  ) : G(e) ? J(e, { ref: a, ...o }) : null
+);
+A.displayName = "Modal.Backdrop";
+const ze = r(c), k = l((e, t) => /* @__PURE__ */ s("section", { className: ze("body"), ref: t, ...e }));
+k.displayName = "Modal.Body";
+const ge = r(c), N = (e) => /* @__PURE__ */ s(y, { render: /* @__PURE__ */ s(U, { className: ge("close"), ...e }) });
+N.displayName = "Modal.Close";
+const je = r(c), B = l(
+  ({ children: e, withClosingButton: t = !0, ...o }, a) => /* @__PURE__ */ _("div", { className: je("content", t && "with-close-button"), ref: a, ...o, children: [
+    /* @__PURE__ */ s(N, {}),
+    e
   ] })
-), m = a(l), zt = c(
-  ({ children: t, information: e, ...s }, r) => /* @__PURE__ */ _("footer", { className: m("footer"), ref: r, ...s, children: [
-    t ? /* @__PURE__ */ o("div", { className: m("footer-children-wrapper"), children: t }) : null,
-    e ? /* @__PURE__ */ _("div", { className: m("footer-information"), children: [
-      /* @__PURE__ */ o(u, { className: m("footer-information-title"), variant: "label-md", children: e.title }),
-      /* @__PURE__ */ o(u, { className: m("footer-information-subtitle"), variant: "body-md", children: e.subtitle })
+);
+B.displayName = "Modal.Content";
+const u = r(c), C = l(
+  ({ children: e, information: t, ...o }, a) => /* @__PURE__ */ _("footer", { className: u("footer"), ref: a, ...o, children: [
+    e ? /* @__PURE__ */ s("div", { className: u("footer-children-wrapper"), children: e }) : null,
+    t ? /* @__PURE__ */ _("div", { className: u("footer-information"), children: [
+      /* @__PURE__ */ s(m, { className: u("footer-information-title"), variant: "label-md", children: t.title }),
+      /* @__PURE__ */ s(m, { className: u("footer-information-subtitle"), variant: "body-md", children: t.subtitle })
     ] }) : null
   ] })
-), f = a(l), jt = c(
-  ({ icon: t, subtitle: e, title: s, ...r }, d) => /* @__PURE__ */ _("header", { className: f("header", t && "icon"), ref: d, ...r, children: [
-    /* @__PURE__ */ o(x, {}),
-    t,
-    /* @__PURE__ */ o(u, { as: "h4", className: f("header-title"), variant: "heading-md-strong", children: s }),
-    e ? /* @__PURE__ */ o(u, { className: f("header-subtitle"), children: e }) : null
+);
+C.displayName = "Modal.Footer";
+const h = r(c), D = l(
+  ({ icon: e, subtitle: t, title: o, ...a }, d) => /* @__PURE__ */ _("header", { className: h("header", e && "icon"), ref: d, ...a, children: [
+    /* @__PURE__ */ s(N, {}),
+    e,
+    /* @__PURE__ */ s(m, { as: "h4", className: h("header-title"), variant: "heading-md-strong", children: o }),
+    t ? /* @__PURE__ */ s(m, { className: h("header-subtitle"), children: t }) : null
   ] })
-), gt = j(
-  ({ as: t, store: e, ...s }, r) => /* @__PURE__ */ o(H, { ref: r, render: t ? /* @__PURE__ */ o(t, {}) : void 0, store: e, ...s })
-), Nt = a(l);
-function Tt(t) {
-  const { onClose: e, setOpen: s, ...r } = t || {};
-  return I({
+);
+D.displayName = "Modal.Header";
+const I = j(
+  ({ as: e, store: t, ...o }, a) => /* @__PURE__ */ s(X, { ref: a, render: e ? /* @__PURE__ */ s(e, {}) : void 0, store: t, ...o })
+);
+I.displayName = "Modal.Trigger";
+const ye = r(c);
+function Te(e) {
+  const { onClose: t, setOpen: o, ...a } = e || {};
+  return q({
     setOpen: (n) => {
-      !n && e && e(), s == null || s(n);
+      !n && t && t(), o == null || o(n);
     },
-    ...r
+    ...a
   });
 }
-const xt = j(
+const T = j(
   ({
-    ariaLabel: t,
+    ariaLabel: e,
     /** for render property */
-    as: e,
-    backdrop: s = !0,
-    children: r,
+    as: t,
+    backdrop: o = !0,
+    children: a,
     className: d,
     hideOnInteractOutside: n = !0,
-    size: $ = "lg",
-    store: p,
-    ...v
-  }, w) => {
-    const [O, D] = S(!1), { contentElement: h, open: b } = k(p);
-    return A(() => {
-      b && h && D(h.scrollHeight > h.offsetHeight);
-    }, [h, b]), /* @__PURE__ */ o(
-      y,
+    size: S = "lg",
+    store: b,
+    ...E
+  }, H) => {
+    const [W, F] = K(!1), { contentElement: p, open: z } = R(b);
+    return L(() => {
+      z && p && F(p.scrollHeight > p.offsetHeight);
+    }, [p, z]), /* @__PURE__ */ s(
+      V,
       {
-        backdrop: /* @__PURE__ */ o(ut, { backdrop: s, hideOnInteractOutside: n }),
+        backdrop: /* @__PURE__ */ s(A, { backdrop: o, hideOnInteractOutside: n }),
         hideOnInteractOutside: n,
-        ref: w,
-        render: e ? /* @__PURE__ */ o(e, {}) : /* @__PURE__ */ o("div", { className: Nt("root", `size-${$}`, O && "scrollable", d) }),
-        store: p,
-        ...v,
-        "aria-label": t,
-        children: r
+        ref: H,
+        render: t ? /* @__PURE__ */ s(t, {}) : /* @__PURE__ */ s("div", { className: ye("root", `size-${S}`, W && "scrollable", d) }),
+        store: b,
+        ...E,
+        "aria-label": e,
+        children: a
       }
     );
   }
-), Et = Object.assign(xt, {
-  Body: ht,
-  Content: bt,
-  Footer: zt,
-  Header: jt,
-  Trigger: gt
-}), Mt = tt;
+);
+T.displayName = "Modal";
+const Se = Object.assign(T, {
+  Body: k,
+  Content: B,
+  Footer: C,
+  Header: D,
+  Trigger: I
+}), Ee = le;
 export {
-  Mt as AssetModal,
-  Et as Modal,
-  Tt as useModal
+  Ee as AssetModal,
+  Se as Modal,
+  Te as useModal
 };