@asup/context-menu 1.3.3 → 1.3.4

package/dist/cjs/main.js

@@ -28,6 +28,8 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+
+
 var $a68bd8a6c0fd98c2$exports = {};
 
 $parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenuHandler", function () { return $3c568ee547c732c3$export$ed4f9641643dc7e4; });
@@ -38,13 +40,45 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindowStack", function () { re
 
 
 
+var $da5a7b95ca760552$exports = {};
+
+$parcel$export($da5a7b95ca760552$exports, "anchor", function () { return $da5a7b95ca760552$export$2e2992790a6f69a8; }, function (v) { return $da5a7b95ca760552$export$2e2992790a6f69a8 = v; });
+$parcel$export($da5a7b95ca760552$exports, "caretHolder", function () { return $da5a7b95ca760552$export$6ed5f4fbab298e07; }, function (v) { return $da5a7b95ca760552$export$6ed5f4fbab298e07 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenu", function () { return $da5a7b95ca760552$export$218b899e1d476006; }, function (v) { return $da5a7b95ca760552$export$218b899e1d476006 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenuHandler", function () { return $da5a7b95ca760552$export$ed8ffb5bb55a3bc8; }, function (v) { return $da5a7b95ca760552$export$ed8ffb5bb55a3bc8 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenuItem", function () { return $da5a7b95ca760552$export$e5ea51c279904378; }, function (v) { return $da5a7b95ca760552$export$e5ea51c279904378 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenuItemLabel", function () { return $da5a7b95ca760552$export$6ada86c5b962aa22; }, function (v) { return $da5a7b95ca760552$export$6ada86c5b962aa22 = v; });
+$parcel$export($da5a7b95ca760552$exports, "disabled", function () { return $da5a7b95ca760552$export$683472f6198a076e; }, function (v) { return $da5a7b95ca760552$export$683472f6198a076e = v; });
+$parcel$export($da5a7b95ca760552$exports, "subMenu", function () { return $da5a7b95ca760552$export$6e0e6ce39e5a0361; }, function (v) { return $da5a7b95ca760552$export$6e0e6ce39e5a0361 = v; });
+$parcel$export($da5a7b95ca760552$exports, "visible", function () { return $da5a7b95ca760552$export$664c6d24e3175067; }, function (v) { return $da5a7b95ca760552$export$664c6d24e3175067 = v; });
+var $da5a7b95ca760552$export$2e2992790a6f69a8;
+var $da5a7b95ca760552$export$6ed5f4fbab298e07;
+var $da5a7b95ca760552$export$218b899e1d476006;
+var $da5a7b95ca760552$export$ed8ffb5bb55a3bc8;
+var $da5a7b95ca760552$export$e5ea51c279904378;
+var $da5a7b95ca760552$export$6ada86c5b962aa22;
+var $da5a7b95ca760552$export$683472f6198a076e;
+var $da5a7b95ca760552$export$6e0e6ce39e5a0361;
+var $da5a7b95ca760552$export$664c6d24e3175067;
+$da5a7b95ca760552$export$2e2992790a6f69a8 = `aiw-WinFxq-anchor`;
+$da5a7b95ca760552$export$6ed5f4fbab298e07 = `aiw-WinFxq-caretHolder`;
+$da5a7b95ca760552$export$218b899e1d476006 = `aiw-WinFxq-contextMenu`;
+$da5a7b95ca760552$export$ed8ffb5bb55a3bc8 = `aiw-WinFxq-contextMenuHandler`;
+$da5a7b95ca760552$export$e5ea51c279904378 = `aiw-WinFxq-contextMenuItem`;
+$da5a7b95ca760552$export$6ada86c5b962aa22 = `aiw-WinFxq-contextMenuItemLabel`;
+$da5a7b95ca760552$export$683472f6198a076e = `aiw-WinFxq-disabled`;
+$da5a7b95ca760552$export$6e0e6ce39e5a0361 = `aiw-WinFxq-subMenu`;
+$da5a7b95ca760552$export$664c6d24e3175067 = `aiw-WinFxq-visible`;
+
+
+
 
 
 
 const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: target, toClose: toClose })=>{
     const [visible, setVisible] = (0, $gTuX4$react.useState)(false);
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
-        className: "caret-holder",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).caretHolder,
         onMouseEnter: ()=>{
             setVisible(true);
         },
@@ -63,7 +97,7 @@ const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: t
                 })
             }),
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                className: "sub-menu",
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).subMenu,
                 children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
                     visible: visible,
                     entries: entries,
@@ -83,7 +117,10 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$int
     $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
         ref: ref,
