@axos-web-dev/shared-components 1.0.77-patch.6 → 1.0.77-patch.61

package/dist/Calculators/Calculator.d.ts

@@ -1,5 +1,6 @@
 import { IconBillboardProps } from '../IconBillboard/IconBillboard.interface';
 import { default as React } from 'react';
+import { ChevronProps } from '../Chevron/Chevron.interface';
 
 export interface CalculatorProps {
     id?: string;
@@ -12,5 +13,6 @@ export interface CalculatorProps {
     disclosure?: React.ReactNode;
     marketingTiles?: IconBillboardProps[];
     initialBalance?: number;
+    callToActionRow?: ChevronProps[];
 }
 export declare const Calculator: (props: CalculatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Calculators/Calculator.js

@@ -7,20 +7,21 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/VideoTile.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
 import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
+import { useRef, useEffect } from "react";
 import clsx from "clsx";
 /* empty css                                          */
 /* empty css                                          */
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-import { useRef, useEffect } from "react";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../Chevron/Chevron.css.js";
@@ -38,15 +39,25 @@ import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
 import { AxosOneCalculator } from "./AxosOneCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
+import { BuyDownCalculator } from "./BuyDownCalculator/index.js";
 import { calculator_headline, calculator_description } from "./calculator.css.js";
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
+import { MarineLoanMonthlyPaymentCalculator } from "./MarineLoanMonthlyPaymentCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
 import { MonthlyPaymentLVFCalculator } from "./MonthlyPaymentLVFCalculator/index.js";
 import { SummitApyCalculator } from "./SummitApyCalculator/index.js";
-import { BuyDownCalculator } from "./BuyDownCalculator/index.js";
+/* empty css                                    */
 /* empty css                                                    */
 import "../Carousel/index.js";
+/* empty css                                                   */
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/authenticate.js";
+/* empty css                                    */
+import "react-use";
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -65,6 +76,8 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 /* empty css                                            */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "next/script.js";
+/* empty css                                        */
 /* empty css                                        */
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -80,10 +93,8 @@ import "../Input/RadioButton.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
-import "react-use";
 /* empty css                                                      */
 import "next/navigation.js";
 /* empty css                                                         */
@@ -112,12 +123,11 @@ import "../Table/Table.css.js";
 /* empty css                                */
 /* empty css                                                  */
 /* empty css                                                */
-import "next/script.js";
-/* empty css                                        */
 /* empty css                                              */
 import "../Interstitial/Interstitial-variants.css.js";
 import "../Button/Button.css.js";
 import { iconForm } from "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
@@ -135,7 +145,8 @@ const Calculator = (props) => {
     headline,
     name,
     marketingTiles,
-    initialBalance
+    initialBalance,
+    callToActionRow
   } = props;
   const ref = useRef(null);
   const iframe = calculators.get(name || "");
@@ -227,7 +238,8 @@ const Calculator = (props) => {
         variant,
         disclosure,
         icon,
-        initialBalance
+        initialBalance,
+        callToActionRow
       }
     );
   } else if (name === "APY Balance Summit Savings") {
@@ -251,7 +263,17 @@ const Calculator = (props) => {
         disclosure
       }
     );
-  } else
+  } else if (name === "Marine Loan Monthly Payment Calculator") {
+    return /* @__PURE__ */ jsx(
+      MarineLoanMonthlyPaymentCalculator,
+      {
+        header: headline,
+        bodyCopy,
+        variant,
+        disclosure
+      }
+    );
+  } else {
     return /* @__PURE__ */ jsx("section", { id, children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
       /* @__PURE__ */ jsxs("div", { children: [
         icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
@@ -285,6 +307,7 @@ const Calculator = (props) => {
       ) }),
       /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: disclosure })
     ] }) });
+  }
 };
 export {
   Calculator

package/dist/Calculators/MarineLoanMonthlyPaymentCalculator/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React, FC } from 'react';
+
+export interface MarineLoanMonthlyPaymentCalculatorProps {
+    header?: React.ReactNode | string;
+    bodyCopy?: React.ReactNode | string;
+    variant?: string;
+    disclosure?: React.ReactNode;
+}
+export declare const MarineLoanMonthlyPaymentCalculator: FC<MarineLoanMonthlyPaymentCalculatorProps>;

