@sproutsocial/seeds-react-modal 1.0.5 → 1.1.0

package/.turbo/turbo-build.log

@@ -8,34 +8,34 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js        30.11 KB
+CJS dist/index.js        32.36 KB
 CJS dist/v1/index.js     9.86 KB
-CJS dist/v2/index.js     22.24 KB
-CJS dist/index.js.map    49.62 KB
+CJS dist/v2/index.js     24.54 KB
+CJS dist/index.js.map    54.80 KB
 CJS dist/v1/index.js.map 13.03 KB
-CJS dist/v2/index.js.map 36.20 KB
-CJS ⚡️ Build success in 295ms
+CJS dist/v2/index.js.map 41.40 KB
+CJS ⚡️ Build success in 279ms
 ESM dist/esm/index.js              567.00 B
 ESM dist/esm/v1/index.js           165.00 B
-ESM dist/esm/v2/index.js           750.00 B
+ESM dist/esm/v2/index.js           786.00 B
 ESM dist/esm/chunk-IYDY4OPB.js     7.12 KB
-ESM dist/esm/chunk-GKQRFPCX.js     18.04 KB
+ESM dist/esm/chunk-4ITF4DBY.js     20.28 KB
 ESM dist/esm/index.js.map          963.00 B
 ESM dist/esm/v1/index.js.map       71.00 B
 ESM dist/esm/v2/index.js.map       71.00 B
 ESM dist/esm/chunk-IYDY4OPB.js.map 12.85 KB
-ESM dist/esm/chunk-GKQRFPCX.js.map 34.97 KB
-ESM ⚡️ Build success in 315ms
+ESM dist/esm/chunk-4ITF4DBY.js.map 40.16 KB
+ESM ⚡️ Build success in 280ms
 DTS Build start
-DTS ⚡️ Build success in 25909ms
+DTS ⚡️ Build success in 24663ms
 DTS dist/index.d.ts               973.00 B
 DTS dist/v1/index.d.ts            413.00 B
-DTS dist/v2/index.d.ts            1.33 KB
+DTS dist/v2/index.d.ts            1.35 KB
 DTS dist/Modal-ki8oiGbC.d.ts      2.52 KB
-DTS dist/ModalRail-OQ8DZ1vH.d.ts  7.43 KB
+DTS dist/ModalRail-5PeilhW7.d.ts  7.61 KB
 DTS dist/index.d.mts              976.00 B
 DTS dist/v1/index.d.mts           415.00 B
-DTS dist/v2/index.d.mts           1.33 KB
+DTS dist/v2/index.d.mts           1.35 KB
 DTS dist/Modal-ki8oiGbC.d.mts     2.52 KB
-DTS dist/ModalRail-OQ8DZ1vH.d.mts 7.43 KB
-Done in 30.53s.
+DTS dist/ModalRail-5PeilhW7.d.mts 7.61 KB
+Done in 27.92s.

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sproutsocial/seeds-react-modal
 
+## 1.1.0
+
+### Minor Changes
+
+- 9c64b99: Enhance modal v2 draggable functionality and interaction improvements
+
+  - **Draggable modal background interaction**: Modals can now interact with background elements when draggable mode is enabled
+  - **Improved drag constraints**: Drag context now properly limits dragging to the modal header only, preventing accidental dragging from other areas
+  - **Better user experience**: More intuitive drag behavior with proper boundary controls
+  - **Mobile friendly**: Modal rail now collapses on mobile devices
+
+  These improvements make draggable modals more user-friendly and provide better control over modal positioning and interaction.
+
 ## 1.0.5
 
 ### Patch Changes

package/dist/{ModalRail-OQ8DZ1vH.d.mts → ModalRail-5PeilhW7.d.mts}

