@vechain/vechain-kit 1.10.0 → 1.10.2

package/dist/index.cjs

@@ -4817,7 +4817,7 @@ var AddressDisplay = ({
 
 // package.json
 var package_default = {
-  version: "1.10.0"};
+  version: "1.10.2"};
 var VersionFooter = ({ ...props }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -22040,7 +22040,10 @@ var VeChainKitProvider = (props) => {
               dappKitReact.DAppKitProvider,
               {
                 nodeUrl: network.nodeUrl ?? chunkZZOAVX47_cjs.getConfig(network.type).nodeUrl,
-                genesis: chunkZZOAVX47_cjs.getConfig(network.type).network.genesis,
+                genesis: network.genesisId ? {
+                  ...chunkZZOAVX47_cjs.getConfig(network.type).network.genesis,
+                  id: network.genesisId
+                } : chunkZZOAVX47_cjs.getConfig(network.type).network.genesis,
                 i18n: i18nConfig,
                 language,
                 logLevel: dappKit.logLevel,
@@ -22090,66 +22093,39 @@ var VeChainKitProvider = (props) => {
   ] });
 };
 var { definePartsStyle, defineMultiStyleConfig } = react.createMultiStyleConfigHelpers(anatomy.modalAnatomy.keys);
-var variants = {
-  vechainKitBase: (props) => definePartsStyle({
+var getModalVariants = (darkMode) => ({
+  vechainKitBase: definePartsStyle({
     dialog: {
       scrollbarWidth: "none",
       overflow: "scroll",
       overflowX: "hidden",
       maxHeight: "550px",
       borderRadius: "24px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
-      // backdropFilter: 'blur(15px)',
+      backgroundColor: darkMode ? "#1f1f1e" : "white"
     },
     closeButton: {
       borderRadius: "50%"
     },
     header: {
       w: "full",
-      color: props.colorMode === "dark" ? "#dfdfdd" : "#2e2e2e",
+      color: darkMode ? "#dfdfdd" : "#2e2e2e",
       fontSize: "md",
       fontWeight: "700",
       textAlign: "center"
     }
-    // overlay: {
-    //     backgroundColor:
-    //         props.colorMode === 'dark' ? '#00000026' : '#00000024',
-    // },
-  }),
-  vechainKitTransactionToast: (props) => definePartsStyle({
-    dialog: {
-      borderRadius: "15px",
-      position: "fixed",
-      bottom: "10px",
-      left: "10px",
-      mimHeight: "70px",
-      minWidth: "300px",
-      maxWidth: "400px",
-      width: "fit-content",
-      pointerEvents: "auto",
-      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
-      py: "10px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
-    },
-    closeButton: {
-      borderRadius: "50%",
-      width: "25px",
-      height: "25px",
-      size: "10px"
-    }
   })
-};
-var modalTheme = defineMultiStyleConfig({
-  variants,
+});
+var getModalTheme = (darkMode) => defineMultiStyleConfig({
+  variants: getModalVariants(darkMode),
   defaultProps: {
     variant: "vechainKitBase"
   }
 });
 var { definePartsStyle: definePartsStyle2, defineMultiStyleConfig: defineMultiStyleConfig2 } = react.createMultiStyleConfigHelpers(anatomy.cardAnatomy.keys);
-var variants2 = {
-  vechainKitBase: (props) => definePartsStyle2({
+var getCardVariants = (darkMode) => ({
+  vechainKitBase: definePartsStyle2({
     container: {
-      backgroundColor: props.colorMode === "dark" ? "#1c1c1b" : "#f5f5f5",
+      backgroundColor: darkMode ? "#1c1c1b" : "#f5f5f5",
       borderRadius: "14px",
       width: "full",
       border: "none"
@@ -22168,23 +22144,23 @@ var variants2 = {
       borderRadius: "0 0 14px 14px"
     }
   }),
-  featureAnnouncement: (props) => definePartsStyle2({
+  featureAnnouncement: definePartsStyle2({
     body: {
-      backgroundColor: props.colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
+      backgroundColor: darkMode ? "#ffffff0a" : "blackAlpha.50",
       borderRadius: "12px",
-      color: props.colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
+      color: darkMode ? "#ffffff12" : "blackAlpha.200"
     },
     container: {
       borderRadius: "12px",
       backgroundColor: "transparent"
     }
   }),
-  vechainKitAppCard: (props) => definePartsStyle2({
+  vechainKitAppCard: definePartsStyle2({
     body: {
       height: "full",
       borderRadius: "12px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white",
-      border: props.colorMode === "dark" ? "1px solid #2d2d2d" : "1px solid #eaeaea"
+      backgroundColor: darkMode ? "#1f1f1e" : "white",
+      border: darkMode ? "1px solid #2d2d2d" : "1px solid #eaeaea"
     },
     container: {
       height: "150px",
@@ -22192,9 +22168,9 @@ var variants2 = {
       backgroundColor: "transparent"
     }
   })
-};
-var cardTheme = defineMultiStyleConfig2({
-  variants: variants2,
+});
+var getCardTheme = (darkMode) => defineMultiStyleConfig2({
+  variants: getCardVariants(darkMode),
   defaultProps: {
     variant: "vechainKitBase"
     // default is solid
@@ -22203,7 +22179,7 @@ var cardTheme = defineMultiStyleConfig2({
 var baseStyle = react.defineStyle({
   borderRadius: "12px"
 });
-var variants3 = {
+var variants = {
   loginIn: react.defineStyle(() => ({
     bg: "white",
     color: "#1a1a1a",
@@ -22339,18 +22315,18 @@ var variants3 = {
 };
 var buttonTheme = react.defineStyleConfig({
   baseStyle,
-  variants: variants3
+  variants
 });
 var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = react.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
-var variants4 = {
-  vechainKitBase: (props) => definePartsStyle3({
+var getPopoverVariants = (darkMode) => ({
+  vechainKitBase: definePartsStyle3({
     popper: {
       zIndex: 1e3
     },
     content: {
       borderRadius: "24px",
       border: "none",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white",
+      backgroundColor: darkMode ? "#1f1f1e" : "white",
       boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.12)",
       minWidth: "380px"
     },
@@ -22358,28 +22334,28 @@ var variants4 = {
       padding: "16px"
     }
   })
-};
-var popoverTheme = defineMultiStyleConfig3({
-  variants: variants4,
+});
+var getPopoverTheme = (darkMode) => defineMultiStyleConfig3({
+  variants: getPopoverVariants(darkMode),
   defaultProps: {
     variant: "vechainKitBase"
   }
 });
 
 // src/theme/theme.tsx
-var themeConfig = {
+var getThemeConfig = (darkMode) => ({
   useSystemColorMode: false,
   disableTransitionOnChange: false,
   // @ts-ignore
   components: {
-    Modal: modalTheme,
-    Card: cardTheme,
+    Modal: getModalTheme(darkMode),
+    Card: getCardTheme(darkMode),
     Button: buttonTheme,
-    Popover: popoverTheme
+    Popover: getPopoverTheme(darkMode)
   },
   cssVarPrefix: "vechainKit"
-};
-var VechainKitTheme = react.extendTheme(themeConfig);
+});
+var getVechainKitTheme = (darkMode) => react.extendTheme(getThemeConfig(darkMode));
 var { ToastContainer } = react.createStandaloneToast();
 var EnsureChakraProvider = ({
   children,
@@ -22416,9 +22392,9 @@ var VechainKitThemeProvider = ({
 }) => {
   const theme = React10.useMemo(
     () => ({
-      ...VechainKitTheme,
+      ...getVechainKitTheme(darkMode),
       config: {
-        ...VechainKitTheme.config,
+        ...getVechainKitTheme(darkMode).config,
         initialColorMode: darkMode ? "dark" : "light"
       }
     }),