@sproutsocial/seeds-react-modal 1.1.0 → 2.0.0

package/dist/v2/index.js

@@ -33,39 +33,40 @@ __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,
+  Modal: () => Modal_default,
   ModalAction: () => ModalAction,
-  ModalClose: () => ModalClose,
-  ModalCloseButton: () => ModalCloseButton,
-  ModalContent: () => ModalContent,
+  ModalBody: () => ModalBody,
+  ModalCloseWrapper: () => ModalCloseWrapper,
+  ModalCustomFooter: () => ModalCustomFooter,
+  ModalCustomHeader: () => ModalCustomHeader,
   ModalDescription: () => ModalDescription,
   ModalFooter: () => ModalFooter,
   ModalHeader: () => ModalHeader,
-  ModalRail: () => ModalRail,
-  ModalTrigger: () => ModalTrigger,
-  useDragContext: () => useDragContext
+  ModalRail: () => ModalRail
 });
 module.exports = __toCommonJS(v2_exports);
 
-// src/v2/ModalV2.tsx
-var React10 = __toESM(require("react"));
-var Dialog8 = __toESM(require("@radix-ui/react-dialog"));
+// src/v2/Modal.tsx
+var React11 = __toESM(require("react"));
+var Dialog6 = __toESM(require("@radix-ui/react-dialog"));
+var import_react4 = require("motion/react");
 
-// 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");
+// src/v2/components/ModalHeader.tsx
+var React3 = require("react");
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+
+// src/v2/components/ModalContent.tsx
+var React2 = __toESM(require("react"));
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_react = require("motion/react");
+var import_styled_components = __toESM(require("styled-components"));
 
 // 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";
@@ -75,113 +76,336 @@ var MODAL_SIZE_PRESETS = {
   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};
-
-  /* Allow clicking through overlay when modal is draggable */
-  ${(props) => props.allowInteraction && `
-    pointer-events: none;
-  `}
+var MOBILE_BREAKPOINT = "780px";
+var RAIL_BUTTON_SIZE = 44;
+var RAIL_OFFSET = 12;
+var RAIL_GAP = 12;
+var RAIL_EXTRA_SPACE = RAIL_BUTTON_SIZE + RAIL_OFFSET;
 
-  ${import_styled_system.zIndex}
+// src/v2/components/ModalContent.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 
-  &[data-state="open"] {
-    opacity: 1;
+// src/v2/MotionConfig.ts
+var React = __toESM(require("react"));
+var DURATION_MOBILE = 0.6;
+var DURATION_DESKTOP = 0.3;
+var desktopTransition = {
+  duration: DURATION_DESKTOP,
+  ease: "easeInOut"
+};
+var mobileTransition = {
+  duration: DURATION_MOBILE,
+  ease: "easeInOut"
+};
+var desktopModalVariants = {
+  initial: {
+    opacity: 0,
+    scale: 0.95,
+    x: "-50%",
+    y: "-50%",
+    transition: desktopTransition
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    x: "-50%",
+    y: "-50%",
+    transition: desktopTransition
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    x: "-50%",
+    y: "-50%",
+    transition: desktopTransition
+  }
+};
+var desktopOverlayVariants = {
+  initial: {
+    opacity: 0,
+    transition: desktopTransition
+  },
+  animate: {
+    opacity: 1,
+    transition: desktopTransition
+  },
+  exit: {
+    opacity: 0,
+    transition: desktopTransition
   }
-  &[data-state="closed"] {
-    opacity: 0;
+};
+var mobileDrawerVariants = {
+  initial: {
+    opacity: 0,
+    x: "-50%",
+    y: "100%",
+    transition: mobileTransition
+  },
+  animate: {
+    opacity: 1,
+    x: "-50%",
+    y: 0,
+    transition: mobileTransition
+  },
+  exit: {
+    opacity: 0,
+    x: "-50%",
+    y: "100%",
+    transition: mobileTransition
   }
-`;
-var StyledContent = (0, import_styled_components.default)(Dialog.Content)`
+};
+var mobileOverlayVariants = {
+  initial: {
+    opacity: 0,
+    transition: mobileTransition
+  },
+  animate: {
+    opacity: 1,
+    transition: mobileTransition
+  },
+  exit: {
+    opacity: 0,
+    transition: mobileTransition
+  }
+};
+var draggableModalVariants = {
+  initial: {
+    opacity: 0,
+    transition: desktopTransition
+  },
+  animate: {
+    opacity: 1,
+    transition: desktopTransition
+  },
+  exit: {
+    opacity: 0,
+    transition: desktopTransition
+  }
+};
+function getContentVariants(isMobile, isDraggable) {
+  if (isDraggable) {
+    return draggableModalVariants;
+  }
+  return isMobile ? mobileDrawerVariants : desktopModalVariants;
+}
+function getOverlayVariants(isMobile) {
+  return isMobile ? mobileOverlayVariants : desktopOverlayVariants;
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);
+    const handler = (e) => setIsMobile(e.matches);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handler);
+      return () => mediaQuery.removeListener(handler);
+    }
+  }, []);
+  return isMobile;
+}
+
+// src/v2/components/ModalContent.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledMotionWrapper = (0, import_styled_components.default)(import_react.motion.div)`
   position: fixed;
