@axos-web-dev/shared-components 1.0.5 → 1.0.7-7.1

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -1,21 +1,21 @@
 export declare const billboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
             border: "1px solid #D4D4D4";
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -61,12 +61,12 @@ export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -78,12 +78,12 @@ export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -92,10 +92,10 @@ export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -105,12 +105,12 @@ export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -122,12 +122,12 @@ export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -136,15 +136,16 @@ export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
 export declare const billboard_container: string;
 export declare const billboard_img: string;
+export declare const is_bg_img: string;
 export declare const billboard_body: string;
 export declare const billboard_header_section: string;
 export declare const billboard_ctas: string;
@@ -156,6 +157,8 @@ export declare const section_text_ImageBillboard: string;
 export declare const billboard_image: string;
 export declare const mh_330: string;
 export declare const image_background: string;
+export declare const image_inner_wrapper: string;
+export declare const image_based: string;
 export declare const rate_container: string;
 export declare const rate_pad: string;
 export declare const up_to: string;
@@ -163,3 +166,16 @@ export declare const rate_billboard: string;
 export declare const apy_billboard: string;
 export declare const body_copy: string;
 export declare const sub_bullets: string;
+export declare const top_left: string;
+export declare const top_center: string;
+export declare const top_right: string;
+export declare const center_left: string;
+export declare const center_right: string;
+export declare const center_center: string;
+export declare const bottom_left: string;
+export declare const bottom_right: string;
+export declare const bottom_center: string;
+export declare const remove_padding: string;
+export declare const exit_intent_backdrop: string;
+export declare const exit_intent: string;
+export declare const modal_close_button: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -11,24 +11,40 @@ var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames
 var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
 var billboard_container = "_1m7m2ai";
 var billboard_img = "_1m7m2aj";
-var billboard_body = "_1m7m2ak";
-var billboard_header_section = "_1m7m2al";
-var billboard_ctas = "_1m7m2am";
-var body = "_1m7m2an";
-var single_container = "_1m7m2ao";
-var two_inline = "_1m7m2ap";
-var three_inline = "_1m7m2aq";
-var section_text_ImageBillboard = "_1m7m2ar";
-var billboard_image = "_1m7m2as";
-var mh_330 = "_1m7m2at";
-var image_background = "_1m7m2au";
-var rate_container = "_1m7m2av";
-var rate_pad = "_1m7m2aw";
-var up_to = "_1m7m2ax";
-var rate_billboard = "_1m7m2ay";
-var apy_billboard = "_1m7m2az";
-var body_copy = "_1m7m2a10";
-var sub_bullets = "_1m7m2a11";
+var is_bg_img = "_1m7m2ak";
+var billboard_body = "_1m7m2al";
+var billboard_header_section = "_1m7m2am";
+var billboard_ctas = "_1m7m2an";
+var body = "_1m7m2ao";
+var single_container = "_1m7m2ap";
+var two_inline = "_1m7m2aq";
+var three_inline = "_1m7m2ar";
+var section_text_ImageBillboard = "_1m7m2as";
+var billboard_image = "_1m7m2at";
+var mh_330 = "_1m7m2au";
+var image_background = "_1m7m2av";
+var image_inner_wrapper = "_1m7m2aw";
+var image_based = "_1m7m2ax";
+var rate_container = "_1m7m2ay";
+var rate_pad = "_1m7m2az";
+var up_to = "_1m7m2a10";
+var rate_billboard = "_1m7m2a11";
+var apy_billboard = "_1m7m2a12";
+var body_copy = "_1m7m2a13";
+var sub_bullets = "_1m7m2a14";
+var top_left = "_1m7m2a15";
+var top_center = "_1m7m2a16";
+var top_right = "_1m7m2a17";
+var center_left = "_1m7m2a18";
+var center_right = "_1m7m2a19";
+var center_center = "_1m7m2a1a";
+var bottom_left = "_1m7m2a1b";
+var bottom_right = "_1m7m2a1c";
+var bottom_center = "_1m7m2a1d";
+var remove_padding = "_1m7m2a1e";
+var exit_intent_backdrop = "_1m7m2a1f";
+var exit_intent = "_1m7m2a1g";
+var modal_close_button = "_1m7m2a1h";
 export {
   apy_billboard,
   billboard,
@@ -40,18 +56,34 @@ export {
   billboard_img,
   body,
   body_copy,
+  bottom_center,
+  bottom_left,
+  bottom_right,
+  center_center,
+  center_left,
+  center_right,
+  exit_intent,
+  exit_intent_backdrop,
   header,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
+  is_bg_img,
   mh_330,
+  modal_close_button,
   rate_billboard,
   rate_container,
   rate_pad,
+  remove_padding,
   section_text_ImageBillboard,
   single_container,
   sub_bullets,
   supertag,
   three_inline,
+  top_center,
+  top_left,
+  top_right,
   two_inline,
   up_to
 };

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -1,6 +1,5 @@
 import { BulletItemProps } from '../BulletItem';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ImageInterface } from '../IconBillboard';
 import { QuaternaryTypes } from '../utils/variant.types';
 import { ReactNode } from 'react';
 