package/dist/Calculators/MarineLoanMonthlyPaymentCalculator/index.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { button } from "../../Button/Button.css.js";
+import { title } from "../../IconBillboard/IconBillboard.css.js";
+import "../../utils/allowedAxosDomains.js";
+import { getVariant } from "../../utils/getVariant.js";
+import { useState } from "react";
+import clsx from "clsx";
+import { calc_text, description_text, calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import { calculator } from "../calculator.css.js";
+import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, hide_select_arrow, calculation_header, payment_results } from "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+const MarineLoanMonthlyPaymentCalculator = ({ variant, header, disclosure, bodyCopy = true }) => {
+  const fullVariant = getVariant(variant);
+  const [loanAmountDisplay, setLoanAmountDisplay] = useState("$75,000");
+  const [loanAmount, setLoanAmount] = useState(75e3);
+  const [loanDuration, setLoanDuration] = useState(240);
+  const [interestRateDisplay, setInterestRateDisplay] = useState("8.25%");
+  const [interestRate, setInterestRate] = useState("8.25");
+  const [estimatedPayment, setEstimatedPayment] = useState(0);
+  const [loanAmountError, setLoanAmountError] = useState(null);
+  const [interestRateError, setInterestRateError] = useState(
+    null
+  );
+  const formatToCurrency = (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 = () => {
+    let isValid = true;
+    if (!loanAmount || isNaN(loanAmount) || loanAmount < 75e3 || loanAmount > 5e6) {
+      setLoanAmountError(
+        "Please enter an amount between $75,000 and $5,000,000."
+      );
+      isValid = false;
+    } else {
+      setLoanAmountError(null);
+    }
+    if (!interestRate || isNaN(parseFloat(interestRate)) || parseFloat(interestRate) === 0) {
+      setInterestRateError("Please enter an Interest Rate.");
+      isValid = false;
+    } else {
+      setInterestRateError(null);
+    }
+    return isValid;
+  };
+  const handleLoanAmountChange = (event) => {
+    const value = event.target.value;
+    const formattedValue = formatToCurrency(value);
+    setLoanAmountDisplay(formattedValue);
+    const numericValue = parseFloat(value.replace(/[^0-9.]/g, ""));
+    setLoanAmount(isNaN(numericValue) ? void 0 : numericValue);
+  };
+  const handleLoanDurationChange = (event) => {
+    setLoanDuration(Number(event.target.value));
+  };
+  const formatToPercentage = (value) => {
+    let numericValue = value.replace(/[^0-9.]/g, "");
+    const parts = numericValue.split(".");
+    if (parts.length > 2) {
+      numericValue = parts[0] + "." + parts.slice(1).join("");
+    }
+    if (numericValue === "") return "";
+    const cleaned = numericValue.startsWith("0") && numericValue !== "0" ? String(parseFloat(numericValue)) : numericValue;
+    return cleaned + "%";
+  };
+  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 numeric = value.replace(/[^0-9.]/g, "");
+    setInterestRate(numeric);
+  };
+  const calculateMonthlyPayment = () => {
+    const numericInterestRate = parseFloat(interestRate);
+    const monthlyInterestRate = numericInterestRate / 100 / 12;
+    const months = loanDuration;
+    if (!isNaN(loanAmount || 0) && !isNaN(numericInterestRate)) {
+      const monthlyPayment = (loanAmount || 0) * monthlyInterestRate / (1 - Math.pow(1 + monthlyInterestRate, -months));
+      setEstimatedPayment(monthlyPayment);
+    } else {
+      setEstimatedPayment(0);
+    }
+  };
+  const handleCalculate = () => {
+    if (validateInputs()) {
+      calculateMonthlyPayment();
+    } else {
+      setEstimatedPayment(0);
+    }
+  };
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: `text_center ${title({ variant: fullVariant })} ${h2i}`,
+              children: header
+            }
+          ),
+          bodyCopy && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${calc_text} ${description_text({ variant: fullVariant })} text_center`,
+              children: bodyCopy
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex center text_center push_up_32 bottom ${inputs_container}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "loanAmount", id: "amount1", children: "Loan Amount" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
+                    id: "loanAmount",
+                    maxLength: 10,
+                    name: "loanAmount",
+                    type: "text",
+                    placeholder: "$0",
+                    value: loanAmountDisplay,
+                    onChange: handleLoanAmountChange
+                  }
+                ),
+                loanAmountError && /* @__PURE__ */ jsx("span", { className: error_message, children: loanAmountError })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "loanDuration", children: "Loan Duration (Months)" }),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    className: `text_center bordered ${input_box({ variant: fullVariant })} ${hide_select_arrow}`,
+                    id: "loanDuration",
+                    name: "loanDuration",
+                    value: loanDuration,
+                    onChange: handleLoanDurationChange,
+                    disabled: true,
+                    children: /* @__PURE__ */ jsx("option", { value: "240", children: "240" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "interestRate", children: "Interest Rate" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
+                    id: "interestRate",
+                    maxLength: 6,
+                    name: "interestRate",
+                    type: "text",
+                    placeholder: "0.00%",
+                    value: interestRateDisplay,
+                    onChange: handleInterestRateChange
+                  }
+                ),
+                interestRateError && /* @__PURE__ */ jsx("span", { className: error_message, children: interestRateError })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: `flex center middle push_up_32`, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `${button({
+                color: "primary",
+                size: "medium",
+                rounded: "medium"
+              })} center`,
+              type: "button",
+              value: "Calculate",
+              onClick: handleCalculate
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "text_center flex flex_col center middle push_up_32", children: [
+            /* @__PURE__ */ jsx("span", { className: calculation_header, children: "Estimated Monthly Payment:" }),
+            /* @__PURE__ */ jsxs("span", { id: "estimatedPayment", className: payment_results, children: [
+              "$",
+              estimatedPayment.toFixed(2)
+            ] })
+          ] })
+        ] }),
+        disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: fullVariant }), children: disclosure })
+      ]
+    }
+  ) }) });
+};
+export {
+  MarineLoanMonthlyPaymentCalculator
+};

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -5,8 +5,8 @@ import { calc_container, container, h2i, inputs_container, input_container, inpu
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
-import clsx from "clsx";
 import { useState } from "react";
+import clsx from "clsx";
 import { calculator } from "../calculator.css.js";
 const MaxLoanCalculator = ({
   variant,
@@ -204,11 +204,28 @@ const MaxLoanCalculator = ({
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "text_center flex flex_col center middle push_up_32", children: [
-            /* @__PURE__ */ jsx("span", { className: calculation_header, children: "Maximum Loan Amount You Can Borrow:" }),
-            /* @__PURE__ */ jsxs("span", { id: "estimatedLoanAmount", className: payment_results, children: [
-              "$",
-              loanAmount.toFixed(2)
-            ] })
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "estimatedLoanAmount",
+                className: calculation_header,
+                children: "Maximum Loan Amount You Can Borrow:"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "output",
+              {
+                id: "estimatedLoanAmount",
+                className: payment_results,
+                name: "estimated-loan-amount",
+                htmlFor: "monthlyPayment loanDuration interestRate",
+                role: "status",
+                children: [
+                  "$",
+                  loanAmount.toFixed(2)
+                ]
+              }
+            )
           ] })
         ] })
       ]

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

@@ -41,3 +41,4 @@ export declare const inputs_container: string;
 export declare const calculation_header: string;
 export declare const error_message: string;
 export declare const h2i: string;
+export declare const hide_select_arrow: string;

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

@@ -1,5 +1,6 @@
-import '../../assets/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                            */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -12,12 +13,14 @@ var inputs_container = "_10pitvcd";
 var calculation_header = "_10pitvce";
 var error_message = "_10pitvcf";
 var h2i = "_10pitvcg";
+var hide_select_arrow = "_10pitvch";
 export {
   calc_container,
   calculation_header,
   container,
   error_message,
   h2i,
+  hide_select_arrow,
   input_box,
   input_container,
   inputs_container,

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -4,8 +4,8 @@ import { button } from "../../Button/Button.css.js";
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
-import clsx from "clsx";
 import { useState } from "react";
+import clsx from "clsx";
 import { calc_text, description_text, calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import { calculator } from "../calculator.css.js";
 import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";
@@ -212,11 +212,21 @@ const MonthlyPaymentCalculator = ({
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "text_center flex flex_col center middle push_up_32", children: [
-            /* @__PURE__ */ jsx("span", { className: calculation_header, children: "Estimated Monthly Payment:" }),
-            /* @__PURE__ */ jsxs("span", { id: "estimatedPayment", className: payment_results, children: [
-              "$",
-              estimatedPayment.toFixed(2)
-            ] })
+            /* @__PURE__ */ jsx("label", { htmlFor: "estimatedPayment", className: calculation_header, children: "Estimated Monthly Payment:" }),
+            /* @__PURE__ */ jsxs(
+              "output",
+              {
+                id: "estimatedPayment",
+                className: payment_results,
+                name: "estimated-payment",
+                htmlFor: "loanAmount loanDuration interestRate",
+                role: "status",
+                children: [
+                  "$",
+                  estimatedPayment.toFixed(2)
+                ]
+              }
+            )
           ] })
         ] }),
         disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: fullVariant }), children: disclosure })

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

@@ -1,5 +1,6 @@
-import '../../assets/Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                             */
 /* empty css                                            */

package/dist/Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js

@@ -1,5 +1,6 @@
-import '../../assets/Calculators/SummitApyCalculator/BalanceAPYCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/SummitApyCalculator/BalanceAPYCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                             */
 /* empty css                                        */

package/dist/Calculators/SummitApyCalculator/index.js

@@ -8,8 +8,9 @@ import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../../icons/AxosX/index.js";
 import SvgComponent from "../../icons/AxosX/Blue.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                                       */
 /* empty css                                                   */
@@ -27,15 +28,24 @@ const SummitApyCalculator = ({
   variant
 }) => {
   const calc_variant = getVariant(variant);
+  const SUMMIT_APY = +process.env.NEXT_PUBLIC_SUMMIT_SAVINGS_APY;
   const [balance, setBalance] = useState(1e4);
-  const [axbAPY, _setAxbAPY] = useState(4);
-  const [axbEarning, setAxbEarning] = useState(400);
-  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.7);
-  const [capitalOneEarning, setcapitalOneEarning] = useState(370);
+  const [axbAPY, _setAxbAPY] = useState(SUMMIT_APY);
+  const [axbEarning, setAxbEarning] = useState(
+    SUMMIT_APY / 100 * balance
+  );
+  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.4);
+  const [capitalOneEarning, setcapitalOneEarning] = useState(
+    capitalOneAPY / 100 * balance
+  );
   const [bofaAPY, _setBofaAPY] = useState(0.04);
-  const [bofaEarning, setBofaEarning] = useState(4);
+  const [bofaEarning, setBofaEarning] = useState(
+    bofaAPY / 100 * balance
+  );
   const [chaseAPY, _setchaseAPY] = useState(0.01);
-  const [chaseEarning, setchaseEarning] = useState(1);
+  const [chaseEarning, setchaseEarning] = useState(
+    chaseAPY / 100 * balance
+  );
   const removeNonNumeric = (value) => {
     if (value === "") {
       value = "0";

package/dist/Calculators/calculator.css.d.ts

@@ -22,16 +22,10 @@ export declare const calculator_description: import('@vanilla-extract/recipes').
 export declare const calculator_headline: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;

package/dist/Calculators/calculator.css.js

@@ -1,6 +1,7 @@
-import '../assets/Calculators/calculator.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+import '../assets/Calculators/calculator.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/Calculators/index.d.ts

@@ -2,11 +2,12 @@ export * from './AnnualFeeCalculator';
 export * from './ApyCalculator';
 export * from './AxosOneCalculator';
 export * from './BalanceAPYCalculator';
+export * from './BuyDownCalculator';
 export * from './Calculator';
 export * from './calculator.css';
 export * from './MarginTradingCalculator';
+export * from './MarineLoanMonthlyPaymentCalculator';
 export * from './MaxLoanCalculator';
 export * from './MonthlyPaymentCalculator';
 export * from './MonthlyPaymentLVFCalculator';
 export * from './SummitApyCalculator';
-export * from './BuyDownCalculator';

package/dist/Calculators/index.js

@@ -2,14 +2,15 @@ import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
 import { AxosOneCalculator } from "./AxosOneCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
+import { BuyDownCalculator } from "./BuyDownCalculator/index.js";
 import { Calculator } from "./Calculator.js";
 import { calculator, calculator_description, calculator_headline } from "./calculator.css.js";
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
+import { MarineLoanMonthlyPaymentCalculator } from "./MarineLoanMonthlyPaymentCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
 import { MonthlyPaymentLVFCalculator } from "./MonthlyPaymentLVFCalculator/index.js";
 import { SummitApyCalculator } from "./SummitApyCalculator/index.js";
-import { BuyDownCalculator } from "./BuyDownCalculator/index.js";
 export {
   AnnualFeeCalculator,
   ApyCalculator,
@@ -18,6 +19,7 @@ export {
   BuyDownCalculator,
   Calculator,
   MarginTradingCalculator,
+  MarineLoanMonthlyPaymentCalculator,
   MaxLoanCalculator,
   MonthlyPaymentCalculator,
   MonthlyPaymentLVFCalculator,

package/dist/CallToActionBar/CallToActionBar.css.d.ts

@@ -1,4 +1,7 @@
 export declare const cta: string;
+export declare const cta_h2: string;
+export declare const is_sticky: string;
+export declare const cta_containment: string;
 export declare const cta_image_section: string;
 export declare const cta_image_section_overlap: string;
 export declare const cta_section_lg: string;
@@ -10,7 +13,6 @@ export declare const cta_section: string;
 export declare const cta_image_overlap: string;
 export declare const cta_body_section: string;
 export declare const sticky_banner: string;
-export declare const is_sticky: string;
 export declare const ctas_section: string;
 export declare const cta_text: string;
 export declare const cta_large_image: string;