@axos-web-dev/shared-components 2.0.0-dev.23 → 2.0.0-dev.24

package/dist/Calculators/ApyCalculator/index.js

@@ -1,596 +1,327 @@
 "use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../Button/Button.js";
+import { button } from "../../Button/Button.css.js";
+import { useState, useCallback, useEffect } from "react";
+import "react-use";
+import { Chevron } from "../../Chevron/index.js";
+import { section_container, content, headerIconBillboard, buttons } from "../../IconBillboard/IconBillboard.css.js";
 import { useGlobalContext } from "../../Modal/contextApi/store.js";
 import { getVariant } from "../../utils/getVariant.js";
-import Image from "next/image.js";
-import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption, Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useState, useCallback, useEffect, useRef } from "react";
-import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_image, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, definitions_accordion, definitions_button, definitions_h2, definitions_columns, definitions_panel, definitions_column, definitions_item, definitions_term, definitions_text, container } from "./ApyCalculator.css.js";
-const COMPOUNDING_OPTIONS = [
-  { value: 360, label: "Daily" },
-  { value: 12, label: "Monthly" },
-  { value: 4, label: "Quarterly" },
-  { value: 2, label: "Semi-Annual" },
-  { value: 1, label: "Yearly" }
-];
-const CALCULATOR_DEFINITIONS = [
-  {
-    term: "Initial deposit",
-    description: "The amount of money you're starting with."
-  },
-  {
-    term: "APY (Annual Percentage Yield)",
-    description: "The rate your money earns in a year, with compounding included."
-  },
-  {
-    term: "Months",
-    description: "How long you plan to keep your money in the account."
-  },
-  {
-    term: "Compounding",
-    description: "How often interest is calculated and added to your balance. APY on bank accounts usually compounds monthly."
-  },
-  {
-    term: "Monthly deposits",
-    description: "Any additional amount you plan to contribute each month."
-  },
-  {
-    term: "Interest earned",
-    description: "The amount gained from interest over the selected time period."
-  },
-  {
-    term: "Ending balance",
-    description: "Your projected balance at the end of the selected time period, based on the inputs above."
-  },
-  {
-    term: "Total deposits",
-    description: "The total money you contribute, including your initial and monthly deposits."
-  }
-];
-const SCRAMBLE_CHARS = "0123456789";
-const DEFINITIONS_ITEM_TRANSITION = {
-  duration: 0.35,
-  ease: [0.22, 1, 0.36, 1]
-};
-function scrambleCurrency(target, progress) {
-  const formatted = target.toLocaleString("en-US", {
-    style: "currency",
-    currency: "USD"
-  });
-  return formatted.split("").map((char) => {
-    if (char === "$" || char === "," || char === "." || char === "-") {
-      return char;
-    }
-    if (/\d/.test(char)) {
-      return Math.random() > progress ? SCRAMBLE_CHARS[Math.floor(Math.random() * SCRAMBLE_CHARS.length)] : char;
-    }
-    return char;
-  }).join("");
-}
-function useScramble(targetValue, duration = 700) {
-  const [display, setDisplay] = useState(
-    () => targetValue.toLocaleString("en-US", { style: "currency", currency: "USD" })
-  );
-  const [isScrambling, setIsScrambling] = useState(false);
-  const rafRef = useRef(null);
-  const startRef = useRef(0);
-  const prevTarget = useRef(targetValue);
-  useEffect(() => {
-    if (prevTarget.current === targetValue) return;
-    prevTarget.current = targetValue;
-    setIsScrambling(true);
-    startRef.current = Date.now();
-    const tick = () => {
-      const elapsed = Date.now() - startRef.current;
-      const progress = Math.min(elapsed / duration, 1);
-      if (progress < 1) {
-        setDisplay(scrambleCurrency(targetValue, progress));
-        rafRef.current = setTimeout(tick, 40);
-      } else {
-        setDisplay(
-          targetValue.toLocaleString("en-US", {
-            style: "currency",
-            currency: "USD"
-          })
-        );
-        setIsScrambling(false);
-      }
-    };
-    if (rafRef.current) clearTimeout(rafRef.current);
-    rafRef.current = setTimeout(tick, 40);
-    return () => {
-      if (rafRef.current) clearTimeout(rafRef.current);
-    };
-  }, [targetValue, duration]);
-  return { display, isScrambling };
-}
-function formatWithCommas(value) {
-  return value.toLocaleString("en-US");
-}
-function parseCurrencyInput(raw) {
-  const digits = raw.replace(/[^0-9]/g, "");
-  return digits === "" ? 0 : parseInt(digits, 10);
-}
+import { apy_calculator, calculator_section, section_header, header_theme, mt_8, apy_calculator_form, pis_0, errorTag, fieldset, field_row, relative, label_symbol, cash, prefix_pad, percent, submit_section, span_12, form_disclosure, marketing, marketingTile, bodyContent, container } from "./ApyCalculator.css.js";
 const ApyCalculator = ({
   header,
   body,
+  marketingTiles,
   disclosure,
   variant
 }) => {
   const { domains } = useGlobalContext();
   const calculator_variant = getVariant(variant);
-  const [compoundingOption, setCompoundingOption] = useState(
-    COMPOUNDING_OPTIONS[0]
-  );
-  const compounding = compoundingOption.value;
-  const getAPR = useCallback(
-    (apy) => {
-      return Number.parseFloat(
-        (((1 + apy / 100) ** (1 / compounding) - 1) * compounding * 100).toFixed(2)
-      );
-    },
-    [compounding]
-  );
-  const AXOS_ONE_APY = Number(domains.AXOS_ONE_APY) || 4.21;
-  const [initialDeposit, setInitialDeposit] = useState(1e4);
-  const [initialDepositDisplay, setInitialDepositDisplay] = useState(
-    formatWithCommas(1e4)
-  );
+  const [compounding, setCompounding] = useState(360);
+  const getAPR = (apy) => {
+    return Number.parseFloat(
+      (((1 + apy / 100) ** (1 / compounding) - 1) * compounding * 100).toFixed(
+        2
+      )
+    );
+  };
+  const AXOS_ONE_APY = Number(domains.AXOS_ONE_APY);
+  const AXOS_ONE_APR = getAPR(AXOS_ONE_APY);
+  const [initialDeposit, setInititalDeposit] = useState(1e3);
+  const [APR, setAPR] = useState(AXOS_ONE_APR);
   const [APY, setAPY] = useState(AXOS_ONE_APY);
-  const [APYDisplay, setAPYDisplay] = useState(APY.toString());
   const [months, setMonths] = useState(12);
-  const [monthsDisplay, setMonthsDisplay] = useState(months.toString());
   const [monthlyDeposits, setMonthlyDeposits] = useState(100);
-  const [monthlyDepositsDisplay, setMonthlyDepositsDisplay] = useState(
-    formatWithCommas(100)
-  );
-  const [fieldErrors, setFieldErrors] = useState({});
-  const handleInitialDepositChange = (e) => {
-    const raw = e.target.value;
-    const num = parseCurrencyInput(raw);
-    setInitialDeposit(num);
-    setInitialDepositDisplay(num > 0 ? formatWithCommas(num) : "");
-  };
-  const handleMonthlyDepositsChange = (e) => {
-    const raw = e.target.value;
-    if (raw === "") {
-      setMonthlyDeposits(0);
-      setMonthlyDepositsDisplay("");
-      return;
-    }
-    const num = parseCurrencyInput(raw);
-    setMonthlyDeposits(num);
-    setMonthlyDepositsDisplay(formatWithCommas(num));
-  };
-  const handleMonthsChange = (e) => {
-    const raw = e.target.value;
-    const num = parseInt(raw.replace(/[^0-9]/g, ""), 10);
-    setMonths(num);
-    setMonthsDisplay(num > 0 ? num.toString() : "");
+  const [endingBalance, setEndingBalance] = useState("");
+  const [errors, setErrors] = useState([]);
+  const [interestRate, setInterestRate] = useState(0);
+  const isValidNumber = (input) => {
+    if (typeof input !== "number") {
+      return false;
+    } else if (input < 0 || Number.isNaN(input)) {
+      return false;
+    } else return true;
   };
-  const handleAPYChange = (e) => {
-    const raw = e.target.value;
-    const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
-    setAPY(num);
-    setAPYDisplay(raw.replace(/[^0-9.]/g, ""));
+  const isValidAPY = (input) => {
+    if (typeof input !== "number") {
+      return false;
+    } else if (input <= 0 || Number.isNaN(input)) {
+      return false;
+    } else return true;
   };
-  const [endingBalanceRaw, setEndingBalanceRaw] = useState(0);
-  const [totalDepositsRaw, setTotalDepositsRaw] = useState(0);
-  const [interestEarnedRaw, setInterestEarnedRaw] = useState(0);
-  const { display: endingBalanceDisplay, isScrambling: balanceScrambling } = useScramble(endingBalanceRaw);
-  const { display: totalDepositsDisplay, isScrambling: depositsScrambling } = useScramble(totalDepositsRaw);
-  const { display: interestEarnedDisplay, isScrambling: interestScrambling } = useScramble(interestEarnedRaw);
-  const midPoint = Math.ceil(CALCULATOR_DEFINITIONS.length / 2);
-  const leftDefinitions = CALCULATOR_DEFINITIONS.slice(0, midPoint);
-  const rightDefinitions = CALCULATOR_DEFINITIONS.slice(midPoint);
-  const calculate = useCallback(() => {
-    const newErrors = {};
-    if (!initialDeposit || initialDeposit <= 0 || Number.isNaN(initialDeposit)) {
-      newErrors.initialDeposit = "Please enter an amount greater than 0.";
+  const convertInterest = useCallback(() => {
+    const newInterestRate = 0.01 * APR;
+    setInterestRate(newInterestRate);
+  }, [APR]);
+  useEffect(() => {
+    convertInterest();
+  }, [convertInterest, interestRate, setInterestRate]);
+  const handleCalculate = () => {
+    convertInterest();
+    let newErrors = [];
+    if (!isValidNumber(initialDeposit)) {
+      newErrors.push("Initial Deposit must be a positive number.");
+    }
+    if (!isValidNumber(months)) {
+      newErrors.push("Months must be a positive number.");
     }
-    if (!months || months < 1 || Number.isNaN(months)) {
-      newErrors.months = "Please enter a term of at least 1 month.";
+    if (!isValidNumber(monthlyDeposits)) {
+      newErrors.push("Monthly Deposits must be a positive number.");
     }
-    if (monthlyDeposits < 0 || Number.isNaN(monthlyDeposits)) {
-      newErrors.monthlyDeposits = "Monthly deposit amount cannot be negative.";
+    if (!isValidAPY(APY)) {
+      newErrors.push("APY must be a positive number.");
     }
-    if (!APY || APY <= 0 || Number.isNaN(APY)) {
-      newErrors.APY = "Please enter a valid APY greater than 0.";
+    if (!isValidAPY(APR)) {
+      newErrors.push("APR must be a positive number.");
     }
-    setFieldErrors(newErrors);
-    if (Object.keys(newErrors).length > 0) return;
-    const APR = getAPR(APY);
-    const interestRate = 0.01 * APR;
-    let total;
-    if (compounding === 360) {
-      total = initialDeposit * Math.pow(1 + interestRate / compounding, 30 * months) + (monthlyDeposits > 0 ? monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, 30 * months) - 1) : 0);
-    } else if (compounding === 12) {
-      total = initialDeposit * Math.pow(1 + interestRate / compounding, months) + (monthlyDeposits > 0 ? monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months) - 1) : 0);
-    } else if (compounding === 4) {
-      total = initialDeposit * Math.pow(1 + interestRate / compounding, months / 3) + (monthlyDeposits > 0 ? monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 3) - 1) : 0);
-    } else if (compounding === 2) {
-      total = initialDeposit * Math.pow(1 + interestRate / compounding, months / 6) + (monthlyDeposits > 0 ? monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 6) - 1) : 0);
-    } else if (compounding === 1) {
-      total = initialDeposit * Math.pow(1 + interestRate, months / 12) + (monthlyDeposits > 0 ? monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 12) - 1) : 0);
+    if (newErrors.length > 0) {
+      setErrors(newErrors);
     } else {
-      total = initialDeposit;
-      for (let i = 0; i < months; i++) {
-        total += monthlyDeposits;
-        total *= Math.pow(1 + interestRate / compounding, compounding / 12);
+      newErrors = [];
+      setErrors([]);
+      let total;
+      if (compounding === 360) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, 30 * months) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, 30 * months) - 1);
+      } else if (compounding === 12) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, months) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months) - 1);
+      } else if (compounding === 4) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, months / 3) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 3) - 1);
+      } else if (compounding === 2) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, months / 6) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 6) - 1);
+      } else if (compounding === 1) {
+        total = initialDeposit * Math.pow(1 + interestRate, months / 12) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 12) - 1);
+      } else {
+        total = initialDeposit;
+        for (let i = 0; i < months; i++) {
+          total += monthlyDeposits;
+          total *= Math.pow(1 + interestRate / compounding, compounding / 12);
+        }
       }
