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

package/dist/main.js

@@ -7,6 +7,11 @@ import { ant_article, ant_card_body, ant_card_cta, ant_card_title, ant_content,
 import { ArticlesSet } from "./ArticlesSet/ArticlesSet.js";
 import { ant_blog_cta, ant_grid, ant_header, ant_sec_body, ant_sec_title, ant_section, ant_svg_fill } from "./ArticlesSet/ArticlesSet.css.js";
 import { ATMLocator } from "./ATMLocator/ATMLocator.js";
+import { ErrorAlert } from "./Auth/ErrorAlert.js";
+import { error_alert, error_alert_content, error_close_button, separator } from "./Auth/ErrorAlert.css.js";
+import { Logout } from "./Auth/Logout.js";
+import { body_sign_in, fadeInUp, form_input, form_input_wrapper, sign_in_button, sign_in_form } from "./Auth/SignIn.css.js";
+import { SignIn } from "./Auth/SignInPassword.js";
 import { Avatar } from "./Avatar/index.js";
 import { awards_row, awards_section } from "./AwardsBanner/AwardsBanner.css.js";
 import { AwardsBanner } from "./AwardsBanner/AwardsBanner.js";
@@ -28,11 +33,12 @@ import { MaxLoanCalculator } from "./Calculators/MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./Calculators/MonthlyPaymentCalculator/index.js";
 import { MonthlyPaymentLVFCalculator } from "./Calculators/MonthlyPaymentLVFCalculator/index.js";
 import { SummitApyCalculator } from "./Calculators/SummitApyCalculator/index.js";
+import { BuyDownCalculator } from "./Calculators/BuyDownCalculator/index.js";
 import { CallToActionBar } from "./CallToActionBar/index.js";
 import { Carousel, CarouselSlide } from "./Carousel/index.js";
 import { Chevron } from "./Chevron/index.js";
 import { CollectInformationAlert } from "./CollectInformationAlert/index.js";
-import { comparison, comparison_buttons, comparison_container, comparison_feature, comparison_layout, comparison_list, comparison_tab_container, feature_header, feature_title, headerComparison } from "./Comparison/Comparison.css.js";
+import { comparison, comparison_buttons, comparison_container, comparison_content, comparison_feature, comparison_layout, comparison_list, comparison_tab_container, feature_header, feature_title, headerComparison } from "./Comparison/Comparison.css.js";
 import { ComparisonSet } from "./Comparison/ComparisonSet.js";
 import { ContentBanner } from "./ContentBanner/index.js";
 import { DownloadTile } from "./DownloadTile/index.js";
@@ -52,11 +58,13 @@ import { ApplyNow, getLink } from "./Forms/ApplyNow.js";
 import { ClearingForm } from "./Forms/ClearingForm.js";
 import { CommercialDeposits } from "./Forms/CommercialDeposits.js";
 import { CommercialLending } from "./Forms/CommercialLending.js";
+import { CommercialPremiumFinance } from "./Forms/CommercialPremiumFinance.js";
 import { ContactCompany } from "./Forms/ContactCompany.js";
 import { ContactCompanyTitle } from "./Forms/ContactCompanyTitle.js";
 import { ContactUs } from "./Forms/ContactUs.js";
 import { ContactUsAAS } from "./Forms/ContactUsAAS.js";
 import { ContactUsBusiness } from "./Forms/ContactUsBusiness.js";
+import { ContactUsBusinessNameAndEmail } from "./Forms/ContactUsBusinessNameEmail.js";
 import { ContactUsLVF } from "./Forms/ContactUsLVF.js";
 import { ContactUsNMLSId } from "./Forms/ContactUsNMLSId.js";
 import { CpraRequest } from "./Forms/CpraRequest.js";
@@ -81,6 +89,7 @@ import { ScheduleCallPremier } from "./Forms/ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
 import { VendorQuestionnaire } from "./Forms/VendorQuestionnaire.js";
 import { WCPLSurvey } from "./Forms/WcplSurvey.js";
+import { helpArticle_container, helpArticle_headline, helpArticle_p, insight_headline_2 } from "./HelpArticle/HelpArticle.css.js";
 import { HeroBanner } from "./HeroBanner/HeroBanner.js";
 import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, img_contents, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
 import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./HeroBanner/SelectionBanner.css.js";
@@ -117,10 +126,10 @@ import { default as default26 } from "./icons/Logos/GBLVF.js";
 import { default as default27 } from "./icons/Logos/LVF.js";
 import { default as default28 } from "./icons/Logos/LVFText.js";
 import { ImageBillboardSet } from "./ImageBillboard/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/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/ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboard/ImageBillboardSet.js";
 import { SetContainer } from "./SetContainer/SetContainer.js";
-import { heading, imageLinkContainer, inline_container, isolate_container, set_container, set_container_cols, set_logo, setcontainer_section_text } from "./SetContainer/SetContainer.css.js";
+import { imageLinkContainer, inline_container, isolate_container, set_container, set_container_cols, set_logo, setcontainer_section_text } from "./SetContainer/SetContainer.css.js";
 import "react";
 import { ImageLinkSet } from "./ImageLink/ImageLinkSet.js";
 import { Checkbox } from "./Input/Checkbox.js";
@@ -136,7 +145,7 @@ import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { RadioButton, RadioButtonSet } from "./Input/RadioButton.js";
 import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
-import { featured_center_vertical, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";
+import { featured_center_vertical, featured_grid, featured_hero, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";
 import { BreadcumbHeader } from "./Insight/Featured/Header.js";
 import { footnotes, insight_header, insight_header_2, insight_header_3, insight_header_4, insight_info_row, insight_list_item, insight_p } from "./Insight/Insight.css.js";
 import { Interstitial } from "./Interstitial/Interstitial.js";
@@ -169,6 +178,8 @@ import { textBlockHeader, textBlockList, textBlockParagraph, textBlockSection }
 import { axosTheme, vars } from "./themes/axos.css.js";
 import { premierTheme } from "./themes/premier.css.js";
 import { victorieTheme } from "./themes/victorie.css.js";
+import { Topic, TopicContent, TopicHeader, TopicItem } from "./Topic/Topic.js";
+import { topic_columns, topic_container, topic_header, topic_item } from "./Topic/Topic.css.js";
 import { picker_arrow, picker_itemContent, picker_itemProduct, picker_navIcon, picker_navItem } from "./TopicalNavItem/TopicalNavItem.css.js";
 import { TopicalNavItem } from "./TopicalNavItem/TopicalNavItem.js";
 import { picker_container, picker_orient, picker_section } from "./TopicalNavSet/TopicalNavSet.css.js";
@@ -222,6 +233,7 @@ export {
   BreadcumbHeader,
   BulletItem,
   Button,
+  BuyDownCalculator,
   Calculator,
   CallToActionBar,
   Carousel,
@@ -240,12 +252,14 @@ export {
   CollectInformationAlert,
   CommercialDeposits,
   CommercialLending,
+  CommercialPremiumFinance,
   ComparisonSet,
   ContactCompany,
   ContactCompanyTitle,
   ContactUs,
   ContactUsAAS,
   ContactUsBusiness,
+  ContactUsBusinessNameAndEmail,
   ContactUsLVF,
   ContactUsNMLSId,
   ContentBanner,
@@ -260,6 +274,7 @@ export {
   EmailOnly,
   EmailUs,
   default13 as EqualHousingLender,
+  ErrorAlert,
   ExecutiveBio,
   ExecutiveBioSet,
   FaqAccordion,
@@ -295,6 +310,7 @@ export {
   LandingPageHeader,
   LoadingIndicator,
   default15 as LockIcon,
+  Logout,
   MainHTML,
   MarginTradingCalculator,
   MaxLoanCalculator,
@@ -327,6 +343,7 @@ export {
   ScheduleCallPremier,
   SecondaryFooter,
   SetContainer,
+  SignIn,
   SocialMediaBar,
   StepItem,
   StepItemSet,
@@ -341,6 +358,10 @@ export {
   TableHead,
   TableRow,
   TextBlock,
+  Topic,
+  TopicContent,
+  TopicHeader,
+  TopicItem,
   TopicalNavItem,
   TopicalNavSet,
   UserInformation,
@@ -392,6 +413,10 @@ export {
   bodyAccordion,
   bodyHeader,
   body_copy,
+  body_sign_in,
+  bottom_center,
+  bottom_left,
+  bottom_right,
   bs_add_details,
   bs_btns,
   bs_copy,
@@ -406,11 +431,15 @@ export {
   calculator_description,
   calculator_headline,
   centerSelect,
+  center_center,
+  center_left,
+  center_right,
   checkbox_group,
   columnValues,
   comparison,
   comparison_buttons,
   comparison_container,
+  comparison_content,
   comparison_feature,
   comparison_layout,
   comparison_list,
@@ -431,12 +460,19 @@ export {
   dp_input,
   dropdown,
   dynPH,
+  error_alert,
+  error_alert_content,
+  error_close_button,
   executive_bio,
+  exit_intent,
+  exit_intent_backdrop,
   expand_icon,
+  fadeInUp,
   feature_header,
   feature_title,
   featured_center_vertical,
   featured_grid,
+  featured_hero,
   featured_maingrid,
   featured_maingrid_img,
   featured_maingrid_item,
@@ -460,6 +496,8 @@ export {
   formBtns,
   formContainer,
   formWrapper,
+  form_input,
+  form_input_wrapper,
   form_nav_apply_now,
   form_row,
   ft_col,
@@ -483,10 +521,12 @@ export {
   headerVariants,
   header_section,
   header_theme,
-  heading,
   headline_setting,
   headline_text,
   headshot,
+  helpArticle_container,
+  helpArticle_headline,
+  helpArticle_p,
   helperText,
   heroSupertag,
   hero_banner,
@@ -513,6 +553,8 @@ export {
   imageLinkContainer,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
   img_area,
   img_contents,
   inline_container,
@@ -521,6 +563,7 @@ export {
   insight_header_2,
   insight_header_3,
   insight_header_4,
+  insight_headline_2,
   insight_info_row,
   insight_list_item,
   insight_p,
@@ -528,6 +571,7 @@ export {
   isAllowedUrl,
   isEmailLink,
   isPhoneLink,
+  is_bg_img,
   isolate_container,
   item,
   item_bio,
@@ -552,6 +596,7 @@ export {
   mh_330,
   modalCheckboxContainer,
   modalMobile,
+  modal_close_button,
   modifier,
   mt1Rem,
   mt2rem,
@@ -581,6 +626,7 @@ export {
   rate_container,
   rate_pad,
   rate_table_title,
+  remove_padding,
   resposiveLabel,
   results_container,
   reversed,
@@ -601,6 +647,7 @@ export {
   selection_section_content,
   selection_section_icon,
   selection_section_icon_img,
+  separator,
   set_container,
   set_container_cols,
   set_logo,
@@ -609,6 +656,8 @@ export {
   shortUrl,
   show,
   show_options,
+  sign_in_button,
+  sign_in_form,
   single_container,
   smb_section,
   smb_wrapper,
@@ -642,6 +691,13 @@ export {
   three_inline,
   title,
   toggle_container,
+  top_center,
+  top_left,
+  top_right,
+  topic_columns,
+  topic_container,
+  topic_header,
+  topic_item,
   transcript_btn,
   transcript_container,
   transcript_content,

package/dist/themes/axos.css.d.ts

@@ -1,66 +1,66 @@
 export declare const axosTheme: string, vars: {
     colors: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            body: `var(--${string})`;
+            headline: `var(--${string})`;
+            textGradient: `var(--${string})`;
+            textButton: `var(--${string})`;
+            backgroundButton: `var(--${string})`;
+            border: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            body: `var(--${string})`;
+            headline: `var(--${string})`;
+            textGradient: `var(--${string})`;
+            textButton: `var(--${string})`;
+            backgroundButton: `var(--${string})`;
+            border: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            body: `var(--${string})`;
+            headline: `var(--${string})`;
+            textGradient: `var(--${string})`;
+            textButton: `var(--${string})`;
+            backgroundButton: `var(--${string})`;
+            border: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            body: `var(--${string})`;
+            headline: `var(--${string})`;
+            textGradient: `var(--${string})`;
+            textButton: `var(--${string})`;
+            backgroundButton: `var(--${string})`;
+            border: `var(--${string})`;
         };
     };
-    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})`;
     disabled: {
-        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})`;
+        color: `var(--${string})`;
+        background: `var(--${string})`;
     };
     icons: {
         check: {
-            primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            primary: `var(--${string})`;
+            secondary: `var(--${string})`;
         };
     };
     table: {
-        highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        highlight: `var(--${string})`;
+        color: `var(--${string})`;
     };
     footer: {
         link: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
     selecction: {
         icon: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 };

package/dist/utils/allowedAxosDomains.js

@@ -25,7 +25,7 @@ const moreDomains = {
   "{AXSEC}": process.env.AXOS_SECURE_URL || "https://secure.axosbank.com",
   "{SECURE}": process.env.AXOS_SECURE_URL || "https://secure.axosbank.com",
   "{DOWNLOADAXOS}": process.env.AXOS_DOWNLOAD_URL || "https://downloads.axos.com",
-  "{SBAAX}": process.env.SMALL_BUSINESS_ACCOUNTS || "https://small-business-accounts.axosbank.com",
+  "{SBEAX}": process.env.SBB_ENROLL || "https://small-business-enrollment.axosbank.com",
   "{CPDS}": process.env.CP_DECISIONLENDER || "https://cp.decisionlender.solutions",
   "{JHALOAN}": process.env.JHA_LOANSPQ || "https://jha.loanspq.com",
   "{AXSECURITIES}": process.env.AXOS_SECURITIES_URL ?? "https://www.axossecurities.com",
@@ -37,7 +37,11 @@ const moreDomains = {
   "{AXBHUBSVIDYARD}": process.env.AXBHUBSVIDYARD_URL || "https://www.axosbank.hubs.vidyard.com",
   "{AUTOAX}": process.env.AUTO_AXOSBANK_URL || "https://auto.axosbank.com",
   "{AFAST}": process.env.SECURE_FAST_URL || "https://secure.approvedfast.com",
-  "{LVFMYSITE}": process.env.LVF_MYSITE_URL || "https://lavictoire-finance.my.site.com"
+  "{LVFMYSITE}": process.env.LVF_MYSITE_URL || "https://lavictoire-finance.my.site.com",
+  "{PERSONALLOANS}": process.env.PERSONAL_LOANS_URL || "https://personalloans.axosbank.com",
+  "{MODELSELECTION}": process.env.MODEL_SELECTION_URL || "https://modelselection.axos.com",
+  "{COMMERCIALPORTAL_LOGIN}": `${process.env.COMMERCIALPORTAL_URL}/login` || "https://portals.axosbank.com/login",
+  "{COMMERCIALPORTAL_REGISTER}": process.env.COMMERCIALPORTAL_URL + "/Register" || "https://portals.axosbank.com/Register"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);
@@ -48,7 +52,7 @@ const isAllowedUrl = (url) => {
   return false;
 };
 const findMoreAxosDomains = (url) => {
-  const regexSearching = /\{[a-xA-Z]+\}/;
+  const regexSearching = /\{[a-xA-Z_-]+\}/;
   if (regexSearching.test(url)) {
     const domainToReplace = url.match(regexSearching);
     if (Array.isArray(domainToReplace)) {
@@ -56,6 +60,18 @@ const findMoreAxosDomains = (url) => {
         regexSearching,
         moreDomains[domainToReplace[0]]
       );
+      if (typeof window !== "undefined" && window.location.search) {
+        const original = new URL(newURL, window.location.origin);
+        const incomingParams = new URLSearchParams(window.location.search);
+        const existingParams = new URLSearchParams(original.search);
+        for (const [key, value] of incomingParams.entries()) {
+          if (!existingParams.has(key)) {
+            existingParams.append(key, value);
+          }
+        }
+        original.search = existingParams.toString();
+        return original.toString();
+      }
       return newURL;
     }
   }

package/dist/utils/appendQueryParams.js

@@ -33,12 +33,9 @@ const appendQueryParams = () => {
   };
   if (window.location.search.length) {
     document.querySelectorAll("a[href]:not(.ext-link)").forEach((anchor) => {
-      const href = anchor.getAttribute("href");
-      if (href) {
-        const lowerHref = href.trim().toLowerCase();
-        if (!lowerHref.startsWith("tel:") && !lowerHref.startsWith("mailto:")) {
-          anchor.href = filterParams(href);
-        }
+      const href = anchor.getAttribute("href")?.trim();
+      if (href && !href.startsWith("tel:") && !href.startsWith("mailto:") && href !== "#" && href !== "" && !href.startsWith("#")) {
+        anchor.href = filterParams(href);
       }
     });
   }

package/dist/utils/optimizeImage/OptimizeImage.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+export interface OptimizeImageProps {
+    src: string;
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    className?: string;
+    rootMargin?: string;
+}
+export declare const OptimizeImage: FC<OptimizeImageProps>;

package/dist/utils/optimizeImage/OptimizeImage.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import css from "./optimizeImage.module.js";
+const OptimizeImage = ({
+  src,
+  alt = "",
+  height,
+  width,
+  className,
+  rootMargin = "500px"
+}) => {
+  const imgRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!imgRef.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin }
+    );
+    observer.observe(imgRef.current);
+    return () => observer.disconnect();
+  }, [rootMargin]);
+  return isVisible ? /* @__PURE__ */ jsxs("picture", { children: [
+    /* @__PURE__ */ jsx("source", { srcSet: `${src}?fm=avif`, type: "image/avif" }),
+    /* @__PURE__ */ jsx("source", { srcSet: `${src}?fm=webp`, type: "image/webp" }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        className,
+        width,
+        height
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx("div", { className: `${css.loader} ${css.loading}`, children: /* @__PURE__ */ jsx("div", { ref: imgRef, style: { width, height } }) });
+};
+export {
+  OptimizeImage
+};

package/dist/utils/optimizeImage/index.d.ts

@@ -0,0 +1 @@
+export * from './OptimizeImage';

package/dist/utils/optimizeImage/index.js

@@ -0,0 +1,4 @@
+import { OptimizeImage } from "./OptimizeImage.js";
+export {
+  OptimizeImage
+};

package/dist/utils/optimizeImage/optimizeImage.module.js

@@ -0,0 +1,14 @@
+import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_pwl74_10";
+const loading = "_loading_pwl74_16";
+const shimmer = "_shimmer_pwl74_1";
+const css = {
+  loader,
+  loading,
+  shimmer
+};
+export {
+  css as default,
+  loader,
+  loading,
+  shimmer
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.5",
+  "version": "1.0.77.1",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -29,7 +29,8 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
-    "@hookform/resolvers": "^3.9.1",
+    "@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",
@@ -39,9 +40,11 @@
     "@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",
@@ -79,18 +82,18 @@
     "@storybook/addon-onboarding": "^8.4.7",
     "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
+    "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^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.13",
-    "@types/node": "^20.17.10",
-    "@types/react": "^18.3.18",
+    "@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.5",
+    "@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",