@@ -13,6 +12,16 @@ export interface ImageBillboardSetProps {
     variant: QuaternaryTypes;
     set?: boolean;
     bordered?: boolean;
+    layout?: "Inline" | "Stacked";
+}
+export interface BillboardImageInterface {
+    src: string;
+    alt?: string;
+    imageType?: "Image" | "Background Image";
+    imageAlignment?: string;
+    imageBackgroundColor?: string;
+    height?: string | number;
+    width?: string | number;
 }
 export interface ImageBillboardInterface {
     id: string;
@@ -24,11 +33,13 @@ export interface ImageBillboardInterface {
     variant: QuaternaryTypes;
     eyebrow: string | ReactNode;
     bullets: BulletItemProps[];
-    image?: ImageInterface;
+    image?: BillboardImageInterface;
     callToActionRow: ChevronProps[];
     set?: boolean;
     textImageLineOneSmall?: ReactNode | string;
     textImageLineTwoBig?: ReactNode | string;
     textImageLineThreeSmall?: ReactNode | string;
     internalName?: string;
+    exitIntent?: boolean;
+    layout?: ImageBillboardSetProps["layout"];
 }

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -1,3 +1,3 @@
 import { ImageBillboardInterface } from './ImageBillboard.interface';
 
-export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, set, textImageLineOneSmall, textImageLineTwoBig, textImageLineThreeSmall, internalName, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBillboard: ({ id, bodyCopy, bordered, bullets, callToActionRow, exitIntent, eyebrow, headline, image, imagePlacement: position, internalName, set, textImageLineOneSmall, textImageLineThreeSmall, textImageLineTwoBig, variant, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect, createElement } from "react";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
@@ -14,27 +14,34 @@ import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/Downl
 /* empty css                                                    */
 /* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
+import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
+import { useExitIntentModal } from "./ExitIntentModal/useExitIntentModal.js";
+import { ModalWrapper } from "./ExitIntentModal/ModalWrapper.js";
 import clsx from "clsx";
-import { billboard_img, image_background, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement } from "./ImageBillboard.css.js";
+import { billboard_img, center_center, remove_padding, image_inner_wrapper, image_background, is_bg_img, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement, image_based, bottom_right, bottom_center, bottom_left, center_right, center_left, top_right, top_center, top_left } from "./ImageBillboard.css.js";
 const ImageBillboard = ({
   id,
-  variant,
-  headline,
   bodyCopy,
   bordered = false,
   bullets,
   callToActionRow,
+  exitIntent = false,
   eyebrow,
+  headline,
   image,
   imagePlacement: position = "left",
+  internalName,
   set,
   textImageLineOneSmall,
-  textImageLineTwoBig,
   textImageLineThreeSmall,
-  internalName
+  textImageLineTwoBig,
+  variant
 }) => {
   const billboard_variant = getVariant(variant);
   position = position?.toLocaleLowerCase();
+  const { isVisible, close, modalRef } = useExitIntentModal(
+    exitIntent ?? false
+  );
   const headingRef = useRef(null);
   const [headingLevel, setHeadingLevel] = useState("h2");
   useEffect(() => {
@@ -48,34 +55,74 @@ const ImageBillboard = ({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsxs(
+  const imgAlignment = (alignment) => {
+    switch (alignment) {
+      case "Top Left":
+        return top_left;
+      case "Top Center":
+        return top_center;
+      case "Top Right":
+        return top_right;
+      case "Center Left":
+        return center_left;
+      case "Center Center":
+        return center_center;
+      case "Center Right":
+        return center_right;
+      case "Bottom Left":
+        return bottom_left;
+      case "Bottom Center":
+        return bottom_center;
+      case "Bottom Right":
+        return bottom_right;
+      default:
+        return center_center;
+    }
+  };
+  const renderBillboard = () => /* @__PURE__ */ jsxs(
     "div",
     {
       id: internalName?.replace(/ /g, "-") ?? id,
       className: clsx(
-        "billboard",
-        "containment",
+        "billboard rounded flex",
         billboard({ variant: billboard_variant }),
-        `rounded flex`,
         bordered && billboard_variant === "primary" ? "bordered" : "",
         imagePlacement({ position: position?.toLowerCase() }),
-        `${set ? "" : "containment"}`,
-        position === "right" && "reversed"
+        position === "right" && "reversed",
+        set ? "" : "containment",
+        image?.imageType === "Image" ? image_based : ""
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsxs("picture", { children: [
-          /* @__PURE__ */ jsx("source", { srcSet: `${image?.src}?fm=avif`, type: "image/avif" }),
-          /* @__PURE__ */ jsx("source", { srcSet: `${image?.src}?fm=webp`, type: "image/webp" }),
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              decoding: "async",
-              "data-nimg": 1,
-              src: `${image?.src}?q=85`,
-              alt: image?.alt ?? ""
-            }
-          )
-        ] }) }) : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "presentation",
+            className: clsx(
+              "rounded overflow_hidden flex",
+              imgAlignment(image?.imageAlignment ?? center_center),
+              image?.imageBackgroundColor === "transparent" ? remove_padding : "",
+              image_inner_wrapper
+            ),
+            style: image?.imageBackgroundColor ? { background: image?.imageBackgroundColor } : {},
+            children: /* @__PURE__ */ jsx(
+              OptimizeImage,
+              {
+                src: image?.src,
+                alt: image?.alt ?? "",
+                className: "img_fluid",
+                height: image?.height,
+                width: image?.width
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
+          OptimizeImage,
+          {
+            src: image?.src,
+            alt: image?.alt ?? "",
+            className: is_bg_img
+          }
+        ) }) }) : /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
@@ -105,12 +152,20 @@ const ImageBillboard = ({
                 headingLevel,
                 {
                   ref: headingRef,
-                  className: `header_3 ${header({ variant: billboard_variant })}`
+                  className: `header_3 ${header({ variant: billboard_variant })}`,
+                  id: exitIntent ? "exit-intent-heading" : void 0
                 },
                 headline
               )
             ] }),
