@axos-web-dev/shared-components 2.0.0-dev.13-stepForm.2 → 2.0.0-dev.14

package/dist/Forms/MortgageRate/MortgageRateStep.js

@@ -1,877 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useMemo, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { Button, Field, Label, Input, RadioGroup, Radio } from "@headlessui/react";
-import { section, formShell, successWrap, successTitle, successText, disclosure, disclosureTitle, disclosureText, mainTitle, mainDescription, progressWrap, progressRow, progressLabel, progressTrack, progressFill, stepPanel, title, description, actions, secondaryButton, primaryButton, overlayOpacity, inputGrid, inputRowTwo, fieldBlock, fieldLabel, input, errorText, optionalText, radioOption, radioOptionChecked, radioText, autoAdvanceHint, sliderWrap, sliderHeader, sliderValue, slider, helperText, amountPreview, amountPreviewLabel, amountPreviewValue, radioGrid, autoAdvanceStatus, autoAdvanceText, autoAdvanceTrack, autoAdvanceBar } from "./MortgageRateStep.css.js";
-import { fixedLoanTermOptions, armLoanTermOptions, fixedLoanTypeOptions, amortizationTypeOptions, creditScoreOptions, propertyUseOptions, propertyTypeOptions, mortgageTypeOptions } from "./mortgageLeadForm.config.js";
-import { parseCurrencyInput, formatCurrency, formatPhoneInput, formatPercentInput, formatCurrencyInput, calculatePercentAmount, validateZipCode, validateEmail, validatePhone } from "./mortgageLeadForm.utils.js";
-import { Overlay } from "../../ExecutiveBio/Overlay.js";
-import { overlay } from "../../ExecutiveBio/ExecutiveBio.css.js";
-const AUTO_ADVANCE_DELAY = 1200;
-const initialValues = {
-  mortgageType: "",
-  propertyType: "",
-  propertyUse: "",
-  creditScore: "",
-  purchasePrice: "",
-  downPaymentPercent: 10,
-  downPaymentAmount: "",
-  estimatedHomeValue: "",
-  currentLoanBalance: "",
-  cashOutAmount: "",
-  zipCode: "",
-  amortizationType: "",
-  fixedLoanType: "",
-  loanTerm: "",
-  desiredRate: "",
-  discountPoints: "",
-  firstName: "",
-  lastName: "",
-  email: "",
-  phoneNumber: ""
-};
-function MortgageRateStep() {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [values, setValues] = useState(initialValues);
-  const [errors, setErrors] = useState({});
-  const [submitted, setSubmitted] = useState(false);
-  const [isAutoAdvancing, setIsAutoAdvancing] = useState(false);
-  const [lastInteractedRadioStep, setLastInteractedRadioStep] = useState(null);
-  const [radioSelectionVersion, setRadioSelectionVersion] = useState(0);
-  const autoAdvanceTimeout = useRef(null);
-  const isPurchase = values.mortgageType === "purchase-rates";
-  const isRefinance = values.mortgageType === "refinance-rates";
-  const showFixedLoanTypeStep = values.amortizationType === "fixed";
-  const steps = useMemo(() => {
-    const base = [
-      "mortgageType",
-      "propertyType",
-      "propertyUse",
-      "creditScore",
-      "propertyDetails",
-      "amortizationType"
-    ];
-    if (showFixedLoanTypeStep) {
-      base.push("fixedLoanType");
-    }
-    base.push("loanTerm", "finalDetails", "contact");
-    return base;
-  }, [showFixedLoanTypeStep]);
-  const totalSteps = steps.length;
-  const stepKey = steps[currentStepIndex];
-  const progress = (currentStepIndex + 1) / totalSteps * 100;
-  const purchaseDownPaymentPreview = useMemo(() => {
-    const raw = parseCurrencyInput(values.downPaymentAmount);
-    return formatCurrency(raw);
-  }, [values.downPaymentAmount]);
-  const clearAutoAdvance = () => {
-    if (autoAdvanceTimeout.current) {
-      clearTimeout(autoAdvanceTimeout.current);
-      autoAdvanceTimeout.current = null;
-    }
-    setIsAutoAdvancing(false);
-  };
-  useEffect(() => {
-    return () => clearAutoAdvance();
-  }, []);
-  const updateValue = (key, value) => {
-    setValues((prev) => {
-      const next = { ...prev, [key]: value };
-      if (key === "purchasePrice") {
-        next.downPaymentAmount = calculatePercentAmount(
-          String(value),
-          next.downPaymentPercent
-        );
-      }
-      if (key === "downPaymentPercent") {
-        next.downPaymentAmount = calculatePercentAmount(
-          next.purchasePrice,
-          Number(value)
-        );
-      }
-      if (key === "amortizationType") {
-        next.fixedLoanType = "";
-        next.loanTerm = "";
-      }
-      return next;
-    });
-    setErrors((prev) => {
-      const next = { ...prev };
-      delete next[String(key)];
-      return next;
-    });
-  };
-  const validateStep = (step) => {
-    const nextErrors = {};
-    if (step === "mortgageType" && !values.mortgageType) {
-      nextErrors.mortgageType = "Please select a mortgage type.";
-    }
-    if (step === "propertyType" && !values.propertyType) {
-      nextErrors.propertyType = "Please select a property type.";
-    }
-    if (step === "propertyUse" && !values.propertyUse) {
-      nextErrors.propertyUse = "Please select how the property will be used.";
-    }
-    if (step === "creditScore" && !values.creditScore) {
-      nextErrors.creditScore = "Please select your estimated credit score.";
-    }
-    if (step === "propertyDetails") {
-      if (isPurchase) {
-        if (!values.purchasePrice.trim()) {
-          nextErrors.purchasePrice = "Please enter a purchase price.";
-        }
-        if (!values.zipCode.trim()) {
-          nextErrors.zipCode = "Please enter a ZIP Code.";
-        } else if (!validateZipCode(values.zipCode)) {
-          nextErrors.zipCode = "Please enter a valid 5-digit ZIP Code.";
-        }
-      }
-      if (isRefinance) {
-        if (!values.estimatedHomeValue.trim()) {
-          nextErrors.estimatedHomeValue = "Please enter an estimated home value.";
-        }
-        if (!values.currentLoanBalance.trim()) {
-          nextErrors.currentLoanBalance = "Please enter your current loan balance.";
-        }
-        if (!values.zipCode.trim()) {
-          nextErrors.zipCode = "Please enter a ZIP Code.";
-        } else if (!validateZipCode(values.zipCode)) {
-          nextErrors.zipCode = "Please enter a valid 5-digit ZIP Code.";
-        }
-      }
-    }
-    if (step === "amortizationType" && !values.amortizationType) {
-      nextErrors.amortizationType = "Please select an amortization type.";
-    }
-    if (step === "fixedLoanType" && !values.fixedLoanType) {
-      nextErrors.fixedLoanType = "Please select a loan type.";
-    }
-    if (step === "loanTerm" && !values.loanTerm) {
-      nextErrors.loanTerm = "Please select a desired loan term.";
-    }
-    if (step === "finalDetails") {
-      if (!values.desiredRate.trim()) {
-        nextErrors.desiredRate = "Please enter your desired rate.";
-      }
-    }
-    if (step === "contact") {
-      if (!values.firstName.trim()) {
-        nextErrors.firstName = "Please enter your first name.";
-      }
-      if (!values.lastName.trim()) {
-        nextErrors.lastName = "Please enter your last name.";
-      }
-      if (!values.email.trim()) {
-        nextErrors.email = "Please enter your email address.";
-      } else if (!validateEmail(values.email)) {
-        nextErrors.email = "Please enter a valid email address.";
-      }
-      if (!values.phoneNumber.trim()) {
-        nextErrors.phoneNumber = "Please enter your phone number.";
-      } else if (!validatePhone(values.phoneNumber)) {
-        nextErrors.phoneNumber = "Please enter a valid 10-digit phone number.";
-      }
-    }
-    setErrors(nextErrors);
-    return Object.keys(nextErrors).length === 0;
-  };
-  const goNext = () => {
-    clearAutoAdvance();
-    if (!validateStep(stepKey)) return;
-    if (currentStepIndex === totalSteps - 1) {
-      console.log("Mortgage lead form submitted:", values);
-      setSubmitted(true);
-      return;
-    }
-    setLastInteractedRadioStep(null);
-    setCurrentStepIndex((prev) => prev + 1);
-  };
-  const goBack = () => {
-    clearAutoAdvance();
-    setErrors({});
-    setIsAutoAdvancing(false);
-    setLastInteractedRadioStep(null);
-    setCurrentStepIndex((prev) => Math.max(0, prev - 1));
-  };
-  const getAutoAdvanceValue = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return values.mortgageType;
-      case "propertyType":
-        return values.propertyType;
-      case "propertyUse":
-        return values.propertyUse;
-      case "creditScore":
-        return values.creditScore;
-      case "amortizationType":
-        return values.amortizationType;
-      case "fixedLoanType":
-        return values.fixedLoanType;
-      case "loanTerm":
-        return values.loanTerm;
-      default:
-        return "";
-    }
-  };
-  const isAutoAdvanceStep = (key) => {
-    return [
-      "mortgageType",
-      "propertyType",
-      "propertyUse",
-      "creditScore",
-      "amortizationType",
-      "fixedLoanType",
-      "loanTerm"
-    ].includes(key);
-  };
-  const registerRadioInteraction = (step) => {
-    setLastInteractedRadioStep(step);
-    setRadioSelectionVersion((prev) => prev + 1);
-  };
-  useEffect(() => {
-    clearAutoAdvance();
-    if (!isAutoAdvanceStep(stepKey)) return;
-    const selectedValue = getAutoAdvanceValue();
-    if (!selectedValue) return;
-    if (lastInteractedRadioStep !== stepKey) return;
-    setIsAutoAdvancing(true);
-    autoAdvanceTimeout.current = setTimeout(() => {
-      if (currentStepIndex === totalSteps - 1) return;
-      setCurrentStepIndex((prev) => prev + 1);
-      setIsAutoAdvancing(false);
-    }, AUTO_ADVANCE_DELAY);
-    return () => clearAutoAdvance();
-  }, [
-    currentStepIndex,
-    totalSteps,
-    stepKey,
-    lastInteractedRadioStep,
-    radioSelectionVersion,
-    values.mortgageType,
-    values.propertyType,
-    values.propertyUse,
-    values.creditScore,
-    values.amortizationType,
-    values.fixedLoanType,
-    values.loanTerm
-  ]);
-  const getStepTitle = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return "What type of mortgage are you interested in?";
-      case "propertyType":
-        return "What kind of property type are you looking to finance?";
-      case "propertyUse":
-        return "How will you use this property?";
-      case "creditScore":
-        return "What's your estimated credit score?";
-      case "propertyDetails":
-        return "Let us know more about the property";
-      case "amortizationType":
-        return "What is your preferred amortization type on the loan?";
-      case "fixedLoanType":
-        return "Which loan type are interested in?";
-      case "loanTerm":
-        return "What is your desired loan term?";
-      case "finalDetails":
-        return "Some final details...";
-      case "contact":
-        return "Let us know how we can reach you";
-      default:
-        return "";
-    }
-  };
-  const getStepDescription = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return "Select the option that best matches your needs.";
-      case "propertyUse":
-        return "Describe how you plan to use the property to help us find the best mortgage options for you.";
-      case "propertyDetails":
-        return "Please provide these additional details to better understand your mortgage needs.";
-      case "amortizationType":
-        return "Selecting an amortization type helps us tailor loan options that fit your financial goals and preferences.";
-      case "fixedLoanType":
-        return "Choose the loan type that best describes the mortgage you are seeking.";
-      case "loanTerm":
-        return "Select the length of time (in years) for your loan term.";
-      case "finalDetails":
-        return "Almost there! Please provide these final details to help us find the best rates for you.";
-      default:
-        return "";
-    }
-  };
-  const renderAutoAdvanceStatus = () => {
-    if (!isAutoAdvancing || !isAutoAdvanceStep(stepKey)) return null;
-    return /* @__PURE__ */ jsxs("div", { className: autoAdvanceStatus, "aria-live": "polite", children: [
-      /* @__PURE__ */ jsx("span", { className: autoAdvanceText, children: "Continuing…" }),
-      /* @__PURE__ */ jsx("div", { className: autoAdvanceTrack, children: /* @__PURE__ */ jsx("div", { className: autoAdvanceBar }) })
-    ] });
-  };
-  const renderStep = () => {
-    switch (stepKey) {
-      case "mortgageType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.mortgageType,
-              onChange: (value) => {
-                updateValue("mortgageType", value);
-                registerRadioInteraction("mortgageType");
-              },
-              className: radioGrid,
-              children: mortgageTypeOptions.map((option) => {
-                const checked = values.mortgageType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.mortgageType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.mortgageType }) : null
-        ] });
-      case "propertyType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "24px" }, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.propertyType,
-              onChange: (value) => {
-                updateValue("propertyType", value);
-                registerRadioInteraction("propertyType");
-              },
-              className: radioGrid,
-              style: {
-                gridTemplateColumns: "repeat(auto-fit,minmax(258px,1fr))"
-              },
-              children: propertyTypeOptions.map((option) => {
-                const checked = values.propertyType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.propertyType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.propertyType }) : null
-        ] });
-      case "propertyUse":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.propertyUse,
-              onChange: (value) => {
-                updateValue("propertyUse", value);
-                registerRadioInteraction("propertyUse");
-              },
-              className: radioGrid,
-              style: {
-                gridTemplateColumns: "repeat(auto-fit,minmax(258px,1fr))"
-              },
-              children: propertyUseOptions.map((option) => {
-                const checked = values.propertyUse === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.propertyUse ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.propertyUse }) : null
-        ] });
-      case "creditScore":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, style: { marginTop: "24px" }, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.creditScore,
-              onChange: (value) => {
-                updateValue("creditScore", value);
-                registerRadioInteraction("creditScore");
-              },
-              className: radioGrid,
-              children: creditScoreOptions.map((option) => {
-                const checked = values.creditScore === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.creditScore ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.creditScore }) : null
-        ] });
-      case "propertyDetails":
-        if (isPurchase) {
-          return /* @__PURE__ */ jsxs("div", { className: inputGrid, children: [
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Purchase Price" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  inputMode: "numeric",
-                  placeholder: "Enter your purchase price",
-                  value: values.purchasePrice ? `$${values.purchasePrice}` : "",
-                  onChange: (e) => updateValue(
-                    "purchasePrice",
-                    formatCurrencyInput(e.target.value)
-                  )
-                }
-              ),
-              errors.purchasePrice ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.purchasePrice }) : null
-            ] }),
-            /* @__PURE__ */ jsxs(Field, { className: sliderWrap, children: [
-              /* @__PURE__ */ jsxs("div", { className: sliderHeader, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Down Payment" }),
-                /* @__PURE__ */ jsxs("span", { className: sliderValue, children: [
-                  values.downPaymentPercent,
-                  "%"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  className: slider,
-                  type: "range",
-                  min: 0,
-                  max: 100,
-                  step: 1,
-                  value: values.downPaymentPercent,
-                  onChange: (e) => updateValue("downPaymentPercent", Number(e.target.value)),
-                  "aria-label": "Down payment percentage"
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: helperText, children: "Move the slider to estimate your down payment amount instantly." }),
-              /* @__PURE__ */ jsxs("div", { className: amountPreview, children: [
-                /* @__PURE__ */ jsx("span", { className: amountPreviewLabel, children: "Estimated down payment amount" }),
-                /* @__PURE__ */ jsx("div", { className: amountPreviewValue, children: purchaseDownPaymentPreview })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "ZIP Code" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  inputMode: "numeric",
-                  placeholder: "Enter ZIP Code",
-                  value: values.zipCode,
-                  onChange: (e) => updateValue(
-                    "zipCode",
-                    e.target.value.replace(/[^\d]/g, "").slice(0, 5)
-                  )
-                }
-              ),
-              errors.zipCode ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.zipCode }) : null
-            ] })
-          ] });
-        }
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: inputGrid,
-            style: {
-              gridTemplateColumns: "repeat(auto-fit,minmax(258px,1fr))"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Estimated Home Value" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter your home value",
-                    value: values.estimatedHomeValue ? `$${values.estimatedHomeValue}` : "",
-                    onChange: (e) => updateValue(
-                      "estimatedHomeValue",
-                      formatCurrencyInput(e.target.value)
-                    )
-                  }
-                ),
-                errors.estimatedHomeValue ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.estimatedHomeValue }) : null
-              ] }),
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Current Loan Balance" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter your loan balance",
-                    value: values.currentLoanBalance ? `$${values.currentLoanBalance}` : "",
-                    onChange: (e) => updateValue(
-                      "currentLoanBalance",
-                      formatCurrencyInput(e.target.value)
-                    )
-                  }
-                ),
-                errors.currentLoanBalance ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.currentLoanBalance }) : null
-              ] }),
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsxs(Label, { className: fieldLabel, children: [
-                  "Cash Out Amount",
-                  " ",
-                  /* @__PURE__ */ jsx("span", { className: optionalText, children: "(Optional)" })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter cash out amount",
-                    value: values.cashOutAmount ? `$${values.cashOutAmount}` : "",
-                    onChange: (e) => updateValue(
-                      "cashOutAmount",
-                      formatCurrencyInput(e.target.value)
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-                /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "ZIP Code" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: input,
-                    inputMode: "numeric",
-                    placeholder: "Enter ZIP Code",
-                    value: values.zipCode,
-                    onChange: (e) => updateValue(
-                      "zipCode",
-                      e.target.value.replace(/[^\d]/g, "").slice(0, 5)
-                    )
-                  }
-                ),
-                errors.zipCode ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.zipCode }) : null
-              ] })
-            ]
-          }
-        );
-      case "amortizationType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.amortizationType,
-              onChange: (value) => {
-                updateValue("amortizationType", value);
-                registerRadioInteraction("amortizationType");
-              },
-              className: inputRowTwo,
-              children: amortizationTypeOptions.map((option) => {
-                const checked = values.amortizationType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.amortizationType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.amortizationType }) : null
-        ] });
-      case "fixedLoanType":
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.fixedLoanType,
-              onChange: (value) => {
-                updateValue("fixedLoanType", value);
-                registerRadioInteraction("fixedLoanType");
-              },
-              className: inputRowTwo,
-              children: fixedLoanTypeOptions.map((option) => {
-                const checked = values.fixedLoanType === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.fixedLoanType ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.fixedLoanType }) : null
-        ] });
-      case "loanTerm":
-        const loanTermOptions = values.amortizationType === "fixed" ? fixedLoanTermOptions : armLoanTermOptions;
-        return /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-          /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Choose one" }),
-          /* @__PURE__ */ jsx(
-            RadioGroup,
-            {
-              value: values.loanTerm,
-              onChange: (value) => {
-                updateValue("loanTerm", value);
-                registerRadioInteraction("loanTerm");
-              },
-              className: inputRowTwo,
-              children: loanTermOptions.map((option) => {
-                const checked = values.loanTerm === option.value;
-                return /* @__PURE__ */ jsx(
-                  Radio,
-                  {
-                    value: option.value,
-                    className: `${radioOption} ${checked ? radioOptionChecked : ""}`,
-                    children: /* @__PURE__ */ jsx("span", { className: radioText, children: option.label })
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: autoAdvanceHint, children: "Your selection will continue automatically." }),
-          renderAutoAdvanceStatus(),
-          errors.loanTerm ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.loanTerm }) : null
-        ] });
-      case "finalDetails":
-        return /* @__PURE__ */ jsxs("div", { className: inputGrid, children: [
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Desired Rate" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "text",
-                inputMode: "decimal",
-                placeholder: "6.25%",
-                value: values.desiredRate ? `${values.desiredRate}%` : "",
-                onChange: (e) => updateValue("desiredRate", formatPercentInput(e.target.value))
-              }
-            ),
-            errors.desiredRate ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.desiredRate }) : null
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsxs(Label, { className: fieldLabel, children: [
-              "Discount Points",
-              " ",
-              /* @__PURE__ */ jsx("span", { className: optionalText, children: "(Optional)" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "text",
-                inputMode: "decimal",
-                placeholder: "1.0",
-                value: values.discountPoints,
-                onChange: (e) => updateValue("discountPoints", e.target.value)
-              }
-            )
-          ] })
-        ] });
-      case "contact":
-        return /* @__PURE__ */ jsxs("div", { className: inputGrid, style: { marginTop: "24px" }, children: [
-          /* @__PURE__ */ jsxs("div", { className: inputRowTwo, children: [
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "First Name" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  type: "text",
-                  placeholder: "Enter your first name",
-                  value: values.firstName,
-                  onChange: (e) => updateValue("firstName", e.target.value)
-                }
-              ),
-              errors.firstName ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.firstName }) : null
-            ] }),
-            /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-              /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Last Name" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  className: input,
-                  type: "text",
-                  placeholder: "Enter your last name",
-                  value: values.lastName,
-                  onChange: (e) => updateValue("lastName", e.target.value)
-                }
-              ),
-              errors.lastName ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.lastName }) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Email" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "email",
-                placeholder: "Enter your email",
-                value: values.email,
-                onChange: (e) => updateValue("email", e.target.value)
-              }
-            ),
-            errors.email ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.email }) : null
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { className: fieldBlock, children: [
-            /* @__PURE__ */ jsx(Label, { className: fieldLabel, children: "Phone Number" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: input,
-                type: "tel",
-                inputMode: "tel",
-                placeholder: "(XXX) XXX-XXXX",
-                value: values.phoneNumber,
-                onChange: (e) => updateValue("phoneNumber", formatPhoneInput(e.target.value))
-              }
-            ),
-            errors.phoneNumber ? /* @__PURE__ */ jsx("p", { className: errorText, children: errors.phoneNumber }) : null
-          ] })
-        ] });
-      default:
-        return null;
-    }
-  };
-  if (submitted) {
-    return /* @__PURE__ */ jsx("section", { className: section, children: /* @__PURE__ */ jsxs("div", { className: formShell, children: [
-      /* @__PURE__ */ jsxs("div", { className: successWrap, children: [
-        /* @__PURE__ */ jsx("h2", { className: successTitle, children: "Thanks for your submission" }),
-        /* @__PURE__ */ jsx("p", { className: successText, children: "Your information has been received. An Axos team member may follow up with next steps based on your inquiry." })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
-        /* @__PURE__ */ jsx("p", { className: disclosureTitle, children: "Important information" }),
-        /* @__PURE__ */ jsx("p", { className: disclosureText, children: "Mortgage products are offered by Axos Bank. All loan applications are subject to credit and property approval. Terms, conditions, and program availability are subject to change without notice. This is not a commitment to lend. Additional disclosures may apply. NMLS #524995." })
-      ] })
-    ] }) });
-  }
-  const isCurrentStepAutoAdvanceStep = isAutoAdvanceStep(stepKey);
-  const continueButtonLabel = isCurrentStepAutoAdvanceStep && isAutoAdvancing ? "Continuing…" : currentStepIndex === totalSteps - 1 ? "Submit" : "Continue";
-  const continueButtonDisabled = isCurrentStepAutoAdvanceStep && isAutoAdvancing;
-  return /* @__PURE__ */ jsxs("section", { className: section, children: [
-    stepKey === "mortgageType" && /* @__PURE__ */ jsxs("div", { className: "text_center", children: [
-      /* @__PURE__ */ jsx("h1", { className: mainTitle, children: "Rate Watch" }),
-      /* @__PURE__ */ jsx("p", { className: mainDescription, children: "Get a personalized rate based on your needs. It only takes a few minutes." })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: formShell, children: [
-      /* @__PURE__ */ jsxs("div", { className: progressWrap, children: [
-        /* @__PURE__ */ jsxs("div", { className: progressRow, children: [
-          /* @__PURE__ */ jsxs("span", { className: progressLabel, children: [
-            "Step ",
-            currentStepIndex + 1,
-            " of ",
-            totalSteps
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: progressLabel, children: [
-            Math.round(progress),
-            "%"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: progressTrack, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: progressFill,
-            style: { width: `${progress}%` }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          className: stepPanel,
-          initial: { opacity: 0, x: 28 },
-          animate: { opacity: 1, x: 0 },
-          exit: { opacity: 0, x: -28 },
-          transition: { duration: 0.24, ease: "easeOut" },
-          children: [
-            /* @__PURE__ */ jsx("h2", { className: title, children: getStepTitle() }),
-            getStepDescription() ? /* @__PURE__ */ jsx("p", { className: description, children: getStepDescription() }) : null,
-            renderStep(),
-            /* @__PURE__ */ jsxs("div", { className: actions, children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  className: secondaryButton,
-                  onClick: goBack,
-                  disabled: currentStepIndex === 0,
-                  children: "Back"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  className: primaryButton,
-                  onClick: goNext,
-                  disabled: continueButtonDisabled,
-                  children: continueButtonLabel
-                }
-              )
-            ] }),
-            stepKey === "mortgageType" && /* @__PURE__ */ jsxs("div", { className: disclosure, children: [
-              /* @__PURE__ */ jsx("p", { className: disclosureTitle, children: "Important information" }),
-              /* @__PURE__ */ jsx("p", { className: disclosureText, children: "By continuing, you agree to provide information so Axos can better understand your mortgage needs. Mortgage products are subject to underwriting and approval. Rates, terms, and product availability may vary based on credit profile, property type, occupancy, loan amount, and other factors. This form is for informational purposes only and is not a commitment to lend. NMLS #524995." })
-            ] })
-          ]
-        },
-        stepKey
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        className: `${overlay} ${overlayOpacity}`,
-        variant: "secondary"
-      }
-    )
-  ] });
-}
-export {
-  MortgageRateStep
-};