@xanui/core 1.2.42 → 1.2.43

package/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n   theme: string;\r\n}\r\n\r\ncreateDefaultThemes()\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n   if (!THEME) {\r\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n   }\r\n   const doc = useDocument();\r\n\r\n   const globalStyle: any = React.useMemo(() => {\r\n      const root_cls = `.xui-${theme}-theme-root`\r\n      let gkeys = Object.keys(THEME.globalStyle || {})\r\n      let gstyles: any = {}\r\n      gkeys.forEach((key) => {\r\n         gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n      })\r\n\r\n      return css({\r\n         \"@global\": {\r\n            ...gstyles,\r\n            [root_cls]: ThemeCssVars(THEME)\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n      })\r\n   }, [theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider value={theme}>\r\n         <ServerStyleTag factory={globalStyle} />\r\n         <Tag\r\n            minHeight=\"100%\"\r\n            bgcolor=\"background.primary\"\r\n            color=\"text.primary\"\r\n            fontSize=\"text\"\r\n            fontWeight=\"text\"\r\n            lineHeight=\"text\"\r\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n            {...props}\r\n            sxr={{\r\n               \"& a\": {\r\n                  color: \"brand.primary\",\r\n               },\r\n            }}\r\n            baseClass={`${theme}-theme-root`}\r\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n         >\r\n            {children}\r\n         </Tag>\r\n      </ThemeContex.Provider>\r\n   )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["createDefaultThemes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBAA;AAEA;;;;AAGM;AACA;;AAEH;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;AACF;AACJ;;AAeY;AACG;AACF;;AAShB;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\nimport { themeRootClass } from \".\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n   theme: string;\r\n   isRoot?: boolean;\r\n   noScrollbarCss?: boolean;\r\n}\r\n\r\ncreateDefaultThemes()\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\r\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n   if (!THEME) {\r\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n   }\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const themeGlobalStyle: any = React.useMemo(() => {\r\n      const root_cls = `.xui-${theme}-theme-root`\r\n      let gkeys = Object.keys(THEME.globalStyle || {})\r\n      let gstyles: any = {}\r\n      gkeys.forEach((key) => {\r\n         gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n      })\r\n\r\n      return css({\r\n         \"@global\": {\r\n            ...gstyles,\r\n            [root_cls]: ThemeCssVars(THEME)\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      })\r\n   }, [theme, doc])\r\n\r\n   const resetCss = React.useMemo(() => {\r\n      if (!isRoot) return\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      })\r\n   }, [])\r\n\r\n   const scrollbarCss: any = React.useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider value={theme}>\r\n         {\r\n            isRoot && <>\r\n               <ServerStyleTag factory={resetCss as any} />\r\n               {\r\n                  !noScrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n            </>\r\n         }\r\n         <ServerStyleTag factory={themeGlobalStyle} />\r\n         <Tag\r\n            minHeight=\"100%\"\r\n            bgcolor=\"background.primary\"\r\n            color=\"text.primary\"\r\n            fontSize=\"text\"\r\n            fontWeight=\"text\"\r\n            lineHeight=\"text\"\r\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n            {...props}\r\n            sxr={{\r\n               \"& a\": {\r\n                  color: \"brand.primary\",\r\n               },\r\n            }}\r\n            baseClass={`${theme}-theme-root`}\r\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n         >\r\n            {children}\r\n         </Tag>\r\n      </ThemeContex.Provider>\r\n   )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["createDefaultThemes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBAA;AAEA;AAA2D;;;AAGrD;AACA;;AAEH;AACA;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;;AAEF;AACJ;AAEA;AACG;;AACA;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;;AAEF;;AAGJ;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;;AAEF;AACJ;AAEA;AAqBY;AACG;AACF;;AAShB;;"}

package/theme/ThemeProvider.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import Tag from '../Tag/index.mjs';
 import { ThemeFactory, ThemeContex } from './core.mjs';
@@ -9,17 +9,20 @@ import { css } from '../css/index.mjs';
 import { createDefaultThemes } from './ThemeDefaultOptions.mjs';
 import ServerStyleTag from '../Tag/ServerStyleTag.mjs';
 import { useDocument } from '../Document/index.mjs';
+import { themeRootClass } from './index.mjs';
+import { useCSSCacheId } from '../css/CSSCacheProvider.mjs';
 
 createDefaultThemes();
 const ThemeProvider = (_a) => {
-    var { children, theme } = _a, props = __rest(_a, ["children", "theme"]);
+    var { children, theme, isRoot, noScrollbarCss } = _a, props = __rest(_a, ["children", "theme", "isRoot", "noScrollbarCss"]);
     let THEME = ThemeFactory.get(theme);
     if (!THEME) {
         console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
         THEME = ThemeFactory.get("light");
     }
     const doc = useDocument();
-    const globalStyle = React.useMemo(() => {
+    const cacheId = useCSSCacheId();
+    const themeGlobalStyle = React.useMemo(() => {
         const root_cls = `.xui-${theme}-theme-root`;
         let gkeys = Object.keys(THEME.globalStyle || {});
         let gstyles = {};
@@ -31,9 +34,95 @@ const ThemeProvider = (_a) => {
         }, {
             injectStyle: typeof window !== 'undefined',
             container: doc,
+            cacheId
         });
-    }, [theme]);
-    return (jsxs(ThemeContex.Provider, { value: theme, children: [jsx(ServerStyleTag, { factory: globalStyle }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: "background.primary", color: "text.primary", fontSize: "text", fontWeight: "text", lineHeight: "text", fontFamily: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` }, props, { sxr: {
+    }, [theme, doc]);
+    const resetCss = React.useMemo(() => {
+        if (!isRoot)
+            return;
+        return css({
+            "@global": {
+                "*": {
+                    m: 0,
+                    p: 0,
+                    outline: "none",
+                    boxSizing: "border-box",
+                    verticalAlign: "baseline",
+                },
+                "html, body": {
+                    minHeight: "100%",
+                    "-webkit-font-smoothing": "antialiased",
+                    "-moz-osx-font-smoothing": "grayscale",
+                },
+                "img, picture, video, canvas, svg": {
+                    maxWidth: "100%",
+                    display: "block"
+                },
+                "input, button, textarea, select": {
+                    font: "inherit"
+                },
+                "table": {
+                    borderCollapse: "collapse",
+                    borderSpacing: 0,
+                },
+                "ol, ul": {
+                    listStyle: "none",
+                    padding: 0,
+                    margin: 0,
+                },
+                "a": {
+                    display: "inline-block",
+                    color: "inherit",
+                    textDecoration: "none",
+                    cursor: "pointer",
+                    "&:hover": {
+                        textDecoration: "underline"
+                    }
+                },
+                "p, h1, h2, h3, h4, h5, h6": {
+                    overflowWrap: "break-word",
+                },
+            }
+        }, {
+            injectStyle: typeof window !== 'undefined',
+            container: doc,
+            cacheId
+        });
+    }, []);
+    const scrollbarCss = React.useMemo(() => {
+        if (noScrollbarCss)
+            return;
+        const cls = (cls) => `${themeRootClass(theme)} ${cls}`;
+        let thumbSize = 6;
+        let thumbColor = "var(--color-text-secondary)";
+        let trackColor = "transparent";
+        return css({
+            "@global": {
+                [cls('*::-webkit-scrollbar')]: {
+                    width: thumbSize,
+                    height: thumbSize,
+                },
+                [cls("*::-webkit-scrollbar-thumb")]: {
+                    backgroundColor: thumbColor,
+                    borderRadius: "6px",
+                    opacity: 0.6,
+                },
+                [cls("*::-webkit-scrollbar-thumb:hover")]: {
+                    backgroundColor: thumbColor,
+                    opacity: 0.0,
+                },
+                [cls("*::-webkit-scrollbar-track")]: {
+                    backgroundColor: trackColor,
+                    borderRadius: "6px",
+                },
+            }
+        }, {
+            injectStyle: typeof window !== 'undefined',
+            container: doc,
+            cacheId
+        });
+    }, [noScrollbarCss, theme]);
+    return (jsxs(ThemeContex.Provider, { value: theme, children: [isRoot && jsxs(Fragment, { children: [jsx(ServerStyleTag, { factory: resetCss }), !noScrollbarCss && jsx(ServerStyleTag, { factory: scrollbarCss })] }), jsx(ServerStyleTag, { factory: themeGlobalStyle }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: "background.primary", color: "text.primary", fontSize: "text", fontWeight: "text", lineHeight: "text", fontFamily: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` }, props, { sxr: {
                     "& a": {
                         color: "brand.primary",
                     },

package/theme/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n   theme: string;\r\n}\r\n\r\ncreateDefaultThemes()\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n   if (!THEME) {\r\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n   }\r\n   const doc = useDocument();\r\n\r\n   const globalStyle: any = React.useMemo(() => {\r\n      const root_cls = `.xui-${theme}-theme-root`\r\n      let gkeys = Object.keys(THEME.globalStyle || {})\r\n      let gstyles: any = {}\r\n      gkeys.forEach((key) => {\r\n         gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n      })\r\n\r\n      return css({\r\n         \"@global\": {\r\n            ...gstyles,\r\n            [root_cls]: ThemeCssVars(THEME)\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n      })\r\n   }, [theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider value={theme}>\r\n         <ServerStyleTag factory={globalStyle} />\r\n         <Tag\r\n            minHeight=\"100%\"\r\n            bgcolor=\"background.primary\"\r\n            color=\"text.primary\"\r\n            fontSize=\"text\"\r\n            fontWeight=\"text\"\r\n            lineHeight=\"text\"\r\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n            {...props}\r\n            sxr={{\r\n               \"& a\": {\r\n                  color: \"brand.primary\",\r\n               },\r\n            }}\r\n            baseClass={`${theme}-theme-root`}\r\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n         >\r\n            {children}\r\n         </Tag>\r\n      </ThemeContex.Provider>\r\n   )\r\n}\r\n\r\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;AAgBA;AAEA;;;;AAGM;AACA;;AAEH;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;AACF;AACJ;;AAeY;AACG;AACF;;AAShB;;"}
+{"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\nimport { themeRootClass } from \".\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n   theme: string;\r\n   isRoot?: boolean;\r\n   noScrollbarCss?: boolean;\r\n}\r\n\r\ncreateDefaultThemes()\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\r\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n   if (!THEME) {\r\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n   }\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const themeGlobalStyle: any = React.useMemo(() => {\r\n      const root_cls = `.xui-${theme}-theme-root`\r\n      let gkeys = Object.keys(THEME.globalStyle || {})\r\n      let gstyles: any = {}\r\n      gkeys.forEach((key) => {\r\n         gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n      })\r\n\r\n      return css({\r\n         \"@global\": {\r\n            ...gstyles,\r\n            [root_cls]: ThemeCssVars(THEME)\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      })\r\n   }, [theme, doc])\r\n\r\n   const resetCss = React.useMemo(() => {\r\n      if (!isRoot) return\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      })\r\n   }, [])\r\n\r\n   const scrollbarCss: any = React.useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider value={theme}>\r\n         {\r\n            isRoot && <>\r\n               <ServerStyleTag factory={resetCss as any} />\r\n               {\r\n                  !noScrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n            </>\r\n         }\r\n         <ServerStyleTag factory={themeGlobalStyle} />\r\n         <Tag\r\n            minHeight=\"100%\"\r\n            bgcolor=\"background.primary\"\r\n            color=\"text.primary\"\r\n            fontSize=\"text\"\r\n            fontWeight=\"text\"\r\n            lineHeight=\"text\"\r\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n            {...props}\r\n            sxr={{\r\n               \"& a\": {\r\n                  color: \"brand.primary\",\r\n               },\r\n            }}\r\n            baseClass={`${theme}-theme-root`}\r\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n         >\r\n            {children}\r\n         </Tag>\r\n      </ThemeContex.Provider>\r\n   )\r\n}\r\n\r\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;;;AAoBA;AAEA;AAA2D;;;AAGrD;AACA;;AAEH;AACA;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;;AAEF;AACJ;AAEA;AACG;;AACA;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;;AAEF;;AAGJ;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;;AAEF;AACJ;AAEA;AAqBY;AACG;AACF;;AAShB;;"}

package/AppRoot/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","sources":["../../src/AppRoot/context.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;;;;;"}

package/AppRoot/context.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.mjs","sources":["../../src/AppRoot/context.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":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,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;AACA,IAAA,OAAO,OAAsB;AAChC;;;;"}