@iota/dapp-kit 0.1.1 → 0.2.0

package/dist/cjs/themes/darkTheme.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeVars } from './themeContract.js';
+export declare const darkTheme: ThemeVars;

package/dist/cjs/themes/darkTheme.js

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/themes/darkTheme.ts
+var darkTheme_exports = {};
+__export(darkTheme_exports, {
+  darkTheme: () => darkTheme
+});
+module.exports = __toCommonJS(darkTheme_exports);
+var darkTheme = {
+  blurs: {
+    modalOverlay: "blur(12px)"
+  },
+  backgroundColors: {
+    primaryButton: "#253041",
+    primaryButtonHover: "#313D50",
+    outlineButtonHover: "#313D50",
+    modalOverlay: "rgba(0, 47, 109, 0.72)",
+    modalPrimary: "#0f141c",
+    modalSecondary: "#171d26",
+    iconButton: "transparent",
+    dropdownMenu: "#0f141c",
+    dropdownMenuSeparator: "#bed8ff14",
+    walletItemSelected: "#171D26",
+    walletItemHover: "rgba(190, 216, 255, 0.12)",
+    scrollThumb: "#3c4656"
+  },
+  borderColors: {
+    outlineButton: "#8892A1"
+  },
+  colors: {
+    primaryButton: "#E3EAF6",
+    outlineButtonHover: "#171D26",
+    iconButton: "#E3EAF6",
+    body: "#E3EAF6",
+    bodyMuted: "#8892A1",
+    bodyDanger: "#FFB0BE"
+  },
+  radii: {
+    small: "6px",
+    medium: "8px",
+    large: "12px",
+    xlarge: "16px",
+    full: "120px"
+  },
+  fontWeights: {
+    normal: "400",
+    medium: "500",
+    bold: "600"
+  },
+  fontSizes: {
+    small: "14px",
+    medium: "16px",
+    large: "18px",
+    xlarge: "20px"
+  },
+  typography: {
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    fontStyle: "normal",
+    lineHeight: "24px",
+    letterSpacing: "0.1px"
+  },
+  spacing: {
+    xxsmall: "4px",
+    xsmall: "8px",
+    small: "12px",
+    medium: "16px",
+    large: "24px",
+    xlarge: "32px"
+  }
+};
+//# sourceMappingURL=darkTheme.js.map

package/dist/cjs/themes/darkTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/themes/darkTheme.ts"],
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ThemeVars } from './themeContract.js';\n\nexport const darkTheme: ThemeVars = {\n    blurs: {\n        modalOverlay: 'blur(12px)',\n    },\n    backgroundColors: {\n        primaryButton: '#253041',\n        primaryButtonHover: '#313D50',\n        outlineButtonHover: '#313D50',\n        modalOverlay: 'rgba(0, 47, 109, 0.72)',\n        modalPrimary: '#0f141c',\n        modalSecondary: '#171d26',\n        iconButton: 'transparent',\n        dropdownMenu: '#0f141c',\n        dropdownMenuSeparator: '#bed8ff14',\n        walletItemSelected: '#171D26',\n        walletItemHover: 'rgba(190, 216, 255, 0.12)',\n        scrollThumb: '#3c4656',\n    },\n    borderColors: {\n        outlineButton: '#8892A1',\n    },\n    colors: {\n        primaryButton: '#E3EAF6',\n        outlineButtonHover: '#171D26',\n        iconButton: '#E3EAF6',\n        body: '#E3EAF6',\n        bodyMuted: '#8892A1',\n        bodyDanger: '#FFB0BE',\n    },\n    radii: {\n        small: '6px',\n        medium: '8px',\n        large: '12px',\n        xlarge: '16px',\n        full: '120px',\n    },\n    fontWeights: {\n        normal: '400',\n        medium: '500',\n        bold: '600',\n    },\n    fontSizes: {\n        small: '14px',\n        medium: '16px',\n        large: '18px',\n        xlarge: '20px',\n    },\n    typography: {\n        fontFamily:\n            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n        fontStyle: 'normal',\n        lineHeight: '24px',\n        letterSpacing: '0.1px',\n    },\n    spacing: {\n        xxsmall: '4px',\n        xsmall: '8px',\n        small: '12px',\n        medium: '16px',\n        large: '24px',\n        xlarge: '32px',\n    },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMO,IAAM,YAAuB;AAAA,EAChC,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YACI;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AACJ;",
+  "names": []
+}

package/dist/cjs/themes/lightTheme.js

