@vechain/vechain-kit 1.10.4 → 1.10.5

package/dist/index.cjs

@@ -50,6 +50,8 @@ var si = require('react-icons/si');
 var bi = require('react-icons/bi');
 var go = require('react-icons/go');
 var anatomy = require('@chakra-ui/anatomy');
+var react$1 = require('@emotion/react');
+var createCache = require('@emotion/cache');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -57,6 +59,7 @@ var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 var React10__default = /*#__PURE__*/_interopDefault(React10);
 var VeChainKitMixpanel__default = /*#__PURE__*/_interopDefault(VeChainKitMixpanel);
 var imageCompression__default = /*#__PURE__*/_interopDefault(imageCompression);
+var createCache__default = /*#__PURE__*/_interopDefault(createCache);
 
 // src/languages/en.json
 var en_default = {
@@ -4817,7 +4820,7 @@ var AddressDisplay = ({
 
 // package.json
 var package_default = {
-  version: "1.10.4"};
+  version: "1.10.5"};
 var VersionFooter = ({ ...props }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -22357,21 +22360,55 @@ var getThemeConfig = (darkMode) => ({
 });
 var getVechainKitTheme = (darkMode) => react.extendTheme(getThemeConfig(darkMode));
 var { ToastContainer } = react.createStandaloneToast();
+var createVeChainKitCache = () => {
+  return createCache__default.default({
+    key: "vechain-kit",
+    // consistent with our layer and class names
+    prepend: true
+    // CSS layers will be handled via Global component injection
+  });
+};
+var LayerSetup = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Global,
+    {
+      styles: react$1.css`
+                /* define CSS layers with proper priority order */
+                @layer vechain-kit, host-app;
+
+                /* All vechain-kit styles go in the vechain-kit layer */
+                @layer vechain-kit {
+                    /* scope all Chakra styles to vechain-kit-root */
+                    .vechain-kit-root {
+                        /* vechain-kit styles are contained here */
+                    }
+                }
+            `
+    }
+  );
+};
 var EnsureChakraProvider = ({
   children,
   theme
 }) => {
+  const cache = React10.useMemo(() => createVeChainKitCache(), []);
   try {
     const chakraVars = document.documentElement.style.getPropertyValue(
       "--chakra-colors-transparent"
     );
     if (chakraVars) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme, resetCSS: false, children });
+      return /* @__PURE__ */ jsxRuntime.jsxs(react$1.CacheProvider, { value: cache, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LayerSetup, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme, resetCSS: false, children })
+      ] });
     }
   } catch (e) {
     console.error(e);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme, resetCSS: true, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.CacheProvider, { value: cache, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LayerSetup, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme, resetCSS: true, children })
+  ] });
 };
 var EnsureColorModeScript = ({ darkMode }) => {
   try {