@@ -35,8 +35,6 @@ interface TypeModalV2HeaderProps extends TypeBoxProps {
     subtitle?: string;
     /** Passing children will override the default modal header */
     children?: React.ReactNode;
-    /** If you're rendering a custom header, you can use this prop to add a bottom border */
-    bordered?: boolean;
     /** Additional props for the Dialog.Title when title is provided */
     titleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Title>, "asChild" | "children">;
     /** Additional props for the Dialog.Description when subtitle is provided */
@@ -97,7 +95,6 @@ type TypeModalRailProps = {
     offset?: number;
     gap?: number;
     size?: number;
-    collapseAt?: number;
     children?: React.ReactNode;
 };
 type ModalActionBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
@@ -114,6 +111,17 @@ type TypeModalActionProps = (ModalActionBase & {
     actionType?: "button";
 });
 
+interface DragContextValue {
+    position: {
+        x: number;
+        y: number;
+    };
+    isDragging: boolean;
+    onHeaderMouseDown: (e: React.MouseEvent) => void;
+    contentRef: React.RefObject<HTMLDivElement>;
+    draggable: boolean;
+}
+declare const useDragContext: () => DragContextValue | null;
 /**
  * The modal you want - with Radix UI Dialog
  *
@@ -175,4 +183,4 @@ declare const ModalAction: React.FC<TypeModalActionProps & {
     size?: number;
 }>;
 
-export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q };
+export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q, useDragContext as u };

package/dist/{ModalRail-OQ8DZ1vH.d.ts → ModalRail-5PeilhW7.d.ts}

@@ -35,8 +35,6 @@ interface TypeModalV2HeaderProps extends TypeBoxProps {
     subtitle?: string;
     /** Passing children will override the default modal header */
     children?: React.ReactNode;
-    /** If you're rendering a custom header, you can use this prop to add a bottom border */
-    bordered?: boolean;
     /** Additional props for the Dialog.Title when title is provided */
     titleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Title>, "asChild" | "children">;
     /** Additional props for the Dialog.Description when subtitle is provided */
@@ -97,7 +95,6 @@ type TypeModalRailProps = {
     offset?: number;
     gap?: number;
     size?: number;
-    collapseAt?: number;
     children?: React.ReactNode;
 };
 type ModalActionBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
@@ -114,6 +111,17 @@ type TypeModalActionProps = (ModalActionBase & {
     actionType?: "button";
 });
 
+interface DragContextValue {
+    position: {
+        x: number;
+        y: number;
+    };
+    isDragging: boolean;
+    onHeaderMouseDown: (e: React.MouseEvent) => void;
+    contentRef: React.RefObject<HTMLDivElement>;
+    draggable: boolean;
+}
+declare const useDragContext: () => DragContextValue | null;
 /**
  * The modal you want - with Radix UI Dialog
  *
@@ -175,4 +183,4 @@ declare const ModalAction: React.FC<TypeModalActionProps & {
     size?: number;
 }>;
 
-export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q };
+export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q, useDragContext as u };

package/dist/esm/{chunk-GKQRFPCX.js → chunk-4ITF4DBY.js}

@@ -42,6 +42,11 @@ var StyledOverlay = styled(Dialog.Overlay)`
     ${(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;
+  `}
+
   ${zIndex}
 
   &[data-state="open"] {
@@ -69,15 +74,19 @@ var StyledContent = styled(Dialog.Content)`
   filter: blur(0);
   color: ${(props) => props.theme.colors.text.body};
   outline: none;
-  max-width: calc(100vw - ${BODY_PADDING});
+  max-width: ${(props) => {
+  const railSize = props.railSize ?? 44;
+  const railOffset = props.railOffset ?? 12;
+  const railExtraSpace = railSize + railOffset;
+  return `calc(100vw - ${BODY_PADDING} - ${railExtraSpace}px)`;
+}};
   max-height: calc(100vh - ${BODY_PADDING});
   z-index: ${(props) => props.zIndex || 1e3};
 
-  /* Draggable styling */
-  ${(props) => props.draggable && `
-    cursor: ${props.isDragging ? "grabbing" : "grab"};
-    user-select: none;
-  `}
+  /* When viewport is <= 400px, rail is above modal, so restore full width */
+  @media (max-width: 400px) {
+    max-width: calc(100vw - ${BODY_PADDING});
+  }
 
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     height: calc(100vh - ${BODY_PADDING});
@@ -124,6 +133,12 @@ var Header = styled(Box)`
   align-items: center;
   justify-content: space-between;
   flex: 0 0 auto;
+
+  /* Draggable cursor styling */
+  ${(props) => props.draggable && `
+    cursor: ${props.isDragging ? "grabbing" : "grab"};
+    user-select: none;
+  `}
 `;
 var Footer = styled(Box)`
   flex: 0 0 auto;
@@ -238,19 +253,29 @@ var ModalHeader = (props) => {
     title,
     subtitle,
     children,
-    bordered,
     titleProps = {},
     subtitleProps = {},
     showInlineClose,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx2(Header, { ...rest, children: children ? children : /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-    /* @__PURE__ */ jsxs(Box2, { children: [
-      title && /* @__PURE__ */ jsx2(Dialog3.Title, { asChild: true, ...titleProps, children: /* @__PURE__ */ jsx2(Text.Headline, { children: title }) }),
-      subtitle && /* @__PURE__ */ jsx2(Dialog3.Description, { asChild: true, ...subtitleProps, children: /* @__PURE__ */ jsx2(Text, { as: "div", fontSize: 200, children: subtitle }) })
-    ] }),
-    showInlineClose && /* @__PURE__ */ jsx2(Box2, { display: "flex", alignItems: "center", justifyContent: "flex-end", children: /* @__PURE__ */ jsx2(ModalCloseButton, { position: "relative", offset: 0 }) })
-  ] }) });
+  const dragContext = useDragContext();
+  const isDraggable = dragContext?.draggable ?? false;
+  return /* @__PURE__ */ jsx2(
+    Header,
+    {
+      ...rest,
+      onMouseDown: isDraggable ? dragContext?.onHeaderMouseDown : void 0,
+      draggable: isDraggable,
+      isDragging: dragContext?.isDragging,
+      children: children ? children : /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+        /* @__PURE__ */ jsxs(Box2, { children: [
+          title && /* @__PURE__ */ jsx2(Dialog3.Title, { asChild: true, ...titleProps, children: /* @__PURE__ */ jsx2(Text.Headline, { children: title }) }),
+          subtitle && /* @__PURE__ */ jsx2(Dialog3.Description, { asChild: true, ...subtitleProps, children: /* @__PURE__ */ jsx2(Text, { as: "div", fontSize: 200, children: subtitle }) })
+        ] }),
+        showInlineClose && /* @__PURE__ */ jsx2(Box2, { display: "flex", alignItems: "center", justifyContent: "flex-end", children: /* @__PURE__ */ jsx2(ModalCloseButton, { position: "relative", offset: 0 }) })
+      ] })
+    }
+  );
 };
 ModalHeader.displayName = "ModalHeader";
 
@@ -333,13 +358,19 @@ var Rail = styled3.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;
+  display: flex;
+  flex-direction: column;
   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;`}
+  @media (max-width: 400px) {
+    /* Move rail above the modal on the right side */
+    top: auto;
+    bottom: calc(100% + ${(p) => p.offset}px);
+    right: ${(p) => p.offset}px;
+    left: auto;
+    /* Change to horizontal layout with reversed order */
+    flex-direction: row-reverse;
   }
 `;
 var RailBtn = styled3.button`
