@axos-web-dev/shared-components 1.0.100-dev.7 → 1.0.100-dev.9

package/dist/Calculators/BuyDownCalculator/index.js

@@ -719,7 +719,7 @@ const BuyDownCalculator = ({
                         id: "mooringOutsideContinentalUS",
                         ...register("mooringOutsideContinentalUS"),
                         value: 0.5,
-                        radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\n                                    Hawaii, and Alaska) (Does not apply to Full Time Charter)\n                                    +0.500",
+                        radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\r\n                                    Hawaii, and Alaska) (Does not apply to Full Time Charter)\r\n                                    +0.500",
                         groupName: "dependentInputs",
                         disabled: disableMooringOutside
                       }

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

@@ -15,3 +15,4 @@ export declare const endChatButtonStyle: string;
 export declare const chatbotMenu: string;
 export declare const chatbotMenuItem: string;
 export declare const chatNetworkStatus: string;
+export declare const chatFinishDialog: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -16,9 +16,11 @@ var endChatButtonStyle = "_13n1jqkd";
 var chatbotMenu = "_13n1jqke";
 var chatbotMenuItem = "_13n1jqkf";
 var chatNetworkStatus = "_13n1jqkg";
+var chatFinishDialog = "_13n1jqkh";
 export {
   arrowFill,
   button_reset,
+  chatFinishDialog,
   chatNetworkStatus,
   chat_title,
   chatbotMenu,

package/dist/Chatbot/ChatWindow.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
-import React, { useRef, useEffect, Fragment } from "react";
+import React, { useRef, useEffect, Fragment as Fragment$1 } from "react";
 import ReactMarkdown from "react-markdown";
 import { useNetworkState, useMount } from "react-use";
 import remarkGfm from "remark-gfm";
-import { windowBarStyle, chat_title, chatbotMenuItem, chatbotMenu, button_reset, arrowFill, chatNetworkStatus, notificationStyle, messageStyle, inline_button_wrapper, inline_button, endChatButtonStyle, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
+import { windowBarStyle, chat_title, chatbotMenuItem, chatbotMenu, chatFinishDialog, endChatButtonStyle, button_reset, arrowFill, chatNetworkStatus, notificationStyle, messageStyle, inline_button_wrapper, inline_button, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
 import { useOpenChat } from "./store/chat.js";
 const ChatWindow = ({
@@ -88,46 +88,75 @@ const ChatWindow = ({
           children: "Finish chat"
         }
       ) }) }),
-      showEndChatDialog && /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          open: showEndChatDialog,
-          style: {
-            padding: "1rem",
-            borderRadius: 8,
-            background: "#fff",
-            color: "#000",
-            border: "none",
-            outline: "none",
-            maxWidth: "90%",
-            top: "25%"
-          },
-          children: /* @__PURE__ */ jsxs("form", { method: "dialog", children: [
-            /* @__PURE__ */ jsx("p", { children: "are you sure you want to end this chat?" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "submit",
-                onClick: () => {
-                  endChat();
-                  setShowEndChatDialog(false);
-                },
-                children: "Yes"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setShowEndChatDialog(false);
-                },
-                children: "No"
-              }
-            )
-          ] })
-        }
-      ),
+      showEndChatDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              background: "#00000080",
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 999,
+              opacity: 0.75
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            open: showEndChatDialog,
+            style: {
+              padding: "1rem",
+              borderRadius: 8,
+              background: "#fff",
+              color: "#000",
+              border: `1px solid ${endUserBg}`,
+              outline: "none",
+              maxWidth: "90%",
+              top: "25%",
+              marginInline: "auto",
+              zIndex: 1e3
+            },
+            children: /* @__PURE__ */ jsxs("form", { method: "dialog", className: chatFinishDialog, children: [
+              /* @__PURE__ */ jsx("p", { children: "Are you sure you want to end this chat?" }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { display: "flex", gap: "1rem", marginTop: "1rem" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: endChatButtonStyle,
+                        type: "submit",
+                        onClick: () => {
+                          endChat();
+                          setShowEndChatDialog(false);
+                        },
+                        children: "Yes"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: endChatButtonStyle,
+                        type: "button",
+                        onClick: () => {
+                          setShowEndChatDialog(false);
+                        },
+                        children: "No"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ] }),
       onClose && /* @__PURE__ */ jsx(
         "button",
         {
@@ -156,7 +185,7 @@ const ChatWindow = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: mounted && !state.online ? /* @__PURE__ */ jsxs(
+    mounted && !state.online ? /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
@@ -178,9 +207,9 @@ const ChatWindow = ({
           "You are currently disconnected. Please check your connection."
         ]
       }
-    ) : null }),
+    ) }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
-      messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
         msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx("div", { className: notificationStyle, children: "We are connecting you with a human agent..." }, msg.$index),
         msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
           /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
