welcome-ui/dist/Modal.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsx as o, jsxs as d } from "react/jsx-runtime";
import { u as C } from "./RTNCFSKZ-P4icqVD0.js";
import { D as I, u as y } from "./NI3IVY7K-DxnarnKs.js";
import { forwardRef as c, isValidElement as B, cloneElement as S, useState as A, useEffect as T } from "react";
import { c as n } from "./index-PAaZGbyz.js";
import { f as z } from "./forwardRefWithAs-8eP3ZN15.js";
import { D as v } from "./DSAASPLT-COUlh0RL.js";
import "./Icon-BisRi8B3.js";
import { C as j } from "./index-BJLXLdM3.js";
import { Button as E } from "./Button.js";
import { Text as m } from "./Text.js";
import { CloseButton as M } from "./CloseButton.js";
import { D as H } from "./ZTXFEM5L-BEA_1pIo.js";
const R = "_root_1vbnu_3", W = "_hideOnInteractOutside_1vbnu_19", F = "_dialog_1vbnu_117", i = {
  root: R,
  "asset-backdrop": "_asset-backdrop_1vbnu_8",
  hideOnInteractOutside: W,
  "iframe-wrapper": "_iframe-wrapper_1vbnu_25",
  "asset-wrapper": "_asset-wrapper_1vbnu_48",
  "asset-title-wrapper": "_asset-title-wrapper_1vbnu_56",
  "asset-title": "_asset-title_1vbnu_56",
  "asset-content": "_asset-content_1vbnu_96",
  dialog: F,
  "close-button": "_close-button_1vbnu_159"
}, V = n(i), q = ({ children: t, ...e }) => /* @__PURE__ */ o(E, { className: V("close-button"), shape: "circle", variant: "secondary", ...e, children: t }), G = n(i), J = c(
  ({ hideOnInteractOutside: t, ...e }, s) => /* @__PURE__ */ o(
    "div",
    {
      className: G("asset-backdrop", t && "hideOnInteractOutside"),
      ...e,
      ref: s,
      children: /* @__PURE__ */ o(
        v,
        {
          render: /* @__PURE__ */ o(q, { children: /* @__PURE__ */ o(j, {}) })
        }
      )
    }
  )
), K = n(i), L = ({
  children: t,
  ...e
}) => /* @__PURE__ */ o("div", { className: K("root", "asset-content"), ...e, children: t }), P = n(i), N = ({ children: t, ...e }) => /* @__PURE__ */ o(m, { as: "p", className: P("asset-title"), lines: 2, variant: "h4", ...e, children: t }), g = n(i), Q = c(
  ({ children: t, customContent: e, subtitle: s, title: r, ..._ }, a) => /* @__PURE__ */ d("div", { className: g("root", "asset-wrapper"), ref: a, ..._, children: [
    t,
    /* @__PURE__ */ d("div", { className: g("root", "asset-title-wrapper"), children: [
      e,
      !e && s ? /* @__PURE__ */ o(m, { variant: "subtitle-sm", children: s }) : null,
      !e && r ? /* @__PURE__ */ o(N, { children: r }) : null
    ] })
  ] })
), U = n(i), X = ({
  children: t,
  ...e
}) => /* @__PURE__ */ o("div", { className: U("root", "dialog"), ...e, children: t }), Y = n(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_4g0z0_4", ot = "_body_4g0z0_48", st = "_footer_4g0z0_48", rt = "_header_4g0z0_48", nt = "_scrollable_4g0z0_60", at = "_content_4g0z0_66", ct = "_close_4g0z0_66", it = "_backdrop_4g0z0_85", lt = "_hideOnInteractOutside_4g0z0_96", _t = "_icon_4g0z0_127", l = {
  root: et,
  body: ot,
  footer: st,
  header: rt,
  scrollable: nt,
  content: at,
  "with-close-button": "_with-close-button_4g0z0_66",
  close: ct,
  "size-lg": "_size-lg_4g0z0_69",
  "size-md": "_size-md_4g0z0_73",
  "size-sm": "_size-sm_4g0z0_77",
  "size-xs": "_size-xs_4g0z0_81",
  backdrop: it,
  hideOnInteractOutside: lt,
  "header-subtitle": "_header-subtitle_4g0z0_124",
  "header-title": "_header-title_4g0z0_124",
  icon: _t,
  "footer-children-wrapper": "_footer-children-wrapper_4g0z0_158",
  "footer-information": "_footer-information_4g0z0_163",
  "footer-information-title": "_footer-information-title_4g0z0_170",
  "footer-information-subtitle": "_footer-information-subtitle_4g0z0_174"
}, dt = n(l), mt = c(
  ({ backdrop: t, hideOnInteractOutside: e, ...s }, r) => t === !0 ? /* @__PURE__ */ o(
    "div",
    {
      className: dt("backdrop", e && "hideOnInteractOutside"),
      ref: r,
      ...s
    }
  ) : B(t) ? S(t, { ref: r, ...s }) : null
), ut = n(l), ft = c((t, e) => /* @__PURE__ */ o("section", { className: ut("body"), ref: e, ...t })), pt = n(l), x = (t) => /* @__PURE__ */ o(v, { render: /* @__PURE__ */ o(M, { className: pt("close"), ...t }) }), ht = n(l), bt = c(
  ({ children: t, withClosingButton: e = !0, ...s }, r) => /* @__PURE__ */ d("div", { className: ht("content", e && "with-close-button"), ref: r, ...s, children: [
    /* @__PURE__ */ o(x, {}),
    t
  ] })
), u = n(l), gt = c(
  ({ children: t, information: e, ...s }, r) => /* @__PURE__ */ d("footer", { className: u("footer"), ref: r, ...s, children: [
    t ? /* @__PURE__ */ o("div", { className: u("footer-children-wrapper"), children: t }) : null,
    e ? /* @__PURE__ */ d("div", { className: u("footer-information"), children: [
      /* @__PURE__ */ o(m, { className: u("footer-information-title"), variant: "subtitle-sm", children: e.title }),
      /* @__PURE__ */ o(m, { className: u("footer-information-subtitle"), variant: "sm", children: e.subtitle })
    ] }) : null
  ] })
), p = n(l), zt = c(
  ({ icon: t, subtitle: e, title: s, ...r }, _) => /* @__PURE__ */ d("header", { className: p("header", t && "icon"), ref: _, ...r, children: [
    /* @__PURE__ */ o(x, {}),
    t,
    /* @__PURE__ */ o(m, { className: p("header-title"), variant: "h4", children: s }),
    e ? /* @__PURE__ */ o(m, { className: p("header-subtitle"), children: e }) : null
  ] })
), vt = z(
  ({ as: t, store: e, ...s }, r) => /* @__PURE__ */ o(H, { ref: r, render: t ? /* @__PURE__ */ o(t, {}) : void 0, store: e, ...s })
), Nt = n(l);
function Et(t) {
  const { onClose: e, setOpen: s, ...r } = t || {};
  return y({
    setOpen: (a) => {
      !a && e && e(), s == null || s(a);
    },
    ...r
  });
}
const xt = z(
  ({
    ariaLabel: t,
    /** for render property */
    as: e,
    backdrop: s = !0,
    children: r,
    className: _,
    hideOnInteractOutside: a = !0,
    size: $ = "lg",
    store: h,
    ...w
  }, O) => {
    const [D, k] = A(!1), { contentElement: f, open: b } = C(h);
    return T(() => {
      b && f && k(f.scrollHeight > f.offsetHeight);
    }, [f, b]), /* @__PURE__ */ o(
      I,
      {
        backdrop: /* @__PURE__ */ o(mt, { backdrop: s, hideOnInteractOutside: a }),
        hideOnInteractOutside: a,
        ref: O,
        render: e ? /* @__PURE__ */ o(e, {}) : /* @__PURE__ */ o("div", { className: Nt("root", `size-${$}`, D && "scrollable", _) }),
        store: h,
        ...w,
        "aria-label": t,
        children: r
      }
    );
  }
), Mt = Object.assign(xt, {
  Body: ft,
  Content: bt,
  Footer: gt,
  Header: zt,
  Trigger: vt
}), Ht = tt;
export {
  Ht as AssetModal,
  Mt as Modal,
  Et as useModal
};