@axos-web-dev/shared-components 0.0.67 → 0.0.69

package/dist/{Forms/RenderForm.js → Comparison/ComparisonSet.js}

@@ -1,44 +1,49 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import "@hookform/resolvers/zod";
-import "../Modal/contextApi/store.js";
-import "clsx";
-import "react";
-import "../Button/Button.css.js";
-import "react-use";
-import "../Input/Checkbox.js";
-import "../Input/CurrencyInput.js";
-import "../Input/Dropdown.js";
-/* empty css                                          */
-/* empty css                                   */
-import "../Input/Input.js";
-import "../Input/Input.css.js";
-import "../Input/InputPhone.js";
-import "../Input/InputTextArea.js";
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, createElement } from "react";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import { Chevron } from "../Chevron/index.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                                    */
 /* empty css                                                */
-import "react-hook-form";
-import "./Forms.css.js";
-import "./SalesforceFieldsForm.js";
-import "../Accordion/Accordion.js";
-import "../Accordion/Accordion.css.js";
-import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react-use";
 /* empty css                                                */
+import { getVariant } from "../utils/getVariant.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
-import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
+import { buttons } from "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                   */
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import clsx from "clsx";
+import "react-hook-form";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
+import { comparison_container, comparison_tab_container } from "./Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
@@ -49,8 +54,11 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
+import { SetContainer } from "../SetContainer/SetContainer.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
+import "../Chevron/Chevron.css.js";
 /* empty css                                */
+import "../Modal/contextApi/store.js";
 /* empty css                                                      */
 /* empty css                                                         */
 /* empty css                                                              */
@@ -66,19 +74,87 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
-import { ScheduleCall } from "./ScheduleCall.js";
-const renderSwitch = (form = "Contact Form", props) => {
-  switch (form) {
-    case "Contact Form":
-      return /* @__PURE__ */ jsx(ScheduleCall, { ...props });
-    default:
-      return /* @__PURE__ */ jsx(ScheduleCall, { ...props });
-  }
-};
-const RenderWebForm = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: renderSwitch(props.form, props) });
+import { Tab } from "../Tab/Tab.js";
+import { TabContainer } from "../Tab/TabContainer.js";
+import { active_tab } from "../Tab/Tab.css.js";
+import { Comparison } from "./Comparison.js";
+const ComparisonSet = ({
+  headline,
+  variant,
+  id,
+  additionalDetails,
+  icon,
+  eyebrow,
+  bodyCopy,
+  comparisonElements,
+  callToActionRow
+}) => {
+  const [toggleState, setToggleState] = useState(0);
+  const toggleTab = (index) => {
+    setToggleState(index);
+  };
+  const formatAdditionalDetails = /* @__PURE__ */ jsxs(Fragment, { children: [
+    additionalDetails,
+    callToActionRow && callToActionRow?.length > 0 && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow?.map(
+      ({ id: id2, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          targetUrl,
+          color: getVariant(variant2),
+          size: "medium",
+          rounded: "medium",
+          children: displayText
+        },
+        id2
+      ) : /* @__PURE__ */ jsx(
+        Chevron,
+        {
+          targetUrl,
+          variant: getVariant(variant2),
+          children: displayText
+        },
+        id2
+      )
+    ) })
+  ] });
+  return /* @__PURE__ */ jsx(
+    SetContainer,
+    {
+      id,
+      variant,
+      headline,
+      icon,
+      eyebrow,
+      bodyCopy,
+      additionalDetails: formatAdditionalDetails,
+      isolate: true,
+      children: /* @__PURE__ */ jsxs("div", { className: clsx(comparison_container), children: [
+        /* @__PURE__ */ jsx(TabContainer, { className: comparison_tab_container, children: comparisonElements.map(({ headerTab, id: id2 }, index) => /* @__PURE__ */ jsx(
+          Tab,
+          {
+            id: `tab_${id2}_${index}`,
+            headline: `${headerTab}`,
+            onClick: () => {
+              toggleTab(index);
+            },
+            className: toggleState === index ? active_tab({ variant: getVariant(variant) }) : "",
+            variant
+          },
+          `tab_${id2}_${index}`
+        )) }),
+        comparisonElements.map((item, index) => /* @__PURE__ */ createElement(
+          Comparison,
+          {
+            ...item,
+            key: item.id,
+            index,
+            toggleState
+          }
+        ))
+      ] })
+    }
+  );
 };
 export {
-  RenderWebForm,
-  renderSwitch
+  ComparisonSet
 };