-  ${(props) => props.draggable ? `
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      ` : `
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      `}
+  top: ${(props) => props.$isMobile ? "auto" : "50%"};
+  left: 50%;
+  bottom: ${(props) => props.$isMobile ? 0 : "auto"};
+`;
+var StyledContent = import_styled_components.default.div.withConfig({
+  shouldForwardProp: (prop) => !["isDragging", "draggable"].includes(prop)
+})`
   display: flex;
   flex-direction: column;
-  border-radius: ${(props) => props.theme.radii[600]};
-  box-shadow: ${(props) => props.theme.shadows.medium};
+  border-radius: ${(props) => props.theme.radii[800]};
+  box-shadow: ${(props) => props.theme.shadows.high};
   filter: blur(0);
+  background-color: ${(props) => props.theme.colors.container.background.base};
   color: ${(props) => props.theme.colors.text.body};
   outline: none;
+  width: ${DEFAULT_MODAL_WIDTH};
   max-width: ${(props) => {
-  const railSize = props.railSize ?? 44;
-  const railOffset = props.railOffset ?? 12;
-  const railExtraSpace = railSize + railOffset;
-  return `calc(100vw - ${BODY_PADDING} - ${railExtraSpace}px)`;
+  return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;
 }};
   max-height: calc(100vh - ${BODY_PADDING});
-  z-index: ${(props) => props.zIndex || 1e3};
 
-  /* When viewport is <= 400px, rail is above modal, so restore full width */
-  @media (max-width: 400px) {
-    max-width: calc(100vw - ${BODY_PADDING});
+  /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */
+  @media (max-width: ${MOBILE_BREAKPOINT}) {
+    /* Full viewport width - edge to edge */
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
+
+    /* Height hugs content, with increased max-height to get closer to top */
+    /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */
+    height: auto;
+    max-height: calc(95vh - 84px);
+
+    /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */
+    border-top-left-radius: ${(props) => props.theme.radii[800]};
+    border-top-right-radius: ${(props) => props.theme.radii[800]};
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* Mobile shadow - appears to cast upward (high-reverse) */
+    box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);
   }
 
   @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);` : ``}
-  }
+  ${import_seeds_react_system_props.FLEXBOX}
+  ${import_seeds_react_system_props.BORDER}
+  ${import_seeds_react_system_props.LAYOUT}
 `;
