@valbuild/next 0.84.3 → 0.85.1

package/dist/{ValNextProvider-25f1f5c9.esm.js → ValNextProvider-10c232b6.esm.js}

@@ -9,7 +9,7 @@ import React from 'react';
 import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-6635a4d7.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
 import { createValClient } from '@valbuild/shared/internal';
-import { u as useRemoteConfigSender } from './useRemoteConfigSender-02451801.esm.js';
+import { p as prefixStyles, u as useConfigStorageSave, v as valPrefixedClass, c as cn } from './cssUtils-b5651c03.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 
@@ -28,8 +28,8 @@ var ValNextProvider = function ValNextProvider(props) {
   }, []);
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    showOverlay = _React$useState2[0],
-    setShowOverlay = _React$useState2[1];
+    mountOverlay = _React$useState2[0],
+    setMountOverlay = _React$useState2[1];
   var _React$useState3 = React.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     draftMode = _React$useState4[0],
@@ -37,7 +37,7 @@ var ValNextProvider = function ValNextProvider(props) {
   var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     spaReady = _React$useState6[0],
-    setSpaReady = _React$useState6[1];
+    setSpaReady = _React$useState6[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
   var router = useRouter();
   var _React$useTransition = React.useTransition(),
     _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
@@ -47,20 +47,20 @@ var ValNextProvider = function ValNextProvider(props) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     iframeSrc = _React$useState8[0],
     setIframeSrc = _React$useState8[1];
-  useConsoleLogEnableVal(showOverlay);
+  useConsoleLogEnableVal(mountOverlay);
   React.useEffect(function () {
     if (location.search === "?message_onready=true") {
       console.warn("Val is verifying draft mode...");
       return;
     }
     if (isValStudioPath(location.pathname)) {
-      setShowOverlay(false);
+      setMountOverlay(false);
       return;
     }
-    setShowOverlay(document.cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
+    setMountOverlay(document.cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
   }, []);
   React.useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     var interval = setInterval(function () {
@@ -76,9 +76,9 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       clearInterval(interval);
     };
-  }, [showOverlay, props.disableRefresh]);
+  }, [mountOverlay, props.disableRefresh]);
   React.useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     if (draftMode === null) {
@@ -119,14 +119,14 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       window.removeEventListener("val-overlay-provider", valProviderOverlayListener);
     };
-  }, [showOverlay, draftMode]);
+  }, [mountOverlay, draftMode]);
   var pollDraftStatIdRef = React.useRef(0);
   React.useEffect(function () {
-    // continous polling to check for updates:
+    // continuous polling to check for updates:
 
     var timeout;
     function pollCurrentDraftMode() {
-      if (!showOverlay) {
+      if (!mountOverlay) {
         return;
       }
       window.dispatchEvent(new CustomEvent("val-overlay-spa", {
@@ -173,9 +173,9 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       clearTimeout(timeout);
     };
-  }, [showOverlay, iframeSrc]);
+  }, [mountOverlay, iframeSrc]);
   React.useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     window.dispatchEvent(new CustomEvent("val-overlay-spa", {
@@ -184,9 +184,9 @@ var ValNextProvider = function ValNextProvider(props) {
         value: draftMode
       }
     }));
-  }, [showOverlay, draftMode, spaReady]);
+  }, [mountOverlay, draftMode, spaReady]);
   React.useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       SET_AUTO_TAG_JSX_ENABLED(false);
     } else {
       if (draftMode) {
@@ -219,9 +219,9 @@ var ValNextProvider = function ValNextProvider(props) {
         };
       }
     }
-  }, [showOverlay, draftMode, props.disableRefresh]);
+  }, [mountOverlay, draftMode, props.disableRefresh]);
   React.useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     var listener = function listener(event) {
@@ -233,7 +233,7 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       window.removeEventListener("message", listener);
     };
-  }, [showOverlay]);
+  }, [mountOverlay]);
   var _React$useState9 = React.useState(null),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     dropZone = _React$useState10[0],
@@ -246,38 +246,64 @@ var ValNextProvider = function ValNextProvider(props) {
       setDropZone("val-menu-right-center");
     }
   }, []);
