From 408aeb4df4538f8e23d4fd677a9592ecec918025 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 11 Apr 2024 10:07:03 +0200
Subject: [PATCH] :bug: (theme) Fix containers disabled bg should be
 transparent

---
 packages/embeds/js/package.json                  |  2 +-
 .../embeds/js/src/utils/setCssVariablesValue.ts  | 16 ++++++++++++----
 packages/embeds/nextjs/package.json              |  2 +-
 packages/embeds/react/package.json               |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index b40802cab8..2827340e80 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.66",
+  "version": "0.2.67",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/utils/setCssVariablesValue.ts b/packages/embeds/js/src/utils/setCssVariablesValue.ts
index 2e7bb059cd..134dacb6b1 100644
--- a/packages/embeds/js/src/utils/setCssVariablesValue.ts
+++ b/packages/embeds/js/src/utils/setCssVariablesValue.ts
@@ -325,7 +325,9 @@ const setHostBubbles = (
 
   documentStyle.setProperty(
     cssVariableNames.chat.hostBubbles.opacity,
-    isDefined(hostBubbles?.opacity)
+    hostBubbles?.backgroundColor === 'transparent'
+      ? '0'
+      : isDefined(hostBubbles?.opacity)
       ? hostBubbles.opacity.toString()
       : defaultOpacity.toString()
   )
@@ -397,7 +399,9 @@ const setGuestBubbles = (
 
   documentStyle.setProperty(
     cssVariableNames.chat.guestBubbles.opacity,
-    isDefined(guestBubbles?.opacity)
+    guestBubbles?.backgroundColor === 'transparent'
+      ? '0'
+      : isDefined(guestBubbles?.opacity)
       ? guestBubbles.opacity.toString()
       : defaultOpacity.toString()
   )
@@ -471,7 +475,9 @@ const setButtons = (
 
   documentStyle.setProperty(
     cssVariableNames.chat.buttons.opacity,
-    isDefined(buttons?.opacity)
+    buttons?.backgroundColor === 'transparent'
+      ? '0'
+      : isDefined(buttons?.opacity)
       ? buttons.opacity.toString()
       : defaultOpacity.toString()
   )
@@ -530,7 +536,9 @@ const setInputs = (
 
   documentStyle.setProperty(
     cssVariableNames.chat.inputs.opacity,
-    isDefined(inputs?.opacity)
+    inputs?.backgroundColor === 'transparent'
+      ? '0'
+      : isDefined(inputs?.opacity)
       ? inputs.opacity.toString()
       : defaultOpacity.toString()
   )
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 0b17fdee61..23b4f012ec 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.66",
+  "version": "0.2.67",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 1630f1162b..888673de8d 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.66",
+  "version": "0.2.67",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",