@axos-web-dev/shared-components 0.0.191 → 0.0.192

package/dist/ATMLocator/ATMLocator.js

@@ -108,6 +108,7 @@ import "next/script.js";
 /* empty css                                              */
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "iframe-resizer";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 const ATMLocator = (props) => {
   const { id, bodyCopy, icon = false, disclosure, headline } = props;
   const variant = getVariant(props.variant);

package/dist/Button/Button.js

@@ -53,6 +53,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/Calculators/Calculator.js

@@ -31,6 +31,7 @@ import { calculator_headline, calculator_description } from "./calculator.css.js
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
+import { MonthlyPaymentLVFCalculator } from "./MonthlyPaymentLVFCalculator/index.js";
 import { useRef, useEffect } from "react";
 /* empty css                                                    */
 import "../Carousel/index.js";
@@ -162,6 +163,16 @@ const Calculator = (props) => {
         disclosure
       }
     );
+  } else if (name === "Calculate a Loan Payment LVF") {
+    return /* @__PURE__ */ jsx(
+      MonthlyPaymentLVFCalculator,
+      {
+        variant,
+        header: headline,
+        bodyCopy,
+        disclosure
+      }
+    );
   } else if (name === "Max Loan") {
     return /* @__PURE__ */ jsx(MaxLoanCalculator, { header: headline, body: bodyCopy, variant });
   } else if (name === "Annual Fee") {

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

@@ -0,0 +1,46 @@
+export declare const bg_vars: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const calc_content_area: string;
+export declare const calc_h2: string;
+export declare const calc_bodycopy: 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 lvf_calc_header: string;
+export declare const lvf_calc_wrapper: string;
+export declare const calc_wrapper_inner: string;
+export declare const calc_input_wrap: string;
+export declare const calc_input_styles: string;
+export declare const error_dialog: string;
+export declare const rounded_cell: string;
+export declare const results_wrap: string;
+export declare const result_value: string;
+export declare const result_header: string;
+export declare const waves: string;
+export declare const parallax: string;

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

@@ -0,0 +1,39 @@
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                             */
+/* empty css                                            */
+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";
+export {
+  bg_vars,
+  calc_bodycopy,
+  calc_content_area,
+  calc_h2,
+  calc_input_styles,
+  calc_input_wrap,
+  calc_wrapper_inner,
+  error_dialog,
+  lvf_calc_header,
+  lvf_calc_wrapper,
+  parallax,
+  result_header,
+  result_value,
+  results_wrap,
+  rounded_cell,
+  waves
+};

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

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

package/dist/Calculators/MonthlyPaymentLVFCalculator/index.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { button } from "../../Button/Button.css.js";
+import "../../utils/allowedAxosDomains.js";
+import { getVariant } from "../../utils/getVariant.js";
+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 [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 [isHovered, setIsHovered] = useState(false);
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
+  const stringToCurrency = (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) {
+      setLoanAmountError("Please enter an amount");
+      isValid = false;
+    } else {
+      setLoanAmountError(null);
+    }
+    if (!interestRate) {
+      setInterestRateError("Please enter an interest rate");
+      isValid = false;
+    } else {
+      setInterestRateError(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, ""));
+    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 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);
+    setInterestRate(value.replace(/[^0-9.]/g, ""));
+  };
+  const calculateMonthlyPayment = () => {
+    const numericInterestRate = parseFloat(interestRate);
+    const monthlyInterestRate = numericInterestRate / 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);
+    } else {
+      setEstimatedPayment(0);
+    }
+  };
+  const handleCalculate = () => {
+    if (validateInputs()) {
+      calculateMonthlyPayment();
+    } else {
+      setEstimatedPayment(0);
+    }
+  };
+  return /* @__PURE__ */ jsxs("section", { className: bg_vars({ variant: fullVariant }), 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 })
+        ] }),
+        /* @__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(
+                "input",
+                {
+                  className: calc_input_styles,
+                  id: "loanAmount",
+                  maxLength: 10,
+                  name: "loanAmount",
+                  type: "text",
+                  placeholder: "Loan Amount",
+                  value: loanAmountDisplay,
+                  onChange: handleLoanAmountChange
+                }
+              ),
+              loanAmountError && /* @__PURE__ */ jsx("span", { className: error_dialog, children: loanAmountError })
+            ] }) }),
+            /* @__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" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  className: calc_input_styles,
+                  id: "loanYears",
+                  name: "loanYears",
+                  value: loanYears,
+                  onChange: handleloanYearsChange,
+                  children: /* @__PURE__ */ jsx("option", { value: "20", selected: true, children: "20" })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: `${calc_input_wrap} push_up_24`, children: /* @__PURE__ */ jsxs("div", { className: rounded_cell, children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: "interestRate", children: "%" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: calc_input_styles,
+                  id: "interestRate",
+                  maxLength: 6,
+                  name: "interestRate",
+                  type: "text",
+                  placeholder: "Interest Rate",
+                  value: interestRateDisplay,
+                  onChange: handleInterestRateChange
+                }
+              ),
+              interestRateError && /* @__PURE__ */ jsx("span", { className: error_dialog, children: interestRateError })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: `flex center middle push_up_24`, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${button({
+                  color: "primary",
+                  size: "medium",
+                  rounded: "medium"
+                })} center`,
+                type: "button",
+                value: "Calculate",
+                onClick: handleCalculate,
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                style: {
+                  backgroundColor: isHovered ? "transparent" : "#dd7b50"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${results_wrap} text_center flex flex_col center middle push_up_24`,
+                children: [
+                  /* @__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)
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: fullVariant }), children: disclosure })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: waves,
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        viewBox: "0 24 150 28",
+        preserveAspectRatio: "none",
+        "shape-rendering": "auto",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              id: "gentle-wave",
+              d: "M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("g", { className: parallax, children: [
+            /* @__PURE__ */ jsx(
+              "use",
+              {
+                xlinkHref: "#gentle-wave",
+                x: "48",
+                y: "0",
+                fill: "rgb(96 174 203 / 0.7)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "use",
+              {
+                xlinkHref: "#gentle-wave",
+                x: "48",
+                y: "3",
+                fill: "rgb(96 174 203 / 0.5)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "use",
+              {
+                xlinkHref: "#gentle-wave",
+                x: "48",
+                y: "5",
+                fill: "rgba(255,255,255,0.3)"
+              }
+            ),
+            /* @__PURE__ */ jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "7", fill: "#60AECB" })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  MonthlyPaymentLVFCalculator
+};