-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)`
+StyledContent.displayName = "ModalContent";
+var DragContext = React2.createContext(null);
+var useDragContext = () => {
+  const context = React2.useContext(DragContext);
+  return context;
+};
+var StaticModalContent = ({
+  children,
+  label,
+  dataAttributes,
+  rest
+}) => {
+  const isMobile = useIsMobile();
+  const contentVariants = getContentVariants(isMobile, false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragContext.Provider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Content, { asChild: true, "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledMotionWrapper,
+    {
+      $isMobile: isMobile,
+      variants: contentVariants,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledContent, { draggable: false, ...dataAttributes, ...rest, children })
+    }
+  ) }) });
+};
+var DraggableModalContent = ({
+  children,
+  label,
+  dataAttributes,
+  rest
+}) => {
+  const [position, setPosition] = React2.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React2.useState(false);
+  const contentRef = React2.useRef(null);
+  const isMobile = useIsMobile();
+  const handleHeaderMouseDown = React2.useCallback((e) => {
+    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 isRailOnSide = window.innerWidth > 780;
+      const modalWidth = rect.width;
+      const modalHeight = rect.height;
+      let maxX = window.innerWidth - modalWidth;
+      let minX = 0;
+      let maxY = window.innerHeight - modalHeight;
+      let minY = 0;
+      if (isRailOnSide) {
+        maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;
+      } else {
+        minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;
+      }
+      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);
+  }, []);
+  const dragContextValue = React2.useMemo(
+    () => ({
+      position,
+      isDragging,
+      onHeaderMouseDown: handleHeaderMouseDown,
+      contentRef,
+      draggable: true
+    }),
+    [position, isDragging, handleHeaderMouseDown]
+  );
+  const handleInteractOutside = React2.useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  const contentVariants = getContentVariants(isMobile, true);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Dialog.Content,
+    {
+      asChild: true,
+      "aria-label": label,
+      onInteractOutside: handleInteractOutside,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledMotionWrapper,
+        {
+          $isMobile: isMobile,
+          variants: contentVariants,
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          style: {
+            // Apply drag offset transforms
+            // For draggable modals, variants only handle opacity, so we apply transforms here
+            // Combined with top: 50%, left: 50%, these create the centering + drag offset
+            x: `calc(-50% + ${position.x}px)`,
+            y: `calc(-50% + ${position.y}px)`
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledContent,
+            {
+              ref: contentRef,
+              draggable: true,
+              isDragging,
+              ...dataAttributes,
+              ...rest,
+              children
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+
+// src/v2/components/ModalHeader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ModalCustomHeader = (0, import_styled_components2.default)(import_seeds_react_box.default).withConfig({
+  shouldForwardProp: (prop) => !["draggable", "isDragging"].includes(prop)
+})`
   font-family: ${(props) => props.theme.fontFamily};
-  padding: ${(props) => props.theme.space[400]}
-    ${(props) => props.theme.space[300]};
+  padding: ${(props) => props.theme.space[400]};
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -192,140 +416,33 @@ var Header = (0, import_styled_components.default)(import_seeds_react_box.defaul
     cursor: ${props.isDragging ? "grabbing" : "grab"};
     user-select: none;
   `}
-`;
-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;
-  }
+  ${import_seeds_react_system_props2.COMMON}
+  ${import_seeds_react_system_props2.FLEXBOX}
+  ${import_seeds_react_system_props2.BORDER}
+  ${import_seeds_react_system_props2.LAYOUT}
 `;
-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");
+ModalCustomHeader.displayName = "ModalCustomHeader";
 var ModalHeader = (props) => {
   const {
     title,
     subtitle,
-    children,
     titleProps = {},
     subtitleProps = {},
-    showInlineClose,
     ...rest
   } = props;
   const dragContext = useDragContext();
   const isDraggable = dragContext?.draggable ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Header,
+    ModalCustomHeader,
     {
       ...rest,
       onMouseDown: isDraggable ? dragContext?.onHeaderMouseDown : void 0,
       draggable: isDraggable,
       isDragging: dragContext?.isDragging,
-      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 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box.default, { children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog2.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)(Dialog2.Description, { asChild: true, ...subtitleProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default, { as: "div", fontSize: 200, children: subtitle }) })
       ] })
     }
   );
@@ -333,123 +450,755 @@ var ModalHeader = (props) => {
 ModalHeader.displayName = "ModalHeader";
 
 // src/v2/components/ModalFooter.tsx
+var React5 = require("react");
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
+
+// src/v2/components/ModalCloseWrapper.tsx
 var React4 = require("react");
+var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 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
-    }
-  );
+var ModalCloseWrapper = (props) => {
+  const { children, onClick, asChild = true, ...rest } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children });
 };
-ModalFooter.displayName = "ModalFooter";
+ModalCloseWrapper.displayName = "ModalCloseWrapper";
 
-// src/v2/components/ModalContent.tsx
-var React5 = __toESM(require("react"));
+// src/v2/components/ModalFooter.tsx
 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";
+var ModalCustomFooter = (0, import_styled_components3.default)(import_seeds_react_box2.default)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  padding: ${(props) => props.theme.space[400]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[800]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[800]};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
 
-// src/v2/components/ModalDescription.tsx
+  /* Flat bottom corners to blend with device edge on mobile */
+  @media (max-width: ${MOBILE_BREAKPOINT}) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  ${import_seeds_react_system_props3.COMMON}
+  ${import_seeds_react_system_props3.FLEXBOX}
+  ${import_seeds_react_system_props3.BORDER}
+  ${import_seeds_react_system_props3.LAYOUT}
+`;
+ModalCustomFooter.displayName = "ModalCustomFooter";
+var ModalFooter = (props) => {
+  const { cancelButton, primaryButton, leftAction, ...rest } = props;
+  if (!cancelButton && !primaryButton && !leftAction) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ModalCustomFooter, { ...rest, children: [
+    leftAction ? leftAction : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box2.default, { display: "flex", gap: 300, marginLeft: "auto", children: [
+      cancelButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalCloseWrapper, { children: cancelButton }),
+      primaryButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalCloseWrapper, { children: primaryButton })
+    ] })
+  ] });
+};
+ModalFooter.displayName = "ModalFooter";
+
+// src/v2/components/ModalBody.tsx
 var React6 = __toESM(require("react"));
