@axos-web-dev/shared-components 0.0.16 → 0.0.18

package/dist/Accordion/Accordion.css.d.ts

@@ -1,5 +1,6 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const accordion: import("@vanilla-extract/recipes").RuntimeFn<{
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+export declare const accordion: import('@vanilla-extract/recipes').RuntimeFn<{
     width: {
         "1/2": {
             display: "flex";
@@ -39,7 +40,7 @@ export declare const accordion: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const headerAccordion: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const headerAccordion: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/Accordion/Accordion.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from "react";
+import { default as React, PropsWithChildren } from 'react';
+
 export type Accordion = {
     expanded?: boolean;
 };

package/dist/Accordion/Accordion.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React, { createContext, useContext, useState } from "react";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";

package/dist/Accordion/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Accordion";
-export * from "./Accordion.css";
+export * from './Accordion';
+export * from './Accordion.css';

package/dist/AlertBanner/AlertBanner.css.d.ts

@@ -1,4 +1,4 @@
-export declare const alertBanner: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const alertBanner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         Standard: {
             background: "#DEF4FF";

package/dist/AlertBanner/AlertBanner.interface.d.ts

@@ -1,4 +1,5 @@
-import { ChevronProps } from "../Chevron/Chevron.interface";
+import { ChevronProps } from '../Chevron/Chevron.interface';
+
 export interface AlertBannerInterface {
     /**
      * Defines the banner style

package/dist/AlertBanner/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import { AlertBannerInterface } from "./AlertBanner.interface";
+import { AlertBannerInterface } from './AlertBanner.interface';
+import { FC } from 'react';
+
 export declare const AlertBanner: FC<AlertBannerInterface>;

package/dist/AlertBanner/index.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Chevron } from "../Chevron/index.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */

package/dist/ApyCalculator/index.d.ts

@@ -1,2 +1,3 @@
-import { FC } from "react";
+import { FC } from 'react';
+
 export declare const ApyCalculator: FC;

package/dist/ApyCalculator/index.js

@@ -216,7 +216,7 @@ const ApyCalculator = () => {
                       Button,
                       {
                         id: "btn-savings",
-                        targetUrl: "https://www.axosadvisor.com/Products/Select-Savings",
+                        targetUrl: "/products/select-savings",
                         color: "secondary",
                         size: "medium",
                         rounded: "medium",
@@ -242,25 +242,11 @@ const ApyCalculator = () => {
                     ] }) }),
                     /* @__PURE__ */ jsxs("tbody", { children: [
                       /* @__PURE__ */ jsxs("tr", { children: [
-                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Money Market", children: /* @__PURE__ */ jsx(
-                          "a",
-                          {
-                            className: "link",
-                            href: "https://www.axosadvisor.com/Products/Select-Savings",
-                            children: "Select Savings"
-                          }
-                        ) }),
+                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Money Market", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-savings", children: "Select Savings" }) }),
                         /* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.20%" })
                       ] }),
                       /* @__PURE__ */ jsxs("tr", { children: [
-                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Savings", children: /* @__PURE__ */ jsx(
-                          "a",
-                          {
-                            className: "link",
-                            href: "https://www.axosadvisor.com/Products/Select-Checking",
-                            children: "Select Checking"
-                          }
-                        ) }),
+                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Savings", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-checking", children: "Select Checking" }) }),
                         /* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.10%" })
                       ] })
                     ] })

package/dist/BulletItem/BulletItem.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from 'react';
+
 export interface BulletItemProps extends PropsWithChildren {
     id: string;
     variant?: "primary" | "secondary" | "tertiary" | "quaternary";

package/dist/BulletItem/BulletItem.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { listItem } from "../IconBillboard/IconBillboard.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgCheckCircle from "../icons/CheckCircle.js";
 import SvgCheckCircleLight from "../icons/CheckCircleLight.js";
 import "../icons/CheckIcon/CheckIcon.css.js";

package/dist/BulletItem/index.d.ts

@@ -1 +1 @@
-export * from "./BulletItem";
+export * from './BulletItem';

package/dist/Button/Button.css.d.ts

@@ -1,5 +1,6 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
     color: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/Button/Button.d.ts

@@ -1,5 +1,6 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { ButtonVariants } from "./Button.css";
+import { ButtonVariants } from './Button.css';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+
 export type ButtonBase = {
     children?: ReactNode;
     targetUrl?: string;
@@ -15,7 +16,7 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
     as?: "a";
 };
 export type ButtonProps = ButtonAsButton | ButtonAsLink;
-export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import('react').DetailedReactHTMLElement<{
     className: string;
     href: string;
     id: string | undefined;

package/dist/Button/Button.interface.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from 'react';
+
 export interface ButtonProps extends PropsWithChildren {
     /**
      * Defines the button tag

package/dist/Button/GoBackButton.d.ts

@@ -1,3 +1,4 @@
-import { ButtonProps } from "./Button";
-import { ButtonVariants } from "./Button.css";
+import { ButtonVariants } from './Button.css';
+import { ButtonProps } from './Button';
+
 export declare const GoBackButton: (props: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./Button";
-export * from "./Button.css";
-export * from "./GoBackButton";
+export * from './Button';
+export * from './Button.css';
+export * from './GoBackButton';

package/dist/CallToActionBar/CallToActionBar.interface.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from "react";
+
 export interface CallToActionBarInterface {
     id?: string;
     bannerSize: "Large" | "Medium" | "Small";

package/dist/CallToActionBar/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import { CallToActionBarInterface } from "./CallToActionBar.interface";
+import { CallToActionBarInterface } from './CallToActionBar.interface';
+import { FC } from 'react';
+
 export declare const CallToActionBar: FC<CallToActionBarInterface>;

package/dist/Carousel/Carousel.css.d.ts

@@ -1,6 +1,7 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
 export declare const dots: string;
-export declare const carousel: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const carousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -21,7 +22,7 @@ export declare const carousel: import("@vanilla-extract/recipes").RuntimeFn<{
     };
 }>;
 export declare const authorLocation: string;
-export declare const author: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const author: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -40,8 +41,8 @@ export declare const author: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const slideBase: string;
 export declare const slide: Record<"hide" | "show", string>;
 export declare const slides: string;
-export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{}>;
-export declare const dot: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{}>;
+export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             borderColor: "#1E3860";

package/dist/Carousel/index.d.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { carouselVariants } from "./Carousel.css";
+import { carouselVariants } from './Carousel.css';
+import { PropsWithChildren, ReactNode } from 'react';
+
 export interface SlideProps extends PropsWithChildren {
     id: string | number;
     selected?: boolean;

package/dist/Carousel/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
@@ -36,7 +37,7 @@ const iconVarints = /* @__PURE__ */ new Map([
 const CarouselSlide = (props) => {
   const { children, selected, content, author: author$1, location, variant } = props;
   return /* @__PURE__ */ jsx("div", { className: slide[selected ? "show" : "hide"], children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("p", { children: content }),
+    content,
     /* @__PURE__ */ jsxs("div", { className: authorLocation, children: [
       /* @__PURE__ */ jsx("span", { className: author({ variant }), children: author$1 }),
       /* @__PURE__ */ jsx("span", { children: "|" }),

package/dist/Carousel/store.d.ts

@@ -7,4 +7,4 @@ export type actions = {
     change: (selected: number) => void;
     setItems: (items: unknown[]) => void;
 };
-export declare const useCarousel: import("zustand").UseBoundStore<import("zustand").StoreApi<state & actions>>;
+export declare const useCarousel: import('zustand').UseBoundStore<import("zustand").StoreApi<state & actions>>;

package/dist/Chevron/Chevron.css.d.ts

@@ -1,4 +1,4 @@
-export declare const chevron: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/Chevron/Chevron.interface.d.ts

@@ -1,5 +1,6 @@
+import { PropsWithChildren, ReactNode } from 'react';
 import { CallToActionTypes } from '../utils/variant.types';
-import { PropsWithChildren, ReactNode } from "react";
+
 export interface ChevronProps extends PropsWithChildren {
     /**
      * react node to add as a children

package/dist/Chevron/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import { ChevronProps } from "./Chevron.interface";
+import { ChevronProps } from './Chevron.interface';
+import { FC } from 'react';
+
 export declare const Chevron: FC<ChevronProps>;

package/dist/Chevron/index.js

@@ -31,7 +31,9 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
-import "../Input/index.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
 import "react-hook-form";
 /* empty css                                              */
 import "../ImageBillboard/ImageBillboard.css.js";

package/dist/CollectInformationAlert/index.d.ts

@@ -1,2 +1,3 @@
-import { FC } from "react";
+import { FC } from 'react';
+
 export declare const CollectInformationAlert: FC;

package/dist/CollectInformationAlert/index.js

@@ -4,6 +4,7 @@ import "../Button/Button.css.js";
 import "react";
 import "react-use";
 import { Hyperlink } from "../Hyperlink/index.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCloseIcon from "../icons/CloseIcon/index.js";
 /* empty css                                */

package/dist/ContentBanner/ContentBanner.css.d.ts

@@ -1,4 +1,4 @@
-export declare const content_banner: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const content_banner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -18,7 +18,7 @@ export declare const content_banner: import("@vanilla-extract/recipes").RuntimeF
         };
     };
 }>;
-export declare const headline: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/ContentBanner/ContentBanner.interface.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from "react";
+
 export interface HeroBannerInterface {
     className?: string;
     variant: string;

package/dist/ContentBanner/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import type { HeroBannerInterface as ContentBannerInterface } from "./ContentBanner.interface";
+import { ContentBannerInterface } from './ContentBanner.interface';
+import { FC } from 'react';
+
 export declare const ContentBanner: FC<ContentBannerInterface>;

package/dist/ContentBanner/index.js

@@ -29,7 +29,7 @@ const ContentBanner = ({
           ),
           bodyCopy ? /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy }) : null
         ] }),
-        Array.isArray(callToActionRow) && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow == null ? void 0 : callToActionRow.map(
+        Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow == null ? void 0 : callToActionRow.map(
           ({ id, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
             Button,
             {

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

@@ -1,4 +1,5 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
+
 export interface DownloadTileSet {
     id: string;
     titleText?: string;

package/dist/DownloadTile/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import { DownloadTileSet } from "./DownloadTile.interface";
+import { DownloadTileSet } from './DownloadTile.interface';
+import { FC } from 'react';
+
 export declare const DownloadTile: FC<DownloadTileSet>;

package/dist/DownloadTile/index.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgDownloadIcon from "../icons/DownloadIcon/index.js";
 import { table_section, table_section_container, table_header, media__table, download, ico, table_footer } from "./DownloadTile.css.js";

package/dist/FaqAccordion/index.d.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from "react";
-import { header } from "./FaqAccordion.css";
+import { header } from './FaqAccordion.css';
+import { PropsWithChildren } from 'react';
+
 export interface AccordionItemProps extends PropsWithChildren {
     id: string;
 }

package/dist/FaqAccordion/index.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";

package/dist/FooterDisclosure/FooterDisclosure.css.d.ts

@@ -1,4 +1,4 @@
-export declare const footerDisclosure: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const footerDisclosure: import('@vanilla-extract/recipes').RuntimeFn<{
     [x: string]: {
         [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
     };

package/dist/FooterDisclosure/FooterDisclosure.d.ts

@@ -1,4 +1,5 @@
-import { CSSProperties, PropsWithChildren } from "react";
+import { CSSProperties, PropsWithChildren } from 'react';
+
 type WithStyles = {
     style?: CSSProperties;
     className?: string;

package/dist/FooterDisclosure/index.d.ts

@@ -1,2 +1,2 @@
-export { footerContent, footerDisclosure, footerLink, footerParagraph, iconsContent, } from "./FooterDisclosure.css";
-export { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph, } from "./FooterDisclosure";
+export { footerContent, footerDisclosure, footerLink, footerParagraph, iconsContent, } from './FooterDisclosure.css';
+export { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph, } from './FooterDisclosure';

package/dist/Forms/Forms.css.d.ts

@@ -1,4 +1,4 @@
-export declare const formContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const formContainer: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -15,7 +15,7 @@ export declare const formContainer: import("@vanilla-extract/recipes").RuntimeFn
     };
 }>;
 export declare const iconForm: string;
-export declare const headerForm: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const headerForm: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             readonly selectors: {
@@ -55,7 +55,7 @@ export declare const headerForm: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const formWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const formWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -72,7 +72,7 @@ export declare const formWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
     };
 }>;
 export declare const actions: string;
-export declare const disclosureForm: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const disclosureForm: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/Forms/RenderForm.d.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from "react";
-import { FormProps } from ".";
+import { FormProps } from '.';
+import { PropsWithChildren } from 'react';
+
 export interface renderFormProps extends FormProps, PropsWithChildren {
     form?: string;
 }

package/dist/Forms/SalesforceFieldsForm.d.ts

@@ -68,4 +68,4 @@ export type Props = {
     queryParams?: Partial<QueryParams>;
     location?: Record<string, unknown>;
 };
-export declare const SalesforceFieldsForm: import("react").NamedExoticComponent<Props>;
+export declare const SalesforceFieldsForm: import('react').NamedExoticComponent<Props>;

package/dist/Forms/ScheduleCall.d.ts

@@ -1,6 +1,7 @@
-import { ChevronProps } from '../Chevron/Chevron.interface';
+import { PropsWithChildren, ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
-import { PropsWithChildren, ReactNode } from "react";
+import { ChevronProps } from '../Chevron/Chevron.interface';
+
 export interface FormProps extends PropsWithChildren {
     id?: string;
     onSubmit?: (values: {

package/dist/Forms/ScheduleCall.js

@@ -5,7 +5,10 @@ import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
 import "react-use";
-import { Input } from "../Input/index.js";
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import { InputPhone } from "../Input/InputPhone.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";
@@ -34,10 +37,20 @@ const ScheduleCall = ({
 }) => {
   var _a, _b, _c, _d;
   const schema = z.object({
-    firstName: z.string().trim().min(1, { message: "First Name is required." }),
-    lastName: z.string().trim().min(1, { message: "Last Name is required." }),
+    firstName: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
+    lastName: 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(/[0-9]/).min(1, { message: "Phone is required." })
+    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), {
@@ -62,9 +75,9 @@ const ScheduleCall = ({
     {
       id: `id_${id}`,
       className: clsx(formContainer({ variant })),
-      children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+      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("div", { className: clsx("header_2 text_center", headerForm({ variant })), children: headline }),
+        /* @__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(
@@ -115,10 +128,10 @@ const ScheduleCall = ({
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
+              InputPhone,
               {
                 id: "phone",
-                ...register("phone", { required: true }),
+                ...register("phone", { required: true, maxLength: 12 }),
                 label: "Phone",
                 sizes: "medium",
                 placeholder: "Phone",
@@ -142,7 +155,7 @@ const ScheduleCall = ({
             }
           ) })
         ] })
-      ] })
+      ] }) })
     },
     id
   );

package/dist/Forms/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./Forms.css";
-export * from "./RenderForm";
-export * from "./SalesforceFieldsForm";
-export * from "./ScheduleCall";
+export * from './Forms.css';
+export * from './RenderForm';
+export * from './SalesforceFieldsForm';
+export * from './ScheduleCall';

package/dist/HeroBanner/HeroBanner.css.d.ts

@@ -1,4 +1,5 @@
-export declare const hero_banner: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const logout: string;
+export declare const hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -21,9 +22,9 @@ export declare const hero_banner: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const hero_content: string;
 export declare const reversed: string;
 export declare const hero_text: string;
+export declare const hero_wrapper: string;
 export declare const hero_img: string;
-export declare const logout: string;
-export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -43,7 +44,7 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const headline_text: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;