@calimero-network/mero-react 2.0.1 → 2.2.0

package/dist/index.js

@@ -4,7 +4,30 @@ export * from '@calimero-network/mero-js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
-// src/context/MeroContext.tsx
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/styles.css
+styleInject(':root {\n  --mero-bg: #0d1117;\n  --mero-bg-secondary: #161b22;\n  --mero-bg-tertiary: #1c2128;\n  --mero-text: #e6edf3;\n  --mero-text-secondary: #8b949e;\n  --mero-accent: #a5ff11;\n  --mero-accent-hover: #8ed40d;\n  --mero-on-primary: #0d1117;\n  --mero-error: #ff6b6b;\n  --mero-border: #30363d;\n  --mero-disabled: #555555;\n  --mero-shadow: rgba(0, 0, 0, 0.5);\n  --mero-overlay: rgba(0, 0, 0, 0.75);\n  --mero-radius: 8px;\n}\n.mero-connect-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 20px;\n  background-color: var(--mero-accent);\n  border: 1px solid var(--mero-accent);\n  border-radius: var(--mero-radius);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  color: var(--mero-on-primary);\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease,\n    transform 0.1s ease;\n  min-width: 140px;\n  box-sizing: border-box;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  line-height: 1;\n}\n.mero-connect-button:hover:not(.mero-connected):not(.mero-reconnecting) {\n  background-color: var(--mero-accent-hover);\n  border-color: var(--mero-accent-hover);\n  box-shadow: 0 0 0 4px rgba(165, 255, 17, 0.18);\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mero-accent) 18%, transparent);\n}\n.mero-connect-button:active:not(.mero-connected):not(.mero-reconnecting) {\n  transform: translateY(1px);\n}\n.mero-connect-button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(165, 255, 17, 0.45);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mero-accent) 45%, transparent);\n}\n.mero-connect-button.mero-logo-only {\n  min-width: 0;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  gap: 0;\n}\n.mero-connect-button.mero-connected {\n  background-color: var(--mero-accent);\n  color: var(--mero-on-primary);\n  border-color: var(--mero-accent);\n}\n.mero-connect-button.mero-connected:hover {\n  background-color: var(--mero-accent-hover);\n  border-color: var(--mero-accent-hover);\n}\n.mero-connect-button.mero-reconnecting {\n  background-color: var(--mero-bg-secondary);\n  color: var(--mero-text-secondary);\n  border-color: var(--mero-border);\n  cursor: not-allowed;\n}\n.mero-connect-container {\n  position: relative;\n  display: inline-block;\n}\n.mero-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  background-color: var(--mero-bg-secondary);\n  border: 1px solid var(--mero-border);\n  border-radius: var(--mero-radius);\n  margin-top: 6px;\n  padding: 0;\n  z-index: 1001;\n  width: 100%;\n  min-width: 180px;\n  overflow: hidden;\n  box-shadow: 0 8px 24px var(--mero-shadow);\n}\n.mero-dropdown-info {\n  padding: 10px 16px;\n  color: var(--mero-text-secondary);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mero-border);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 220px;\n}\n.mero-dropdown-item {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: none;\n  border: none;\n  color: var(--mero-text);\n  text-align: left;\n  cursor: pointer;\n  font-size: 14px;\n  text-decoration: none;\n  font-family: inherit;\n}\n.mero-dropdown-item:hover {\n  background-color: var(--mero-accent);\n  color: var(--mero-on-primary);\n}\n.mero-logo {\n  width: 24px;\n  height: 24px;\n  color: currentColor;\n}\n@keyframes meroFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes meroSlideIn {\n  from {\n    transform: translateY(-12px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes meroSpin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n');
 
 // src/types.ts
 var AppMode = /* @__PURE__ */ ((AppMode2) => {
@@ -369,6 +392,101 @@ function useMero() {
   }
   return context;
 }
+function CalimeroLogo({
+  size = 24,
+  color,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 193 193",
+      fill: color ?? "currentColor",
+      style,
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.5969 23.2235C63.4924 -4.81833 123.53 2.55678 148.374 10.0273C153.006 11.4201 155.606 16.2198 154.181 20.7478C152.757 25.2758 147.846 27.8173 143.214 26.4245C120.866 19.7045 66.3988 13.3369 22.3442 38.0961C21.3748 38.6409 20.8298 39.6384 20.8808 40.6778C22.5544 74.7376 40.6646 139.735 103.059 173.709C107.293 176.015 108.813 181.238 106.455 185.377C104.096 189.516 98.7523 191.002 94.5186 188.696C24.7767 150.721 5.18199 78.7606 3.35124 41.5008C2.98177 33.9812 6.96683 26.9496 13.5969 23.2235Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M180.214 22.5271C185.054 22.2785 189.183 25.9121 189.437 30.6429C192.776 92.7591 159.782 138.316 138.517 157.587C133.185 162.419 125.221 164.303 117.934 161.241C102.817 154.887 88.1835 141.52 76.3001 128.189C64.2403 114.66 54.1712 100.2 48.3006 90.492C45.8345 86.4139 47.2173 81.1537 51.3891 78.743C55.561 76.3323 60.9421 77.684 63.4082 81.7621C68.803 90.6832 78.2588 104.272 89.5315 116.919C100.981 129.763 113.488 140.698 124.866 145.48C125.179 145.612 125.851 145.671 126.586 145.006C145.206 128.132 174.903 87.1988 171.912 31.5431C171.657 26.8122 175.374 22.7756 180.214 22.5271Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M85.9137 55.4487C70.263 57.0264 57.2007 60.7039 50.4014 63.4262C45.9168 65.2218 40.7922 63.1236 38.9553 58.7397C37.1184 54.3559 39.2649 49.3464 43.7495 47.5508C52.2083 44.164 66.9167 40.1173 84.1135 38.3837C101.323 36.649 121.62 37.1693 140.947 43.4423C149.244 46.1351 155.088 53.9217 154.482 62.8728C153.225 81.429 144.514 100.403 127.158 122.145C124.177 125.88 118.663 126.546 114.842 123.631C111.021 120.717 110.341 115.327 113.322 111.592C129.481 91.3484 136.032 75.6017 136.971 61.7394C137.02 61.0029 136.547 60.0904 135.417 59.7238C119.18 54.4537 101.552 53.8722 85.9137 55.4487Z"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/theme.ts
+var defaultMeroTheme = Object.freeze({
+  primary: "#a5ff11",
+  primaryHover: "#8ed40d",
+  primaryText: "#0d1117",
+  background: "#0d1117",
+  backgroundSecondary: "#161b22",
+  backgroundTertiary: "#1c2128",
+  border: "#30363d",
+  text: "#e6edf3",
+  textSecondary: "#8b949e",
+  error: "#ff6b6b",
+  overlay: "rgba(0, 0, 0, 0.75)",
+  radius: "8px"
+});
+function resolveMeroTheme(theme) {
+  if (!theme) return { ...defaultMeroTheme };
+  const filtered = Object.fromEntries(
+    Object.entries(theme).filter(
+      ([, v]) => v !== void 0 && typeof v === "string" && v.trim() !== ""
+    )
+  );
+  return { ...defaultMeroTheme, ...filtered };
+}
+var MERO_CSS_VARS = {
+  background: "--mero-bg",
+  backgroundSecondary: "--mero-bg-secondary",
+  backgroundTertiary: "--mero-bg-tertiary",
+  text: "--mero-text",
+  textSecondary: "--mero-text-secondary",
+  primary: "--mero-accent",
+  primaryHover: "--mero-accent-hover",
+  primaryText: "--mero-on-primary",
+  border: "--mero-border",
+  error: "--mero-error",
+  overlay: "--mero-overlay",
+  radius: "--mero-radius"
+};
+function themeToCssVars(theme) {
+  const vars = {};
+  for (const key of Object.keys(MERO_CSS_VARS)) {
+    vars[MERO_CSS_VARS[key]] = theme[key];
+  }
+  return vars;
+}
+function cssVar(theme, key) {
+  return `var(${MERO_CSS_VARS[key]}, ${theme[key]})`;
+}
 function isValidUrl(urlString) {
   if (!urlString || urlString.trim() === "") {
     return false;
@@ -397,161 +515,194 @@ function isValidUrl(urlString) {
     return false;
   }
 }
-var styles = {
-  overlay: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.75)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e4,
-    padding: "1rem"
-  },
-  content: {
-    backgroundColor: "#1f2937",
-    borderRadius: "12px",
-    padding: "2rem",
-    maxWidth: "400px",
-    width: "100%",
-    position: "relative",
-    border: "1px solid #374151",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
-  },
-  closeButton: {
-    position: "absolute",
-    top: "1rem",
-    right: "1rem",
-    background: "none",
-    border: "none",
-    fontSize: "1.5rem",
-    color: "#9ca3af",
-    cursor: "pointer",
-    padding: "0.25rem",
-    lineHeight: 1
-  },
-  header: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "0.75rem",
-    marginBottom: "1.5rem"
-  },
-  title: {
-    fontSize: "1.25rem",
-    fontWeight: 600,
-    color: "#f3f4f6",
-    margin: 0
-  },
-  info: {
-    color: "#9ca3af",
-    textAlign: "center",
-    marginBottom: "1.5rem",
-    fontSize: "0.875rem"
-  },
-  error: {
-    color: "#ef4444",
-    backgroundColor: "rgba(239, 68, 68, 0.1)",
-    border: "1px solid rgba(239, 68, 68, 0.3)",
-    borderRadius: "6px",
-    padding: "0.75rem",
-    marginBottom: "1rem",
-    fontSize: "0.875rem",
-    textAlign: "center"
-  },
-  radioGroup: {
-    display: "flex",
-    gap: "1rem",
-    marginBottom: "1rem",
-    justifyContent: "center"
-  },
-  radioLabel: {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.5rem",
-    color: "#e5e7eb",
-    cursor: "pointer",
-    padding: "0.5rem 1rem",
-    borderRadius: "6px",
-    border: "1px solid #374151",
-    backgroundColor: "#111827",
-    transition: "all 0.2s"
-  },
-  radioLabelActive: {
-    borderColor: "#3b82f6",
-    backgroundColor: "rgba(59, 130, 246, 0.1)"
-  },
-  input: {
-    width: "100%",
-    padding: "0.75rem 1rem",
-    borderRadius: "6px",
-    border: "1px solid #374151",
-    backgroundColor: "#111827",
-    color: "#f3f4f6",
-    fontSize: "0.875rem",
-    outline: "none",
-    marginBottom: "1rem",
-    boxSizing: "border-box"
-  },
-  localInfo: {
-    color: "#9ca3af",
-    fontSize: "0.875rem",
-    textAlign: "center",
-    padding: "0.75rem",
-    backgroundColor: "#111827",
-    borderRadius: "6px",
-    marginBottom: "1rem"
-  },
-  buttonGroup: {
-    display: "flex",
-    justifyContent: "center"
-  },
-  button: {
-    padding: "0.75rem 2rem",
-    borderRadius: "6px",
-    border: "none",
-    fontSize: "0.875rem",
-    fontWeight: 600,
-    cursor: "pointer",
-    backgroundColor: "#3b82f6",
-    color: "white",
-    transition: "all 0.2s"
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  loading: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "1rem",
-    padding: "2rem",
-    color: "#9ca3af"
-  },
-  spinner: {
-    width: "2rem",
-    height: "2rem",
-    border: "3px solid #374151",
-    borderTopColor: "#3b82f6",
-    borderRadius: "50%",
-    animation: "spin 1s linear infinite"
-  }
-};
+function tint(color, percent) {
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}
+function buildStyles(t) {
+  const bg = cssVar(t, "background");
+  const bgSecondary = cssVar(t, "backgroundSecondary");
+  const text = cssVar(t, "text");
+  const textSecondary = cssVar(t, "textSecondary");
+  const accent = cssVar(t, "primary");
+  const onPrimary = cssVar(t, "primaryText");
+  const border = cssVar(t, "border");
+  const error = cssVar(t, "error");
+  const overlay = cssVar(t, "overlay");
+  const radius = cssVar(t, "radius");
+  const errorBg = tint(error, 10);
+  const errorBorder = tint(error, 30);
+  const accentGlow = tint(accent, 15);
+  return {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: overlay,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 1e4,
+      padding: "1rem",
+      animation: "meroFadeIn 0.2s ease-out"
+    },
+    content: {
+      backgroundColor: bg,
+      borderRadius: radius,
+      padding: "2rem",
+      maxWidth: "420px",
+      width: "100%",
+      position: "relative",
+      border: `1px solid ${border}`,
+      boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px ${accentGlow}`,
+      animation: "meroSlideIn 0.25s ease-out",
+      color: text
+    },
+    closeButton: {
+      position: "absolute",
+      top: "0.75rem",
+      right: "0.75rem",
+      background: "none",
+      border: "none",
+      fontSize: "1.5rem",
+      color: textSecondary,
+      cursor: "pointer",
+      padding: "0.25rem",
+      lineHeight: 1
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "0.75rem",
+      marginBottom: "1.5rem"
+    },
+    title: {
+      fontSize: "1.25rem",
+      fontWeight: 600,
+      color: text,
+      margin: 0
+    },
+    info: {
+      color: textSecondary,
+      textAlign: "center",
+      marginBottom: "1.5rem",
+      fontSize: "0.875rem"
+    },
+    error: {
+      color: error,
+      backgroundColor: errorBg,
+      border: `1px solid ${errorBorder}`,
+      borderRadius: radius,
+      padding: "0.75rem",
+      marginBottom: "1rem",
+      fontSize: "0.875rem",
+      textAlign: "center"
+    },
+    radioGroup: {
+      display: "flex",
+      gap: "0.75rem",
+      marginBottom: "1rem",
+      justifyContent: "center"
+    },
+    radioLabel: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      color: text,
+      cursor: "pointer",
+      padding: "0.5rem 1rem",
+      borderRadius: radius,
+      border: `1px solid ${border}`,
+      backgroundColor: bgSecondary,
+      transition: "all 0.15s ease"
+    },
+    radioLabelActive: {
+      borderColor: accent,
+      backgroundColor: accentGlow,
+      color: text
+    },
+    input: {
+      width: "100%",
+      padding: "0.75rem 1rem",
+      borderRadius: radius,
+      border: `1px solid ${border}`,
+      backgroundColor: bgSecondary,
+      color: text,
+      fontSize: "0.875rem",
+      outline: "none",
+      marginBottom: "1rem",
+      boxSizing: "border-box"
+    },
+    localInfo: {
+      color: textSecondary,
+      fontSize: "0.875rem",
+      textAlign: "center",
+      padding: "0.75rem",
+      backgroundColor: bgSecondary,
+      borderRadius: radius,
+      marginBottom: "1rem",
+      border: `1px solid ${border}`
+    },
+    localInfoCode: {
+      color: accent
+    },
+    buttonGroup: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    button: {
+      padding: "0.75rem 2rem",
+      borderRadius: radius,
+      border: "none",
+      fontSize: "0.875rem",
+      fontWeight: 600,
+      cursor: "pointer",
+      backgroundColor: accent,
+      color: onPrimary,
+      transition: "all 0.15s ease"
+    },
+    buttonDisabled: {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    loading: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "1rem",
+      padding: "2rem",
+      color: textSecondary
+    },
+    spinner: {
+      width: "2rem",
+      height: "2rem",
+      border: `3px solid ${border}`,
+      borderTopColor: accent,
+      borderRadius: "50%",
+      animation: "meroSpin 1s linear infinite"
+    }
+  };
+}
 function LoginModal({
   onConnect,
   onClose,
   connectionType,
-  isOpen
+  isOpen,
+  theme
 }) {
   const [nodeType, setNodeType] = useState("local");
   const [nodeUrl, setNodeUrl2] = useState("");
   const [isValid, setIsValid] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const resolved = useMemo(() => resolveMeroTheme(theme), [theme]);
+  const styles = useMemo(() => buildStyles(resolved), [resolved]);
+  const themeVars = useMemo(
+    () => theme ? themeToCssVars(resolved) : void 0,
+    [theme, resolved]
+  );
   const shouldShowLocal = connectionType === "remote-and-local" /* RemoteAndLocal */ || connectionType === "local" /* Local */;
   const shouldShowRemote = connectionType === "remote-and-local" /* RemoteAndLocal */ || connectionType === "remote" /* Remote */;
   const shouldShowRadioGroup = shouldShowLocal && shouldShowRemote;
@@ -602,14 +753,14 @@ function LoginModal({
   }
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
+        @keyframes meroSpin { to { transform: rotate(360deg); } }
+        @keyframes meroFadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes meroSlideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
       ` }),
-    /* @__PURE__ */ jsx("div", { style: styles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: styles.content, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("div", { style: { ...themeVars, ...styles.overlay }, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: styles.content, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsx("button", { style: styles.closeButton, onClick: onClose, children: "\xD7" }),
       /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
-        /* @__PURE__ */ jsx(MeroLogo, {}),
+        /* @__PURE__ */ jsx(CalimeroLogo, { size: 44, color: cssVar(resolved, "primary") }),
         /* @__PURE__ */ jsx("h1", { style: styles.title, children: "Connect to Calimero" })
       ] }),
       loading ? /* @__PURE__ */ jsxs("div", { style: styles.loading, children: [
@@ -638,7 +789,7 @@ function LoginModal({
                     style: { display: "none" }
                   }
                 ),
-                "\u{1F3E0} Local"
+                "Local"
               ]
             }
           ),
@@ -661,7 +812,7 @@ function LoginModal({
                     style: { display: "none" }
                   }
                 ),
-                "\u{1F310} Remote"
+                "Remote"
               ]
             }
           )