@@ -25,42 +25,39 @@ __export(lightTheme_exports, {
 module.exports = __toCommonJS(lightTheme_exports);
 var lightTheme = {
   blurs: {
-    modalOverlay: "blur(0)"
+    modalOverlay: "blur(12px)"
   },
   backgroundColors: {
-    primaryButton: "#F6F7F9",
-    primaryButtonHover: "#F0F2F5",
-    outlineButtonHover: "#F4F4F5",
-    modalOverlay: "rgba(24 36 53 / 20%)",
-    modalPrimary: "white",
-    modalSecondary: "#F7F8F8",
+    primaryButton: "#DDE4F0",
+    primaryButtonHover: "#002F6D14",
+    outlineButtonHover: "#002F6D14",
+    modalOverlay: "rgba(0, 47, 109, 0.72)",
+    modalPrimary: "#ffffff",
+    modalSecondary: "#e3eaf6",
     iconButton: "transparent",
-    iconButtonHover: "#F0F1F2",
     dropdownMenu: "#FFFFFF",
-    dropdownMenuSeparator: "#F3F6F8",
-    walletItemSelected: "white",
-    walletItemHover: "#3C424226"
+    dropdownMenuSeparator: "#002f6d14",
+    walletItemSelected: "#EFF4FA",
+    walletItemHover: "rgba(0, 103, 238, 0.12)",
+    scrollThumb: "#cad4e2"
   },
   borderColors: {
-    outlineButton: "#E4E4E7"
+    outlineButton: "#6E7787"
   },
   colors: {
-    primaryButton: "#373737",
-    outlineButton: "#373737",
-    iconButton: "#000000",
-    body: "#182435",
-    bodyMuted: "#767A81",
-    bodyDanger: "#FF794B"
+    primaryButton: "#171D26",
+    outlineButtonHover: "#E3EAF6",
+    iconButton: "#171D26",
+    body: "#171D26",
+    bodyMuted: "#545E6E",
+    bodyDanger: "#B51431"
   },
   radii: {
     small: "6px",
     medium: "8px",
     large: "12px",
-    xlarge: "16px"
-  },
-  shadows: {
-    primaryButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-    walletItemSelected: "0px 2px 6px rgba(0, 0, 0, 0.05)"
+    xlarge: "16px",
+    full: "120px"
   },
   fontWeights: {
     normal: "400",
@@ -76,8 +73,16 @@ var lightTheme = {
   typography: {
     fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
     fontStyle: "normal",
-    lineHeight: "1.3",
-    letterSpacing: "1"
+    lineHeight: "24px",
+    letterSpacing: "0.1px"
+  },
+  spacing: {
+    xxsmall: "4px",
+    xsmall: "8px",
+    small: "12px",
+    medium: "16px",
+    large: "24px",
+    xlarge: "32px"
   }
 };
 //# sourceMappingURL=lightTheme.js.map

package/dist/cjs/themes/lightTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/themes/lightTheme.ts"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ThemeVars } from './themeContract.js';\n\nexport const lightTheme: ThemeVars = {\n    blurs: {\n        modalOverlay: 'blur(0)',\n    },\n    backgroundColors: {\n        primaryButton: '#F6F7F9',\n        primaryButtonHover: '#F0F2F5',\n        outlineButtonHover: '#F4F4F5',\n        modalOverlay: 'rgba(24 36 53 / 20%)',\n        modalPrimary: 'white',\n        modalSecondary: '#F7F8F8',\n        iconButton: 'transparent',\n        iconButtonHover: '#F0F1F2',\n        dropdownMenu: '#FFFFFF',\n        dropdownMenuSeparator: '#F3F6F8',\n        walletItemSelected: 'white',\n        walletItemHover: '#3C424226',\n    },\n    borderColors: {\n        outlineButton: '#E4E4E7',\n    },\n    colors: {\n        primaryButton: '#373737',\n        outlineButton: '#373737',\n        iconButton: '#000000',\n        body: '#182435',\n        bodyMuted: '#767A81',\n        bodyDanger: '#FF794B',\n    },\n    radii: {\n        small: '6px',\n        medium: '8px',\n        large: '12px',\n        xlarge: '16px',\n    },\n    shadows: {\n        primaryButton: '0px 4px 12px rgba(0, 0, 0, 0.1)',\n        walletItemSelected: '0px 2px 6px rgba(0, 0, 0, 0.05)',\n    },\n    fontWeights: {\n        normal: '400',\n        medium: '500',\n        bold: '600',\n    },\n    fontSizes: {\n        small: '14px',\n        medium: '16px',\n        large: '18px',\n        xlarge: '20px',\n    },\n    typography: {\n        fontFamily:\n            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n        fontStyle: 'normal',\n        lineHeight: '1.3',\n        letterSpacing: '1',\n    },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMO,IAAM,aAAwB;AAAA,EACjC,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,EACrB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACL,eAAe;AAAA,IACf,oBAAoB;AAAA,EACxB;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YACI;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AACJ;",
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ThemeVars } from './themeContract.js';\n\nexport const lightTheme: ThemeVars = {\n    blurs: {\n        modalOverlay: 'blur(12px)',\n    },\n    backgroundColors: {\n        primaryButton: '#DDE4F0',\n        primaryButtonHover: '#002F6D14',\n        outlineButtonHover: '#002F6D14',\n        modalOverlay: 'rgba(0, 47, 109, 0.72)',\n        modalPrimary: '#ffffff',\n        modalSecondary: '#e3eaf6',\n        iconButton: 'transparent',\n        dropdownMenu: '#FFFFFF',\n        dropdownMenuSeparator: '#002f6d14',\n        walletItemSelected: '#EFF4FA',\n        walletItemHover: 'rgba(0, 103, 238, 0.12)',\n        scrollThumb: '#cad4e2',\n    },\n    borderColors: {\n        outlineButton: '#6E7787',\n    },\n    colors: {\n        primaryButton: '#171D26',\n        outlineButtonHover: '#E3EAF6',\n        iconButton: '#171D26',\n        body: '#171D26',\n        bodyMuted: '#545E6E',\n        bodyDanger: '#B51431',\n    },\n    radii: {\n        small: '6px',\n        medium: '8px',\n        large: '12px',\n        xlarge: '16px',\n        full: '120px',\n    },\n    fontWeights: {\n        normal: '400',\n        medium: '500',\n        bold: '600',\n    },\n    fontSizes: {\n        small: '14px',\n        medium: '16px',\n        large: '18px',\n        xlarge: '20px',\n    },\n    typography: {\n        fontFamily:\n            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n        fontStyle: 'normal',\n        lineHeight: '24px',\n        letterSpacing: '0.1px',\n    },\n    spacing: {\n        xxsmall: '4px',\n        xsmall: '8px',\n        small: '12px',\n        medium: '16px',\n        large: '24px',\n        xlarge: '32px',\n    },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMO,IAAM,aAAwB;AAAA,EACjC,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YACI;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AACJ;",
   "names": []
 }

package/dist/cjs/themes/themeContract.d.ts

@@ -12,16 +12,16 @@ declare const themeContractValues: {
         modalPrimary: string;
         modalSecondary: string;
         iconButton: string;
-        iconButtonHover: string;
         dropdownMenu: string;
         dropdownMenuSeparator: string;
+        scrollThumb: string;
     };
     borderColors: {
         outlineButton: string;
     };
     colors: {
         primaryButton: string;
-        outlineButton: string;
+        outlineButtonHover: string;
         body: string;
         bodyMuted: string;
         bodyDanger: string;
@@ -32,10 +32,7 @@ declare const themeContractValues: {
         medium: string;
         large: string;
         xlarge: string;
-    };
-    shadows: {
-        primaryButton: string;
-        walletItemSelected: string;
+        full: string;
     };
     fontWeights: {
         normal: string;
@@ -54,6 +51,14 @@ declare const themeContractValues: {
         lineHeight: string;
         letterSpacing: string;
     };
+    spacing: {
+        xxsmall: string;
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
 };
 export type ThemeVars = typeof themeContractValues;
 /**
@@ -94,16 +99,16 @@ export declare const themeVars: {
         modalPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         modalSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         iconButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        iconButtonHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dropdownMenu: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dropdownMenuSeparator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        scrollThumb: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     borderColors: {
         outlineButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     colors: {
         primaryButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        outlineButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        outlineButtonHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         bodyMuted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         bodyDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -114,10 +119,7 @@ export declare const themeVars: {
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    shadows: {
-        primaryButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        walletItemSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontWeights: {
         normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -136,5 +138,13 @@ export declare const themeVars: {
         lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    spacing: {
+        xxsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };
 export {};

package/dist/cjs/themes/themeContract.js

@@ -38,16 +38,16 @@ var themeContractValues = {
     modalPrimary: "",
     modalSecondary: "",
     iconButton: "",
-    iconButtonHover: "",
     dropdownMenu: "",
-    dropdownMenuSeparator: ""
+    dropdownMenuSeparator: "",
+    scrollThumb: ""
   },
   borderColors: {
     outlineButton: ""
   },
   colors: {
     primaryButton: "",
-    outlineButton: "",
+    outlineButtonHover: "",
     body: "",
     bodyMuted: "",
     bodyDanger: "",
@@ -57,11 +57,8 @@ var themeContractValues = {
     small: "",
     medium: "",
     large: "",
-    xlarge: ""
-  },
-  shadows: {
-    primaryButton: "",
-    walletItemSelected: ""
+    xlarge: "",
+    full: ""
   },
   fontWeights: {
     normal: "",
@@ -79,6 +76,14 @@ var themeContractValues = {
     fontStyle: "",
     lineHeight: "",
     letterSpacing: ""
+  },
+  spacing: {
+    xxsmall: "",
+    xsmall: "",
+    small: "",
+    medium: "",
+    large: "",
+    xlarge: ""
   }
 };
 var themeVars = (0, import_css.createGlobalThemeContract)(

package/dist/cjs/themes/themeContract.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/themes/themeContract.ts"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createGlobalThemeContract } from '@vanilla-extract/css';\n\nconst themeContractValues = {\n    blurs: {\n        modalOverlay: '',\n    },\n    backgroundColors: {\n        primaryButton: '',\n        primaryButtonHover: '',\n        outlineButtonHover: '',\n        walletItemHover: '',\n        walletItemSelected: '',\n        modalOverlay: '',\n        modalPrimary: '',\n        modalSecondary: '',\n        iconButton: '',\n        iconButtonHover: '',\n        dropdownMenu: '',\n        dropdownMenuSeparator: '',\n    },\n    borderColors: {\n        outlineButton: '',\n    },\n    colors: {\n        primaryButton: '',\n        outlineButton: '',\n        body: '',\n        bodyMuted: '',\n        bodyDanger: '',\n        iconButton: '',\n    },\n    radii: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n    shadows: {\n        primaryButton: '',\n        walletItemSelected: '',\n    },\n    fontWeights: {\n        normal: '',\n        medium: '',\n        bold: '',\n    },\n    fontSizes: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n    typography: {\n        fontFamily: '',\n        fontStyle: '',\n        lineHeight: '',\n        letterSpacing: '',\n    },\n};\n\nexport type ThemeVars = typeof themeContractValues;\n\n/**\n * A custom theme that is enabled when various conditions are\n */\nexport type DynamicTheme = {\n    /**\n     * An optional media query required for the given theme to be enabled. This is useful\n     * when you want the theme of your application to automatically switch depending on\n     * a media feature.\n     *\n     * @example '(prefers-color-scheme: dark)'\n     */\n    mediaQuery?: string;\n\n    /**\n     * An optional CSS selector required for the given theme to be enabled. This is useful\n     * when you have a manual theme switcher on your application that sets a top-level\n     * class name or data-attribute to control the current theme.\n     *\n     * @example '.data-dark'\n     */\n    selector?: string;\n\n    /** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */\n    variables: ThemeVars;\n};\n\nexport type Theme = ThemeVars | DynamicTheme[];\n\nexport const themeVars = createGlobalThemeContract(\n    themeContractValues,\n    (_, path) => `dapp-kit-${path.join('-')}`,\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,iBAA0C;AAE1C,IAAM,sBAAsB;AAAA,EACxB,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,uBAAuB;AAAA,EAC3B;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACL,eAAe;AAAA,IACf,oBAAoB;AAAA,EACxB;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AACJ;AAgCO,IAAM,gBAAY;AAAA,EACrB;AAAA,EACA,CAAC,GAAG,SAAS,YAAY,KAAK,KAAK,GAAG;AAC1C;",
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createGlobalThemeContract } from '@vanilla-extract/css';\n\nconst themeContractValues = {\n    blurs: {\n        modalOverlay: '',\n    },\n    backgroundColors: {\n        primaryButton: '',\n        primaryButtonHover: '',\n        outlineButtonHover: '',\n        walletItemHover: '',\n        walletItemSelected: '',\n        modalOverlay: '',\n        modalPrimary: '',\n        modalSecondary: '',\n        iconButton: '',\n        dropdownMenu: '',\n        dropdownMenuSeparator: '',\n        scrollThumb: '',\n    },\n    borderColors: {\n        outlineButton: '',\n    },\n    colors: {\n        primaryButton: '',\n        outlineButtonHover: '',\n        body: '',\n        bodyMuted: '',\n        bodyDanger: '',\n        iconButton: '',\n    },\n    radii: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n        full: '',\n    },\n    fontWeights: {\n        normal: '',\n        medium: '',\n        bold: '',\n    },\n    fontSizes: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n    typography: {\n        fontFamily: '',\n        fontStyle: '',\n        lineHeight: '',\n        letterSpacing: '',\n    },\n    spacing: {\n        xxsmall: '',\n        xsmall: '',\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n};\n\nexport type ThemeVars = typeof themeContractValues;\n\n/**\n * A custom theme that is enabled when various conditions are\n */\nexport type DynamicTheme = {\n    /**\n     * An optional media query required for the given theme to be enabled. This is useful\n     * when you want the theme of your application to automatically switch depending on\n     * a media feature.\n     *\n     * @example '(prefers-color-scheme: dark)'\n     */\n    mediaQuery?: string;\n\n    /**\n     * An optional CSS selector required for the given theme to be enabled. This is useful\n     * when you have a manual theme switcher on your application that sets a top-level\n     * class name or data-attribute to control the current theme.\n     *\n     * @example '.data-dark'\n     */\n    selector?: string;\n\n    /** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */\n    variables: ThemeVars;\n};\n\nexport type Theme = ThemeVars | DynamicTheme[];\n\nexport const themeVars = createGlobalThemeContract(\n    themeContractValues,\n    (_, path) => `dapp-kit-${path.join('-')}`,\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,iBAA0C;AAE1C,IAAM,sBAAsB;AAAA,EACxB,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,aAAa;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AACJ;AAgCO,IAAM,gBAAY;AAAA,EACrB;AAAA,EACA,CAAC,GAAG,SAAS,YAAY,KAAK,KAAK,GAAG;AAC1C;",
   "names": []
 }

package/dist/esm/components/AccountDropdownMenu.css

@@ -1,53 +1,62 @@
-/* vanilla-extract-css-ns:src/components/AccountDropdownMenu.css.ts.vanilla.css?source=#H4sIAAAAAAAAA6VTPW8UMRDt71dMSQpHeyFIwalCaChSUSJ0cuw57+S8Y8sec3sg/jta576U5AIRbiy9+Xrz/Hx+Y22sLJ9zTC6u+Q65LmxkRivotsHFYj52fkjLDn7NALxJGq7SeD37PTt/qX5ArreRxRBj3hfPW/FPRexw1PBxd/7aBo8YXLQmjkoKZqNhGXC8nkG7laOMViiyBhtDHXiKrMlJr2F+1aWWOZhR9Ui+Fw0X3R7MnlhJTBouH6FknCP220WPlwa4j9lhVtk4qkXDD5PfKeVMSmpF0mBSwWSPZy3b2JXPsbJTNoaYnxUcEm6neFHuSIWzV+X5IjjstXnftHlKvBbMqmBAKxo4Mk5grBKI8QA8U9QE8qxIcCgaLLJgfuvq/8z7mzNiVE++D9PDoPveNnm7cCnTYPLmUxWJfJpBWZPYfhu5e0rn8mWLPdQitNwo++hIDSUZi+oeZY3IJyU7RQGTyUbi4Xt8aGN31pyng69Ln4lXGrr/d9PX3dhJnD+CRQwU/AMAAA== */
+/* vanilla-extract-css-ns:src/components/AccountDropdownMenu.css.ts.vanilla.css?source=#H4sIAAAAAAAAA6VUPW/bMBDd/Ss4tgMDOf1Ay0xtOqRDJg8dDZo8S1eLR4I8xpaL/vdClL8Q2YmDahFw9959vEfy5psxPhP/iD5Yv6ZHoDw3nggMg90l5/PppqpdWFbiz0SIWgclnnR8J6XVIcgVskxBG6RabpLTbfv+bvJ3cnOutAPK955YI0E81J2WuluJZGGjxNf9d7EMGk8H9m1hG9/6OJqrRJNceNu9PhScrPqhFLWYQqs7JZYtbO4movylxQiG0ZPqu2ZHfWaNlhslpl+qUJBOb2QDWDesxG11CMYaSbK/QsFXhD7BLXy0EGXUFnMaMfowylbHGga0Nqs6+kxWntfsCLgf1LMnYpUSQVuLVF8x3AuK/2RwB7k/FrlzgigTtGBYCfIEfTOfuUWCY2Bkim6xJokMLilhgBjitbI4sJhdWWrpiWXCLYygfWaGW0gj+Hpn8BnCr5JKknx0evCpBeZ+wUGlEYu74OuoQ9PJATkbgAMXCQ7n6QUiEjwU1FVGvdkm1fgniMWst5+jENHp2H3PzJ4e+kJlSJNj6unB42DdhWnSGtk0u8zj89E+nb+wv3NiXHbSDPdbiX51kAvgNQBdPD2XRoCgo2Z/fLo+l7Z7Y6bh+EqkJiKtlKj+/9LN9m17q/4BQ/VQ4bMFAAA= */
 [data-dapp-kit].AccountDropdownMenu_connectedAccount__1x0gmpf0,
 [data-dapp-kit] .AccountDropdownMenu_connectedAccount__1x0gmpf0 {
-  gap: 8px;
+  gap: var(--dapp-kit-spacing-xsmall);
 }
 [data-dapp-kit].AccountDropdownMenu_menuContainer__1x0gmpf1,
 [data-dapp-kit] .AccountDropdownMenu_menuContainer__1x0gmpf1 {
   z-index: 999999999;
 }
-[data-dapp-kit].AccountDropdownMenu_menuContent__1x0gmpf2,
-[data-dapp-kit] .AccountDropdownMenu_menuContent__1x0gmpf2 {
+[data-dapp-kit].AccountDropdownMenu_icon__1x0gmpf2,
+[data-dapp-kit] .AccountDropdownMenu_icon__1x0gmpf2 {
+  color: var(--dapp-kit-colors-body);
+}
+[data-dapp-kit].AccountDropdownMenu_menuContent__1x0gmpf3,
+[data-dapp-kit] .AccountDropdownMenu_menuContent__1x0gmpf3 {
   display: flex;
   flex-direction: column;
   width: 180px;
   max-height: 200px;
-  margin-top: 4px;
-  padding: 8px;
-  gap: 8px;
+  margin-top: var(--dapp-kit-spacing-xsmall);
+  gap: var(--dapp-kit-spacing-xxsmall);
   border-radius: var(--dapp-kit-radii-large);
   background-color: var(--dapp-kit-backgroundColors-dropdownMenu);
+  padding: var(--dapp-kit-spacing-xxsmall);
 }
-[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf3,
-[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf3 {
-  padding: 8px;
+[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf4,
+[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf4 {
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   outline: none;
   display: flex;
   align-items: center;
-  border-radius: var(--dapp-kit-radii-large);
+  border-radius: var(--dapp-kit-radii-medium);
+  font-size: var(--dapp-kit-fontSizes-medium);
+  font-weight: var(--dapp-kit-fontWeights-normal);
+  letter-spacing: var(--dapp-kit-typography-letterSpacing);
+  line-height: var(--dapp-kit-typography-lineHeight);
+  padding: var(--dapp-kit-spacing-small);
 }
-[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf3[data-highlighted],
-[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf3[data-highlighted] {
-  background-color: var(--dapp-kit-backgroundColors-primaryButton);
+[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf4:hover,
+[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf4:hover {
+  background-color: var(--dapp-kit-backgroundColors-primaryButtonHover);
+  cursor: pointer;
 }
-[data-dapp-kit].AccountDropdownMenu_switchAccountMenuItem__1x0gmpf4,
-[data-dapp-kit] .AccountDropdownMenu_switchAccountMenuItem__1x0gmpf4 {
+[data-dapp-kit].AccountDropdownMenu_switchAccountMenuItem__1x0gmpf5,
+[data-dapp-kit] .AccountDropdownMenu_switchAccountMenuItem__1x0gmpf5 {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-[data-dapp-kit].AccountDropdownMenu_separator__1x0gmpf5,
-[data-dapp-kit] .AccountDropdownMenu_separator__1x0gmpf5 {
+[data-dapp-kit].AccountDropdownMenu_separator__1x0gmpf6,
+[data-dapp-kit] .AccountDropdownMenu_separator__1x0gmpf6 {
   height: 1px;
   flex-shrink: 0;
   background-color: var(--dapp-kit-backgroundColors-dropdownMenuSeparator);
 }
 
-/* vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=OndoZXJlKCopIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGNvbG9yOiB2YXIoLS1kYXBwLWtpdC1jb2xvcnMtYm9keSk7CiAgZm9udC1mYW1pbHk6IHZhcigtLWRhcHAta2l0LXR5cG9ncmFwaHktZm9udEZhbWlseSk7CiAgZm9udC1zaXplOiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1ub3JtYWwpOwogIGZvbnQtc3R5bGU6IHZhcigtLWRhcHAta2l0LXR5cG9ncmFwaHktZm9udFN0eWxlKTsKICBmb250LXdlaWdodDogdmFyKC0tZGFwcC1raXQtZm9udFdlaWdodHMtbm9ybWFsKTsKICBsaW5lLWhlaWdodDogdmFyKC0tZGFwcC1raXQtdHlwb2dyYXBoeS1saW5lSGVpZ2h0KTsKICBsZXR0ZXItc3BhY2luZzogdmFyKC0tZGFwcC1raXQtdHlwb2dyYXBoeS1sZXR0ZXJTcGFjaW5nKTsKfQo6d2hlcmUoYnV0dG9uKSB7CiAgYXBwZWFyYW5jZTogbm9uZTsKICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBmb250LXNpemU6IGluaGVyaXQ7CiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7CiAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7CiAgbGV0dGVyLXNwYWNpbmc6IGluaGVyaXQ7CiAgY29sb3I6IGluaGVyaXQ7CiAgYm9yZGVyOiAwOwogIHBhZGRpbmc6IDA7CiAgbWFyZ2luOiAwOwp9Cjp3aGVyZShhKSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7Cn0KOndoZXJlKG9sLCB1bCkgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7Cn0KOndoZXJlKGgxLCBoMiwgaDMsIGg0LCBoNSwgaDYpIHsKICBmb250LXNpemU6IGluaGVyaXQ7CiAgZm9udC13ZWlnaHQ6IGluaGVyaXQ7CiAgbWFyZ2luOiAwOwp9 */
+/* vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=#H4sIAAAAAAAAA51US4/TMBC+91fMcYtiqYXCIT0iIe6LxHkSe2Orrm2NJyRZxH9HtrttmrAL4hLJ4+8xL6cetCL18G4LPzcAjR9FNM/GdTU0nqQi0fjxuAFovfVUww+kByEkhiBOhkWORtF4OW0T6sk7Fk94NnZaYXkKviMMehIJ9iWjbqxontWKk26+K9NpjsJ5OqOdEXiya8bC5TGBbpwha/2rjTVOCf1nyswnwb5mVGEpZkUiBmxzH98gZuRjAW6Pm1+bukyj6Zm9KyPBEBQSulbV4LxTyaLB9tSR750Ul7kwoYsBSTledNQ4rcjwajqz+F2d8/iiktnVxXYWKetSwy4dAkqZKfl0RuqMy4driViqYzWykKr1hGy8u5W4NvA9p0RfIFclbyvobZGzJl4X40Vp5n6f2FVB7yvQ7yvQHyrQhwr0xwr0p6L4RieHdcfuK63FoJo089iSt7ZBypKDkaxr2B/C+ApMMGF7urzI/AoJpenjaplS2IjRInVly/+yGa+46f7c3N6/RumHVFZUDDvYwX4XxvJZ2N/cPpcfQdH8lvS2x//I/rJDhzBC9NbIRfa/AfAolD6tBAAA */
 [data-dapp-kit]:where(*),
 [data-dapp-kit] :where(*) {
   box-sizing: border-box;
@@ -92,8 +101,23 @@
   font-weight: inherit;
   margin: 0;
 }
+[data-dapp-kit]::-webkit-scrollbar,
+[data-dapp-kit] ::-webkit-scrollbar {
+  width: 14px;
+}
+[data-dapp-kit]::-webkit-scrollbar-track,
+[data-dapp-kit] ::-webkit-scrollbar-track {
+  border-radius: var(--dapp-kit-radii-xlarge);
+  background-color: transparent;
+}
+[data-dapp-kit]::-webkit-scrollbar-thumb,
+[data-dapp-kit] ::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 10px 10px var(--dapp-kit-backgroundColors-scrollThumb);
+  border-radius: var(--dapp-kit-radii-xlarge);
+  border: 4px solid transparent;
+}
 
-/* vanilla-extract-css-ns:src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62TwVLCMBCG732KPcohjCA6TnrTi0+gx07ahLKSJplkC60O7+6k0AGsIIyemtl/d79/N+n4qSayJsu7z6vwKAyFLCsob6bmFj4TAInBadFyQKPRKDbXqkkTAKGxNAxJVYFDoQwpH8PvdSCct6ywhpShQ2luDbG1wnJBHFbC3zAmhXNsicSi9tZJgVVKYl2N0mSTjM8b5BKDyLWSnVPrRIHUcrgd358pXm0PmfNYCd/2zSZdj1wUy9Lb2khWWG39wOg+4Tnqge3abFmjOOfPhcWp9Nw2LCyEtOtBzTY8LLp6Nr6wK+X/Y8KX2OgSC7am+F56C9Mt3HqpPFujpAWHiWvSfTBQqxWHYDXKg/AJk524M7hDXXoF39OvHuVP2zyi/7rNgB8qq2SPvjvcohcS6zAgxjDufyIAJ6REU3J4dA1MHuLSz/N02fNmF/O08KU6xkUUTGeugTTZfAF+gloxawQAAA== */
+/* vanilla-extract-css-ns:src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7WSwVLCMBCG732KPcohDCA6TrjpxSfQYydt0rKQJplkC60O7+6ktCMKog56Smb/ZP9v/2R8XxNZk2bd8iQ8CkMhTXPKmpmZwGsCIDE4LVoOaDQaxQqtmkUCIDSWhiGpKnDIlSHlY3lVB8KiZbk1pAwdSoU1xLYKyyVx2Ah/xZgUzrE1EovacycFVimJdTVaJLtkfB6QSwwi00p2pNaJHKnlMBnfnLm82W9S57ESvh2aTbsemcjXpbe1kSy32voj0PcDD1EPrG+z9xrFOU9fzE8f/zUmX9qN8n8B+xgb/QTB1hSffkCY7c2tl8qzLUpacpi67lP0xUCtVhyC1SgPyl9AdmIP2Fv9W5qfR7kozQ+w36YZ8EWllRysrw9T9EJiHY4cYxlZUWvdReGElGhKDneugeltjPy8my4Ht/kFbtEJZnPXwCLZvQFzXfF3MwQAAA== */
 [data-dapp-kit].Button_buttonVariants__ctbx2n0,
 [data-dapp-kit] .Button_buttonVariants__ctbx2n0 {
   display: inline-flex;
@@ -109,7 +133,6 @@
 [data-dapp-kit] .Button_buttonVariants_variant_primary__ctbx2n1 {
   background-color: var(--dapp-kit-backgroundColors-primaryButton);
   color: var(--dapp-kit-colors-primaryButton);
-  box-shadow: var(--dapp-kit-shadows-primaryButton);
 }
 [data-dapp-kit].Button_buttonVariants_variant_primary__ctbx2n1:hover,
 [data-dapp-kit] .Button_buttonVariants_variant_primary__ctbx2n1:hover {
@@ -120,7 +143,7 @@
   border-width: 1px;
   border-style: solid;
   border-color: var(--dapp-kit-borderColors-outlineButton);
-  color: var(--dapp-kit-colors-outlineButton);
+  color: var(--dapp-kit-colors-primaryButton);
 }
 [data-dapp-kit].Button_buttonVariants_variant_outline__ctbx2n2:hover,
 [data-dapp-kit] .Button_buttonVariants_variant_outline__ctbx2n2:hover {
@@ -128,16 +151,16 @@
 }
 [data-dapp-kit].Button_buttonVariants_size_md__ctbx2n3,
 [data-dapp-kit] .Button_buttonVariants_size_md__ctbx2n3 {
-  border-radius: var(--dapp-kit-radii-medium);
+  border-radius: var(--dapp-kit-radii-full);
   padding: 8px 16px;
 }
 [data-dapp-kit].Button_buttonVariants_size_lg__ctbx2n4,
 [data-dapp-kit] .Button_buttonVariants_size_lg__ctbx2n4 {
-  border-radius: var(--dapp-kit-radii-large);
+  border-radius: var(--dapp-kit-radii-full);
   padding: 16px 24px;
 }
 
-/* vanilla-extract-css-ns:src/components/ui/Text.css.ts.vanilla.css?source=LlRleHRfdGV4dFZhcmlhbnRzX3NpemVfc21fX2FwcmhiZDEgewogIGZvbnQtc2l6ZTogdmFyKC0tZGFwcC1raXQtZm9udFNpemVzLXNtYWxsKTsKfQouVGV4dF90ZXh0VmFyaWFudHNfd2VpZ2h0X25vcm1hbF9fYXByaGJkMiB7CiAgZm9udC13ZWlnaHQ6IHZhcigtLWRhcHAta2l0LWZvbnRXZWlnaHRzLW5vcm1hbCk7Cn0KLlRleHRfdGV4dFZhcmlhbnRzX3dlaWdodF9tZWRpdW1fX2FwcmhiZDMgewogIGZvbnQtd2VpZ2h0OiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1tZWRpdW0pOwp9Ci5UZXh0X3RleHRWYXJpYW50c193ZWlnaHRfYm9sZF9fYXByaGJkNCB7CiAgZm9udC13ZWlnaHQ6IHZhcigtLWRhcHAta2l0LWZvbnRXZWlnaHRzLWJvbGQpOwp9Ci5UZXh0X3RleHRWYXJpYW50c19jb2xvcl9tdXRlZF9fYXByaGJkNSB7CiAgY29sb3I6IHZhcigtLWRhcHAta2l0LWNvbG9ycy1ib2R5TXV0ZWQpOwp9Ci5UZXh0X3RleHRWYXJpYW50c19jb2xvcl9kYW5nZXJfX2FwcmhiZDYgewogIGNvbG9yOiB2YXIoLS1kYXBwLWtpdC1jb2xvcnMtYm9keURhbmdlcik7Cn0KLlRleHRfdGV4dFZhcmlhbnRzX21vbm9fdHJ1ZV9fYXByaGJkNyB7CiAgZm9udC1mYW1pbHk6IHVpLW1vbm9zcGFjZSwgU0ZNb25vLVJlZ3VsYXIsIE1lbmxvLCBNb25hY28sIENvbnNvbGFzLCAiTGliZXJhdGlvbiBNb25vIiwgIkNvdXJpZXIgTmV3IiwgbW9ub3NwYWNlOwp9 */
+/* vanilla-extract-css-ns:src/components/ui/Text.css.ts.vanilla.css?source=LlRleHRfdGV4dFZhcmlhbnRzX3NpemVfc21fX2FwcmhiZDEgewogIGZvbnQtc2l6ZTogdmFyKC0tZGFwcC1raXQtZm9udFNpemVzLXNtYWxsKTsKfQouVGV4dF90ZXh0VmFyaWFudHNfd2VpZ2h0X25vcm1hbF9fYXByaGJkMiB7CiAgZm9udC13ZWlnaHQ6IHZhcigtLWRhcHAta2l0LWZvbnRXZWlnaHRzLW5vcm1hbCk7Cn0KLlRleHRfdGV4dFZhcmlhbnRzX3dlaWdodF9tZWRpdW1fX2FwcmhiZDMgewogIGZvbnQtd2VpZ2h0OiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1tZWRpdW0pOwp9Ci5UZXh0X3RleHRWYXJpYW50c193ZWlnaHRfYm9sZF9fYXByaGJkNCB7CiAgZm9udC13ZWlnaHQ6IHZhcigtLWRhcHAta2l0LWZvbnRXZWlnaHRzLWJvbGQpOwp9Ci5UZXh0X3RleHRWYXJpYW50c19jb2xvcl9ib2R5X19hcHJoYmQ1IHsKICBjb2xvcjogdmFyKC0tZGFwcC1raXQtY29sb3JzLWJvZHkpOwp9Ci5UZXh0X3RleHRWYXJpYW50c19jb2xvcl9tdXRlZF9fYXByaGJkNiB7CiAgY29sb3I6IHZhcigtLWRhcHAta2l0LWNvbG9ycy1ib2R5TXV0ZWQpOwp9Ci5UZXh0X3RleHRWYXJpYW50c19jb2xvcl9kYW5nZXJfX2FwcmhiZDcgewogIGNvbG9yOiB2YXIoLS1kYXBwLWtpdC1jb2xvcnMtYm9keURhbmdlcik7Cn0KLlRleHRfdGV4dFZhcmlhbnRzX21vbm9fdHJ1ZV9fYXByaGJkOCB7CiAgZm9udC1mYW1pbHk6IHVpLW1vbm9zcGFjZSwgU0ZNb25vLVJlZ3VsYXIsIE1lbmxvLCBNb25hY28sIENvbnNvbGFzLCAiTGliZXJhdGlvbiBNb25vIiwgIkNvdXJpZXIgTmV3IiwgbW9ub3NwYWNlOwp9 */
 [data-dapp-kit].Text_textVariants_size_sm__aprhbd1,
 [data-dapp-kit] .Text_textVariants_size_sm__aprhbd1 {
   font-size: var(--dapp-kit-fontSizes-small);
@@ -154,16 +177,20 @@
 [data-dapp-kit] .Text_textVariants_weight_bold__aprhbd4 {
   font-weight: var(--dapp-kit-fontWeights-bold);
 }
-[data-dapp-kit].Text_textVariants_color_muted__aprhbd5,
-[data-dapp-kit] .Text_textVariants_color_muted__aprhbd5 {
+[data-dapp-kit].Text_textVariants_color_body__aprhbd5,
+[data-dapp-kit] .Text_textVariants_color_body__aprhbd5 {
+  color: var(--dapp-kit-colors-body);
+}
+[data-dapp-kit].Text_textVariants_color_muted__aprhbd6,
+[data-dapp-kit] .Text_textVariants_color_muted__aprhbd6 {
   color: var(--dapp-kit-colors-bodyMuted);
 }
-[data-dapp-kit].Text_textVariants_color_danger__aprhbd6,
-[data-dapp-kit] .Text_textVariants_color_danger__aprhbd6 {
+[data-dapp-kit].Text_textVariants_color_danger__aprhbd7,
+[data-dapp-kit] .Text_textVariants_color_danger__aprhbd7 {
   color: var(--dapp-kit-colors-bodyDanger);
 }
-[data-dapp-kit].Text_textVariants_mono_true__aprhbd7,
-[data-dapp-kit] .Text_textVariants_mono_true__aprhbd7 {
+[data-dapp-kit].Text_textVariants_mono_true__aprhbd8,
+[data-dapp-kit] .Text_textVariants_mono_true__aprhbd8 {
   font-family:
     ui-monospace,
     SFMono-Regular,

package/dist/esm/components/AccountDropdownMenu.css.css

@@ -1,47 +1,56 @@
-/* vanilla-extract-css-ns:src/components/AccountDropdownMenu.css.ts.vanilla.css?source=#H4sIAAAAAAAAA6VTPW8UMRDt71dMSQpHeyFIwalCaChSUSJ0cuw57+S8Y8sec3sg/jta576U5AIRbiy9+Xrz/Hx+Y22sLJ9zTC6u+Q65LmxkRivotsHFYj52fkjLDn7NALxJGq7SeD37PTt/qX5ArreRxRBj3hfPW/FPRexw1PBxd/7aBo8YXLQmjkoKZqNhGXC8nkG7laOMViiyBhtDHXiKrMlJr2F+1aWWOZhR9Ui+Fw0X3R7MnlhJTBouH6FknCP220WPlwa4j9lhVtk4qkXDD5PfKeVMSmpF0mBSwWSPZy3b2JXPsbJTNoaYnxUcEm6neFHuSIWzV+X5IjjstXnftHlKvBbMqmBAKxo4Mk5grBKI8QA8U9QE8qxIcCgaLLJgfuvq/8z7mzNiVE++D9PDoPveNnm7cCnTYPLmUxWJfJpBWZPYfhu5e0rn8mWLPdQitNwo++hIDSUZi+oeZY3IJyU7RQGTyUbi4Xt8aGN31pyng69Ln4lXGrr/d9PX3dhJnD+CRQwU/AMAAA== */
+/* vanilla-extract-css-ns:src/components/AccountDropdownMenu.css.ts.vanilla.css?source=#H4sIAAAAAAAAA6VUPW/bMBDd/Ss4tgMDOf1Ay0xtOqRDJg8dDZo8S1eLR4I8xpaL/vdClL8Q2YmDahFw9959vEfy5psxPhP/iD5Yv6ZHoDw3nggMg90l5/PppqpdWFbiz0SIWgclnnR8J6XVIcgVskxBG6RabpLTbfv+bvJ3cnOutAPK955YI0E81J2WuluJZGGjxNf9d7EMGk8H9m1hG9/6OJqrRJNceNu9PhScrPqhFLWYQqs7JZYtbO4movylxQiG0ZPqu2ZHfWaNlhslpl+qUJBOb2QDWDesxG11CMYaSbK/QsFXhD7BLXy0EGXUFnMaMfowylbHGga0Nqs6+kxWntfsCLgf1LMnYpUSQVuLVF8x3AuK/2RwB7k/FrlzgigTtGBYCfIEfTOfuUWCY2Bkim6xJokMLilhgBjitbI4sJhdWWrpiWXCLYygfWaGW0gj+Hpn8BnCr5JKknx0evCpBeZ+wUGlEYu74OuoQ9PJATkbgAMXCQ7n6QUiEjwU1FVGvdkm1fgniMWst5+jENHp2H3PzJ4e+kJlSJNj6unB42DdhWnSGtk0u8zj89E+nb+wv3NiXHbSDPdbiX51kAvgNQBdPD2XRoCgo2Z/fLo+l7Z7Y6bh+EqkJiKtlKj+/9LN9m17q/4BQ/VQ4bMFAAA= */
 [data-dapp-kit].AccountDropdownMenu_connectedAccount__1x0gmpf0,
 [data-dapp-kit] .AccountDropdownMenu_connectedAccount__1x0gmpf0 {
-  gap: 8px;
+  gap: var(--dapp-kit-spacing-xsmall);
 }
 [data-dapp-kit].AccountDropdownMenu_menuContainer__1x0gmpf1,
 [data-dapp-kit] .AccountDropdownMenu_menuContainer__1x0gmpf1 {
   z-index: 999999999;
 }
-[data-dapp-kit].AccountDropdownMenu_menuContent__1x0gmpf2,
-[data-dapp-kit] .AccountDropdownMenu_menuContent__1x0gmpf2 {
+[data-dapp-kit].AccountDropdownMenu_icon__1x0gmpf2,
+[data-dapp-kit] .AccountDropdownMenu_icon__1x0gmpf2 {
+  color: var(--dapp-kit-colors-body);
+}
+[data-dapp-kit].AccountDropdownMenu_menuContent__1x0gmpf3,
+[data-dapp-kit] .AccountDropdownMenu_menuContent__1x0gmpf3 {
   display: flex;
   flex-direction: column;
   width: 180px;
   max-height: 200px;
-  margin-top: 4px;
-  padding: 8px;
-  gap: 8px;
+  margin-top: var(--dapp-kit-spacing-xsmall);
+  gap: var(--dapp-kit-spacing-xxsmall);
   border-radius: var(--dapp-kit-radii-large);
   background-color: var(--dapp-kit-backgroundColors-dropdownMenu);
+  padding: var(--dapp-kit-spacing-xxsmall);
 }
-[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf3,
-[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf3 {
-  padding: 8px;
+[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf4,
+[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf4 {
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   outline: none;
   display: flex;
   align-items: center;
-  border-radius: var(--dapp-kit-radii-large);
+  border-radius: var(--dapp-kit-radii-medium);
+  font-size: var(--dapp-kit-fontSizes-medium);
+  font-weight: var(--dapp-kit-fontWeights-normal);
+  letter-spacing: var(--dapp-kit-typography-letterSpacing);
+  line-height: var(--dapp-kit-typography-lineHeight);
+  padding: var(--dapp-kit-spacing-small);
 }
-[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf3[data-highlighted],
-[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf3[data-highlighted] {
-  background-color: var(--dapp-kit-backgroundColors-primaryButton);
+[data-dapp-kit].AccountDropdownMenu_menuItem__1x0gmpf4:hover,
+[data-dapp-kit] .AccountDropdownMenu_menuItem__1x0gmpf4:hover {
+  background-color: var(--dapp-kit-backgroundColors-primaryButtonHover);
+  cursor: pointer;
 }
-[data-dapp-kit].AccountDropdownMenu_switchAccountMenuItem__1x0gmpf4,
-[data-dapp-kit] .AccountDropdownMenu_switchAccountMenuItem__1x0gmpf4 {
+[data-dapp-kit].AccountDropdownMenu_switchAccountMenuItem__1x0gmpf5,
+[data-dapp-kit] .AccountDropdownMenu_switchAccountMenuItem__1x0gmpf5 {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-[data-dapp-kit].AccountDropdownMenu_separator__1x0gmpf5,
-[data-dapp-kit] .AccountDropdownMenu_separator__1x0gmpf5 {
+[data-dapp-kit].AccountDropdownMenu_separator__1x0gmpf6,
+[data-dapp-kit] .AccountDropdownMenu_separator__1x0gmpf6 {
   height: 1px;
   flex-shrink: 0;
   background-color: var(--dapp-kit-backgroundColors-dropdownMenuSeparator);