-var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components4 = __toESM(require("styled-components"));
 var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_system_props4 = require("@sproutsocial/seeds-react-system-props");
 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";
+var StyledModalBody = (0, import_styled_components4.default)(import_seeds_react_box3.default)`
+  font-family: ${(props) => props.theme.fontFamily};
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: ${(props) => `0 ${props.theme.space[400]}`};
+  ${(props) => props.theme.typography[300]}
+  color: ${(props) => props.theme.colors.text.body};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    flex-basis: 100%;
+  }
 
-// src/v2/components/ModalTrigger.tsx
+  ${import_seeds_react_system_props4.COMMON}
+  ${import_seeds_react_system_props4.FLEXBOX}
+  ${import_seeds_react_system_props4.BORDER}
+  ${import_seeds_react_system_props4.LAYOUT}
+`;
+StyledModalBody.displayName = "ModalBody";
+var ModalBody = React6.forwardRef(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledModalBody, { "data-qa-modal-body": true, ref, ...rest, children });
+  }
+);
+ModalBody.displayName = "ModalBody";
+
+// src/v2/components/ModalDescription.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 Dialog4 = __toESM(require("@radix-ui/react-dialog"));
+var import_seeds_react_box4 = __toESM(require("@sproutsocial/seeds-react-box"));
 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";
+var ModalDescription = React7.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_box4.default, { ref, ...rest, children }) });
+});
+ModalDescription.displayName = "ModalDescription";
 
-// src/v2/components/ModalClose.tsx
+// src/v2/components/ModalRail.tsx
 var React8 = require("react");
-var Dialog6 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components5 = __toESM(require("styled-components"));
 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`
+var Rail = import_styled_components5.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));`}
+  top: ${RAIL_OFFSET}px;
+  right: calc(-1 * (${RAIL_BUTTON_SIZE}px + ${RAIL_OFFSET}px));
   display: flex;
   flex-direction: column;
-  gap: ${(p) => p.gap}px;
+  gap: ${RAIL_GAP}px;
   z-index: 1;
 