@@ -683,7 +834,7 @@ function LoginModal({
         ) : shouldShowLocal ? /* @__PURE__ */ jsxs("p", { style: styles.localInfo, children: [
           "Using default local node: ",
           /* @__PURE__ */ jsx("br", {}),
-          /* @__PURE__ */ jsx("code", { style: { color: "#60a5fa" }, children: "http://node1.127.0.0.1.nip.io" })
+          /* @__PURE__ */ jsx("code", { style: styles.localInfoCode, children: "http://node1.127.0.0.1.nip.io" })
         ] }) : null }),
         /* @__PURE__ */ jsx("div", { style: styles.buttonGroup, children: /* @__PURE__ */ jsx(
           "button",
@@ -702,28 +853,26 @@ function LoginModal({
   ] });
   return createPortal(modalContent, document.body);
 }
-function MeroLogo() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "40",
-      height: "40",
-      viewBox: "0 0 24 24",
-      fill: "#3b82f6",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" })
-    }
-  );
-}
 function ConnectButton({
   connectionType = "remote-and-local" /* RemoteAndLocal */,
   className,
-  style
+  style,
+  theme,
+  logoOnly = false,
+  label
 }) {
   const { isAuthenticated, connectToNode, logout, nodeUrl, isOnline } = useMero();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const resolvedTheme = useMemo(
+    () => theme ? resolveMeroTheme(theme) : null,
+    [theme]
+  );
+  const themeVars = useMemo(
+    () => resolvedTheme ? themeToCssVars(resolvedTheme) : void 0,
+    [resolvedTheme]
+  );
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -737,6 +886,15 @@ function ConnectButton({
     if (!isAuthenticated || !nodeUrl) return "#";
     return new URL("admin-dashboard/", nodeUrl).toString();
   }, [isAuthenticated, nodeUrl]);
+  const labels = useMemo(() => {
+    const overrides = typeof label === "string" ? { connect: label } : label;
+    return {
+      connect: overrides?.connect ?? "Connect",
+      connected: overrides?.connected ?? "Connected",
+      reconnecting: overrides?.reconnecting ?? "Reconnecting..."
+    };
+  }, [label]);
+  const buttonClassName = logoOnly ? "mero-logo-only" : "";
   const handleConnect = () => {
     if (typeof connectionType === "object" && connectionType.type === "custom" /* Custom */) {
       connectToNode(connectionType.url);
@@ -749,94 +907,109 @@ function ConnectButton({
     connectToNode(url);
   };
   if (isAuthenticated && !isOnline) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mero-connect-container",
+        style: { ...themeVars, display: "inline-block" },
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: ["mero-connect-button", "mero-reconnecting", buttonClassName, className].filter(Boolean).join(" "),
+            style,
+            disabled: true,
+            "aria-label": labels.reconnecting,
+            title: logoOnly ? labels.reconnecting : void 0,
+            children: [
+              /* @__PURE__ */ jsx(CalimeroLogo, { size: 18, className: "mero-logo" }),
+              !logoOnly && labels.reconnecting
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (isAuthenticated) {
     return /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
-        className: `mero-connect-button mero-reconnecting ${className || ""}`,
-        style,
-        disabled: true,
+        ref: dropdownRef,
+        className: "mero-connect-container",
+        style: { ...themeVars, position: "relative", display: "inline-block" },
         children: [
-          /* @__PURE__ */ jsx(MeroLogo2, {}),
-          "Reconnecting..."
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: ["mero-connect-button", "mero-connected", buttonClassName, className].filter(Boolean).join(" "),
+              style,
+              onClick: () => setIsDropdownOpen((prev) => !prev),
+              "aria-label": labels.connected,
+              title: logoOnly ? labels.connected : void 0,
+              children: [
+                /* @__PURE__ */ jsx(CalimeroLogo, { size: 18, className: "mero-logo" }),
+                !logoOnly && labels.connected
+              ]
+            }
+          ),
+          isDropdownOpen && /* @__PURE__ */ jsxs("div", { className: "mero-dropdown", children: [
+            /* @__PURE__ */ jsx("div", { className: "mero-dropdown-info", title: nodeUrl || "", children: nodeUrl }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: dashboardUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "mero-dropdown-item",
+                children: "Dashboard"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "mero-dropdown-item",
+                onClick: () => {
+                  setIsDropdownOpen(false);
+                  logout();
+                },
+                children: "Log out"
+              }
+            )
+          ] })
         ]
       }
     );
   }
