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

package/dist/Forms/ContactUs.js

@@ -0,0 +1,181 @@
+"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 { 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, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const ContactUs = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  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." }),
+    email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    phone: 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;
+    })
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {
+      email: ""
+    }
+  });
+  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: `${form} ${descriptionField({ variant })} text_center`,
+              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: "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: "email",
+                ...register("email", {
+                  required: true,
+                  validate: {
+                    isValid: associatedEmail
+                  }
+                }),
+                label: "Email",
+                sizes: "medium",
+                placeholder: "Email",
+                required: true,
+                error: !!errors.email,
+                helperText: errors.email?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "phone",
+                ...register("phone", { required: true, maxLength: 12 }),
+                label: "Phone",
+                sizes: "medium",
+                placeholder: "Phone",
+                required: true,
+                error: !!errors.phone,
+                helperText: errors.phone?.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 {
+  ContactUs
+};

package/dist/Forms/ContactUsAAS.d.ts

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

package/dist/Forms/ContactUsAAS.js

@@ -0,0 +1,330 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+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 { InputTextArea } from "../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 "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import { getVariant } from "../utils/getVariant.js";
+import "../Chevron/Chevron.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+/* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
+/* empty css                                          */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import { z } from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+import { LoadingIndicator } from "../LoadingIndicator/index.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";
+/* empty css                                                         */
+import "../ImageBillboard/ImageBillboard.css.js";
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                */
+import "../Modal/contextApi/store.js";
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+import "../Table/Table.css.js";
+/* empty css                                        */
+/* empty css                                                  */
+/* empty css                                                */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
+import { CurrentAssets } from "./FormEnums.js";
+const ContactUsAAS = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  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." }),
+    email: z.string().email({ message: "Business email is required." }).refine(async (val) => await validateEmail(val)),
+    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: "Business phone must have at least 10 and no more than 10 characters."
+        });
+        return z.NEVER;
+      }
+      return removeDashes;
+    }),
+    company: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Company is required." }),
+    Current_Assets_Under_Management__c: z.enum(CurrentAssets, {
+      required_error: "Please select an asset",
+      invalid_type_error: "Please select an asset"
+    }),
+    Role__c: z.string({ message: "Role is required." }).regex(/^[^\s][A-Za-z()-][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^{}|~<>;:[\]]{1,}$/g, {
+      message: "Role is required."
+    }).trim().min(2, { message: "Role is required." }).transform((e) => e === "" ? void 0 : e),
+    description: z.string().trim().max(32e3).min(1)
+  });
+  const methods = useForm({
+    resolver: zodResolver(
+      schema.merge(SalesforceSchema),
+      {
+        async: true
+      },
+      { mode: "async" }
+    ),
+    mode: "onChange",
+    shouldUnregister: true,
+    defaultValues: {
+      email: "",
+      Role__c: "",
+      Current_Assets_Under_Management__c: ""
+    }
+  });
+  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: `${form} ${descriptionField({ variant })} text_center`,
+              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: "first_name",
+                ...register("first_name", { required: true }),
+                label: "First Name",
+                sizes: "medium",
+                placeholder: "",
+                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: "",
+                required: true,
+                error: !!errors.last_name,
+                helperText: errors.last_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "email",
+                ...register("email", {
+                  required: true
+                }),
+                type: "email",
+                label: "Business Email",
+                sizes: "medium",
+                placeholder: "",
+                required: true,
+                error: !!errors.email,
+                helperText: errors.email?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "phone",
+                ...register("phone", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Business Phone",
+                sizes: "medium",
+                placeholder: "",
+                type: "tel",
+                required: true,
+                error: !!errors.phone,
+                helperText: errors.phone?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "company",
+                ...register("company", { required: true }),
+                label: "Company",
+                sizes: "medium",
+                placeholder: "",
+                required: true,
+                error: !!errors.company,
+                helperText: errors.company?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "Current_Assets_Under_Management__c",
+                ...register("Current_Assets_Under_Management__c", {
+                  required: true
+                }),
+                label: "Current Assets Under Management",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Current_Assets_Under_Management__c,
+                helperText: errors.Current_Assets_Under_Management__c?.message,
+                variant,
+                defaultValue: "",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select option" }),
+                  /* @__PURE__ */ jsx("option", { value: "$0 - $25M", children: "$0 — $25M" }),
+                  /* @__PURE__ */ jsx("option", { value: "$26M - $150M", children: "$26M — $150M" }),
+                  /* @__PURE__ */ jsx("option", { value: "$151M - $500M", children: "$151M — $500M" }),
+                  /* @__PURE__ */ jsx("option", { value: "$501M - $1B", children: "$501M — $1B" }),
+                  /* @__PURE__ */ jsx("option", { value: "$1B+", children: "$1B+" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "Role__c",
+                ...register("Role__c", {
+                  required: true
+                }),
+                label: "What best describes your role?",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Role__c,
+                helperText: errors.Role__c?.message,
+                variant,
+                defaultValue: "",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: "RIA Principal", children: "RIA Principal" }),
+                  /* @__PURE__ */ jsx("option", { value: "Advisor (IAR)", children: "Advisor (IAR)" }),
+                  /* @__PURE__ */ jsx("option", { value: "Broker-Dealer Affiliated Advisor", children: "Broker-Dealer Affiliated Advisor" }),
+                  /* @__PURE__ */ jsx("option", { value: "I am not a Financial Advisor", children: "I am not a Financial Advisor" }),
+                  /* @__PURE__ */ jsx("option", { value: "Other", children: "Other" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputTextArea,
+              {
+                id: "description",
+                ...register("description"),
+                label: "Comments",
+                sizes: "medium",
+                placeholder: "",
+                error: !!errors.description,
+                helperText: errors.description?.message,
+                variant,
+                rows: 1
+              }
+            ) })
+          ] }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx("div", { className: actions, children: isSubmitting ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              style: { marginInline: "auto" },
+              variant
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: getVariant(callToAction?.variant),
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting,
+              children: callToAction?.displayText
+            }
+          ) }) })
+        ] })
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  ContactUsAAS
+};

package/dist/Forms/ContactUsBusiness.d.ts

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

package/dist/Forms/ContactUsBusiness.js

@@ -39,20 +39,25 @@ import { useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
 import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { SalesforceSchema } from "./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";
 /* empty css                                                         */
-import "../HeroBanner/SelectionBanner.css.js";
-import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
@@ -136,7 +141,17 @@ const ContactUsBusiness = ({
         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/DealerServices.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 DealerServicesInputs = {
     first_name: string;
@@ -16,17 +14,4 @@ export type DealerServicesInputs = {
     zip: string;
     description: string;
 };
-export interface DealerServicesFormProps 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 DealerServices: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: DealerServicesFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DealerServices: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/DealerServices.js

@@ -96,7 +96,17 @@ const DealerServices = ({
         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/EmailOnly.d.ts

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