-  useRemoteConfigSender(props.config);
+  useConfigStorageSave(props.config);
+  var _React$useState11 = React.useState(false),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    spaLoaded = _React$useState12[0],
+    setSpaLoaded = _React$useState12[1];
+  var commonStyles = React.useMemo(function () {
+    return {
+      "backdrop-blur": "backdrop-filter: blur(10px);",
+      "text-white": "color: white;",
+      "bg-black": "background: black;",
+      rounded: "border-radius: 0.25rem;",
+      fixed: "position: fixed;",
+      "bottom-4": "bottom: 1rem;",
+      "right-12": "right: 3rem;",
+      "right-16": "right: 4rem;",
+      "p-4": "padding: 1rem;",
+      "p-2": "padding: 0.5rem;",
+      "p-1": "padding: 0.25rem;",
+      flex: "display: flex;",
+      "items-center": "align-items: center;",
+      "justify-center": "justify-content: center;"
+    };
+  }, [valPrefixedClass]);
   return /*#__PURE__*/jsxs(ValOverlayProvider, {
     draftMode: draftMode,
     store: valStore,
-    children: [props.children, !spaReady && showOverlay && dropZone && /*#__PURE__*/jsxs(React.Fragment, {
+    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx("style", {
-        children: "\n".concat(positionStyles, "\n.backdrop-blur {\n  backdrop-filter: blur(10px);\n}\n.text-white {\n  color: white;\n}\n.bg-black {\n  background: black;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.fixed {\n  position: fixed;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.right-12 {\n  right: 3rem;\n}\n.right-16 {\n  right: 4rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.animate-spin {\n  animation: spin 2s linear infinite;\n}\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
+        children: "\n".concat(positionStyles, "\n").concat(prefixStyles(commonStyles), "\n.").concat(valPrefixedClass, "animate-spin {\n  animation: ").concat(valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
       }), /*#__PURE__*/jsx("div", {
-        className: getPositionClassName(dropZone) + " p-4",
+        className: "".concat(getPositionClassName(dropZone), " ").concat(cn(["p-4"])),
         children: /*#__PURE__*/jsx("div", {
-          className: "flex justify-center items-center p-2 text-white bg-black rounded backdrop-blur",
+          className: "".concat(cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cn(["text-white", "bg-black", "rounded", "backdrop-blur"])),
           children: /*#__PURE__*/jsx(Clock, {
-            className: "animate-spin",
+            className: "".concat(cn(["animate-spin"])),
             size: 16
           })
         })
       })]
-    }), showOverlay && draftMode !== undefined && /*#__PURE__*/jsxs(React.Fragment, {
+    }), mountOverlay && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx(Script, {
         type: "module",
         src: "".concat(route, "/static").concat(VERSION ? "/".concat(VERSION) : "").concat(VAL_APP_PATH),
-        crossOrigin: "anonymous"
+        crossOrigin: "anonymous",
+        onLoad: function onLoad() {
+          setSpaLoaded(true);
+        }
       }), /*#__PURE__*/jsx("div", {
         id: VAL_OVERLAY_ID
       })]
-    }), iframeSrc && draftMode !== null && showOverlay && /*#__PURE__*/jsx("iframe", {
+    }), mountOverlay && iframeSrc && /*#__PURE__*/jsx("iframe", {
+      loading: "eager",
       style: {
-        top: 0,
-        left: 0,
+        top: 10,
+        left: 10,
         position: "absolute",
-        width: 0,
-        height: 0
+        width: 1000,
+        height: 1000
       },
       src: iframeSrc
     }, iframeSrc)]
@@ -290,28 +316,38 @@ function useConsoleLogEnableVal(showOverlay) {
     }
   }, [showOverlay]);
 }
