@axos-web-dev/shared-components 0.0.136 → 0.0.138

package/dist/ATMLocator/ATMLocator.js

@@ -24,9 +24,11 @@ import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                          */
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import clsx from "clsx";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import { calculator_headline, calculator_description } from "../Calculators/calculator.css.js";
 /* empty css                                                                                */
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
@@ -88,7 +90,6 @@ import "react-slick";
 /* empty css                                                  */
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
-import "../Table/Table.css.js";
 /* empty css                                        */
 /* empty css                                                  */
 /* empty css                                                */

package/dist/Button/Button.js

@@ -25,6 +25,7 @@ import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";

package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.d.ts

@@ -0,0 +1,45 @@
+export declare const ax1_container: string;
+export declare const ax1_table_container: string;
+export declare const ax1_calculator_wrapper: string;
+export declare const ax1_input_container: string;
+export declare const ax1_input_label: string;
+export declare const ax1_calculator_input: string;
+export declare const ax1_d_label: string;
+export declare const ax1_m_label: string;
+export declare const ax1_calculator_button: string;
+export declare const ax1_calc_icon: string;
+export declare const ax1_header_container: string;
+export declare const ax1_header_calc: string;
+export declare const ax1_calc_text: string;
+export declare const ax1_description_text: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const ax1_calc_disclosure: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;

package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js