-  @media (max-width: 400px) {
+  @media (max-width: ${MOBILE_BREAKPOINT}) {
     /* Move rail above the modal on the right side */
     top: auto;
-    bottom: calc(100% + ${(p) => p.offset}px);
-    right: ${(p) => p.offset}px;
+    bottom: calc(100% + ${RAIL_OFFSET}px);
+    right: ${RAIL_OFFSET}px;
     left: auto;
     /* Change to horizontal layout with reversed order */
     flex-direction: row-reverse;
   }
 `;
-var RailBtn = import_styled_components3.default.button`
-  width: ${(p) => p.size}px;
-  height: ${(p) => p.size}px;
+var ModalRail = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Rail,
+    {
+      "data-slot": "modal-rail",
+      "data-qa-modal-rail": true,
+      "aria-label": "Modal quick actions",
+      children
+    }
+  );
+};
+ModalRail.displayName = "ModalRail";
+
+// src/v2/components/ModalAction.tsx
+var React9 = require("react");
+var Dialog5 = __toESM(require("@radix-ui/react-dialog"));
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+
+// ../../node_modules/@babel/runtime/helpers/esm/extends.js
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
+    return t2.__proto__ = e2, t2;
+  }, _setPrototypeOf(t, e);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t2) {
+    return t2.__proto__ || Object.getPrototypeOf(t2);
+  }, _getPrototypeOf(t);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
+    }));
+  } catch (t2) {
+  }
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
+    return !!t;
+  })();
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/construct.js
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? /* @__PURE__ */ new Map() : void 0;
+  return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
+    if (null === t2 || !_isNativeFunction(t2)) return t2;
+    if ("function" != typeof t2) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t2)) return r.get(t2);
+      r.set(t2, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t2, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t2.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    }), _setPrototypeOf(Wrapper, t2);
+  }, _wrapNativeSuper(t);
+}
+
+// ../../node_modules/polished/dist/polished.esm.js
+var ERRORS = {
+  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
+  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
+  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
+  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
+  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
+  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
+  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
+  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
+  "9": "Please provide a number of steps to the modularScale helper.\n\n",
+  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "11": 'Invalid value passed as base to modularScale, expected number or em string but got "%s"\n\n',
+  "12": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.\n\n',
+  "13": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.\n\n',
+  "14": 'Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
+  "15": 'Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
+  "16": "You must provide a template to this method.\n\n",
+  "17": "You passed an unsupported selector state to this method.\n\n",
+  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "23": "fontFace expects a name of a font-family.\n\n",
+  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "25": "fontFace expects localFonts to be an array.\n\n",
+  "26": "fontFace expects fileFormats to be an array.\n\n",
+  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
+  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
+  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
+  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "35": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
+  "36": "Property must be a string value.\n\n",
+  "37": "Syntax Error at %s.\n\n",
+  "38": "Formula contains a function that needs parentheses at %s.\n\n",
+  "39": "Formula is missing closing parenthesis at %s.\n\n",
+  "40": "Formula has too many closing parentheses at %s.\n\n",
+  "41": "All values in a formula must have the same unit or be unitless.\n\n",
+  "42": "Please provide a number of steps to the modularScale helper.\n\n",
+  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
+  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
+  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
+  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
+  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
+  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "53": "fontFace expects localFonts to be an array.\n\n",
+  "54": "fontFace expects fileFormats to be an array.\n\n",
+  "55": "fontFace expects a name of a font-family.\n\n",
+  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
+  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "61": "Property must be a string value.\n\n",
+  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "63": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
+  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
+  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
+  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
+  "67": "You must provide a template to this method.\n\n",
+  "68": "You passed an unsupported selector state to this method.\n\n",
+  "69": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.\n\n',
+  "70": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.\n\n',
+  "71": 'Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.\n\n',
+  "72": 'Passed invalid base value %s to %s(), please pass a value like "12px" or 12.\n\n',
+  "73": "Please provide a valid CSS variable.\n\n",
+  "74": "CSS variable not found.\n\n",
+  "75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+};
+function format() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var a = args[0];
+  var b = [];
+  var c;
+  for (c = 1; c < args.length; c += 1) {
+    b.push(args[c]);
+  }
+  b.forEach(function(d) {
+    a = a.replace(/%[a-z]/, d);
+  });
+  return a;
+}
+var PolishedError = /* @__PURE__ */ function(_Error) {
+  _inheritsLoose(PolishedError2, _Error);
+  function PolishedError2(code) {
+    var _this;
+    if (process.env.NODE_ENV === "production") {
+      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+    } else {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+    }
+    return _assertThisInitialized(_this);
+  }
+  return PolishedError2;
+}(/* @__PURE__ */ _wrapNativeSuper(Error));
+function colorToInt(color) {
+  return Math.round(color * 255);
+}
+function convertToInt(red, green, blue) {
+  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+}
+function hslToRgb(hue, saturation, lightness, convert) {
+  if (convert === void 0) {
+    convert = convertToInt;
+  }
+  if (saturation === 0) {
+    return convert(lightness, lightness, lightness);
+  }
+  var huePrime = (hue % 360 + 360) % 360 / 60;
+  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma;
+    green = secondComponent;
+  } else if (huePrime >= 1 && huePrime < 2) {
+    red = secondComponent;
+    green = chroma;
+  } else if (huePrime >= 2 && huePrime < 3) {
+    green = chroma;
+    blue = secondComponent;
+  } else if (huePrime >= 3 && huePrime < 4) {
+    green = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 4 && huePrime < 5) {
+    red = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 5 && huePrime < 6) {
+    red = chroma;
+    blue = secondComponent;
+  }
+  var lightnessModification = lightness - chroma / 2;
+  var finalRed = red + lightnessModification;
+  var finalGreen = green + lightnessModification;
+  var finalBlue = blue + lightnessModification;
+  return convert(finalRed, finalGreen, finalBlue);
+}
+var namedColorMap = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "00ffff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "0000ff",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "00ffff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "ff00ff",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "639",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+};
+function nameToHex(color) {
+  if (typeof color !== "string") return color;
+  var normalizedColorName = color.toLowerCase();
+  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+}
+var hexRegex = /^#[a-fA-F0-9]{6}$/;
+var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+function parseToRgb(color) {
+  if (typeof color !== "string") {
+    throw new PolishedError(3);
+  }
+  var normalizedColor = nameToHex(color);
+  if (normalizedColor.match(hexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
+    };
+  }
+  if (normalizedColor.match(hexRgbaRegex)) {
+    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
+      alpha
+    };
+  }
+  if (normalizedColor.match(reducedHexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
+    };
+  }
+  if (normalizedColor.match(reducedRgbaHexRegex)) {
+    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+      alpha: _alpha
+    };
+  }
+  var rgbMatched = rgbRegex.exec(normalizedColor);
+  if (rgbMatched) {
+    return {
+      red: parseInt("" + rgbMatched[1], 10),
+      green: parseInt("" + rgbMatched[2], 10),
+      blue: parseInt("" + rgbMatched[3], 10)
+    };
+  }
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+  if (rgbaMatched) {
+    return {
+      red: parseInt("" + rgbaMatched[1], 10),
+      green: parseInt("" + rgbaMatched[2], 10),
+      blue: parseInt("" + rgbaMatched[3], 10),
+      alpha: parseFloat("" + rgbaMatched[4])
+    };
+  }
+  var hslMatched = hslRegex.exec(normalizedColor);
+  if (hslMatched) {
+    var hue = parseInt("" + hslMatched[1], 10);
+    var saturation = parseInt("" + hslMatched[2], 10) / 100;
+    var lightness = parseInt("" + hslMatched[3], 10) / 100;
+    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
+    var hslRgbMatched = rgbRegex.exec(rgbColorString);
+    if (!hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, rgbColorString);
+    }
+    return {
+      red: parseInt("" + hslRgbMatched[1], 10),
+      green: parseInt("" + hslRgbMatched[2], 10),
+      blue: parseInt("" + hslRgbMatched[3], 10)
+    };
+  }
+  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+  if (hslaMatched) {
+    var _hue = parseInt("" + hslaMatched[1], 10);
+    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+    if (!_hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, _rgbColorString);
+    }
+    return {
+      red: parseInt("" + _hslRgbMatched[1], 10),
+      green: parseInt("" + _hslRgbMatched[2], 10),
+      blue: parseInt("" + _hslRgbMatched[3], 10),
+      alpha: parseFloat("" + hslaMatched[4])
+    };
+  }
+  throw new PolishedError(5);
+}
+var reduceHexValue = function reduceHexValue2(value) {
+  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+    return "#" + value[1] + value[3] + value[5];
+  }
+  return value;
+};
+function numberToHex(value) {
+  var hex = value.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+function rgb(value, green, blue) {
+  if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
+    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+  } else if (typeof value === "object" && green === void 0 && blue === void 0) {
+    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+  }
+  throw new PolishedError(6);
+}
+function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+  if (typeof firstValue === "string" && typeof secondValue === "number") {
+    var rgbValue = parseToRgb(firstValue);
+    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+  } else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
+    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+  } else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
+    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+  }
+  throw new PolishedError(7);
+}
+function curried(f, length, acc) {
+  return function fn() {
+    var combined = acc.concat(Array.prototype.slice.call(arguments));
+    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
+  };
+}
+function curry(f) {
+  return curried(f, f.length, []);
+}
+function guard(lowerBoundary, upperBoundary, value) {
+  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
+}
+function transparentize(amount, color) {
+  if (color === "transparent") return color;
+  var parsedColor = parseToRgb(color);
+  var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
+  var colorWithAlpha = _extends({}, parsedColor, {
+    alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+  });
+  return rgba(colorWithAlpha);
+}
+var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
+
+// ../seeds-react-mixins/dist/esm/index.js
+var import_styled_components6 = require("styled-components");
+var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
+var visuallyHidden = import_styled_components6.css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+`;
+var focusRing = import_styled_components6.css`
+  box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
+    0 0px 0px 4px
+      ${curriedTransparentize(0.7, import_seeds_react_theme.theme.colors.button.primary.background.base)};
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+`;
+var pill = import_styled_components6.css`
+  min-width: ${import_seeds_react_theme.theme.space[600]};
+  min-height: ${import_seeds_react_theme.theme.space[600]};
+  padding: ${import_seeds_react_theme.theme.space[300]};
+  border-radius: ${import_seeds_react_theme.theme.radii.pill};
+`;
+var disabled = import_styled_components6.css`
+  opacity: 0.4;
+  pointer-events: none;
+`;
+
+// src/v2/components/ModalAction.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RailButton = import_styled_components7.default.button`
+  width: ${RAIL_BUTTON_SIZE}px;
+  height: ${(props) => props.theme.space[500]};
   display: inline-grid;
   place-items: center;