@@ -282,7 +311,7 @@ const ChatWindow = ({
             index
           );
         }) }),
-        msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -332,6 +361,7 @@ const ChatWindow = ({
               onChange: (e) => setInput(e.target.value),
               placeholder: "Ask something...",
               className: inputStyle,
+              autoFocus: true,
               disabled: inputDisabled || status !== "connected"
             }
           ),

package/dist/Chatbot/index.js

@@ -4,7 +4,7 @@ import { bubbleWrapper, svgFill } from "./Bubble.css.js";
 import { Chatbot } from "./Chatbot.js";
 import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
-import { arrowFill, button_reset, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
+import { arrowFill, button_reset, chatFinishDialog, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
 import { useHeadlessChat } from "./useHeadlessChat.js";
@@ -15,6 +15,7 @@ export {
   arrowFill,
   bubbleWrapper,
   button_reset,
+  chatFinishDialog,
   chatNetworkStatus,
   chat_title,
   chatbotAXB,

package/dist/Chatbot/useHeadlessChat.js

@@ -68,9 +68,11 @@ function useHeadlessChat({
       if (debug) console.log("channelId:", menuRef.current);
       if (debug) console.log("channelId:", menuRef.current?.menus[5].id);
       try {
-        const chatId = localStorage.getItem("ujet:chat");
-        if (chatId) {
-          chatRef.current = await clientRef.current?.resumeChat(chatId);
+        chatRef.current = await clientRef.current?.loadOngoingChat();
+        if (chatRef.current != null) {
+          chatRef.current = await clientRef.current?.resumeChat(
+            chatRef.current?.state?.id
+          );
           if (debug) console.log("Resumed chatRef:", chatRef.current);
         } else {
           const custom_data = {

package/dist/Forms/FormEnums.js

@@ -48,7 +48,9 @@ const PurposeOfLoan = ["Bridge", "Construction"];
 const Purposes = [
   { value: "Purchase", text: "Purchase" },
   { value: "RefiCashout", text: "Refi Cashout" },
-  { value: "RefiRateTermLimitedCO", text: "Refi Rate-Term/Limited C.O." }
+  { value: "RefiRateTermLimitedCO", text: "Refi Rate-Term/Limited C.O." },
+  { value: "ConstructiontoPerm", text: "Construction to Perm" },
+  { value: "InvestorConstruction", text: "Investor Construction" }
 ];
 const RepresentativesFico = [
   { value: "780", text: "780+" },
@@ -65,6 +67,7 @@ const RepresentativesFico = [
 const DocType = [
   { value: "FullDoc", text: "Full Doc" },
   { value: "AssetDepletion", text: "Asset Depletion" },
+  { value: "AssetUtilization", text: "Asset Utilization" },
   { value: "PersonalBankStmt12Mos", text: "Personal Bank Stmt: 12 Mos" },
   { value: "BusinessBankStmt12Mos", text: "Business Bank Stmt: 12 Mos" },
   { value: "PersonalBankStmt24Mos", text: "Personal Bank Stmt: 24 Mos" },

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts

@@ -144,6 +144,7 @@ export declare const menuData: {
                 "ATM Locator": string;
                 Calculators: string;
             };
+            "Refer-a-Friend": string;
             Insights: string;
         };
         "Commercial Banking": {

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js

@@ -424,6 +424,9 @@ const menuData = {
           "{AXOSBANK}/tools/calculators/saving-to-start-a-business-calculator"
         )
       },
+      "Refer-a-Friend": findMoreAxosDomains(
+        "{AXOSBANK}/business/refer-a-friend"
+      ),
       Insights: findMoreAxosDomains("{AXOSBANK}/business/insights")
     },
     "Commercial Banking": {

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -2447,6 +2447,27 @@ function SubNavBar() {
                         ) })
                       ] })
                     ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex_row", children: [
+                      /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          src: `https://images.axos.com/o9ov1v03uwqk/6ninSDVeSycXICNX8zF4J3/75ccf4194f0b3e7209f4095457bce00d/nav-submenu-raf-icon.svg`,
+                          alt: "",
+                          width: 20,
+                          height: 20
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("ul", { className: `${styles.ml_8} list_unstyled`, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                        Link,
+                        {
+                          href: findMoreAxosDomains(
+                            "{AXOSBANK}/business/refer-a-friend"
+                          ),
+                          role: "heading",
+                          children: "Refer-a-Friend"
+                        }
+                      ) }) })
+                    ] }),
                     /* @__PURE__ */ jsxs("div", { className: "flex_row", children: [
                       /* @__PURE__ */ jsx(
                         Image,

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 @@
-import '../assets/StepItemSet/StepItemSet.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* 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/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" | "hint" | undefined;
+    popover?: "" | "auto" | "manual" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     onToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;

package/dist/WalnutIframe/wrapper.module.js

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

package/dist/assets/Chatbot/ChatWindow.css

@@ -203,4 +203,11 @@
 }
 ._1hpv6vm1 ._13n1jqkg {
   color: #323339;
+}
+._13n1jqkh {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
 }

package/dist/assets/StepItemSet/StepItemSet.css

@@ -72,6 +72,19 @@
   overflow: hidden;
   width: 48%;
 }
+._18par6fk {
+  border-radius: 8px;
+  min-height: 378px;
+  position: relative;
+  overflow: hidden;
+  width: 48%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+._18par6fk ._16puo4g0 {
+  width: 100%;
+}
 ._18par6fj img {
   height: 100%;
   inset: 0;
@@ -80,31 +93,31 @@
   position: absolute;
   width: 100%;
 }
-._18par6fk {
+._18par6fl {
   padding: 27px 48px;
   flex: 1 1 0%;
 }
-._18par6fl {
+._18par6fm {
   padding: 0;
   list-style: none;
   margin: 0;
 }
-._18par6fl > li + li > :first-child > :first-child {
+._18par6fm > li + li > :first-child > :first-child {
   padding-top: 24px;
 }
-._18par6fl > li + li > :last-child {
+._18par6fm > li + li > :last-child {
   padding-top: 24px;
 }
-._18par6fm > * + * {
+._18par6fn > * + * {
   margin-left: 48px;
 }
-._18par6fn {
+._18par6fo {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   max-width: 800px;
 }
-._18par6fn > * {
+._18par6fo > * {
   line-height: 1.5;
 }
 @media screen and (min-width:1024px) {
@@ -113,7 +126,7 @@
   }
 }
 @media screen and (max-width:1280px) {
-  ._18par6fk {
+  ._18par6fl {
     padding-left: 24px;
     padding-right: 0;
   }
@@ -129,14 +142,19 @@
     aspect-ratio: 16 / 9;
   }
   ._18par6fk {
+    width: 100%;
+    min-height: 183px;
+    aspect-ratio: 16 / 9;
+  }
+  ._18par6fl {
     padding: 0px;
     margin-top: 24px;
   }
-  ._18par6fm {
+  ._18par6fn {
     flex-direction: column;
     margin-top: 24px;
   }
-  ._18par6fm > * + * {
+  ._18par6fn > * + * {
     margin-left: 0px;
     margin-top: 24px;
   }

package/dist/assets/WalnutIframe/wrapper.css.css

@@ -1,49 +1,49 @@
-@keyframes _shimmer_13j22_1 {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-._wrapper_13j22_10 {
-  background: #1e3860;
-  border-radius: 8px;
-  height: 555px;
-  isolation: isolate;
-  margin-block: 48px;
-}
-
-section > ._wrapper_13j22_10:first-child {
-  margin-top: 0 !important;
-}
-
-._wrapper_13j22_10::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 190%;
-  height: 100%;
-  background: linear-gradient(
-    65deg,
-    rgba(255, 255, 255, 0) 20%,
-    rgba(255, 255, 255, 0.5) 50%,
-    rgba(255, 255, 255, 0) 80%
-  );
-  animation: _shimmer_13j22_1 1.3s infinite linear;
-  z-index: -1;
-}
-
-._wrapper_control_13j22_39 {
-  height: 100%;
-  width: 100%;
-  overflow-x: scroll;
-}
-
-@media (max-width: 1023px) {
-  ._wrapper_13j22_10 {
-    display: none;
-  }
-}
+@keyframes _shimmer_1jpv7_1 {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+._wrapper_1jpv7_19 {
+  background: #1e3860;
+  border-radius: 8px;
+  height: 555px;
+  isolation: isolate;
+  margin-block: 48px;
+}
+
+section > ._wrapper_1jpv7_19:first-child {
+  margin-top: 0 !important;
+}
+
+._wrapper_1jpv7_19::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 190%;
+  height: 100%;
+  background: linear-gradient(
+    65deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  animation: _shimmer_1jpv7_1 1.3s infinite linear;
+  z-index: -1;
+}
+
+._wrapper_control_1jpv7_77 {
+  height: 100%;
+  width: 100%;
+  overflow-x: scroll;
+}
+
+@media (max-width: 1023px) {
+  ._wrapper_1jpv7_19 {
+    display: none;
+  }
+}

package/dist/main.js

@@ -42,7 +42,7 @@ import { bubbleWrapper, svgFill } from "./Chatbot/Bubble.css.js";
 import { Chatbot } from "./Chatbot/Chatbot.js";
 import { chatbotAXB, chatbotUFB } from "./Chatbot/Chatbot.css.js";
 import { ChatWindow } from "./Chatbot/ChatWindow.js";
-import { arrowFill, button_reset, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./Chatbot/ChatWindow.css.js";
+import { arrowFill, button_reset, chatFinishDialog, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./Chatbot/ChatWindow.css.js";
 import { useOpenChat } from "./Chatbot/store/chat.js";
 import { useMessages } from "./Chatbot/store/messages.js";
 import { useHeadlessChat } from "./Chatbot/useHeadlessChat.js";
@@ -183,7 +183,7 @@ import { SocialMediaBar } from "./SocialMediaBar/index.js";
 import { StepItem } from "./StepItem/StepItem.js";
 import { bs_copy, bs_topic, bullet_details, li, line_points, point, step_num } from "./StepItem/StepItem.css.js";
 import { StepItemSet } from "./StepItemSet/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/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/StepItemSet.css.js";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table/Table.js";
 import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, highlight_th, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, table_section, td, th } from "./Table/Table.css.js";
 import { TextBlock } from "./TextBlock/TextBlock.js";
@@ -444,6 +444,7 @@ export {
   bs_image,
   bs_section,
   bs_topic,
+  bs_video,
   bs_wrapper,
   bubbleWrapper,
   bullet_details,
@@ -457,6 +458,7 @@ export {
   center_center,
   center_left,
   center_right,
+  chatFinishDialog,
   chatNetworkStatus,
   chat_title,
   chatbotAXB,

package/package.json

@@ -1,136 +1,136 @@
-{
-  "name": "@axos-web-dev/shared-components",
-  "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.7",
-  "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "dist/assets/**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig.build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "check-types": "tsc --pretty --noEmit",
-    "check-format": "prettier --check .",
-    "check-lint": "eslint . --ext ts --ext tsx --ext js",
-    "format": "prettier --write .",
-    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "npm:link": "npm run build && npm link"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@hookform/resolvers": "^3.10.0",
-    "@next-safe-action/adapter-react-hook-form": "^2.0.0",
-    "@react-input/mask": "^1.2.15",
-    "@react-input/number-format": "^1.1.3",
-    "@storybook/icons": "^1.3.0",
-    "@storybook/preview-api": "^8.4.7",
-    "@ts-stack/markdown": "^1.5.0",
-    "@types/iframe-resizer": "3.5.13",
-    "@ujet/websdk-headless": "^3.41.4",
-    "@vanilla-extract/css": "^1.16.1",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "antd": "^5.22.5",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.9.2",
-    "iframe-resizer": "^3.6.6",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "next-safe-action": "^8.0.2",
-    "react-date-picker": "^11.0.0",
-    "react-date-range": "^2.0.1",
-    "react-hook-form": "^7.54.2",
-    "react-markdown": "^9.1.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "react-use": "^17.6.0",
-    "react-wrap-balancer": "^1.1.1",
-    "remark-gfm": "^4.0.1",
-    "rsuite": "^5.75.0",
-    "slick-carousel": "^1.8.1",
-    "typed-css-modules": "^0.9.1",
-    "vite-plugin-svgr": "^4.3.0",
-    "zod": "^3.24.1",
-    "zustand": "^4.5.5"
-  },
-  "peerDependencies": {
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^4.0.3",
-    "next": "^14.1.4",
-    "react": "^18.2.0",
-    "react-date-range": "^2.0.1",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-mdx-gfm": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.6.14",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-prettier": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
-    "@types/lodash": "^4.17.17",
-    "@types/node": "^20.19.0",
-    "@types/react": "^18.3.23",
-    "@types/react-date-range": "^1.4.9",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.3.7",
-    "@types/react-slick": "^0.23.13",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/recipes": "^0.5.5",
-    "@vanilla-extract/vite-plugin": "^4.0.18",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "esbuild-vanilla-image-loader": "^0.1.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.4.5",
-    "husky": "^9.1.7",
-    "next": "^14.1.4",
-    "prettier": "3.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-svg-import": "^3.0.0",
-    "rollup-plugin-svgo": "^2.0.0",
-    "storybook": "^8.4.7",
-    "typescript": "^5.7.2",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-setting-css-module": "^1.1.4",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
-  "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "author": "axos-web-dev",
-  "license": "ISC"
-}
+{
+  "name": "@axos-web-dev/shared-components",
+  "description": "Axos shared components library for web.",
+  "version": "1.0.100-dev.9",
+  "type": "module",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "dist/assets/**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "check-types": "tsc --pretty --noEmit",
+    "check-format": "prettier --check .",
+    "check-lint": "eslint . --ext ts --ext tsx --ext js",
+    "format": "prettier --write .",
+    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "npm:link": "npm run build && npm link"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.10.0",
+    "@next-safe-action/adapter-react-hook-form": "^2.0.0",
+    "@react-input/mask": "^1.2.15",
+    "@react-input/number-format": "^1.1.3",
+    "@storybook/icons": "^1.3.0",
+    "@storybook/preview-api": "^8.4.7",
+    "@ts-stack/markdown": "^1.5.0",
+    "@types/iframe-resizer": "3.5.13",
+    "@ujet/websdk-headless": "^3.41.4",
+    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "antd": "^5.22.5",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.9.2",
+    "iframe-resizer": "^3.6.6",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "next-safe-action": "^8.0.2",
+    "react-date-picker": "^11.0.0",
+    "react-date-range": "^2.0.1",
+    "react-hook-form": "^7.54.2",
+    "react-markdown": "^9.1.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "react-use": "^17.6.0",
+    "react-wrap-balancer": "^1.1.1",
+    "remark-gfm": "^4.0.1",
+    "rsuite": "^5.75.0",
+    "slick-carousel": "^1.8.1",
+    "typed-css-modules": "^0.9.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "zod": "^3.24.1",
+    "zustand": "^4.5.5"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
+    "next": "^14.1.4",
+    "react": "^18.2.0",
+    "react-date-range": "^2.0.1",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.6.14",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^20.19.0",
+    "@types/react": "^18.3.23",
+    "@types/react-date-range": "^1.4.9",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/vite-plugin": "^4.0.18",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "esbuild-vanilla-image-loader": "^0.1.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.4.5",
+    "husky": "^9.1.7",
+    "next": "^14.1.4",
+    "prettier": "3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-svg-import": "^3.0.0",
+    "rollup-plugin-svgo": "^2.0.0",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-setting-css-module": "^1.1.4",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "author": "axos-web-dev",
+  "license": "ISC"
+}