@axos-web-dev/shared-components 1.0.100-dev.8 → 1.0.100-dev.80

package/dist/Calculators/SummitApyCalculator/index.js

@@ -8,8 +8,9 @@ import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../../icons/AxosX/index.js";
 import SvgComponent from "../../icons/AxosX/Blue.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                                       */
 /* empty css                                                   */
@@ -18,7 +19,7 @@ import { headerCell } from "../../Table/Table.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
 import clsx from "clsx";
-import { summit_container, summit_calc_icon, summit_header_container, summit_header_calc, summit_calc_text, summit_description_text, summit_calculator_wrapper, summit_input_container, summit_input_label, summit_d_label, summit_m_label, summit_calculator_input, summit_calculator_button, focus_row, summit_table_container, summit_calc_disclosure } from "./BalanceAPYCalculator.css.js";
+import { summit_container, summit_calc_icon, summit_header_container, summit_header_calc, summit_calc_text, summit_description_text, summit_table_container, summit_calculator_wrapper, summit_input_container, summit_input_label, summit_d_label, summit_m_label, summit_calculator_input, summit_calculator_button, focus_row, summit_calc_disclosure } from "./BalanceAPYCalculator.css.js";
 const SummitApyCalculator = ({
   headline,
   bodyCopy,
@@ -27,15 +28,24 @@ const SummitApyCalculator = ({
   variant
 }) => {
   const calc_variant = getVariant(variant);
+  const SUMMIT_APY = +process.env.NEXT_PUBLIC_SUMMIT_SAVINGS_APY;
   const [balance, setBalance] = useState(1e4);
-  const [axbAPY, _setAxbAPY] = useState(4);
-  const [axbEarning, setAxbEarning] = useState(400);
-  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.7);
-  const [capitalOneEarning, setcapitalOneEarning] = useState(370);
+  const [axbAPY, _setAxbAPY] = useState(SUMMIT_APY);
+  const [axbEarning, setAxbEarning] = useState(
+    SUMMIT_APY / 100 * balance
+  );
+  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.4);
+  const [capitalOneEarning, setcapitalOneEarning] = useState(
+    capitalOneAPY / 100 * balance
+  );
   const [bofaAPY, _setBofaAPY] = useState(0.04);
-  const [bofaEarning, setBofaEarning] = useState(4);
+  const [bofaEarning, setBofaEarning] = useState(
+    bofaAPY / 100 * balance
+  );
   const [chaseAPY, _setchaseAPY] = useState(0.01);
-  const [chaseEarning, setchaseEarning] = useState(1);
+  const [chaseEarning, setchaseEarning] = useState(
+    chaseAPY / 100 * balance
+  );
   const removeNonNumeric = (value) => {
     if (value === "") {
       value = "0";

package/dist/Calculators/calculator.css.d.ts

@@ -2,42 +2,36 @@ export declare const calculator: string;
 export declare const calculator_description: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const calculator_headline: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/Calculators/calculator.css.js

@@ -1,6 +1,7 @@
-import '../assets/Calculators/calculator.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/CallToActionBar/CallToActionBar.css.d.ts

@@ -1,4 +1,7 @@
 export declare const cta: string;
+export declare const cta_h2: string;
+export declare const is_sticky: string;
+export declare const cta_containment: string;
 export declare const cta_image_section: string;
 export declare const cta_image_section_overlap: string;
 export declare const cta_section_lg: string;
@@ -10,7 +13,6 @@ export declare const cta_section: string;
 export declare const cta_image_overlap: string;
 export declare const cta_body_section: string;
 export declare const sticky_banner: string;
-export declare const is_sticky: string;
 export declare const ctas_section: string;
 export declare const cta_text: string;
 export declare const cta_large_image: string;

package/dist/CallToActionBar/CallToActionBar.css.js

@@ -1,26 +1,33 @@
-import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
+/* empty css                                    */
+/* empty css                                          */
 /* empty css                                    */
 /* empty css                                   */
 var cta = "_1tdyl740";
-var cta_image_section = "_1tdyl741";
-var cta_image_section_overlap = "_1tdyl742";
-var cta_section_lg = "_1tdyl743";
-var cta_section_lg_overlap = "_1tdyl744";
-var cta_section_md = "_1tdyl745";
-var cta_section_md_overlap = "_1tdyl746";
-var cta_section_sm = "_1tdyl747";
-var cta_section = "_1tdyl748";
-var cta_image_overlap = "_1tdyl749";
-var cta_body_section = "_1tdyl74a";
-var sticky_banner = "_1tdyl74b";
-var is_sticky = "_1tdyl74c";
-var ctas_section = "_1tdyl74d";
-var cta_text = "_1tdyl74e";
-var cta_large_image = "_1tdyl74f";
+var cta_h2 = "_1tdyl741";
+var is_sticky = "_1tdyl742";
+var cta_containment = "_1tdyl743";
+var cta_image_section = "_1tdyl744";
+var cta_image_section_overlap = "_1tdyl745";
+var cta_section_lg = "_1tdyl746";
+var cta_section_lg_overlap = "_1tdyl747";
+var cta_section_md = "_1tdyl748";
+var cta_section_md_overlap = "_1tdyl749";
+var cta_section_sm = "_1tdyl74a";
+var cta_section = "_1tdyl74b";
+var cta_image_overlap = "_1tdyl74c";
+var cta_body_section = "_1tdyl74d";
+var sticky_banner = "_1tdyl74e";
+var ctas_section = "_1tdyl74f";
+var cta_text = "_1tdyl74g";
+var cta_large_image = "_1tdyl74h";
 export {
   cta,
   cta_body_section,
+  cta_containment,
+  cta_h2,
   cta_image_overlap,
   cta_image_section,
   cta_image_section_overlap,

package/dist/CallToActionBar/index.js

@@ -8,7 +8,7 @@ import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { getBannerSizeClassName } from "../utils/ctaOptions.js";
-import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_large_image, cta_text, ctas_section, cta_body_section } from "./CallToActionBar.css.js";
+import { sticky_banner, is_sticky, cta, cta_containment, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_large_image, cta_body_section, cta_text, cta_h2, ctas_section } from "./CallToActionBar.css.js";
 const CallToActionBar = ({
   bannerSize,
   image,
@@ -67,6 +67,7 @@ const CallToActionBar = ({
             "containment",
             "flex",
             "middle",
+            cta_containment,
             row_reverse && image ? "reversed" : ""
           ),
           style: { justifyContent: "center" },
@@ -106,8 +107,8 @@ const CallToActionBar = ({
                         (imageMobileView || !image) && "text_center"
                       ),
                       children: [
-                        headline && /* @__PURE__ */ jsx("h2", { className: "header_3", children: headline }),
-                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+                        headline && /* @__PURE__ */ jsx("h2", { className: clsx(cta_h2, "header_3"), children: headline }),
+                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { children: bodyCopy }) })
                       ]
                     }
                   ),

package/dist/Carousel/Carousel.css.d.ts

@@ -5,64 +5,53 @@ export declare const dots: string;
 export declare const headerCarousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const carousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: "1px solid #E9EBEF";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const descriptionCarousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -70,16 +59,16 @@ export declare const authorLocation: string;
 export declare const author: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -90,7 +79,7 @@ export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{}>;
 export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            borderColor: "#1E3860";
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
                     background: "#87B9D7";
@@ -98,7 +87,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         secondary: {
-            borderColor: "#1E3860";
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
                     background: "#87B9D7";
@@ -106,7 +95,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            borderColor: "#FFFFFF";
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
                     background: "#EBEBEB";
@@ -114,10 +103,10 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         quaternary: {
-            borderColor: "#FAA74A";
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
-                    background: "#FFE7D2";
+                    background: "#EBEBEB";
                 };
             };
         };

package/dist/Carousel/Carousel.css.js

@@ -1,5 +1,6 @@
-import '../assets/Carousel/Carousel.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                            */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/Carousel/index.js

@@ -6,8 +6,9 @@ import { getVariant } from "../utils/getVariant.js";
 import { section_text } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Modal/Modal.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
@@ -70,11 +71,13 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
+/* empty css                                                   */
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/authenticate.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+/* empty css                                    */
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
@@ -101,7 +104,6 @@ import "next/script.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                                      */
 import "next/navigation.js";
@@ -131,7 +133,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                  */
 /* empty css                                                */
 /* empty css                                              */
-import { icon, slide, authorLocation, author, quoteSetContainer, headerCarousel, descriptionCarousel, slides, carousel, dots, dot } from "./Carousel.css.js";
+import { icon, slide, authorLocation, author, quoteSetContainer, headerCarousel, descriptionCarousel, carousel, slides, dots, dot } from "./Carousel.css.js";
 import { useCarousel } from "./store.js";
 const iconVarints = /* @__PURE__ */ new Map([
   [

package/dist/Chatbot/AnimatedGradientBorder.css.d.ts

@@ -0,0 +1,3 @@
+export declare const angle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const gradientBorder: string;
+export declare const gradientFocus: string;

package/dist/Chatbot/AnimatedGradientBorder.css.js

@@ -0,0 +1,13 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                               */
+/* empty css                                    */
+/* empty css                                          */
+var angle = "var(--angle)";
+var gradientBorder = "ic6iil1";
+var gradientFocus = "ic6iil2";
+export {
+  angle,
+  gradientBorder,
+  gradientFocus
+};

package/dist/Chatbot/Bubble.css.d.ts

@@ -1,2 +1,6 @@
+export declare const borderHoverGradient: string;
 export declare const bubbleWrapper: string;
+export declare const bubbleButton: string;
+export declare const inner: string;
+export declare const bubbleText: string;
 export declare const svgFill: string;

package/dist/Chatbot/Bubble.css.js

@@ -1,7 +1,19 @@
-import '../assets/Chatbot/Bubble.css';/* empty css                          */
-var bubbleWrapper = "_7u9pv30";
-var svgFill = "_7u9pv31";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                               */
+/* empty css                                    */
+/* empty css                          */
+var borderHoverGradient = "_7u9pv31";
+var bubbleWrapper = "_7u9pv32";
+var bubbleButton = "_7u9pv33";
+var inner = "_7u9pv34";
+var bubbleText = "_7u9pv35";
+var svgFill = "_7u9pv36";
 export {
+  borderHoverGradient,
+  bubbleButton,
+  bubbleText,
   bubbleWrapper,
+  inner,
   svgFill
 };

package/dist/Chatbot/Bubble.d.ts

@@ -1,3 +1,5 @@
 import { PropsWithChildren } from 'react';
 
-export declare const Bubble: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const Bubble: ({ children, onClick, }: PropsWithChildren & {
+    onClick?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Bubble.js

@@ -1,20 +1,22 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { vars } from "../themes/axos.css.js";
+import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
-import { bubbleWrapper, svgFill } from "./Bubble.css.js";
+import { gradientBorder } from "./AnimatedGradientBorder.css.js";
+import { bubbleWrapper, inner, bubbleButton, svgFill, bubbleText } from "./Bubble.css.js";
 import { useOpenChat } from "./store/chat.js";
-const Bubble = ({ children }) => {
+const Bubble = ({
+  children,
+  onClick = () => {
+  }
+}) => {
   const isOpen = useOpenChat((state) => state.isOpen);
-  const toggle = useOpenChat((state) => state.toggle);
-  return /* @__PURE__ */ jsxs("div", { className: bubbleWrapper, onClick: toggle, children: [
-    /* @__PURE__ */ jsx("div", { className: "bubble-circle flex", children: /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: clsx(bubbleWrapper, gradientBorder), children: /* @__PURE__ */ jsx("div", { className: inner, children: /* @__PURE__ */ jsxs("button", { className: clsx(bubbleButton, inner), onClick, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsx("div", { className: "bubble-circle", children: /* @__PURE__ */ jsxs(
       motion.svg,
       {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "39",
-        height: "39",
-        viewBox: "0 0 39 39",
-        fill: "none",
         initial: { scale: 0.1, opacity: 0 },
         animate: {
           scale: 1,
@@ -24,28 +26,35 @@ const Bubble = ({ children }) => {
             opacity: { ease: [0, 0.71, 0.2, 1.01] }
           }
         },
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
         children: [
           /* @__PURE__ */ jsx(
             "path",
             {
-              className: svgFill,
-              d: "M3 7.5C3 5.01472 5.01472 3 7.5 3H22.5V0H7.5C3.35786 0 0 3.35786 0 7.5V16.5H3V7.5Z",
-              fill: "#98DDFF"
+              d: "M12.5277 6.78937C12.8911 6.78937 13.1852 7.08251 13.1853 7.44452C13.1852 7.80654 12.8911 8.10056 12.5277 8.10056H7.26386C6.5371 8.10064 5.94791 8.68761 5.94789 9.41175V14.6565C5.9479 15.3806 6.5371 15.9676 7.26386 15.9677H8.97488C9.12012 15.9678 9.23818 16.0854 9.23825 16.2301V19.6861L12.8932 16.0445C12.9424 15.9956 13.0092 15.9679 13.0786 15.9677H16.4765C17.2032 15.9676 17.7925 15.3806 17.7925 14.6565V13.273C17.7925 12.9111 18.0868 12.6172 18.45 12.617C18.8134 12.617 19.1084 12.9109 19.1084 13.273V14.6565C19.1084 16.1048 17.9301 17.2788 16.4765 17.2789H13.5149L10.169 20.6135C9.33997 21.4393 7.92245 20.8542 7.92229 19.6861V17.2789H7.26386C5.81026 17.2788 4.63193 16.1048 4.63193 14.6565V9.41175C4.63194 7.96341 5.81027 6.78945 7.26386 6.78937H12.5277Z",
+              fill: vars.chatbot.bubble.icon
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
-              className: svgFill,
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M13.5 30H12C8.68629 30 6 27.3137 6 24V12C6 8.68629 8.68629 6 12 6H33C36.3137 6 39 8.68629 39 12V24C39 27.3137 36.3137 30 33 30H26.25L18.6213 37.6287C16.7314 39.5186 13.5 38.1801 13.5 35.5074V30ZM16.5 35.5074V27H12C10.3431 27 9 25.6569 9 24V12C9 10.3431 10.3431 9 12 9H33C34.6569 9 36 10.3431 36 12V24C36 25.6569 34.6569 27 33 27H25.0074L16.5 35.5074Z",
-              fill: "#98DDFF"
+              d: "M11.2126 4.1661C11.5758 4.16638 11.8701 4.46027 11.8702 4.82214C11.87 5.18394 11.5757 5.47701 11.2126 5.47729H5.29036C4.20017 5.47729 3.31606 6.35831 3.31596 7.44452V10.7229C3.31577 11.0849 3.02083 11.3781 2.65753 11.3781C2.29436 11.3779 2.0002 11.0848 2 10.7229V7.44452C2.0001 5.63411 3.47333 4.1661 5.29036 4.1661H11.2126Z",
+              fill: vars.chatbot.bubble.icon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M17.7145 4.47582C17.9558 3.84136 18.8779 3.84142 19.1192 4.47582L19.6459 5.8611C19.7218 6.06058 19.8835 6.2175 20.0885 6.29132L21.511 6.80454C22.163 7.03936 22.163 7.93626 21.511 8.17107L20.0885 8.6843C19.8835 8.75812 19.7218 8.91504 19.6459 9.11452L19.1192 10.4998C18.8779 11.1342 17.9558 11.1343 17.7145 10.4998L17.1878 9.11452C17.1119 8.91508 16.9502 8.75811 16.7453 8.6843L15.3227 8.17107C14.6708 7.93622 14.6708 7.0394 15.3227 6.80454L16.7453 6.29132C16.9502 6.21751 17.1119 6.06054 17.1878 5.8611L17.7145 4.47582Z",
+              fill: vars.chatbot.bubble.icon
             }
           )
         ]
       }
-    ) : /* @__PURE__ */ jsx("span", { className: "close-icon", children: /* @__PURE__ */ jsxs(
+    ) }) : /* @__PURE__ */ jsx("span", { className: "close-icon", children: /* @__PURE__ */ jsxs(
       motion.svg,
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -91,9 +100,10 @@ const Bubble = ({ children }) => {
           )
         ]
       }
-    ) }) }) }),
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: bubbleText, children: "Ask Evo AI" }),
     children
-  ] });
+  ] }) }) });
 };
 export {
   Bubble

package/dist/Chatbot/Chat.js

@@ -33,7 +33,6 @@ function Chat() {
     let chatConnectedHandler;
     async function initChat() {
       const { Client, consoleLoggerHandler, Logger } = await import("@ujet/websdk-headless");
-      console.log("this", isMounted);
       Logger.addHandler(consoleLoggerHandler);
       clientRef.current = new Client({
         companyId,
@@ -71,14 +70,11 @@ function Chat() {
           menus?.menus[5].id
         );
       }
-      console.log("this");
       identityHandler = (identity) => {
         if (!isMounted.current) return;
         console.log("identity:", identity);
       };
       messageHandler = (msg) => {
-        console.log("new message:", msg);
-        console.log("addMessage:", msg);
         addMessage(msg);
       };
       chatUpdatedHandler = (chat) => {
@@ -87,13 +83,11 @@ function Chat() {
       chatConnectedHandler = async () => {
         console.log("connected");
         const messagesFetched = await clientRef.current?.fetchMessages();
-        console.log("[messages]:", messagesFetched);
         addMessages(messagesFetched || []);
       };
       memberJoinedHandler = (identity) => {
         console.log("member joined:", identity);
       };
-      console.log(isMounted.current);
       clientRef.current?.on("authenticated", () => {
         console.log("authenticated");
       });
@@ -144,7 +138,6 @@ function Chat() {
           const form = e.target;
           const input = form.elements[0];
           const message = input.value;
-          console.log("Sending message:", message);
           try {
             await clientRef.current?.sendTextMessage(message);
             input.value = "";