@xanui/core 1.2.43 → 1.2.45

package/AppRoot/AppRootProvider.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const AppRootContext = React.createContext(null);
+const AppRootProvider = ({ element, children }) => {
+    return (jsxRuntime.jsx(AppRootContext.Provider, { value: element, children: children }));
+};
+const useAppRootElement = () => {
+    const context = React.useContext(AppRootContext);
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return context();
+};
+
+exports.AppRootProvider = AppRootProvider;
+exports.useAppRootElement = useAppRootElement;
+//# sourceMappingURL=AppRootProvider.cjs.map

package/AppRoot/AppRootProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppRootProvider.cjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context!() as HTMLElement\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAoC,IAAI,CAAC;AAE5E,MAAM,eAAe,GAA+E,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAClI,IAAA,QACGA,cAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;IAEA,OAAO,OAAQ,EAAiB;AACnC;;;;;"}

package/AppRoot/AppRootProvider.js

@@ -1,20 +1,17 @@
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const AppRootContext = React.createContext(null);
+const AppRootContext = React__default.createContext(null);
 const AppRootProvider = ({ element, children }) => {
-    return (jsxRuntime.jsx(AppRootContext.Provider, { value: element, children: children }));
+    return (jsx(AppRootContext.Provider, { value: element, children: children }));
 };
 const useAppRootElement = () => {
-    const context = React.useContext(AppRootContext);
+    const context = React__default.useContext(AppRootContext);
     if (typeof window === 'undefined') {
         return null;
     }
-    return context;
+    return context();
 };
 
-exports.AppRootProvider = AppRootProvider;
-exports.useAppRootElement = useAppRootElement;
+export { AppRootProvider, useAppRootElement };
 //# sourceMappingURL=AppRootProvider.js.map

package/AppRoot/AppRootProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as HTMLElement\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGA,cAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;;"}
+{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context!() as HTMLElement\r\n}\r\n"],"names":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAAoC,IAAI,CAAC;AAE5E,MAAM,eAAe,GAA+E,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAClI,IAAA,QACGC,GAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAGD,cAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;IAEA,OAAO,OAAQ,EAAiB;AACnC;;;;"}

package/AppRoot/Renderar.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Document/index.cjs');
+
+const State = new Map();
+const Dispatch = new Map();
+class Renderar {
+    static render(component, props) {
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        components.push({ component, props });
+        State.set(Renderar.doc.id, components);
+        const dispatch = Dispatch.get(docid);
+        if (dispatch) {
+            dispatch();
+        }
+        return {
+            unrender: () => {
+                this.unrender(component);
+            },
+            updateProps: (newProps) => {
+                this.updateProps(component, newProps);
+            }
+        };
+    }
+    static unrender(component) {
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const index = components.findIndex((c) => c.component === component);
+        if (index > -1) {
+            components.splice(index, 1);
+            const dispatch = Dispatch.get(docid);
+            if (dispatch) {
+                dispatch();
+            }
+        }
+    }
+    static updateProps(component, props) {
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const storedComponent = components.find((c) => c.component === component);
+        if (storedComponent) {
+            storedComponent.props = Object.assign(Object.assign({}, storedComponent.props), props);
+        }
+        const dispatch = Dispatch.get(docid);
+        if (dispatch) {
+            dispatch();
+        }
+    }
+}
+const RenderRenderar = () => {
+    const [, setState] = React.useState(0);
+    const doc = index.useDocument();
+    React.useMemo(() => {
+        const render = Renderar.render;
+        const unrender = Renderar.unrender;
+        const updateProps = Renderar.updateProps;
+        Renderar.render = ((component, props) => {
+            Renderar.doc = doc;
+            render(component, Object.assign(Object.assign({}, props), { $doc: doc }));
+            Renderar.doc = null;
+        });
+        Renderar.unrender = ((component) => {
+            Renderar.doc = doc;
+            unrender(component);
+            Renderar.doc = null;
+        });
+        Renderar.updateProps = ((component, props) => {
+            Renderar.doc = doc;
+            updateProps(component, props);
+            Renderar.doc = null;
+        });
+    }, [doc.id]);
+    if (!Dispatch.has(doc.id)) {
+        Dispatch.set(doc.id, () => {
+            setState((prev) => prev + 1);
+        });
+    }
+    const components = State.get(doc.id) || [];
+    return components.map(({ component: Component, props }, index) => {
+        return jsxRuntime.jsx(Component, Object.assign({}, props), index);
+    });
+};
+
+exports.RenderRenderar = RenderRenderar;
+exports.Renderar = Renderar;
+//# sourceMappingURL=Renderar.cjs.map