-var positionStyles = "\n.left-0 {\n  left: 0;\n}\n.top-0 {\n  top: 0;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.top-1\\/2 {\n  top: 50%;\n}\n.-translate-y-1\\/2 {\n  transform: translateY(-50%);\n}\n.-translate-x-1\\/2 {\n  transform: translateX(-50%);\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}";
+var positionStyles = prefixStyles({
+  "left-0": "left: 0;",
+  "top-0": "top: 0;",
+  "left-1/2": "left: 50%;",
+  "top-1/2": "top: 50%;",
+  "-translate-y-1/2": "transform: translateY(-50%);",
+  "-translate-x-1/2": "transform: translateX(-50%);",
+  "right-0": "right: 0;",
+  "bottom-0": "bottom: 0;"
+});
+
 // This is a copy of the function from the ValMenu component.
 function getPositionClassName(dropZone) {
-  var className = "fixed transform";
+  var className = cn(["fixed", "transform"]);
   if (dropZone === "val-menu-left-top") {
-    className += " left-0 top-0";
+    className += " ".concat(cn(["left-0", "top-0"]));
   } else if (dropZone === "val-menu-left-center") {
-    className += " left-0 top-1/2 -translate-y-1/2";
+    className += " ".concat(cn(["left-0", "top-1/2", "-translate-y-1/2"]));
   } else if (dropZone === "val-menu-left-bottom") {
-    className += " left-0 bottom-0";
+    className += " ".concat(cn(["left-0", "bottom-0"]));
   } else if (dropZone === "val-menu-center-top") {
-    className += " left-1/2 -translate-x-1/2 top-0";
+    className += " ".concat(cn(["left-1/2", "-translate-x-1/2", "top-0"]));
   } else if (dropZone === "val-menu-center-bottom") {
-    className += " left-1/2 -translate-x-1/2 bottom-0";
+    className += " ".concat(cn(["left-1/2", "-translate-x-1/2", "bottom-0"]));
   } else if (dropZone === "val-menu-right-top") {
-    className += " right-0 top-0";
+    className += " ".concat(cn(["right-0", "top-0"]));
   } else if (dropZone === "val-menu-right-center") {
-    className += " right-0 top-1/2 -translate-y-1/2";
+    className += " ".concat(cn(["right-0", "top-1/2", "-translate-y-1/2"]));
   } else if (dropZone === "val-menu-right-bottom") {
-    className += " right-0 bottom-0";
+    className += " ".concat(cn(["right-0", "bottom-0"]));
   } else {
-    className += " right-0 bottom-0";
+    className += " ".concat(cn(["right-0", "bottom-0"]));
   }
   return className;
 }

package/dist/ValNextProvider-7042b86d.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValNextProvider-7042b86d.cjs.prod.js");
+} else {
+  module.exports = require("./ValNextProvider-7042b86d.cjs.dev.js");
+}

package/dist/{ValNextProvider-a618d775.cjs.prod.js → ValNextProvider-7042b86d.cjs.prod.js}

@@ -13,7 +13,7 @@ var React = require('react');
 var ValOverlayContext = require('./ValOverlayContext-942f1294.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
-var useRemoteConfigSender = require('./useRemoteConfigSender-3ea2fe91.cjs.prod.js');
+var cssUtils = require('./cssUtils-d97a757c.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 
@@ -37,8 +37,8 @@ var ValNextProvider = function ValNextProvider(props) {
   }, []);
   var _React$useState = React__default["default"].useState(),
     _React$useState2 = slicedToArray._slicedToArray(_React$useState, 2),
-    showOverlay = _React$useState2[0],
-    setShowOverlay = _React$useState2[1];
+    mountOverlay = _React$useState2[0],
+    setMountOverlay = _React$useState2[1];
   var _React$useState3 = React__default["default"].useState(null),
     _React$useState4 = slicedToArray._slicedToArray(_React$useState3, 2),
     draftMode = _React$useState4[0],
@@ -46,7 +46,7 @@ var ValNextProvider = function ValNextProvider(props) {
   var _React$useState5 = React__default["default"].useState(false),
     _React$useState6 = slicedToArray._slicedToArray(_React$useState5, 2),
     spaReady = _React$useState6[0],
-    setSpaReady = _React$useState6[1];
+    setSpaReady = _React$useState6[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
   var router = navigation.useRouter();
   var _React$useTransition = React__default["default"].useTransition(),
     _React$useTransition2 = slicedToArray._slicedToArray(_React$useTransition, 2),
@@ -56,20 +56,20 @@ var ValNextProvider = function ValNextProvider(props) {
     _React$useState8 = slicedToArray._slicedToArray(_React$useState7, 2),
     iframeSrc = _React$useState8[0],
     setIframeSrc = _React$useState8[1];
-  useConsoleLogEnableVal(showOverlay);
+  useConsoleLogEnableVal(mountOverlay);
   React__default["default"].useEffect(function () {
     if (location.search === "?message_onready=true") {
       console.warn("Val is verifying draft mode...");
       return;
     }
     if (isValStudioPath(location.pathname)) {
-      setShowOverlay(false);
+      setMountOverlay(false);
       return;
     }
-    setShowOverlay(document.cookie.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
+    setMountOverlay(document.cookie.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
   }, []);
   React__default["default"].useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     var interval = setInterval(function () {
@@ -85,9 +85,9 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       clearInterval(interval);
     };
-  }, [showOverlay, props.disableRefresh]);
+  }, [mountOverlay, props.disableRefresh]);
   React__default["default"].useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     if (draftMode === null) {
@@ -128,14 +128,14 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       window.removeEventListener("val-overlay-provider", valProviderOverlayListener);
     };
-  }, [showOverlay, draftMode]);
+  }, [mountOverlay, draftMode]);
   var pollDraftStatIdRef = React__default["default"].useRef(0);
   React__default["default"].useEffect(function () {
-    // continous polling to check for updates:
+    // continuous polling to check for updates:
 
     var timeout;
     function pollCurrentDraftMode() {
-      if (!showOverlay) {
+      if (!mountOverlay) {
         return;
       }
       window.dispatchEvent(new CustomEvent("val-overlay-spa", {
@@ -182,9 +182,9 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       clearTimeout(timeout);
     };
-  }, [showOverlay, iframeSrc]);
+  }, [mountOverlay, iframeSrc]);
   React__default["default"].useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     window.dispatchEvent(new CustomEvent("val-overlay-spa", {
@@ -193,9 +193,9 @@ var ValNextProvider = function ValNextProvider(props) {
         value: draftMode
       }
     }));
-  }, [showOverlay, draftMode, spaReady]);
+  }, [mountOverlay, draftMode, spaReady]);
   React__default["default"].useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       stega.SET_AUTO_TAG_JSX_ENABLED(false);
     } else {
       if (draftMode) {
@@ -228,9 +228,9 @@ var ValNextProvider = function ValNextProvider(props) {
         };
       }
     }