+      setEndingBalance(
+        total.toLocaleString("en-US", { style: "currency", currency: "USD" })
+      );
     }
-    const deposits = initialDeposit + monthlyDeposits * months;
-    const interest = total - deposits;
-    setEndingBalanceRaw(total);
-    setTotalDepositsRaw(deposits);
-    setInterestEarnedRaw(interest > 0 ? interest : 0);
-  }, [initialDeposit, APY, months, monthlyDeposits, compounding, getAPR]);
-  useEffect(() => {
-    calculate();
-  }, [calculate]);
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: `${container({ variant: getVariant(variant) })} ${apy_calculator}`,
-      children: [
-        (header || body) && /* @__PURE__ */ jsxs("div", { className: `${section_header} containment`, children: [
-          header && /* @__PURE__ */ jsx(
-            "h1",
+  };
+  const updateAPR = (value) => {
+    setAPR(value);
+    const new_apy = Number.parseFloat(
+      (100 * ((1 + value / 100 / compounding) ** compounding - 1)).toFixed(2)
+    );
+    setAPY(new_apy);
+    convertInterest();
+  };
+  const updateAPY = (value) => {
+    setAPY(value);
+    const new_apr = getAPR(value);
+    setAPR(new_apr);
+    convertInterest();
+  };
+  return /* @__PURE__ */ jsx("section", { className: `${container({ variant: getVariant(variant) })}`, children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
+      (header || body) && /* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
+        header && /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: `header_2 ${header_theme({ variant: calculator_variant })}`,
+            children: header
+          }
+        ),
+        body && /* @__PURE__ */ jsx("div", { className: mt_8, children: body })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
+        /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: errors.length > 0 && /* @__PURE__ */ jsx("ul", { className: pis_0, children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { className: `${errorTag}`, children: error }, index)) }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "initDeposit", children: "Initial Deposit" }),
+            /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${cash}`, children: "$" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "initDeposit",
+                type: "number",
+                step: 100,
+                name: "initDeposit",
+                value: initialDeposit,
+                onChange: (e) => setInititalDeposit(parseInt(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "apr", children: "APR (Annual Percentage Rate)" }),
+            /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${percent}`, children: "%" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "apr",
+                type: "number",
+                step: 0.01,
+                name: "apr",
+                value: APR,
+                onChange: (e) => updateAPR(parseFloat(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "apy", children: "APY (Annual Percentage Yield)" }),
+            /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${percent}`, children: "%" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "apy",
+                type: "number",
+                step: 0.01,
+                name: "apy",
+                value: APY,
+                onChange: (e) => updateAPY(parseFloat(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "months", children: "Months" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "months",
+                min: 1,
+                maxLength: 4,
+                type: "number",
+                name: "months",
+                value: months,
+                onChange: (e) => setMonths(parseInt(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "compounding", children: "Compounding" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "compounding",
+                name: "compounding",
+                value: compounding,
+                onChange: (e) => setCompounding(Number(e.target.value)),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: 360, children: "Daily" }),
+                  /* @__PURE__ */ jsx("option", { value: 12, children: "Monthly" }),
+                  /* @__PURE__ */ jsx("option", { value: 4, children: "Quarterly" }),
+                  /* @__PURE__ */ jsx("option", { value: 2, children: "Semi-Annual" }),
+                  /* @__PURE__ */ jsx("option", { value: 1, children: "Yearly" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "monthlyDeposits", children: "Monthly Deposits" }),
+            /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${cash}`, children: "$" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "monthlyDeposits",
+                maxLength: 25,
+                type: "number",
+                value: monthlyDeposits,
+                name: "monthlyDeposits",
+                onChange: (e) => setMonthlyDeposits(parseInt(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "endBal", children: "Ending Balance" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "endBal",
+                maxLength: 30,
+                type: "string",
+                readOnly: true,
+                name: "endBal",
+                value: endingBalance
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              className: `header_1 ${header_theme({ variant: calculator_variant })}`,
-              children: header
+              className: `${submit_section} ${span_12} 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
+                }
+              )
             }
           ),
-          body && /* @__PURE__ */ jsx("div", { className: mt_8, children: body })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${apy_calculator} flex between`,
-            style: { paddingBlock: "0px" },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: calculator_section, children: /* @__PURE__ */ jsx("form", { id: "calculator_form", className: apy_calculator_form, children: /* @__PURE__ */ jsxs("div", { className: fieldset, children: [
-                /* @__PURE__ */ jsxs(
-                  Field,
-                  {
-                    className: `${field_row} ${relative} flex flex_col`,
-                    style: { marginTop: 0 },
-                    children: [
-                      /* @__PURE__ */ jsx(Label, { className: field_label, children: "Initial Deposit" }),
-                      /* @__PURE__ */ jsx(
-                        Input,
-                        {
-                          className: `${field_row_input} ${fieldErrors.initialDeposit ? ` ${field_row_input_error}` : ""}`,
-                          id: "initDeposit",
-                          type: "text",
-                          inputMode: "numeric",
-                          name: "initDeposit",
-                          value: initialDepositDisplay ? `$${initialDepositDisplay}` : "",
-                          onChange: handleInitialDepositChange,
-                          "aria-invalid": !!fieldErrors.initialDeposit,
-                          "aria-describedby": fieldErrors.initialDeposit ? "initDeposit-error" : void 0
-                        }
-                      ),
-                      fieldErrors.initialDeposit && /* @__PURE__ */ jsx(
-                        Description,
-                        {
-                          as: "span",
-                          id: "initDeposit-error",
-                          className: field_error,
-                          role: "alert",
-                          children: fieldErrors.initialDeposit
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Field, { className: `${field_row} ${relative} flex flex_col`, children: [
-                  /* @__PURE__ */ jsx(Label, { className: field_label, children: "APY (Annual Percentage Yield)" }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `${label_symbol} ${percent}`,
-                      "aria-hidden": "true",
-                      children: "%"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      className: `${field_row_input} ${fieldErrors.APY ? ` ${field_row_input_error}` : ""}`,
-                      id: "apy",
-                      type: "text",
-                      inputMode: "numeric",
-                      name: "apy",
-                      value: APYDisplay,
-                      onChange: handleAPYChange,
-                      onWheel: (e) => e.currentTarget.blur(),
-                      "aria-invalid": !!fieldErrors.APY,
-                      "aria-describedby": fieldErrors.APY ? "apy-error" : void 0
-                    }
-                  ),
-                  fieldErrors.APY && /* @__PURE__ */ jsx(
-                    Description,
-                    {
-                      as: "span",
-                      id: "apy-error",
-                      className: field_error,
-                      role: "alert",
-                      children: fieldErrors.APY
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(Field, { className: `${field_row} ${relative} flex flex_col`, children: [
-                  /* @__PURE__ */ jsx(Label, { className: field_label, children: "Months" }),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      className: `${field_row_input}${fieldErrors.months ? ` ${field_row_input_error}` : ""}`,
-                      id: "months",
-                      min: 1,
-                      type: "text",
-                      inputMode: "numeric",
-                      name: "months",
-                      value: monthsDisplay,
-                      onChange: handleMonthsChange,
-                      "aria-invalid": !!fieldErrors.months,
-                      "aria-describedby": fieldErrors.months ? "months-error" : void 0
-                    }
-                  ),
-                  fieldErrors.months && /* @__PURE__ */ jsx(
-                    Description,
-                    {
-                      as: "span",
-                      id: "months-error",
-                      className: field_error,
-                      role: "alert",
-                      children: fieldErrors.months
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(Field, { className: `${field_row} ${relative} flex flex_col`, children: [
-                  /* @__PURE__ */ jsx(Label, { className: field_label, htmlFor: "compounding", children: "Compounding" }),
-                  /* @__PURE__ */ jsxs(
-                    Listbox,
-                    {
-                      value: compoundingOption,
-                      onChange: setCompoundingOption,
-                      children: [
-                        /* @__PURE__ */ jsxs(
-                          ListboxButton,
-                          {
-                            id: "compounding",
-                            className: `${listbox_button} ${field_row_input}`,
-                            children: [
-                              /* @__PURE__ */ jsx("span", { children: compoundingOption.label }),
-                              /* @__PURE__ */ jsx(
-                                "svg",
-                                {
-                                  className: chevron_icon,
-                                  xmlns: "http://www.w3.org/2000/svg",
-                                  viewBox: "0 0 20 20",
-                                  fill: "currentColor",
-                                  "aria-hidden": "true",
-                                  children: /* @__PURE__ */ jsx(
-                                    "path",
-                                    {
-                                      fillRule: "evenodd",
-                                      d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
-                                      clipRule: "evenodd"
-                                    }
-                                  )
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          ListboxOptions,
-                          {
-                            anchor: "bottom start",
-                            className: listbox_options,
-                            children: COMPOUNDING_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
-                              ListboxOption,
-                              {
-                                value: opt,
-                                className: listbox_option,
-                                children: opt.label
-                              },
-                              opt.value
-                            ))
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(Field, { className: `${field_row} ${relative} flex flex_col`, children: [
-                  /* @__PURE__ */ jsxs(Label, { className: field_label, children: [
-                    "Monthly Deposits",
-                    " ",
-                    /* @__PURE__ */ jsx("span", { className: optional_badge, children: "(optional)" })
-                  ] }),
+          disclosure && /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: disclosure })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${marketing} ${section_container}`, children: marketingTiles && marketingTiles?.map(
+      ({ id, headline, bodyCopy, callToActionRow }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${container({ variant: getVariant(variant) })} ${marketingTile} rounded bordered`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: headerIconBillboard,
+                style: { textAlign: "left" },
+                children: [
                   /* @__PURE__ */ jsx(
-                    Input,
+                    "div",
                     {
-                      className: `${field_row_input} ${fieldErrors.monthlyDeposits ? ` ${field_row_input_error}` : ""}`,
-                      id: "monthlyDeposits",
-                      type: "text",
-                      inputMode: "numeric",
-                      name: "monthlyDeposits",
-                      value: monthlyDepositsDisplay ? `$${monthlyDepositsDisplay}` : "",
-                      placeholder: "0",
-                      onChange: handleMonthlyDepositsChange,
-                      "aria-invalid": !!fieldErrors.monthlyDeposits,
-                      "aria-describedby": fieldErrors.monthlyDeposits ? "monthlyDeposits-error" : void 0
+                      className: `header_3 ${header_theme({ variant: calculator_variant })}`,
+                      children: headline
                     }
                   ),
-                  fieldErrors.monthlyDeposits && /* @__PURE__ */ jsx(
-                    Description,
-                    {
-                      as: "span",
-                      id: "monthlyDeposits-error",
-                      className: field_error,
-                      role: "alert",
-                      children: fieldErrors.monthlyDeposits
-                    }
-                  )
-                ] }),
-                disclosure && /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: disclosure })
-              ] }) }) }),
-              /* @__PURE__ */ jsx("div", { className: results_wrapper, children: /* @__PURE__ */ jsxs("div", { className: result_card, children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: result_section,
-                    "aria-live": "polite",
-                    "aria-atomic": "true",
-                    "aria-label": `Interest earned: ${interestEarnedDisplay}`,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Image,
-                        {
-                          src: "https://www.axos.com/images/5IyqVlv7El9K7hAX0vIGWG/axb-25th-growth-lg.png",
-                          alt: "",
-                          height: 173,
-                          width: 202,
-                          className: `img_fluid ${result_image}`,
-                          priority: true
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: `${result_value} ${interestScrambling ? scrambling : ""}`,
-                          children: interestEarnedDisplay
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: result_value_label, children: "Interest Earned" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": "true", children: [
-                  /* @__PURE__ */ jsxs("div", { className: result_item, children: [
-                    /* @__PURE__ */ jsx("span", { className: result_item_label, children: "Ending Balance:" }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: `${result_item_value} ${balanceScrambling ? scrambling : ""}`,
-                        children: endingBalanceDisplay
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: result_item, children: [
-                    /* @__PURE__ */ jsx("span", { className: result_item_label, children: "Total Deposits:" }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: `${result_item_value} ${depositsScrambling ? scrambling : ""}`,
-                        children: totalDepositsDisplay
-                      }
-                    )
-                  ] })
-                ] })
-              ] }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { id: "definitions", className: "push_up_24", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${definitions_accordion} ${apy_calculator}`,
-            "aria-label": "Calculator definitions",
-            style: { paddingBlock: "0px" },
-            children: /* @__PURE__ */ jsx(Disclosure, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(DisclosureButton, { className: definitions_button, children: [
-                /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    className: definitions_h2({ variant: getVariant(variant) }),
-                    children: "Calculator definitions"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    fill: "none",
-                    "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        d: "M10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM10.625 8.75V14.375H9.375V8.75H10.625ZM10 5.625C10.5178 5.625 10.9375 6.04473 10.9375 6.5625C10.9375 7.08027 10.5178 7.5 10 7.5C9.48223 7.5 9.0625 7.08027 9.0625 6.5625C9.0625 6.04473 9.48223 5.625 10 5.625Z",
-                        fill: "#435164"
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
-                DisclosurePanel,
+                  /* @__PURE__ */ jsx("div", { children: bodyCopy })
+                ]
+              }
+            ) }),
+            callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} middle`, children: callToActionRow.map(
+              ({
+                id: id2,
+                variant: variant2,
+                displayText,
+                targetUrl,
+                type
+              }) => type === "Button" ? /* @__PURE__ */ jsx(
+                Button,
                 {
-                  static: true,
-                  as: motion.div,
-                  initial: { opacity: 0, height: 0, y: -6 },
-                  animate: { opacity: 1, height: "auto", y: 0 },
-                  exit: { opacity: 0, height: 0, y: -4 },
-                  style: { overflow: "hidden" },
-                  children: /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: `${definitions_columns} ${definitions_panel}`,
-                      children: [
-                        /* @__PURE__ */ jsx("div", { className: definitions_column, children: leftDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
-                          motion.div,
-                          {
-                            className: definitions_item,
-                            initial: { opacity: 0, y: 8 },
-                            animate: { opacity: 1, y: 0 },
-                            exit: { opacity: 0, y: 6 },
-                            transition: {
-                              ...DEFINITIONS_ITEM_TRANSITION,
-                              delay: index * 0.045
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
-                              /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
-                            ]
-                          },
-                          definition.term
-                        )) }),
-                        /* @__PURE__ */ jsx("div", { className: definitions_column, children: rightDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
-                          motion.div,
-                          {
-                            className: definitions_item,
-                            initial: { opacity: 0, y: 8 },
-                            animate: { opacity: 1, y: 0 },
-                            exit: { opacity: 0, y: 6 },
-                            transition: {
-                              ...DEFINITIONS_ITEM_TRANSITION,
-                              delay: (leftDefinitions.length + index) * 0.045
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
-                              /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
-                            ]
-                          },
-                          definition.term
-                        )) })
-                      ]
-                    }
-                  )
-                }
-              ) })
-            ] }) })
-          }
-        ) })
-      ]
-    }
-  );
+                  targetUrl,
+                  color: getVariant(variant2),
+                  size: "medium",
+                  rounded: "medium",
+                  children: displayText
+                },
+                id2
+              ) : /* @__PURE__ */ jsx(
+                Chevron,
+                {
+                  targetUrl,
+                  variant: getVariant(variant2),
+                  children: displayText
+                },
+                id2
+              )
+            ) })
+          ]
+        },
+        id
+      )
+    ) })
+  ] }) });
 };
 export {
   ApyCalculator