@@ -378,7 +409,6 @@ var ModalRail = ({
   offset = 12,
   gap = 12,
   size = 44,
-  collapseAt = 640,
   children
 }) => {
   return /* @__PURE__ */ jsx8(
@@ -389,7 +419,6 @@ var ModalRail = ({
       offset,
       gap,
       size,
-      collapseAt,
       "aria-label": "Modal quick actions",
       children: React9.Children.map(
         children,
@@ -423,6 +452,11 @@ var ModalAction = ({
 
 // src/v2/ModalV2.tsx
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var DragContext = React10.createContext(null);
+var useDragContext = () => {
+  const context = React10.useContext(DragContext);
+  return context;
+};
 var DraggableModalContent = ({
   children,
   computedWidth,
@@ -431,12 +465,17 @@ var DraggableModalContent = ({
   label,
   dataAttributes,
   draggable,
-  rest
+  rest,
+  railProps
 }) => {
   const [position, setPosition] = React10.useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = React10.useState(false);
   const contentRef = React10.useRef(null);
-  const handleMouseDown = React10.useCallback(
+  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;
@@ -453,12 +492,22 @@ var DraggableModalContent = ({
         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;
-        const maxX = window.innerWidth - modalWidth;
-        const minX = 0;
-        const maxY = window.innerHeight - modalHeight;
-        const minY = 0;
+        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;
@@ -476,9 +525,27 @@ var DraggableModalContent = ({
       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__ */ jsx9(
+  return /* @__PURE__ */ jsx9(DragContext.Provider, { value: draggable ? dragContextValue : null, children: /* @__PURE__ */ jsx9(
     StyledContent,
     {
       ref: contentRef,
@@ -488,7 +555,10 @@ var DraggableModalContent = ({
       "aria-label": label,
       draggable,
       isDragging,
-      onMouseDown: handleMouseDown,
+      railSize,
+      railOffset,
+      railSide,
+      onInteractOutside: handleInteractOutside,
       style: draggable ? {
         transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
         transition: isDragging ? "none" : void 0
@@ -497,7 +567,7 @@ var DraggableModalContent = ({
       ...rest,
       children
     }
-  );
+  ) });
 };
 var Modal = (props) => {
   const {
@@ -565,8 +635,11 @@ var Modal = (props) => {
     if (onOpenChange) {
       props2.onOpenChange = handleOpenChange;
     }
+    if (draggable) {
+      props2.modal = false;
+    }
     return props2;
-  }, [open, defaultOpen, handleOpenChange, onOpenChange]);
+  }, [open, defaultOpen, handleOpenChange, onOpenChange, draggable]);
   const triggers = [];
   const content = [];
   if (modalTrigger) {
@@ -586,7 +659,7 @@ var Modal = (props) => {
   return /* @__PURE__ */ jsxs2(Dialog8.Root, { ...dialogRootProps, children: [
     triggers,
     /* @__PURE__ */ jsxs2(Dialog8.Portal, { children: [
-      showOverlay && /* @__PURE__ */ jsx9(StyledOverlay, { zIndex: computedZIndex }),
+      showOverlay && /* @__PURE__ */ jsx9(StyledOverlay, { zIndex: computedZIndex, allowInteraction: draggable }),
       /* @__PURE__ */ jsxs2(
         DraggableModalContent,
         {
@@ -597,6 +670,7 @@ var Modal = (props) => {
           dataAttributes,
           draggable,
           rest,
+          railProps,
           children: [
             /* @__PURE__ */ jsxs2(ModalRail, { ...railProps, children: [
               /* @__PURE__ */ jsx9(
@@ -637,6 +711,7 @@ export {
   ModalClose,
   ModalRail,
   ModalAction,
+  useDragContext,
   ModalV2_default
 };
-//# sourceMappingURL=chunk-GKQRFPCX.js.map
+//# sourceMappingURL=chunk-4ITF4DBY.js.map

package/dist/esm/chunk-4ITF4DBY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/v2/ModalV2.tsx","../../src/v2/ModalV2Styles.tsx","../../src/shared/constants.ts","../../src/v2/components/ModalHeader.tsx","../../src/v2/components/ModalCloseButton.tsx","../../src/v2/components/ModalFooter.tsx","../../src/v2/components/ModalContent.tsx","../../src/v2/components/ModalDescription.tsx","../../src/v2/components/ModalTrigger.tsx","../../src/v2/components/ModalClose.tsx","../../src/v2/components/ModalRail.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { StyledOverlay, StyledContent } from \"./ModalV2Styles\";\nimport {\n  ModalHeader,\n  ModalDescription,\n  ModalTrigger,\n  ModalRail,\n  ModalAction,\n} from \"./components\";\nimport {\n  DEFAULT_MODAL_WIDTH,\n  DEFAULT_MODAL_BG,\n  DEFAULT_MODAL_Z_INDEX,\n  MODAL_SIZE_PRESETS,\n  MODAL_PRIORITY_Z_INDEX,\n} from \"../shared/constants\";\nimport type { TypeModalV2Props } from \"./ModalV2Types\";\n\ninterface DraggableModalContentProps {\n  children: React.ReactNode;\n  computedWidth: any;\n  bg: any;\n  computedZIndex: number;\n  label?: string;\n  dataAttributes: Record<string, string>;\n  draggable?: boolean;\n  rest: any;\n  railProps?: Partial<TypeModalV2Props[\"railProps\"]>;\n}\n\n// Context to share drag state between modal content and header\ninterface DragContextValue {\n  position: { x: number; y: number };\n  isDragging: boolean;\n  onHeaderMouseDown: (e: React.MouseEvent) => void;\n  contentRef: React.RefObject<HTMLDivElement>;\n  draggable: boolean;\n}\n\nconst DragContext = React.createContext<DragContextValue | null>(null);\n\nexport const useDragContext = () => {\n  const context = React.useContext(DragContext);\n  return context;\n};\n\nconst DraggableModalContent: React.FC<DraggableModalContentProps> = ({\n  children,\n  computedWidth,\n  bg,\n  computedZIndex,\n  label,\n  dataAttributes,\n  draggable,\n  rest,\n  railProps,\n}) => {\n  const [position, setPosition] = React.useState({ x: 0, y: 0 });\n  const [isDragging, setIsDragging] = React.useState(false);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  // Calculate rail dimensions for boundary constraints\n  const railSize = railProps?.size ?? 44;\n  const railOffset = railProps?.offset ?? 12;\n  const railSide = railProps?.side ?? \"right\";\n\n  // Total extra space needed on the side with the rail\n  // (only when viewport is wider than 400px breakpoint)\n  const railExtraSpace = railSize + railOffset;\n\n  const handleHeaderMouseDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (!draggable) return;\n\n      // Only allow dragging from header (not interactive elements)\n      const target = e.target as HTMLElement;\n      if (\n        target.tagName === \"BUTTON\" ||\n        target.tagName === \"INPUT\" ||\n        target.closest(\"button\")\n      ) {\n        return;\n      }\n\n      e.preventDefault();\n      setIsDragging(true);\n\n      const rect = contentRef.current?.getBoundingClientRect();\n      if (!rect) return;\n\n      // Calculate offset from mouse to current modal position\n      const offsetX = e.clientX - rect.left;\n      const offsetY = e.clientY - rect.top;\n\n      const handleMouseMove = (e: MouseEvent) => {\n        e.preventDefault();\n\n        // Calculate new position based on mouse position minus offset\n        const newX = e.clientX - offsetX;\n        const newY = e.clientY - offsetY;\n\n        // Determine if rail is on the side (viewport > 400px) or above (viewport <= 400px)\n        const isRailOnSide = window.innerWidth > 400;\n\n        // Constrain to viewport bounds (keeping modal AND rail fully visible)\n        const modalWidth = rect.width;\n        const modalHeight = rect.height;\n\n        // Adjust boundaries to account for rail position\n        let maxX = window.innerWidth - modalWidth;\n        let minX = 0;\n        let maxY = window.innerHeight - modalHeight;\n        let minY = 0;\n\n        if (isRailOnSide) {\n          // Rail is positioned on the side of the modal\n          if (railSide === \"right\") {\n            // Rail is on the right, so reduce maxX to prevent rail from going off-screen\n            maxX = window.innerWidth - modalWidth - railExtraSpace;\n          } else {\n            // Rail is on the left, so increase minX to prevent rail from going off-screen\n            minX = railExtraSpace;\n          }\n        } else {\n          // Rail is positioned above the modal (viewport <= 400px)\n          // Account for rail height + offset at the top\n          minY = railSize + railOffset;\n        }\n\n        const constrainedX = Math.max(minX, Math.min(maxX, newX));\n        const constrainedY = Math.max(minY, Math.min(maxY, newY));\n\n        // Convert to offset from center for our transform\n        const centerX = window.innerWidth / 2 - modalWidth / 2;\n        const centerY = window.innerHeight / 2 - modalHeight / 2;\n\n        setPosition({\n          x: constrainedX - centerX,\n          y: constrainedY - centerY,\n        });\n      };\n\n      const handleMouseUp = () => {\n        setIsDragging(false);\n        document.removeEventListener(\"mousemove\", handleMouseMove);\n        document.removeEventListener(\"mouseup\", handleMouseUp);\n      };\n\n      document.addEventListener(\"mousemove\", handleMouseMove);\n      document.addEventListener(\"mouseup\", handleMouseUp);\n    },\n    [draggable, railSide, railExtraSpace]\n  );\n\n  const dragContextValue = React.useMemo<DragContextValue>(\n    () => ({\n      position,\n      isDragging,\n      onHeaderMouseDown: handleHeaderMouseDown,\n      contentRef,\n      draggable: draggable ?? false,\n    }),\n    [position, isDragging, handleHeaderMouseDown, draggable]\n  );\n\n  // Prevent modal from closing on outside interaction when draggable\n  const handleInteractOutside = React.useCallback(\n    (e: Event) => {\n      if (draggable) {\n        e.preventDefault();\n      }\n    },\n    [draggable]\n  );\n\n  return (\n    <DragContext.Provider value={draggable ? dragContextValue : null}>\n      <StyledContent\n        ref={contentRef}\n        width={computedWidth}\n        bg={bg}\n        zIndex={computedZIndex}\n        aria-label={label}\n        draggable={draggable}\n        isDragging={isDragging}\n        railSize={railSize}\n        railOffset={railOffset}\n        railSide={railSide}\n        onInteractOutside={handleInteractOutside}\n        style={\n          draggable\n            ? {\n                transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,\n                transition: isDragging ? \"none\" : undefined,\n              }\n            : undefined\n        }\n        {...dataAttributes}\n        {...rest}\n      >\n        {children}\n      </StyledContent>\n    </DragContext.Provider>\n  );\n};\n\n/**\n * The modal you want - with Radix UI Dialog\n *\n * Features:\n * - Built with Radix UI Dialog for superior accessibility\n * - Same API as the original Modal component\n * - Automatic focus management and keyboard navigation\n * - Portal rendering for proper z-index layering\n * - Customizable styling through system props\n * - Optional draggable functionality using react-dnd\n */\nconst Modal = (props: TypeModalV2Props) => {\n  const {\n    children,\n    modalTrigger,\n    draggable = false,\n    open,\n    defaultOpen,\n    onOpenChange,\n    \"aria-label\": label,\n    title,\n    subtitle,\n    description,\n    size,\n    priority,\n    data = {},\n    bg = DEFAULT_MODAL_BG,\n    showOverlay = true,\n    actions,\n    railProps,\n    ...rest\n  } = props;\n\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n\n  // Compute actual width\n  const computedWidth = React.useMemo(() => {\n    if (size) {\n      // Handle preset sizes\n      if (typeof size === \"string\" && size in MODAL_SIZE_PRESETS) {\n        return MODAL_SIZE_PRESETS[size as keyof typeof MODAL_SIZE_PRESETS];\n      }\n      // Handle custom size values\n      return size;\n    }\n    // Fall back to default width\n    return DEFAULT_MODAL_WIDTH;\n  }, [size]);\n\n  // Compute actual z-index\n  const computedZIndex = React.useMemo(() => {\n    if (priority) {\n      return MODAL_PRIORITY_Z_INDEX[priority];\n    }\n    return DEFAULT_MODAL_Z_INDEX;\n  }, [priority]);\n\n  // Create data attributes object\n  const dataAttributes = React.useMemo(() => {\n    const attrs: Record<string, string> = {};\n    Object.entries(data).forEach(([key, value]) => {\n      attrs[`data-${key}`] = String(value);\n    });\n    attrs[\"data-qa-modal\"] = \"\";\n    // Only add open attribute if in controlled mode\n    if (open !== undefined) {\n      attrs[\"data-qa-modal-open\"] = String(open);\n    }\n    return attrs;\n  }, [data, open]);\n\n  // Determine if we should auto-render the header from provided props\n  const shouldRenderHeader = Boolean(title || subtitle);\n\n  // Build Dialog.Root props conditionally\n  const dialogRootProps = React.useMemo(() => {\n    const props: any = {};\n\n    // If controlled (open prop provided), use it\n    if (open !== undefined) {\n      props.open = open;\n    }\n    // If uncontrolled with explicit defaultOpen, use it\n    else if (defaultOpen !== undefined) {\n      props.defaultOpen = defaultOpen;\n    }\n    // If completely uncontrolled (neither open nor defaultOpen provided), default to closed\n    else {\n      props.defaultOpen = false;\n    }\n\n    // Always add onOpenChange if provided\n    if (onOpenChange) {\n      props.onOpenChange = handleOpenChange;\n    }\n\n    // When draggable, prevent modal from closing on outside interaction\n    // This allows users to interact with background content\n    if (draggable) {\n      props.modal = false;\n    }\n\n    return props;\n  }, [open, defaultOpen, handleOpenChange, onOpenChange, draggable]);\n\n  // Handle trigger - use modalTrigger prop if provided, otherwise look for ModalTrigger children (backward compatibility)\n  const triggers: React.ReactNode[] = [];\n  const content: React.ReactNode[] = [];\n\n  if (modalTrigger) {\n    // New prop-based approach: wrap the provided element with Dialog.Trigger\n    triggers.push(\n      <Dialog.Trigger key=\"modal-trigger\" asChild>\n        {modalTrigger}\n      </Dialog.Trigger>\n    );\n    // All children are content\n    content.push(children);\n  } else {\n    // Legacy approach: separate ModalTrigger children from content children\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === ModalTrigger) {\n        triggers.push(child);\n      } else {\n        content.push(child);\n      }\n    });\n  }\n\n  return (\n    <Dialog.Root {...dialogRootProps}>\n      {/* Render triggers as direct children of Dialog.Root */}\n      {triggers}\n\n      <Dialog.Portal>\n        {showOverlay && (\n          <StyledOverlay zIndex={computedZIndex} allowInteraction={draggable} />\n        )}\n        <DraggableModalContent\n          computedWidth={computedWidth}\n          bg={bg}\n          computedZIndex={computedZIndex}\n          label={label}\n          dataAttributes={dataAttributes}\n          draggable={draggable}\n          rest={rest}\n          railProps={railProps}\n        >\n          {/* Floating actions rail - always show a close by default */}\n          <ModalRail {...railProps}>\n            <ModalAction\n              actionType=\"close\"\n              aria-label=\"Close\"\n              iconName=\"x-outline\"\n            />\n            {actions?.map((action, idx) => (\n              <ModalAction key={idx} {...action} />\n            ))}\n          </ModalRail>\n          {/* Auto-render header when title or subtitle is provided */}\n          {shouldRenderHeader && (\n            <ModalHeader title={title} subtitle={subtitle} />\n          )}\n\n          {/* Auto-render description when provided */}\n          {description && <ModalDescription>{description}</ModalDescription>}\n\n          {/* Main content (everything except triggers) */}\n          {content}\n        </DraggableModalContent>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default Modal;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport {\n  BODY_PADDING,\n  DEFAULT_OVERLAY_Z_INDEX_OFFSET,\n} from \"../shared/constants\";\n\ninterface StyledOverlayProps extends TypeContainerProps {\n  zIndex?: number;\n  allowInteraction?: boolean;\n}\n\nexport const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  bottom: 0px;\n  background-color: ${(props) => props.theme.colors.overlay.background.base};\n  opacity: 0;\n  will-change: opacity;\n  transition: opacity ${(props) => props.theme.duration.medium}\n    ${(props) => props.theme.easing.ease_inout};\n  z-index: ${(props) =>\n    props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};\n\n  /* Allow clicking through overlay when modal is draggable */\n  ${(props) =>\n    props.allowInteraction &&\n    `\n    pointer-events: none;\n  `}\n\n  ${zIndex}\n\n  &[data-state=\"open\"] {\n    opacity: 1;\n  }\n  &[data-state=\"closed\"] {\n    opacity: 0;\n  }\n`;\n\ninterface StyledContentProps extends TypeContainerProps {\n  zIndex?: number;\n  isDragging?: boolean;\n  draggable?: boolean;\n  railSize?: number;\n  railOffset?: number;\n  railSide?: \"right\" | \"left\";\n}\n\nexport const StyledContent = styled(Dialog.Content)<StyledContentProps>`\n  position: fixed;\n  ${(props) =>\n    props.draggable\n      ? `\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      `\n      : `\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      `}\n  display: flex;\n  flex-direction: column;\n  border-radius: ${(props) => props.theme.radii[600]};\n  box-shadow: ${(props) => props.theme.shadows.medium};\n  filter: blur(0);\n  color: ${(props) => props.theme.colors.text.body};\n  outline: none;\n  max-width: ${(props) => {\n    // Calculate extra space needed for the rail when it's on the side (viewport > 400px)\n    const railSize = props.railSize ?? 44;\n    const railOffset = props.railOffset ?? 12;\n    const railExtraSpace = railSize + railOffset;\n\n    // Account for rail space when positioned on the side\n    // At viewport <= 400px, rail is above modal, so no horizontal space needed\n    return `calc(100vw - ${BODY_PADDING} - ${railExtraSpace}px)`;\n  }};\n  max-height: calc(100vh - ${BODY_PADDING});\n  z-index: ${(props) => props.zIndex || 1000};\n\n  /* When viewport is <= 400px, rail is above modal, so restore full width */\n  @media (max-width: 400px) {\n    max-width: calc(100vw - ${BODY_PADDING});\n  }\n\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: calc(100vh - ${BODY_PADDING});\n  }\n\n  ${width}\n  ${COMMON}\n\n  /* Enhanced Radix Dialog animations */\n  opacity: 0;\n  ${(props) =>\n    !props.draggable\n      ? `\n    transform: translate(-50%, -50%) scale(0.95);\n    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},\n      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};\n  `\n      : `\n    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};\n  `}\n\n  &[data-state=\"open\"] {\n    opacity: 1;\n    ${(props) =>\n      !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}\n  }\n  &[data-state=\"closed\"] {\n    opacity: 0;\n    ${(props) =>\n      !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}\n  }\n`;\n\nexport const Content = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  min-height: 80px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n  padding: 0 ${(props) => props.theme.space[300]}\n    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    flex-basis: 100%;\n  }\n`;\n\ninterface HeaderProps {\n  draggable?: boolean;\n  isDragging?: boolean;\n}\n\nexport const Header = styled(Box)<HeaderProps>`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[300]};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n\n  /* Draggable cursor styling */\n  ${(props) =>\n    props.draggable &&\n    `\n    cursor: ${props.isDragging ? \"grabbing\" : \"grab\"};\n    user-select: none;\n  `}\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[300]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n`;\n\nStyledOverlay.displayName = \"ModalOverlay\";\nStyledContent.displayName = \"ModalContent\";\nContent.displayName = \"ModalContent\";\nHeader.displayName = \"ModalHeader\";\nFooter.displayName = \"ModalFooter\";\n","// Shared constants for both Modal versions\n\n// Default z-index values\nexport const DEFAULT_MODAL_Z_INDEX = 6;\nexport const DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;\n\n// Default styling values\nexport const DEFAULT_MODAL_WIDTH = \"600px\";\nexport const DEFAULT_MODAL_BG = \"container.background.base\";\nexport const DEFAULT_CLOSE_BUTTON_LABEL = \"Close dialog\";\n\n// Max space allowed between the modal and the edge of the browser\nexport const BODY_PADDING = \"64px\";\n\n// Size presets for simplified API\nexport const MODAL_SIZE_PRESETS = {\n  small: \"400px\",\n  medium: \"600px\",\n  large: \"800px\",\n  full: \"90vw\",\n} as const;\n\n// Priority level z-index mappings\nexport const MODAL_PRIORITY_Z_INDEX = {\n  low: 100,\n  medium: 1000,\n  high: 2000,\n} as const;\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Header } from \"../ModalV2Styles\";\nimport { ModalCloseButton } from \"./ModalCloseButton\";\nimport type { TypeModalV2HeaderProps } from \"../ModalV2Types\";\nimport { useDragContext } from \"../ModalV2\";\n\nexport const ModalHeader = (props: TypeModalV2HeaderProps) => {\n  const {\n    title,\n    subtitle,\n    children,\n    titleProps = {},\n    subtitleProps = {},\n    showInlineClose,\n    ...rest\n  } = props;\n\n  const dragContext = useDragContext();\n  const isDraggable = dragContext?.draggable ?? false;\n\n  return (\n    <Header\n      {...rest}\n      onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}\n      draggable={isDraggable}\n      isDragging={dragContext?.isDragging}\n    >\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Dialog.Title asChild {...titleProps}>\n                <Text.Headline>{title}</Text.Headline>\n              </Dialog.Title>\n            )}\n            {subtitle && (\n              <Dialog.Description asChild {...subtitleProps}>\n                <Text as=\"div\" fontSize={200}>\n                  {subtitle}\n                </Text>\n              </Dialog.Description>\n            )}\n          </Box>\n          {showInlineClose && (\n            <Box display=\"flex\" alignItems=\"center\" justifyContent=\"flex-end\">\n              <ModalCloseButton position=\"relative\" offset={0} />\n            </Box>\n          )}\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nModalHeader.displayName = \"ModalHeader\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeModalV2CloseButtonProps } from \"../ModalV2Types\";\n\nconst CloseButtonWrapper = styled.button<{\n  size?: number;\n  position?: \"absolute\" | \"relative\";\n  side?: \"right\" | \"left\";\n  offset?: number;\n}>`\n  width: ${(p) => p.size || 44}px;\n  height: ${(p) => p.size || 44}px;\n  display: inline-grid;\n  place-items: center;\n  border-radius: 8px;\n  border: none;\n  background: rgba(22, 32, 32, 0.56);\n  color: #ffffff;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.2s ease;\n\n  ${(p) =>\n    p.position === \"absolute\" &&\n    `\n    position: absolute;\n    top: 0px;\n    ${p.side || \"right\"}: ${p.offset || -48}px;\n    z-index: 1;\n  `}\n\n  &:hover {\n    background: rgba(22, 32, 32, 0.7);\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nexport const ModalCloseButton = (props: TypeModalV2CloseButtonProps) => {\n  const {\n    children,\n    onClick,\n    asChild,\n    closeButtonLabel = \"Close modal\",\n    size = 44,\n    position = \"absolute\",\n    side = \"right\",\n    offset = -48,\n    ...rest\n  } = props;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  if (asChild) {\n    return (\n      <Dialog.Close asChild>\n        {React.cloneElement(children as React.ReactElement, {\n          onClick: handleClick,\n          ...rest,\n        })}\n      </Dialog.Close>\n    );\n  }\n\n  return (\n    <Dialog.Close asChild>\n      <CloseButtonWrapper\n        onClick={handleClick}\n        size={size}\n        position={position}\n        side={side}\n        offset={offset}\n        aria-label={closeButtonLabel}\n        title={closeButtonLabel}\n        {...rest}\n      >\n        {children || <Icon name=\"x-outline\" size=\"small\" />}\n      </CloseButtonWrapper>\n    </Dialog.Close>\n  );\n};\n\nModalCloseButton.displayName = \"ModalCloseButton\";\n","import * as React from \"react\";\nimport { Footer } from \"../ModalV2Styles\";\nimport { DEFAULT_MODAL_BG } from \"../../shared/constants\";\nimport type { TypeModalV2FooterProps } from \"../ModalV2Types\";\n\nexport const ModalFooter = (props: TypeModalV2FooterProps) => {\n  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;\n  return (\n    <Footer\n      bg={bg}\n      borderTop={500}\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children}\n    </Footer>\n  );\n};\n\nModalFooter.displayName = \"ModalFooter\";\n","import * as React from \"react\";\nimport { Content } from \"../ModalV2Styles\";\nimport type { TypeModalV2ContentProps } from \"../ModalV2Types\";\n\nexport const ModalContent = React.forwardRef<\n  HTMLDivElement,\n  TypeModalV2ContentProps\n>(({ children, ...rest }, ref) => {\n  return (\n    <Content data-qa-modal ref={ref} {...rest}>\n      {children}\n    </Content>\n  );\n});\n\nModalContent.displayName = \"ModalContent\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeModalV2DescriptionProps } from \"../ModalV2Types\";\n\nexport const ModalDescription = React.forwardRef<\n  HTMLDivElement,\n  TypeModalV2DescriptionProps\n>(({ children, descriptionProps = {}, ...rest }, ref) => {\n  return (\n    <Dialog.Description asChild {...descriptionProps}>\n      <Box ref={ref} {...rest}>\n        {children}\n      </Box>\n    </Dialog.Description>\n  );\n});\n\nModalDescription.displayName = \"ModalDescription\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type { TypeModalV2TriggerProps } from \"../ModalV2Types\";\n\n/**\n * A trigger button that opens the modal when clicked.\n * Must be used inside a Modal component's Dialog.Root context.\n * Uses Seeds Button by default but supports asChild for custom elements.\n */\nexport const ModalTrigger = (props: TypeModalV2TriggerProps) => {\n  const { children, onClick, asChild, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    // Dialog.Trigger automatically handles modal opening\n  };\n\n  if (asChild) {\n    return (\n      <Dialog.Trigger asChild>\n        {React.cloneElement(children as React.ReactElement, {\n          onClick: handleClick,\n          ...rest,\n        })}\n      </Dialog.Trigger>\n    );\n  }\n\n  return (\n    <Dialog.Trigger asChild>\n      <Button onClick={handleClick} {...rest}>\n        {children}\n      </Button>\n    </Dialog.Trigger>\n  );\n};\n\nModalTrigger.displayName = \"ModalTrigger\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\n\nexport interface ModalCloseProps {\n  children: React.ReactNode;\n  onClick?: (e: React.MouseEvent) => void;\n  asChild?: boolean;\n}\n\n/**\n * A component that closes the modal when clicked.\n * Uses asChild pattern like Radix primitives.\n */\nexport const ModalClose = (props: ModalCloseProps) => {\n  const { children, onClick, asChild = false, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  return (\n    <Dialog.Close asChild={asChild} onClick={handleClick} {...rest}>\n      {children}\n    </Dialog.Close>\n  );\n};\n\nModalClose.displayName = \"ModalClose\";\n","// components/ModalRail.tsx\nimport * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeModalRailProps, TypeModalActionProps } from \"../ModalV2Types\";\n\n// --- styled wrappers ---\nconst Rail = styled.div<{\n  side: \"right\" | \"left\";\n  offset: number;\n  gap: number;\n  size: number;\n}>`\n  position: absolute;\n  top: ${(p) => p.offset}px;\n  ${(p) =>\n    p.side === \"right\"\n      ? `right: calc(-1 * (${p.size}px + ${p.offset}px));`\n      : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}\n  display: flex;\n  flex-direction: column;\n  gap: ${(p) => p.gap}px;\n  z-index: 1;\n\n  @media (max-width: 400px) {\n    /* Move rail above the modal on the right side */\n    top: auto;\n    bottom: calc(100% + ${(p) => p.offset}px);\n    right: ${(p) => p.offset}px;\n    left: auto;\n    /* Change to horizontal layout with reversed order */\n    flex-direction: row-reverse;\n  }\n`;\n\nconst RailBtn = styled.button<{ size: number }>`\n  width: ${(p) => p.size}px;\n  height: ${(p) => p.size}px;\n  display: inline-grid;\n  place-items: center;\n  border-radius: 8px;\n  border: none;\n  background: rgba(22, 32, 32, 0.56);\n  color: #ffffff;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: rgba(22, 32, 32, 0.7);\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\n// --- components ---\nexport const ModalRail: React.FC<TypeModalRailProps> = ({\n  side = \"right\",\n  offset = 12,\n  gap = 12,\n  size = 44,\n  children,\n}) => {\n  return (\n    <Rail\n      data-slot=\"modal-rail\"\n      side={side}\n      offset={offset}\n      gap={gap}\n      size={size}\n      aria-label=\"Modal quick actions\"\n    >\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(child as any, { size })\n          : child\n      )}\n    </Rail>\n  );\n};\n\nexport const ModalAction: React.FC<\n  TypeModalActionProps & { size?: number }\n> = ({\n  \"aria-label\": ariaLabel,\n  iconName,\n  disabled,\n  size = 44,\n  actionType,\n  onClick,\n  ...rest\n}) => {\n  const Btn = (\n    <RailBtn\n      size={size}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      disabled={disabled}\n      {...rest}\n    >\n      {iconName ? <Icon name={iconName} size=\"small\" /> : ariaLabel}\n    </RailBtn>\n  );\n\n  return actionType === \"close\" ? (\n    <Dialog.Close asChild>{Btn}</Dialog.Close>\n  ) : (\n    React.cloneElement(Btn, { onClick })\n  );\n};\n"],"mappings":"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","names":["React","Dialog","Content","React","Dialog","Box","React","Dialog","styled","jsx","Box","jsx","React","jsx","Content","React","Dialog","Box","jsx","React","Dialog","jsx","Dialog","jsx","React","Dialog","styled","Icon","jsx","jsx","jsxs","e","props"]}

package/dist/esm/index.js

@@ -12,7 +12,7 @@ import {
   ModalRail,
   ModalTrigger,
   ModalV2_default
-} from "./chunk-GKQRFPCX.js";
+} from "./chunk-4ITF4DBY.js";
 
 // src/index.ts
 var src_default = v1_default;

package/dist/esm/v2/index.js

@@ -15,8 +15,9 @@ import {
   ModalHeader,
   ModalRail,
   ModalTrigger,
-  ModalV2_default
-} from "../chunk-GKQRFPCX.js";
+  ModalV2_default,
+  useDragContext
+} from "../chunk-4ITF4DBY.js";
 export {
   BODY_PADDING,
   DEFAULT_MODAL_BG,
@@ -34,6 +35,7 @@ export {
   ModalFooter,
   ModalHeader,
   ModalRail,
-  ModalTrigger
+  ModalTrigger,
+  useDragContext
 };
 //# sourceMappingURL=index.js.map

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { M as Modal } from './Modal-ki8oiGbC.mjs';
 export { d as TypeModalCloseButtonProps, c as TypeModalContentProps, b as TypeModalFooterProps, a as TypeModalHeaderProps, T as TypeModalProps } from './Modal-ki8oiGbC.mjs';
-export { i as ModalAction, g as ModalClose, f as ModalCloseButton, e as ModalContent, b as ModalDescription, d as ModalFooter, c as ModalHeader, h as ModalRail, a as ModalTrigger, M as ModalV2, q as TypeModalActionProps, p as TypeModalRailProps, k as TypeModalV2CloseButtonProps, n as TypeModalV2ContentProps, o as TypeModalV2DescriptionProps, m as TypeModalV2FooterProps, l as TypeModalV2HeaderProps, T as TypeModalV2Props, j as TypeModalV2TriggerProps } from './ModalRail-OQ8DZ1vH.mjs';
+export { i as ModalAction, g as ModalClose, f as ModalCloseButton, e as ModalContent, b as ModalDescription, d as ModalFooter, c as ModalHeader, h as ModalRail, a as ModalTrigger, M as ModalV2, q as TypeModalActionProps, p as TypeModalRailProps, k as TypeModalV2CloseButtonProps, n as TypeModalV2ContentProps, o as TypeModalV2DescriptionProps, m as TypeModalV2FooterProps, l as TypeModalV2HeaderProps, T as TypeModalV2Props, j as TypeModalV2TriggerProps } from './ModalRail-5PeilhW7.mjs';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-modal';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { M as Modal } from './Modal-ki8oiGbC.js';
 export { d as TypeModalCloseButtonProps, c as TypeModalContentProps, b as TypeModalFooterProps, a as TypeModalHeaderProps, T as TypeModalProps } from './Modal-ki8oiGbC.js';
-export { i as ModalAction, g as ModalClose, f as ModalCloseButton, e as ModalContent, b as ModalDescription, d as ModalFooter, c as ModalHeader, h as ModalRail, a as ModalTrigger, M as ModalV2, q as TypeModalActionProps, p as TypeModalRailProps, k as TypeModalV2CloseButtonProps, n as TypeModalV2ContentProps, o as TypeModalV2DescriptionProps, m as TypeModalV2FooterProps, l as TypeModalV2HeaderProps, T as TypeModalV2Props, j as TypeModalV2TriggerProps } from './ModalRail-OQ8DZ1vH.js';
+export { i as ModalAction, g as ModalClose, f as ModalCloseButton, e as ModalContent, b as ModalDescription, d as ModalFooter, c as ModalHeader, h as ModalRail, a as ModalTrigger, M as ModalV2, q as TypeModalActionProps, p as TypeModalRailProps, k as TypeModalV2CloseButtonProps, n as TypeModalV2ContentProps, o as TypeModalV2DescriptionProps, m as TypeModalV2FooterProps, l as TypeModalV2HeaderProps, T as TypeModalV2Props, j as TypeModalV2TriggerProps } from './ModalRail-5PeilhW7.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-modal';