-  }, [showOverlay, draftMode, props.disableRefresh]);
+  }, [mountOverlay, draftMode, props.disableRefresh]);
   React__default["default"].useEffect(function () {
-    if (!showOverlay) {
+    if (!mountOverlay) {
       return;
     }
     var listener = function listener(event) {
@@ -242,7 +242,7 @@ var ValNextProvider = function ValNextProvider(props) {
     return function () {
       window.removeEventListener("message", listener);
     };
-  }, [showOverlay]);
+  }, [mountOverlay]);
   var _React$useState9 = React__default["default"].useState(null),
     _React$useState10 = slicedToArray._slicedToArray(_React$useState9, 2),
     dropZone = _React$useState10[0],
@@ -255,38 +255,64 @@ var ValNextProvider = function ValNextProvider(props) {
       setDropZone("val-menu-right-center");
     }
   }, []);
-  useRemoteConfigSender.useRemoteConfigSender(props.config);
+  cssUtils.useConfigStorageSave(props.config);
+  var _React$useState11 = React__default["default"].useState(false),
+    _React$useState12 = slicedToArray._slicedToArray(_React$useState11, 2),
+    spaLoaded = _React$useState12[0],
+    setSpaLoaded = _React$useState12[1];
+  var commonStyles = React__default["default"].useMemo(function () {
+    return {
+      "backdrop-blur": "backdrop-filter: blur(10px);",
+      "text-white": "color: white;",
+      "bg-black": "background: black;",
+      rounded: "border-radius: 0.25rem;",
+      fixed: "position: fixed;",
+      "bottom-4": "bottom: 1rem;",
+      "right-12": "right: 3rem;",
+      "right-16": "right: 4rem;",
+      "p-4": "padding: 1rem;",
+      "p-2": "padding: 0.5rem;",
+      "p-1": "padding: 0.25rem;",
+      flex: "display: flex;",
+      "items-center": "align-items: center;",
+      "justify-center": "justify-content: center;"
+    };
+  }, [cssUtils.valPrefixedClass]);
   return /*#__PURE__*/jsxRuntime.jsxs(ValOverlayContext.ValOverlayProvider, {
     draftMode: draftMode,
     store: valStore,
-    children: [props.children, !spaReady && showOverlay && dropZone && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("style", {
-        children: "\n".concat(positionStyles, "\n.backdrop-blur {\n  backdrop-filter: blur(10px);\n}\n.text-white {\n  color: white;\n}\n.bg-black {\n  background: black;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.fixed {\n  position: fixed;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.right-12 {\n  right: 3rem;\n}\n.right-16 {\n  right: 4rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.animate-spin {\n  animation: spin 2s linear infinite;\n}\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
+        children: "\n".concat(positionStyles, "\n").concat(cssUtils.prefixStyles(commonStyles), "\n.").concat(cssUtils.valPrefixedClass, "animate-spin {\n  animation: ").concat(cssUtils.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(cssUtils.valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: getPositionClassName(dropZone) + " p-4",
+        className: "".concat(getPositionClassName(dropZone), " ").concat(cssUtils.cn(["p-4"])),
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex justify-center items-center p-2 text-white bg-black rounded backdrop-blur",
+          className: "".concat(cssUtils.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cssUtils.cn(["text-white", "bg-black", "rounded", "backdrop-blur"])),
           children: /*#__PURE__*/jsxRuntime.jsx(Clock, {
-            className: "animate-spin",
+            className: "".concat(cssUtils.cn(["animate-spin"])),
             size: 16
           })
         })
       })]
-    }), showOverlay && draftMode !== undefined && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+    }), mountOverlay && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
         type: "module",
         src: "".concat(route, "/static").concat(ui.VERSION ? "/".concat(ui.VERSION) : "").concat(ui.VAL_APP_PATH),
