@sproutsocial/seeds-react-modal 1.0.2 → 1.0.4

package/dist/v2/index.js

@@ -0,0 +1,694 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/index.ts
+var v2_exports = {};
+__export(v2_exports, {
+  BODY_PADDING: () => BODY_PADDING,
+  DEFAULT_MODAL_BG: () => DEFAULT_MODAL_BG,
+  DEFAULT_MODAL_WIDTH: () => DEFAULT_MODAL_WIDTH,
+  DEFAULT_MODAL_Z_INDEX: () => DEFAULT_MODAL_Z_INDEX,
+  DEFAULT_OVERLAY_Z_INDEX_OFFSET: () => DEFAULT_OVERLAY_Z_INDEX_OFFSET,
+  MODAL_PRIORITY_Z_INDEX: () => MODAL_PRIORITY_Z_INDEX,
+  MODAL_SIZE_PRESETS: () => MODAL_SIZE_PRESETS,
+  Modal: () => ModalV2_default,
+  ModalAction: () => ModalAction,
+  ModalClose: () => ModalClose,
+  ModalCloseButton: () => ModalCloseButton,
+  ModalContent: () => ModalContent,
+  ModalDescription: () => ModalDescription,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
+  ModalRail: () => ModalRail,
+  ModalTrigger: () => ModalTrigger
+});
+module.exports = __toCommonJS(v2_exports);
+
+// src/v2/ModalV2.tsx
+var React10 = __toESM(require("react"));
+var Dialog8 = __toESM(require("@radix-ui/react-dialog"));
+
+// src/v2/ModalV2Styles.tsx
+var import_react = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+
+// src/shared/constants.ts
+var DEFAULT_MODAL_Z_INDEX = 6;
+var DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;
+var DEFAULT_MODAL_WIDTH = "600px";
+var DEFAULT_MODAL_BG = "container.background.base";
+var BODY_PADDING = "64px";
+var MODAL_SIZE_PRESETS = {
+  small: "400px",
+  medium: "600px",
+  large: "800px",
+  full: "90vw"
+};
+var MODAL_PRIORITY_Z_INDEX = {
+  low: 100,
+  medium: 1e3,
+  high: 2e3
+};
+
+// src/v2/ModalV2Styles.tsx
+var StyledOverlay = (0, import_styled_components.default)(Dialog.Overlay)`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: ${(props) => props.theme.colors.overlay.background.base};
+  opacity: 0;
+  will-change: opacity;
+  transition: opacity ${(props) => props.theme.duration.medium}
+    ${(props) => props.theme.easing.ease_inout};
+  z-index: ${(props) => props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};
+
+  ${import_styled_system.zIndex}
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+  }
+`;
+var StyledContent = (0, import_styled_components.default)(Dialog.Content)`
+  position: fixed;
+  ${(props) => props.draggable ? `
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      ` : `
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      `}
+  display: flex;
+  flex-direction: column;
+  border-radius: ${(props) => props.theme.radii[600]};
+  box-shadow: ${(props) => props.theme.shadows.medium};
+  filter: blur(0);
+  color: ${(props) => props.theme.colors.text.body};
+  outline: none;
+  max-width: calc(100vw - ${BODY_PADDING});
+  max-height: calc(100vh - ${BODY_PADDING});
+  z-index: ${(props) => props.zIndex || 1e3};
+
+  /* Draggable styling */
+  ${(props) => props.draggable && `
+    cursor: ${props.isDragging ? "grabbing" : "grab"};
+    user-select: none;
+  `}
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: calc(100vh - ${BODY_PADDING});
+  }
+
+  ${import_styled_system.width}
+  ${import_seeds_react_system_props.COMMON}
+
+  /* Enhanced Radix Dialog animations */
+  opacity: 0;
+  ${(props) => !props.draggable ? `
+    transform: translate(-50%, -50%) scale(0.95);
+    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},
+      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
+  ` : `
+    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
+  `}
+
+  &[data-state="open"] {
+    opacity: 1;
+    ${(props) => !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+    ${(props) => !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}
+  }
+`;
+var Content2 = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  font-family: ${(props) => props.theme.fontFamily};
+  min-height: 80px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 ${(props) => props.theme.space[300]}
+    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    flex-basis: 100%;
+  }
+`;
+var Header = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[300]};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+`;
+var Footer = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[300]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
+`;
+StyledOverlay.displayName = "ModalOverlay";
+StyledContent.displayName = "ModalContent";
+Content2.displayName = "ModalContent";
+Header.displayName = "ModalHeader";
+Footer.displayName = "ModalFooter";
+
+// src/v2/components/ModalHeader.tsx
+var React3 = __toESM(require("react"));
+var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+
+// src/v2/components/ModalCloseButton.tsx
+var React2 = __toESM(require("react"));
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var CloseButtonWrapper = import_styled_components2.default.button`
+  width: ${(p) => p.size || 44}px;
+  height: ${(p) => p.size || 44}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  border: none;
+  background: rgba(22, 32, 32, 0.56);
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  ${(p) => p.position === "absolute" && `
+    position: absolute;
+    top: 0px;
+    ${p.side || "right"}: ${p.offset || -48}px;
+    z-index: 1;
+  `}
+
+  &:hover {
+    background: rgba(22, 32, 32, 0.7);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var ModalCloseButton = (props) => {
+  const {
+    children,
+    onClick,
+    asChild,
+    closeButtonLabel = "Close modal",
+    size = 44,
+    position = "absolute",
+    side = "right",
+    offset = -48,
+    ...rest
+  } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog2.Close, { asChild: true, children: React2.cloneElement(children, {
+      onClick: handleClick,
+      ...rest
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CloseButtonWrapper,
+    {
+      onClick: handleClick,
+      size,
+      position,
+      side,
+      offset,
+      "aria-label": closeButtonLabel,
+      title: closeButtonLabel,
+      ...rest,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { name: "x-outline", size: "small" })
+    }
+  ) });
+};
+ModalCloseButton.displayName = "ModalCloseButton";
+
+// src/v2/components/ModalHeader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ModalHeader = (props) => {
+  const {
+    title,
+    subtitle,
+    children,
+    bordered,
+    titleProps = {},
+    subtitleProps = {},
+    showInlineClose,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Header, { ...rest, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box2.default, { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog3.Title, { asChild: true, ...titleProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default.Headline, { children: title }) }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog3.Description, { asChild: true, ...subtitleProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default, { as: "div", fontSize: 200, children: subtitle }) })
+    ] }),
+    showInlineClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalCloseButton, { position: "relative", offset: 0 }) })
+  ] }) });
+};
+ModalHeader.displayName = "ModalHeader";
+
+// src/v2/components/ModalFooter.tsx
+var React4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ModalFooter = (props) => {
+  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Footer,
+    {
+      bg,
+      borderTop: 500,
+      borderColor: "container.border.base",
+      ...rest,
+      children
+    }
+  );
+};
+ModalFooter.displayName = "ModalFooter";
+
+// src/v2/components/ModalContent.tsx
+var React5 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ModalContent = React5.forwardRef(({ children, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Content2, { "data-qa-modal": true, ref, ...rest, children });
+});
+ModalContent.displayName = "ModalContent";
+
+// src/v2/components/ModalDescription.tsx
+var React6 = __toESM(require("react"));
+var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModalDescription = React6.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_box3.default, { ref, ...rest, children }) });
+});
+ModalDescription.displayName = "ModalDescription";
+
+// src/v2/components/ModalTrigger.tsx
+var React7 = __toESM(require("react"));
+var Dialog5 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ModalTrigger = (props) => {
+  const { children, onClick, asChild, ...rest } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog5.Trigger, { asChild: true, children: React7.cloneElement(children, {
+      onClick: handleClick,
+      ...rest
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_button.default, { onClick: handleClick, ...rest, children }) });
+};
+ModalTrigger.displayName = "ModalTrigger";
+
+// src/v2/components/ModalClose.tsx
+var React8 = require("react");
+var Dialog6 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalClose = (props) => {
+  const { children, onClick, asChild = false, ...rest } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog6.Close, { asChild, onClick: handleClick, ...rest, children });
+};
+ModalClose.displayName = "ModalClose";
+
+// src/v2/components/ModalRail.tsx
+var React9 = __toESM(require("react"));
+var Dialog7 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Rail = import_styled_components3.default.div`
+  position: absolute;
+  top: ${(p) => p.offset}px;
+  ${(p) => p.side === "right" ? `right: calc(-1 * (${p.size}px + ${p.offset}px));` : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}
+  display: grid;
+  grid-auto-flow: row;
+  gap: ${(p) => p.gap}px;
+  z-index: 1;
+
+  @media (max-width: ${(p) => p.collapseAt}px) {
+    ${(p) => p.side === "right" ? `right: ${p.offset}px;` : `left: ${p.offset}px;`}
+  }
+`;
+var RailBtn = import_styled_components3.default.button`
+  width: ${(p) => p.size}px;
+  height: ${(p) => p.size}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  border: none;
+  background: rgba(22, 32, 32, 0.56);
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(22, 32, 32, 0.7);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var ModalRail = ({
+  side = "right",
+  offset = 12,
+  gap = 12,
+  size = 44,
+  collapseAt = 640,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Rail,
+    {
+      "data-slot": "modal-rail",
+      side,
+      offset,
+      gap,
+      size,
+      collapseAt,
+      "aria-label": "Modal quick actions",
+      children: React9.Children.map(
+        children,
+        (child) => React9.isValidElement(child) ? React9.cloneElement(child, { size }) : child
+      )
+    }
+  );
+};
+var ModalAction = ({
+  "aria-label": ariaLabel,
+  iconName,
+  disabled,
+  size = 44,
+  actionType,
+  onClick,
+  ...rest
+}) => {
+  const Btn = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    RailBtn,
+    {
+      size,
+      "aria-label": ariaLabel,
+      title: ariaLabel,
+      disabled,
+      ...rest,
+      children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_icon2.default, { name: iconName, size: "small" }) : ariaLabel
+    }
+  );
+  return actionType === "close" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog7.Close, { asChild: true, children: Btn }) : React9.cloneElement(Btn, { onClick });
+};
+
+// src/v2/ModalV2.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DraggableModalContent = ({
+  children,
+  computedWidth,
+  bg,
+  computedZIndex,
+  label,
+  dataAttributes,
+  draggable,
+  rest
+}) => {
+  const [position, setPosition] = React10.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React10.useState(false);
+  const contentRef = React10.useRef(null);
+  const handleMouseDown = React10.useCallback(
+    (e) => {
+      if (!draggable) return;
+      const target = e.target;
+      if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.closest("button")) {
+        return;
+      }
+      e.preventDefault();
+      setIsDragging(true);
+      const rect = contentRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const offsetX = e.clientX - rect.left;
+      const offsetY = e.clientY - rect.top;
+      const handleMouseMove = (e2) => {
+        e2.preventDefault();
+        const newX = e2.clientX - offsetX;
+        const newY = e2.clientY - offsetY;
+        const modalWidth = rect.width;
+        const modalHeight = rect.height;
+        const maxX = window.innerWidth - modalWidth;
+        const minX = 0;
+        const maxY = window.innerHeight - modalHeight;
+        const minY = 0;
+        const constrainedX = Math.max(minX, Math.min(maxX, newX));
+        const constrainedY = Math.max(minY, Math.min(maxY, newY));
+        const centerX = window.innerWidth / 2 - modalWidth / 2;
+        const centerY = window.innerHeight / 2 - modalHeight / 2;
+        setPosition({
+          x: constrainedX - centerX,
+          y: constrainedY - centerY
+        });
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [draggable]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    StyledContent,
+    {
+      ref: contentRef,
+      width: computedWidth,
+      bg,
+      zIndex: computedZIndex,
+      "aria-label": label,
+      draggable,
+      isDragging,
+      onMouseDown: handleMouseDown,
+      style: draggable ? {
+        transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
+        transition: isDragging ? "none" : void 0
+      } : void 0,
+      ...dataAttributes,
+      ...rest,
+      children
+    }
+  );
+};
+var Modal = (props) => {
+  const {
+    children,
+    modalTrigger,
+    draggable = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    "aria-label": label,
+    title,
+    subtitle,
+    description,
+    size,
+    priority,
+    data = {},
+    bg = DEFAULT_MODAL_BG,
+    showOverlay = true,
+    actions,
+    railProps,
+    ...rest
+  } = props;
+  const handleOpenChange = React10.useCallback(
+    (newOpen) => {
+      onOpenChange?.(newOpen);
+    },
+    [onOpenChange]
+  );
+  const computedWidth = React10.useMemo(() => {
+    if (size) {
+      if (typeof size === "string" && size in MODAL_SIZE_PRESETS) {
+        return MODAL_SIZE_PRESETS[size];
+      }
+      return size;
+    }
+    return DEFAULT_MODAL_WIDTH;
+  }, [size]);
+  const computedZIndex = React10.useMemo(() => {
+    if (priority) {
+      return MODAL_PRIORITY_Z_INDEX[priority];
+    }
+    return DEFAULT_MODAL_Z_INDEX;
+  }, [priority]);
+  const dataAttributes = React10.useMemo(() => {
+    const attrs = {};
+    Object.entries(data).forEach(([key, value]) => {
+      attrs[`data-${key}`] = String(value);
+    });
+    attrs["data-qa-modal"] = "";
+    if (open !== void 0) {
+      attrs["data-qa-modal-open"] = String(open);
+    }
+    return attrs;
+  }, [data, open]);
+  const shouldRenderHeader = Boolean(title || subtitle);
+  const dialogRootProps = React10.useMemo(() => {
+    const props2 = {};
+    if (open !== void 0) {
+      props2.open = open;
+    } else if (defaultOpen !== void 0) {
+      props2.defaultOpen = defaultOpen;
+    } else {
+      props2.defaultOpen = false;
+    }
+    if (onOpenChange) {
+      props2.onOpenChange = handleOpenChange;
+    }
+    return props2;
+  }, [open, defaultOpen, handleOpenChange, onOpenChange]);
+  const triggers = [];
+  const content = [];
+  if (modalTrigger) {
+    triggers.push(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog8.Trigger, { asChild: true, children: modalTrigger }, "modal-trigger")
+    );
+    content.push(children);
+  } else {
+    React10.Children.forEach(children, (child) => {
+      if (React10.isValidElement(child) && child.type === ModalTrigger) {
+        triggers.push(child);
+      } else {
+        content.push(child);
+      }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog8.Root, { ...dialogRootProps, children: [
+    triggers,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog8.Portal, { children: [
+      showOverlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledOverlay, { zIndex: computedZIndex }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        DraggableModalContent,
+        {
+          computedWidth,
+          bg,
+          computedZIndex,
+          label,
+          dataAttributes,
+          draggable,
+          rest,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalRail, { ...railProps, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                ModalAction,
+                {
+                  actionType: "close",
+                  "aria-label": "Close",
+                  iconName: "x-outline"
+                }
+              ),
+              actions?.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalAction, { ...action }, idx))
+            ] }),
+            shouldRenderHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeader, { title, subtitle }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalDescription, { children: description }),
+            content
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var ModalV2_default = Modal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BODY_PADDING,
+  DEFAULT_MODAL_BG,
+  DEFAULT_MODAL_WIDTH,
+  DEFAULT_MODAL_Z_INDEX,
+  DEFAULT_OVERLAY_Z_INDEX_OFFSET,
+  MODAL_PRIORITY_Z_INDEX,
+  MODAL_SIZE_PRESETS,
+  Modal,
+  ModalAction,
+  ModalClose,
+  ModalCloseButton,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalRail,
+  ModalTrigger
+});
+//# sourceMappingURL=index.js.map