@axos-web-dev/shared-components 0.0.195 → 0.0.197

package/dist/Button/Button.d.ts

@@ -18,4 +18,4 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
     as?: "a";
 };
 export type ButtonProps = ButtonAsButton | ButtonAsLink;
-export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, square, marketingIntersitial, }: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, square, marketingIntersitial, ...rest }: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.js

@@ -11,6 +11,7 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                                    */
 /* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
 import { useState, createElement } from "react";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
@@ -20,7 +21,6 @@ import "../ArticlesSet/ArticlesSet.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { validateLink } from "../utils/validateExternalLinks.js";
-import clsx from "clsx";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
@@ -42,6 +42,8 @@ import "../Input/RadioButton.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+/* empty css                                          */
+/* empty css                                          */
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
@@ -56,8 +58,6 @@ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js"
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
-/* empty css                                          */
-/* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -123,7 +123,8 @@ const Button = ({
   action,
   className,
   square,
-  marketingIntersitial
+  marketingIntersitial,
+  ...rest
 }) => {
   const variant = getVariant(color);
   const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
@@ -149,6 +150,7 @@ const Button = ({
     createElement(
       as,
       {
+        ...rest,
         className: clsx(
           button({ color: variant, size, disabled, rounded, square }),
           className

package/dist/Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.d.ts

@@ -15,7 +15,22 @@ export declare const bg_vars: import('@vanilla-extract/recipes').RuntimeFn<{
     };
 }>;
 export declare const calc_content_area: string;
-export declare const calc_h2: string;
+export declare const calc_h2: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
 export declare const calc_bodycopy: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {

package/dist/Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js

@@ -5,20 +5,20 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var bg_vars = createRuntimeFn({ defaultClassName: "_1xynjwx0", variantClassNames: { variant: { primary: "_1xynjwx1", secondary: "_1xynjwx2", tertiary: "_1xynjwx3", quaternary: "_1xynjwx4" } }, defaultVariants: {}, compoundVariants: [] });
 var calc_content_area = "_1xynjwx5";
-var calc_h2 = "_1xynjwx6";
-var calc_bodycopy = createRuntimeFn({ defaultClassName: "_1xynjwx7", variantClassNames: { variant: { primary: "_1xynjwx8", secondary: "_1xynjwx9", tertiary: "_1xynjwxa", quaternary: "_1xynjwxb" } }, defaultVariants: {}, compoundVariants: [] });
-var lvf_calc_header = "_1xynjwxc";
-var lvf_calc_wrapper = "_1xynjwxd";
-var calc_wrapper_inner = "_1xynjwxe";
-var calc_input_wrap = "_1xynjwxf";
-var calc_input_styles = "_1xynjwxg";
-var error_dialog = "_1xynjwxh";
-var rounded_cell = "_1xynjwxi";
-var results_wrap = "_1xynjwxj";
-var result_value = "_1xynjwxk";
-var result_header = "_1xynjwxl";
-var waves = "_1xynjwxm";
-var parallax = "_1xynjwxn";
+var calc_h2 = createRuntimeFn({ defaultClassName: "_1xynjwx6", variantClassNames: { variant: { primary: "_1xynjwx7", secondary: "_1xynjwx8", tertiary: "_1xynjwx9", quaternary: "_1xynjwxa" } }, defaultVariants: {}, compoundVariants: [] });
+var calc_bodycopy = createRuntimeFn({ defaultClassName: "_1xynjwxb", variantClassNames: { variant: { primary: "_1xynjwxc", secondary: "_1xynjwxd", tertiary: "_1xynjwxe", quaternary: "_1xynjwxf" } }, defaultVariants: {}, compoundVariants: [] });
+var lvf_calc_header = "_1xynjwxg";
+var lvf_calc_wrapper = "_1xynjwxh";
+var calc_wrapper_inner = "_1xynjwxi";
+var calc_input_wrap = "_1xynjwxj";
+var calc_input_styles = "_1xynjwxk";
+var error_dialog = "_1xynjwxl";
+var rounded_cell = "_1xynjwxm";
+var results_wrap = "_1xynjwxn";
+var result_value = "_1xynjwxo";
+var result_header = "_1xynjwxp";
+var waves = "_1xynjwxq";
+var parallax = "_1xynjwxr";
 export {
   bg_vars,
   calc_bodycopy,

package/dist/Calculators/MonthlyPaymentLVFCalculator/index.js

@@ -7,117 +7,83 @@ import { useState } from "react";
 import { calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import { bg_vars, calc_content_area, calc_h2, calc_bodycopy, lvf_calc_wrapper, lvf_calc_header, calc_wrapper_inner, calc_input_wrap, rounded_cell, calc_input_styles, error_dialog, results_wrap, result_header, result_value, waves, parallax } from "./MonthlyPaymentCalculator.css.js";
 const MonthlyPaymentLVFCalculator = ({ variant, header, bodyCopy, disclosure }) => {
-  const fullVariant = getVariant(variant);
-  const [loanAmountDisplay, setLoanAmountDisplay] = useState("$50,000");
+  const theme = getVariant(variant);
+  const [loanAmountMasked, setLoanAmountMasked] = useState("50,000");
   const [loanAmount, setLoanAmount] = useState(5e4);
   const [loanYears, setLoanYears] = useState(20);
-  const [interestRateDisplay, setInterestRateDisplay] = useState("8.25%");
   const [interestRate, setInterestRate] = useState("8.25");
-  const [estimatedPayment, setEstimatedPayment] = useState(426.03);
-  const [loanAmountError, setLoanAmountError] = useState(null);
-  const [interestRateError, setInterestRateError] = useState(
-    null
-  );
+  const [paymentAmount, setPaymentAmount] = useState(426.03);
+  const [loanErrorMsg, setLoanErrorMsg] = useState(null);
+  const [rateErrorMsg, setRateErrorMsg] = useState(null);
   const [isHovered, setIsHovered] = useState(false);
   const handleMouseEnter = () => setIsHovered(true);
   const handleMouseLeave = () => setIsHovered(false);
-  const stringToCurrency = (value) => {
+  const addDelimiters = (value) => {
     const numericValue = parseFloat(value.replace(/[^0-9.]/g, ""));
     if (isNaN(numericValue)) {
       return "";
     }
     return numericValue.toLocaleString("en-US", {
-      style: "currency",
-      currency: "USD",
       minimumFractionDigits: 0,
       maximumFractionDigits: 0
     });
   };
-  const validateInputs = () => {
+  const inputsValid = () => {
     let isValid = true;
     if (!loanAmount) {
-      setLoanAmountError("Please enter an amount");
+      setLoanErrorMsg("* loan amount required");
       isValid = false;
     } else {
-      setLoanAmountError(null);
+      setLoanErrorMsg(null);
     }
     if (!interestRate) {
-      setInterestRateError("Please enter an interest rate");
+      setRateErrorMsg("* interest rate required");
       isValid = false;
     } else {
-      setInterestRateError(null);
+      setRateErrorMsg(null);
     }
     return isValid;
   };
-  const handleLoanAmountChange = (event) => {
-    const value = event.target.value;
-    const formattedValue = stringToCurrency(value);
-    setLoanAmountDisplay(formattedValue);
-    const numericValue = parseFloat(value.replace(/[^0-9.]/g, ""));
+  const handleAmountChange = (e) => {
+    const amount = e.target.value;
+    const formatAmount = addDelimiters(amount);
+    setLoanAmountMasked(formatAmount);
+    const numericValue = parseFloat(amount.replace(/[^0-9.]/g, ""));
     setLoanAmount(numericValue);
   };
-  const handleloanYearsChange = (event) => {
-    setLoanYears(Number(event.target.value));
-  };
-  const formatToPercentage = (value) => {
-    const numericValue = value.replace(/[^0-9.]/g, "");
-    if (numericValue === "") {
-      return "";
-    } else if (numericValue.endsWith("%")) {
-      return numericValue;
-    } else {
-      return numericValue.substring(0, numericValue.length - 2) + numericValue.substring(numericValue.length - 2) + "%";
-    }
+  const handleloanYearsChange = (e) => {
+    setLoanYears(Number(e.target.value));
   };
-  const handleInterestRateChange = (event) => {
-    let value = event.target.value;
-    if (value.length < interestRateDisplay.length) {
-      if (interestRateDisplay.length > 1 && interestRateDisplay.endsWith("%")) {
-        value = interestRateDisplay.substring(0, interestRateDisplay.length - 2) + "%";
-      } else if (interestRateDisplay.length === 1) {
-        value = "";
-      } else {
-        value = interestRateDisplay.substring(
-          0,
-          interestRateDisplay.length - 1
-        );
-      }
-    } else {
-      value = formatToPercentage(value);
-    }
-    setInterestRateDisplay(value);
+  const handleRateChange = (e) => {
+    let value = e.target.value;
     setInterestRate(value.replace(/[^0-9.]/g, ""));
   };
-  const calculateMonthlyPayment = () => {
-    const numericInterestRate = parseFloat(interestRate);
-    const monthlyInterestRate = numericInterestRate / 100 / 12;
+  const calculatePayment = () => {
+    const rateAsNum = parseFloat(interestRate);
+    const monthlyRate = rateAsNum / 100 / 12;
     const months = loanYears * 12;
-    if (!isNaN(loanAmount || 0) && !isNaN(numericInterestRate)) {
-      const monthlyPayment = (loanAmount || 0) * monthlyInterestRate / (1 - Math.pow(1 + monthlyInterestRate, -months));
-      setEstimatedPayment(monthlyPayment);
+    if (!isNaN(loanAmount || 0) && !isNaN(rateAsNum)) {
+      const monthlyPayment = (loanAmount || 0) * monthlyRate / (1 - Math.pow(1 + monthlyRate, -months));
+      setPaymentAmount(monthlyPayment);
     } else {
-      setEstimatedPayment(0);
+      setPaymentAmount(0);
     }
   };
   const handleCalculate = () => {
-    if (validateInputs()) {
-      calculateMonthlyPayment();
-    } else {
-      setEstimatedPayment(0);
-    }
+    inputsValid() ? calculatePayment() : setPaymentAmount(0);
   };
-  return /* @__PURE__ */ jsxs("section", { className: bg_vars({ variant: fullVariant }), children: [
+  return /* @__PURE__ */ jsxs("section", { className: bg_vars({ variant: theme }), children: [
     /* @__PURE__ */ jsxs("div", { className: "containment", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex between middle gap_24", children: [
         (header || bodyCopy) && /* @__PURE__ */ jsxs("span", { className: calc_content_area, children: [
-          header && /* @__PURE__ */ jsx("h2", { className: `header_1 ${calc_h2}`, children: header }),
-          bodyCopy && /* @__PURE__ */ jsx("div", { className: calc_bodycopy({ variant: fullVariant }), children: bodyCopy })
+          header && /* @__PURE__ */ jsx("h2", { className: `header_1 ${calc_h2({ variant: theme })}`, children: header }),
+          bodyCopy && /* @__PURE__ */ jsx("div", { className: calc_bodycopy({ variant: theme }), children: bodyCopy })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: lvf_calc_wrapper, children: [
           /* @__PURE__ */ jsx("div", { className: lvf_calc_header, children: "Calculate Your Payments" }),
           /* @__PURE__ */ jsxs("div", { className: calc_wrapper_inner, children: [
             /* @__PURE__ */ jsx("div", { className: calc_input_wrap, children: /* @__PURE__ */ jsxs("div", { className: rounded_cell, children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "loanAmount", id: "amount1", children: "$" }),
+              /* @__PURE__ */ jsx("label", { htmlFor: "loanAmount", children: "$" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -127,11 +93,11 @@ const MonthlyPaymentLVFCalculator = ({ variant, header, bodyCopy, disclosure })
                   name: "loanAmount",
                   type: "text",
                   placeholder: "Loan Amount",
-                  value: loanAmountDisplay,
-                  onChange: handleLoanAmountChange
+                  value: loanAmountMasked,
+                  onChange: handleAmountChange
                 }
               ),
-              loanAmountError && /* @__PURE__ */ jsx("span", { className: error_dialog, children: loanAmountError })
+              loanErrorMsg && /* @__PURE__ */ jsx("span", { className: error_dialog, children: loanErrorMsg })
             ] }) }),
             /* @__PURE__ */ jsx("div", { className: `${calc_input_wrap} push_up_24`, children: /* @__PURE__ */ jsxs("div", { className: rounded_cell, children: [
               /* @__PURE__ */ jsx("label", { htmlFor: "loanYears", children: "Years" }),
@@ -158,11 +124,11 @@ const MonthlyPaymentLVFCalculator = ({ variant, header, bodyCopy, disclosure })
                   name: "interestRate",
                   type: "text",
                   placeholder: "Interest Rate",
-                  value: interestRateDisplay,
-                  onChange: handleInterestRateChange
+                  value: interestRate,
+                  onChange: handleRateChange
                 }
               ),
-              interestRateError && /* @__PURE__ */ jsx("span", { className: error_dialog, children: interestRateError })
+              rateErrorMsg && /* @__PURE__ */ jsx("span", { className: error_dialog, children: rateErrorMsg })
             ] }) }),
             /* @__PURE__ */ jsx("div", { className: `flex center middle push_up_24`, children: /* @__PURE__ */ jsx(
               "input",
@@ -190,7 +156,7 @@ const MonthlyPaymentLVFCalculator = ({ variant, header, bodyCopy, disclosure })
                   /* @__PURE__ */ jsx("span", { className: result_header, children: "Your monthly loan payment will be:" }),
                   /* @__PURE__ */ jsxs("span", { id: "estimatedPayment", className: result_value, children: [
                     "$",
-                    estimatedPayment.toFixed(2)
+                    paymentAmount.toFixed(2)
                   ] })
                 ]
               }
@@ -198,7 +164,7 @@ const MonthlyPaymentLVFCalculator = ({ variant, header, bodyCopy, disclosure })
           ] })
         ] })
       ] }),
-      disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: fullVariant }), children: disclosure })
+      disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: theme }), children: disclosure })
     ] }),
     /* @__PURE__ */ jsxs(
       "svg",

package/dist/CallToActionBar/index.js

@@ -71,7 +71,7 @@ const CallToActionBar = ({
           ),
           style: { justifyContent: "center" },
           children: [
-            banner_size !== "small" && !imageMobileView && image && /* @__PURE__ */ jsx(
+            banner_size !== "small" && !imageMobileView && image.src && /* @__PURE__ */ jsx(
               "div",
               {
                 className: `${cta_image_section} ${image_overlap ? cta_image_section_overlap : ""}`,

package/dist/Chevron/Chevron.css.d.ts

@@ -30,3 +30,4 @@ export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
     };
 }>;
 export declare const chevron_wrapper: string;
+export declare const reverse: string;

package/dist/Chevron/Chevron.css.js

@@ -5,7 +5,9 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var chevron = createRuntimeFn({ defaultClassName: "_1gp5vfo0", variantClassNames: { variant: { primary: "_1gp5vfo1", secondary: "_1gp5vfo2", tertiary: "_1gp5vfo3" } }, defaultVariants: {}, compoundVariants: [] });
 var chevron_wrapper = "_1gp5vfo4";
+var reverse = "_1gp5vfo5";
 export {
   chevron,
-  chevron_wrapper
+  chevron_wrapper,
+  reverse
 };

package/dist/Chevron/Chevron.interface.d.ts

@@ -3,6 +3,10 @@ import { CallToActionTypes } from '../utils/variant.types';
 import { PropsWithChildren, ReactNode } from 'react';
 
 export interface ChevronProps extends PropsWithChildren {
+    /**
+     * render as button or a element
+     */
+    as?: "button" | "a" | undefined;
     /**
      * react node to add as a children
      */
@@ -41,4 +45,8 @@ export interface ChevronProps extends PropsWithChildren {
     icon?: string;
     marketingIntersitial?: interstitialProps;
     newTab?: boolean;
+    onClick?: () => void;
+    action?: () => void;
+    classNameWrapper?: string;
+    leftArrow?: boolean;
 }

package/dist/Chevron/index.js

@@ -17,7 +17,7 @@ import { chevron_wrapper, chevron } from "./Chevron.css.js";
 import { useGlobalContext } from "../Modal/contextApi/store.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { validateLink } from "../utils/validateExternalLinks.js";
-import "clsx";
+import clsx from "clsx";
 import { useState } from "react";
 import "../Button/Button.css.js";
 import "react-use";
@@ -44,6 +44,8 @@ import "../Input/RadioButton.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+/* empty css                                          */
+/* empty css                                          */
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
@@ -58,8 +60,6 @@ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js"
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
-/* empty css                                          */
-/* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -118,7 +118,10 @@ const Chevron = ({
   className,
   goBack = false,
   marketingIntersitial,
-  newTab = false
+  newTab = false,
+  classNameWrapper,
+  leftArrow = false,
+  action
 }) => {
   variant = getVariant(variant);
   const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
@@ -162,19 +165,28 @@ const Chevron = ({
     }
   } : backFunction;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { className: `sc__btn ${chevron_wrapper}`, children: [
+    /* @__PURE__ */ jsxs("span", { className: clsx(`sc__btn ${chevron_wrapper}`, classNameWrapper), children: [
+      leftArrow && /* @__PURE__ */ jsx(
+        SvgArrowIcon,
+        {
+          className: "arrow",
+          variant,
+          style: { rotate: "180deg" }
+        }
+      ),
       /* @__PURE__ */ jsx(
         "a",
         {
           id,
-          href: findMoreAxosDomains(targetUrl),
+          tabIndex: 0,
+          href: !action ? findMoreAxosDomains(targetUrl) : "#!",
           className: `${chevron({ variant })} ${className ? className : ""}`,
-          onClick: marketingIntersitial ? openMarketingInterstitial : onClick,
+          onClick: action ? action : marketingIntersitial ? openMarketingInterstitial : onClick,
           target: newTab ? "_blank" : "_self",
           children
         }
       ),
-      /* @__PURE__ */ jsx(SvgArrowIcon, { className: "arrow", variant })
+      !leftArrow && /* @__PURE__ */ jsx(SvgArrowIcon, { className: "arrow", variant })
     ] }),
     marketingIntersitial && isOpenMktInterstitial && /* @__PURE__ */ jsx(
       Interstitial,

package/dist/FaqAccordion/index.js

@@ -42,6 +42,8 @@ import "../Input/RadioButton.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+/* empty css                                          */
+/* empty css                                          */
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
@@ -57,8 +59,6 @@ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js"
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
-/* empty css                                          */
-/* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -7,13 +7,13 @@ import "../../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                      */
 /* empty css                                                       */
 /* empty css                                                   */
+import "clsx";
 import "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
 import "../../Article/Article.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
-import "clsx";
 /* empty css                                             */
 /* empty css                                             */
 import "../../Interstitial/Interstitial-variants.css.js";

package/dist/Forms/ApplyNow.d.ts

@@ -0,0 +1,4 @@
+import { FormProps } from './FormProps';
+
+export declare const ApplyNow: ({ icon, children, disclosure, variant: fullVariant, headline, description, id, }: Omit<FormProps, "callToAction" | "validateEmail" | "onSubmit">) => import("react/jsx-runtime").JSX.Element;
+export declare const getLink: (selection: Array<string>) => string;