@axos-web-dev/shared-components 0.0.21 → 0.0.22

package/dist/ContentBanner/index.d.ts

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

package/dist/FaqAccordion/index.d.ts

@@ -1,4 +1,3 @@
-import { header } from './FaqAccordion.css';
 import { PropsWithChildren } from 'react';
 
 export interface AccordionItemProps extends PropsWithChildren {

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

@@ -89,3 +89,41 @@ export declare const disclosureForm: import('@vanilla-extract/recipes').RuntimeF
     };
 }>;
 export declare const form: string;
+export declare const success_wrap: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const success_icon: string;
+export declare const succes_check_mark: string;
+export declare const success_circle: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;

package/dist/Forms/Forms.css.js

@@ -10,6 +10,10 @@ var formWrapper = createRuntimeFn({ defaultClassName: "tfms6ab", variantClassNam
 var actions = "tfms6ag";
 var disclosureForm = createRuntimeFn({ defaultClassName: "tfms6ah", variantClassNames: { variant: { primary: "tfms6ai", secondary: "tfms6aj", tertiary: "tfms6ak", quaternary: "tfms6al" } }, defaultVariants: {}, compoundVariants: [] });
 var form = "tfms6am";
+var success_wrap = createRuntimeFn({ defaultClassName: "tfms6ap", variantClassNames: { variant: { primary: "tfms6aq", secondary: "tfms6ar", tertiary: "tfms6as", quaternary: "tfms6at" } }, defaultVariants: {}, compoundVariants: [] });
+var success_icon = "tfms6au";
+var succes_check_mark = "tfms6av";
+var success_circle = createRuntimeFn({ defaultClassName: "tfms6aw", variantClassNames: { variant: { primary: "tfms6ax", secondary: "tfms6ay", tertiary: "tfms6az", quaternary: "tfms6a10" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   actions,
   disclosureForm,
@@ -17,5 +21,9 @@ export {
   formContainer,
   formWrapper,
   headerForm,
-  iconForm
+  iconForm,
+  succes_check_mark,
+  success_circle,
+  success_icon,
+  success_wrap
 };

package/dist/Forms/RenderForm.js

@@ -2,6 +2,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import "./Forms.css.js";
 import "./SalesforceFieldsForm.js";
 import { ScheduleCall } from "./ScheduleCall.js";
+import "clsx";
 const renderSwitch = (form = "Contact Form", props) => {
   switch (form) {
     case "Contact Form":

package/dist/Forms/ScheduleCall.d.ts

@@ -2,6 +2,12 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
 import { ChevronProps } from '../Chevron/Chevron.interface';
 
+export type Inputs = {
+    first_name: string;
+    last_name: string;
+    email: string;
+    phone: string;
+};
 export interface FormProps extends PropsWithChildren {
     id?: string;
     onSubmit?: (values: {

package/dist/Forms/ScheduleCall.js

@@ -37,8 +37,8 @@ const ScheduleCall = ({
 }) => {
   var _a, _b, _c, _d;
   const schema = z.object({
-    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." }),
+    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, "");
@@ -83,28 +83,28 @@ const ScheduleCall = ({
             /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
               Input,
               {
-                id: "firstName",
-                ...register("firstName", { required: true }),
+                id: "first_name",
+                ...register("first_name", { required: true }),
                 label: "First Name",
                 sizes: "medium",
                 placeholder: "First Name",
                 required: true,
-                error: !!errors.firstName,
-                helperText: (_a = errors.firstName) == null ? void 0 : _a.message,
+                error: !!errors.first_name,
+                helperText: (_a = errors.first_name) == null ? void 0 : _a.message,
                 variant
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               Input,
               {
-                id: "lastName",
-                ...register("lastName", { required: true }),
+                id: "last_name",
+                ...register("last_name", { required: true }),
                 label: "Last Name",
                 sizes: "medium",
                 placeholder: "Last Name",
                 required: true,
-                error: !!errors.lastName,
-                helperText: (_b = errors.lastName) == null ? void 0 : _b.message,
+                error: !!errors.last_name,
+                helperText: (_b = errors.last_name) == null ? void 0 : _b.message,
                 variant
               }
             ) }),

package/dist/Forms/SuccesForm.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { QuaternaryTypes } from '../utils';
+
+export default function SuccesFormWrapper({ children, isSubmitted, variant, }: {
+    isSubmitted: boolean;
+    variant: QuaternaryTypes;
+} & PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/Forms/SuccesForm.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { success_wrap, success_icon, success_circle, succes_check_mark } from "./Forms.css.js";
+import "./SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Modal/contextApi/store.js";
+import "react";
+import "../Button/Button.css.js";
+import "react-use";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import "react-hook-form";
+function SuccesFormWrapper({
+  children,
+  isSubmitted,
+  variant
+}) {
+  variant = getVariant(variant);
+  return !isSubmitted ? /* @__PURE__ */ jsx("div", { children }) : /* @__PURE__ */ jsxs("div", { className: clsx(success_wrap({ variant }), "text_center"), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: success_icon,
+        width: "90px",
+        height: "97px",
+        viewBox: "0 0 90 90",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        xmlSpace: "preserve",
+        style: {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeMiterlimit: "1.5"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "0",
+              y: "0",
+              width: "90",
+              height: "99",
+              style: { fill: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx("clipPath", { id: "_clip1", children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "90", height: "99" }) }),
+          /* @__PURE__ */ jsxs("g", { clipPath: "url(#_clip1)", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: success_circle({ variant }),
+                cx: "44.662",
+                cy: "44.662",
+                r: "42.662"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: succes_check_mark,
+                d: "M28.985,44.662l12.015,12.015l46.324,-54.677"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("h1", { id: "submittedText", children: "Submitted!" }),
+    /* @__PURE__ */ jsxs("p", { id: "thankYouText", children: [
+      "Thank you!",
+      /* @__PURE__ */ jsx("br", {}),
+      "A Banking expert will be in contact with you shortly"
+    ] })
+  ] });
+}
+export {
+  SuccesFormWrapper as default
+};

package/dist/Forms/index.d.ts

@@ -2,3 +2,4 @@ export * from './Forms.css';
 export * from './RenderForm';
 export * from './SalesforceFieldsForm';
 export * from './ScheduleCall';
+export * from './SuccesForm';

package/dist/Forms/index.js

@@ -1,7 +1,9 @@
-import { actions, disclosureForm, form, formContainer, formWrapper, headerForm, iconForm } from "./Forms.css.js";
+import { actions, disclosureForm, form, formContainer, formWrapper, headerForm, iconForm, succes_check_mark, success_circle, success_icon, success_wrap } from "./Forms.css.js";
 import { RenderWebForm, renderSwitch } from "./RenderForm.js";
 import { SalesforceFieldsForm, SalesforceSchema } from "./SalesforceFieldsForm.js";
 import { ScheduleCall } from "./ScheduleCall.js";
+import "react/jsx-runtime";
+import "clsx";
 export {
   RenderWebForm,
   SalesforceFieldsForm,
@@ -14,5 +16,9 @@ export {
   formWrapper,
   headerForm,
   iconForm,
-  renderSwitch
+  renderSwitch,
+  succes_check_mark,
+  success_circle,
+  success_icon,
+  success_wrap
 };

package/dist/IconBillboard/IconBillboardSet.d.ts

@@ -1,3 +1,3 @@
-import { Props } from './IconBillboard.interface';
+import { IconBillboardSet as Props } from './IconBillboard.interface';
 
 export declare const IconBillboardSet: ({ variant, side, iconBillboards, headline, bodyCopy, additionalDetails, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboard.d.ts

@@ -1,3 +1,3 @@
-import { Props } from './ImageBillboard.interface';
+import { ImageBillboardSetProps as Props } from './ImageBillboard.interface';
 
 export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/Forms/Forms.css

@@ -1,3 +1,19 @@
+@keyframes tfms6an {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    opacity: 100;
+  }
+}
+@keyframes tfms6ao {
+  0% {
+    stroke-dashoffset: -1000;
+  }
+  100% {
+    stroke-dashoffset: 1;
+  }
+}
 .tfms6a0 {
   padding-inline: 120px;
   padding-top: 48px;
@@ -88,6 +104,75 @@
   max-width: 860px;
   margin-inline: auto;
 }
+.tfms6ap {
+  padding: 2.5rem 0;
+}
+.tfms6aq {
+  color: var(--_1073cm83);
+  background: var(--_1073cm81);
+}
+.tfms6ar {
+  color: var(--_1073cm8a);
+  background: var(--_1073cm88);
+}
+.tfms6as {
+  color: var(--_1073cm8g);
+  background: var(--_1073cm8f);
+}
+.tfms6at {
+  color: var(--_1073cm8n);
+  background: var(--_1073cm8m);
+}
+.tfms6ap h1 {
+  font-size: 43px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  margin-top: 1.1rem;
+  margin-bottom: 0.7rem;
+  font-family: var(--header-font-family);
+}
+.tfms6ap p {
+  margin-bottom: 0;
+}
+.tfms6au {
+  margin: 0 auto;
+  display: block;
+}
+.tfms6av {
+  fill: none;
+  stroke: #faa74a;
+  stroke-width: 4;
+  stroke-dasharray: 100px;
+  stroke-dashoffset: 100;
+  animation: tfms6an 0.5s ease-in-out forwards reverse;
+  -webkit-animation-delay: 0.7s;
+}
+.tfms6aw {
+  fill: none;
+  stroke-width: 4;
+  stroke-dasharray: 1000px;
+  stroke-dashoffset: 1000;
+  -webkit-animation: tfms6ao 0.8s ease-in-out forwards;
+  animation: tfms6ao 0.8s ease-in-out forwards;
+  -webkit-transform-origin: center;
+  -ms-transform-origin: center;
+  transform-origin: center;
+  -webkit-transform: rotate(-40deg);
+  -ms-transform: rotate(-40deg);
+  transform: rotate(-40deg);
+}
+.tfms6ax {
+  stroke: var(--_1073cm83);
+}
+.tfms6ay {
+  stroke: var(--_1073cm8a);
+}
+.tfms6az {
+  stroke: var(--_1073cm8g);
+}
+.tfms6a10 {
+  stroke: var(--_1073cm8n);
+}
 @media screen and (max-width:1023px) {
   .tfms6a0 {
     padding-inline: 0;
@@ -97,4 +182,22 @@
   .tfms6ab {
     grid-template-columns: 1fr;
   }
+}
+@media screen and (max-width: 992px) {
+  .tfms6ap h1 {
+    font-size: 37px;
+    line-height: 1.29;
+    margin-bottom: 0.4rem;
+  }
+}
+@media screen and (maxwidth: 767px) {
+  .tfms6ap h1 {
+    font-size: 32px;
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: 0.4rem;
+  }
+  .tfms6au {
+    max-width: 69px;
+  }
 }

package/dist/main.js

@@ -16,10 +16,16 @@ import { DownloadTile } from "./DownloadTile/index.js";
 import { AccordionItem, AccordionItemContent, AccordionItemSummary, FaqAccordion } from "./FaqAccordion/index.js";
 import { footerDisclosure, footerLink, footerParagraph, iconsContent } from "./FooterDisclosure/FooterDisclosure.css.js";
 import { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph } from "./FooterDisclosure/FooterDisclosure.js";
-import { actions, disclosureForm, form, formContainer, formWrapper, headerForm, iconForm } from "./Forms/Forms.css.js";
+import { actions, disclosureForm, form, formContainer, formWrapper, headerForm, iconForm, succes_check_mark, success_circle, success_icon, success_wrap } from "./Forms/Forms.css.js";
 import { RenderWebForm, renderSwitch } from "./Forms/RenderForm.js";
 import { SalesforceFieldsForm, SalesforceSchema } from "./Forms/SalesforceFieldsForm.js";
 import { ScheduleCall } from "./Forms/ScheduleCall.js";
+import "react/jsx-runtime";
+import { associatedEmail } from "./utils/EverestValidity.js";
+import { findMoreAxosDomains, isAllowedUrl } from "./utils/allowedAxosDomains.js";
+import { getVariant, getVariantWithRegex } from "./utils/getVariant.js";
+import { isAbsoluteUrl, isEmailLink, isPhoneLink, shortUrl, validateLink } from "./utils/validateExternalLinks.js";
+import "clsx";
 import { HeroBanner } from "./HeroBanner/index.js";
 import { Hyperlink } from "./Hyperlink/index.js";
 import { IconBillboard } from "./IconBillboard/IconBillboard.js";
@@ -66,10 +72,6 @@ import { default as default19 } from "./icons/QuoteIconYellow.js";
 import { SvgWarningIcon } from "./icons/WarningIcon/index.js";
 import { axosTheme, vars } from "./themes/axos.css.js";
 import { premierTheme } from "./themes/premier.css.js";
-import { associatedEmail } from "./utils/EverestValidity.js";
-import { findMoreAxosDomains, isAllowedUrl } from "./utils/allowedAxosDomains.js";
-import { getVariant, getVariantWithRegex } from "./utils/getVariant.js";
-import { isAbsoluteUrl, isEmailLink, isPhoneLink, shortUrl, validateLink } from "./utils/validateExternalLinks.js";
 export {
   Accordion,
   AccordionCtx,
@@ -223,6 +225,10 @@ export {
   shortUrl,
   show,
   single_container,
+  succes_check_mark,
+  success_circle,
+  success_icon,
+  success_wrap,
   supertag,
   table,
   tableWrapper,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",