-        crossOrigin: "anonymous"
+        crossOrigin: "anonymous",
+        onLoad: function onLoad() {
+          setSpaLoaded(true);
+        }
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         id: ui.VAL_OVERLAY_ID
       })]
-    }), iframeSrc && draftMode !== null && showOverlay && /*#__PURE__*/jsxRuntime.jsx("iframe", {
+    }), mountOverlay && iframeSrc && /*#__PURE__*/jsxRuntime.jsx("iframe", {
+      loading: "eager",
       style: {
-        top: 0,
-        left: 0,
+        top: 10,
+        left: 10,
         position: "absolute",
-        width: 0,
-        height: 0
+        width: 1000,
+        height: 1000
       },
       src: iframeSrc
     }, iframeSrc)]
@@ -299,28 +325,38 @@ function useConsoleLogEnableVal(showOverlay) {
     }
   }, [showOverlay]);
 }
-var positionStyles = "\n.left-0 {\n  left: 0;\n}\n.top-0 {\n  top: 0;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.top-1\\/2 {\n  top: 50%;\n}\n.-translate-y-1\\/2 {\n  transform: translateY(-50%);\n}\n.-translate-x-1\\/2 {\n  transform: translateX(-50%);\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}";
+var positionStyles = cssUtils.prefixStyles({
+  "left-0": "left: 0;",
+  "top-0": "top: 0;",
+  "left-1/2": "left: 50%;",
+  "top-1/2": "top: 50%;",
+  "-translate-y-1/2": "transform: translateY(-50%);",
+  "-translate-x-1/2": "transform: translateX(-50%);",
+  "right-0": "right: 0;",
+  "bottom-0": "bottom: 0;"
+});
+
 // This is a copy of the function from the ValMenu component.
 function getPositionClassName(dropZone) {
-  var className = "fixed transform";
+  var className = cssUtils.cn(["fixed", "transform"]);
   if (dropZone === "val-menu-left-top") {
-    className += " left-0 top-0";
+    className += " ".concat(cssUtils.cn(["left-0", "top-0"]));
   } else if (dropZone === "val-menu-left-center") {
-    className += " left-0 top-1/2 -translate-y-1/2";
+    className += " ".concat(cssUtils.cn(["left-0", "top-1/2", "-translate-y-1/2"]));
   } else if (dropZone === "val-menu-left-bottom") {
-    className += " left-0 bottom-0";
+    className += " ".concat(cssUtils.cn(["left-0", "bottom-0"]));
   } else if (dropZone === "val-menu-center-top") {
-    className += " left-1/2 -translate-x-1/2 top-0";
+    className += " ".concat(cssUtils.cn(["left-1/2", "-translate-x-1/2", "top-0"]));
   } else if (dropZone === "val-menu-center-bottom") {
-    className += " left-1/2 -translate-x-1/2 bottom-0";
+    className += " ".concat(cssUtils.cn(["left-1/2", "-translate-x-1/2", "bottom-0"]));
   } else if (dropZone === "val-menu-right-top") {
-    className += " right-0 top-0";
+    className += " ".concat(cssUtils.cn(["right-0", "top-0"]));
   } else if (dropZone === "val-menu-right-center") {
-    className += " right-0 top-1/2 -translate-y-1/2";
+    className += " ".concat(cssUtils.cn(["right-0", "top-1/2", "-translate-y-1/2"]));
   } else if (dropZone === "val-menu-right-bottom") {
-    className += " right-0 bottom-0";
+    className += " ".concat(cssUtils.cn(["right-0", "bottom-0"]));
   } else {
-    className += " right-0 bottom-0";
+    className += " ".concat(cssUtils.cn(["right-0", "bottom-0"]));
   }
   return className;
 }