@serendie/ui/dist/components/ModalDialog/ModalDialog.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as e, jsxs as n } from "react/jsx-runtime";
import { dialog_exports as s } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog.js";
import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { Button as i } from "../Button/Button.js";
import { useTranslations as h } from "../../i18n/index.js";
import { cx as u } from "../../styled-system/css/cx.js";
import { sva as b } from "../../styled-system/css/sva.js";
const f = b({
  slots: [
    "backdrop",
    "content",
    "contentInner",
    "title",
    "description",
    "buttonWrapper",
    "closeTrigger"
  ],
  base: {
    backdrop: {
      background: "sd.system.color.component.scrim",
      position: "fixed",
      inset: 0,
      zIndex: "sd.system.elevation.zIndex.modal"
    },
    content: {
      position: "fixed",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      width: "calc(100% - {spacing.sd.system.dimension.spacing.large} * 2)",
      maxWidth: "408px",
      display: "grid",
      gap: "sd.system.dimension.spacing.twoExtraLarge",
      paddingTop: {
        base: "sd.system.dimension.spacing.extraLarge",
        expanded: "sd.system.dimension.spacing.large"
      },
      paddingRight: "sd.system.dimension.spacing.extraLarge",
      paddingBottom: "sd.system.dimension.spacing.large",
      paddingLeft: "sd.system.dimension.spacing.extraLarge",
      backgroundColor: "sd.system.color.component.surfaceContainerBright",
      boxShadow: "sd.system.elevation.shadow.level5",
      borderRadius: "sd.system.dimension.radius.medium",
      zIndex: "sd.system.elevation.zIndex.modal"
    },
    contentInner: {
      display: "grid",
      gap: "sd.system.dimension.spacing.medium"
    },
    title: {
      textStyle: {
        base: "sd.system.typography.title.small_compact",
        expanded: "sd.system.typography.title.small_expanded"
      }
    },
    description: {
      textStyle: {
        base: "sd.system.typography.body.medium_compact",
        expanded: "sd.system.typography.body.medium_expanded"
      }
    },
    buttonWrapper: {
      display: "flex",
      alignItems: "center",
      gap: "sd.system.dimension.spacing.medium",
      expanded: {
        flexDirection: "row-reverse",
        justifyContent: "end"
      }
    }
  }
}), D = ({
  isOpen: d,
  title: a,
  cancelButtonLabel: r,
  submitButtonLabel: m,
  onButtonClick: l,
  submitButtonProps: p,
  children: c,
  className: g,
  ...o
}) => {
  const y = h(), t = f(o);
  return /* @__PURE__ */ e(s.Root, { open: d, ...o, children: /* @__PURE__ */ n(x, { children: [
    /* @__PURE__ */ e(s.Backdrop, { className: t.backdrop }),
    /* @__PURE__ */ e(s.Positioner, { children: /* @__PURE__ */ n(s.Content, { className: u(t.content, g), children: [
      /* @__PURE__ */ n("div", { className: t.contentInner, children: [
        /* @__PURE__ */ e(s.Title, { className: t.title, children: a }),
        /* @__PURE__ */ e(s.Description, { className: t.description, children: c })
      ] }),
      /* @__PURE__ */ n("div", { className: t.buttonWrapper, children: [
        /* @__PURE__ */ e(i, { ...p, onClick: l, children: m }),
        /* @__PURE__ */ e(s.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: r || y("modalDialog.close") }) })
      ] })
    ] }) })
  ] }) });
};
export {
  D as ModalDialog
};