@axos-web-dev/shared-components 0.0.74 → 0.0.76

package/dist/Forms/ContactUsBusiness.js

@@ -23,16 +23,16 @@ import "../Accordion/Accordion.css.js";
 import { getVariant } from "../utils/getVariant.js";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
+import "../ApyCalculator/ApyCalculator.css.js";
+import { Button } from "../Button/Button.js";
 import "react-use";
-/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
@@ -43,6 +43,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/Forms/EmailOnly.js

@@ -23,16 +23,16 @@ import "../Accordion/Accordion.css.js";
 import { getVariant } from "../utils/getVariant.js";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
+import "../ApyCalculator/ApyCalculator.css.js";
+import { Button } from "../Button/Button.js";
 import "react-use";
-/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import { associatedEmail } from "../utils/EverestValidity.js";
 import clsx from "clsx";
@@ -44,6 +44,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/Forms/SuccesForm.js

@@ -28,15 +28,17 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-/* empty css                                                */
+import "../ApyCalculator/ApyCalculator.css.js";
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/HeroBanner/HeroBanner.interface.d.ts

@@ -21,9 +21,9 @@ export interface HeroBannerInterface extends HeroBannerWithImage, HeroBannerWith
     id?: string;
     bannerType?: string;
     className?: string;
-    variant: string;
-    eyebrow: string | ReactNode;
-    headline: string | ReactNode;
-    bodyCopy: string | ReactNode;
+    variant?: string;
+    eyebrow?: string | ReactNode;
+    headline?: string | ReactNode;
+    bodyCopy?: string | ReactNode;
     callToActionRow?: ChevronProps[];
 }

package/dist/Hyperlink/index.js

@@ -10,20 +10,20 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                                */
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
+import "../Button/Button.css.js";
+import "react";
+import "../ApyCalculator/ApyCalculator.css.js";
 import { useGlobalContext } from "../Modal/contextApi/store.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { validateLink } from "../utils/validateExternalLinks.js";
 import "clsx";
-import "react";
-import "../Button/Button.css.js";
 import "react-use";
-/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
@@ -41,6 +41,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -3,6 +3,7 @@ export declare const billboard: import('@vanilla-extract/recipes').RuntimeFn<{
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: "1px solid #D4D4D4";
         };
         secondary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/ImageLink/ImageLink.js

@@ -14,13 +14,13 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-/* empty css                                                */
+import "../ApyCalculator/ApyCalculator.css.js";
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
@@ -38,6 +38,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/ImageLink/ImageLinkSet.js

@@ -20,7 +20,7 @@ import "../SetContainer/SetContainer.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-/* empty css                                                */
+import "../ApyCalculator/ApyCalculator.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
@@ -41,6 +41,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/ImageLink/index.js

@@ -9,18 +9,18 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                                */
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
+import "../Button/Button.css.js";
+import "react";
+import "../ApyCalculator/ApyCalculator.css.js";
 import "../Modal/contextApi/store.js";
 import "clsx";
-import "react";
-import "../Button/Button.css.js";
 import "react-use";
-/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
@@ -38,6 +38,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

package/dist/Modal/Modal.js

@@ -9,17 +9,17 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                                    */
 /* empty css                                                */
 import "../AlertBanner/AlertBanner.css.js";
-import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
+import "../ApyCalculator/ApyCalculator.css.js";
+import { Button } from "../Button/Button.js";
 import "react-use";
-/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
@@ -38,6 +38,8 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
+import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */

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

@@ -0,0 +1,27 @@
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const input_container: string;
+export declare const input_box: string;
+export declare const payment_results: string;
+export declare const calc_container: string;
+export declare const inputs_container: string;
+export declare const calculation_header: string;
+export declare const error_message: string;

package/dist/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js

@@ -0,0 +1,22 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                            */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var container = createRuntimeFn({ defaultClassName: "_17fwn0a0", variantClassNames: { variant: { primary: "_17fwn0a1", secondary: "_17fwn0a2", tertiary: "_17fwn0a3", quaternary: "_17fwn0a4" } }, defaultVariants: {}, compoundVariants: [] });
+var input_container = "_17fwn0a5";
+var input_box = "_17fwn0a6";
+var payment_results = "_17fwn0a7";
+var calc_container = "_17fwn0a8";
+var inputs_container = "_17fwn0a9";
+var calculation_header = "_17fwn0aa";
+var error_message = "_17fwn0ab";
+export {
+  calc_container,
+  calculation_header,
+  container,
+  error_message,
+  input_box,
+  input_container,
+  inputs_container,
+  payment_results
+};

package/dist/MonthlyPaymentCalculator/index.d.ts

@@ -0,0 +1,8 @@
+import { default as React, FC } from 'react';
+
+export interface MonthlyPaymentCalculatorProps {
+    header?: React.ReactNode | string;
+    body?: React.ReactNode | string;
+    variant?: string;
+}
+export declare const MonthlyPaymentCalculator: FC<MonthlyPaymentCalculatorProps>;

package/dist/MonthlyPaymentCalculator/index.js

@@ -0,0 +1,212 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { calc_container, container, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";
+import { button } from "../Button/Button.css.js";
+import { getVariant } from "../utils/getVariant.js";
+import { title } from "../IconBillboard/IconBillboard.css.js";
+const MonthlyPaymentCalculator = ({
+  variant,
+  header
+}) => {
+  const [loanAmountDisplay, setLoanAmountDisplay] = useState("");
+  const [loanAmount, setLoanAmount] = useState(void 0);
+  const [loanDuration, setLoanDuration] = useState(60);
+  const [interestRateDisplay, setInterestRateDisplay] = useState("");
+  const [interestRate, setInterestRate] = useState("");
+  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 < 1e4 || loanAmount > 9e4) {
+      setLoanAmountError("Please enter an amount between $10,000 and $90,000.");
+      isValid = false;
+    } else {
+      setLoanAmountError(null);
+    }
+    if (!interestRate || isNaN(parseFloat(interestRate))) {
+      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) => {
+    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 = 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: `section_spacer`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded ${calc_container} ${container({ variant: getVariant(variant) })}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: `text_center ${title({ variant: getVariant(variant) })}`,
+            children: header
+          }
+        ) }),
+        /* @__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 ($10,000 - $90,000)" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `text_center bordered ${input_box}`,
+                    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__ */ jsxs(
+                  "select",
+                  {
+                    className: `text_center bordered ${input_box}`,
+                    id: "loanDuration",
+                    name: "loanDuration",
+                    value: loanDuration,
+                    onChange: handleLoanDurationChange,
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "12", children: "12" }),
+                      /* @__PURE__ */ jsx("option", { value: "24", children: "24" }),
+                      /* @__PURE__ */ jsx("option", { value: "36", children: "36" }),
+                      /* @__PURE__ */ jsx("option", { value: "48", children: "48" }),
+                      /* @__PURE__ */ jsx("option", { value: "60", children: "60" }),
+                      /* @__PURE__ */ jsx("option", { value: "72", children: "72" }),
+                      /* @__PURE__ */ jsx("option", { value: "84", children: "84" }),
+                      /* @__PURE__ */ jsx("option", { value: "96", children: "96" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__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}`,
+                    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)
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) }) });
+};
+export {
+  MonthlyPaymentCalculator
+};