@axos-web-dev/shared-components 1.0.99-sectionSpacerRemoved → 1.0.99-sectionSpacerRemoved.2

package/dist/Auth/ErrorAlert.js

@@ -43,13 +43,13 @@ import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
 import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "../Input/PercentageInput.js";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import { error_close_button, separator, error_alert_content, error_alert } from "./ErrorAlert.css.js";
 import "react-dom";
 /* empty css                          */

package/dist/Button/Button.js

@@ -40,7 +40,9 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -59,8 +61,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */

package/dist/Calculators/Calculator.js

@@ -38,13 +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                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -250,7 +251,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, {}) }),
@@ -284,6 +295,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/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/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/Carousel/index.js

@@ -41,7 +41,9 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -62,8 +64,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */

package/dist/Chevron/index.js

@@ -42,7 +42,9 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -61,8 +63,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */

package/dist/Comparison/Comparison.js

@@ -40,7 +40,9 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -60,8 +62,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -45,7 +45,9 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -61,8 +63,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */

package/dist/FaqAccordion/index.js

@@ -40,7 +40,9 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -62,8 +64,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -41,7 +41,9 @@ import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
 import "../../Input/DownPaymentInput.js";
 import "../../Input/RadioButton.js";
+import "../../Input/PercentageInput.js";
 import "react-hook-form";
+import "../../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../../Forms/Forms.css.js";
 import "../../Forms/HoneyPot/index.js";
 import "../../Forms/SalesforceFieldsForm.js";
@@ -57,8 +59,6 @@ import "iframe-resizer";
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../../Input/PercentageInput.js";
-import "../../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                       */
 import "react-dom";
 /* empty css                                   */

package/dist/Forms/ApplyNow.d.ts

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