-  border-radius: 8px;
+  border-radius: ${(props) => props.theme.radii.outer};
   border: none;
-  background: rgba(22, 32, 32, 0.56);
-  color: #ffffff;
+  background: ${(props) => props.theme.colors.button.overlay.background.base};
+  color: ${(props) => props.theme.colors.button.overlay.text.base};
   cursor: pointer;
   outline: none;
-  transition: all 0.2s ease;
+  transition: all ${(props) => props.theme.duration.fast}
+    ${(props) => props.theme.easing.ease_inout};
 
   &:hover {
-    background: rgba(22, 32, 32, 0.7);
-    transform: translateY(-1px);
+    background: ${(props) => props.theme.colors.button.overlay.background.hover};
   }
 
+  &:hover,
   &:active {
-    transform: translateY(0);
+    transform: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+    ${focusRing}
   }
 
   &:disabled {
@@ -457,171 +1206,65 @@ var RailBtn = import_styled_components3.default.button`
     cursor: not-allowed;
   }
 `;
-var ModalRail = ({
-  side = "right",
-  offset = 12,
-  gap = 12,
-  size = 44,
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Rail,
-    {
-      "data-slot": "modal-rail",
-      side,
-      offset,
-      gap,
-      size,
-      "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,
+  disabled: disabled2,
   actionType,
   onClick,
   ...rest
 }) => {
-  const Btn = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    RailBtn,
+  const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    RailButton,
     {
-      size,
       "aria-label": ariaLabel,
       title: ariaLabel,
-      disabled,
+      disabled: disabled2,
+      onClick,
       ...rest,
-      children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_icon2.default, { name: iconName, size: "small" }) : ariaLabel
+      children: iconName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_icon.default, { name: iconName, size: "small", "aria-label": ariaLabel })
     }
   );
