@axos-web-dev/shared-components 1.0.77-patch.8 → 1.0.77-patch.9

package/dist/VideoTile/VideoTile.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import "../icons/ArrowIcon/ArrowIcon.css.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+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";
-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                                */
+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/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                                                    */
@@ -12,7 +12,120 @@ import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/Downl
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 import { VideoInit } from "./VideoInit.js";
-import { video_tile, video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
+import { video_tile, video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, transcript_content, expand_icon, show, hide_transcript } from "./VideoTile.css.js";
+import { ModalWrapper } from "../ImageBillboard/ExitIntentModal/ModalWrapper.js";
+import { useRef } from "react";
+import { IconBillboard } from "../IconBillboard/IconBillboard.js";
+import "../IconBillboard/IconBillboard.css.js";
+import "../utils/allowedAxosDomains.js";
+import "clsx";
+/* empty css                                          */
+/* empty css                                          */
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import "../Article/Article.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Chevron/Chevron.css.js";
+/* empty css                                */
+import "../Modal/contextApi/store.js";
+import "../Button/Button.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+import "../Calculators/calculator.css.js";
+import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import "../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+import "../Input/Dropdown.css.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
+import "../Input/RadioButton.js";
+import "react-hook-form";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Inputs/Input.css.js";
+/* empty css                                                         */
+import "../Hyperlink/Hyperlink.css.js";
+/* empty css                                                      */
+import "iframe-resizer";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
+import "../Input/PercentageInput.js";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+/* empty css                                    */
+import "react-dom";
+/* empty css                                */
+import "../Auth/SignInPassword.js";
+/* empty css                                              */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
+import "next/image.js";
+import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                          */
+/* empty css                                                         */
+/* empty css                                            */
+import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
+/* empty css                                              */
+/* empty css                                                      */
+/* empty css                                            */
+/* empty css                                    */
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                                      */
+import "next/navigation.js";
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
+/* empty css                                                   */
+import "../NavigationMenu/AxosBank/NavData.js";
+/* empty css                                                      */
+/* empty css                                                       */
+import "../NavigationMenu/AxosALTS/NavData.js";
+/* empty css                                                   */
+/* empty css                                                     */
+import "../NavigationMenu/LaVictoire/NavData.js";
+import "../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* empty css                                                 */
+/* empty css                                          */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+/* empty css                                        */
+/* empty css                                */
+/* empty css                                                  */
+/* empty css                                                */
+/* empty css                                              */
 const VideoTile = ({
   //   ariaLabel,
   title,
@@ -24,13 +137,76 @@ const VideoTile = ({
   transcript,
   id,
   description,
-  internalName
+  internalName,
+  enableModal = false
 }) => {
   const [on, toggle] = useToggle(false);
+  const modalRef = useRef(null);
   const handleToggleClick = (event) => {
     event.preventDefault();
     toggle();
   };
+  let transcriptSection = null;
+  if (transcript) {
+    if (enableModal) {
+      transcriptSection = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: `${transcript_container}`, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: `${toggle_container}`,
+            "aria-expanded": on,
+            href: "#",
+            "aria-label": "",
+            onClick: handleToggleClick,
+            children: /* @__PURE__ */ jsxs("span", { className: `${transcript_btn}`, children: [
+              "Review transcript ",
+              /* @__PURE__ */ jsx(SvgArrowIcon, { variant: "primary" })
+            ] })
+          }
+        ) }),
+        on && /* @__PURE__ */ jsx(ModalWrapper, { onClose: () => toggle(), modalRef, children: /* @__PURE__ */ jsx(
+          IconBillboard,
+          {
+            body: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  maxHeight: "80vh",
+                  overflowY: "auto",
+                  textAlign: "left"
+                },
+                children: /* @__PURE__ */ jsx(ReactMarkdown, { className: `${transcript_content}`, children: transcript })
+              }
+            )
+          }
+        ) })
+      ] });
+    } else {
+      transcriptSection = /* @__PURE__ */ jsxs("div", { className: `${transcript_container}`, children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            className: `${toggle_container}`,
+            "aria-expanded": on,
+            href: "#",
+            "aria-label": "",
+            onClick: handleToggleClick,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `${transcript_btn}`, children: "Review transcript" }),
+              /* @__PURE__ */ jsx("span", { className: expand_icon, "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            className: `${transcript_content} ${on ? show : hide_transcript}`,
+            children: transcript
+          }
+        ) })
+      ] });
+    }
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -68,29 +244,7 @@ const VideoTile = ({
               )
             }
           ),
-          transcript && /* @__PURE__ */ jsxs("div", { className: `${transcript_container}`, children: [
-            /* @__PURE__ */ jsxs(
-              "a",
-              {
-                className: `${toggle_container}`,
-                "aria-expanded": on,
-                href: "#",
-                "aria-label": "",
-                onClick: handleToggleClick,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: `${transcript_btn}`, children: "Review transcript" }),
-                  /* @__PURE__ */ jsx("span", { className: expand_icon, "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              ReactMarkdown,
-              {
-                className: `${transcript_content} ${on ? show : hide_transcript}`,
-                children: transcript
-              }
-            ) })
-          ] })
+          transcriptSection
         ] })
       ]
     },

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";
-import '../assets/VideoTile/VideoTile.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/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                                */
+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/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                                                    */
@@ -85,6 +85,9 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 /* empty css                                            */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "next/script.js";
+import { VideoTile } from "../VideoTile/VideoTile.js";
+/* empty css                                        */
 /* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
@@ -118,9 +121,6 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                */
 /* empty css                                                  */
 /* empty css                                                */