-            bodyCopy && /* @__PURE__ */ jsx("div", { className: `push_up ${body_copy}`, children: bodyCopy }),
+            bodyCopy && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `push_up ${body_copy}`,
+                id: exitIntent ? "exit-intent-description" : void 0,
+                children: bodyCopy
+              }
+            ),
             bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up", children: bullets.map(
               ({ id: id2, icon, copy, subBullet }) => !subBullet ? /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
                 /* @__PURE__ */ jsx("div", { className: "img_item", children: billboard_variant ? /* @__PURE__ */ jsx(
@@ -183,6 +238,10 @@ const ImageBillboard = ({
     },
     id
   );
+  if (exitIntent) {
+    return isVisible ? /* @__PURE__ */ jsx(ModalWrapper, { modalRef, onClose: close, children: renderBillboard() }) : null;
+  }
+  return renderBillboard();
 };
 export {
   ImageBillboard

package/dist/ImageBillboard/index.js

@@ -1,5 +1,5 @@
 import { ImageBillboardSet } from "./ImageBillboard.js";
-import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, header, imagePlacement, image_background, mh_330, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
+import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, bottom_center, bottom_left, bottom_right, center_center, center_left, center_right, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, image_based, image_inner_wrapper, is_bg_img, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, remove_padding, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, top_center, top_left, top_right, two_inline, up_to } from "./ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
@@ -14,18 +14,34 @@ export {
   billboard_img,
   body,
   body_copy,
+  bottom_center,
+  bottom_left,
+  bottom_right,
+  center_center,
+  center_left,
+  center_right,
+  exit_intent,
+  exit_intent_backdrop,
   header,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
+  is_bg_img,
   mh_330,
+  modal_close_button,
   rate_billboard,
   rate_container,
   rate_pad,
+  remove_padding,
   section_text_ImageBillboard,
   single_container,
   sub_bullets,
   supertag,
   three_inline,
+  top_center,
+  top_left,
+  top_right,
   two_inline,
   up_to
 };

package/dist/ImageLink/ImageLink.d.ts

@@ -3,13 +3,13 @@ import { PropsWithChildren } from 'react';
 export interface ImageLinkProps extends PropsWithChildren {
     id: string;
     internalName: string;
-    title?: string;
     targetUrl?: string;
     image: {
         url: string;
         width?: string | number;
         heigth?: string | number;
+        altText?: string;
     };
 }
-declare const ImageLink: ({ id, image, title, targetUrl, children, }: ImageLinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageLink: ({ id, image, targetUrl, children }: ImageLinkProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageLink;

package/dist/ImageLink/ImageLink.js

@@ -3,7 +3,7 @@ import { Hyperlink } from "../Hyperlink/index.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/VideoTile.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.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/Modal/Modal.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/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/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.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                                */
+import '../assets/VideoWrapper/VideoWrapper.css';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/Modal/Modal.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/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                                                    */
@@ -15,9 +15,9 @@ import "clsx";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
+import { isValidElement } from "react";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-import { isValidElement } from "react";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Button/Button.css.js";
@@ -54,6 +54,12 @@ import "iframe-resizer";
 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                                                    */
@@ -70,6 +76,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                          */
 /* empty css                                                         */
+/* empty css                                            */
 import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 /* empty css                             */
@@ -86,9 +93,10 @@ 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";
-import "next/link.js";
 /* empty css                                                      */
 /* empty css                                                       */
 import "../NavigationMenu/AxosALTS/NavData.js";
@@ -104,6 +112,7 @@ import "react-slick";
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                        */
+/* empty css                                */
 /* empty css                                                  */
 /* empty css                                                */
 import "next/script.js";
@@ -111,14 +120,24 @@ import "next/script.js";
 /* empty css                                              */
 import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
-const ImageLink = ({
-  id,
-  image,
-  title,
-  targetUrl,
-  children
-}) => {
-  const withTargeturl = targetUrl !== void 0 ? /* @__PURE__ */ jsx(Hyperlink, { targetUrl, children: /* @__PURE__ */ jsx("img", { src: image.url, alt: title }) }) : /* @__PURE__ */ jsx("img", { src: image.url, alt: title });
+const ImageLink = ({ id, image, targetUrl, children }) => {
+  const withTargeturl = targetUrl !== void 0 ? /* @__PURE__ */ jsx(Hyperlink, { targetUrl, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: image.url,
+      alt: image.altText,
+      height: image.heigth,
+      width: image.width
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: image.url,
+      alt: image.altText,
+      height: image.heigth,
+      width: image.width
+    }
+  );
   return /* @__PURE__ */ jsx("div", { id: "id_" + id, className: imageLinkContainer, children: !isValidElement(children) ? withTargeturl : children });
 };
 export {