@axos-web-dev/shared-components 0.0.86 → 0.0.89

package/dist/Table/index.js

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table.js";
-import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table.css.js";
 export {
   Table,
   TableBody,
@@ -12,6 +12,7 @@ export {
   bodyHeader,
   headerCell,
   headerVariants,
+  highlight_cell,
   highlight_first_row,
   highlight_last_row,
   table,

package/dist/assets/HeroBanner/HeroBanner.css

@@ -24,75 +24,75 @@
   justify-content: space-between;
   align-items: center;
 }
-._1ye8k3f8 {
+._1ye8k3f9 {
   padding: 2rem 0;
 }
-._1ye8k3fa {
+._1ye8k3fb {
   display: flex;
   justify-content: flex-end;
   max-width: 600px;
 }
-._1ye8k3fa img {
+._1ye8k3fb img {
   max-width: 604px;
   max-height: 480px;
   object-fit: cover;
 }
-._1ye8k3fb {
+._1ye8k3fc {
   display: block;
   font: 700 14px / 1.3 var(--main-font-family);
   margin-bottom: 2px;
   letter-spacing: .2px;
 }
-._1ye8k3fc {
+._1ye8k3fd {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fd {
+._1ye8k3fe {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fe {
+._1ye8k3ff {
   color: var(--_1073cm8k);
 }
-._1ye8k3ff {
+._1ye8k3fg {
   color: var(--_1073cm8n);
 }
-._1ye8k3fg {
+._1ye8k3fh {
   font: 600 2.5rem / 1.25 var(--header-font-family);
 }
-._1ye8k3fh {
+._1ye8k3fi {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fi {
+._1ye8k3fj {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fj {
+._1ye8k3fk {
   color: var(--_1073cm8h);
 }
-._1ye8k3fk {
+._1ye8k3fl {
   color: var(--_1073cm8o);
 }
-._1ye8k3f8 p {
+._1ye8k3f9 p {
   font: 400 18px / 1.44 var(--main-font-family);
   letter-spacing: .2px;
 }
-._1ye8k3fl {
+._1ye8k3fm {
   margin-top: 3.5rem;
   display: flex;
   align-items: center;
   gap: 2rem;
 }
-._1ye8k3fl:empty {
+._1ye8k3fm:empty {
   display: none;
 }
 @media screen and (min-width:1024px) {
@@ -100,34 +100,38 @@
     flex-direction: row-reverse;
   }
   ._1ye8k3f8 {
+    left: 0;
+    right: unset;
+  }
+  ._1ye8k3f9 {
     flex: 1 1;
     max-width: 588px;
   }
-  ._1ye8k3f0 ._1ye8k3f8 {
+  ._1ye8k3f0 ._1ye8k3f9 {
     max-width: 468px;
   }
 }
 @media screen and (max-width:1280px) {
-  ._1ye8k3fl {
+  ._1ye8k3fm {
     margin-top: 2.5rem;
   }
-  ._1ye8k3f0 ._1ye8k3fl {
+  ._1ye8k3f0 ._1ye8k3fm {
     flex-direction: column;
   }
-  ._7etqoq5 ._1ye8k3fl {
+  ._7etqoq5 ._1ye8k3fm {
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
   }
 }
 @media (max-width: 1280px) and (min-width: 1024px) {
-  ._1ye8k3f0 ._1ye8k3f9 {
+  ._1ye8k3f0 ._1ye8k3fa {
     width: calc(100%-28px);
   }
-  ._1ye8k3fa img {
+  ._1ye8k3fb img {
     aspect-ratio: 1 / 1;
   }
-  ._1ye8k3f0 ._1ye8k3fl {
+  ._1ye8k3f0 ._1ye8k3fm {
     align-items: flex-start;
   }
 }
@@ -135,19 +139,19 @@
   ._1ye8k3f6 {
     flex-direction: column;
   }
-  ._1ye8k3f8 {
+  ._1ye8k3f9 {
     text-align: center;
   }
-  ._1ye8k3fl {
+  ._1ye8k3fm {
     flex-direction: column;
   }
 }
 @media (max-width: 1023px) {
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     justify-content: center;
     width: min(375px,100%);
   }
-  ._1ye8k3fa img {
+  ._1ye8k3fb img {
     max-width: 100%;
   }
 }
@@ -160,7 +164,7 @@
     min-height: 740px;
     gap: 1.5rem;
   }
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     min-height: 480px;
     _1ye8k3f0 & {
       max-width: 708px;
@@ -168,38 +172,38 @@
   }
 }
 @media screen and (max-width:603px) {
-  ._1ye8k3f8 {
+  ._1ye8k3f9 {
     max-width: calc(100% - 2rem);
     margin-left: auto;
     margin-right: auto;
   }
 }
 @media (max-width: 603px) {
-  ._1ye8k3f9 {
+  ._1ye8k3fa {
     width: 100%;
     max-width: 100%;
   }
 }
 @media (max-width: 450px) {
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     width: 100%;
   }
 }
 @media screen and (max-width:768px) {
-  ._1ye8k3fg {
+  ._1ye8k3fh {
     font-size: 28px;
     line-height: 1.29;
   }
-  ._1ye8k3f8 p {
+  ._1ye8k3f9 p {
     font-size: 1rem;
     line-height: 1.5;
   }
-  ._1ye8k3fl {
+  ._1ye8k3fm {
     margin-top: 1.7rem;
   }
 }
 @media (max-width:1280px) and (min-width:1024px) {
-  ._1ye8k3fa:not(._1ye8k3f0 ._1ye8k3fa) {
+  ._1ye8k3fb:not(._1ye8k3f0 ._1ye8k3fb) {
     flex: 1 1;
     overflow: hidden;
   }

package/dist/assets/HeroBanner/SelectionBanner.css

@@ -69,6 +69,7 @@
   ._7etqoq5 {
     width: 100vw;
     padding: 2rem 0;
+    min-height: auto;
   }
   ._7etqoq7 {
     width: min(45rem, calc(100% - 4rem));

package/dist/assets/Interstitial/Interstitial-variants.css

@@ -0,0 +1,9 @@
+.ep91dm0 {
+  font: 600 28px / 1.29 var(--header-font-family);
+}
+.ep91dm1 {
+  color: var(--_1073cm83);
+}
+.ep91dm2 {
+  color: var(--_1073cm8a);
+}

package/dist/assets/Interstitial/Interstitial.css.css

@@ -0,0 +1,137 @@
+@keyframes _appear_1euix_1 {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes _vanish_1euix_1 {
+  0% {
+    display: block;
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    display: none;
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+._overlay_1euix_24 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+._overlay_1euix_24.active {
+  display: flex;
+}
+
+._modal_1euix_40 {
+  animation: _vanish_1euix_1 0.45s ease;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  position: relative;
+  transition: transform 0.45s ease;
+  width: min(calc(100% - 2rem), 800px);
+  overflow: hidden;
+}
+
+._modal_1euix_40.active {
+  animation: _appear_1euix_1 0.45s ease;
+}
+
+._close_button_1euix_55 {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  border: none;
+  color: #4a5560;
+  cursor: pointer;
+  font-size: 1.9rem;
+  line-height: 1;
+  right: 1.5rem;
+  text-align: center;
+  top: 1.5rem;
+  width: 32px;
+}
+
+._modal_content_1euix_70 {
+  padding: 16px 24px 24px;
+}
+
+._img_area_1euix_74 {
+  background-position: center center;
+  background-size: cover;
+  height: 418px;
+}
+
+body:has(._overlay_1euix_24.active) {
+  overflow-y: hidden;
+}
+
+._body_copy_1euix_84 {
+  margin-top: 8px;
+}
+
+._body_copy_1euix_84 > * {
+  color: #333d46;
+}
+
+._body_copy_1euix_84 > p {
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+._btns_1euix_98 {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding-top: 16px;
+  margin-top: 16px;
+  width: 100%;
+  justify-content: center;
+}
+
+._btns_1euix_98:empty {
+  display: none;
+}
+
+._modal_content_1euix_70:nth-child(2) h2 {
+  margin-top: 31px;
+}
+
+@media (max-width: 1023px) {
+  ._btns_1euix_98 {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (max-width: 832px) {
+  ._img_area_1euix_74 {
+    height: calc(12.25rem + ((1vw - 3.75px) * 48.5777));
+  }
+}
+
+@media (max-width: 500px) {
+  ._modal_1euix_40 {
+    width: calc(100% - 1rem);
+  }
+  ._overlay_1euix_24.active {
+    align-items: flex-start;
+    overflow-y: scroll;
+    padding-top: 40px;
+  }
+}

package/dist/assets/SetContainer/SetContainer.css

@@ -42,6 +42,7 @@
   padding-top: 2.5rem;
   text-align: center;
   max-width: 1000px;
+  padding-bottom: 2.5rem;
 }
 ._18ygy9ma {
   isolation: isolate;

package/dist/assets/Table/Table.css

@@ -215,7 +215,7 @@ tr:last-child td {
   background: #f4f4f4;
 }
 ._1nivbwe12 tr:nth-child(odd) td {
-  background: #ffffff !important;
+  background: #ffffff;
 }
 ._1nivbwe12 tr th:first-child {
   text-align: left;
@@ -269,6 +269,10 @@ td:has(.flex.middle span.img_fluid) .flex.middle {
 td:has(.flex.middle span.img_fluid) .img_fluid {
   min-width: 24px;
 }
+._1nivbwe14 {
+  background-image: linear-gradient(0deg,#152d54,#27466f) !important;
+  color: var(--_1073cm8g) !important;
+}
 @media screen and (max-width: 768px) {
   ._1nivbwed:first-child {
     box-shadow: 0 15px 20px 0px rgb(0 0 0 / 0.3);

package/dist/assets/globals.css

@@ -166,6 +166,12 @@ h1, h2, h3, h4, h5, h6, es_font {
   line-height: 36px;
   letter-spacing: 0.2px;
 }
+.header_4 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: 0.2px;
+}
 .gradient_text {
   background: linear-gradient(3deg, #051A3F 14.64%, #1E3860 48.42%, #4D85B0 85.36%);
   background-size: 100%;

package/dist/main.d.ts

@@ -32,6 +32,7 @@ export * from './IconBillboard';
 export * from './ImageBillboard';
 export * from './ImageLink';
 export * from './Input';
+export * from './Interstitial';
 export * from './LandingPageHeader';
 export * from './LoadingIndicator';
 export * from './MainHTML';

package/dist/main.js

@@ -17,11 +17,13 @@ import { BulletItem } from "./BulletItem/BulletItem.js";
 import { Button } from "./Button/Button.js";
 import { button } from "./Button/Button.css.js";
 import { GoBackButton } from "./Button/GoBackButton.js";
-import { Calculator } from "./Calculators/Calculator.js";
-import { calculator_description, calculator_headline } from "./Calculators/calculator.css.js";
 import { AnnualFeeCalculator } from "./Calculators/AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./Calculators/ApyCalculator/index.js";
+import { BalanceAPYCalculator } from "./Calculators/BalanceAPYCalculator/index.js";
+import { Calculator } from "./Calculators/Calculator.js";
+import { calculator_description, calculator_headline } from "./Calculators/calculator.css.js";
 import { MarginTradingCalculator } from "./Calculators/MarginTradingCalculator/index.js";
+import { MaxLoanCalculator } from "./Calculators/MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./Calculators/MonthlyPaymentCalculator/index.js";
 import { CallToActionBar } from "./CallToActionBar/index.js";
 import { Carousel, CarouselSlide } from "./Carousel/index.js";
@@ -56,7 +58,7 @@ import { ScheduleCallPremier } from "./Forms/ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
 import { WCPLSurvey } from "./Forms/WcplSurvey.js";
 import { HeroBanner } from "./HeroBanner/HeroBanner.js";
-import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_img, hero_text, hero_wrapper, logout, reversed } from "./HeroBanner/HeroBanner.css.js";
+import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_img, hero_text, hero_wrapper, 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";
 import { Hyperlink } from "./Hyperlink/index.js";
 import { IconBillboard } from "./IconBillboard/IconBillboard.js";
@@ -78,6 +80,7 @@ import { Input } from "./Input/Input.js";
 import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input/Input.css.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
+import { Interstitial } from "./Interstitial/index.js";
 import { LandingPageHeader } from "./LandingPageHeader/LandingPageHeader.js";
 import { lp_container, lp_hover, lp_theme, svg_fill } from "./LandingPageHeader/LandingPageHeader.css.js";
 import { LoadingIndicator } from "./LoadingIndicator/index.js";
@@ -95,7 +98,7 @@ import { bs_copy, bs_topic, bullet_details, li, line_points, point, step_num } f
 import { StepItemSet } from "./StepItemSet/StepItemSet.js";
 import { bs_add_details, bs_btns, bs_image, bs_section, bs_wrapper, modifier, ol, sec_subtitle, sec_title, steps_wrapper, svg_logo, tablet_col } from "./StepItemSet/StepItemSet.css.js";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table/Table.js";
-import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table/Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table/Table.css.js";
 import { TextBlock } from "./TextBlock/TextBlock.js";
 import { textBlockHeader, textBlockList, textBlockParagraph } from "./TextBlock/TextBlock.css.js";
 import { picker_arrow, picker_itemContent, picker_itemProduct, picker_navIcon, picker_navItem } from "./TopicalNavItem/TopicalNavItem.css.js";
@@ -166,6 +169,7 @@ export {
   AxosFooterSiteMap,
   default7 as AxosX,
   default8 as AxosXBlue,
+  BalanceAPYCalculator,
   Blockquote,
   BulletItem,
   Button,
@@ -219,11 +223,13 @@ export {
   Input,
   InputPhone,
   InputTextArea,
+  Interstitial,
   LandingPageHeader,
   LoadingIndicator,
   default18 as LockIcon,
   MainHTML,
   MarginTradingCalculator,
+  MaxLoanCalculator,
   default19 as MemberFdicLogo,
   Modal,
   MonthlyPaymentCalculator,
@@ -378,6 +384,7 @@ export {
   hero_wrapper,
   hide,
   hide_transcript,
+  highlight_cell,
   highlight_first_row,
   highlight_last_row,
   icon,
@@ -434,6 +441,7 @@ export {
   rate_container,
   rate_pad,
   reversed,
+  reversed_lg_image,
   sec_subtitle,
   sec_title,
   section_body,

package/dist/utils/allowedAxosDomains.js

@@ -19,8 +19,7 @@ const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);
   for (const key in moreDomains) {
     const urlToCompare = new URL(moreDomains[key], location.href);
-    if (uri.hostname === urlToCompare.hostname)
-      return true;
+    if (uri.hostname === urlToCompare.hostname) return true;
   }
   return false;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.86",
+  "version": "0.0.89",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -28,7 +28,7 @@
     "npm:link": "npm run build && npm link"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^3.9.0",
     "@react-input/mask": "^1.2.5",
     "@react-input/number-format": "^1.0.27",
     "@storybook/builder-vite": "^7.6.19",
@@ -41,13 +41,13 @@
     "iframe-resizer": "4.3.11",
     "moment": "^2.30.1",
     "react-date-picker": "^11.0.0",
-    "react-hook-form": "^7.52.0",
+    "react-hook-form": "^7.52.1",
     "react-markdown": "^9.0.1",
-    "react-use": "^17.5.0",
+    "react-use": "^17.5.1",
     "typed-css-modules": "^0.9.1",
     "vite-plugin-svgr": "^4.2.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css-utils": "^0.1.3",
@@ -71,8 +71,8 @@
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-prettier": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
-    "@types/node": "^20.12.12",
-    "@types/react": "^18.3.2",
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
@@ -86,7 +86,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.3.15",
+    "glob": "^10.4.5",
     "husky": "^9.0.11",
     "next": "^14.1.4",
     "prettier": "3.2.5",
@@ -98,7 +98,7 @@
     "storybook": "^7.6.19",
     "typescript": "^5.4.5",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.2.11",
+    "vite": "^5.3.4",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-setting-css-module": "^1.1.4",