package/AppRoot/Renderar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderar.cjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement, useMemo } from \"react\";\r\nimport { DocumentID, useDocument } from \"../Document\";\r\n\r\ntype StoredComponent = {\r\n   component: React.FunctionComponent<any>;\r\n   props: any;\r\n};\r\n\r\nconst State = new Map<DocumentID, StoredComponent[]>()\r\nconst Dispatch = new Map<DocumentID, Function>()\r\n\r\nexport class Renderar {\r\n   static doc: any\r\n   static render(component: React.FunctionComponent, props?: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n      components.push({ component, props })\r\n      State.set(Renderar.doc.id, components)\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n\r\n      return {\r\n         unrender: () => {\r\n            this.unrender(component);\r\n         },\r\n         updateProps: (newProps: any) => {\r\n            this.updateProps(component, newProps);\r\n         }\r\n      };\r\n   }\r\n\r\n   static unrender(component: React.FunctionComponent) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const index = components.findIndex((c) => c.component === component);\r\n      if (index > -1) {\r\n         components.splice(index, 1);\r\n         const dispatch = Dispatch.get(docid)\r\n         if (dispatch) {\r\n            dispatch()\r\n         }\r\n      }\r\n   }\r\n\r\n   static updateProps(component: React.FunctionComponent, props: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const storedComponent = components.find((c) => c.component === component);\r\n      if (storedComponent) {\r\n         storedComponent.props = { ...storedComponent.props, ...props };\r\n      }\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n   }\r\n}\r\n\r\nexport const RenderRenderar = () => {\r\n   const [, setState] = React.useState(0);\r\n   const doc = useDocument()\r\n\r\n   useMemo(() => {\r\n      const render = Renderar.render\r\n      const unrender = Renderar.unrender\r\n      const updateProps = Renderar.updateProps\r\n      Renderar.render = ((component: React.FunctionComponent, props?: any) => {\r\n         Renderar.doc = doc\r\n         render(component, { ...props, $doc: doc })\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.unrender = ((component: React.FunctionComponent) => {\r\n         Renderar.doc = doc\r\n         unrender(component)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.updateProps = ((component: React.FunctionComponent, props: any) => {\r\n         Renderar.doc = doc\r\n         updateProps(component, props)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n   }, [doc.id])\r\n\r\n   if (!Dispatch.has(doc.id)) {\r\n      Dispatch.set(doc.id, () => {\r\n         setState((prev) => prev + 1);\r\n      })\r\n   }\r\n   const components = State.get(doc.id) || []\r\n\r\n   return components.map(({ component: Component, props }, index): ReactElement => {\r\n      return <Component key={index} {...props} />;\r\n   });\r\n}\r\n"],"names":["useDocument","useMemo","_jsx"],"mappings":"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"}