-import "next/script.js";
-import { VideoTile } from "../VideoTile/VideoTile.js";
-/* empty css                                        */
 import { video_tile_set, grid_wrapper, grid_3, grid_2 } from "./VideoWrapper.css.js";
 const VideoWrapper = ({
   title,

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -48,6 +48,9 @@
 ._18ygy9m5 .billboard {
   width: 100%;
 }
+._1m7m2a8 {
+  display: inline-block;
+}
 ._1073cm80 ._1m7m2a9 {
   -webkit-background-clip: text;
   background-image: var(--_1073cm84);
@@ -125,7 +128,7 @@
   width: 100%;
 }
 ._1m7m2ao {
-  padding: 32px 28px;
+  padding: 32px 40px;
   width: 100%;
   max-width: 50%;
 }
@@ -217,7 +220,7 @@
 ._1m7m2a13 > p {
   white-space: break-spaces;
 }
-main > div:nth-last-child(2) > ._1m7m2a0 {
+main > div:nth-last-child(2) > ._1m7m2a0:not(._1m7m2ax) {
   margin-bottom: 3.5rem;
 }
 ._1m7m2a15 {
@@ -271,6 +274,9 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
 .stacked {
   gap: 56px;
 }
+.stacked:first-child {
+  padding-top: 56px;
+}
 .stacked > .billboard {
   grid-column: 1;
 }
@@ -307,7 +313,7 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
 .section_spacer:has(> ._1m7m2ax) {
   padding-block: 56px;
 }
-.section_spacer:has(> ._1m7m2ax) + .section_spacer:has(> ._1m7m2ax) {
+.section_spacer:has(._1m7m2ax) + .section_spacer:has(._1m7m2ax) {
   margin-top: 0;
 }
 .section_spacer:has(._1m7m2ax) ._1m7m2an {
@@ -389,6 +395,9 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2ao {
     max-width: 100%;
   }
+  ._1m7m2ax._1m7m2a0 {
+    flex-direction: column-reverse;
+  }
   ._1m7m2a1f {
     display: block;
     padding-top: 85px;
@@ -412,9 +421,7 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2ax ._1m7m2ao {
     text-align: center;
     padding-inline: 14px;
-  }
-  ._1m7m2ax:not(.reversed) ._1m7m2ao {
-    padding-bottom: 0;
+    padding-block: 0 1.5rem;
   }
   ._1m7m2ax ._1m7m2ao :is(ul,ol) {
     text-align: left;
@@ -431,11 +438,11 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2a12 {
     font-size: 20px;
   }
-  main > div:nth-last-child(2) > ._1m7m2a0 {
+  main > div:nth-last-child(2) > ._1m7m2a0:not(._1m7m2ax) {
     margin-bottom: 42px;
   }
   ._1m7m2a1e {
-    width: auto;
+    width: min(475px, 100%);
   }
   ._1m7m2a1g {
     width: min(592px, 100%);
@@ -445,6 +452,9 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
     padding: 32px;
     width: min(33rem, calc(100% - 2rem));
   }
+  ._1m7m2a1g .billboard:not(.reversed) {
+    flex-direction: column-reverse;
+  }
   ._1m7m2a1g ._1m7m2aj img {
     object-fit: cover;
   }
@@ -457,6 +467,9 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   .stacked {
     gap: 42px;
   }
+  .stacked:first-child {
+    padding-top: 42px;
+  }
   .section_spacer:has(> ._1m7m2ax) {
     padding-block: 42px;
   }
@@ -468,12 +481,15 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._18ygy9m5 ._1m7m2av {
     min-height: 200px;
   }
-  main > div:nth-last-child(2) > ._1m7m2a0 {
+  main > div:nth-last-child(2) > ._1m7m2a0:not(._1m7m2ax) {
     margin-bottom: 2rem;
   }
   .stacked {
     gap: 2rem;
   }
+  .stacked:first-child {
+    padding-top: 2rem;
+  }
   .section_spacer:has(> ._1m7m2ax) {
     padding-block: 2rem;
   }
@@ -497,7 +513,7 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   }
   ._1m7m2ax.reversed ._1m7m2ao {
     padding-left: 0;
-    padding-right: 28px;
+    padding-right: 40px;
   }
   .stacked > .billboard {
     flex-direction: row;
@@ -547,11 +563,6 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
     padding: 48px;
   }
 }
-@media screen and (max-width: 1024px) {
-  ._1m7m2a1g .billboard:not(.reversed) {
-    flex-direction: column-reverse;
-  }
-}
 @media screen and (max-width: 550px) {
   ._1m7m2a1h {
     right: 1.65rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.77-patch.8",
+  "version": "1.0.77-patch.9",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",