@vechain/vechain-kit 1.10.3 → 1.10.5

package/dist/index.js

@@ -51,6 +51,8 @@ import { SiFarcaster } from 'react-icons/si';
 import { BiBell, BiArchive } from 'react-icons/bi';
 import { GoLinkExternal, GoPlus } from 'react-icons/go';
 import { modalAnatomy, cardAnatomy, popoverAnatomy } from '@chakra-ui/anatomy';
+import { CacheProvider, Global, css } from '@emotion/react';
+import createCache from '@emotion/cache';
 
 // src/languages/en.json
 var en_default = {
@@ -4811,7 +4813,7 @@ var AddressDisplay = ({
 
 // package.json
 var package_default = {
-  version: "1.10.3"};
+  version: "1.10.5"};
 var VersionFooter = ({ ...props }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   return /* @__PURE__ */ jsxs(
@@ -22351,21 +22353,55 @@ var getThemeConfig = (darkMode) => ({
 });
 var getVechainKitTheme = (darkMode) => extendTheme(getThemeConfig(darkMode));
 var { ToastContainer } = createStandaloneToast();
+var createVeChainKitCache = () => {
+  return createCache({
+    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__ */ jsx(
+    Global,
+    {
+      styles: 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 = useMemo(() => createVeChainKitCache(), []);
   try {
     const chakraVars = document.documentElement.style.getPropertyValue(
       "--chakra-colors-transparent"
     );
     if (chakraVars) {
-      return /* @__PURE__ */ jsx(ChakraProvider, { theme, resetCSS: false, children });
+      return /* @__PURE__ */ jsxs(CacheProvider, { value: cache, children: [
+        /* @__PURE__ */ jsx(LayerSetup, {}),
+        /* @__PURE__ */ jsx(ChakraProvider, { theme, resetCSS: false, children })
+      ] });
     }
   } catch (e) {
     console.error(e);
   }
-  return /* @__PURE__ */ jsx(ChakraProvider, { theme, resetCSS: true, children });
+  return /* @__PURE__ */ jsxs(CacheProvider, { value: cache, children: [
+    /* @__PURE__ */ jsx(LayerSetup, {}),
+    /* @__PURE__ */ jsx(ChakraProvider, { theme, resetCSS: true, children })
+  ] });
 };
 var EnsureColorModeScript = ({ darkMode }) => {
   try {