-  if (isAuthenticated) {
-    return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "mero-connect-container", style: { position: "relative", display: "inline-block" }, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: `mero-connect-button mero-connected ${className || ""}`,
-          style,
-          onClick: () => setIsDropdownOpen((prev) => !prev),
-          children: [
-            /* @__PURE__ */ jsx(MeroLogo2, {}),
-            "Connected"
-          ]
-        }
-      ),
-      isDropdownOpen && /* @__PURE__ */ jsxs("div", { className: "mero-dropdown", children: [
-        /* @__PURE__ */ jsx("div", { className: "mero-dropdown-info", title: nodeUrl || "", children: nodeUrl }),
-        /* @__PURE__ */ jsx(
-          "a",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "mero-connect-container",
+      style: { ...themeVars, display: "inline-block" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
           {
-            href: dashboardUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "mero-dropdown-item",
-            children: "Dashboard"
+            className: ["mero-connect-button", buttonClassName, className].filter(Boolean).join(" "),
+            style,
+            onClick: handleConnect,
+            "aria-label": labels.connect,
+            title: logoOnly ? labels.connect : void 0,
+            children: [
+              /* @__PURE__ */ jsx(CalimeroLogo, { size: 18, className: "mero-logo" }),
+              !logoOnly && labels.connect
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          LoginModal,
           {
-            className: "mero-dropdown-item",
-            onClick: () => {
-              setIsDropdownOpen(false);
-              logout();
-            },
-            children: "Log out"
+            isOpen: isModalOpen,
+            onConnect: handleModalConnect,
+            onClose: () => setIsModalOpen(false),
+            connectionType: typeof connectionType === "object" ? "remote-and-local" /* RemoteAndLocal */ : connectionType,
+            theme: resolvedTheme ?? theme
           }
         )
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: `mero-connect-button ${className || ""}`,
-        style,
-        onClick: handleConnect,
-        children: [
-          /* @__PURE__ */ jsx(MeroLogo2, {}),
-          "Connect"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      LoginModal,
-      {
-        isOpen: isModalOpen,
-        onConnect: handleModalConnect,
-        onClose: () => setIsModalOpen(false),
-        connectionType: typeof connectionType === "object" ? "remote-and-local" /* RemoteAndLocal */ : connectionType
-      }
-    )
-  ] });
-}
-function MeroLogo2() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "mero-logo",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" })
+      ]
     }
   );
 }
@@ -1937,6 +2110,6 @@ function useDetachContextFromGroup() {
   return { detachContextFromGroup, loading, error };
 }
 
-export { AppMode, ConnectButton, ConnectionType, LoginModal, MeroContext, MeroProvider, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, setApplicationId, setContextId, setContextIdentity, setNodeUrl, useAddGroupMembers, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useMero, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useNestGroup, useRegisterGroupSigningKey, useRemoveGroupMembers, useRetryGroupUpgrade, useSetDefaultCapabilities, useSetGroupAlias, useSetMemberAlias, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroups, useSubscription, useSyncGroup, useUnnestGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
+export { AppMode, CalimeroLogo, ConnectButton, ConnectionType, LoginModal, MERO_CSS_VARS, MeroContext, MeroProvider, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useMero, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useNestGroup, useRegisterGroupSigningKey, useRemoveGroupMembers, useRetryGroupUpgrade, useSetDefaultCapabilities, useSetGroupAlias, useSetMemberAlias, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroups, useSubscription, useSyncGroup, useUnnestGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map