package/dist/Calculators/index.d.ts

@@ -7,3 +7,4 @@ export * from './calculator.css';
 export * from './MarginTradingCalculator';
 export * from './MaxLoanCalculator';
 export * from './MonthlyPaymentCalculator';
+export * from './MonthlyPaymentLVFCalculator';

package/dist/Calculators/index.js

@@ -7,6 +7,7 @@ import { calculator, calculator_description, calculator_headline } from "./calcu
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
+import { MonthlyPaymentLVFCalculator } from "./MonthlyPaymentLVFCalculator/index.js";
 export {
   AnnualFeeCalculator,
   ApyCalculator,
@@ -16,6 +17,7 @@ export {
   MarginTradingCalculator,
   MaxLoanCalculator,
   MonthlyPaymentCalculator,
+  MonthlyPaymentLVFCalculator,
   calculator,
   calculator_description,
   calculator_headline

package/dist/Carousel/index.js

@@ -58,6 +58,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/Chevron/index.js

@@ -55,6 +55,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/Comparison/Comparison.js

@@ -54,6 +54,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/FaqAccordion/index.js

@@ -54,6 +54,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -53,6 +53,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/Forms/ContactUsBusiness.js

@@ -55,6 +55,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/Forms/ContactUsNMLSId.js

@@ -55,6 +55,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/Forms/EmailOnly.js

@@ -56,6 +56,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/Forms/MortgageRate/MortgageRateForm.js

@@ -57,6 +57,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/Forms/MortgageRate/MortgageRateWatch.js

@@ -54,6 +54,7 @@ import { SuccesFormWrapper } from "../SuccesForm.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/Forms/SuccesForm.js

@@ -28,6 +28,7 @@ import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/Hyperlink/index.js

@@ -54,6 +54,7 @@ import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/ImageLink/ImageLink.js

@@ -51,6 +51,7 @@ import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/ImageLink/ImageLinkSet.js

@@ -56,6 +56,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/ImageLink/index.js

@@ -52,6 +52,7 @@ import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/Insight/Featured/CategorySelector.js

@@ -53,6 +53,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/Insight/Featured/Featured.js

@@ -55,6 +55,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/Insight/Featured/Header.js

@@ -53,6 +53,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/Modal/Modal.js

@@ -50,6 +50,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */

package/dist/NavigationMenu/AxosBank/NavData.js

@@ -53,6 +53,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -55,6 +55,7 @@ import { Hyperlink } from "../../Hyperlink/index.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/NavigationMenu/AxosBank/index.js

@@ -52,6 +52,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                             */

package/dist/NavigationMenu/LaVictoire/NavData.js

@@ -53,6 +53,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                                       */

package/dist/NavigationMenu/LaVictoire/index.js

@@ -52,6 +52,7 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
 /* empty css                                             */
 /* empty css                                             */

package/dist/SetContainer/SetContainer.js

@@ -55,6 +55,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/SocialMediaBar/iconsRepository.js

@@ -53,6 +53,7 @@ import { Hyperlink } from "../Hyperlink/index.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

package/dist/SocialMediaBar/index.js

@@ -10,8 +10,10 @@ const SocialMediaBar = ({
 }) => {
   const [isLVF, setLVF] = useState(false);
   useEffect(() => {
-    const lvf = document.getElementById("lvf-page");
-    lvf ? setLVF(true) : null;
+    const lvfElement = document.getElementById("lvf-page");
+    if (lvfElement) {
+      setLVF(true);
+    }
   }, []);
   const iconsToRender = [];
   if (!isLVF) {

package/dist/VideoWrapper/index.js

@@ -54,6 +54,7 @@ import "../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */

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

@@ -0,0 +1,201 @@
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px,0,0);
+  }
+  100% {
+    transform: translate3d(85px,0,0);
+  }
+}
+._1xynjwx0 {
+  position: relative;
+  isolation: isolate;
+  padding-block: 56px;
+}
+._1xynjwx1 {
+  background: var(--_1073cm81);
+}
+._1xynjwx2 {
+  background: var(--_1073cm88);
+}
+._1xynjwx3 {
+  background: var(--_1073cm8f);
+}
+._1xynjwx4 {
+  background: var(--_1073cm8m);
+}
+._1xynjwx5 {
+  flex: 1 1 0%;
+}
+._1xynjwx6 {
+  color: #28587d;
+  line-height: 1.25;
+}
+._1xynjwx7 {
+  margin-top: 1.5rem;
+}
+._1xynjwx8 {
+  color: var(--_1073cm82);
+}
+._1xynjwx9 {
+  color: var(--_1073cm89);
+}
+._1xynjwxa {
+  color: var(--_1073cm8g);
+}
+._1xynjwxb {
+  color: var(--_1073cm8n);
+}
+._1xynjwxc {
+  background-color: #1C3D57;
+  color: #fff;
+  padding: 12px;
+  text-align: center;
+  font: 600 20px / 1.25 var(--header-font-family);
+}
+._1xynjwxd {
+  background-color: #E7F5FA;
+  border-radius: 16px;
+  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px , rgba(0,0,0,0.1) 0px 6px 12px -4px , rgba(0,0,0,0.2) 0px -3px 0px inset;
+  overflow: hidden;
+  width: 400px;
+}
+._1xynjwxe {
+  padding: 28px 32px;
+}
+._1xynjwxf {
+  position: relative;
+}
+._1xynjwxf select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #fff;
+}
+._1xynjwxf select:hover {
+  cursor: pointer;
+}
+._1xynjwxf label {
+  background-color: #1C3D57;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  padding-inline: 18px;
+}
+._1xynjwxg {
+  border: none;
+  outline: none;
+  padding: .7rem;
+  width: 100%;
+}
+._1xynjwxf label[for='loanYears'] {
+  order: 2;
+}
+._1xynjwxf label[for='interestRate'] {
+  order: 2;
+  min-width: 77px;
+}
+._1xynjwxh {
+  bottom: -20px;
+  color: #8C1900;
+  font-size: 12px;
+  left: 15px;
+  position: absolute;
+}
+._1xynjwxi {
+  border-radius: 8px;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+._1xynjwxj {
+  background-color: #1F7A96;
+  border-radius: 8px;
+  box-shadow: rgba(31,122,150,0.3) 8px 8px 16px 0px;
+  color: #fff;
+  padding: 32px 28px;
+}
+._1xynjwxk {
+  font-size: 2.5rem;
+  font-weight: 700;
+}
+._1xynjwxl {
+  color: rgb(255 255 255 / 73%);
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: .4px;
+}
+._1xynjwxm {
+  bottom: 0;
+  height: 200px;
+  left: 0;
+  margin-bottom: -7px;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+._1xynjwxn > use {
+  animation: move-forever 25s cubic-bezier(0.55,0.5,0.45,0.5) infinite;
+}
+._1xynjwxn > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+._1xynjwxn > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+._1xynjwxn > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+._1xynjwxn > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+}
+.section_spacer:has(._1xynjwxn) {
+  margin-top: 0px;
+}
+@media screen and (max-width: 1023px) {
+  ._1xynjwx0 {
+    padding-block: 42px;
+  }
+}
+@media screen and (max-width: 768px) {
+  ._1xynjwx0 {
+    padding-block: 2rem;
+  }
+}
+@media screen and (max-width:1023px) {
+  ._1xynjwx5 {
+    text-align: center;
+  }
+  ._1xynjwxd {
+    width: min(400px, 100%);
+  }
+  ._1xynjwxg {
+    width: 100%;
+  }
+  ._1xynjwx0 .gap_24 {
+    flex-direction: column;
+  }
+}
+@media screen and (min-width:1024px) {
+  ._1xynjwx6 {
+    font-size: 48px;
+  }
+}
+@media screen and (max-width:470px) {
+  ._1xynjwxc {
+    font-size: 18px;
+  }
+  ._1xynjwxe {
+    padding: 24px 16px;
+  }
+  ._1xynjwxj {
+    margin-top: 16px;
+    padding: 18px 16px;
+  }
+  ._1xynjwxl {
+    font-size: 15px;
+  }
+}

package/dist/main.js

@@ -26,6 +26,7 @@ import { calculator, calculator_description, calculator_headline } from "./Calcu
 import { MarginTradingCalculator } from "./Calculators/MarginTradingCalculator/index.js";
 import { MaxLoanCalculator } from "./Calculators/MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./Calculators/MonthlyPaymentCalculator/index.js";
+import { MonthlyPaymentLVFCalculator } from "./Calculators/MonthlyPaymentLVFCalculator/index.js";
 import { CallToActionBar } from "./CallToActionBar/index.js";
 import { Carousel, CarouselSlide } from "./Carousel/index.js";
 import { Chevron } from "./Chevron/index.js";
@@ -278,6 +279,7 @@ export {
   default15 as MemberFdicLogo,
   Modal,
   MonthlyPaymentCalculator,
+  MonthlyPaymentLVFCalculator,
   MortgageRate,
   MortgageRateFilters,
   default27 as NavBarAAS,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.191",
+  "version": "0.0.192",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",