@axos-web-dev/shared-components 0.0.118 → 0.0.119

package/dist/DownloadTile/DownloadTile.css.d.ts

@@ -1,3 +1,4 @@
+export declare const download_tile_set: string;
 export declare const table_section_container: string;
 export declare const table_section: string;
 export declare const media__table: string;

package/dist/DownloadTile/DownloadTile.css.js

@@ -1,15 +1,17 @@
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                */
-var table_section_container = "_14gexxj0";
-var table_section = "_14gexxj1";
-var media__table = "_14gexxj2";
-var download = "_14gexxj3";
-var ico = "_14gexxj4";
-var table_header = "_14gexxj5";
-var table_footer = "_14gexxj6";
+var download_tile_set = "_14gexxj0";
+var table_section_container = "_14gexxj1";
+var table_section = "_14gexxj2";
+var media__table = "_14gexxj3";
+var download = "_14gexxj4";
+var ico = "_14gexxj5";
+var table_header = "_14gexxj6";
+var table_footer = "_14gexxj7";
 export {
   download,
+  download_tile_set,
   ico,
   media__table,
   table_footer,

package/dist/DownloadTile/DownloadTile.interface.d.ts

@@ -6,6 +6,7 @@ export interface DownloadTileSet {
     description?: string | ReactNode;
     additionalDetails?: string | ReactNode;
     downloadTiles: DownloadTileItem[];
+    internalName?: string;
 }
 export interface DownloadTileItem {
     id?: string;

package/dist/DownloadTile/index.js

@@ -3,38 +3,47 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgDownloadIcon from "../icons/DownloadIcon/index.js";
 import SvgFollowIcon from "../icons/FollowIcon/index.js";
-import { table_section, table_section_container, table_header, media__table, download, ico, table_footer } from "./DownloadTile.css.js";
+import { download_tile_set, table_section, table_section_container, table_header, media__table, download, ico, table_footer } from "./DownloadTile.css.js";
 const DownloadTile = ({
   id,
   titleText,
   description,
   additionalDetails,
-  downloadTiles
+  downloadTiles,
+  internalName
 }) => {
-  return /* @__PURE__ */ jsx("section", { id, className: `containment`, children: /* @__PURE__ */ jsxs("div", { className: table_section, children: [
-    /* @__PURE__ */ jsx("div", { className: `${table_section_container}`, children: (titleText || description) && /* @__PURE__ */ jsxs("div", { className: `${table_header} section_header`, children: [
-      titleText && /* @__PURE__ */ jsx("h2", { className: `text_center`, children: titleText }),
-      description && /* @__PURE__ */ jsx(Fragment, { children: description })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: `${table_section_container}`, children: [
-      /* @__PURE__ */ jsxs("table", { className: `${media__table}`, children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { scope: "colgroup", children: "NAME" }),
-          /* @__PURE__ */ jsx("th", { scope: "colgroup", children: "ACTION" })
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: internalName?.replace(/ /g, "-") ?? id,
+      className: `containment ${download_tile_set}`,
+      children: /* @__PURE__ */ jsxs("div", { className: table_section, children: [
+        /* @__PURE__ */ jsx("div", { className: `${table_section_container}`, children: (titleText || description) && /* @__PURE__ */ jsxs("div", { className: `${table_header} section_header`, children: [
+          titleText && /* @__PURE__ */ jsx("h2", { className: `text_center`, children: titleText }),
+          description && /* @__PURE__ */ jsx(Fragment, { children: description })
         ] }) }),
-        /* @__PURE__ */ jsx("tbody", { id: "body-table", children: downloadTiles.map(
-          ({ id: id2, url, displayName, action = "Download" }) => /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("td", { "data-label": "", children: displayName }),
-            /* @__PURE__ */ jsx("td", { "data-label": "", children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", className: download, children: [
-              action.toLowerCase() === "download" ? /* @__PURE__ */ jsx(SvgDownloadIcon, { className: ico }) : /* @__PURE__ */ jsx(SvgFollowIcon, { className: ico }),
-              /* @__PURE__ */ jsx("span", { children: action })
-            ] }) })
-          ] }, id2)
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: `${table_footer} push_up_32`, children: additionalDetails && /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
-    ] })
-  ] }) }, id);
+        /* @__PURE__ */ jsxs("div", { className: `${table_section_container}`, children: [
+          /* @__PURE__ */ jsxs("table", { className: `${media__table}`, children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "colgroup", children: "NAME" }),
+              /* @__PURE__ */ jsx("th", { scope: "colgroup", children: "ACTION" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { id: "body-table", children: downloadTiles.map(
+              ({ id: id2, url, displayName, action = "Download" }) => /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("td", { "data-label": "", children: displayName }),
+                /* @__PURE__ */ jsx("td", { "data-label": "", children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", className: download, children: [
+                  action.toLowerCase() === "download" ? /* @__PURE__ */ jsx(SvgDownloadIcon, { className: ico }) : /* @__PURE__ */ jsx(SvgFollowIcon, { className: ico }),
+                  /* @__PURE__ */ jsx("span", { children: action })
+                ] }) })
+              ] }, id2)
+            ) })
+          ] }),
+          additionalDetails && /* @__PURE__ */ jsx("div", { className: `${table_footer} push_up_32`, children: additionalDetails })
+        ] })
+      ] })
+    },
+    id
+  );
 };
 export {
   DownloadTile

package/dist/ExecutiveBio/ExecutiveBio.css.d.ts

@@ -1,3 +1,4 @@
+export declare const executive_bio: string;
 export declare const item_bio: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {

package/dist/ExecutiveBio/ExecutiveBio.css.js

@@ -3,27 +3,28 @@
 /* empty css                                   */
 /* empty css                                */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var item_bio = createRuntimeFn({ defaultClassName: "txcb8d0", variantClassNames: { variant: { primary: "txcb8d1", secondary: "txcb8d2", tertiary: "txcb8d3", quaternary: "txcb8d4" } }, defaultVariants: {}, compoundVariants: [] });
-var headline_setting = createRuntimeFn({ defaultClassName: "txcb8d5", variantClassNames: { variant: { primary: "txcb8d6", secondary: "txcb8d7", tertiary: "txcb8d8", quaternary: "txcb8d9" } }, defaultVariants: {}, compoundVariants: [] });
-var job_title = createRuntimeFn({ defaultClassName: "txcb8da", variantClassNames: { variant: { primary: "txcb8db", secondary: "txcb8dc", tertiary: "txcb8dd", quaternary: "txcb8de" } }, defaultVariants: {}, compoundVariants: [] });
-var svg_icon = createRuntimeFn({ defaultClassName: "txcb8df", variantClassNames: { variant: { primary: "txcb8dg", secondary: "txcb8dh", tertiary: "txcb8di", quaternary: "txcb8dj" } }, defaultVariants: {}, compoundVariants: [] });
-var description = "txcb8dk";
-var contact_col = "txcb8dl";
-var padding = "txcb8dm";
-var copy = "txcb8dn";
-var contact_entry = createRuntimeFn({ defaultClassName: "txcb8do", variantClassNames: { variant: { primary: "txcb8dp", secondary: "txcb8dq", tertiary: "txcb8dr", quaternary: "txcb8ds" } }, defaultVariants: {}, compoundVariants: [] });
-var contacts = "txcb8dt";
-var contact_links = "txcb8du";
-var headshot = "txcb8dv";
-var img_area = "txcb8dw";
-var media = "txcb8dx";
-var person = "txcb8dy";
-var shift = "txcb8dz";
-var bio_section_text = "txcb8d10";
-var section_theme = createRuntimeFn({ defaultClassName: "txcb8d11", variantClassNames: { variant: { primary: "txcb8d12", secondary: "txcb8d13", tertiary: "txcb8d14", quaternary: "txcb8d15" } }, defaultVariants: {}, compoundVariants: [] });
-var header_theme = createRuntimeFn({ defaultClassName: "txcb8d16", variantClassNames: { variant: { primary: "txcb8d17", secondary: "txcb8d18", tertiary: "txcb8d19", quaternary: "txcb8d1a" } }, defaultVariants: {}, compoundVariants: [] });
-var components = "txcb8d1b";
-var details = "txcb8d1c";
+var executive_bio = "txcb8d0";
+var item_bio = createRuntimeFn({ defaultClassName: "txcb8d1", variantClassNames: { variant: { primary: "txcb8d2", secondary: "txcb8d3", tertiary: "txcb8d4", quaternary: "txcb8d5" } }, defaultVariants: {}, compoundVariants: [] });
+var headline_setting = createRuntimeFn({ defaultClassName: "txcb8d6", variantClassNames: { variant: { primary: "txcb8d7", secondary: "txcb8d8", tertiary: "txcb8d9", quaternary: "txcb8da" } }, defaultVariants: {}, compoundVariants: [] });
+var job_title = createRuntimeFn({ defaultClassName: "txcb8db", variantClassNames: { variant: { primary: "txcb8dc", secondary: "txcb8dd", tertiary: "txcb8de", quaternary: "txcb8df" } }, defaultVariants: {}, compoundVariants: [] });
+var svg_icon = createRuntimeFn({ defaultClassName: "txcb8dg", variantClassNames: { variant: { primary: "txcb8dh", secondary: "txcb8di", tertiary: "txcb8dj", quaternary: "txcb8dk" } }, defaultVariants: {}, compoundVariants: [] });
+var description = "txcb8dl";
+var contact_col = "txcb8dm";
+var padding = "txcb8dn";
+var copy = "txcb8do";
+var contact_entry = createRuntimeFn({ defaultClassName: "txcb8dp", variantClassNames: { variant: { primary: "txcb8dq", secondary: "txcb8dr", tertiary: "txcb8ds", quaternary: "txcb8dt" } }, defaultVariants: {}, compoundVariants: [] });
+var contacts = "txcb8du";
+var contact_links = "txcb8dv";
+var headshot = "txcb8dw";
+var img_area = "txcb8dx";
+var media = "txcb8dy";
+var person = "txcb8dz";
+var shift = "txcb8d10";
+var bio_section_text = "txcb8d11";
+var section_theme = createRuntimeFn({ defaultClassName: "txcb8d12", variantClassNames: { variant: { primary: "txcb8d13", secondary: "txcb8d14", tertiary: "txcb8d15", quaternary: "txcb8d16" } }, defaultVariants: {}, compoundVariants: [] });
+var header_theme = createRuntimeFn({ defaultClassName: "txcb8d17", variantClassNames: { variant: { primary: "txcb8d18", secondary: "txcb8d19", tertiary: "txcb8d1a", quaternary: "txcb8d1b" } }, defaultVariants: {}, compoundVariants: [] });
+var components = "txcb8d1c";
+var details = "txcb8d1d";
 export {
   bio_section_text,
   components,
@@ -34,6 +35,7 @@ export {
   copy,
   description,
   details,
+  executive_bio,
   header_theme,
   headline_setting,
   headshot,

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Hyperlink } from "../Hyperlink/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import { padding, item_bio, shift, media, headshot, img_area, description, person, headline_setting, job_title, copy, contacts, contact_col, svg_icon, contact_entry, contact_links } from "./ExecutiveBio.css.js";
+import clsx from "clsx";
+import { executive_bio, padding, item_bio, shift, media, headshot, img_area, description, person, headline_setting, job_title, copy, contacts, contact_col, svg_icon, contact_entry, contact_links } from "./ExecutiveBio.css.js";
 const ExecutiveBio = ({
   id,
   executiveName,
@@ -15,7 +16,7 @@ const ExecutiveBio = ({
   variant: fullVariant = "primary"
 }) => {
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("section", { className: "section_spacer", id, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${padding} ${item_bio({ variant })} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
+  return /* @__PURE__ */ jsx("section", { className: clsx("section_spacer", executive_bio), id, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${padding} ${item_bio({ variant })} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
     executiveHeadshot && /* @__PURE__ */ jsx("div", { className: media, children: /* @__PURE__ */ jsx("div", { className: headshot, children: /* @__PURE__ */ jsx(
       "div",
       {

package/dist/ExecutiveBio/index.js

@@ -1,5 +1,5 @@
 import { ExecutiveBio } from "./ExecutiveBio.js";
-import { bio_section_text, components, contact_col, contact_entry, contact_links, contacts, copy, description, details, header_theme, headline_setting, headshot, img_area, item_bio, job_title, media, padding, person, section_theme, shift, svg_icon } from "./ExecutiveBio.css.js";
+import { bio_section_text, components, contact_col, contact_entry, contact_links, contacts, copy, description, details, executive_bio, header_theme, headline_setting, headshot, img_area, item_bio, job_title, media, padding, person, section_theme, shift, svg_icon } from "./ExecutiveBio.css.js";
 import { ExecutiveBioSet } from "./ExecutiveBioSet.js";
 export {
   ExecutiveBio,
@@ -13,6 +13,7 @@ export {
   copy,
   description,
   details,
+  executive_bio,
   header_theme,
   headline_setting,
   headshot,

package/dist/FaqAccordion/FaqAccordion.css.d.ts

@@ -1,3 +1,4 @@
+export declare const faqAccordion_section: string;
 export declare const faqAccordion: string;
 export declare const header: string;
 export declare const summary: string;

package/dist/FaqAccordion/FaqAccordion.css.js

@@ -2,14 +2,16 @@
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                */
-var faqAccordion = "ph6wj60";
-var header = "ph6wj61";
-var summary = "ph6wj62";
-var summaryHeader = "ph6wj63";
-var content = "ph6wj64";
+var faqAccordion_section = "ph6wj60";
+var faqAccordion = "ph6wj61";
+var header = "ph6wj62";
+var summary = "ph6wj63";
+var summaryHeader = "ph6wj64";
+var content = "ph6wj65";
 export {
   content,
   faqAccordion,
+  faqAccordion_section,
   header,
   summary,
   summaryHeader

package/dist/FaqAccordion/index.d.ts

@@ -16,5 +16,6 @@ export declare const AccordionItemContent: (props: PropsWithChildren) => import(
 export declare const FaqAccordion: (props: {
     header?: string;
     accordionEmbedLevel?: string;
+    internalName?: string;
     id?: string;
 } & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/FaqAccordion/index.js

@@ -20,9 +20,10 @@ import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
+import clsx from "clsx";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import "clsx";
 import "../Table/Table.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
@@ -44,7 +45,6 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
@@ -67,6 +67,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../Interstitial/Interstitial-variants.css.js";
@@ -99,7 +100,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                              */
 import { getLevelNumber } from "../utils/faqAccordionOptions.js";
 import { create } from "zustand";
-import { summary, summaryHeader, content, header, faqAccordion } from "./FaqAccordion.css.js";
+import { summary, summaryHeader, content, faqAccordion_section, header, faqAccordion } from "./FaqAccordion.css.js";
 const useAccordion = create()((set) => ({
   itemsOpened: [],
   addItem: (id) => {
@@ -179,11 +180,18 @@ const AccordionItemContent = (props) => {
   return /* @__PURE__ */ jsx("div", { className: content, children: props.children });
 };
 const FaqAccordion = (props) => {
-  const { children, id } = props;
-  return /* @__PURE__ */ jsxs("section", { id, children: [
-    props.header && /* @__PURE__ */ jsx("h2", { className: header, children: props.header }),
-    /* @__PURE__ */ jsx("div", { className: faqAccordion, children })
-  ] });
+  const { children, id, internalName } = props;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: internalName?.replace(/ /g, "-") ?? id,
+      className: clsx("containment", faqAccordion_section),
+      children: [
+        props.header && /* @__PURE__ */ jsx("h2", { className: header, children: props.header }),
+        /* @__PURE__ */ jsx("div", { className: faqAccordion, children })
+      ]
+    }
+  );
 };
 export {
   AccordionCtas,

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -22,6 +22,7 @@ import "../../Interstitial/Interstitial-variants.css.js";
 /* empty css                                   */
 import "../../Modal/contextApi/store.js";
 import "clsx";
+import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../../Table/Table.css.js";
@@ -44,7 +45,6 @@ import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
@@ -67,6 +67,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 import { footer_section, footer_wrapper, ft_col, ft_col_header, ft_col_subheader, nested_grid, app_col, footer_mobile, ft_panel_group, ft_panel } from "./FooterSiteMap.css.js";
 import "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
 /* empty css                                                 */
 /* empty css                                                         */
 import "../../LandingPageHeader/LandingPageHeader.css.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;