@byeolnaerim/flex-layout 0.0.4 → 0.0.6

package/dist/components.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var react = require('react');
+var React2 = require('react');
 var equal = require('fast-deep-equal');
 var rxjs = require('rxjs');
 var operators = require('rxjs/operators');
-var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var equal__default = /*#__PURE__*/_interopDefault(equal);
 
 // src/flex-layout/components/FlexLayout.tsx
@@ -340,9 +340,9 @@ var ContainerOpenCloseProvider = ({
   if (!containerSpreadSubjectMap[containerName]) {
     containerSpreadSubjectMap[containerName] = new rxjs.Subject();
   }
-  const [containers, setContainers] = react.useState([]);
-  const [container, setContainer] = react.useState();
-  react.useEffect(() => {
+  const [containers, setContainers] = React2.useState([]);
+  const [container, setContainer] = React2.useState();
+  React2.useEffect(() => {
     const subscription = getLayoutInfos(layoutName).subscribe(
       (layout) => {
         if (!layout || !layout.container[containerName] || !layout.container[containerName].current)
@@ -357,7 +357,7 @@ var ContainerOpenCloseProvider = ({
     );
     return () => subscription.unsubscribe();
   }, [containerName, layoutName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const styleName = `${sizeName.charAt(0).toUpperCase() + sizeName.substring(1)}`;
     const clientSize = "client" + styleName;
     const outerSize = "outer" + styleName;
@@ -430,9 +430,9 @@ var ContainerOpenCloseProvider = ({
 
 // src/flex-layout/styles/FlexLayout.module.css
 var FlexLayout_default = {};
-var FlexLayoutContext = react.createContext(null);
+var FlexLayoutContext = React2.createContext(null);
 function useFlexLayoutContext() {
-  const context = react.useContext(FlexLayoutContext);
+  const context = React2.useContext(FlexLayoutContext);
   if (!context) {
     throw new Error(
       "useFlexLayoutContext must be used within FlexLayoutContext.Provider"
@@ -444,9 +444,11 @@ function FlexLayoutProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(FlexLayoutContext.Provider, { value, children });
+  return /* @__PURE__ */ React.createElement(FlexLayoutContext.Provider, { value }, children);
 }
-var FlexLayout = ({
+
+// src/flex-layout/components/FlexLayout.tsx
+function FlexLayout({
   layoutName,
   direction,
   children,
@@ -455,20 +457,20 @@ var FlexLayout = ({
   panelClassName,
   panelMovementMode = "divorce",
   ...props
-}) => {
-  const containerCount = react.Children.count(children);
+}) {
+  const containerCount = React2.Children.count(children);
   const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => react.isValidElement(node) && node.type === react.Fragment;
-  const nodes = react.Children.toArray(children).flatMap(
-    (node) => isFragmentElement(node) ? react.Children.toArray(node.props.children) : [node]
+  const isFragmentElement = (node) => React2.isValidElement(node) && node.type === React2.Fragment;
+  const nodes = React2.Children.toArray(children).flatMap(
+    (node) => isFragmentElement(node) ? React2.Children.toArray(node.props.children) : [node]
   );
   const flattenedChildren = nodes.filter(
-    react.isValidElement
+    React2.isValidElement
   );
   if (flattenedChildren.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     FlexLayoutProvider,
     {
       value: {
@@ -478,39 +480,35 @@ var FlexLayout = ({
         panelClassName,
         containerCount,
         fitContent
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${FlexLayout_default["flex-layout"]} ${className && className !== "" ? className : ""}`,
+        ...ref ? { ref } : {},
+        ...props,
+        "data-layout_name": layoutName,
+        "data-direction": direction
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `${FlexLayout_default["flex-layout"]} ${className && className !== "" ? className : ""}`,
-          ...ref ? { ref } : {},
-          ...props,
-          "data-layout_name": layoutName,
-          "data-direction": direction,
-          children: flattenedChildren.map((child, index) => {
-            if (!child || !react.isValidElement(child)) return null;
-            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-              child,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-};
-var FlexLayout_default2 = FlexLayout;
+      flattenedChildren.map((child, index) => {
+        if (!child || !React2.isValidElement(child)) return null;
+        return /* @__PURE__ */ React.createElement(React2.Fragment, { key: index }, child, /* @__PURE__ */ React.createElement(
+          ContainerOpenCloseProvider,
+          {
+            layoutName,
+            containerName: child.props.containerName,
+            sizeName: fitContent
+          }
+        ));
+      })
+    )
+  ));
+}
 var useSize = (sizeName) => {
-  const ref = react.useRef(null);
-  const [size, setSize] = react.useState(void 0);
-  react.useLayoutEffect(() => {
+  const ref = React2.useRef(null);
+  const [size, setSize] = React2.useState(void 0);
+  React2.useLayoutEffect(() => {
     if (!ref.current) return;
     const handleResize = () => {
       if (ref.current) {
@@ -547,7 +545,7 @@ var flexDirectionModel = {
     resizeCursor: "ns-resize"
   }
 };
-var FlexLayoutResizePanel = ({
+function FlexLayoutResizePanel({
   direction,
   containerCount,
   panelMode = "default",
@@ -555,21 +553,21 @@ var FlexLayoutResizePanel = ({
   layoutName,
   panelClassName,
   panelMovementMode
-}) => {
-  let isResizePanelClickRef = react.useRef(false);
+}) {
+  let isResizePanelClickRef = React2.useRef(false);
   let prevTouchEvent = null;
-  let parentSizeRef = react.useRef(0);
-  let totalMovementRef = react.useRef(0);
-  const containerCountRef = react.useRef(containerCount);
-  react.useEffect(() => {
+  let parentSizeRef = React2.useRef(0);
+  let totalMovementRef = React2.useRef(0);
+  const containerCountRef = React2.useRef(containerCount);
+  React2.useEffect(() => {
     return () => {
       document.body.style.cursor = "";
     };
   }, []);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     containerCountRef.current = containerCount;
   }, [containerCount]);
-  const panelRef = react.useRef(null);
+  const panelRef = React2.useRef(null);
   const panelMouseDownEvent = (event) => {
     if (!panelRef.current || !panelRef.current.parentElement) return;
     isResizePanelClickRef.current = true;
@@ -634,10 +632,12 @@ var FlexLayoutResizePanel = ({
     }
     const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
     const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
+    if (!(targetElement instanceof HTMLElement)) return;
+    if (!(nextElement instanceof HTMLElement)) return;
     targetElement.style.flex = `${targetFlexGrow} 1 0%`;
     nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
   }
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const addGlobalMoveEvent = (event) => {
       if (!isResizePanelClickRef.current || !panelRef.current) {
         return;
@@ -678,24 +678,25 @@ var FlexLayoutResizePanel = ({
       });
     };
   }, []);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!panelRef.current) return;
     setResizePanelRef(layoutName, containerName, panelRef);
   }, [containerName, layoutName]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       id: containerName + "_resize_panel",
       className: `${FlexLayout_default["flex-resize-panel"]} ${FlexLayout_default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
       ref: panelRef,
       onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: FlexLayout_default.hover })
-    }
+      onTouchStart: panelMouseDownEvent
+    },
+    /* @__PURE__ */ React.createElement("div", { className: FlexLayout_default.hover })
   );
-};
-var FlexLayoutResizePanel_default = FlexLayoutResizePanel;
-var FlexLayoutContainer = ({
+}
+
+// src/flex-layout/components/FlexLayoutContainer.tsx
+function FlexLayoutContainer({
   isFitContent,
   isFitResize,
   // fitContent,
@@ -709,7 +710,7 @@ var FlexLayoutContainer = ({
   children,
   className,
   panelMode
-}) => {
+}) {
   const {
     direction,
     panelMovementMode,
@@ -723,8 +724,8 @@ var FlexLayoutContainer = ({
     //?
     useSize(fitContent)
   );
-  const flexContainerNodeRef = react.useRef(null);
-  const flexContainerRef = react.useCallback(
+  const flexContainerNodeRef = React2.useRef(null);
+  const flexContainerRef = React2.useCallback(
     (node) => {
       flexContainerNodeRef.current = node;
       if (node !== null) {
@@ -733,15 +734,15 @@ var FlexLayoutContainer = ({
     },
     [layoutName, containerName]
   );
-  const [growState, setGrowState] = react.useState(initialGrow);
-  react.useEffect(() => {
+  const [growState, setGrowState] = React2.useState(initialGrow);
+  React2.useEffect(() => {
     setGrowState(initialGrow);
   }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = react.useState(
+  const [prevGrowState, setPrevGrowState] = React2.useState(
     initialPrevGrow
   );
-  const [isFirstLoad, setIsFirstLoad] = react.useState(true);
-  react.useEffect(() => {
+  const [isFirstLoad, setIsFirstLoad] = React2.useState(true);
+  React2.useEffect(() => {
     if (!flexContainerNodeRef.current) return;
     setContainerRef(layoutName, containerName, flexContainerNodeRef);
     return () => {
@@ -750,7 +751,7 @@ var FlexLayoutContainer = ({
       });
     };
   }, [containerName, layoutName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof window == "undefined" || flexContainerNodeRef.current === null)
       return;
     const storedGrow = sessionStorage.getItem(containerName);
@@ -762,7 +763,7 @@ var FlexLayoutContainer = ({
       }
     }
   }, [containerName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!flexContainerNodeRef.current) return;
     const targetNode = flexContainerNodeRef.current;
     const observer = new MutationObserver((mutations) => {
@@ -785,7 +786,7 @@ var FlexLayoutContainer = ({
       observer.disconnect();
     };
   }, [containerName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
       return;
     requestAnimationFrame(() => {
@@ -806,7 +807,7 @@ var FlexLayoutContainer = ({
       }
     });
   }, [size, containerCount, isFitResize, children]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!flexContainerNodeRef.current) return;
     let notGrowList = [];
     let containerList = [
@@ -832,55 +833,51 @@ var FlexLayoutContainer = ({
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: containerName,
+      "data-container_name": containerName,
+      ref: flexContainerRef,
+      className: `${FlexLayout_default["flex-container"]} ${className && className !== "" ? className : ""}`,
+      ...growState !== void 0 ? { ["data-grow"]: growState } : {},
+      ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
+      "data-is_resize": isInitialResizable,
+      "data-is_resize_panel": isResizePanel,
+      style: growState !== void 0 && {
+        flex: `${growState} 1 0%`
+      } || {}
+    },
+    isFitContent && /* @__PURE__ */ React.createElement(
       "div",
       {
-        id: containerName,
-        "data-container_name": containerName,
-        ref: flexContainerRef,
-        className: `${FlexLayout_default["flex-container"]} ${className && className !== "" ? className : ""}`,
-        ...growState !== void 0 ? { ["data-grow"]: growState } : {},
-        ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
-        "data-is_resize": isInitialResizable,
-        "data-is_resize_panel": isResizePanel,
-        style: growState !== void 0 && {
-          flex: `${growState} 1 0%`
-        } || {},
-        children: isFitContent && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
-            ref,
-            children
-          }
-        ) || children
-      }
-    ),
-    isResizePanel && /* @__PURE__ */ jsxRuntime.jsx(
-      FlexLayoutResizePanel_default,
-      {
-        containerName,
-        layoutName,
-        direction,
-        containerCount,
-        panelMode,
-        panelClassName,
-        panelMovementMode
-      }
-    )
-  ] });
-};
-var FlexLayoutContainer_default = FlexLayoutContainer;
+        className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
+        ref
+      },
+      children
+    ) || children
+  ), isResizePanel && /* @__PURE__ */ React.createElement(
+    FlexLayoutResizePanel,
+    {
+      containerName,
+      layoutName,
+      direction,
+      containerCount,
+      panelMode,
+      panelClassName,
+      panelMovementMode
+    }
+  ));
+}
 var dragState = new rxjs.Subject();
 var filterChildren = (obj) => {
   const { children, ...rest } = obj || {};
   return rest;
 };
 var useDragCapture = (targetRef) => {
-  const stateRef = react.useRef(null);
-  const forceUpdate = react.useRef(0);
-  react.useEffect(() => {
+  const stateRef = React2.useRef(null);
+  const forceUpdate = React2.useRef(0);
+  React2.useEffect(() => {
     const subscription = dragState.pipe(
       rxjs.map((value) => {
         if (!targetRef || !targetRef.current) return null;
@@ -935,8 +932,8 @@ var useDragCapture = (targetRef) => {
     });
     return () => subscription.unsubscribe();
   }, [targetRef]);
-  const [, rerender] = react.useState({});
-  react.useEffect(() => {
+  const [, rerender] = React2.useState({});
+  React2.useEffect(() => {
     const interval = setInterval(() => {
       rerender({});
     }, 50);
@@ -949,15 +946,15 @@ var allSplitScreenCount = new rxjs.BehaviorSubject(0);
 var useDragEvents = ({
   isBlockingActiveInput = false
 }) => {
-  const dragResumeTimer = react.useRef(null);
+  const dragResumeTimer = React2.useRef(null);
   const scrollThreshold = 10;
-  const isScrolling = react.useRef(false);
-  const isPending = react.useRef(false);
-  const isMouseDown = react.useRef(false);
-  const isDragging = react.useRef(false);
-  const touchStartX = react.useRef(0);
-  const touchStartY = react.useRef(0);
-  const handleStart = react.useCallback(
+  const isScrolling = React2.useRef(false);
+  const isPending = React2.useRef(false);
+  const isMouseDown = React2.useRef(false);
+  const isDragging = React2.useRef(false);
+  const touchStartX = React2.useRef(0);
+  const touchStartY = React2.useRef(0);
+  const handleStart = React2.useCallback(
     ({
       event: _event,
       dragStartCallback
@@ -995,7 +992,7 @@ var useDragEvents = ({
     },
     [isBlockingActiveInput]
   );
-  const handleMove = react.useCallback(
+  const handleMove = React2.useCallback(
     ({
       event: _event,
       notDragCallback,
@@ -1034,7 +1031,7 @@ var useDragEvents = ({
     },
     [isBlockingActiveInput]
   );
-  const handleEnd = react.useCallback(
+  const handleEnd = React2.useCallback(
     ({
       event: _event,
       dragEndCallback
@@ -1070,17 +1067,17 @@ function useFlexLayoutSplitScreen({
   parentLayoutName,
   layoutName
 }) {
-  const [direction, setDirection] = react.useState(
+  const [direction, setDirection] = React2.useState(
     directionInitial
   );
-  const [isSplit, setIsSplit] = react.useState(isSplitInitial);
-  const [boundaryContainerSize, setBoundaryContainerSize] = react.useState(null);
-  const [centerDropTargetComponent, setCenterDropTargetComponent] = react.useState([]);
-  const [afterDropTargetComponent, setAfterDropTargetComponent] = react.useState([]);
-  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = react.useState([]);
-  const layoutRef = react.useRef(null);
+  const [isSplit, setIsSplit] = React2.useState(isSplitInitial);
+  const [boundaryContainerSize, setBoundaryContainerSize] = React2.useState(null);
+  const [centerDropTargetComponent, setCenterDropTargetComponent] = React2.useState([]);
+  const [afterDropTargetComponent, setAfterDropTargetComponent] = React2.useState([]);
+  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = React2.useState([]);
+  const layoutRef = React2.useRef(null);
   const dragState2 = useDragCapture(layoutRef);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!dragState2) {
       setBoundaryContainerSize(null);
       return;
@@ -1207,13 +1204,13 @@ function FlexLayoutSplitScreenDragBox({
   scrollTargetRef,
   ...props
 }) {
-  const scrollRAF = react.useRef(null);
-  const velocity = react.useRef({ vx: 0, vy: 0 });
-  const ref = react.useRef(null);
-  const clonedNodeRef = react.useRef(null);
-  const clonedWidth = react.useRef(null);
-  const clonedHeight = react.useRef(null);
-  const hrefUrlRef = react.useRef("");
+  const scrollRAF = React2.useRef(null);
+  const velocity = React2.useRef({ vx: 0, vy: 0 });
+  const ref = React2.useRef(null);
+  const clonedNodeRef = React2.useRef(null);
+  const clonedWidth = React2.useRef(null);
+  const clonedHeight = React2.useRef(null);
+  const hrefUrlRef = React2.useRef("");
   const { handleStart, handleMove, handleEnd } = useDragEvents({
     isBlockingActiveInput
   });
@@ -1243,10 +1240,18 @@ function FlexLayoutSplitScreenDragBox({
       velocity.current = { vx, vy };
       if (!scrollRAF.current) {
         const step = () => {
-          scrollTargetRef?.current?.scrollBy(
-            velocity.current.vx,
-            velocity.current.vy
-          );
+          const target = scrollTargetRef?.current ?? document.scrollingElement;
+          if (target?.scrollBy) {
+            target.scrollBy(
+              velocity.current.vx,
+              velocity.current.vy
+            );
+          } else {
+            window.scrollBy(
+              velocity.current.vx,
+              velocity.current.vy
+            );
+          }
           if (velocity.current.vx === 0 && velocity.current.vy === 0) {
             scrollRAF.current = null;
             return;
@@ -1329,7 +1334,7 @@ function FlexLayoutSplitScreenDragBox({
       }
     });
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (ref.current) {
       const clone = ref.current.cloneNode(true);
       const originRect = ref.current.getBoundingClientRect();
@@ -1357,7 +1362,7 @@ function FlexLayoutSplitScreenDragBox({
       );
     }
   }, []);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const moveEvents = [
       "mousemove",
       "touchmove"
@@ -1389,7 +1394,7 @@ function FlexLayoutSplitScreenDragBox({
     navigationTitle,
     dropEndCallback
   ]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const onCtx = (e) => e.preventDefault();
@@ -1398,7 +1403,7 @@ function FlexLayoutSplitScreenDragBox({
       el.removeEventListener("contextmenu", onCtx);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${className || ""} ${FlexLayout_default["flex-split-screen-drag-box"]}`,
@@ -1481,14 +1486,16 @@ function FlexLayoutSplitScreenDragBox({
         });
       },
       style: { ...style },
-      ...props,
-      children
-    }
-  ) });
+      ...props
+    },
+    children
+  ));
 }
 
 // src/flex-layout/styles/listScroll.module.css
 var listScroll_default = {};
+
+// src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx
 var FlexLayoutSplitScreenScrollBox = ({
   className,
   children,
@@ -1497,10 +1504,10 @@ var FlexLayoutSplitScreenScrollBox = ({
   isDefaultScrollStyle = false,
   ...props
 }) => {
-  const scrollRef = react.useRef(null);
-  const [isMouseDown, setIsMouseDown] = react.useState(false);
-  const scrollEventSubject = react.useRef(new rxjs.Subject());
-  react.useEffect(() => {
+  const scrollRef = React2.useRef(null);
+  const [isMouseDown, setIsMouseDown] = React2.useState(false);
+  const scrollEventSubject = React2.useRef(new rxjs.Subject());
+  React2.useEffect(() => {
     const mouseUpSubscribe = rxjs.fromEvent(
       window,
       "mouseup"
@@ -1523,7 +1530,7 @@ var FlexLayoutSplitScreenScrollBox = ({
       scrollEventSubscribe.unsubscribe();
     };
   }, [keyName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!scrollRef.current) return;
     let animationFrameId = null;
     const handleWheel = (event) => {
@@ -1552,7 +1559,7 @@ var FlexLayoutSplitScreenScrollBox = ({
       scrollRef.current?.removeEventListener("wheel", handleWheel);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: scrollRef,
@@ -1575,27 +1582,29 @@ var FlexLayoutSplitScreenScrollBox = ({
         });
       },
       className: `${className || ""} ${isDefaultScrollStyle ? listScroll_default["default-scroll"] : listScroll_default["list-scroll"]} ${direction ? listScroll_default[direction] : ""}`,
-      ...props,
-      children
-    }
+      ...props
+    },
+    children
   );
 };
-var FlexLayoutSplitScreenScrollBox_default = react.memo(FlexLayoutSplitScreenScrollBox);
+var FlexLayoutSplitScreenScrollBox_default = React2.memo(FlexLayoutSplitScreenScrollBox);
+
+// src/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.tsx
 function FlexLayoutSplitScreenDragBoxContainer({
   className,
   children,
   layoutName,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(
     FlexLayoutSplitScreenScrollBox_default,
     {
       keyName: layoutName,
       className: `${FlexLayout_default["flex-split-screen-drag-box-title-container"]} ${className && className !== "" && className || ""}`,
       direction: "x",
-      ...props,
-      children
-    }
+      ...props
+    },
+    children
   );
 }
 function FlexLayoutSplitScreenDragBoxItem({
@@ -1604,42 +1613,42 @@ function FlexLayoutSplitScreenDragBoxItem({
   isActive,
   ...props
 }) {
-  react.useEffect(() => {
+  React2.useEffect(() => {
     allSplitScreenCount.next(allSplitScreenCount.value + 1);
     return () => {
       if (allSplitScreenCount.value <= 1) return;
       allSplitScreenCount.next(allSplitScreenCount.value - 1);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${FlexLayout_default["flex-split-screen-drag-box-title-item"]} ${isActive ? FlexLayout_default["active"] : ""}`,
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
-      ]
-    }
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: (ev) => onClose(ev) }, "X")
   );
 }
+
+// src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx
 function FlexLayoutSplitScreenDragBoxTitleMore({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ React.createElement(
     "button",
     {
       ...props,
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." })
-      ]
-    }
+      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`
+    },
+    /* @__PURE__ */ React.createElement("span", null, "."),
+    /* @__PURE__ */ React.createElement("span", null, "."),
+    /* @__PURE__ */ React.createElement("span", null, ".")
   );
 }
+
+// src/flex-layout/components/FlexLayoutSplitScreen.tsx
 function isOverDrop({
   x,
   y,
@@ -1707,7 +1716,7 @@ var handleUpdateDropTargetComponents = ({
   list = entries[1];
   const newComponent = {
     containerName: `${containerName + "_" + layoutName}${isUsePrefix ? "_" + orderName + "-" + list.length : ""}`,
-    component: react.cloneElement(
+    component: React2.cloneElement(
       dropComponent,
       { key: screenKey, screenKey }
     ),
@@ -1852,7 +1861,7 @@ function FlexLayoutSplitScreen({
     parentLayoutName: "",
     layoutName
   });
-  react.useEffect(() => {
+  React2.useEffect(() => {
     resetRootSplitScreen(layoutName);
     const subscribe = getSplitScreen(layoutName, layoutName).subscribe((layoutInfo) => {
       if (layoutInfo) {
@@ -1896,7 +1905,7 @@ function FlexLayoutSplitScreen({
       resetRootSplitScreen(layoutName);
     };
   }, [layoutName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const subscribe = dropMovementEventSubject.pipe(
       rxjs.distinctUntilChanged((prev, curr) => {
         const filterChildren2 = (obj) => {
@@ -2083,142 +2092,137 @@ function FlexLayoutSplitScreen({
     afterDropTargetComponent,
     centerDropTargetComponent
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      FlexLayout_default2,
-      {
-        direction,
-        layoutName,
-        "data-is_split": isSplit,
-        panelMovementMode: "bulldozer",
-        children: [
-          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beforeDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              FlexLayoutContainer_default,
+  return /* @__PURE__ */ React.createElement("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef }, /* @__PURE__ */ React.createElement(
+    FlexLayout,
+    {
+      direction,
+      layoutName,
+      "data-is_split": isSplit,
+      panelMovementMode: "bulldozer"
+    },
+    beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, beforeDropTargetComponent.map(
+      ({
+        containerName: cName,
+        component,
+        navigationTitle: navigationTitle2,
+        dropDocumentOutsideOption: dropDocumentOutsideOption2,
+        screenKey: screenKey2
+      }, i) => /* @__PURE__ */ React.createElement(
+        FlexLayoutContainer,
+        {
+          containerName: cName,
+          isInitialResizable: true,
+          isResizePanel: true,
+          key: cName
+        },
+        /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenChild,
+          {
+            parentDirection: direction,
+            layoutName: `${layoutName}_before`,
+            parentLayoutName: layoutName,
+            containerName: cName,
+            depth: 1,
+            rootRef: layoutRef,
+            screenKey: screenKey2,
+            initialCenterComponents: [
               {
+                navigationTitle: navigationTitle2,
+                component,
                 containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: true,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  FlexLayoutSplitScreenChild,
-                  {
-                    parentDirection: direction,
-                    layoutName: `${layoutName}_before`,
-                    parentLayoutName: layoutName,
-                    containerName: cName,
-                    depth: 1,
-                    rootRef: layoutRef,
-                    screenKey: screenKey2,
-                    initialCenterComponents: [
-                      {
-                        navigationTitle: navigationTitle2,
-                        component,
-                        containerName: cName,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: screenKey2
-                      }
-                    ],
-                    rootName: layoutName
-                  }
-                )
-              },
-              cName
-            )
-          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {}) : /* @__PURE__ */ jsxRuntime.jsx(
-            FlexLayoutContainer_default,
+                dropDocumentOutsideOption: dropDocumentOutsideOption2,
+                screenKey: screenKey2
+              }
+            ],
+            rootName: layoutName
+          }
+        )
+      )
+    )) : /* @__PURE__ */ React.createElement("div", null),
+    centerDropTargetComponent.length === 0 ? /* @__PURE__ */ React.createElement("div", null) : /* @__PURE__ */ React.createElement(
+      FlexLayoutContainer,
+      {
+        containerName: `${centerDropTargetComponent[0].containerName}`,
+        isInitialResizable: true,
+        isResizePanel: isSplit
+      },
+      isSplit ? /* @__PURE__ */ React.createElement(
+        FlexLayoutSplitScreenChild,
+        {
+          parentDirection: direction,
+          layoutName: `${layoutName}_center`,
+          parentLayoutName: layoutName,
+          containerName: `${centerDropTargetComponent[0].containerName}`,
+          depth: 0,
+          rootRef: layoutRef,
+          screenKey: centerDropTargetComponent[0].screenKey,
+          initialCenterComponents: [
             {
-              containerName: `${centerDropTargetComponent[0].containerName}`,
-              isInitialResizable: true,
-              isResizePanel: isSplit,
-              children: isSplit ? /* @__PURE__ */ jsxRuntime.jsx(
-                FlexLayoutSplitScreenChild,
-                {
-                  parentDirection: direction,
-                  layoutName: `${layoutName}_center`,
-                  parentLayoutName: layoutName,
-                  containerName: `${centerDropTargetComponent[0].containerName}`,
-                  depth: 0,
-                  rootRef: layoutRef,
-                  screenKey: centerDropTargetComponent[0].screenKey,
-                  initialCenterComponents: [
-                    {
-                      navigationTitle: centerDropTargetComponent[0].navigationTitle,
-                      component: centerDropTargetComponent[0].component,
-                      containerName: centerDropTargetComponent[0].containerName,
-                      dropDocumentOutsideOption: centerDropTargetComponent[0].dropDocumentOutsideOption,
-                      screenKey: centerDropTargetComponent[0].screenKey
-                    }
-                  ],
-                  rootName: layoutName
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                FlexLayoutSplitScreenScrollBox_default,
-                {
-                  keyName: centerDropTargetComponent[0].containerName,
-                  isDefaultScrollStyle: true,
-                  children: centerDropTargetComponent[0].component
-                }
-              )
+              navigationTitle: centerDropTargetComponent[0].navigationTitle,
+              component: centerDropTargetComponent[0].component,
+              containerName: centerDropTargetComponent[0].containerName,
+              dropDocumentOutsideOption: centerDropTargetComponent[0].dropDocumentOutsideOption,
+              screenKey: centerDropTargetComponent[0].screenKey
             }
-          ),
-          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: afterDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              FlexLayoutContainer_default,
+          ],
+          rootName: layoutName
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        FlexLayoutSplitScreenScrollBox_default,
+        {
+          keyName: centerDropTargetComponent[0].containerName,
+          isDefaultScrollStyle: true
+        },
+        centerDropTargetComponent[0].component
+      )
+    ),
+    afterDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, afterDropTargetComponent.map(
+      ({
+        containerName: cName,
+        component,
+        navigationTitle: navigationTitle2,
+        dropDocumentOutsideOption: dropDocumentOutsideOption2,
+        screenKey: screenKey2
+      }, i) => /* @__PURE__ */ React.createElement(
+        FlexLayoutContainer,
+        {
+          containerName: cName,
+          isInitialResizable: true,
+          isResizePanel: afterDropTargetComponent.length - 1 !== i,
+          key: cName
+        },
+        /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenChild,
+          {
+            parentDirection: direction,
+            layoutName: `${layoutName}_after`,
+            parentLayoutName: layoutName,
+            containerName: cName,
+            depth: 1,
+            rootRef: layoutRef,
+            screenKey: screenKey2,
+            initialCenterComponents: [
               {
+                navigationTitle: navigationTitle2,
+                component,
                 containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: afterDropTargetComponent.length - 1 !== i,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  FlexLayoutSplitScreenChild,
-                  {
-                    parentDirection: direction,
-                    layoutName: `${layoutName}_after`,
-                    parentLayoutName: layoutName,
-                    containerName: cName,
-                    depth: 1,
-                    rootRef: layoutRef,
-                    screenKey: screenKey2,
-                    initialCenterComponents: [
-                      {
-                        navigationTitle: navigationTitle2,
-                        component,
-                        containerName: cName,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: screenKey2
-                      }
-                    ],
-                    rootName: layoutName
-                  }
-                )
-              },
-              cName
-            )
-          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
-        ]
-      }
-    ),
-    boundaryContainerSize && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
-        style: { ...boundaryContainerSize },
-        children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-      }
-    )
-  ] });
+                dropDocumentOutsideOption: dropDocumentOutsideOption2,
+                screenKey: screenKey2
+              }
+            ],
+            rootName: layoutName
+          }
+        )
+      )
+    )) : /* @__PURE__ */ React.createElement("div", null)
+  ), boundaryContainerSize && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
+      style: { ...boundaryContainerSize }
+    },
+    "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
+  ));
 }
 function FlexLayoutSplitScreenChild({
   containerName,
@@ -2253,11 +2257,11 @@ function FlexLayoutSplitScreenChild({
     parentLayoutName,
     layoutName
   });
-  const [isEmptyContent, setIsEmptyContent] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(0);
-  const centerDropTargetComponentRef = react.useRef(centerDropTargetComponent);
-  const activeIndexRef = react.useRef(activeIndex);
-  react.useEffect(() => {
+  const [isEmptyContent, setIsEmptyContent] = React2.useState(false);
+  const [activeIndex, setActiveIndex] = React2.useState(0);
+  const centerDropTargetComponentRef = React2.useRef(centerDropTargetComponent);
+  const activeIndexRef = React2.useRef(activeIndex);
+  React2.useEffect(() => {
     const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).pipe(rxjs.take(1)).subscribe((layoutInfo) => {
       setSplitScreen(rootName, `${layoutName}=${screenKey}`, {
         afterDropTargetComponent: layoutInfo?.afterDropTargetComponent || [],
@@ -2271,7 +2275,7 @@ function FlexLayoutSplitScreenChild({
       subscribe.unsubscribe();
     };
   }, [rootName, layoutName, initialCenterComponents]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
       if (layoutInfo) {
         setBeforeDropTargetComponent([
@@ -2301,7 +2305,7 @@ function FlexLayoutSplitScreenChild({
       subscribe.unsubscribe();
     };
   }, [rootName, layoutName]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const subscribe = dropMovementEventSubject.pipe(
       rxjs.distinctUntilChanged((prev, curr) => {
         const filterChildren2 = (obj) => {
@@ -2499,326 +2503,316 @@ function FlexLayoutSplitScreenChild({
     afterDropTargetComponent,
     centerDropTargetComponent
   ]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     centerDropTargetComponentRef.current = centerDropTargetComponent;
   }, [centerDropTargetComponent]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
-  const [isOnlyOneScreen, setIsOnlyOneScreen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isEmptyContent && /* @__PURE__ */ jsxRuntime.jsxs(
+  const [isOnlyOneScreen, setIsOnlyOneScreen] = React2.useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyContent && /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${FlexLayout_default["flex-split-screen"]}`,
-      ref: layoutRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          FlexLayout_default2,
+      ref: layoutRef
+    },
+    /* @__PURE__ */ React.createElement(
+      FlexLayout,
+      {
+        direction,
+        layoutName: `${layoutName}`,
+        panelMovementMode: "bulldozer"
+      },
+      beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, beforeDropTargetComponent.map(
+        ({
+          containerName: cName,
+          component,
+          navigationTitle,
+          dropDocumentOutsideOption,
+          screenKey: screenKey2
+        }, i) => /* @__PURE__ */ React.createElement(
+          FlexLayoutContainer,
           {
-            direction,
-            layoutName: `${layoutName}`,
-            panelMovementMode: "bulldozer",
-            children: [
-              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beforeDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
+            containerName: cName,
+            isInitialResizable: true,
+            isResizePanel: true,
+            key: cName
+          },
+          /* @__PURE__ */ React.createElement(
+            FlexLayoutSplitScreenChild,
+            {
+              parentDirection: direction,
+              layoutName: `${layoutName}_before-${depth}`,
+              parentLayoutName: layoutName,
+              containerName: cName,
+              depth: depth + 1,
+              rootRef,
+              screenKey: screenKey2,
+              initialCenterComponents: [
+                {
                   navigationTitle,
+                  component,
+                  containerName: cName,
                   dropDocumentOutsideOption,
                   screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                  FlexLayoutContainer_default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: true,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      FlexLayoutSplitScreenChild,
-                      {
-                        parentDirection: direction,
-                        layoutName: `${layoutName}_before-${depth}`,
-                        parentLayoutName: layoutName,
-                        containerName: cName,
-                        depth: depth + 1,
-                        rootRef,
-                        screenKey: screenKey2,
-                        initialCenterComponents: [
-                          {
-                            navigationTitle,
-                            component,
-                            containerName: cName,
-                            dropDocumentOutsideOption,
-                            screenKey: screenKey2
-                          }
-                        ],
-                        rootName
-                      }
-                    )
-                  },
-                  cName
-                )
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                FlexLayoutContainer_default,
+                }
+              ],
+              rootName
+            }
+          )
+        )
+      )) : /* @__PURE__ */ React.createElement("div", null),
+      centerDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        FlexLayoutContainer,
+        {
+          containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+          isInitialResizable: true,
+          isResizePanel: isSplit,
+          key: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
+        },
+        isSplit ? /* @__PURE__ */ React.createElement("div", { "data-key": screenKey }, /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenChild,
+          {
+            parentDirection: direction,
+            layoutName: `${layoutName}_center-${depth}`,
+            parentLayoutName: layoutName,
+            containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+            depth: depth + 1,
+            rootRef,
+            initialCenterComponents: centerDropTargetComponent.map(
+              ({
+                navigationTitle,
+                component,
+                containerName: cName,
+                dropDocumentOutsideOption,
+                screenKey: centerScreenKey
+              }) => ({
+                navigationTitle,
+                component,
+                containerName: cName,
+                dropDocumentOutsideOption,
+                screenKey: centerScreenKey
+              })
+            ),
+            screenKey,
+            rootName
+          }
+        )) : /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenScrollBox_default,
+          {
+            keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
+            isDefaultScrollStyle: true
+          },
+          !isOnlyOneScreen && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                "data-is_split": isSplit,
+                "data-layout_name": layoutName,
+                "data-parent_layout_name": parentLayoutName,
+                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+                className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper"]}`
+              },
+              /* @__PURE__ */ React.createElement(
+                FlexLayoutSplitScreenDragBoxContainer,
                 {
-                  containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                  isInitialResizable: true,
-                  isResizePanel: isSplit,
-                  children: isSplit ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-key": screenKey, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    FlexLayoutSplitScreenChild,
-                    {
-                      parentDirection: direction,
-                      layoutName: `${layoutName}_center-${depth}`,
-                      parentLayoutName: layoutName,
-                      containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                      depth: depth + 1,
-                      rootRef,
-                      initialCenterComponents: centerDropTargetComponent.map(
-                        ({
-                          navigationTitle,
-                          component,
-                          containerName: cName,
-                          dropDocumentOutsideOption,
-                          screenKey: centerScreenKey
-                        }) => ({
-                          navigationTitle,
-                          component,
-                          containerName: cName,
-                          dropDocumentOutsideOption,
-                          screenKey: centerScreenKey
-                        })
-                      ),
-                      screenKey,
-                      rootName
-                    }
-                  ) }) : /* @__PURE__ */ jsxRuntime.jsxs(
-                    FlexLayoutSplitScreenScrollBox_default,
+                  key: layoutName,
+                  "data-layout_name": layoutName,
+                  layoutName
+                },
+                centerDropTargetComponent.map(
+                  (item, index) => /* @__PURE__ */ React.createElement(
+                    FlexLayoutSplitScreenDragBoxItem,
                     {
-                      keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
-                      isDefaultScrollStyle: true,
-                      children: [
-                        !isOnlyOneScreen && /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
-                            children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              "div",
-                              {
-                                "data-is_split": isSplit,
-                                "data-layout_name": layoutName,
-                                "data-parent_layout_name": parentLayoutName,
-                                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                                className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper"]}`,
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    FlexLayoutSplitScreenDragBoxContainer,
-                                    {
-                                      "data-layout_name": layoutName,
-                                      layoutName,
-                                      children: centerDropTargetComponent.map(
-                                        (item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                                          FlexLayoutSplitScreenDragBoxItem,
-                                          {
-                                            onClose: (ev) => {
-                                              if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
-                                                dropMovementEventSubject.next(
-                                                  {
-                                                    state: "remove",
-                                                    targetContainerName: containerName,
-                                                    targetParentLayoutName: parentLayoutName,
-                                                    targetLayoutName: layoutName
-                                                  }
-                                                );
-                                              } else {
-                                                if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
-                                                  setActiveIndex(
-                                                    activeIndexRef.current - 1
-                                                  );
-                                                }
-                                                setCenterDropTargetComponent(
-                                                  (prev) => {
-                                                    const result = handleRemove(
-                                                      prev,
-                                                      item.containerName,
-                                                      () => {
-                                                      }
-                                                    );
-                                                    return result;
-                                                  }
-                                                );
-                                              }
-                                            },
-                                            isActive: activeIndex === index,
-                                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                                              FlexLayoutSplitScreenDragBox,
-                                              {
-                                                onClick: () => {
-                                                  setActiveIndex(
-                                                    index
-                                                  );
-                                                },
-                                                containerName: item.containerName,
-                                                dropDocumentOutsideOption: item.dropDocumentOutsideOption,
-                                                targetComponent: item.component,
-                                                navigationTitle: item.navigationTitle,
-                                                "data-container-name": item.containerName,
-                                                "data-layout-name": layoutName,
-                                                "data-parent-layout-name": parentLayoutName,
-                                                dropEndCallback: ({
-                                                  x,
-                                                  y,
-                                                  containerName: appendContainerName
-                                                }) => {
-                                                  if (!rootRef.current || !layoutRef.current)
-                                                    return;
-                                                  const isRootOver = isOverDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: rootRef.current
-                                                    }
-                                                  );
-                                                  const isLayoutInner = isInnerDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: layoutRef.current
-                                                    }
-                                                  );
-                                                  if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
-                                                    const option = {};
-                                                    if (centerDropTargetComponentRef.current.length > 1) {
-                                                      const {
-                                                        adjacentItem,
-                                                        adjacentIndex
-                                                      } = getAdjacentItem(
-                                                        centerDropTargetComponentRef.current,
-                                                        activeIndexRef.current
-                                                      );
-                                                      if (adjacentItem && activeIndexRef.current === index) {
-                                                        Object.assign(
-                                                          option,
-                                                          {
-                                                            x,
-                                                            y,
-                                                            targetComponent: adjacentItem.component,
-                                                            nextContainerName: adjacentItem.containerName,
-                                                            orderName: "center",
-                                                            dropTargetComponentEvent: {
-                                                              navigationTitle: adjacentItem.navigationTitle,
-                                                              dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
-                                                              direction,
-                                                              screenKey
-                                                            }
-                                                          }
-                                                        );
-                                                      }
-                                                    }
-                                                    if (index === 0) {
-                                                      dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: parentLayoutName,
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    } else {
-                                                      dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: "",
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    }
-                                                  }
-                                                },
-                                                children: item.navigationTitle
-                                              }
-                                            )
-                                          },
-                                          item.navigationTitle + layoutName + item.containerName
-                                        )
-                                      )
-                                    },
-                                    layoutName
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(FlexLayoutSplitScreenDragBoxTitleMore, {})
-                                ]
-                              }
-                            )
+                      onClose: (ev) => {
+                        if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
+                          dropMovementEventSubject.next(
+                            {
+                              state: "remove",
+                              targetContainerName: containerName,
+                              targetParentLayoutName: parentLayoutName,
+                              targetLayoutName: layoutName
+                            }
+                          );
+                        } else {
+                          if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
+                            setActiveIndex(
+                              activeIndexRef.current - 1
+                            );
                           }
-                        ),
-                        (() => {
-                          const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
-                          return target.component;
-                        })()
-                      ]
-                    }
-                  )
-                },
-                (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: afterDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                  FlexLayoutContainer_default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: i !== afterDropTargetComponent.length - 1,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      FlexLayoutSplitScreenChild,
+                          setCenterDropTargetComponent(
+                            (prev) => {
+                              const result = handleRemove(
+                                prev,
+                                item.containerName,
+                                () => {
+                                }
+                              );
+                              return result;
+                            }
+                          );
+                        }
+                      },
+                      key: item.navigationTitle + layoutName + item.containerName,
+                      isActive: activeIndex === index
+                    },
+                    /* @__PURE__ */ React.createElement(
+                      FlexLayoutSplitScreenDragBox,
                       {
-                        parentDirection: direction,
-                        layoutName: `${layoutName}_after-${depth}`,
-                        parentLayoutName: layoutName,
-                        containerName: cName,
-                        depth: depth + 1,
-                        rootRef,
-                        screenKey: screenKey2,
-                        initialCenterComponents: [
-                          {
-                            navigationTitle,
-                            component,
-                            containerName: cName,
-                            dropDocumentOutsideOption,
-                            screenKey: screenKey2
+                        onClick: () => {
+                          setActiveIndex(
+                            index
+                          );
+                        },
+                        containerName: item.containerName,
+                        dropDocumentOutsideOption: item.dropDocumentOutsideOption,
+                        targetComponent: item.component,
+                        navigationTitle: item.navigationTitle,
+                        "data-container-name": item.containerName,
+                        "data-layout-name": layoutName,
+                        "data-parent-layout-name": parentLayoutName,
+                        dropEndCallback: ({
+                          x,
+                          y,
+                          containerName: appendContainerName
+                        }) => {
+                          if (!rootRef.current || !layoutRef.current)
+                            return;
+                          const isRootOver = isOverDrop(
+                            {
+                              x,
+                              y,
+                              element: rootRef.current
+                            }
+                          );
+                          const isLayoutInner = isInnerDrop(
+                            {
+                              x,
+                              y,
+                              element: layoutRef.current
+                            }
+                          );
+                          if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
+                            const option = {};
+                            if (centerDropTargetComponentRef.current.length > 1) {
+                              const {
+                                adjacentItem,
+                                adjacentIndex
+                              } = getAdjacentItem(
+                                centerDropTargetComponentRef.current,
+                                activeIndexRef.current
+                              );
+                              if (adjacentItem && activeIndexRef.current === index) {
+                                Object.assign(
+                                  option,
+                                  {
+                                    x,
+                                    y,
+                                    targetComponent: adjacentItem.component,
+                                    nextContainerName: adjacentItem.containerName,
+                                    orderName: "center",
+                                    dropTargetComponentEvent: {
+                                      navigationTitle: adjacentItem.navigationTitle,
+                                      dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
+                                      direction,
+                                      screenKey
+                                    }
+                                  }
+                                );
+                              }
+                            }
+                            if (index === 0) {
+                              dropMovementEventSubject.next(
+                                {
+                                  state: "remove",
+                                  targetContainerName: item.containerName,
+                                  targetParentLayoutName: parentLayoutName,
+                                  targetLayoutName: layoutName,
+                                  ...option
+                                }
+                              );
+                            } else {
+                              dropMovementEventSubject.next(
+                                {
+                                  state: "remove",
+                                  targetContainerName: item.containerName,
+                                  targetParentLayoutName: "",
+                                  targetLayoutName: layoutName,
+                                  ...option
+                                }
+                              );
+                            }
                           }
-                        ],
-                        rootName
-                      }
+                        }
+                      },
+                      item.navigationTitle
                     )
-                  },
-                  cName
+                  )
                 )
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
-            ]
-          }
-        ),
-        boundaryContainerSize && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+              ),
+              /* @__PURE__ */ React.createElement(FlexLayoutSplitScreenDragBoxTitleMore, null)
+            )
+          ),
+          (() => {
+            const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
+            return target.component;
+          })()
+        )
+      )) : /* @__PURE__ */ React.createElement("div", null),
+      afterDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, afterDropTargetComponent.map(
+        ({
+          containerName: cName,
+          component,
+          navigationTitle,
+          dropDocumentOutsideOption,
+          screenKey: screenKey2
+        }, i) => /* @__PURE__ */ React.createElement(
+          FlexLayoutContainer,
           {
-            className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
-            style: { ...boundaryContainerSize },
-            children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-          }
+            containerName: cName,
+            isInitialResizable: true,
+            isResizePanel: i !== afterDropTargetComponent.length - 1,
+            key: cName
+          },
+          /* @__PURE__ */ React.createElement(
+            FlexLayoutSplitScreenChild,
+            {
+              parentDirection: direction,
+              layoutName: `${layoutName}_after-${depth}`,
+              parentLayoutName: layoutName,
+              containerName: cName,
+              depth: depth + 1,
+              rootRef,
+              screenKey: screenKey2,
+              initialCenterComponents: [
+                {
+                  navigationTitle,
+                  component,
+                  containerName: cName,
+                  dropDocumentOutsideOption,
+                  screenKey: screenKey2
+                }
+              ],
+              rootName
+            }
+          )
         )
-      ]
-    }
-  ) });
+      )) : /* @__PURE__ */ React.createElement("div", null)
+    ),
+    boundaryContainerSize && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
+        style: { ...boundaryContainerSize }
+      },
+      "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
+    )
+  ));
 }
-FlexLayoutSplitScreen.displayName = "FlexLayoutSplitScreen";
-var FlexLayoutSplitScreen_default = FlexLayoutSplitScreen;
 function clamp(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
@@ -2859,33 +2853,33 @@ var FlexLayoutStickyBox = ({
   },
   ...rest
 }) => {
-  const offsetRef = react.useRef(offset);
-  const rootRef = react.useRef(null);
-  const contentRef = react.useRef(null);
-  const mutatingRef = react.useRef(false);
-  const lastOffsetRef = react.useRef(0);
-  const [resolvedEdge, setResolvedEdge] = react.useState("top");
-  const rafId = react.useRef(null);
-  const [contentDynamicStyle, setContentDynamicStyle] = react.useState({});
-  react.useEffect(() => {
+  const offsetRef = React2.useRef(offset);
+  const rootRef = React2.useRef(null);
+  const contentRef = React2.useRef(null);
+  const mutatingRef = React2.useRef(false);
+  const lastOffsetRef = React2.useRef(0);
+  const [resolvedEdge, setResolvedEdge] = React2.useState("top");
+  const rafId = React2.useRef(null);
+  const [contentDynamicStyle, setContentDynamicStyle] = React2.useState({});
+  React2.useEffect(() => {
     setContentDynamicStyle({
       willChange: "transform",
       transition: "transform 50ms linear"
     });
   }, []);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     offsetRef.current = offset;
     scheduleUpdate();
   }, [offset]);
-  const [ioRoot, setIoRoot] = react.useState(null);
-  react.useEffect(() => {
+  const [ioRoot, setIoRoot] = React2.useState(null);
+  React2.useEffect(() => {
     const root = scrollRoot ?? pickDefaultScrollRoot();
     setResolvedEdge(
       edge === "auto" ? isVerticalScroll(root) ? "top" : "left" : edge
     );
     setIoRoot(root);
   }, [edge, scrollRoot]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (edge !== "auto") {
       setResolvedEdge(edge);
       return;
@@ -2893,7 +2887,7 @@ var FlexLayoutStickyBox = ({
     const vertical = isVerticalScroll(ioRoot);
     setResolvedEdge(vertical ? "top" : "left");
   }, [edge, ioRoot]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
   }, []);
   const scheduleUpdate = () => {
     if (rafId.current != null) return;
@@ -2971,7 +2965,7 @@ var FlexLayoutStickyBox = ({
       mutatingRef.current = false;
     });
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof window == "undefined") return;
     const rootEl = rootRef.current;
     if (!rootEl) return;
@@ -3010,7 +3004,7 @@ var FlexLayoutStickyBox = ({
       }
     };
   }, [ioRoot, resolvedEdge, offset, debug]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React2__default.default.createElement(
     "div",
     {
       ref: rootRef,
@@ -3023,24 +3017,24 @@ var FlexLayoutStickyBox = ({
         // 부모 높이를 채우도록 설정
         ...style
       },
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: contentRef,
-          style: contentDynamicStyle,
-          children
-        }
-      )
-    }
+      ...rest
+    },
+    /* @__PURE__ */ React2__default.default.createElement(
+      "div",
+      {
+        ref: contentRef,
+        style: contentDynamicStyle
+      },
+      children
+    )
   );
 };
 var FlexLayoutStickyBox_default = FlexLayoutStickyBox;
 
-exports.FlexLayout = FlexLayout_default2;
-exports.FlexLayoutContainer = FlexLayoutContainer_default;
-exports.FlexLayoutResizePanel = FlexLayoutResizePanel_default;
-exports.FlexLayoutSplitScreen = FlexLayoutSplitScreen_default;
+exports.FlexLayout = FlexLayout;
+exports.FlexLayoutContainer = FlexLayoutContainer;
+exports.FlexLayoutResizePanel = FlexLayoutResizePanel;
+exports.FlexLayoutSplitScreen = FlexLayoutSplitScreen;
 exports.FlexLayoutSplitScreenDragBox = FlexLayoutSplitScreenDragBox;
 exports.FlexLayoutSplitScreenScrollBox = FlexLayoutSplitScreenScrollBox_default;
 exports.FlexLayoutStickyBox = FlexLayoutStickyBox_default;