@sproutsocial/seeds-react-modal 1.0.2 → 1.0.4

package/dist/index.js

@@ -28,14 +28,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Modal: () => Modal_default,
-  default: () => index_default
+var src_exports = {};
+__export(src_exports, {
+  Modal: () => v1_default,
+  ModalAction: () => ModalAction,
+  ModalClose: () => ModalClose,
+  ModalCloseButton: () => ModalCloseButton2,
+  ModalContent: () => ModalContent2,
+  ModalDescription: () => ModalDescription,
+  ModalFooter: () => ModalFooter2,
+  ModalHeader: () => ModalHeader2,
+  ModalRail: () => ModalRail,
+  ModalTrigger: () => ModalTrigger,
+  ModalV2: () => ModalV2_default,
+  default: () => src_default
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
-// src/Modal.tsx
+// src/v1/Modal.tsx
 var React2 = __toESM(require("react"));
 var import_react2 = require("react");
 var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
@@ -43,7 +53,7 @@ var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-butto
 var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
 
-// src/styles.tsx
+// src/v1/styles.tsx
 var import_react = require("react");
 var import_styled_components = __toESM(require("styled-components"));
 var import_styled_system = require("styled-system");
@@ -163,7 +173,7 @@ Content.displayName = "Content";
 Header.displayName = "Modal.Header";
 Footer.displayName = "Modal.Footer";
 
-// src/Modal.tsx
+// src/v1/Modal.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ModalContext = React2.createContext({});
 var ModalHeader = (props) => {
@@ -207,8 +217,8 @@ var Modal = (props) => {
     label,
     onClose,
     closeButtonLabel,
-    width: width2 = "800px",
-    zIndex: zIndex2 = 6,
+    width: width3 = "800px",
+    zIndex: zIndex3 = 6,
     data = {},
     ...rest
   } = props;
@@ -229,8 +239,8 @@ var Modal = (props) => {
       shouldReturnFocusAfterClose: true,
       closeTimeoutMS: 200,
       role: "dialog",
-      width: width2,
-      zIndex: zIndex2,
+      width: width3,
+      zIndex: zIndex3,
       data: {
         "qa-modal": "",
         "qa-modal-isopen": isOpen,
@@ -264,14 +274,645 @@ Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
 var Modal_default = Modal;
 
-// src/ModalTypes.ts
-var React3 = require("react");
-var import_react_modal2 = require("react-modal");
+// src/v1/index.ts
+var v1_default = Modal_default;
+
+// src/v2/ModalV2.tsx
+var React12 = __toESM(require("react"));
+var Dialog8 = __toESM(require("@radix-ui/react-dialog"));
+
+// src/v2/ModalV2Styles.tsx
+var import_react3 = require("react");
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_styled_system2 = require("styled-system");
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_box3 = __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_PADDING2 = "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_components2.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_system2.zIndex}
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+  }
+`;
+var StyledContent = (0, import_styled_components2.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_PADDING2});
+  max-height: calc(100vh - ${BODY_PADDING2});
+  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_PADDING2});
+  }
+
+  ${import_styled_system2.width}
+  ${import_seeds_react_system_props2.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 Content3 = (0, import_styled_components2.default)(import_seeds_react_box3.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 Header2 = (0, import_styled_components2.default)(import_seeds_react_box3.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 Footer2 = (0, import_styled_components2.default)(import_seeds_react_box3.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";
+Content3.displayName = "ModalContent";
+Header2.displayName = "ModalHeader";
+Footer2.displayName = "ModalFooter";
+
+// src/v2/components/ModalHeader.tsx
+var React5 = __toESM(require("react"));
+var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_box4 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+
+// src/v2/components/ModalCloseButton.tsx
+var React4 = __toESM(require("react"));
+var Dialog2 = __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_runtime3 = require("react/jsx-runtime");
+var CloseButtonWrapper = import_styled_components3.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 ModalCloseButton2 = (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_runtime3.jsx)(Dialog2.Close, { asChild: true, children: React4.cloneElement(children, {
+      onClick: handleClick,
+      ...rest
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    CloseButtonWrapper,
+    {
+      onClick: handleClick,
+      size,
+      position,
+      side,
+      offset,
+      "aria-label": closeButtonLabel,
+      title: closeButtonLabel,
+      ...rest,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon2.default, { name: "x-outline", size: "small" })
+    }
+  ) });
+};
+ModalCloseButton2.displayName = "ModalCloseButton";
+
+// src/v2/components/ModalHeader.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ModalHeader2 = (props) => {
+  const {
+    title,
+    subtitle,
+    children,
+    bordered,
+    titleProps = {},
+    subtitleProps = {},
+    showInlineClose,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Header2, { ...rest, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box4.default, { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog3.Title, { asChild: true, ...titleProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_text2.default.Headline, { children: title }) }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog3.Description, { asChild: true, ...subtitleProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_text2.default, { as: "div", fontSize: 200, children: subtitle }) })
+    ] }),
+    showInlineClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_box4.default, { display: "flex", alignItems: "center", justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalCloseButton2, { position: "relative", offset: 0 }) })
+  ] }) });
+};
+ModalHeader2.displayName = "ModalHeader";
+
+// src/v2/components/ModalFooter.tsx
+var React6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModalFooter2 = (props) => {
+  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Footer2,
+    {
+      bg,
+      borderTop: 500,
+      borderColor: "container.border.base",
+      ...rest,
+      children
+    }
+  );
+};
+ModalFooter2.displayName = "ModalFooter";
+
+// src/v2/components/ModalContent.tsx
+var React7 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ModalContent2 = React7.forwardRef(({ children, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Content3, { "data-qa-modal": true, ref, ...rest, children });
+});
+ModalContent2.displayName = "ModalContent";
+
+// src/v2/components/ModalDescription.tsx
+var React8 = __toESM(require("react"));
+var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_box5 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalDescription = React8.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_seeds_react_box5.default, { ref, ...rest, children }) });
+});
+ModalDescription.displayName = "ModalDescription";
+
+// src/v2/components/ModalTrigger.tsx
+var React9 = __toESM(require("react"));
+var Dialog5 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_jsx_runtime8 = 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_runtime8.jsx)(Dialog5.Trigger, { asChild: true, children: React9.cloneElement(children, {
+      onClick: handleClick,
+      ...rest
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_button2.default, { onClick: handleClick, ...rest, children }) });
+};
+ModalTrigger.displayName = "ModalTrigger";
+
+// src/v2/components/ModalClose.tsx
+var React10 = require("react");
+var Dialog6 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ModalClose = (props) => {
+  const { children, onClick, asChild = false, ...rest } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog6.Close, { asChild, onClick: handleClick, ...rest, children });
+};
+ModalClose.displayName = "ModalClose";
+
+// src/v2/components/ModalRail.tsx
+var React11 = __toESM(require("react"));
+var Dialog7 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_seeds_react_icon3 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Rail = import_styled_components4.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_components4.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_runtime10.jsx)(
+    Rail,
+    {
+      "data-slot": "modal-rail",
+      side,
+      offset,
+      gap,
+      size,
+      collapseAt,
+      "aria-label": "Modal quick actions",
+      children: React11.Children.map(
+        children,
+        (child) => React11.isValidElement(child) ? React11.cloneElement(child, { size }) : child
+      )
+    }
+  );
+};
+var ModalAction = ({
+  "aria-label": ariaLabel,
+  iconName,
+  disabled,
+  size = 44,
+  actionType,
+  onClick,
+  ...rest
+}) => {
+  const Btn = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    RailBtn,
+    {
+      size,
+      "aria-label": ariaLabel,
+      title: ariaLabel,
+      disabled,
+      ...rest,
+      children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_seeds_react_icon3.default, { name: iconName, size: "small" }) : ariaLabel
+    }
+  );
+  return actionType === "close" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog7.Close, { asChild: true, children: Btn }) : React11.cloneElement(Btn, { onClick });
+};
+
+// src/v2/ModalV2.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DraggableModalContent = ({
+  children,
+  computedWidth,
+  bg,
+  computedZIndex,
+  label,
+  dataAttributes,
+  draggable,
+  rest
+}) => {
+  const [position, setPosition] = React12.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React12.useState(false);
+  const contentRef = React12.useRef(null);
+  const handleMouseDown = React12.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_runtime11.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 Modal2 = (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 = React12.useCallback(
+    (newOpen) => {
+      onOpenChange?.(newOpen);
+    },
+    [onOpenChange]
+  );
+  const computedWidth = React12.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 = React12.useMemo(() => {
+    if (priority) {
+      return MODAL_PRIORITY_Z_INDEX[priority];
+    }
+    return DEFAULT_MODAL_Z_INDEX;
+  }, [priority]);
+  const dataAttributes = React12.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 = React12.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_runtime11.jsx)(Dialog8.Trigger, { asChild: true, children: modalTrigger }, "modal-trigger")
+    );
+    content.push(children);
+  } else {
+    React12.Children.forEach(children, (child) => {
+      if (React12.isValidElement(child) && child.type === ModalTrigger) {
+        triggers.push(child);
+      } else {
+        content.push(child);
+      }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Dialog8.Root, { ...dialogRootProps, children: [
+    triggers,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Dialog8.Portal, { children: [
+      showOverlay && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledOverlay, { zIndex: computedZIndex }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        DraggableModalContent,
+        {
+          computedWidth,
+          bg,
+          computedZIndex,
+          label,
+          dataAttributes,
+          draggable,
+          rest,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalRail, { ...railProps, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                ModalAction,
+                {
+                  actionType: "close",
+                  "aria-label": "Close",
+                  iconName: "x-outline"
+                }
+              ),
+              actions?.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalAction, { ...action }, idx))
+            ] }),
+            shouldRenderHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalHeader2, { title, subtitle }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalDescription, { children: description }),
+            content
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var ModalV2_default = Modal2;
 
 // src/index.ts
-var index_default = Modal_default;
+var src_default = v1_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Modal
+  Modal,
+  ModalAction,
+  ModalClose,
+  ModalCloseButton,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalRail,
+  ModalTrigger,
+  ModalV2
 });
 //# sourceMappingURL=index.js.map