@cuekit-ai/react 1.6.8 → 1.6.9

package/dist/cuekit.css

@@ -22,19 +22,23 @@
   --voice-border: 252 31% 91%;
   --voice-text: 222.2 84% 4.9%;
   --voice-text-muted: 252 16% 47%;
-  --voice-accent: 252 81% 60%;
+  --voice-accent: 252 78% 60%; /* #6257d9 */
+  --voice-accent-vibrant: 245 84% 77%; /* #9a92f6 */
+  --voice-accent-dark: 246 57% 54%; /* #5447cd */
   --voice-accent-light: 252 100% 96%;
-  --voice-user-bubble: 252 81% 60%;
+  --voice-user-bubble: 252 78% 60%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 0 0% 100%;
   --voice-ai-text: 222.2 84% 4.9%;
-  --indicator-bg: 252 81% 60%;
+  --indicator-bg: 252 78% 60%;
+  --voice-status-bg: 252 100% 96%;
+  --voice-status-text: 252 78% 60%;
   --voice-placeholder: 252 16% 47%;
 
   /* Gradients Light - Purple */
-  --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
-  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
-  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
+  --gradient-primary: linear-gradient(135deg, #8177ed, #9a92f6);
+  --gradient-surface: linear-gradient(180deg, #ffffff, #f6f5ff);
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, #9a92f6, #6257d9);
 
   /* Shadows Light */
   --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
@@ -49,18 +53,20 @@
   --voice-border: 252 31% 91%;
   --voice-text: 222.2 84% 4.9%;
   --voice-text-muted: 252 16% 47%;
-  --voice-accent: 252 81% 60%;
+  --voice-accent: 252 78% 60%;
+  --voice-accent-vibrant: 245 84% 77%;
+  --voice-accent-dark: 246 57% 54%;
   --voice-accent-light: 252 100% 96%;
-  --voice-user-bubble: 252 81% 60%;
+  --voice-user-bubble: 252 78% 60%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 0 0% 100%;
   --voice-ai-text: 222.2 84% 4.9%;
-  --indicator-bg: 252 81% 60%;
+  --indicator-bg: 252 78% 60%;
   --voice-placeholder: 252 16% 47%;
-  --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
-  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
-  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
-  --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
+  --gradient-primary: linear-gradient(135deg, #8177ed, #9a92f6);
+  --gradient-surface: linear-gradient(180deg, #ffffff, #f6f5ff);
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, #9a92f6, #6257d9);
+  --shadow-soft: 0 4px 20px -2px rgba(129, 119, 237, 0.1);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
 }
 
@@ -71,22 +77,26 @@
   --voice-border: 248 32% 22%;
   --voice-text: 252 40% 98%;
   --voice-text-muted: 252 20% 65%;
-  --voice-accent: 252 88% 70%;
+  --voice-accent: 245 84% 77%; /* #9a92f6 */
+  --voice-accent-vibrant: 252 88% 77%;
+  --voice-accent-dark: 246 57% 54%;
   --voice-accent-light: 252 47% 25%;
-  --voice-user-bubble: 252 88% 70%;
+  --voice-user-bubble: 245 84% 77%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 252 32% 21%;
   --voice-ai-text: 0 0% 100%;
-  --indicator-bg: 252 88% 70%;
+  --indicator-bg: 245 84% 77%;
+  --voice-status-bg: 252 47% 25%;
+  --voice-status-text: 245 84% 77%;
   --voice-placeholder: 252 20% 65%;
 
   /* Gradients Dark - Purple */
-  --gradient-primary: linear-gradient(135deg, hsl(252 88% 70%), hsl(252 88% 77%));
-  --gradient-surface: linear-gradient(180deg, hsl(248 32% 17.5%), hsl(248 35% 11%));
-  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 59% 54%));
+  --gradient-primary: linear-gradient(135deg, #8177ed, #9a92f6);
+  --gradient-surface: linear-gradient(180deg, #2b2640, #1a1625);
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, #9a92f6, #5447cd);
 
   /* Shadows Dark */
-  --shadow-soft: 0 4px 20px -2px hsl(252 88% 70% / 0.2);
+  --shadow-soft: 0 4px 20px -2px rgba(129, 119, 237, 0.2);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
 }
 
@@ -171,7 +181,7 @@
 
 /* Placeholder styles */
 input::placeholder {
-  color: hsl(var(--voice-placeholder));
+  color: hsl(var(--voice-text) / 0.9);
 }
 
 /* Theme toggle animations */
@@ -554,8 +564,8 @@ input::placeholder {
 }
 
 .language-tooltip-content {
-  background: oklch(0.23 0.08 252.75);
-  color: hsl(0 0% 98%);
+  background: hsl(var(--voice-accent));
+  color: #fff;
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 12px;
@@ -579,7 +589,7 @@ input::placeholder {
   width: 0;
   height: 0;
   border: 4px solid transparent;
-  border-top-color: oklch(0.23 0.08 252.75);
+  border-top-color: hsl(var(--voice-accent));
 }
 
 .language-selector-content {
@@ -755,7 +765,7 @@ input::placeholder {
   align-items: center;
   gap: 12px;
   padding: 8px;
-  background: hsl(var(--voice-surface));
+  background: white; /* Force white as per user request */
   border: 1px solid hsl(var(--voice-border));
   border-radius: 32px;
   box-shadow:
@@ -786,13 +796,12 @@ input::placeholder {
   align-items: center;
   gap: 16px;
   padding: 20px;
-  background: hsl(var(--voice-surface));
+  background: white; /* Force white as per user request */
   border: 1px solid hsl(var(--voice-border));
   border-radius: 16px;
   box-shadow:
     0 20px 60px -12px hsl(0 0% 0% / 0.15),
     0 8px 32px -8px hsl(var(--voice-accent) / 0.1);
-  backdrop-filter: blur(16px);
   min-width: 280px;
   animation: voiceChatLanguageEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -887,11 +896,11 @@ input::placeholder {
 
 /* Dark theme for voice chat button: only when popup has .cuekit-dark (no media query) */
 .cuekit-voice-popup.cuekit-dark .voice-chat-main-button {
-  background: hsl(var(--voice-surface) / 0.8);
+  background: white; /* Force white in dark mode as per user request */
   border-color: hsl(var(--voice-border) / 0.5);
 }
 
 .cuekit-voice-popup.cuekit-dark .voice-chat-language-selection {
-  background: hsl(var(--voice-surface));
+  background: white; /* Force white in dark mode as per user request */
   border-color: hsl(var(--voice-border));
 }

package/dist/index.d.mts

@@ -11,8 +11,13 @@ interface DOMStructurePayload {
 }
 interface ThemeColors {
     primary: string;
-    background: string;
-    text: string;
+    primaryVibrant?: string;
+    primaryDark?: string;
+    indicator?: string;
+    statusBg?: string;
+    statusText?: string;
+    background?: string;
+    text?: string;
     surface?: string;
     border?: string;
     textMuted?: string;
@@ -22,8 +27,8 @@ interface ThemeColors {
     aiText?: string;
 }
 interface ThemeConfig {
-    light: ThemeColors;
-    dark: ThemeColors;
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
 }
 
 declare global {
@@ -62,7 +67,7 @@ interface Props {
     showLogo?: boolean;
     showAIIcon?: boolean;
     showUserIcon?: boolean;
-    theme: ThemeConfig;
+    theme?: ThemeConfig;
     emptyStateMessage?: string;
 }
 declare const AnsyrProvider: React__default.FC<Props>;

package/dist/index.d.ts

@@ -11,8 +11,13 @@ interface DOMStructurePayload {
 }
 interface ThemeColors {
     primary: string;
-    background: string;
-    text: string;
+    primaryVibrant?: string;
+    primaryDark?: string;
+    indicator?: string;
+    statusBg?: string;
+    statusText?: string;
+    background?: string;
+    text?: string;
     surface?: string;
     border?: string;
     textMuted?: string;
@@ -22,8 +27,8 @@ interface ThemeColors {
     aiText?: string;
 }
 interface ThemeConfig {
-    light: ThemeColors;
-    dark: ThemeColors;
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
 }
 
 declare global {
@@ -62,7 +67,7 @@ interface Props {
     showLogo?: boolean;
     showAIIcon?: boolean;
     showUserIcon?: boolean;
-    theme: ThemeConfig;
+    theme?: ThemeConfig;
     emptyStateMessage?: string;
 }
 declare const AnsyrProvider: React__default.FC<Props>;

package/dist/index.js

@@ -24820,6 +24820,94 @@ function InitCuekit(config) {
   setWebRTCConfig(webRTCConfig);
 }
 
+// src/utils/colors.ts
+function hexToHSL(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  if (hex.length !== 6) return null;
+  const r3 = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b2 = parseInt(hex.substring(4, 6), 16) / 255;
+  const max = Math.max(r3, g, b2), min = Math.min(r3, g, b2);
+  let h2 = 0, s = 0, l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r3:
+        h2 = (g - b2) / d + (g < b2 ? 6 : 0);
+        break;
+      case g:
+        h2 = (b2 - r3) / d + 2;
+        break;
+      case b2:
+        h2 = (r3 - g) / d + 4;
+        break;
+    }
+    h2 /= 6;
+  }
+  const res = {
+    h: Math.round(h2 * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+  return {
+    ...res,
+    toString: () => `${res.h} ${res.s}% ${res.l}%`
+  };
+}
+
+// src/utils/theme.ts
+var generateThemeStyles = (theme, currentTheme = "dark") => {
+  if (!theme) return {};
+  const colors = currentTheme === "light" ? theme.light : theme.dark;
+  if (!colors) return {};
+  const mapping = {
+    primary: "--voice-accent",
+    statusBg: "--voice-status-bg",
+    statusText: "--voice-status-text",
+    background: "--voice-bg",
+    surface: "--voice-surface",
+    border: "--voice-border",
+    text: "--voice-text",
+    textMuted: "--voice-text-muted",
+    userBubble: "--voice-user-bubble",
+    userText: "--voice-user-text",
+    aiBubble: "--voice-ai-bubble",
+    aiText: "--voice-ai-text"
+  };
+  const styles = {};
+  Object.entries(colors).forEach(([key, value]) => {
+    const varName = mapping[key];
+    if (varName && value) {
+      const hsl = hexToHSL(value);
+      if (hsl) {
+        styles[varName] = hsl.toString();
+        if (key === "primary") {
+          const indicatorHsl = colors.indicator ? hexToHSL(colors.indicator) : hsl;
+          styles["--indicator-bg"] = indicatorHsl ? indicatorHsl.toString() : hsl.toString();
+          const vibrantHsl = colors.primaryVibrant ? hexToHSL(colors.primaryVibrant) : null;
+          const lVibrant = vibrantHsl ? vibrantHsl.l : Math.min(hsl.l + 7, 100);
+          styles["--voice-accent-vibrant"] = vibrantHsl ? vibrantHsl.toString() : `${hsl.h} ${hsl.s}% ${lVibrant}%`;
+          const darkHsl = colors.primaryDark ? hexToHSL(colors.primaryDark) : null;
+          const lDark = darkHsl ? darkHsl.l : Math.max(hsl.l - 10, 0);
+          styles["--voice-accent-dark"] = darkHsl ? darkHsl.toString() : `${hsl.h} ${hsl.s}% ${lDark}%`;
+          styles["--voice-accent-light"] = currentTheme === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
+          const finalVibrant = vibrantHsl ? `hsl(${vibrantHsl.toString()})` : `hsl(${hsl.h} ${hsl.s}% ${lVibrant}%)`;
+          const finalDark = darkHsl ? `hsl(${darkHsl.toString()})` : `hsl(${hsl.h} ${hsl.s}% ${lDark}%)`;
+          styles["--gradient-primary"] = `linear-gradient(135deg, hsl(${hsl.toString()}), ${finalVibrant})`;
+          styles["--gradient-mic-button"] = `radial-gradient(circle at 50% 0%, ${finalVibrant}, ${finalDark})`;
+          const shadowColor = currentTheme === "light" ? `hsl(${hsl.toString()} / 0.1)` : `hsl(${hsl.toString()} / 0.2)`;
+          styles["--shadow-soft"] = `0 4px 20px -2px ${shadowColor}`;
+        }
+      }
+    }
+  });
+  return styles;
+};
+
 // src/providers/ansyr-provider.tsx
 init_navigation();
 init_intent_store();
@@ -24865,45 +24953,6 @@ var initWebRTC = (apiKey) => {
   return initWebRTCWithDeployedBackend(apiKey);
 };
 
-// src/utils/colors.ts
-function hexToHSL(hex) {
-  hex = hex.replace(/^#/, "");
-  if (hex.length === 3) {
-    hex = hex.split("").map((char) => char + char).join("");
-  }
-  if (hex.length !== 6) return null;
-  const r3 = parseInt(hex.substring(0, 2), 16) / 255;
-  const g = parseInt(hex.substring(2, 4), 16) / 255;
-  const b2 = parseInt(hex.substring(4, 6), 16) / 255;
-  const max = Math.max(r3, g, b2), min = Math.min(r3, g, b2);
-  let h2 = 0, s = 0, l = (max + min) / 2;
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r3:
-        h2 = (g - b2) / d + (g < b2 ? 6 : 0);
-        break;
-      case g:
-        h2 = (b2 - r3) / d + 2;
-        break;
-      case b2:
-        h2 = (r3 - g) / d + 4;
-        break;
-    }
-    h2 /= 6;
-  }
-  const res = {
-    h: Math.round(h2 * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100)
-  };
-  return {
-    ...res,
-    toString: () => `${res.h} ${res.s}% ${res.l}%`
-  };
-}
-
 // src/providers/ansyr-provider.tsx
 if (typeof window !== "undefined" && !globalThis.AnsyrStore) {
   globalThis.AnsyrStore = {
@@ -24958,47 +25007,7 @@ var AnsyrProvider = ({
   emptyStateMessage
 }) => {
   const [internalDeviceId, setInternalDeviceId] = (0, import_react.useState)(deviceId);
-  const generateThemeStyles2 = (theme2) => {
-    if (!theme2) return {};
-    const mapColorsToVars = (colors) => {
-      const mapping = {
-        primary: "--voice-accent",
-        background: "--voice-bg",
-        surface: "--voice-surface",
-        border: "--voice-border",
-        text: "--voice-text",
-        textMuted: "--voice-text-muted",
-        userBubble: "--voice-user-bubble",
-        userText: "--voice-user-text",
-        aiBubble: "--voice-ai-bubble",
-        aiText: "--voice-ai-text"
-      };
-      const styles2 = {};
-      Object.entries(colors).forEach(([key, value]) => {
-        const varName = mapping[key];
-        if (varName && value) {
-          const hsl = hexToHSL(value);
-          if (hsl) {
-            styles2[varName] = hsl.toString();
-            if (key === "primary") {
-              styles2["--indicator-bg"] = hsl.toString();
-              styles2["--voice-accent-light"] = `${hsl.h} ${hsl.s}% 96%`;
-            }
-          }
-        }
-      });
-      return styles2;
-    };
-    const styles = {};
-    if (theme2.light) {
-      const lightStyles = mapColorsToVars(theme2.light);
-      Object.entries(lightStyles).forEach(([key, value]) => {
-        styles[key] = value;
-      });
-    }
-    return styles;
-  };
-  const themeStyles = generateThemeStyles2(theme);
+  const themeStyles = generateThemeStyles(theme, "dark");
   (0, import_react.useEffect)(() => {
     InitCuekit({ apiKey, appId });
   }, [apiKey, appId]);
@@ -38921,38 +38930,6 @@ var useDraggableResizableContainer = (storageKey) => {
 };
 
 // src/components/chat-popup.tsx
-var generateThemeStyles = (theme, currentTheme = "dark") => {
-  if (!theme) return {};
-  const colors = currentTheme === "light" ? theme.light : theme.dark;
-  if (!colors) return {};
-  const mapping = {
-    primary: "--voice-accent",
-    background: "--voice-bg",
-    surface: "--voice-surface",
-    border: "--voice-border",
-    text: "--voice-text",
-    textMuted: "--voice-text-muted",
-    userBubble: "--voice-user-bubble",
-    userText: "--voice-user-text",
-    aiBubble: "--voice-ai-bubble",
-    aiText: "--voice-ai-text"
-  };
-  const styles = {};
-  Object.entries(colors).forEach(([key, value]) => {
-    const varName = mapping[key];
-    if (varName && value) {
-      const hsl = hexToHSL(value);
-      if (hsl) {
-        styles[varName] = hsl.toString();
-        if (key === "primary") {
-          styles["--indicator-bg"] = hsl.toString();
-          styles["--voice-accent-light"] = currentTheme === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
-        }
-      }
-    }
-  });
-  return styles;
-};
 var ChatPopup = ({
   isOpen,
   isMinimized,
@@ -39143,8 +39120,8 @@ var ChatPopup = ({
           "div",
           {
             style: {
-              background: "hsl(var(--voice-accent-light))",
-              color: "hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-status-bg))",
+              color: "hsl(var(--voice-status-text))",
               minHeight: "16px",
               display: "flex",
               alignItems: "center",
@@ -39588,8 +39565,8 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
-              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
               color: "#fff",
               fontSize: 12,
               fontWeight: 700,
@@ -39612,8 +39589,8 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
-              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
               color: "#fff",
               fontSize: 12,
               fontWeight: 700,
@@ -39651,17 +39628,14 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
     rightBorder2: {
       position: "absolute",
       top: 0,
-      right: 0,
-      bottom: 0,
-      width: "8px",
-      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent)))",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -39670,9 +39644,7 @@ var BorderGlow = ({ isActive }) => {
       position: "absolute",
       top: 0,
       right: 0,
-      bottom: 0,
-      width: "16px",
-      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -39683,7 +39655,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -39692,8 +39664,7 @@ var BorderGlow = ({ isActive }) => {
       top: 0,
       left: 0,
       bottom: 0,
-      width: "8px",
-      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent)))",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -39703,8 +39674,7 @@ var BorderGlow = ({ isActive }) => {
       top: 0,
       left: 0,
       bottom: 0,
-      width: "16px",
-      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -39715,7 +39685,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#9a92f6",
+      background: "hsl(var(--voice-accent))",
       borderBottomRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39727,7 +39697,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#A39EEC",
+      background: "hsl(var(--voice-accent))",
       borderBottomLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39739,7 +39709,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#8177ed",
+      background: "hsl(var(--voice-accent))",
       borderTopLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39751,7 +39721,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#6257d9",
+      background: "hsl(var(--voice-accent))",
       borderTopRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -42150,47 +42120,7 @@ var MicButton = ({
     }
   };
   const generateMicButtonGradient = () => {
-    const colors = currentTheme === "light" ? theme?.light : theme?.dark;
-    if (colors?.primary) {
-      const hsl = hexToHSL(colors.primary);
-      if (hsl) {
-        const lightHsl = `${hsl.h} ${hsl.s}% ${Math.min(hsl.l + 10, 100)}%`;
-        return `radial-gradient(circle at 50% 0%, hsl(${lightHsl}), hsl(${hsl.toString()}))`;
-      }
-    }
-    return currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
-  };
-  const generateThemeStyles2 = (theme2, currentTheme2 = "dark") => {
-    if (!theme2) return {};
-    const colors = currentTheme2 === "light" ? theme2.light : theme2.dark;
-    if (!colors) return {};
-    const mapping = {
-      primary: "--voice-accent",
-      background: "--voice-bg",
-      surface: "--voice-surface",
-      border: "--voice-border",
-      text: "--voice-text",
-      textMuted: "--voice-text-muted",
-      userBubble: "--voice-user-bubble",
-      userText: "--voice-user-text",
-      aiBubble: "--voice-ai-bubble",
-      aiText: "--voice-ai-text"
-    };
-    const styles = {};
-    Object.entries(colors).forEach(([key, value]) => {
-      const varName = mapping[key];
-      if (varName && value) {
-        const hsl = hexToHSL(value);
-        if (hsl) {
-          styles[varName] = hsl.toString();
-          if (key === "primary") {
-            styles["--indicator-bg"] = hsl.toString();
-            styles["--voice-accent-light"] = currentTheme2 === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
-          }
-        }
-      }
-    });
-    return styles;
+    return "radial-gradient(circle at 50% 0%, hsl(var(--voice-accent-vibrant)), hsl(var(--voice-accent-dark)))";
   };
   const micButtonGradient = generateMicButtonGradient();
   const buttonStyles = {
@@ -42227,18 +42157,18 @@ var MicButton = ({
     switch (micState) {
       case "listening":
         baseStyle.transform = "scale(1.05)";
-        baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
+        baseStyle.boxShadow = "0 25px 50px -12px hsla(var(--voice-accent) / 0.6)";
         break;
       case "thinking":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
         break;
       case "replying":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
         break;
       default:
-        baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+        baseStyle.boxShadow = "0 10px 15px -3px hsla(var(--voice-accent) / 0.3)";
         break;
     }
     return baseStyle;
@@ -42251,7 +42181,7 @@ var MicButton = ({
       style: {
         ...buttonStyles.container,
         ...getPositionStyle(),
-        ...generateThemeStyles2(theme, currentTheme)
+        ...generateThemeStyles(theme, currentTheme)
       }
     },
     showLanguageSelector && showLanguageDropdown ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ import_react20.default.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ import_react20.default.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ import_react20.default.createElement(
@@ -42269,9 +42199,9 @@ var MicButton = ({
         className: "voice-chat-cancel-button",
         onClick: () => setShowLanguageSelector(false),
         style: {
-          background: currentTheme === "dark" ? "hsl(248 32% 17.5%)" : "#f6f5ff",
-          color: currentTheme === "dark" ? "hsl(252 20% 65%)" : "#6257d9",
-          border: `1px solid ${currentTheme === "dark" ? "hsl(248 32% 22%)" : "#c0bbfb"}`
+          background: currentTheme === "dark" ? "hsl(var(--voice-surface))" : "hsl(var(--voice-accent-light))",
+          color: currentTheme === "dark" ? "hsl(var(--voice-text-muted))" : "hsl(var(--voice-accent))",
+          border: "1px solid hsl(var(--voice-border))"
         }
       },
       "Cancel"
@@ -42281,9 +42211,9 @@ var MicButton = ({
         className: "voice-chat-confirm-button",
         onClick: handleLanguageConfirm,
         style: {
-          background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+          background: "hsl(var(--voice-accent))",
           color: "#fff",
-          border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`
+          border: "1px solid hsl(var(--voice-accent))"
         }
       },
       "Start Voice Chat"
@@ -42308,13 +42238,13 @@ var MicButton = ({
         onMouseEnter: (e3) => {
           if (micState === "idle") {
             e3.currentTarget.style.transform = "scale(1.05)";
-            e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+            e3.currentTarget.style.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
           }
         },
         onMouseLeave: (e3) => {
           if (micState === "idle") {
             e3.currentTarget.style.transform = "scale(1)";
-            e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+            e3.currentTarget.style.boxShadow = "0 10px 15px -3px hsla(var(--voice-accent) / 0.3)";
           }
         },
         "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"

package/dist/index.mjs

@@ -1183,45 +1183,6 @@ function InitCuekit(config) {
   setWebRTCConfig(webRTCConfig);
 }
 
-// src/utils/webrtc-config.ts
-var configureWebRTCServer = (config) => {
-  if (!config.apiKey) {
-    throw new Error("API key is required for WebRTC configuration");
-  }
-  const finalConfig = {
-    serverUrl: WEBRTC_BACKEND_SERVER_URL,
-    apiKey: config.apiKey,
-    roomName: config.roomName,
-    participantName: config.participantName,
-    tokenTtlSeconds: config.tokenTtlSeconds
-  };
-  setServerUrl(finalConfig.serverUrl);
-  if (typeof window !== "undefined") {
-    ;
-    window.CuekitWebRTCConfig = finalConfig;
-  }
-};
-var getWebRTCServerConfig = () => {
-  if (typeof window !== "undefined") {
-    return window.CuekitWebRTCConfig || null;
-  }
-  return null;
-};
-var initWebRTCWithDeployedBackend = (apiKey, customConfig) => {
-  const config = {
-    serverUrl: WEBRTC_BACKEND_SERVER_URL,
-    apiKey,
-    roomName: customConfig?.roomName || "default-room",
-    participantName: customConfig?.participantName || "user",
-    tokenTtlSeconds: customConfig?.tokenTtlSeconds || 7200
-  };
-  configureWebRTCServer(config);
-  return config;
-};
-var initWebRTC = (apiKey) => {
-  return initWebRTCWithDeployedBackend(apiKey);
-};
-
 // src/utils/colors.ts
 function hexToHSL(hex) {
   hex = hex.replace(/^#/, "");
@@ -1261,6 +1222,94 @@ function hexToHSL(hex) {
   };
 }
 
+// src/utils/theme.ts
+var generateThemeStyles = (theme, currentTheme = "dark") => {
+  if (!theme) return {};
+  const colors = currentTheme === "light" ? theme.light : theme.dark;
+  if (!colors) return {};
+  const mapping = {
+    primary: "--voice-accent",
+    statusBg: "--voice-status-bg",
+    statusText: "--voice-status-text",
+    background: "--voice-bg",
+    surface: "--voice-surface",
+    border: "--voice-border",
+    text: "--voice-text",
+    textMuted: "--voice-text-muted",
+    userBubble: "--voice-user-bubble",
+    userText: "--voice-user-text",
+    aiBubble: "--voice-ai-bubble",
+    aiText: "--voice-ai-text"
+  };
+  const styles = {};
+  Object.entries(colors).forEach(([key, value]) => {
+    const varName = mapping[key];
+    if (varName && value) {
+      const hsl = hexToHSL(value);
+      if (hsl) {
+        styles[varName] = hsl.toString();
+        if (key === "primary") {
+          const indicatorHsl = colors.indicator ? hexToHSL(colors.indicator) : hsl;
+          styles["--indicator-bg"] = indicatorHsl ? indicatorHsl.toString() : hsl.toString();
+          const vibrantHsl = colors.primaryVibrant ? hexToHSL(colors.primaryVibrant) : null;
+          const lVibrant = vibrantHsl ? vibrantHsl.l : Math.min(hsl.l + 7, 100);
+          styles["--voice-accent-vibrant"] = vibrantHsl ? vibrantHsl.toString() : `${hsl.h} ${hsl.s}% ${lVibrant}%`;
+          const darkHsl = colors.primaryDark ? hexToHSL(colors.primaryDark) : null;
+          const lDark = darkHsl ? darkHsl.l : Math.max(hsl.l - 10, 0);
+          styles["--voice-accent-dark"] = darkHsl ? darkHsl.toString() : `${hsl.h} ${hsl.s}% ${lDark}%`;
+          styles["--voice-accent-light"] = currentTheme === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
+          const finalVibrant = vibrantHsl ? `hsl(${vibrantHsl.toString()})` : `hsl(${hsl.h} ${hsl.s}% ${lVibrant}%)`;
+          const finalDark = darkHsl ? `hsl(${darkHsl.toString()})` : `hsl(${hsl.h} ${hsl.s}% ${lDark}%)`;
+          styles["--gradient-primary"] = `linear-gradient(135deg, hsl(${hsl.toString()}), ${finalVibrant})`;
+          styles["--gradient-mic-button"] = `radial-gradient(circle at 50% 0%, ${finalVibrant}, ${finalDark})`;
+          const shadowColor = currentTheme === "light" ? `hsl(${hsl.toString()} / 0.1)` : `hsl(${hsl.toString()} / 0.2)`;
+          styles["--shadow-soft"] = `0 4px 20px -2px ${shadowColor}`;
+        }
+      }
+    }
+  });
+  return styles;
+};
+
+// src/utils/webrtc-config.ts
+var configureWebRTCServer = (config) => {
+  if (!config.apiKey) {
+    throw new Error("API key is required for WebRTC configuration");
+  }
+  const finalConfig = {
+    serverUrl: WEBRTC_BACKEND_SERVER_URL,
+    apiKey: config.apiKey,
+    roomName: config.roomName,
+    participantName: config.participantName,
+    tokenTtlSeconds: config.tokenTtlSeconds
+  };
+  setServerUrl(finalConfig.serverUrl);
+  if (typeof window !== "undefined") {
+    ;
+    window.CuekitWebRTCConfig = finalConfig;
+  }
+};
+var getWebRTCServerConfig = () => {
+  if (typeof window !== "undefined") {
+    return window.CuekitWebRTCConfig || null;
+  }
+  return null;
+};
+var initWebRTCWithDeployedBackend = (apiKey, customConfig) => {
+  const config = {
+    serverUrl: WEBRTC_BACKEND_SERVER_URL,
+    apiKey,
+    roomName: customConfig?.roomName || "default-room",
+    participantName: customConfig?.participantName || "user",
+    tokenTtlSeconds: customConfig?.tokenTtlSeconds || 7200
+  };
+  configureWebRTCServer(config);
+  return config;
+};
+var initWebRTC = (apiKey) => {
+  return initWebRTCWithDeployedBackend(apiKey);
+};
+
 // src/providers/ansyr-provider.tsx
 if (typeof window !== "undefined" && !globalThis.AnsyrStore) {
   globalThis.AnsyrStore = {
@@ -1315,47 +1364,7 @@ var AnsyrProvider = ({
   emptyStateMessage
 }) => {
   const [internalDeviceId, setInternalDeviceId] = useState(deviceId);
-  const generateThemeStyles2 = (theme2) => {
-    if (!theme2) return {};
-    const mapColorsToVars = (colors) => {
-      const mapping = {
-        primary: "--voice-accent",
-        background: "--voice-bg",
-        surface: "--voice-surface",
-        border: "--voice-border",
-        text: "--voice-text",
-        textMuted: "--voice-text-muted",
-        userBubble: "--voice-user-bubble",
-        userText: "--voice-user-text",
-        aiBubble: "--voice-ai-bubble",
-        aiText: "--voice-ai-text"
-      };
-      const styles2 = {};
-      Object.entries(colors).forEach(([key, value]) => {
-        const varName = mapping[key];
-        if (varName && value) {
-          const hsl = hexToHSL(value);
-          if (hsl) {
-            styles2[varName] = hsl.toString();
-            if (key === "primary") {
-              styles2["--indicator-bg"] = hsl.toString();
-              styles2["--voice-accent-light"] = `${hsl.h} ${hsl.s}% 96%`;
-            }
-          }
-        }
-      });
-      return styles2;
-    };
-    const styles = {};
-    if (theme2.light) {
-      const lightStyles = mapColorsToVars(theme2.light);
-      Object.entries(lightStyles).forEach(([key, value]) => {
-        styles[key] = value;
-      });
-    }
-    return styles;
-  };
-  const themeStyles = generateThemeStyles2(theme);
+  const themeStyles = generateThemeStyles(theme, "dark");
   useEffect(() => {
     InitCuekit({ apiKey, appId });
   }, [apiKey, appId]);
@@ -15272,38 +15281,6 @@ var useDraggableResizableContainer = (storageKey) => {
 };
 
 // src/components/chat-popup.tsx
-var generateThemeStyles = (theme, currentTheme = "dark") => {
-  if (!theme) return {};
-  const colors = currentTheme === "light" ? theme.light : theme.dark;
-  if (!colors) return {};
-  const mapping = {
-    primary: "--voice-accent",
-    background: "--voice-bg",
-    surface: "--voice-surface",
-    border: "--voice-border",
-    text: "--voice-text",
-    textMuted: "--voice-text-muted",
-    userBubble: "--voice-user-bubble",
-    userText: "--voice-user-text",
-    aiBubble: "--voice-ai-bubble",
-    aiText: "--voice-ai-text"
-  };
-  const styles = {};
-  Object.entries(colors).forEach(([key, value]) => {
-    const varName = mapping[key];
-    if (varName && value) {
-      const hsl = hexToHSL(value);
-      if (hsl) {
-        styles[varName] = hsl.toString();
-        if (key === "primary") {
-          styles["--indicator-bg"] = hsl.toString();
-          styles["--voice-accent-light"] = currentTheme === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
-        }
-      }
-    }
-  });
-  return styles;
-};
 var ChatPopup = ({
   isOpen,
   isMinimized,
@@ -15494,8 +15471,8 @@ var ChatPopup = ({
           "div",
           {
             style: {
-              background: "hsl(var(--voice-accent-light))",
-              color: "hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-status-bg))",
+              color: "hsl(var(--voice-status-text))",
               minHeight: "16px",
               display: "flex",
               alignItems: "center",
@@ -15939,8 +15916,8 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
-              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
               color: "#fff",
               fontSize: 12,
               fontWeight: 700,
@@ -15963,8 +15940,8 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
-              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
               color: "#fff",
               fontSize: 12,
               fontWeight: 700,
@@ -16002,17 +15979,14 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
     rightBorder2: {
       position: "absolute",
       top: 0,
-      right: 0,
-      bottom: 0,
-      width: "8px",
-      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent)))",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -16021,9 +15995,7 @@ var BorderGlow = ({ isActive }) => {
       position: "absolute",
       top: 0,
       right: 0,
-      bottom: 0,
-      width: "16px",
-      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -16034,7 +16006,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -16043,8 +16015,7 @@ var BorderGlow = ({ isActive }) => {
       top: 0,
       left: 0,
       bottom: 0,
-      width: "8px",
-      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent)))",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -16054,8 +16025,7 @@ var BorderGlow = ({ isActive }) => {
       top: 0,
       left: 0,
       bottom: 0,
-      width: "16px",
-      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -16066,7 +16036,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#9a92f6",
+      background: "hsl(var(--voice-accent))",
       borderBottomRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -16078,7 +16048,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#A39EEC",
+      background: "hsl(var(--voice-accent))",
       borderBottomLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -16090,7 +16060,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#8177ed",
+      background: "hsl(var(--voice-accent))",
       borderTopLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -16102,7 +16072,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#6257d9",
+      background: "hsl(var(--voice-accent))",
       borderTopRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -18492,47 +18462,7 @@ var MicButton = ({
     }
   };
   const generateMicButtonGradient = () => {
-    const colors = currentTheme === "light" ? theme?.light : theme?.dark;
-    if (colors?.primary) {
-      const hsl = hexToHSL(colors.primary);
-      if (hsl) {
-        const lightHsl = `${hsl.h} ${hsl.s}% ${Math.min(hsl.l + 10, 100)}%`;
-        return `radial-gradient(circle at 50% 0%, hsl(${lightHsl}), hsl(${hsl.toString()}))`;
-      }
-    }
-    return currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
-  };
-  const generateThemeStyles2 = (theme2, currentTheme2 = "dark") => {
-    if (!theme2) return {};
-    const colors = currentTheme2 === "light" ? theme2.light : theme2.dark;
-    if (!colors) return {};
-    const mapping = {
-      primary: "--voice-accent",
-      background: "--voice-bg",
-      surface: "--voice-surface",
-      border: "--voice-border",
-      text: "--voice-text",
-      textMuted: "--voice-text-muted",
-      userBubble: "--voice-user-bubble",
-      userText: "--voice-user-text",
-      aiBubble: "--voice-ai-bubble",
-      aiText: "--voice-ai-text"
-    };
-    const styles = {};
-    Object.entries(colors).forEach(([key, value]) => {
-      const varName = mapping[key];
-      if (varName && value) {
-        const hsl = hexToHSL(value);
-        if (hsl) {
-          styles[varName] = hsl.toString();
-          if (key === "primary") {
-            styles["--indicator-bg"] = hsl.toString();
-            styles["--voice-accent-light"] = currentTheme2 === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
-          }
-        }
-      }
-    });
-    return styles;
+    return "radial-gradient(circle at 50% 0%, hsl(var(--voice-accent-vibrant)), hsl(var(--voice-accent-dark)))";
   };
   const micButtonGradient = generateMicButtonGradient();
   const buttonStyles = {
@@ -18569,18 +18499,18 @@ var MicButton = ({
     switch (micState) {
       case "listening":
         baseStyle.transform = "scale(1.05)";
-        baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
+        baseStyle.boxShadow = "0 25px 50px -12px hsla(var(--voice-accent) / 0.6)";
         break;
       case "thinking":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
         break;
       case "replying":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
         break;
       default:
-        baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+        baseStyle.boxShadow = "0 10px 15px -3px hsla(var(--voice-accent) / 0.3)";
         break;
     }
     return baseStyle;
@@ -18593,7 +18523,7 @@ var MicButton = ({
       style: {
         ...buttonStyles.container,
         ...getPositionStyle(),
-        ...generateThemeStyles2(theme, currentTheme)
+        ...generateThemeStyles(theme, currentTheme)
       }
     },
     showLanguageSelector && showLanguageDropdown ? /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ React15.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ React15.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ React15.createElement(
@@ -18611,9 +18541,9 @@ var MicButton = ({
         className: "voice-chat-cancel-button",
         onClick: () => setShowLanguageSelector(false),
         style: {
-          background: currentTheme === "dark" ? "hsl(248 32% 17.5%)" : "#f6f5ff",
-          color: currentTheme === "dark" ? "hsl(252 20% 65%)" : "#6257d9",
-          border: `1px solid ${currentTheme === "dark" ? "hsl(248 32% 22%)" : "#c0bbfb"}`
+          background: currentTheme === "dark" ? "hsl(var(--voice-surface))" : "hsl(var(--voice-accent-light))",
+          color: currentTheme === "dark" ? "hsl(var(--voice-text-muted))" : "hsl(var(--voice-accent))",
+          border: "1px solid hsl(var(--voice-border))"
         }
       },
       "Cancel"
@@ -18623,9 +18553,9 @@ var MicButton = ({
         className: "voice-chat-confirm-button",
         onClick: handleLanguageConfirm,
         style: {
-          background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+          background: "hsl(var(--voice-accent))",
           color: "#fff",
-          border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`
+          border: "1px solid hsl(var(--voice-accent))"
         }
       },
       "Start Voice Chat"
@@ -18650,13 +18580,13 @@ var MicButton = ({
         onMouseEnter: (e2) => {
           if (micState === "idle") {
             e2.currentTarget.style.transform = "scale(1.05)";
-            e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+            e2.currentTarget.style.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
           }
         },
         onMouseLeave: (e2) => {
           if (micState === "idle") {
             e2.currentTarget.style.transform = "scale(1)";
-            e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+            e2.currentTarget.style.boxShadow = "0 10px 15px -3px hsla(var(--voice-accent) / 0.3)";
           }
         },
         "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuekit-ai/react",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {