@axos-web-dev/shared-components 1.0.18 → 1.0.20

package/dist/assets/Calculators/BuyDownCalculator/BuyDownCalculator.css

@@ -0,0 +1,197 @@
+.n9fzuw0 {
+  padding-inline: 120px;
+  padding-top: 48px;
+  padding-bottom: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.n9fzuw1 {
+  background: var(--_1073cm81);
+  color: var(--_1073cm82);
+}
+.n9fzuw2 {
+  background: var(--_1073cm88);
+  color: var(--_1073cm89);
+}
+.n9fzuw3 {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8g);
+}
+.n9fzuw4 {
+  background: var(--_1073cm8m);
+  color: var(--_1073cm8n);
+}
+.n9fzuw5 {
+  padding: 2.5rem 0;
+  display: flex;
+}
+.n9fzuw6 {
+  width: 100%;
+}
+.n9fzuw7 {
+  margin-bottom: 2.5rem;
+  max-width: 49.5rem;
+  text-align: center;
+  margin-inline: auto;
+}
+.n9fzuw8 {
+  margin-inline: auto;
+}
+.n9fzuw9 {
+  color: red;
+  font-size: larger;
+  list-style: none;
+}
+.n9fzuwa {
+  font-family: var(--main-font-family);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.n9fzuwb {
+  color: var(--_1073cm82);
+}
+.n9fzuwc {
+  color: var(--_1073cm89);
+}
+.n9fzuwd {
+  color: var(--_1073cm8g);
+}
+.n9fzuwe {
+  color: var(--_1073cm8n);
+}
+.n9fzuwf {
+  max-width: 792px;
+  margin: 0 auto;
+}
+.n9fzuwg {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 15px;
+}
+.n9fzuwh {
+  display: flex;
+  flex-direction: row;
+}
+.n9fzuwg > div {
+  flex-grow: 1;
+  width: 100%;
+}
+.n9fzuwi {
+  margin-top: 1.5rem;
+  text-align: center;
+  margin-inline: auto;
+  margin-bottom: 1.5rem;
+}
+.n9fzuwg .input_label {
+  color: inherit;
+}
+.n9fzuwj {
+  position: relative;
+}
+.n9fzuwk {
+  position: absolute;
+  color: #323339;
+  font-size: 18px;
+  font-weight: 500!important;
+  margin-bottom: 0;
+}
+.n9fzuwl {
+  left: 21px;
+  top: 46px;
+}
+.n9fzuwm {
+  top: 47px;
+  right: 10px;
+}
+.n9fzuwn {
+  padding-left: 2rem;
+}
+.n9fzuwp {
+  width: 100%;
+}
+.n9fzuwq > p {
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 10px;
+  letter-spacing: .2px;
+}
+.n9fzuwr {
+  margin-bottom: 1rem;
+}
+._1073cm80 .n9fzuwt {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm84);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 .n9fzuwt {
+  color: var(--_1073cm83);
+}
+._1073cm80 .n9fzuwu {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm8b);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 .n9fzuwu {
+  color: var(--_1073cm8a);
+}
+.n9fzuwv {
+  color: var(--_1073cm8h);
+}
+.n9fzuww {
+  color: var(--_1073cm8o);
+}
+.n9fzuwx {
+  margin-top: 0.5rem;
+}
+.n9fzuwy {
+  padding-inline-start: 0;
+}
+.n9fzuwz {
+  font-weight: 400;
+  color: #344a53;
+  margin-bottom: 8px;
+}
+.n9fzuw8 label:not(.n9fzuwz) {
+  font-weight: 700;
+  color: #28587d;
+}
+@media screen and (max-width:1023px) {
+  .n9fzuw0 {
+    padding-inline: 0;
+    padding: 0 3.5rem;
+  }
+  .n9fzuwq {
+    margin-top: 1rem;
+  }
+}
+@media screen and (max-width:768px) {
+  .n9fzuw0 {
+    padding: 0 2rem;
+  }
+}
+@media screen and (max-width:470px) {
+  .n9fzuw0 {
+    padding: 0 1.5rem;
+  }
+}
+@media screen and (max-width:1124px) {
+  .n9fzuw5 {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+@media screen and (min-width:1125px) {
+  .n9fzuw6 {
+    margin-right: 2rem;
+  }
+}
+@media screen and (max-width:480px) {
+  .n9fzuwg {
+    flex-direction: column;
+  }
+}

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -1,3 +1,13 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 ._1m7m2a0 {
   height: auto;
 }
@@ -193,6 +203,58 @@
 main > div:nth-last-child(2) > ._1m7m2a0 {
   margin-bottom: 3.5rem;
 }
+._1m7m2a12 {
+  position: fixed;
+  inset: 0;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  min-height: 100vh;
+  justify-content: center;
+  width: 100%;
+  z-index: 9999;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+._1m7m2a13 {
+  width: 100%;
+}
+._1m7m2a13 .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 {
+  border-radius: 1rem;
+  overflow: hidden;
+}
+._1m7m2a13 ._1m7m2an {
+  padding: 0;
+}
+._1m7m2a13 ._1m7m2aj img {
+  object-fit: none;
+}
+._1m7m2a14 {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.75rem;
+  background: #faa74a;
+  border: none;
+  border-radius: 8px;
+  color: #1e3860;
+  cursor: pointer;
+  font-family: var(--header-font-family);
+  font-size: 1.1rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 8px 14px;
+}
+._1m7m2a14:focus {
+  outline: 2px solid #faa74a;
+  outline-offset: 2px;
+}
 @media screen and (max-width:1023px) {
   ._1m7m2a0 {
     flex-direction: column;
@@ -216,6 +278,11 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2an {
     max-width: 100%;
   }
+  ._1m7m2a12 {
+    display: block;
+    padding-top: 85px;
+    padding-bottom: 1rem;
+  }
 }
 @media screen and (max-width:475px) {
   ._1m7m2am {
@@ -243,6 +310,13 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   main > div:nth-last-child(2) > ._1m7m2a0 {
     margin-bottom: 42px;
   }
+  ._1m7m2a13 .billboard {
+    padding: 32px;
+    width: min(33rem, calc(100% - 2rem));
+  }
+  ._1m7m2a13 ._1m7m2aj img {
+    object-fit: cover;
+  }
 }
 @media screen and (max-width: 768px) {
   ._1m7m2au {
@@ -267,4 +341,36 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2a11 {
     padding-left: 20px;
   }
+}
+@media screen and (min-width: 1024px) {
+  ._1m7m2a13 .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 {
+    font-size: 40px;
+    line-height: 1.25;
+    text-wrap: pretty;
+  }
+  ._1m7m2a13 ._1m7m2an {
+    max-width: 60%;
+  }
+  ._1m7m2a13 ._1m7m2aj {
+    max-width: 40%;
+  }
+  ._1m7m2a13 ._1m7m2am {
+    justify-content: flex-start;
+  }
+}
+@media screen and (min-width: 1281px) {
+  ._1m7m2a13 .billboard {
+    gap: 72px;
+    padding: 48px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  ._1m7m2a13 .billboard:not(.reversed) {
+    flex-direction: column-reverse;
+  }
 }

package/dist/main.d.ts

@@ -16,6 +16,7 @@ export * from './Calculators/AxosOneCalculator';
 export * from './Calculators/BalanceAPYCalculator';
 export * from './Calculators/MarginTradingCalculator';
 export * from './Calculators/MonthlyPaymentCalculator';
+export * from './Calculators/BuyDownCalculator';
 export * from './CallToActionBar';
 export * from './Carousel';
 export * from './Chevron';

package/dist/main.js

@@ -28,6 +28,7 @@ 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";
@@ -117,7 +118,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, 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, 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 { 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";
@@ -222,6 +223,7 @@ export {
   BreadcumbHeader,
   BulletItem,
   Button,
+  BuyDownCalculator,
   Calculator,
   CallToActionBar,
   Carousel,
@@ -432,6 +434,8 @@ export {
   dropdown,
   dynPH,
   executive_bio,
+  exit_intent,
+  exit_intent_backdrop,
   expand_icon,
   feature_header,
   feature_title,
@@ -553,6 +557,7 @@ export {
   mh_330,
   modalCheckboxContainer,
   modalMobile,
+  modal_close_button,
   modifier,
   mt1Rem,
   mt2rem,

package/package.json

@@ -1,130 +1,130 @@
-{
-  "name": "@axos-web-dev/shared-components",
-  "description": "Axos shared components library for web.",
-  "version": "1.0.18",
-  "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "dist/assets/**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig.build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "check-types": "tsc --pretty --noEmit",
-    "check-format": "prettier --check .",
-    "check-lint": "eslint . --ext ts --ext tsx --ext js",
-    "format": "prettier --write .",
-    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "npm:link": "npm run build && npm link"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@hookform/resolvers": "^3.9.1",
-    "@react-input/mask": "^1.2.15",
-    "@react-input/number-format": "^1.1.3",
-    "@storybook/icons": "^1.3.0",
-    "@storybook/preview-api": "^8.4.7",
-    "@types/iframe-resizer": "3.5.13",
-    "@vanilla-extract/css": "^1.16.1",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "antd": "^5.22.5",
-    "clsx": "^2.1.1",
-    "iframe-resizer": "^3.6.6",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "react-date-picker": "^11.0.0",
-    "react-date-range": "^2.0.1",
-    "react-hook-form": "^7.54.2",
-    "react-markdown": "^9.0.1",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "react-use": "^17.6.0",
-    "react-wrap-balancer": "^1.1.1",
-    "rsuite": "^5.75.0",
-    "slick-carousel": "^1.8.1",
-    "typed-css-modules": "^0.9.1",
-    "vite-plugin-svgr": "^4.3.0",
-    "zod": "^3.24.1",
-    "zustand": "^4.5.5"
-  },
-  "peerDependencies": {
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^4.0.3",
-    "next": "^14.1.4",
-    "react": "^18.2.0",
-    "react-date-range": "^2.0.1",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-mdx-gfm": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@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/react-date-range": "^1.4.9",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-slick": "^0.23.13",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/recipes": "^0.5.5",
-    "@vanilla-extract/vite-plugin": "^4.0.18",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "esbuild-vanilla-image-loader": "^0.1.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.4.5",
-    "husky": "^9.1.7",
-    "next": "^14.1.4",
-    "prettier": "3.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-svg-import": "^3.0.0",
-    "rollup-plugin-svgo": "^2.0.0",
-    "storybook": "^8.4.7",
-    "typescript": "^5.7.2",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-setting-css-module": "^1.1.4",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
-  "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "author": "axos-web-dev",
-  "license": "ISC"
-}
+{
+  "name": "@axos-web-dev/shared-components",
+  "description": "Axos shared components library for web.",
+  "version": "1.0.20",
+  "type": "module",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "dist/assets/**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "check-types": "tsc --pretty --noEmit",
+    "check-format": "prettier --check .",
+    "check-lint": "eslint . --ext ts --ext tsx --ext js",
+    "format": "prettier --write .",
+    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "npm:link": "npm run build && npm link"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@react-input/mask": "^1.2.15",
+    "@react-input/number-format": "^1.1.3",
+    "@storybook/icons": "^1.3.0",
+    "@storybook/preview-api": "^8.4.7",
+    "@types/iframe-resizer": "3.5.13",
+    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "antd": "^5.22.5",
+    "clsx": "^2.1.1",
+    "iframe-resizer": "^3.6.6",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "react-date-picker": "^11.0.0",
+    "react-date-range": "^2.0.1",
+    "react-hook-form": "^7.54.2",
+    "react-markdown": "^9.0.1",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "react-use": "^17.6.0",
+    "react-wrap-balancer": "^1.1.1",
+    "rsuite": "^5.75.0",
+    "slick-carousel": "^1.8.1",
+    "typed-css-modules": "^0.9.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "zod": "^3.24.1",
+    "zustand": "^4.5.5"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
+    "next": "^14.1.4",
+    "react": "^18.2.0",
+    "react-date-range": "^2.0.1",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@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/react-date-range": "^1.4.9",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/vite-plugin": "^4.0.18",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "esbuild-vanilla-image-loader": "^0.1.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.4.5",
+    "husky": "^9.1.7",
+    "next": "^14.1.4",
+    "prettier": "3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-svg-import": "^3.0.0",
+    "rollup-plugin-svgo": "^2.0.0",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-setting-css-module": "^1.1.4",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "author": "axos-web-dev",
+  "license": "ISC"
+}