💄 Add backgroundColor theme field for Popup

And use it for the onboarding modal

Closes #375

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/js/src/features/popup/components/Popup.tsx

@@ -122,6 +122,10 @@ export const Popup = (props: PopupProps) => {
           <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <div
               class="relative h-[80vh] transform overflow-hidden rounded-lg text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+              style={{
+                'background-color':
+                  props.theme?.backgroundColor ?? 'transparent',
+              }}
               ref={botContainer}
             >
               <Bot {...botProps} prefilledVariables={prefilledVariables()} />

packages/js/src/features/popup/types.ts

@@ -2,5 +2,6 @@ export type PopupParams = {
   autoShowDelay?: number
   theme?: {
     width?: string
+    backgroundColor?: string
   }
 }