package/AppRoot/Renderar.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 
 declare class Renderar {
+    static doc: any;
     static render(component: React__default.FunctionComponent, props?: any): {
         unrender: () => void;
         updateProps: (newProps: any) => void;

package/AppRoot/Renderar.js

@@ -1,13 +1,16 @@
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { useDocument } from '../Document/index.js';
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const Components = [];
-let dispatch = null;
+const State = new Map();
+const Dispatch = new Map();
 class Renderar {
     static render(component, props) {
-        Components.push({ component, props });
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        components.push({ component, props });
+        State.set(Renderar.doc.id, components);
+        const dispatch = Dispatch.get(docid);
         if (dispatch) {
             dispatch();
         }
@@ -21,34 +24,63 @@ class Renderar {
         };
     }
     static unrender(component) {
-        const index = Components.findIndex((c) => c.component === component);
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const index = components.findIndex((c) => c.component === component);
         if (index > -1) {
-            Components.splice(index, 1);
-            if (dispatch)
+            components.splice(index, 1);
+            const dispatch = Dispatch.get(docid);
+            if (dispatch) {
                 dispatch();
+            }
         }
     }
     static updateProps(component, props) {
-        const storedComponent = Components.find((c) => c.component === component);
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const storedComponent = components.find((c) => c.component === component);
         if (storedComponent) {
             storedComponent.props = Object.assign(Object.assign({}, storedComponent.props), props);
         }
-        if (dispatch)
+        const dispatch = Dispatch.get(docid);
+        if (dispatch) {
             dispatch();
+        }
     }
 }
 const RenderRenderar = () => {
-    const [, setState] = React.useState(0);
-    if (!dispatch) {
-        dispatch = () => {
+    const [, setState] = React__default.useState(0);
+    const doc = useDocument();
+    useMemo(() => {
+        const render = Renderar.render;
+        const unrender = Renderar.unrender;
+        const updateProps = Renderar.updateProps;
+        Renderar.render = ((component, props) => {
+            Renderar.doc = doc;
+            render(component, Object.assign(Object.assign({}, props), { $doc: doc }));
+            Renderar.doc = null;
+        });
+        Renderar.unrender = ((component) => {
+            Renderar.doc = doc;
+            unrender(component);
+            Renderar.doc = null;
+        });
+        Renderar.updateProps = ((component, props) => {
+            Renderar.doc = doc;
+            updateProps(component, props);
+            Renderar.doc = null;
+        });
+    }, [doc.id]);
+    if (!Dispatch.has(doc.id)) {
+        Dispatch.set(doc.id, () => {
             setState((prev) => prev + 1);
-        };
+        });
     }
-    return Components.map(({ component: Component, props }, index) => {
-        return jsxRuntime.jsx(Component, Object.assign({}, props), index);
+    const components = State.get(doc.id) || [];
+    return components.map(({ component: Component, props }, index) => {
+        return jsx(Component, Object.assign({}, props), index);
     });
 };
 
-exports.RenderRenderar = RenderRenderar;
-exports.Renderar = Renderar;
+export { RenderRenderar, Renderar };
 //# sourceMappingURL=Renderar.js.map

package/AppRoot/Renderar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\r\n\r\ntype StoredComponent = {\r\n   component: React.FunctionComponent<any>;\r\n   props: any;\r\n};\r\n\r\nconst Components: StoredComponent[] = [];\r\nlet dispatch: (() => void) | null = null;\r\n\r\nexport class Renderar {\r\n   static render(component: React.FunctionComponent, props?: any) {\r\n      Components.push({ component, props });\r\n\r\n      if (dispatch) {\r\n         dispatch();\r\n      }\r\n\r\n      return {\r\n         unrender: () => {\r\n            this.unrender(component);\r\n         },\r\n         updateProps: (newProps: any) => {\r\n            this.updateProps(component, newProps);\r\n         }\r\n      };\r\n   }\r\n\r\n   static unrender(component: React.FunctionComponent) {\r\n      const index = Components.findIndex((c) => c.component === component);\r\n      if (index > -1) {\r\n         Components.splice(index, 1);\r\n         if (dispatch) dispatch();\r\n      }\r\n   }\r\n\r\n   static updateProps(component: React.FunctionComponent, props: any) {\r\n      const storedComponent = Components.find((c) => c.component === component);\r\n      if (storedComponent) {\r\n         storedComponent.props = { ...storedComponent.props, ...props };\r\n      }\r\n      if (dispatch) dispatch();\r\n   }\r\n}\r\n\r\nexport const RenderRenderar = () => {\r\n   const [, setState] = React.useState(0);\r\n\r\n   if (!dispatch) {\r\n      dispatch = () => {\r\n         setState((prev) => prev + 1);\r\n      };\r\n   }\r\n\r\n   return Components.map(({ component: Component, props }, index): ReactElement => {\r\n      return <Component key={index} {...props} />;\r\n   });\r\n};\r\n"],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,UAAU,GAAsB,EAAE;AACxC,IAAI,QAAQ,GAAwB,IAAI;MAE3B,QAAQ,CAAA;AAClB,IAAA,OAAO,MAAM,CAAC,SAAkC,EAAE,KAAW,EAAA;QAC1D,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAErC,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B,CAAC;AACD,YAAA,WAAW,EAAE,CAAC,QAAa,KAAI;AAC5B,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;YACxC;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;AAC/C,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AACpE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC3B,YAAA,IAAI,QAAQ;AAAE,gBAAA,QAAQ,EAAE;QAC3B;IACH;AAEA,IAAA,OAAO,WAAW,CAAC,SAAkC,EAAE,KAAU,EAAA;AAC9D,QAAA,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;QACzE,IAAI,eAAe,EAAE;YAClB,eAAe,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,eAAe,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;QACjE;AACA,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;IAC3B;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;IAChC,MAAM,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,CAAC,QAAQ,EAAE;QACZ,QAAQ,GAAG,MAAK;YACb,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAC/B,QAAA,CAAC;IACJ;AAEA,IAAA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,KAAkB;AAC5E,QAAA,OAAOA,eAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAiB,KAAK,CAAA,EAAhB,KAAK,CAAe;AAC9C,IAAA,CAAC,CAAC;AACL;;;;;"}
+{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement, useMemo } from \"react\";\r\nimport { DocumentID, useDocument } from \"../Document\";\r\n\r\ntype StoredComponent = {\r\n   component: React.FunctionComponent<any>;\r\n   props: any;\r\n};\r\n\r\nconst State = new Map<DocumentID, StoredComponent[]>()\r\nconst Dispatch = new Map<DocumentID, Function>()\r\n\r\nexport class Renderar {\r\n   static doc: any\r\n   static render(component: React.FunctionComponent, props?: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n      components.push({ component, props })\r\n      State.set(Renderar.doc.id, components)\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n\r\n      return {\r\n         unrender: () => {\r\n            this.unrender(component);\r\n         },\r\n         updateProps: (newProps: any) => {\r\n            this.updateProps(component, newProps);\r\n         }\r\n      };\r\n   }\r\n\r\n   static unrender(component: React.FunctionComponent) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const index = components.findIndex((c) => c.component === component);\r\n      if (index > -1) {\r\n         components.splice(index, 1);\r\n         const dispatch = Dispatch.get(docid)\r\n         if (dispatch) {\r\n            dispatch()\r\n         }\r\n      }\r\n   }\r\n\r\n   static updateProps(component: React.FunctionComponent, props: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const storedComponent = components.find((c) => c.component === component);\r\n      if (storedComponent) {\r\n         storedComponent.props = { ...storedComponent.props, ...props };\r\n      }\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n   }\r\n}\r\n\r\nexport const RenderRenderar = () => {\r\n   const [, setState] = React.useState(0);\r\n   const doc = useDocument()\r\n\r\n   useMemo(() => {\r\n      const render = Renderar.render\r\n      const unrender = Renderar.unrender\r\n      const updateProps = Renderar.updateProps\r\n      Renderar.render = ((component: React.FunctionComponent, props?: any) => {\r\n         Renderar.doc = doc\r\n         render(component, { ...props, $doc: doc })\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.unrender = ((component: React.FunctionComponent) => {\r\n         Renderar.doc = doc\r\n         unrender(component)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.updateProps = ((component: React.FunctionComponent, props: any) => {\r\n         Renderar.doc = doc\r\n         updateProps(component, props)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n   }, [doc.id])\r\n\r\n   if (!Dispatch.has(doc.id)) {\r\n      Dispatch.set(doc.id, () => {\r\n         setState((prev) => prev + 1);\r\n      })\r\n   }\r\n   const components = State.get(doc.id) || []\r\n\r\n   return components.map(({ component: Component, props }, index): ReactElement => {\r\n      return <Component key={index} {...props} />;\r\n   });\r\n}\r\n"],"names":["React","_jsx"],"mappings":"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"}

package/AppRoot/index.cjs

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../theme/core.cjs');
+require('../css/getValue.cjs');
+require('oncss');
+var ThemeProvider = require('../theme/ThemeProvider.cjs');
+require('react-state-bucket');
+var BreakpointProvider = require('../breakpoint/BreakpointProvider.cjs');
+var Renderar = require('./Renderar.cjs');
+var index = require('../Document/index.cjs');
+var AppRootProvider = require('./AppRootProvider.cjs');
+var useMergeRefs = require('../hooks/useMergeRefs.cjs');
+var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
+
+const AppRoot = React.forwardRef((_a, ref) => {
+    var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
+    noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
+    _document !== null && _document !== void 0 ? _document : (_document = document);
+    const docid = React.useId();
+    const csscacheId = React.useId();
+    CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
+    const [visibility, setVisibility] = React.useState("hidden");
+    const [doc, setDoc] = React.useState(_document !== null && _document !== void 0 ? _document : (_document = document));
+    const rootRef = React.useRef(null);
+    const mergeRef = useMergeRefs(rootRef, ref);
+    // console.log(_document);
+    React.useEffect(() => {
+        setVisibility("visible");
+        // move oncss style tags to head
+        if (typeof _document === 'undefined')
+            return;
+        const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
+        styles.forEach((style) => {
+            _document.head.appendChild(style);
+        });
+    }, []);
+    return (jsxRuntime.jsx(index.DocumentProvider, { document: doc, id: docid, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
+});
+
+module.exports = AppRoot;
+//# sourceMappingURL=index.cjs.map

package/AppRoot/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const [doc, setDoc] = useState(_document ??= document)\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n   // console.log(_document);\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={doc} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={() => rootRef.current}>\r\n               <ThemeProvider\r\n                  theme={theme}\r\n                  {...props}\r\n                  ref={mergeRef}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAGA;AACA;AACA;;;;;;;;AASG;AACA;AACG;AACH;;AAGH;AAuBH;;"}

package/AppRoot/index.js

@@ -1,31 +1,32 @@
 "use client";
-'use strict';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useRef, useEffect } from 'react';
+import '../theme/core.js';
+import '../css/getValue.js';
+import 'oncss';
+import ThemeProvider from '../theme/ThemeProvider.js';
+import 'react-state-bucket';
+import { BreakpointProvider } from '../breakpoint/BreakpointProvider.js';
+import { RenderRenderar } from './Renderar.js';
+import { DocumentProvider } from '../Document/index.js';
+import { AppRootProvider } from './AppRootProvider.js';
+import useMergeRefs from '../hooks/useMergeRefs.js';
+import { CSSCacheProvider } from '../css/CSSCacheProvider.js';
 
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-require('../theme/core.js');
-require('../css/getValue.js');
-require('oncss');
-var ThemeProvider = require('../theme/ThemeProvider.js');
-require('react-state-bucket');
-var BreakpointProvider = require('../breakpoint/BreakpointProvider.js');
-var Renderar = require('./Renderar.js');
-var index = require('../Document/index.js');
-var AppRootProvider = require('./AppRootProvider.js');
-var useMergeRefs = require('../hooks/useMergeRefs.js');
-var CSSCacheProvider = require('../css/CSSCacheProvider.js');
-
-const AppRoot = React.forwardRef((_a, ref) => {
-    var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
+const AppRoot = React__default.forwardRef((_a, ref) => {
+    var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
     _document !== null && _document !== void 0 ? _document : (_document = document);
-    const csscacheId = React.useId();
+    const docid = useId();
+    const csscacheId = useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
-    const [visibility, setVisibility] = React.useState("hidden");
-    const rootRef = React.useRef(null);
+    const [visibility, setVisibility] = React__default.useState("hidden");
+    const [doc, setDoc] = useState(_document !== null && _document !== void 0 ? _document : (_document = document));
+    const rootRef = useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
-    React.useEffect(() => {
+    // console.log(_document);
+    useEffect(() => {
         setVisibility("visible");
         // move oncss style tags to head
         if (typeof _document === 'undefined')
@@ -35,8 +36,8 @@ const AppRoot = React.forwardRef((_a, ref) => {
             _document.head.appendChild(style);
         });
     }, []);
-    return (jsxRuntime.jsx(index.DocumentProvider, { document: _document, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
+    return (jsx(DocumentProvider, { document: doc, id: docid, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] }) })) }) }) }));
 });
 
-module.exports = AppRoot;
+export { AppRoot as default };
 //# sourceMappingURL=index.js.map

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={_document}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={rootRef.current}>\r\n               <ThemeProvider\r\n                  ref={mergeRef}\r\n                  theme={theme}\r\n                  {...props}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const [doc, setDoc] = useState(_document ??= document)\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n   // console.log(_document);\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={doc} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={() => rootRef.current}>\r\n               <ThemeProvider\r\n                  theme={theme}\r\n                  {...props}\r\n                  ref={mergeRef}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAGA;AACA;AACA;;;;;;;;AASG;AACA;AACG;AACH;;AAGH;AAuBH;;"}

package/Document/index.cjs

@@ -0,0 +1,21 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const DocumentContext = React.createContext(null);
+const DocumentProvider = ({ document, id, children }) => {
+    return (jsxRuntime.jsx(DocumentContext.Provider, { value: { document, id }, children: children }));
+};
+const useDocument = () => {
+    const context = React.useContext(DocumentContext);
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return context;
+};
+
+exports.DocumentProvider = DocumentProvider;
+exports.useDocument = useDocument;
+//# sourceMappingURL=index.cjs.map

package/Document/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAGH;AACH;;;"}

package/Document/index.d.ts

@@ -1,3 +1,9 @@
-declare const useDocument: () => Document;
+type DocumentID = string;
+type DocumentContextValue = {
+    document: Document;
+    id: DocumentID;
+};
+declare const useDocument: () => DocumentContextValue;
 
 export { useDocument };
+export type { DocumentContextValue, DocumentID };

package/Document/index.js

@@ -1,21 +1,18 @@
 "use client";
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const DocumentContext = React.createContext(null);
-const DocumentProvider = ({ document, children }) => {
-    return (jsxRuntime.jsx(DocumentContext.Provider, { value: document, children: children }));
+const DocumentContext = createContext(null);
+const DocumentProvider = ({ document, id, children }) => {
+    return (jsx(DocumentContext.Provider, { value: { document, id }, children: children }));
 };
 const useDocument = () => {
-    const context = React.useContext(DocumentContext);
+    const context = useContext(DocumentContext);
     if (typeof window === 'undefined') {
         return null;
     }
-    return context || document;
+    return context;
 };
 
-exports.DocumentProvider = DocumentProvider;
-exports.useDocument = useDocument;
+export { DocumentProvider, useDocument };
 //# sourceMappingURL=index.js.map

package/Document/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React from \"react\";\r\n\r\nconst DocumentContext = React.createContext<Document | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ document: Document; children: React.ReactNode }> = ({ document, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={document}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): Document => {\r\n   const context = React.useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context || document;\r\n}"],"names":[],"mappings":";;;;;;AAGA;AAEO;AACJ;AAKH;AAEO;;AAEJ;AACG;;;AAGN;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAGH;AACH;;"}

