@axos-web-dev/shared-components 2.2.11 → 2.2.12

package/dist/Calculators/ApyCalculatorUserTest/index.js

@@ -0,0 +1,618 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useGlobalContext } from "../../Modal/contextApi/store.js";
+import { getVariant } from "../../utils/getVariant.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 "./ApyCalculatorUserTest.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 ApyCalculatorUserTesting = ({
+  header,
+  body,
+  disclosure,
+  variant
+}) => {
+  const { domains } = useGlobalContext();
+  const isStackedLayout = useStackedLayout();
+  const calculator_variant = getVariant(variant);
+  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 [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 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 (!months || months < 1 || Number.isNaN(months)) {
+      newErrors.months = "Please enter a term of at least 1 month.";
+    }
+    if (monthlyDeposits < 0 || Number.isNaN(monthlyDeposits)) {
+      newErrors.monthlyDeposits = "Monthly deposit amount cannot be negative.";
+    }
+    if (!APY || APY <= 0 || Number.isNaN(APY)) {
+      newErrors.APY = "Please enter a valid APY greater than 0.";
+    }
+    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 {
+      total = initialDeposit;
+      for (let i = 0; i < months; i++) {
+        total += monthlyDeposits;
+        total *= Math.pow(1 + interestRate / compounding, compounding / 12);
+      }
+    }
+    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: `header_1 ${header_theme({ variant: calculator_variant })}`,
+              children: header
+            }
+          ),
+          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)" })
+                  ] }),
+                  /* @__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,
+                {
+                  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 {
+  ApyCalculatorUserTesting
+};

package/dist/Calculators/Calculator.d.ts

@@ -16,4 +16,4 @@ export interface CalculatorProps {
     initialBalance?: number;
     callToActionRow?: ChevronProps[];
 }
-export declare const Calculator: (props: CalculatorProps) => React.JSX.Element;
+export declare const Calculator: (props: CalculatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Calculators/Calculator.js

@@ -36,6 +36,7 @@ import "../Auth/SignInPassword.js";
 /* empty css                                          */
 import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
+import { ApyCalculatorUserTesting } from "./ApyCalculatorUserTest/index.js";
 import { AxosOneCalculator } from "./AxosOneCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
 import { BuyDownCalculator } from "./BuyDownCalculator/index.js";
@@ -175,6 +176,16 @@ const Calculator = (props) => {
         disclosure
       }
     );
+  } else if (resolvedName === "APY User Testing") {
+    return /* @__PURE__ */ jsx(
+      ApyCalculatorUserTesting,
+      {
+        header: headline,
+        body: bodyCopy,
+        variant,
+        disclosure
+      }
+    );
   } else if (resolvedName === "Monthly Payment") {
     return /* @__PURE__ */ jsx(
       MonthlyPaymentCalculator,

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -26,6 +26,9 @@ import "../../AlertBanner/AlertBanner.css.js";
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import { useGlobalContext } from "../../Modal/contextApi/store.js";
+import "next/image.js";
+import "../ApyCalculatorUserTest/ApyCalculatorUserTest.css.js";
 import "../../Table/Table.css.js";
 import "../AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
@@ -60,7 +63,6 @@ import "../../Hyperlink/Hyperlink.css.js";
 import "iframe-resizer";
 import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
-import { useGlobalContext } from "../../Modal/contextApi/store.js";
 import "../SummitApyCalculator/BalanceAPYCalculator.css.js";
 /* empty css                                       */
 import "react-dom";
@@ -80,7 +82,6 @@ import "../../Chatbot/Chatbot.js";
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
-import "next/image.js";
 import "../../HeroBanner/LargeBanner.css.js";
 import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";