@axos-web-dev/shared-components 1.0.10 → 1.0.12

package/dist/Insight/Featured/CategorySelector.js

@@ -18,10 +18,10 @@ import "../../Chevron/Chevron.css.js";
 import "../../Accordion/Accordion.js";
 import "../../Accordion/Accordion.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
-import "react";
-import { LazyImage } from "../../utils/lazyImage/lazyImage.js";
+import { OptimizeImage } from "../../utils/optimizeImage/OptimizeImage.js";
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
+import "react";
 import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Button/Button.css.js";
@@ -63,7 +63,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";
@@ -79,6 +78,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                            */
 import "../../ImageBillboard/ImageBillboard.css.js";
 /* empty css                                           */
+import "next/image.js";
 import { featured_maingrid_img, featured_center_vertical, featured_maingrid_item } from "./Featured.css.js";
 /* empty css                          */
 /* empty css                            */
@@ -165,19 +165,17 @@ const CategorySelector = (props) => {
 const InsightItem = (props) => {
   const { id, image, readingTime, title: itemTitle, url } = props;
   return /* @__PURE__ */ jsxs("a", { id, href: url, className: clsx(selector_small_item), children: [
-    /* @__PURE__ */ jsxs("picture", { children: [
-      /* @__PURE__ */ jsx("source", { srcSet: `${image?.url}?fm=avif`, type: "image/avif" }),
-      /* @__PURE__ */ jsx("source", { srcSet: `${image?.url}?fm=webp`, type: "image/webp" }),
-      /* @__PURE__ */ jsx(
-        LazyImage,
-        {
-          src: `${image?.url}?q=85`,
-          alt: image?.alt ?? "",
-          className: clsx(featured_maingrid_img, selector_img),
-          height: 207
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+      OptimizeImage,
+      {
+        src: `${image?.url}`,
+        alt: image?.alt ?? "",
+        className: clsx(featured_maingrid_img, selector_img),
+        height: 207,
+        width: 368,
+        rootMargin: "210px"
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: clsx(featured_maingrid_item, selector_grid_content), children: [
       /* @__PURE__ */ jsx("h2", { className: clsx(title({ variant: "primary" }), selector_title), children: itemTitle ?? "" }),
       /* @__PURE__ */ jsxs("div", { children: [

package/dist/Insight/Featured/Featured.js

@@ -17,6 +17,7 @@ import "../../Accordion/Accordion.js";
 import "../../Accordion/Accordion.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
 import { Fragment } from "react";
+import Image from "next/image.js";
 import "../../Article/Article.css.js";
 import "../../Interstitial/Interstitial-variants.css.js";
 import "../../Chevron/Chevron.css.js";
@@ -64,7 +65,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 import "../../Carousel/index.js";
 /* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
-import Image from "next/image.js";
 import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/LargeBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";

package/dist/Insight/Featured/Header.js

@@ -15,6 +15,7 @@ import "../../Accordion/Accordion.js";
 import "../../Accordion/Accordion.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
 import "react";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../Interstitial/Interstitial-variants.css.js";
 import "../../Chevron/Chevron.css.js";
@@ -62,7 +63,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/Modal/Modal.js

@@ -12,6 +12,7 @@ import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/Vid
 import "clsx";
 import "react";
 import "../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../Article/Article.css.js";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
@@ -61,7 +62,6 @@ import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/NavigationMenu/AxosALTS/NavData.js

@@ -12,6 +12,7 @@ import "clsx";
 import "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -62,7 +63,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/NavigationMenu/AxosALTS/index.js

@@ -13,6 +13,7 @@ import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/VideoTi
 import { useState, useEffect } from "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -63,7 +64,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/NavigationMenu/AxosBank/NavBar.module.js

@@ -1,56 +1,56 @@
-import '../../assets/NavigationMenu/AxosBank/NavBar.css.css';const header = "_header_1qrpu_1";
-const wrapper = "_wrapper_1qrpu_9";
-const header_main_row = "_header_main_row_1qrpu_21";
-const mobile_header = "_mobile_header_1qrpu_23";
-const logo_wrap = "_logo_wrap_1qrpu_35";
-const primary_links = "_primary_links_1qrpu_43";
-const main_nav_link = "_main_nav_link_1qrpu_51";
-const sub_nav_link = "_sub_nav_link_1qrpu_115";
-const signin_wrap = "_signin_wrap_1qrpu_119";
-const signin_btn = "_signin_btn_1qrpu_121";
-const header_sub_row = "_header_sub_row_1qrpu_195";
-const signin_dropdown = "_signin_dropdown_1qrpu_259";
-const shadow = "_shadow_1qrpu_279";
-const signin_header = "_signin_header_1qrpu_299";
-const signin_subheader = "_signin_subheader_1qrpu_313";
-const opacity = "_opacity_1qrpu_357";
-const fadeInDown = "_fadeInDown_1qrpu_1";
-const signin_footer = "_signin_footer_1qrpu_369";
-const open = "_open_1qrpu_411";
-const dd_wrapper = "_dd_wrapper_1qrpu_435";
-const dd_media = "_dd_media_1qrpu_453";
-const dd_media_img = "_dd_media_img_1qrpu_463";
-const dd_site_navs = "_dd_site_navs_1qrpu_471";
-const dd_media_header = "_dd_media_header_1qrpu_485";
-const mt_8 = "_mt_8_1qrpu_505";
-const mt_16 = "_mt_16_1qrpu_513";
-const ml_8 = "_ml_8_1qrpu_521";
-const dd_media_cta = "_dd_media_cta_1qrpu_529";
-const reversed_row = "_reversed_row_1qrpu_593";
-const headline = "_headline_1qrpu_613";
-const nav_anchor = "_nav_anchor_1qrpu_629";
-const headline_cta = "_headline_cta_1qrpu_645";
-const site_lists = "_site_lists_1qrpu_675";
-const hamburger = "_hamburger_1qrpu_751";
-const mobile_only = "_mobile_only_1qrpu_779";
-const mobile_logo = "_mobile_logo_1qrpu_791";
-const highlight = "_highlight_1qrpu_801";
-const mobile_nav = "_mobile_nav_1qrpu_853";
-const mobile_opened = "_mobile_opened_1qrpu_875";
-const mobile_nav_item = "_mobile_nav_item_1qrpu_891";
-const has_dropdown = "_has_dropdown_1qrpu_921";
-const icon_wrap = "_icon_wrap_1qrpu_953";
-const mobile_footer = "_mobile_footer_1qrpu_963";
-const mobile_footer_content = "_mobile_footer_content_1qrpu_973";
-const mobile_footer_media = "_mobile_footer_media_1qrpu_1003";
-const footer_cta = "_footer_cta_1qrpu_1015";
-const inner_wrapper = "_inner_wrapper_1qrpu_1071";
-const btn = "_btn_1qrpu_1081";
-const sub_menu = "_sub_menu_1qrpu_1091";
-const main = "_main_1qrpu_51";
-const dd_footer = "_dd_footer_1qrpu_1141";
-const skip_btn = "_skip_btn_1qrpu_1157";
-const desktop_only = "_desktop_only_1qrpu_1247";
+import '../../assets/NavigationMenu/AxosBank/NavBar.css.css';const header = "_header_1nad4_1";
+const wrapper = "_wrapper_1nad4_5";
+const header_main_row = "_header_main_row_1nad4_11";
+const mobile_header = "_mobile_header_1nad4_12";
+const logo_wrap = "_logo_wrap_1nad4_18";
+const primary_links = "_primary_links_1nad4_22";
+const main_nav_link = "_main_nav_link_1nad4_26";
+const sub_nav_link = "_sub_nav_link_1nad4_58";
+const signin_wrap = "_signin_wrap_1nad4_60";
+const signin_btn = "_signin_btn_1nad4_61";
+const header_sub_row = "_header_sub_row_1nad4_98";
+const signin_dropdown = "_signin_dropdown_1nad4_130";
+const shadow = "_shadow_1nad4_140";
+const signin_header = "_signin_header_1nad4_150";
+const signin_subheader = "_signin_subheader_1nad4_157";
+const opacity = "_opacity_1nad4_179";
+const fadeInDown = "_fadeInDown_1nad4_1";
+const signin_footer = "_signin_footer_1nad4_185";
+const open = "_open_1nad4_206";
+const dd_wrapper = "_dd_wrapper_1nad4_218";
+const dd_media = "_dd_media_1nad4_227";
+const dd_media_img = "_dd_media_img_1nad4_232";
+const dd_site_navs = "_dd_site_navs_1nad4_236";
+const dd_media_header = "_dd_media_header_1nad4_243";
+const mt_8 = "_mt_8_1nad4_253";
+const mt_16 = "_mt_16_1nad4_257";
+const ml_8 = "_ml_8_1nad4_261";
+const dd_media_cta = "_dd_media_cta_1nad4_265";
+const reversed_row = "_reversed_row_1nad4_297";
+const headline = "_headline_1nad4_307";
+const nav_anchor = "_nav_anchor_1nad4_315";
+const headline_cta = "_headline_cta_1nad4_323";
+const site_lists = "_site_lists_1nad4_338";
+const hamburger = "_hamburger_1nad4_376";
+const mobile_only = "_mobile_only_1nad4_390";
+const mobile_logo = "_mobile_logo_1nad4_396";
+const highlight = "_highlight_1nad4_401";
+const mobile_nav = "_mobile_nav_1nad4_427";
+const mobile_opened = "_mobile_opened_1nad4_438";
+const mobile_nav_item = "_mobile_nav_item_1nad4_446";
+const has_dropdown = "_has_dropdown_1nad4_461";
+const icon_wrap = "_icon_wrap_1nad4_477";
+const mobile_footer = "_mobile_footer_1nad4_482";
+const mobile_footer_content = "_mobile_footer_content_1nad4_487";
+const mobile_footer_media = "_mobile_footer_media_1nad4_502";
+const footer_cta = "_footer_cta_1nad4_508";
+const inner_wrapper = "_inner_wrapper_1nad4_536";
+const btn = "_btn_1nad4_541";
+const sub_menu = "_sub_menu_1nad4_546";
+const main = "_main_1nad4_26";
+const dd_footer = "_dd_footer_1nad4_571";
+const skip_btn = "_skip_btn_1nad4_579";
+const desktop_only = "_desktop_only_1nad4_624";
 const styles = {
   header,
   wrapper,

package/dist/NavigationMenu/AxosBank/NavData.js

@@ -12,6 +12,7 @@ import "clsx";
 import "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -62,7 +63,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -13,6 +13,7 @@ import "clsx";
 import { useState, useRef, useEffect } from "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import Image from "next/image.js";
 import "../../Article/Article.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -64,7 +65,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 import "../../Carousel/index.js";
 /* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
-import Image from "next/image.js";
 import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/LargeBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";
@@ -141,8 +141,6 @@ function SubNavBar() {
     "/invest",
     "/tools"
   ];
-  if (!subNavPaths.some((el) => pathname?.includes(el) || isHomepage))
-    return null;
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -171,6 +169,9 @@ function SubNavBar() {
       }
     }
   };
+  if (!subNavPaths.some((el) => pathname?.includes(el) || isHomepage)) {
+    return null;
+  }
   return /* @__PURE__ */ jsx("div", { className: `${sub_nav} ${styles.desktop_only}`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsx("div", { className: styles.header_sub_row, children: /* @__PURE__ */ jsxs("nav", { children: [
     /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", role: "menubar", children: [
       (isHomepage || pathname?.includes("/personal") || pathname?.split("/")[1] == "invest" || pathname?.includes("/tools")) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -739,7 +740,7 @@ function SubNavBar() {
                     /* @__PURE__ */ jsxs("p", { className: styles.mt_8, children: [
                       "Explore the benefits of our newest account bundle with up to ",
                       AXOS_ONE_APY,
-                      "% APY on Savings, up to",
+                      "% APY on Savings, up to ",
                       AXOS_ONE_APY_CHECKING,
                       "% on Checking, plus early paydays and no maintenance fees."
                     ] })

package/dist/NavigationMenu/AxosBank/index.js

@@ -16,6 +16,7 @@ import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/VideoTi
 import clsx from "clsx";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
@@ -63,7 +64,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/NavigationMenu/LaVictoire/NavData.js

@@ -12,6 +12,7 @@ import "clsx";
 import "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -62,7 +63,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/NavigationMenu/LaVictoire/index.js

@@ -16,6 +16,7 @@ import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/VideoTi
 import clsx from "clsx";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
@@ -63,7 +64,6 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";
@@ -182,20 +182,18 @@ function NavBar() {
               alt: ""
             }
           ) }) }),
-          /* @__PURE__ */ jsx("nav", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
-            (item, i, arr) => arr.length - 1 !== i && /* @__PURE__ */ jsx(
-              NavItem,
-              {
-                className: `${styles.main_nav_link}`,
-                onClick: handleClick,
-                index: i,
-                name: item.name,
-                url: item.url,
-                isActive: activeIndex == i
-              },
-              i
-            )
-          ) }) })
+          /* @__PURE__ */ jsx("nav", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.slice(0, -2).map((item, i) => /* @__PURE__ */ jsx(
+            NavItem,
+            {
+              className: `${styles.main_nav_link}`,
+              onClick: handleClick,
+              index: i,
+              name: item.name,
+              url: item.url,
+              isActive: activeIndex == i
+            },
+            i
+          )) }) })
         ] }) }),
         /* @__PURE__ */ jsx(
           "button",
@@ -237,6 +235,18 @@ function NavBar() {
             ref,
             onKeyDown: handleKeyDownContainer,
             children: [
+              /* @__PURE__ */ jsx(
+                NavItem,
+                {
+                  url: navItems[navItems.length - 2].url,
+                  name: navItems[navItems.length - 2].name,
+                  className: `link list_unstyled ${styles.main_nav_link} ${styles.highlight}`,
+                  isActive: activeIndex == navItems.length,
+                  onClick: handleClick,
+                  index: navItems.length
+                },
+                navItems.length
+              ),
               lastNavItem && /* @__PURE__ */ jsx(
                 NavItem,
                 {

package/dist/SetContainer/SetContainer.js

@@ -19,6 +19,7 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "react";
+import "next/image.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../Calculators/calculator.css.js";
@@ -79,7 +80,6 @@ import "../ImageBillboard/ImageBillboard.css.js";
 /* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
-import "next/image.js";
 /* empty css                                            */
 /* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/SocialMediaBar/iconsRepository.js

@@ -12,6 +12,7 @@ import "clsx";
 import "react";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../Article/Article.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
@@ -62,7 +63,6 @@ import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/StepItemSet/StepItemSet.js

@@ -5,7 +5,7 @@ import "react";
 import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import { LazyImage } from "../utils/lazyImage/lazyImage.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";
@@ -55,11 +55,7 @@ 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__ */ 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(LazyImage, { src: `${image?.src}?q=85`, alt: "" })
-      ] }) }),
+      image && /* @__PURE__ */ jsx("div", { className: bs_image, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: "", fill: true }) }),
       /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
         StepItem,
         {

package/dist/VideoWrapper/index.js

@@ -13,6 +13,7 @@ import clsx from "clsx";
 import "react";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
+import "next/image.js";
 import "../Article/Article.css.js";
 import { header_section } from "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
@@ -63,7 +64,6 @@ import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 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";

package/dist/assets/HeroBanner/HeroBanner.css

@@ -31,7 +31,10 @@
 ._1ye8k3fb {
   display: flex;
   justify-content: flex-end;
-  max-width: 600px;
+  max-width: 604px;
+}
+._1ye8k3fb picture {
+  display: contents;
 }
 ._1ye8k3fb img {
   max-width: 604px;
@@ -100,9 +103,6 @@
   margin-right: 15px;
   margin-top: 24px;
 }
-._1ye8k3fo {
-  display: contents;
-}
 .section_spacer:has(._1ye8k3f6) {
   margin-top: 0;
 }

package/dist/assets/HeroBanner/LargeBanner.css

@@ -83,6 +83,9 @@
   overflow: hidden;
   position: relative;
 }
+._1bsyngol picture {
+  display: contents;
+}
 ._1bsyngom {
   width: 100%;
   height: 100%;