@@ -0,0 +1,37 @@
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                             */
+/* empty css                                        */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var ax1_container = "_11b2y8z0";
+var ax1_table_container = "_11b2y8z1";
+var ax1_calculator_wrapper = "_11b2y8z2";
+var ax1_input_container = "_11b2y8z3";
+var ax1_input_label = "_11b2y8z4";
+var ax1_calculator_input = "_11b2y8z5";
+var ax1_d_label = "_11b2y8z6";
+var ax1_m_label = "_11b2y8z7";
+var ax1_calculator_button = "_11b2y8z8";
+var ax1_calc_icon = "_11b2y8z9";
+var ax1_header_container = "_11b2y8za";
+var ax1_header_calc = "_11b2y8zb";
+var ax1_calc_text = "_11b2y8zc";
+var ax1_description_text = createRuntimeFn({ defaultClassName: "_11b2y8zd", variantClassNames: { variant: { primary: "_11b2y8ze", secondary: "_11b2y8zf", tertiary: "_11b2y8zg", quaternary: "_11b2y8zh" } }, defaultVariants: {}, compoundVariants: [] });
+var ax1_calc_disclosure = createRuntimeFn({ defaultClassName: "_11b2y8zi", variantClassNames: { variant: { primary: "_11b2y8zj", secondary: "_11b2y8zk", tertiary: "_11b2y8zl", quaternary: "_11b2y8zm" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  ax1_calc_disclosure,
+  ax1_calc_icon,
+  ax1_calc_text,
+  ax1_calculator_button,
+  ax1_calculator_input,
+  ax1_calculator_wrapper,
+  ax1_container,
+  ax1_d_label,
+  ax1_description_text,
+  ax1_header_calc,
+  ax1_header_container,
+  ax1_input_container,
+  ax1_input_label,
+  ax1_m_label,
+  ax1_table_container
+};

package/dist/Calculators/AxosOneCalculator/index.d.ts

@@ -0,0 +1,10 @@
+import { default as React, FC } from 'react';
+
+export interface AxosOneCalculatorProps {
+    headline?: React.ReactNode | string;
+    icon?: boolean;
+    bodyCopy?: React.ReactNode | string;
+    disclosure: React.ReactNode | string;
+    variant: string;
+}
+export declare const AxosOneCalculator: FC<AxosOneCalculatorProps>;

package/dist/Calculators/AxosOneCalculator/index.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../Button/Button.js";
+import "../../Button/Button.css.js";
+import { useState } from "react";
+import "react-use";
+import "../../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../../icons/AxosX/index.js";
+import SvgComponent from "../../icons/AxosX/Blue.js";
+import "../../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                                       */
+/* empty css                                                   */
+import { Table, TableHead, TableRow, TableCell, TableBody } from "../../Table/Table.js";
+import { headerCell } from "../../Table/Table.css.js";
+import "../../utils/allowedAxosDomains.js";
+import { getVariant } from "../../utils/getVariant.js";
+import clsx from "clsx";
+import { ax1_container, ax1_calc_icon, ax1_header_container, ax1_header_calc, ax1_calc_text, ax1_description_text, ax1_table_container, ax1_calculator_wrapper, ax1_input_container, ax1_input_label, ax1_calculator_input, ax1_calculator_button, ax1_d_label, ax1_m_label, ax1_calc_disclosure } from "./BalanceAPYCalculator.css.js";
+const AxosOneCalculator = ({
+  headline,
+  bodyCopy,
+  disclosure,
+  icon,
+  variant
+}) => {
+  const calc_variant = getVariant(variant);
+  const [balance, setBalance] = useState(1e4);
+  const [axbAPY, _setAxbAPY] = useState(4.53);
+  const [axbEarning, setAxbEarning] = useState(453);
+  const [chaseAPY, _setChaseAPY] = useState(0.01);
+  const [chaseEarning, setChaseEarning] = useState(1);
+  const [bofaAPY, _setBofaAPY] = useState(0.01);
+  const [bofaEarning, setBofaEarning] = useState(1);
+  const [fargoAPY, _setFargoAPY] = useState(0.05);
+  const [fargoEarning, setFargoEarning] = useState(5);
+  const removeNonNumeric = (value) => {
+    if (value === "") {
+      value = "0";
+    }
+    const removeNonNumericChars = value.replace(/\D/g, "");
+    const newValue = parseInt(removeNonNumericChars, 10);
+    setBalance(newValue);
+    return newValue;
+  };
+  const calculateBlance = (amount) => {
+    setAxbEarning(axbAPY / 100 * amount);
+    setChaseEarning(chaseAPY / 100 * amount);
+    setBofaEarning(bofaAPY / 100 * amount);
+    setFargoEarning(fargoAPY / 100 * amount);
+  };
+  const onUpdateBalance = (e) => {
+    const text = e.target.value;
+    const amount = removeNonNumeric(text);
+    if (amount === 0) {
+      setBalance(0);
+    }
+  };
+  return /* @__PURE__ */ jsx("section", { className: clsx(ax1_container), children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
+    icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", ax1_calc_icon), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+    (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: `${ax1_header_container} text_center`, children: [
+      headline && /* @__PURE__ */ jsx("h2", { className: clsx("header_2", ax1_header_calc), children: headline }),
+      bodyCopy && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${ax1_calc_text} ${ax1_description_text({ variant: calc_variant })} text_center`,
+          children: bodyCopy
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: clsx(ax1_table_container, "rounded"), children: [
+      /* @__PURE__ */ jsxs("div", { className: ax1_calculator_wrapper, children: [
+        /* @__PURE__ */ jsxs("div", { className: ax1_input_container, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "amount", className: ax1_input_label, children: /* @__PURE__ */ jsx("span", { children: "Balance: $" }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: ax1_calculator_input,
+              id: "amount",
+              step: 100,
+              name: "amount",
+              value: balance,
+              onChange: onUpdateBalance
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: ax1_calculator_button,
+            size: "large",
+            action: () => calculateBlance(balance),
+            children: "Calculate"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Table,
+        {
+          style: { width: "100%", marginTop: "32px" },
+          variant: "primary",
+          tableType: "Rate",
+          children: [
+            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+              /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Bank" }),
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Bank" })
+              ] }),
+              /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Percentage Yield*" }),
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "APY*" })
+              ] }),
+              /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Earnings" }),
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Earnings" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs(TableBody, { children: [
+              /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsx("b", { children: "Axos Bank" }) }),
+                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
+                  axbAPY.toFixed(2),
+                  "%"
+                ] }) }),
+                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
+                  "$",
+                  axbEarning.toFixed(2)
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  "Chase",
+                  /* @__PURE__ */ jsx("sup", { children: "2" })
+                ] }),
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  chaseAPY.toFixed(2),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  "$",
+                  chaseEarning.toFixed(2)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  "Bank of America",
+                  /* @__PURE__ */ jsx("sup", { children: "3" })
+                ] }),
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  bofaAPY.toFixed(2),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  "$",
+                  bofaEarning.toFixed(2)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  "Wells Fargo",
+                  /* @__PURE__ */ jsx("sup", { children: "4" })
+                ] }),
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  fargoAPY.toFixed(2),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                  "$",
+                  fargoEarning.toFixed(2)
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    disclosure && /* @__PURE__ */ jsx("div", { className: ax1_calc_disclosure({ variant: calc_variant }), children: disclosure })
+  ] }) });
+};
+export {
+  AxosOneCalculator
+};

package/dist/Calculators/Calculator.js

@@ -24,6 +24,7 @@ import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                          */
 import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
+import { AxosOneCalculator } from "./AxosOneCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
 import { calculator_headline, calculator_description } from "./calculator.css.js";
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
@@ -183,6 +184,17 @@ const Calculator = (props) => {
         icon
       }
     );
+  } else if (name === "APY Balance AxosOne") {
+    return /* @__PURE__ */ jsx(
+      AxosOneCalculator,
+      {
+        headline,
+        bodyCopy,
+        variant,
+        disclosure,
+        icon
+      }
+    );
   } else
     return /* @__PURE__ */ jsx("section", { id, children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
       /* @__PURE__ */ jsxs("div", { children: [

package/dist/Calculators/index.d.ts

@@ -1,5 +1,6 @@
 export * from './AnnualFeeCalculator';
 export * from './ApyCalculator';
+export * from './AxosOneCalculator';
 export * from './BalanceAPYCalculator';
 export * from './Calculator';
 export * from './calculator.css';

package/dist/Calculators/index.js

@@ -1,5 +1,6 @@
 import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
+import { AxosOneCalculator } from "./AxosOneCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
 import { Calculator } from "./Calculator.js";
 import { calculator, calculator_description, calculator_headline } from "./calculator.css.js";
@@ -9,6 +10,7 @@ import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
 export {
   AnnualFeeCalculator,
   ApyCalculator,
+  AxosOneCalculator,
   BalanceAPYCalculator,
   Calculator,
   MarginTradingCalculator,

package/dist/Carousel/index.js

@@ -31,6 +31,7 @@ import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";

package/dist/Chevron/index.js

@@ -27,6 +27,7 @@ import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";

package/dist/Comparison/Comparison.js

@@ -25,6 +25,7 @@ import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";

package/dist/FaqAccordion/index.js

@@ -25,6 +25,7 @@ import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -26,6 +26,7 @@ import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../../Table/Table.css.js";
+import "../../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";

package/dist/Forms/BlendPurchase.d.ts

@@ -0,0 +1,11 @@
+import { FormProps } from './FormProps';
+
+export type BlendPurchaseInputs = {
+    property_Type: string;
+    Occupancy: string;
+    SalesPrice: string;
+    DownPayment: string;
+    CreditScore: string;
+    ZipCode: string;
+};
+export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/BlendPurchase.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                          */
+/* empty css                                   */
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import { InputPhone } from "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+/* empty css                                                */
+import { associatedEmail } from "../utils/EverestValidity.js";
+import "../utils/allowedAxosDomains.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const BlendPurchase = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  callToAction,
+  validateEmail,
+  id
+}) => {
+  const schema = z.object({
+    property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
+    Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
+    SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    DownPayment: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
+      const removeDashes = val.replace(/-/gi, "");
+      if (removeDashes.length !== 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Phone must have at least 10 and no more than 10 characters."
+        });
+        return z.NEVER;
+      }
+      return removeDashes;
+    }),
+    CreditScore: z.string(),
+    ZipCode: z.string()
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {}
+  });
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid, isSubmitting }
+  } = methods;
+  const submitForm = async (data) => {
+    await onSubmit(data);
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: `id_${id}`,
+      className: clsx(formContainer({ variant })),
+      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+          description && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "text_center",
+                form,
+                descriptionField({ variant })
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+            /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "property_Type",
+                ...register("property_Type", { required: true }),
+                label: "Property Type",
+                sizes: "medium",
+                required: true,
+                error: !!errors.property_Type,
+                helperText: errors.property_Type?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "Occupancy",
+                ...register("Occupancy", { required: true }),
+                label: "Property Usage",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Occupancy,
+                helperText: errors.Occupancy?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "SalesPrice",
+                ...register("SalesPrice", {
+                  required: true,
+                  validate: {
+                    isValid: associatedEmail
+                  }
+                }),
+                label: "Purchase Price",
+                sizes: "medium",
+                required: true,
+                error: !!errors.SalesPrice,
+                helperText: errors.SalesPrice?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "DownPayment",
+                ...register("DownPayment", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Down Payment",
+                sizes: "medium",
+                required: true,
+                error: !!errors.DownPayment,
+                helperText: errors.DownPayment?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "CreditScore",
+                ...register("CreditScore", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Credit Score",
+                sizes: "medium",
+                required: true,
+                error: !!errors.CreditScore,
+                helperText: errors.CreditScore?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "ZipCode",
+                ...register("ZipCode", { required: true, maxLength: 12 }),
+                label: "Zip Code",
+                sizes: "medium",
+                required: true,
+                error: !!errors.ZipCode,
+                helperText: errors.ZipCode?.message,
+                variant
+              }
+            ) })
+          ] }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: getVariant(callToAction?.variant),
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting,
+              children: callToAction?.displayText
+            }
+          ) })
+        ] })
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  BlendPurchase
+};

package/dist/Forms/BlendRefinance.d.ts

@@ -0,0 +1,11 @@
+import { FormProps } from './FormProps';
+
+export type BlendPurchaseInputs = {
+    property_Type: string;
+    Occupancy: string;
+    SalesPrice: string;
+    DownPayment: string;
+    CreditScore: string;
+    ZipCode: string;
+};
+export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;