@axos-web-dev/shared-components 1.0.99-feature-insights.1 → 1.0.99-feature-brand.5

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

@@ -33,38 +33,10 @@ export declare const header_container: string;
 export declare const header_calc: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            readonly selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: string;
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: string;
-                    textShadow: string;
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: "transparent";
-                    textShadow: "0px 0px #00000000";
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;

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;
@@ -11,7 +12,7 @@ export interface CalculatorProps {
     bodyCopy?: React.ReactNode;
     disclosure?: React.ReactNode;
     marketingTiles?: IconBillboardProps[];
+    initialBalance?: number;
+    callToActionRow?: ChevronProps[];
 }
-export declare const Calculator: (props: CalculatorProps & {
-    showCurrency: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const Calculator: (props: CalculatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Calculators/Calculator.js

@@ -7,7 +7,7 @@ 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/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/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/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/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/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/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                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -38,14 +38,14 @@ 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                                                                    */
@@ -84,6 +84,7 @@ import "../Input/RadioButton.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
+/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 /* empty css                                                      */
@@ -136,7 +137,8 @@ const Calculator = (props) => {
     headline,
     name,
     marketingTiles,
-    showCurrency = true
+    initialBalance,
+    callToActionRow
   } = props;
   const ref = useRef(null);
   const iframe = calculators.get(name || "");
@@ -175,8 +177,7 @@ const Calculator = (props) => {
         header: headline,
         bodyCopy,
         variant,
-        disclosure,
-        showCurrency
+        disclosure
       }
     );
   } else if (name === "Calculate a Loan Payment LVF") {
@@ -228,7 +229,9 @@ const Calculator = (props) => {
         bodyCopy,
         variant,
         disclosure,
-        icon
+        icon,
+        initialBalance,
+        callToActionRow
       }
     );
   } else if (name === "APY Balance Summit Savings") {
@@ -252,7 +255,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, {}) }),
@@ -286,6 +299,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 clsx from "clsx";
+import { useState } from "react";
+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

@@ -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

@@ -12,12 +12,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.d.ts

@@ -6,6 +6,4 @@ export interface MonthlyPaymentCalculatorProps {
     variant?: string;
     disclosure?: React.ReactNode;
 }
-export declare const MonthlyPaymentCalculator: FC<MonthlyPaymentCalculatorProps & {
-    showCurrency?: boolean;
-}>;
+export declare const MonthlyPaymentCalculator: FC<MonthlyPaymentCalculatorProps>;

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -9,7 +9,12 @@ import { useState } from "react";
 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";
-const MonthlyPaymentCalculator = ({ variant, header, disclosure, bodyCopy, showCurrency = true }) => {
+const MonthlyPaymentCalculator = ({
+  variant,
+  header,
+  disclosure,
+  bodyCopy
+}) => {
   const fullVariant = getVariant(variant);
   const [loanAmountDisplay, setLoanAmountDisplay] = useState("");
   const [loanAmount, setLoanAmount] = useState(void 0);
@@ -26,20 +31,12 @@ const MonthlyPaymentCalculator = ({ variant, header, disclosure, bodyCopy, showC
     if (isNaN(numericValue)) {
       return "";
     }
-    if (showCurrency) {
-      return numericValue.toLocaleString("en-US", {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0
-      });
-    } else {
-      return numericValue.toLocaleString("en-US", {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-        useGrouping: true
-      });
-    }
+    return numericValue.toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
   };
   const validateInputs = () => {
     let isValid = true;
@@ -141,11 +138,7 @@ const MonthlyPaymentCalculator = ({ variant, header, disclosure, bodyCopy, showC
             className: `flex center text_center push_up_32 bottom ${inputs_container}`,
             children: [
               /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
-                /* @__PURE__ */ jsxs("label", { htmlFor: "loanAmount", id: "amount1", children: [
-                  "Loan Amount",
-                  " ",
-                  showCurrency ? "($10,000 - $90,000)" : "(10,000 - 90,000)"
-                ] }),
+                /* @__PURE__ */ jsx("label", { htmlFor: "loanAmount", id: "amount1", children: "Loan Amount ($10,000 - $90,000)" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -154,7 +147,7 @@ const MonthlyPaymentCalculator = ({ variant, header, disclosure, bodyCopy, showC
                     maxLength: 10,
                     name: "loanAmount",
                     type: "text",
-                    placeholder: showCurrency ? "$0" : "0",
+                    placeholder: "$0",
                     value: loanAmountDisplay,
                     onChange: handleLoanAmountChange
                   }
@@ -219,11 +212,21 @@ const MonthlyPaymentCalculator = ({ variant, header, disclosure, bodyCopy, showC
             }
           ) }),
           /* @__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/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/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,7 +1,4 @@
 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;
@@ -13,6 +10,7 @@ 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;