package/Iframe/index.cjs

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('../theme/core.cjs');
+require('../css/getValue.cjs');
+require('oncss');
+require('../theme/ThemeProvider.cjs');
+require('react-state-bucket');
+var index$1 = require('../Tag/index.cjs');
+var reactDom = require('react-dom');
+var index$2 = require('../AppRoot/index.cjs');
+var useMergeRefs = require('../hooks/useMergeRefs.cjs');
+
+const IframeContext = React.createContext({
+    document: null,
+    window: null,
+});
+const Iframe = (_a, ref) => {
+    var { children, sxr, theme, CSSCacheId } = _a, props = tslib.__rest(_a, ["children", "sxr", "theme", "CSSCacheId"]);
+    const [doc, setDoc] = React.useState(null);
+    const iframeRef = React.useRef(null);
+    const _ref = useMergeRefs(iframeRef, ref);
+    const parentTheme = core.useTheme();
+    theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
+    React.useEffect(() => {
+        if (!iframeRef.current)
+            return;
+        const iframe = iframeRef.current;
+        const onLoad = () => setDoc(iframe.contentDocument);
+        iframe.addEventListener("load", onLoad);
+        return () => iframe.removeEventListener("load", onLoad);
+    }, []);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$1, Object.assign({}, props, { component: "iframe", sxr: Object.assign({ border: 'none', width: "100%", height: "100%", p: 0, m: 0 }, sxr), ref: _ref, srcDoc: "<!DOCTYPE html><html><head></head><body></body></html>" })), doc &&
+                reactDom.createPortal(jsxRuntime.jsx(IframeContext.Provider, { value: {
+                        document: doc,
+                        window: doc.defaultView,
+                    }, children: jsxRuntime.jsx(index$2, { theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
+};
+var index = React.forwardRef(Iframe);
+
+module.exports = index;
+//# sourceMappingURL=index.cjs.map

package/Iframe/{index.mjs.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n   document: null,\r\n   window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n   theme?: string;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n   const [doc, setDoc] = useState<Document | null>(null);\r\n   const iframeRef = useRef<HTMLIFrameElement>(null);\r\n   const _ref = useMergeRefs(iframeRef, ref)\r\n   const parentTheme = useTheme()\r\n   theme ??= parentTheme.name\r\n\r\n   useEffect(() => {\r\n      if (!iframeRef.current) return;\r\n      const iframe = iframeRef.current;\r\n      const onLoad = () => setDoc(iframe.contentDocument);\r\n      iframe.addEventListener(\"load\", onLoad);\r\n      return () => iframe.removeEventListener(\"load\", onLoad);\r\n   }, []);\r\n\r\n   return (\r\n      <>\r\n         <Tag\r\n            {...props}\r\n            component={\"iframe\"}\r\n            sxr={{\r\n               border: 'none',\r\n               width: \"100%\",\r\n               height: \"100%\",\r\n               p: 0,\r\n               m: 0,\r\n               ...sxr\r\n            }}\r\n            ref={_ref}\r\n            srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n         />\r\n         {doc &&\r\n            createPortal(\r\n               <IframeContext.Provider\r\n                  value={{\r\n                     document: doc,\r\n                     window: doc.defaultView,\r\n                  }}\r\n               >\r\n                  <AppRoot theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\r\n                     {children}\r\n                  </AppRoot>\r\n               </IframeContext.Provider>,\r\n               doc.body\r\n            )}\r\n      </>\r\n   );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n   document: null,\r\n   window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n   theme?: string;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n   const [doc, setDoc] = useState<Document | null>(null);\r\n   const iframeRef = useRef<HTMLIFrameElement>(null);\r\n   const _ref = useMergeRefs(iframeRef, ref)\r\n   const parentTheme = useTheme()\r\n   theme ??= parentTheme.name\r\n\r\n   useEffect(() => {\r\n      if (!iframeRef.current) return;\r\n      const iframe = iframeRef.current;\r\n      const onLoad = () => setDoc(iframe.contentDocument);\r\n      iframe.addEventListener(\"load\", onLoad);\r\n      return () => iframe.removeEventListener(\"load\", onLoad);\r\n   }, []);\r\n\r\n   return (\r\n      <>\r\n         <Tag\r\n            {...props}\r\n            component={\"iframe\"}\r\n            sxr={{\r\n               border: 'none',\r\n               width: \"100%\",\r\n               height: \"100%\",\r\n               p: 0,\r\n               m: 0,\r\n               ...sxr\r\n            }}\r\n            ref={_ref}\r\n            srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n         />\r\n         {doc &&\r\n            createPortal(\r\n               <IframeContext.Provider\r\n                  value={{\r\n                     document: doc,\r\n                     window: doc.defaultView,\r\n                  }}\r\n               >\r\n                  <AppRoot theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\r\n                     {children}\r\n                  </AppRoot>\r\n               </IframeContext.Provider>,\r\n               doc.body\r\n            )}\r\n      </>\r\n   );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}