@axos-web-dev/shared-components 2.0.0-dev.33 → 2.0.0-dev.34

package/dist/ATMLocator/ATMLocator.js

@@ -75,10 +75,10 @@ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js"
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Auth/ErrorAlert.js

@@ -71,10 +71,10 @@ import "./SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";

package/dist/Button/Button.js

@@ -80,10 +80,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Calculators/ApyCalculator/index.js

@@ -24,6 +24,10 @@ const CALCULATOR_DEFINITIONS = [
     term: "APY (Annual Percentage Yield)",
     description: "The rate your money earns in a year, with compounding included."
   },
+  {
+    term: "APR (Annual Percentage Rate)",
+    description: "The rate your money earns in a year, without compounding."
+  },
   {
     term: "Months",
     description: "How long you plan to keep your money in the account."
@@ -143,6 +147,14 @@ const ApyCalculator = ({
     },
     [compounding]
   );
+  const getAPY = useCallback(
+    (apr) => {
+      return Number.parseFloat(
+        (((1 + apr / 100 / compounding) ** compounding - 1) * 100).toFixed(2)
+      );
+    },
+    [compounding]
+  );
   const AXOS_ONE_APY = Number(domains.AXOS_ONE_APY) || 4.21;
   const [initialDeposit, setInitialDeposit] = useState(1e4);
   const [initialDepositDisplay, setInitialDepositDisplay] = useState(
@@ -150,6 +162,8 @@ const ApyCalculator = ({
   );
   const [APY, setAPY] = useState(AXOS_ONE_APY);
   const [APYDisplay, setAPYDisplay] = useState(APY.toString());
+  const [APR, setAPR] = useState(() => getAPR(AXOS_ONE_APY));
+  const [APRDisplay, setAPRDisplay] = useState(APR.toString());
   const [months, setMonths] = useState(12);
   const [monthsDisplay, setMonthsDisplay] = useState(months.toString());
   const [monthlyDeposits, setMonthlyDeposits] = useState(100);
@@ -182,10 +196,29 @@ const ApyCalculator = ({
   };
   const handleAPYChange = (e) => {
     const raw = e.target.value;
-    const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
+    const cleaned = raw.replace(/[^0-9.]/g, "");
+    const num = parseFloat(cleaned);
     setAPY(num);
-    setAPYDisplay(raw.replace(/[^0-9.]/g, ""));
+    setAPYDisplay(cleaned);
+    const newAPR = Number.isNaN(num) ? NaN : getAPR(num);
+    setAPR(newAPR);
+    setAPRDisplay(Number.isNaN(newAPR) ? "" : newAPR.toString());
   };
+  const handleAPRChange = (e) => {
+    const raw = e.target.value;
+    const cleaned = raw.replace(/[^0-9.]/g, "");
+    const num = parseFloat(cleaned);
+    setAPR(num);
+    setAPRDisplay(cleaned);
+    const newAPY = Number.isNaN(num) ? NaN : getAPY(num);
+    setAPY(newAPY);
+    setAPYDisplay(Number.isNaN(newAPY) ? "" : newAPY.toString());
+  };
+  useEffect(() => {
+    const newAPR = Number.isNaN(APY) ? NaN : getAPR(APY);
+    setAPR(newAPR);
+    setAPRDisplay(Number.isNaN(newAPR) ? "" : newAPR.toString());
+  }, [compounding]);
   const [endingBalanceRaw, setEndingBalanceRaw] = useState(0);
   const [totalDepositsRaw, setTotalDepositsRaw] = useState(0);
   const [interestEarnedRaw, setInterestEarnedRaw] = useState(0);
@@ -215,9 +248,11 @@ const ApyCalculator = ({
     if (!APY || APY <= 0 || Number.isNaN(APY)) {
       newErrors.APY = "Please enter a valid APY greater than 0.";
     }
+    if (!APR || APR <= 0 || Number.isNaN(APR)) {
+      newErrors.APR = "Please enter a valid APR 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) {
@@ -243,7 +278,7 @@ const ApyCalculator = ({
     setTotalDepositsRaw(deposits);
     setInterestEarnedRaw(interest > 0 ? interest : 0);
     return true;
-  }, [initialDeposit, APY, months, monthlyDeposits, compounding, getAPR]);
+  }, [initialDeposit, APY, APR, months, monthlyDeposits, compounding]);
   const handleCalculateClick = useCallback(() => {
     const didCalculate = calculate();
     if (!didCalculate || !isStackedLayout) return;
@@ -347,6 +382,43 @@ const ApyCalculator = ({
                     }
                   )
                 ] }),
+                /* @__PURE__ */ jsxs(Field, { className: `${field_row} ${relative} flex flex_col`, children: [
+                  /* @__PURE__ */ jsx(Label, { className: field_label, children: "APR (Annual Percentage Rate)" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${label_symbol} ${percent}`,
+                      "aria-hidden": "true",
+                      children: "%"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      className: `${field_row_input} ${fieldErrors.APR ? ` ${field_row_input_error}` : ""}`,
+                      id: "apr",
+                      type: "text",
+                      inputMode: "decimal",
+                      pattern: "[0-9.]*",
+                      name: "apr",
+                      value: APRDisplay,
+                      onChange: handleAPRChange,
+                      onWheel: (e) => e.currentTarget.blur(),
+                      "aria-invalid": !!fieldErrors.APR,
+                      "aria-describedby": fieldErrors.APR ? "apr-error" : void 0
+                    }
+                  ),
+                  fieldErrors.APR && /* @__PURE__ */ jsx(
+                    Description,
+                    {
+                      as: "span",
+                      id: "apr-error",
+                      className: field_error,
+                      role: "alert",
+                      children: fieldErrors.APR
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxs(Field, { className: `${field_row} ${relative} flex flex_col`, children: [
                   /* @__PURE__ */ jsx(Label, { className: field_label, children: "Months" }),
                   /* @__PURE__ */ jsx(

package/dist/Calculators/Calculator.js

@@ -51,10 +51,10 @@ import { SummitApyCalculator } from "./SummitApyCalculator/index.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 /* empty css                                       */

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -80,10 +80,10 @@ import "../../Auth/SignInPassword.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                      */
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
 import "../../Chatbot/Chatbot.js";
-import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */

package/dist/Carousel/index.js

@@ -81,10 +81,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Chatbot/Bubble.css.js

@@ -2,6 +2,7 @@ import '../assets/Chatbot/Bubble.css';import '../assets/themes/victorie.css';imp
 /* empty css                                   */
 /* empty css                               */
 /* empty css                                    */
+import "./Chatbot.css.ts.vanilla.css.js";
 /* empty css                          */
 var borderHoverGradient = "_7u9pv31";
 var bubbleWrapper = "_7u9pv32";

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,3 @@
-import "./Chatbot.css.ts.vanilla.css.js";
 var chatbotAXB = "_1hpv6vm0";
 var chatbotUFB = "_1hpv6vm1";
 export {

package/dist/Chevron/index.js

@@ -81,10 +81,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Comparison/Comparison.js

@@ -81,10 +81,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -82,10 +82,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/FaqAccordion/index.js

@@ -82,10 +82,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -78,10 +78,10 @@ import "../../Auth/SignInPassword.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                      */
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
 import "../../Chatbot/Chatbot.js";
-import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */

package/dist/Forms/ApplyNow.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/ContactUsBusiness.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/ContactUsBusinessNameEmail.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/ContactUsNMLSId.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/CpraRequest.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/CraPublicFile.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/EmailOnly.js

@@ -84,10 +84,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/MortgageRate/MortgageRateForm.js

@@ -84,10 +84,10 @@ import "../../Auth/SignInPassword.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                      */
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
 import "../../Chatbot/Chatbot.js";
-import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */

package/dist/Forms/MortgageRate/MortgageRateWatch.d.ts

@@ -1,6 +1,6 @@
 export type RateWatchInputs = {
     updateType: string;
-    updateCadence: string;
+    updateCadence?: string;
     loanTerms?: string;
     hasSmsConsent: boolean;
     tR1DesiredRate?: string;

package/dist/Forms/MortgageRate/MortgageRateWatch.js

@@ -80,10 +80,10 @@ import "../../Auth/SignInPassword.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                      */
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
 import "../../Chatbot/Chatbot.js";
-import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */
@@ -140,12 +140,34 @@ const RateWatchForm = ({
   toggleModal,
   setRateWatchSubmitted
 }) => {
+  const desiredRateFields = [
+    "tR1DesiredRate",
+    "tR2DesiredRate",
+    "tR3DesiredRate"
+  ];
+  const sanitizeDesiredRate = (value) => {
+    if (!value) return "";
+    const normalizedValue = value.replace(/[^\d.]/g, "");
+    if (!normalizedValue || normalizedValue === ".") return "";
+    const [wholePart, decimalPart = ""] = normalizedValue.split(".");
+    const trimmedDecimal = decimalPart.slice(0, 4);
+    const formattedValue = trimmedDecimal ? `${wholePart || "0"}.${trimmedDecimal}` : wholePart || "0";
+    const numericValue = Number(formattedValue);
+    if (!Number.isFinite(numericValue)) return "";
+    return Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(4).replace(/\.0+$|(?<=\.\d*)(0+)$/, "").replace(/\.$/, "");
+  };
+  const isDesiredRateOutOfRange = (value) => {
+    if (!value) return false;
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) return false;
+    return numericValue < 2 || numericValue > 10;
+  };
   const [updateType, setUpdateType] = useState(
     "Target Rate"
   );
   const schema = z.object({
     updateType: z.string().min(1, { message: "Update type is required." }),
-    updateCadence: z.string().refine((val) => !(updateType === "Frequency" && !val), {
+    updateCadence: z.string().optional().refine((val) => !(updateType === "Frequency" && !val), {
       message: "Frequency is required."
     }),
     loanTerms: z.string().optional().refine((val) => !(updateType === "Frequency" && !val), {
@@ -154,11 +176,13 @@ const RateWatchForm = ({
     hasSmsConsent: z.boolean().refine((val) => val === true, {
       message: "You must agree to receive SMS messages."
     }),
-    tR1DesiredRate: z.string().optional().refine(
+    tR1DesiredRate: z.string().optional().refine((val) => updateType === "Target Rate" ? !!val : true, {
+      message: "Desired Rate is required."
+    }).refine(
       (val) => {
         if (val && updateType === "Target Rate") {
           const numericValue = +val;
-          return !val || numericValue >= 2 && numericValue <= 10;
+          return numericValue >= 2 && numericValue <= 10;
         }
         return true;
       },
@@ -197,15 +221,21 @@ const RateWatchForm = ({
     email: z.string()
   });
   const methods = useForm({
-    resolver: zodResolver(schema)
+    resolver: zodResolver(schema),
+    mode: "onChange"
   });
   const {
     handleSubmit,
     register,
     formState: { errors, isSubmitting, isValid },
     setValue,
-    clearErrors
+    clearErrors,
+    watch
   } = methods;
+  const watchedDesiredRates = watch(desiredRateFields);
+  const hasDesiredRateWarning = desiredRateFields.some(
+    (_, index) => isDesiredRateOutOfRange(watchedDesiredRates[index])
+  );
   const submitForm = async (data) => {
     const processedData = {
       ...data,
@@ -244,12 +274,22 @@ const RateWatchForm = ({
   const handleTypeChange = (event) => {
     const value = event.target.value;
     setUpdateType(value);
+    methods.setValue("updateType", value, { shouldValidate: true });
+  };
+  const handleDesiredRateChange = (fieldName) => (event) => {
+    const sanitizedValue = sanitizeDesiredRate(event.target.value);
+    event.target.value = sanitizedValue;
+    setValue(fieldName, sanitizedValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
   };
   const handleSubmitClick = () => {
     handleSubmit(submitForm)();
   };
   useEffect(() => {
-    methods.reset();
+    methods.reset({ updateType });
   }, [updateType]);
   return /* @__PURE__ */ jsx("section", { className: "rate-watch-form", children: /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
     SuccesFormWrapper,
@@ -327,7 +367,7 @@ const RateWatchForm = ({
           /* @__PURE__ */ jsx("p", { className: mt1Rem, children: "You can establish up to three different targets with one rate watch." }),
           /* @__PURE__ */ jsxs("div", { className: threeColRow, children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Select a Loan Type*" }),
+              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Select a Loan Type" }),
               /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -346,18 +386,24 @@ const RateWatchForm = ({
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Desired Rate" }),
+              /* @__PURE__ */ jsxs("label", { className: resposiveLabel, children: [
+                "Desired Rate",
+                /* @__PURE__ */ jsx("sup", { children: "*" })
+              ] }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
                   className: dynPH,
                   ...register("tR1DesiredRate", {
-                    setValueAs: (value) => value ? `${value}` : ""
+                    setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
                   }),
+                  onChange: handleDesiredRateChange("tR1DesiredRate"),
                   type: "number",
+                  min: "2",
+                  max: "10",
                   placeholder: "Desired Rate",
                   error: !!errors.tR1DesiredRate,
-                  helperText: errors.tR1DesiredRate?.message
+                  helperText: isDesiredRateOutOfRange(watch("tR1DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR1DesiredRate?.message
                 }
               )
             ] }),
@@ -408,9 +454,16 @@ const RateWatchForm = ({
               Input,
               {
                 className: dynPH,
-                ...register("tR2DesiredRate"),
-                type: "string",
-                placeholder: "Desired Rate"
+                ...register("tR2DesiredRate", {
+                  setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
+                }),
+                onChange: handleDesiredRateChange("tR2DesiredRate"),
+                type: "number",
+                min: "2",
+                max: "10",
+                placeholder: "Desired Rate",
+                error: isDesiredRateOutOfRange(watch("tR2DesiredRate")),
+                helperText: isDesiredRateOutOfRange(watch("tR2DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR2DesiredRate?.message
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -456,10 +509,17 @@ const RateWatchForm = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               Input,
               {
-                ...register("tR3DesiredRate"),
-                type: "string",
+                ...register("tR3DesiredRate", {
+                  setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
+                }),
+                onChange: handleDesiredRateChange("tR3DesiredRate"),
+                type: "number",
+                min: "2",
+                max: "10",
                 placeholder: "Desired Rate",
-                className: dynPH
+                className: dynPH,
+                error: isDesiredRateOutOfRange(watch("tR3DesiredRate")),
+                helperText: isDesiredRateOutOfRange(watch("tR3DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR3DesiredRate?.message
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -484,7 +544,20 @@ const RateWatchForm = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: mt1Rem, children: "*The number in Desired Rate must be at least 2% and no more than 10%" })
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: mt1Rem,
+              style: {
+                color: hasDesiredRateWarning ? "#d92d20" : void 0,
+                fontWeight: hasDesiredRateWarning ? 600 : void 0
+              },
+              children: [
+                /* @__PURE__ */ jsx("sup", { children: "*" }),
+                " Please enter a desired rate between 2% and 10%"
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: modalCheckboxContainer, children: [
           /* @__PURE__ */ jsx(

package/dist/Forms/MortgageWarehouseLending.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/SuccesForm.js

@@ -66,10 +66,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 /* empty css                                       */