@axos-web-dev/shared-components 1.0.76 → 1.0.77-ext-bal-apy-calc.2

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -116,7 +116,7 @@
   width: 100%;
   height: auto;
 }
-._1m7m2aj img {
+._1m7m2ak {
   height: 100%;
   inset: 0;
   object-fit: cover;
@@ -124,86 +124,193 @@
   position: absolute;
   width: 100%;
 }
-._1m7m2an {
+._1m7m2ao {
   padding: 32px 28px;
   width: 100%;
   max-width: 50%;
 }
-._18ygy9m5 ._1m7m2an {
+._18ygy9m5 ._1m7m2ao {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-._1m7m2ao {
+._1m7m2ap {
   display: flex;
   gap: 20px;
 }
-._1m7m2ap {
+._1m7m2aq {
   grid-template-columns: 1fr 1fr;
 }
-._1m7m2aq {
+._1m7m2ar {
   grid-template-columns: 1fr 1fr 1fr;
 }
-._1m7m2ar {
+._1m7m2as {
   margin-inline: auto;
   margin-bottom: 2.5rem;
   text-align: center;
   max-width: 1000px;
 }
-._1m7m2ar > p {
+._1m7m2as > p {
   margin-top: 24px;
 }
-._1m7m2as {
+._1m7m2at {
   width: 100%;
 }
-._1m7m2at {
+._1m7m2au {
   min-height: 330px;
 }
-._1m7m2au {
+._1m7m2av {
   width: 100%;
   height: 100%;
   position: relative;
 }
-._18ygy9m5 ._1m7m2au {
+._1m7m2aw {
+  position: relative;
+  width: 100%;
+}
+._1m7m2ax {
+  border: none !important;
+  align-items: center;
+}
+.section_spacer ._1m7m2ax {
+  background: none;
+}
+._1m7m2ax ._1m7m2aj {
+  justify-content: flex-end;
+}
+._18ygy9m5 ._1m7m2av {
   min-height: 330px;
 }
-._1m7m2av {
+._1m7m2ay {
   background: var(--_1073cm8f);
   color: #FFFFFF;
 }
-._1m7m2aw {
+._1m7m2az {
   padding: 1.5rem;
   height: 100%;
   justify-content: center;
 }
-._1m7m2ax {
+._1m7m2a10 {
   color: #fff;
   font-size: 48px;
   font-weight: 600;
   letter-spacing: 0.4px;
   line-height: 1;
 }
-._1m7m2ay {
+._1m7m2a11 {
   color: #f4f4f4;
   font: 700 150px/1 var(--header-font-family);
   letter-spacing: 0.2px;
   line-height: 1;
 }
-._1m7m2az {
+._1m7m2a12 {
   color: var(--_1073cm8k);
   font-size: 37px;
   font-weight: 600;
   letter-spacing: 0.3px;
   line-height: 1;
 }
-._1m7m2a10 > p {
+._1m7m2a13 > p {
   white-space: break-spaces;
 }
 main > div:nth-last-child(2) > ._1m7m2a0 {
   margin-bottom: 3.5rem;
 }
-._1m7m2a12 {
+._1m7m2a15 {
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 0 1.5rem 1.5rem 0;
+}
+._1m7m2a16 {
+  justify-content: center;
+  align-items: flex-start;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+}
+._1m7m2a17 {
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 0 0 1.5rem 1.5rem;
+}
+._1m7m2a18 {
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1.5rem 1.5rem 1.5rem 0;
+}
+._1m7m2a19 {
+  justify-content: flex-end;
+  align-items: center;
+  padding: 1.5rem 0 1.5rem 1.5rem;
+}
+._1m7m2a1a {
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+._1m7m2a1b {
+  justify-content: flex-start;
+  align-items: flex-end;
+  padding: 1.5rem 1.5rem 0 0;
+}
+._1m7m2a1c {
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 1.5rem 0 0 1.5rem;
+}
+._1m7m2a1d {
+  justify-content: center;
+  align-items: flex-end;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+}
+._1m7m2a1e {
+  padding: 0 !important;
+}
+.stacked {
+  gap: 56px;
+}
+.stacked > .billboard {
+  grid-column: 1;
+}
+.stacked ._1m7m2ao {
+  height: auto;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a1) {
+  background: var(--_1073cm81);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a1) + .section_spacer:has(._1m7m2ax._1m7m2a1) {
+  padding-top: 0;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a2) {
+  background: var(--_1073cm88);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a2) + .section_spacer:has(._1m7m2ax._1m7m2a2) {
+  padding-top: 0;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a3) {
+  background: var(--_1073cm8f);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a3) + .section_spacer:has(._1m7m2ax._1m7m2a3) {
+  padding-top: 0;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a4) {
+  background: var(--_1073cm8m);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a4) + .section_spacer:has(._1m7m2ax._1m7m2a4) {
+  padding-top: 0;
+}
+.section_spacer:has(.stacked) {
+  padding-bottom: 40px;
+}
+.section_spacer:has(> ._1m7m2ax) {
+  padding-block: 56px;
+}
+.section_spacer:has(> ._1m7m2ax) + .section_spacer:has(> ._1m7m2ax) {
+  margin-top: 0;
+}
+.section_spacer:has(._1m7m2ax) ._1m7m2an {
+  margin-top: 1.7rem;
+}
+._1m7m2a1f {
   position: fixed;
   inset: 0;
   align-items: center;
@@ -216,27 +323,27 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   overflow-y: auto;
   box-sizing: border-box;
 }
-._1m7m2a13 {
+._1m7m2a1g {
   width: min(1214px, 100%);
 }
-._1m7m2a13 .billboard {
+._1m7m2a1g .billboard {
   animation: fadeIn 0.3s ease-in-out;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   gap: 1.5rem;
   max-width: 1150px;
   position: relative;
 }
-._1m7m2a13 ._1m7m2au {
+._1m7m2a1g ._1m7m2av {
   border-radius: 1rem;
   overflow: hidden;
 }
-._1m7m2a13 ._1m7m2an {
+._1m7m2a1g ._1m7m2ao {
   padding: 0;
 }
-._1m7m2a13 ._1m7m2aj img {
+._1m7m2a1g ._1m7m2aj img {
   object-fit: none;
 }
-._1m7m2a14 {
+._1m7m2a1h {
   position: absolute;
   top: 0.9rem;
   right: 2.85rem;
@@ -252,7 +359,7 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   padding: 5px 9px;
   z-index: 2;
 }
-._1m7m2a14:focus {
+._1m7m2a1h:focus {
   outline: 2px solid #fAA74A;
   outline-offset: 2px;
 }
@@ -272,119 +379,178 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2ai > * {
     max-width: 100%;
   }
-  ._1m7m2al {
+  ._1m7m2am {
     display: flex;
     flex-direction: column;
   }
-  ._1m7m2an {
+  ._1m7m2ao {
     max-width: 100%;
   }
-  ._1m7m2a12 {
+  ._1m7m2a1f {
     display: block;
     padding-top: 85px;
     padding-bottom: 1rem;
   }
 }
 @media screen and (max-width:475px) {
-  ._1m7m2am {
+  ._1m7m2an {
     flex-direction: column;
     gap: 24px;
     align-items: center;
   }
 }
 @media screen and (max-width: 1023px) {
-  ._1m7m2au {
+  ._1m7m2av {
     min-height: 275px;
   }
-  ._18ygy9m5 ._1m7m2au {
+  ._1m7m2ax ._1m7m2aj {
+    justify-content: center;
+  }
+  ._1m7m2ax ._1m7m2ao {
+    text-align: center;
+    padding-inline: 14px;
+  }
+  ._1m7m2ax:not(.reversed) ._1m7m2ao {
+    padding-bottom: 0;
+  }
+  ._1m7m2ax ._1m7m2ao :is(ul,ol) {
+    text-align: left;
+  }
+  ._18ygy9m5 ._1m7m2av {
     min-height: 275px;
   }
-  ._1m7m2ax {
+  ._1m7m2a10 {
     font-size: 30px;
   }
-  ._1m7m2ay {
+  ._1m7m2a11 {
     font-size: 82px;
   }
-  ._1m7m2az {
+  ._1m7m2a12 {
     font-size: 20px;
   }
   main > div:nth-last-child(2) > ._1m7m2a0 {
     margin-bottom: 42px;
   }
-  ._1m7m2a13 {
+  ._1m7m2a1e {
+    width: auto;
+  }
+  ._1m7m2a1g {
     width: min(592px, 100%);
     margin-inline: auto;
   }
-  ._1m7m2a13 .billboard {
+  ._1m7m2a1g .billboard {
     padding: 32px;
     width: min(33rem, calc(100% - 2rem));
   }
-  ._1m7m2a13 ._1m7m2aj img {
+  ._1m7m2a1g ._1m7m2aj img {
     object-fit: cover;
   }
-  ._1m7m2a14 {
+  ._1m7m2a1h {
     top: 0.9rem;
     right: 2.85rem;
   }
 }
+@media screen and (max-width: 1025px) {
+  .stacked {
+    gap: 42px;
+  }
+  .section_spacer:has(> ._1m7m2ax) {
+    padding-block: 42px;
+  }
+}
 @media screen and (max-width: 768px) {
-  ._1m7m2au {
+  ._1m7m2av {
     min-height: 200px;
   }
-  ._18ygy9m5 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2av {
     min-height: 200px;
   }
   main > div:nth-last-child(2) > ._1m7m2a0 {
     margin-bottom: 2rem;
   }
+  .stacked {
+    gap: 2rem;
+  }
+  .section_spacer:has(> ._1m7m2ax) {
+    padding-block: 2rem;
+  }
 }
 @media screen and (max-width: 327px) {
-  ._1m7m2au {
+  ._1m7m2av {
     min-height: 160px;
   }
-  ._18ygy9m5 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2av {
     min-height: 160px;
   }
 }
-@media screen and (max-width:432px) {
-  ._1m7m2a11 {
-    padding-left: 20px;
+@media screen and (min-width: 768px) {
+  .section_spacer:has(._1m7m2ax) ._1m7m2an {
+    margin-top: 2.5rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  ._1m7m2a13 .billboard {
+  ._1m7m2ax ._1m7m2ao {
+    padding-right: 0;
+  }
+  ._1m7m2ax.reversed ._1m7m2ao {
+    padding-left: 0;
+    padding-right: 28px;
+  }
+  .stacked > .billboard {
+    flex-direction: row;
+  }
+  .stacked > .billboard.reversed {
+    flex-direction: row-reverse;
+  }
+  ._18ygy9m5.stacked ._1m7m2av {
+    min-height: 1px !important;
+  }
+  .section_spacer:has(._1m7m2ax) ._1m7m2an {
+    justify-content: flex-start;
+  }
+  ._1m7m2a1g .billboard {
     gap: calc(1rem + ((1vw - 10.24px) * 21.875));
     padding-inline: calc(1.25rem + ((1vw - 10.24px) * 10.9375));
     padding-block: calc(2rem + ((1vw - 10.24px) * 6.25));
   }
-  ._1m7m2a13 h2 {
+  ._1m7m2a1g h2 {
     font-size: 40px;
     line-height: 1.25;
     text-wrap: pretty;
   }
-  ._1m7m2a13 ._1m7m2an {
+  ._1m7m2a1g ._1m7m2ao {
     max-width: 60%;
   }
-  ._1m7m2a13 ._1m7m2aj {
+  ._1m7m2a1g ._1m7m2aj {
     max-width: 40%;
   }
-  ._1m7m2a13 ._1m7m2am {
+  ._1m7m2a1g ._1m7m2an {
     justify-content: flex-start;
   }
 }
+@media screen and (max-width:432px) {
+  ._1m7m2a14 {
+    padding-left: 20px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .section_spacer:has(._1m7m2ax) ._1m7m2an {
+    margin-top: 3rem;
+  }
+}
 @media screen and (min-width: 1281px) {
-  ._1m7m2a13 .billboard {
+  ._1m7m2a1g .billboard {
     gap: 72px;
     padding: 48px;
   }
 }
 @media screen and (max-width: 1024px) {
-  ._1m7m2a13 .billboard:not(.reversed) {
+  ._1m7m2a1g .billboard:not(.reversed) {
     flex-direction: column-reverse;
   }
 }
 @media screen and (max-width: 550px) {
-  ._1m7m2a14 {
+  ._1m7m2a1h {
     right: 1.65rem;
   }
 }

package/dist/assets/SetContainer/SetContainer.css

@@ -52,7 +52,6 @@
 }
 ._18ygy9mb {
   margin-inline: auto;
-  max-width: 1000px;
   padding-block: 2.5rem;
 }
 :is(._18ygy9m5, ._18ygy9m6) .containment {

package/dist/assets/utils/optimizeImage/optimizeImage.css.css

@@ -1,4 +1,4 @@
-@keyframes _shimmer_ib32l_1 {
+@keyframes _shimmer_pwl74_1 {
   from {
     transform: translateX(-100%);
   }
@@ -7,14 +7,13 @@
   }
 }
 
-._loader_ib32l_10 {
-  position: absolute;
+._loader_pwl74_10 {
   height: 100%;
   width: 100%;
   inset: 0;
 }
 
-._loading_ib32l_17 {
+._loading_pwl74_16 {
   position: relative;
   width: 100%;
   height: 100%;
@@ -22,15 +21,15 @@
   background: #1e3860;
 }
 
-._1es6o1h0 ._loading_ib32l_17 {
-  background-color: #1e262f;
+._1es6o1h0 ._loading_pwl74_16 {
+  background-color: var(--_1073cm8f);
 }
 
-.fl2fv50 ._loading_ib32l_17 {
+.fl2fv50 ._loading_pwl74_16 {
   background-color: #28587d;
 }
 
-._loading_ib32l_17::before {
+._loading_pwl74_16::before {
   content: "";
   position: absolute;
   top: 0;
@@ -43,6 +42,6 @@
     rgba(255, 255, 255, 0.5) 50%,
     rgba(255, 255, 255, 0) 80%
   );
-  animation: _shimmer_ib32l_1 1.3s infinite linear;
+  animation: _shimmer_pwl74_1 1.3s infinite linear;
   z-index: 1;
 }

package/dist/main.js

@@ -38,7 +38,7 @@ 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";
@@ -58,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";
@@ -87,7 +89,6 @@ 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 { CommercialPremiumFinance } from "./Forms/CommercialPremiumFinance.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";
@@ -125,7 +126,7 @@ 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, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, mh_330, modal_close_button, 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 { imageLinkContainer, inline_container, isolate_container, set_container, set_container_cols, set_logo, setcontainer_section_text } from "./SetContainer/SetContainer.css.js";
@@ -258,6 +259,7 @@ export {
   ContactUs,
   ContactUsAAS,
   ContactUsBusiness,
+  ContactUsBusinessNameAndEmail,
   ContactUsLVF,
   ContactUsNMLSId,
   ContentBanner,
@@ -412,6 +414,9 @@ export {
   bodyHeader,
   body_copy,
   body_sign_in,
+  bottom_center,
+  bottom_left,
+  bottom_right,
   bs_add_details,
   bs_btns,
   bs_copy,
@@ -426,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,
@@ -544,6 +553,8 @@ export {
   imageLinkContainer,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
   img_area,
   img_contents,
   inline_container,
@@ -560,6 +571,7 @@ export {
   isAllowedUrl,
   isEmailLink,
   isPhoneLink,
+  is_bg_img,
   isolate_container,
   item,
   item_bio,
@@ -614,6 +626,7 @@ export {
   rate_container,
   rate_pad,
   rate_table_title,
+  remove_padding,
   resposiveLabel,
   results_container,
   reversed,
@@ -678,6 +691,9 @@ export {
   three_inline,
   title,
   toggle_container,
+  top_center,
+  top_left,
+  top_right,
   topic_columns,
   topic_container,
   topic_header,

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

@@ -3,8 +3,8 @@ import { FC } from 'react';
 export interface OptimizeImageProps {
     src: string;
     alt?: string;
-    height?: number;
-    width?: number;
+    height?: string | number;
+    width?: string | number;
     className?: string;
     rootMargin?: string;
 }

package/dist/utils/optimizeImage/OptimizeImage.js

@@ -39,7 +39,7 @@ const OptimizeImage = ({
         height
       }
     )
-  ] }) : /* @__PURE__ */ jsx("div", { className: css.loader, children: /* @__PURE__ */ jsx("div", { ref: imgRef, className: css.loading, style: { 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/optimizeImage.module.js

@@ -1,6 +1,6 @@
-import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_ib32l_10";
-const loading = "_loading_ib32l_17";
-const shimmer = "_shimmer_ib32l_1";
+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,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.76",
+  "version": "1.0.77-ext-bal-apy-calc.2",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",