@axos-web-dev/shared-components 1.0.100-dev.1 → 1.0.100-dev.10

package/dist/SocialMediaBar/iconsRepository.js

@@ -3,7 +3,7 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                */
+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/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.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                                                    */
@@ -67,12 +67,12 @@ import "../Auth/SignInPassword.js";
 /* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/authenticate.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";

package/dist/StepItem/StepItem.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/StepItem/StepItem.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                                    */

package/dist/StepItemSet/StepItemSet.css.d.ts

@@ -83,6 +83,7 @@ export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const sec_subtitle: string;
 export declare const tablet_col: string;
 export declare const bs_image: string;
+export declare const bs_video: string;
 export declare const steps_wrapper: string;
 export declare const ol: string;
 export declare const bs_btns: string;

package/dist/StepItemSet/StepItemSet.css.js

@@ -1,6 +1,8 @@
-/* empty css                                */
+import '../assets/StepItemSet/StepItemSet.css';import '../assets/VideoTile/VideoTile.css';import '../assets/Typography/Typography.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";
 var bs_section = createRuntimeFn({ defaultClassName: "_18par6f0", variantClassNames: { variant: { primary: "_18par6f1", secondary: "_18par6f2", tertiary: "_18par6f3", quaternary: "_18par6f4" } }, defaultVariants: {}, compoundVariants: [] });
