@axos-web-dev/shared-components 2.0.0-queryparams.2 → 2.2.0

package/dist/Calculators/ApyCalculator/index.js

@@ -1,327 +1,617 @@
 "use client";
-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 { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useGlobalContext } from "../../Modal/contextApi/store.js";
 import { getVariant } from "../../utils/getVariant.js";
-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";
+import Image from "next/image.js";
+import { button } from "../../Button/Button.css.js";
+import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button, 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, calc_btn, 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 STACKED_LAYOUT_MEDIA = "(max-width: 930px)";
+const INTEREST_EARNED_ID = "interestEarned";
+function useStackedLayout() {
+  const [isStacked, setIsStacked] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(STACKED_LAYOUT_MEDIA);
+    const onChange = () => setIsStacked(media.matches);
+    onChange();
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return isStacked;
+}
+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);
+}
 const ApyCalculator = ({
   header,
   body,
-  marketingTiles,
   disclosure,
   variant
 }) => {
   const { domains } = useGlobalContext();
+  const isStackedLayout = useStackedLayout();
   const calculator_variant = getVariant(variant);
-  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 [compoundingOption, setCompoundingOption] = useState(
+    COMPOUNDING_OPTIONS[1]
+  );
+  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 [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 [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 [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 isValidAPY = (input) => {
-    if (typeof input !== "number") {
-      return false;
-    } else if (input <= 0 || Number.isNaN(input)) {
-      return false;
-    } else return true;
-  };
-  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.");
+  const handleMonthlyDepositsChange = (e) => {
+    const raw = e.target.value;
+    if (raw === "") {
+      setMonthlyDeposits(0);
+      setMonthlyDepositsDisplay("");
+      return;
     }
-    if (!isValidNumber(months)) {
-      newErrors.push("Months must be a positive number.");
+    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 handleAPYChange = (e) => {
+    const raw = e.target.value;
+    const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
+    setAPY(num);
+    setAPYDisplay(raw.replace(/[^0-9.]/g, ""));
+  };
+  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 scrollToInterestEarned = useCallback(() => {
+    document.getElementById(INTEREST_EARNED_ID)?.scrollIntoView({
+      behavior: "smooth",
+      block: "start"
+    });
+  }, []);
+  const calculate = useCallback(() => {
+    const newErrors = {};
+    if (!initialDeposit || initialDeposit <= 0 || Number.isNaN(initialDeposit)) {
+      newErrors.initialDeposit = "Please enter an amount greater than 0.";
     }
-    if (!isValidNumber(monthlyDeposits)) {
-      newErrors.push("Monthly Deposits must be a positive number.");
+    if (!months || months < 1 || Number.isNaN(months)) {
+      newErrors.months = "Please enter a term of at least 1 month.";
     }
-    if (!isValidAPY(APY)) {
-      newErrors.push("APY must be a positive number.");
+    if (monthlyDeposits < 0 || Number.isNaN(monthlyDeposits)) {
+      newErrors.monthlyDeposits = "Monthly deposit amount cannot be negative.";
     }
-    if (!isValidAPY(APR)) {
-      newErrors.push("APR must be a positive number.");
+    if (!APY || APY <= 0 || Number.isNaN(APY)) {
+      newErrors.APY = "Please enter a valid APY greater than 0.";
     }
-    if (newErrors.length > 0) {
-      setErrors(newErrors);
+    setFieldErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) return false;
+    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);
     } else {
-      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);
-        }
+      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 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",
+    const deposits = initialDeposit + monthlyDeposits * months;
+    const interest = total - deposits;
+    setEndingBalanceRaw(total);
+    setTotalDepositsRaw(deposits);
+    setInterestEarnedRaw(interest > 0 ? interest : 0);
+    return true;
+  }, [initialDeposit, APY, months, monthlyDeposits, compounding, getAPR]);
+  const handleCalculateClick = useCallback(() => {
+    const didCalculate = calculate();
+    if (!didCalculate || !isStackedLayout) return;
+    requestAnimationFrame(() => {
+      scrollToInterestEarned();
+    });
+  }, [calculate, isStackedLayout, scrollToInterestEarned]);
+  useEffect(() => {
+    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",
             {
-              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
-                }
-              )
+              className: `header_1 ${header_theme({ variant: calculator_variant })}`,
+              children: header
             }
           ),
-          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: [
+          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(
-                    "div",
+                    "span",
                     {
-                      className: `header_3 ${header_theme({ variant: calculator_variant })}`,
-                      children: headline
+                      className: `${label_symbol} ${percent}`,
+                      "aria-hidden": "true",
+                      children: "%"
                     }
                   ),
-                  /* @__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,
-                {
-                  targetUrl,
-                  color: getVariant(variant2),
-                  size: "medium",
-                  rounded: "medium",
-                  children: displayText
-                },
-                id2
-              ) : /* @__PURE__ */ jsx(
-                Chevron,
+                  /* @__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)" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      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
+                    }
+                  ),
+                  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: "flex center push_up", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: handleCalculateClick,
+                    className: `${button({ color: "primary", size: "large", rounded: "medium" })} ${calc_btn}`,
+                    children: "Calculate"
+                  }
+                ) })
+              ] }) }) }),
+              /* @__PURE__ */ jsx("div", { className: results_wrapper, children: /* @__PURE__ */ jsxs("div", { className: result_card, children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    id: INTEREST_EARNED_ID,
+                    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,
                 {
-                  targetUrl,
-                  variant: getVariant(variant2),
-                  children: displayText
-                },
-                id2
-              )
-            ) })
-          ]
-        },
-        id
-      )
-    ) })
-  ] }) });
+                  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) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: definitions_item,
+                            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) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: definitions_item,
+                            children: [
+                              /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
+                              /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
+                            ]
+                          },
+                          definition.term
+                        )) })
+                      ]
+                    }
+                  )
+                }
+              ) })
+            ] }) })
+          }
+        ) })
+      ]
+    }
+  );
 };
 export {
   ApyCalculator