-  return actionType === "close" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog7.Close, { asChild: true, children: Btn }) : React9.cloneElement(Btn, { onClick });
+  if (actionType === "close") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog5.Close, { asChild: true, children: button });
+  }
+  return button;
 };
+ModalAction.displayName = "ModalAction";
+
+// src/v2/components/ModalOverlay.tsx
+var import_react2 = require("react");
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_react3 = require("motion/react");
+var import_seeds_react_system_props5 = require("@sproutsocial/seeds-react-system-props");
+var StyledMotionOverlay = (0, import_styled_components8.default)(import_react3.motion.div)`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+`;
+var StyledOverlay = import_styled_components8.default.div.withConfig({
+  shouldForwardProp: (prop) => !["allowInteraction"].includes(prop)
+})`
+  width: 100%;
+  height: 100%;
+  background-color: ${(props) => props.theme.colors.overlay.background.base};
 
-// src/v2/ModalV2.tsx
+  /* Allow clicking through overlay when modal is draggable */
+  ${(props) => props.allowInteraction && `
+    pointer-events: none;
+  `}
+
+  ${import_seeds_react_system_props5.COMMON}
+  ${import_seeds_react_system_props5.BORDER}
+  ${import_seeds_react_system_props5.LAYOUT}
+  ${import_seeds_react_system_props5.POSITION}
+`;
+StyledOverlay.displayName = "ModalOverlay";
+
+// src/v2/Modal.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var DragContext = React10.createContext(null);
-var useDragContext = () => {
-  const context = React10.useContext(DragContext);
-  return context;
-};
-var DraggableModalContent = ({
-  children,
-  computedWidth,
-  bg,
-  computedZIndex,
-  label,
-  dataAttributes,
-  draggable,
-  rest,
-  railProps
-}) => {
-  const [position, setPosition] = React10.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React10.useState(false);
-  const contentRef = React10.useRef(null);
-  const railSize = railProps?.size ?? 44;
-  const railOffset = railProps?.offset ?? 12;
-  const railSide = railProps?.side ?? "right";
-  const railExtraSpace = railSize + railOffset;
-  const handleHeaderMouseDown = 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 isRailOnSide = window.innerWidth > 400;
-        const modalWidth = rect.width;
-        const modalHeight = rect.height;
-        let maxX = window.innerWidth - modalWidth;
-        let minX = 0;
-        let maxY = window.innerHeight - modalHeight;
-        let minY = 0;
-        if (isRailOnSide) {
-          if (railSide === "right") {
-            maxX = window.innerWidth - modalWidth - railExtraSpace;
-          } else {
-            minX = railExtraSpace;
-          }
-        } else {
-          minY = railSize + railOffset;
-        }
-        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, railSide, railExtraSpace]
-  );
-  const dragContextValue = React10.useMemo(
-    () => ({
-      position,
-      isDragging,
-      onHeaderMouseDown: handleHeaderMouseDown,
-      contentRef,
-      draggable: draggable ?? false
-    }),
-    [position, isDragging, handleHeaderMouseDown, draggable]
-  );
-  const handleInteractOutside = React10.useCallback(
-    (e) => {
-      if (draggable) {
-        e.preventDefault();
-      }
-    },
-    [draggable]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragContext.Provider, { value: draggable ? dragContextValue : null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    StyledContent,
-    {
-      ref: contentRef,
-      width: computedWidth,
-      bg,
-      zIndex: computedZIndex,
-      "aria-label": label,
-      draggable,
-      isDragging,
-      railSize,
-      railOffset,
-      railSide,
-      onInteractOutside: handleInteractOutside,
-      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,
@@ -634,37 +1277,21 @@ var Modal = (props) => {
     title,
     subtitle,
     description,
-    size,
-    priority,
     data = {},
-    bg = DEFAULT_MODAL_BG,
     showOverlay = true,
     actions,
-    railProps,
+    closeButtonAriaLabel = "Close",
     ...rest
   } = props;
-  const handleOpenChange = React10.useCallback(
+  const [isOpen, setIsOpen] = React11.useState(defaultOpen ?? false);
+  const handleOpenChange = React11.useCallback(
     (newOpen) => {
+      setIsOpen(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 dataAttributes = React11.useMemo(() => {
     const attrs = {};
     Object.entries(data).forEach(([key, value]) => {
       attrs[`data-${key}`] = String(value);
@@ -676,95 +1303,75 @@ var Modal = (props) => {
     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;
-    }
-    if (draggable) {
-      props2.modal = false;
+  const isMobile = useIsMobile();
+  const overlayVariants = getOverlayVariants(isMobile);
+  const ModalContentComponent = draggable ? DraggableModalContent : StaticModalContent;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    Dialog6.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal: !draggable,
+      children: [
+        modalTrigger && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog6.Trigger, { asChild: true, children: modalTrigger }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog6.Portal, { forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react4.AnimatePresence, { mode: "wait", children: (open ?? isOpen) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          showOverlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog6.Overlay, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            StyledMotionOverlay,
+            {
+              variants: overlayVariants,
+              initial: "initial",
+              animate: "animate",
+              exit: "exit",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledOverlay, { allowInteraction: draggable })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            ModalContentComponent,
+            {
+              label,
+              dataAttributes,
+              draggable,
+              rest,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalRail, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    ModalAction,
+                    {
+                      actionType: "close",
+                      "aria-label": closeButtonAriaLabel,
+                      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 }),
+                children
+              ]
+            }
+          )
+        ] }) }) })
+      ]
     }
-    return props2;
-  }, [open, defaultOpen, handleOpenChange, onOpenChange, draggable]);
-  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, allowInteraction: draggable }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        DraggableModalContent,
-        {
-          computedWidth,
-          bg,
-          computedZIndex,
-          label,
-          dataAttributes,
-          draggable,
-          rest,
-          railProps,
-          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;
+var Modal_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,
+  ModalBody,
+  ModalCloseWrapper,
+  ModalCustomFooter,
+  ModalCustomHeader,
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalRail,
-  ModalTrigger,
-  useDragContext
+  ModalRail
 });
 //# sourceMappingURL=index.js.map