@@ -11,15 +13,17 @@ var sec_title = createRuntimeFn({ defaultClassName: "_18par6fc", variantClassNam
 var sec_subtitle = "_18par6fh";
 var tablet_col = "_18par6fi";
 var bs_image = "_18par6fj";
-var steps_wrapper = "_18par6fk";
-var ol = "_18par6fl";
-var bs_btns = "_18par6fm";
-var bs_add_details = "_18par6fn";
+var bs_video = "_18par6fk";
+var steps_wrapper = "_18par6fl";
+var ol = "_18par6fm";
+var bs_btns = "_18par6fn";
+var bs_add_details = "_18par6fo";
 export {
   bs_add_details,
   bs_btns,
   bs_image,
   bs_section,
+  bs_video,
   bs_wrapper,
   modifier,
   ol,

package/dist/StepItemSet/StepItemSet.d.ts

@@ -13,5 +13,11 @@ export interface StepItemSetProps {
     stepItems?: StepItemProps[];
     callToActionRow?: boolean | ChevronProps[];
     additionalDetails?: string | ReactNode;
+    video?: {
+        videoId: string;
+        videoPlayer: string;
+        thubnailImage: string;
+        transcript?: string;
+    };
 }
 export declare const StepItemSet: FC<StepItemSetProps>;

package/dist/StepItemSet/StepItemSet.js

@@ -8,7 +8,14 @@ import { getVariant } from "../utils/getVariant.js";
 import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
 import { StepItem } from "../StepItem/StepItem.js";
 import "../StepItem/StepItem.css.js";
-import { bs_section, bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, steps_wrapper, ol, bs_btns, bs_add_details } from "./StepItemSet.css.js";
+import "next/script.js";
+import { VideoTile } from "../VideoTile/VideoTile.js";
+import '../assets/VideoTile/VideoTile.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                                        */
+import { bs_section, bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, bs_video, steps_wrapper, ol, bs_btns, bs_add_details } from "./StepItemSet.css.js";
 const StepItemSet = ({
   id,
   variant: fullVariant = "primary",
@@ -17,7 +24,8 @@ const StepItemSet = ({
   image,
   stepItems,
   callToActionRow,
-  additionalDetails
+  additionalDetails,
+  video
 }) => {
   const variant = getVariant(fullVariant);
   return /* @__PURE__ */ jsx("section", { className: `${bs_section({ variant })}`, id, children: /* @__PURE__ */ jsxs("div", { className: `${bs_wrapper} containment`, children: [
@@ -55,7 +63,18 @@ const StepItemSet = ({
       description && /* @__PURE__ */ jsx("div", { className: sec_subtitle, children: /* @__PURE__ */ jsx(Fragment, { children: description }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: `push_up_32 flex ${tablet_col}`, children: [
-      image && /* @__PURE__ */ jsx("div", { className: bs_image, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: "" }) }),
+      image && image.src ? /* @__PURE__ */ jsx("div", { className: bs_image, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: "" }) }) : video && video.videoId && /* @__PURE__ */ jsx("div", { className: bs_video, role: "presentation", children: /* @__PURE__ */ jsx(
+        VideoTile,
+        {
+          id: "video-tile",
+          videoId: video.videoId,
+          videoPlayer: video.videoPlayer,
+          thumbnailImage: video.thubnailImage,
+          displayType: "inline",
+          transcript: video.transcript,
+          enableModal: true
+        }
+      ) }),
       /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
         StepItem,
         {

package/dist/StepItemSet/index.js

@@ -1,11 +1,12 @@
 import { StepItemSet } from "./StepItemSet.js";
-import { bs_add_details, bs_btns, bs_image, bs_section, bs_wrapper, modifier, ol, sec_subtitle, sec_title, steps_wrapper, svg_logo, tablet_col } from "./StepItemSet.css.js";
+import { bs_add_details, bs_btns, bs_image, bs_section, bs_video, bs_wrapper, modifier, ol, sec_subtitle, sec_title, steps_wrapper, svg_logo, tablet_col } from "./StepItemSet.css.js";
 export {
   StepItemSet,
   bs_add_details,
   bs_btns,
   bs_image,
   bs_section,
+  bs_video,
   bs_wrapper,
   modifier,
   ol,

package/dist/Tab/Tab.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/Tab/Tab.css';import '../assets/Typography/Typography.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                          */

package/dist/Table/Table.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/Table/Table.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                         */

package/dist/Table/Table.d.ts

@@ -61,7 +61,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, colSpan,
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: "" | "auto" | "manual" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     onToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;

package/dist/Table/Table.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty 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                                                    */
@@ -11,7 +11,7 @@ import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { table_section, table_container, table_container_text, table_headline, table_description_text, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, td, th } from "./Table.css.js";
+import { table_section, table_container_text, table_headline, table_description_text, table_container, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, tableWrapper, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,

package/dist/TextBlock/TextBlock.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/TextBlock/TextBlock.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                             */

package/dist/TextBlock/TextBlock.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { textBlockSection, textBlockHeader } from "./TextBlock.css.js";
+import { textBlockHeader, textBlockSection } from "./TextBlock.css.js";
 const TextBlock = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/Topic/Topic.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/Topic/Topic.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                         */
 var topic_container = "un906l0";
 var topic_columns = "un906l1";

package/dist/TopicalNavItem/TopicalNavItem.css.js

@@ -1,4 +1,4 @@
-/* empty css                                  */
+import '../assets/TopicalNavItem/TopicalNavItem.css';/* empty css                                  */
 var picker_navItem = "dmebjx0";
 var picker_itemProduct = "dmebjx1";
 var picker_arrow = "dmebjx2";

package/dist/TopicalNavSet/TopicalNavSet.css.js

@@ -1,4 +1,4 @@
-/* empty css                                 */
+import '../assets/TopicalNavSet/TopicalNavSet.css';/* empty css                                 */
 var picker_section = "xbzzeo0";
 var picker_container = "xbzzeo1";
 var picker_orient = "xbzzeo2";

package/dist/Typography/Typography.css.js

@@ -1,4 +1,4 @@
-/* empty css                              */
+import '../assets/Typography/Typography.css';/* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var headerCssVariable = "var(--header-font-family)";
 var mainCssVariable = "var(--main-font-family)";

package/dist/VideoTile/VideoTile.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/VideoTile/VideoTile.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                                    */

package/dist/VideoTile/VideoTile.js

@@ -4,7 +4,7 @@ import SvgArrowIcon from "../icons/ArrowIcon/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";
-/* empty css                                */
+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/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/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.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                                                    */
@@ -75,12 +75,12 @@ import "../Auth/SignInPassword.js";
 /* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/authenticate.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";

package/dist/VideoWrapper/VideoWrapper.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';/* empty css                                */
 var video_tile_set = "_2i5u4u0";
 var grid_wrapper = "_2i5u4u1";
 var grid_2 = "_2i5u4u2";

package/dist/VideoWrapper/index.js

@@ -3,7 +3,7 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty 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/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.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                                                    */
@@ -68,12 +68,12 @@ import "../Auth/SignInPassword.js";
 /* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/authenticate.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";

package/dist/WalnutIframe/wrapper.module.js

@@ -1,4 +1,4 @@
-const wrapper = "_wrapper_13j22_10";
+import '../assets/WalnutIframe/wrapper.css.css';const wrapper = "_wrapper_13j22_10";
 const shimmer = "_shimmer_13j22_1";
 const wrapper_control = "_wrapper_control_13j22_39";
 const css = {

package/dist/assets/Chatbot/Bubble.css

@@ -1,51 +1,51 @@
-._7u9pv30 {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 9999;
-  max-height: 80%;
-  font-family: sans-serif;
-  line-height: 1;
-  width: 60px;
-  display: flex;
-  align-items: center;
-  border-radius: 50%;
-  background-color: rgb(30, 56, 105);
-  outline: 2px solid #fff;
+@keyframes fade-in-bounce {
+  0% {
+    transform: translate3d(100px,100px,0) scale(0.3);
+    opacity: 0;
+  }
+  50% {
+    transform: translate3d(-10px,-10px,0) scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0,0,0) scale(1);
+    opacity: 1;
+  }
 }
-._7u9pv30:hover {
-  transition: width 0.1s, border-radius 0.1s;
+@keyframes pulse {
+  0%,100% {
+    box-shadow: 0 0 0 0 rgba(0,123,255,0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(0,123,255,0);
+  }
 }
-._7u9pv31 {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background-color: rgb(30, 56, 105);
-  display: flex;
+._7u9pv30 {
   align-items: center;
-  justify-content: center;
+  animation: fade-in-bounce 2s cubic-bezier(0.65, 0.25, 0.14, 0.93) forwards, pulse 4.5s 0.5s;
+  background-color: #14263d;
+  border-radius: 50%;
+  bottom: 16px;
   cursor: pointer;
+  display: grid;
+  font-family: var(--main-font-family);
+  height: 68px;
+  line-height: 1;
+  outline: 2px solid #98DDFF;
+  place-items: center;
+  position: fixed;
+  right: 16px;
+  width: 68px;
+  z-index: 9999;
 }
-._7u9pv32 {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 50%;
-  background-color: rgb(30, 56, 105);
-  fill: #fff;
-  color: #fff;
+._1hpv6vm1 ._7u9pv30 {
+  animation: fade-in-bounce 2s cubic-bezier(0.65, 0.25, 0.14, 0.93) forwards;
+  background-color: #60707A;
+  outline: none;
 }
-._7u9pv32 svg {
-  width: 24px;
-  height: 24px;
-  fill: #fff;
+._7u9pv31 {
+  fill: #98DDFF;
 }
-._7u9pv31 img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
+._1hpv6vm1 ._7u9pv31 {
+  fill: #FFFFFF;
 }