package/dist/Comparison/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Comparison.css';
+export type { ComparisonSetProps } from './Comparison.interface';
+export * from './ComparisonSet';

package/dist/Comparison/index.js

@@ -0,0 +1,15 @@
+import { comparison, comparison_buttons, comparison_container, comparison_feature, comparison_layout, comparison_list, comparison_tab_container, feature_header, feature_title, headerComparison } from "./Comparison.css.js";
+import { ComparisonSet } from "./ComparisonSet.js";
+export {
+  ComparisonSet,
+  comparison,
+  comparison_buttons,
+  comparison_container,
+  comparison_feature,
+  comparison_layout,
+  comparison_list,
+  comparison_tab_container,
+  feature_header,
+  feature_title,
+  headerComparison
+};

package/dist/DownloadTile/index.js

@@ -22,13 +22,15 @@ const DownloadTile = ({
           /* @__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 }) => /* @__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("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 }) })
     ] })

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -35,20 +35,25 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
+import "../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../Input/RadioButton.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                                       */
+import "../../Comparison/Comparison.css.js";
 import "../../HeroBanner/HeroBanner.css.js";
+import "../../HeroBanner/SelectionBanner.css.js";
+import "../../SetContainer/SetContainer.css.js";
+import "../../Tab/Tab.css.js";
+import "../../icons/Star/Star.css.js";
 import "../../ContentBanner/ContentBanner.css.js";
 /* empty css                                                 */
 import "../../ExecutiveBio/ExecutiveBio.css.js";
 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 "../../HeroBanner/SelectionBanner.css.js";
-import "../../SetContainer/SetContainer.css.js";
 import "../../ImageBillboard/ImageBillboard.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                   */

package/dist/Forms/ApplicationStart.d.ts

@@ -1,4 +1,4 @@
-import { FormProps } from './ScheduleCall';
+import { FormProps } from './FormProps';
 
 export type ApplicationStartInputs = {
     first_name: string;

package/dist/Forms/ApplicationStart.js

@@ -92,7 +92,17 @@ const ApplicationStart = ({
         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: `${form} ${descriptionField} text_center`, children: description })
+          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: [

package/dist/Forms/CommercialLending.d.ts

@@ -0,0 +1,15 @@
+import { FormProps } from './FormProps';
+
+export type CommercialLendingInputs = {
+    first_name: string;
+    last_name: string;
+    business_email: string;
+    business_phone: string;
+    company_nmls_id: string;
+    business_name: string;
+    zip: string;
+    annual_gross_revenue: string;
+    time_in_business: string;
+    type: string;
+};
+export declare const CommercialLending: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/CommercialLending.js

@@ -0,0 +1,288 @@
+"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 { Dropdown } from "../Input/Dropdown.js";
+/* empty css                                          */
+/* empty css                                   */
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.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 { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { formContainer, iconForm, headerForm, form, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const CommercialLending = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  callToAction,
+  validateEmail,
+  id
+}) => {
+  const schema = z.object({
+    first_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
+    last_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
+    business_email: z.string().email({ message: "Business Email is required." }).refine(async (val) => await validateEmail(val)),
+    business_phone: z.string().regex(/[\d-]{10}/).min(10, { message: "Business Phone is required." }).max(12, { message: "Business 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;
+    }),
+    zip: z.string(),
+    annual_gross_revenue: z.string(),
+    time_in_business: z.string(),
+    type: z.string()
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {
+      business_email: ""
+    }
+  });
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid }
+  } = 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__ */ jsx("h2", { className: clsx("header_2 text_center", headerForm({ variant })), children: headline }),
+        /* @__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: "first_name",
+                ...register("first_name", { required: true }),
+                label: "First Name",
+                sizes: "medium",
+                placeholder: "First Name",
+                required: true,
+                error: !!errors.first_name,
+                helperText: errors.first_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "last_name",
+                ...register("last_name", { required: true }),
+                label: "Last Name",
+                sizes: "medium",
+                placeholder: "Last Name",
+                required: true,
+                error: !!errors.last_name,
+                helperText: errors.last_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "business_email",
+                ...register("business_email", {
+                  required: true,
+                  validate: {
+                    isValid: associatedEmail
+                  }
+                }),
+                label: "Business Email",
+                sizes: "medium",
+                placeholder: "Business Email",
+                required: true,
+                error: !!errors.business_email,
+                helperText: errors.business_email?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "business_phone",
+                ...register("business_phone", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Business Phone",
+                sizes: "medium",
+                placeholder: "Business Phone",
+                required: true,
+                error: !!errors.business_phone,
+                helperText: errors.business_phone?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "company_nmls_id",
+                ...register("company_nmls_id", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Company NMLS ID",
+                sizes: "medium",
+                placeholder: "Company NMLS ID",
+                required: true,
+                error: !!errors.company_nmls_id,
+                helperText: errors.company_nmls_id?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "business_name",
+                ...register("business_name", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Business Name",
+                sizes: "medium",
+                placeholder: "Buesiness Name",
+                required: true,
+                error: !!errors.business_name,
+                helperText: errors.business_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "zip",
+                ...register("zip", {
+                  required: true
+                }),
+                label: "Property Location or ZIP Code",
+                sizes: "medium",
+                placeholder: "Property Location or ZIP Code",
+                required: true,
+                error: !!errors.business_name,
+                helperText: errors.business_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                id: "annual_gross_revenue",
+                ...register("annual_gross_revenue", {
+                  required: true
+                }),
+                label: "Annual Gross Revenue",
+                sizes: "medium",
+                required: true,
+                error: !!errors.annual_gross_revenue,
+                helperText: errors.annual_gross_revenue?.message,
+                variant,
+                options: [
+                  { value: 1, text: "<$5MM" },
+                  { value: 2, text: "$5-10MM" },
+                  { value: 3, text: "$10MM-$20MM" },
+                  { value: 4, text: "$20MM+" }
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                id: "time_in_business",
+                ...register("time_in_business", {
+                  required: true
+                }),
+                label: "Time in Business",
+                sizes: "medium",
+                required: true,
+                error: !!errors.time_in_business,
+                helperText: errors.time_in_business?.message,
+                variant,
+                options: [
+                  { value: 1, text: "< 2 Years in Business" },
+                  { value: 2, text: "2-5 Years in Business" },
+                  { value: 3, text: "5+ Years in Business" }
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                id: "type",
+                ...register("type", {
+                  required: true
+                }),
+                label: "Type",
+                sizes: "medium",
+                required: true,
+                error: !!errors.type,
+                helperText: errors.type?.message,
+                variant,
+                options: [
+                  { value: 1, text: "Broker" },
+                  { value: 2, text: "Borrower" }
+                ]
+              }
+            ) })
+          ] }),
+          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,
+              children: callToAction?.displayText
+            }
+          ) })
+        ] })
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  CommercialLending
+};

package/dist/Forms/ContactCompany.d.ts

@@ -1,6 +1,4 @@
-import { ChevronProps } from '../Chevron/Chevron.interface';
-import { QuaternaryTypes } from '../utils/variant.types';
-import { PropsWithChildren, ReactNode } from 'react';
+import { FormProps } from '../main';
 
 export type ContactCompanyInputs = {
     first_name: string;
@@ -9,17 +7,4 @@ export type ContactCompanyInputs = {
     phone: string;
     company: string;
 };
-export interface ContactCompanyFormProps extends PropsWithChildren {
-    id?: string;
-    onSubmit?: (values: {
-        [index: string]: string;
-    }) => void;
-    icon?: boolean;
-    headline?: ReactNode | string;
-    description?: ReactNode | string;
-    disclosure?: ReactNode | string;
-    variant?: QuaternaryTypes;
-    validateEmail: (email: string) => Promise<boolean>;
-    callToAction: Omit<ChevronProps, "targetUrl">;
-}
-export declare const ContactCompany: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: ContactCompanyFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCompany: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/ContactCompany.js

@@ -87,7 +87,17 @@ const ContactCompany = ({
         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: `${form} ${descriptionField} text_center`, children: description })
+          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: [

package/dist/Forms/ContactUs.d.ts

@@ -0,0 +1,9 @@
+import { FormProps } from './FormProps';
+
+export type Inputs = {
+    first_name: string;
+    last_name: string;
+    email: string;
+    phone: string;
+};
+export declare const ContactUs: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;