-        className: `context-menu${visible ? " visible" : ""}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenu,
+            visible ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).visible : ""
+        ].filter((c)=>c !== "").join(" "),
         style: {
             top: `${yPos}px`,
             left: `${xPos}px`
@@ -93,12 +130,15 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$int
             e.stopPropagation();
         },
         children: entries.map((entry, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-                className: `context-menu-item${entry.disabled ? " disabled" : ""}`,
+                className: [
+                    (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItem,
+                    entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).disabled : ""
+                ].filter((c)=>c !== "").join(" "),
                 children: [
-                    /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
+                    typeof entry.label === "string" ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
                         "aria-label": typeof entry.label === "string" ? entry.label : undefined,
                         "aria-disabled": entry.disabled,
-                        className: "context-menu-item-label",
+                        className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItemLabel,
                         onMouseDownCapture: (ev)=>{
                             ev.preventDefault();
                             ev.stopPropagation();
@@ -106,7 +146,7 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$int
                             !entry.disabled && toClose();
                         },
                         children: entry.label
-                    }),
+                    }) : entry.label,
                     entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d35a356381c44181$export$7e4e6110f96afd7e), {
                         toClose: toClose,
                         entries: entry.group,
@@ -121,6 +161,35 @@ $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
 
 
 
+var $63cdf2819565020c$exports = {};
+
+$parcel$export($63cdf2819565020c$exports, "caretHolder", function () { return $63cdf2819565020c$export$6ed5f4fbab298e07; }, function (v) { return $63cdf2819565020c$export$6ed5f4fbab298e07 = v; });
+$parcel$export($63cdf2819565020c$exports, "disabled", function () { return $63cdf2819565020c$export$683472f6198a076e; }, function (v) { return $63cdf2819565020c$export$683472f6198a076e = v; });
+$parcel$export($63cdf2819565020c$exports, "hidden", function () { return $63cdf2819565020c$export$73920f18ca706874; }, function (v) { return $63cdf2819565020c$export$73920f18ca706874 = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenu", function () { return $63cdf2819565020c$export$59e4b099a896b33; }, function (v) { return $63cdf2819565020c$export$59e4b099a896b33 = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenu-item", function () { return $63cdf2819565020c$export$19fbf76b734bf310; }, function (v) { return $63cdf2819565020c$export$19fbf76b734bf310 = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenuItem", function () { return $63cdf2819565020c$export$2ad34a478577e75d; }, function (v) { return $63cdf2819565020c$export$2ad34a478577e75d = v; });
+$parcel$export($63cdf2819565020c$exports, "subMenu", function () { return $63cdf2819565020c$export$6e0e6ce39e5a0361; }, function (v) { return $63cdf2819565020c$export$6e0e6ce39e5a0361 = v; });
+$parcel$export($63cdf2819565020c$exports, "visible", function () { return $63cdf2819565020c$export$664c6d24e3175067; }, function (v) { return $63cdf2819565020c$export$664c6d24e3175067 = v; });
+var $63cdf2819565020c$export$6ed5f4fbab298e07;
+var $63cdf2819565020c$export$683472f6198a076e;
+var $63cdf2819565020c$export$73920f18ca706874;
+var $63cdf2819565020c$export$59e4b099a896b33;
+var $63cdf2819565020c$export$19fbf76b734bf310;
+var $63cdf2819565020c$export$2ad34a478577e75d;
+var $63cdf2819565020c$export$6e0e6ce39e5a0361;
+var $63cdf2819565020c$export$664c6d24e3175067;
+$63cdf2819565020c$export$6ed5f4fbab298e07 = `aiw-JfzGeq-caretHolder`;
+$63cdf2819565020c$export$683472f6198a076e = `aiw-JfzGeq-disabled`;
+$63cdf2819565020c$export$73920f18ca706874 = `aiw-JfzGeq-hidden`;
+$63cdf2819565020c$export$59e4b099a896b33 = `aiw-JfzGeq-lowMenu`;
+$63cdf2819565020c$export$19fbf76b734bf310 = `aiw-JfzGeq-lowMenu-item`;
+$63cdf2819565020c$export$2ad34a478577e75d = `aiw-JfzGeq-lowMenuItem`;
+$63cdf2819565020c$export$6e0e6ce39e5a0361 = `aiw-JfzGeq-subMenu`;
+$63cdf2819565020c$export$664c6d24e3175067 = `aiw-JfzGeq-visible`;
+
+
+
 
 
 
@@ -131,7 +200,7 @@ const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: targe
     if (!entry.group || entry.group.length === 0) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {});
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
         "aria-label": `Sub menu for ${entry.label}`,
-        className: "caret-holder",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).caretHolder,
         onMouseEnter: ()=>{
             setVisible(true);
         },
@@ -150,7 +219,7 @@ const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: targe
                 })
             }),
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                className: "sub-menu",
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).subMenu,
                 children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
                     visible: visible,
                     entries: entry.group,
@@ -168,7 +237,10 @@ $d30299730ea8ec1e$export$251b9f54013cdfac.displayName = "LowSubMenu";
 
 const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: target })=>{
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-        className: `low-menu-item${entry.disabled ? " disabled" : ""}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenuItem,
+            entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).disabled : ""
+        ].filter((c)=>c !== "").join(" "),
         "aria-label": typeof entry.label === "string" ? entry.label : undefined,
         "aria-disabled": entry.disabled,
         onClick: (event)=>{
@@ -178,7 +250,6 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: targe
         },
         children: [
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
-                className: "low-menu-item-label",
                 children: entry.label
             }),
             entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d30299730ea8ec1e$export$251b9f54013cdfac), {
@@ -191,10 +262,17 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: targe
 $b34598671fff4a77$export$aafc28aea571c4bc.displayName = "LowMenuButton";
 
 
-const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, target: target, visible: visible })=>{
+const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, target: target, visible: visible, xPos: xPos, yPos: yPos })=>{
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-        className: `low-menu ${visible ? "visible" : "hidden"}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenu,
+            visible ? (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).hidden
+        ].join(" "),
         "aria-label": "Low context menu",
+        style: {
+            left: `${xPos}px`,
+            top: `${yPos}px`
+        },
         children: entries.map((e, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $b34598671fff4a77$export$aafc28aea571c4bc), {
                 entry: e,
                 target: target
@@ -204,12 +282,33 @@ const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, target: t
 $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25.displayName = "LowMenu";
 
 
-const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, style: style = {
-    height: "fit-content",
-    width: "fit-content"
-} })=>{
+const $3c568ee547c732c3$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $gTuX4$react.createContext)(null);
+const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, ...rest })=>{
+    var _divHandlderRef_current;
+    // Check for higher content menu
+    const higherContext = (0, $gTuX4$react.useContext)($3c568ee547c732c3$export$fc58dc71afe92de2);
+    const thisMenuItems = (0, $gTuX4$react.useMemo)(()=>[
+            ...higherContext !== null ? [
+                ...higherContext.menuItems,
+                {
+                    label: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("hr", {
+                        style: {
+                            flexGrow: 1,
+                            cursor: "none",
+                            margin: "0",
+                            padding: "0"
+                        }
+                    })
+                }
+            ] : [],
+            ...menuItems
+        ], [
+        higherContext,
+        menuItems
+    ]);
     // Menu resources
-    const divRef = (0, $gTuX4$react.useRef)(null);
+    const divHandlderRef = (0, $gTuX4$react.useRef)(null);
+    const divMenuRef = (0, $gTuX4$react.useRef)(null);
     const menuRef = (0, $gTuX4$react.useRef)(null);
     const [menuXPos, setMenuXPos] = (0, $gTuX4$react.useState)(0);
     const [menuYPos, setMenuYPos] = (0, $gTuX4$react.useState)(0);
@@ -217,6 +316,8 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
     const [target, setTarget] = (0, $gTuX4$react.useState)(null);
     const [lowTarget, setLowTarget] = (0, $gTuX4$react.useState)(null);
     const [lowMenuVisible, setLowMenuVisible] = (0, $gTuX4$react.useState)(false);
+    // Get holder position
+    const divHandlerPos = divHandlderRef ? (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect() : null;
     // Show menu when context is requested
     const showMenu = (e)=>{
         const sel = window.getSelection();
@@ -243,12 +344,22 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
         handleClick,
         menuVisible
     ]);
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
+    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)($3c568ee547c732c3$export$fc58dc71afe92de2.Provider, {
+        value: {
+            menuItems: thisMenuItems
+        },
         children: [
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+                ref: divHandlderRef,
+                ...rest,
+                className: [
+                    (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuHandler,
+                    rest.className
+                ].join(" "),
+                style: {
+                    ...rest.style
+                },
                 onContextMenu: showLowMenu ? undefined : showMenu,
-                className: "context-menu-handler",
-                style: style,
                 onMouseEnter: ()=>{
                     showLowMenu && setLowMenuVisible(true);
                 },
@@ -258,26 +369,20 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
                 children: children
             }),
             menuVisible && !showLowMenu && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0
-                },
-                ref: divRef,
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
+                ref: divMenuRef,
                 children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
                     visible: true,
                     ref: menuRef,
-                    entries: menuItems,
+                    entries: thisMenuItems,
                     xPos: menuXPos,
                     yPos: menuYPos,
                     target: target,
                     toClose: ()=>setMenuVisible(false)
                 })
             }), document.body),
-            showLowMenu && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                style: {
-                    position: "relative"
-                },
+            showLowMenu && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
                 onMouseEnter: ()=>{
                     const sel = window.getSelection();
                     const lowSel = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
@@ -289,9 +394,11 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
                 children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25), {
                     visible: lowMenuVisible,
                     entries: menuItems,
-                    target: lowTarget
+                    target: lowTarget,
+                    xPos: divHandlerPos.left,
+                    yPos: divHandlerPos.bottom
                 })
-            })
+            }), document.body)
         ]
     });
 };
@@ -301,6 +408,27 @@ $3c568ee547c732c3$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
 
 
 
+const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
+    if (!divRef.current) return {
+        translateX: 0,
+        translateY: 0
+    };
+    else {
+        const innerBounce = 16;
+        const posn = divRef.current.getBoundingClientRect();
+        let translateX = 0;
+        if (posn.left < innerBounce) translateX = -posn.left + innerBounce;
+        else if (posn.right > window.innerWidth) translateX = Math.max(-posn.left + innerBounce, window.innerWidth - posn.right - innerBounce);
+        let translateY = 0;
+        if (posn.top < innerBounce) translateY = -posn.top + innerBounce;
+        else if (posn.bottom > window.innerHeight) translateY = Math.max(-posn.top + innerBounce, window.innerHeight - posn.bottom - innerBounce);
+        return {
+            translateX: translateX,
+            translateY: translateY
+        };
+    }
+};
+
 
 
 
@@ -334,29 +462,33 @@ const $16208d559c772441$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000
 $16208d559c772441$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
 
 
-const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
-    if (!divRef.current) return {
-        translateX: 0,
-        translateY: 0
-    };
-    else {
-        const innerBounce = 16;
-        const posn = divRef.current.getBoundingClientRect();
-        let translateX = 0;
-        if (posn.left < innerBounce) translateX = -posn.left + innerBounce;
-        else if (posn.right > window.innerWidth) translateX = Math.max(-posn.left + innerBounce, window.innerWidth - posn.right - innerBounce);
-        let translateY = 0;
-        if (posn.top < innerBounce) translateY = -posn.top + innerBounce;
-        else if (posn.bottom > window.innerHeight) translateY = Math.max(-posn.top + innerBounce, window.innerHeight - posn.bottom - innerBounce);
-        return {
-            translateX: translateX,
-            translateY: translateY
-        };
-    }
-};
-
-
-const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, title: title, style: style, children: children, onOpen: onOpen, onClose: onClose })=>{
+var $7c5fb3f6c1601913$exports = {};
+
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindow", function () { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674; }, function (v) { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowAnchor", function () { return $7c5fb3f6c1601913$export$9f3a8a17ac700f7d; }, function (v) { return $7c5fb3f6c1601913$export$9f3a8a17ac700f7d = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowBody", function () { return $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f; }, function (v) { return $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowTitle", function () { return $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4; }, function (v) { return $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowTitleClose", function () { return $7c5fb3f6c1601913$export$7ba38d4cc2870e66; }, function (v) { return $7c5fb3f6c1601913$export$7ba38d4cc2870e66 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowTitleText", function () { return $7c5fb3f6c1601913$export$cebbac70b4d99c48; }, function (v) { return $7c5fb3f6c1601913$export$cebbac70b4d99c48 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "moving", function () { return $7c5fb3f6c1601913$export$d03a2f3acc60252b; }, function (v) { return $7c5fb3f6c1601913$export$d03a2f3acc60252b = v; });
+var $7c5fb3f6c1601913$export$72cad2e5ad4d2674;
+var $7c5fb3f6c1601913$export$9f3a8a17ac700f7d;
+var $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f;
+var $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4;
+var $7c5fb3f6c1601913$export$7ba38d4cc2870e66;
+var $7c5fb3f6c1601913$export$cebbac70b4d99c48;
+var $7c5fb3f6c1601913$export$d03a2f3acc60252b;
+$7c5fb3f6c1601913$export$72cad2e5ad4d2674 = `aiw-RIIF9a-contextWindow`;
+$7c5fb3f6c1601913$export$9f3a8a17ac700f7d = `aiw-RIIF9a-contextWindowAnchor`;
+$7c5fb3f6c1601913$export$dfb2c4d2d1c0156f = `aiw-RIIF9a-contextWindowBody`;
+$7c5fb3f6c1601913$export$1b02f2cd2f7db0f4 = `aiw-RIIF9a-contextWindowTitle`;
+$7c5fb3f6c1601913$export$7ba38d4cc2870e66 = `aiw-RIIF9a-contextWindowTitleClose`;
+$7c5fb3f6c1601913$export$cebbac70b4d99c48 = `aiw-RIIF9a-contextWindowTitleText`;
+$7c5fb3f6c1601913$export$d03a2f3acc60252b = `aiw-RIIF9a-moving`;
+
+
+const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, title: title, children: children, onOpen: onOpen, onClose: onClose, ...rest })=>{
+    var _rest_style, _rest_style1, _rest_style2, _rest_style3;
     const windowStack = (0, $gTuX4$react.useContext)((0, $16208d559c772441$export$aff5d0593e3727b0));
     const windowId = (0, $gTuX4$react.useRef)(null);
     const divRef = (0, $gTuX4$react.useRef)(null);
@@ -444,22 +576,23 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
         windowStack,
         windowVisible
     ]);
-    var _style_minHeight, _style_minWidth, _style_maxHeight, _style_maxWidth;
+    var _rest_style_minHeight, _rest_style_minWidth, _rest_style_maxHeight, _rest_style_maxWidth;
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-        className: "contextwindow-anchor",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor,
         ref: divRef,
         children: windowStack && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
+            ...rest,
             id: id,
-            className: "contextwindow",
+            className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow,
             style: {
-                ...style,
+                ...rest.style,
                 opacity: moving ? 0.8 : windowVisible ? 1 : 0,
                 visibility: windowVisible ? "visible" : "hidden",
                 zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
-                minHeight: (_style_minHeight = style === null || style === void 0 ? void 0 : style.minHeight) !== null && _style_minHeight !== void 0 ? _style_minHeight : "150px",
-                minWidth: (_style_minWidth = style === null || style === void 0 ? void 0 : style.minWidth) !== null && _style_minWidth !== void 0 ? _style_minWidth : "200px",
-                maxHeight: (_style_maxHeight = style === null || style === void 0 ? void 0 : style.maxHeight) !== null && _style_maxHeight !== void 0 ? _style_maxHeight : "1000px",
-                maxWidth: (_style_maxWidth = style === null || style === void 0 ? void 0 : style.maxWidth) !== null && _style_maxWidth !== void 0 ? _style_maxWidth : "1000px"
+                minHeight: (_rest_style_minHeight = (_rest_style = rest.style) === null || _rest_style === void 0 ? void 0 : _rest_style.minHeight) !== null && _rest_style_minHeight !== void 0 ? _rest_style_minHeight : "150px",
+                minWidth: (_rest_style_minWidth = (_rest_style1 = rest.style) === null || _rest_style1 === void 0 ? void 0 : _rest_style1.minWidth) !== null && _rest_style_minWidth !== void 0 ? _rest_style_minWidth : "200px",
+                maxHeight: (_rest_style_maxHeight = (_rest_style2 = rest.style) === null || _rest_style2 === void 0 ? void 0 : _rest_style2.maxHeight) !== null && _rest_style_maxHeight !== void 0 ? _rest_style_maxHeight : "1000px",
+                maxWidth: (_rest_style_maxWidth = (_rest_style3 = rest.style) === null || _rest_style3 === void 0 ? void 0 : _rest_style3.maxWidth) !== null && _rest_style_maxWidth !== void 0 ? _rest_style_maxWidth : "1000px"
             },
             onClickCapture: ()=>{
                 windowId && windowId.current && windowStack.pushToTop(windowId.current);
@@ -467,7 +600,10 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
             ref: windowRef,
             children: [
                 /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-                    className: `contextwindow-title ${moving ? "moving" : ""}`,
+                    className: [
+                        (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitle,
+                        moving ? (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).moving : ""
+                    ].filter((c)=>c !== "").join(" "),
                     onMouseDown: (e)=>{
                         if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
                         setMoving(true);
@@ -478,11 +614,11 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                     },
                     children: [
                         /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                            className: "contextwindow-title-text",
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleText,
                             children: title
                         }),
                         /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                            className: "contextwindow-title-close",
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleClose,
                             children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", {
                                 xmlns: "http://www.w3.org/2000/svg",
                                 width: "16",
@@ -499,7 +635,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                     ]
                 }),
                 /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                    className: "contextwindow-body",
+                    className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowBody,
                     children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
                         children: children
                     })