@axos-web-dev/shared-components 1.0.100-dev.5 → 1.0.100-dev.51

package/dist/Forms/ScheduleCall.js

@@ -20,18 +20,19 @@ 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";
-import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
 import "../utils/allowedAxosDomains.js";
+import * as z from "zod";
 import { associatedEmail } from "../utils/EverestValidity.js";
 import { getVariant } from "../utils/getVariant.js";
+import { useCachedEmailValidator } from "../utils/useCachedValidators.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
-import * as z from "zod";
-import { iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const ScheduleCall = ({
@@ -49,10 +50,11 @@ const ScheduleCall = ({
   id,
   description
 }) => {
+  const cachedEmailValidator = useCachedEmailValidator(validateEmail);
   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)),
+    email: z.string().email({ message: "Email is required." }).refine(cachedEmailValidator, { message: "Invalid email address." }),
     phone: z.string({ message: "Phone is required." }).regex(/[\d-]{10}/, "Invalid phone number.").min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
       const removeDashes = val.replace(/-/gi, "");
       if (removeDashes.length !== 10) {

package/dist/Forms/ScheduleCallPremier.js

@@ -21,18 +21,19 @@ 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";
-import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
 import "../utils/allowedAxosDomains.js";
+import * as z from "zod";
 import { associatedEmail } from "../utils/EverestValidity.js";
 import { getVariant } from "../utils/getVariant.js";
+import { useCachedEmailValidator } from "../utils/useCachedValidators.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
-import * as z from "zod";
-import { iconForm, headerContainer, headerForm, form, descriptionField, fullRowForm, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, fullRowForm, disclosureForm, actions } from "./Forms.css.js";
 import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const ScheduleCallPremier = ({
@@ -50,10 +51,11 @@ const ScheduleCallPremier = ({
   onValidate,
   id
 }) => {
+  const cachedEmailValidator = useCachedEmailValidator(validateEmail);
   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)),
+    email: z.string().email({ message: "Email is required." }).refine(cachedEmailValidator, { message: "Invalid email address." }),
     phone: z.string({ message: "Phone is required." }).regex(/[\d-]{10}/, "Invalid phone number.").min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
       const removeDashes = val.replace(/-/gi, "");
       if (removeDashes.length !== 10) {

package/dist/Forms/SuccesForm.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
+import "react";
 import clsx from "clsx";
 import "@hookform/resolvers/zod";
 import "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Modal/Modal.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -16,7 +17,6 @@ import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-import "react";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../Calculators/calculator.css.js";
@@ -55,8 +55,16 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
 import "../Carousel/index.js";
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/authenticate.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+import "react-use";
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -76,13 +84,11 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                            */
 import "../ImageBillboard/ImageBillboard.css.js";
 import "next/script.js";
-import "react-use";
 /* empty css                                        */
 /* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 /* empty css                                                      */
@@ -114,7 +120,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                */
 /* empty css                                              */
 import "../Interstitial/Interstitial-variants.css.js";
-import { success_icon, success_circle, succes_check_mark, success_wrap } from "./Forms.css.js";
+import { success_wrap, success_icon, success_circle, succes_check_mark } from "./Forms.css.js";
 import "./HoneyPot/index.js";
 import "./SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";

package/dist/Forms/VendorQuestionnaire.js

@@ -17,11 +17,12 @@ import { InputTextArea } from "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
 import "../utils/allowedAxosDomains.js";
+import { z } from "zod";
 import { getVariant } from "../utils/getVariant.js";
+import { useCachedEmailValidator } from "../utils/useCachedValidators.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
-import { z } from "zod";
-import { form, form_row, descriptionField, formWrapper, actions, formContainer } from "./Forms.css.js";
+import { formContainer, form, formWrapper, form_row, descriptionField, actions } from "./Forms.css.js";
 import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
 const VendorQuestionnaire = ({
   children,
@@ -34,6 +35,7 @@ const VendorQuestionnaire = ({
   callToAction,
   id
 }) => {
+  const cachedEmailValidator = useCachedEmailValidator(validateEmail);
   const schema = z.object({
     "name/0-2": z.string().min(1, { message: "Please complete this required field." }),
     "dba/0-2": z.string(),
@@ -87,7 +89,9 @@ const VendorQuestionnaire = ({
     "firstname/0-1": z.string().regex(/^[a-zA-Z]*(?:[a-zA-Z][a-zA-Z'-]*\s{0,1}){2,}$/g).min(1, { message: "Please complete this required field." }),
     "lastname/0-1": z.string().regex(/^[a-zA-Z]*(?:[a-zA-Z][a-zA-Z'-]*\s{0,1}){2,}$/g).min(1, { message: "Please complete this required field." }),
     "jobtitle/0-1": z.string().min(1, { message: "Please complete this required field." }),
-    "email/0-1": z.string().email({ message: "Please complete this required field." }).refine(async (val) => await validateEmail(val))
+    "email/0-1": z.string().email({ message: "Please complete this required field." }).refine(cachedEmailValidator, {
+      message: "Invalid email address."
+    })
   });
   const gen_schema = schema.merge(honeyPotSchema).superRefine((data, ctx) => {
     if (!isValidHoneyPot(data)) {

package/dist/Forms/WcplSurvey.js

@@ -21,7 +21,7 @@ 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";
-import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -30,7 +30,7 @@ import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
-import { iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const WCPLSurvey = ({

package/dist/Forms/index.d.ts

@@ -3,6 +3,7 @@ export * from './ApplyNow';
 export * from './applynow-utils';
 export * from './ClearingForm';
 export * from './CommercialDeposits';
+export * from './CommercialDepositsNoLendingOption';
 export * from './CommercialLending';
 export * from './CommercialPremiumFinance';
 export * from './ContactCompany';

package/dist/Forms/index.js

@@ -4,6 +4,7 @@ import { ApplyNow } from "./ApplyNow.js";
 import { getLink } from "./applynow-utils.js";
 import { ClearingForm } from "./ClearingForm.js";
 import { CommercialDeposits } from "./CommercialDeposits.js";
+import { CommercialDepositsNoLendingOption } from "./CommercialDepositsNoLendingOption.js";
 import { CommercialLending } from "./CommercialLending.js";
 import { CommercialPremiumFinance } from "./CommercialPremiumFinance.js";
 import { ContactCompany } from "./ContactCompany.js";
@@ -19,12 +20,13 @@ import { CraPublicFile } from "./CraPublicFile.js";
 import { DealerServices } from "./DealerServices.js";
 import { EmailOnly } from "./EmailOnly.js";
 import { EmailUs } from "./EmailUs.js";
-import { actions, apply_now_form, axosHeader, back_btn_apply_now, centerSelect, checkbox_group, descriptionField, disclosureForm, dropdown, dynPH, form, formBtns, formContainer, formWrapper, form_nav_apply_now, form_row, fullRowForm, fullRowSelect, headerContainer, headerF, headerForm, hide_options, iconForm, iconbillboards_option_apply_now, modalCheckboxContainer, modalMobile, mt1Rem, mt2rem, mw24, na_cursor, one_row, pl_label, resposiveLabel, ro_input, section_title, show_options, step_title_apply_now, succes_check_mark, success_circle, success_icon, success_wrap, threeColRow, x_input, xc_input } from "./Forms.css.js";
+import { actions, apply_now_form, axosHeader, back_btn_apply_now, centerSelect, checkbox_group, descriptionField, disclosureForm, dropdown, dynPH, email_only_btn, email_only_h2, email_only_padding, form, formBtns, formContainer, formWrapper, form_nav_apply_now, form_row, fullRowForm, fullRowSelect, headerContainer, headerF, headerForm, hide_options, iconForm, iconbillboards_option_apply_now, modalCheckboxContainer, modalMobile, mt1Rem, mt2rem, mw24, na_cursor, one_row, pl_label, resposiveLabel, ro_input, section_title, show_options, step_title_apply_now, succes_check_mark, success_circle, success_icon, success_wrap, threeColRow, x_input, xc_input } from "./Forms.css.js";
 import { HoneyPot, honeyPotSchema, isValidHoneyPot } from "./HoneyPot/index.js";
 import { MortgageRate } from "./MortgageRate/MortgageRateForm.js";
 import "react/jsx-runtime";
 import { RateWatchForm } from "./MortgageRate/MortgageRateWatch.js";
 import "../utils/allowedAxosDomains.js";
+import "react";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Interstitial/Interstitial-variants.css.js";
 import { MortgageRateFilters } from "./MortgageRate/MortgageRateQuoteFilters.js";
@@ -44,6 +46,7 @@ export {
   ApplyNow,
   ClearingForm,
   CommercialDeposits,
+  CommercialDepositsNoLendingOption,
   CommercialLending,
   CommercialPremiumFinance,
   ContactCompany,
@@ -83,6 +86,9 @@ export {
   disclosureForm,
   dropdown,
   dynPH,
+  email_only_btn,
+  email_only_h2,
+  email_only_padding,
   form,
   formBtns,
   formContainer,

package/dist/HelpArticle/HelpArticle.css.js

@@ -1,4 +1,4 @@
-import '../assets/HelpArticle/HelpArticle.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                                          */
 /* empty css                               */
 var helpArticle_headline = "_1yo1bp90";
 var insight_headline_2 = "_1yo1bp91";

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

@@ -2,21 +2,21 @@ export declare const logout: string;
 export declare const hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            borderBottom: "1px solid #d4d4d4";
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: "1px solid #B9C1CE";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -30,44 +30,32 @@ export declare const img_contents: string;
 export declare const heroSupertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/HeroBanner/HeroBanner.css.js

@@ -1,8 +1,9 @@
-import '../assets/HeroBanner/HeroBanner.css';import '../assets/HeroBanner/SelectionBanner.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                   */
+/* empty css                                    */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var logout = "_1ye8k3f0";

package/dist/HeroBanner/HeroBanner.js

@@ -7,7 +7,7 @@ import { Chevron } from "../Chevron/index.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCheckIcon from "../icons/CheckIcon/index.js";
-import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -17,7 +17,7 @@ import Image from "next/image.js";
 import clsx from "clsx";
 import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_bullet_item, hero_sub_bullets, hero_btns, hero_img, img_contents, reversed_lg_image } from "./HeroBanner.css.js";
 import { lg_hero_banner, lg_hero_content, lg_hero_text, lg_hero_eyebrow, lg_headline_text, lg_hero_img, lg_hero_sizing } from "./LargeBanner.css.js";
-import { selection_section_icon_img, selection_section_icon, selection_section, selection_section_bg, selection_section_content, selection_headline_text } from "./SelectionBanner.css.js";
+import { selection_section_icon, selection_section_icon_img, selection_section, selection_section_bg, selection_section_content, selection_headline_text } from "./SelectionBanner.css.js";
 const HeroBanner = ({
   id,
   eyebrow,
@@ -112,7 +112,8 @@ const HeroBanner = ({
                   displayText,
                   targetUrl,
                   type,
-                  icon
+                  icon,
+                  newTab
                 }) => type === "Button" ? /* @__PURE__ */ jsxs(
                   Button,
                   {
@@ -121,6 +122,7 @@ const HeroBanner = ({
                     size: "large",
                     rounded: "medium",
                     square: icon !== void 0,
+                    newTab,
                     children: [
                       typeof icon !== "undefined" ? /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
                         "span",
@@ -146,6 +148,7 @@ const HeroBanner = ({
                     targetUrl,
                     variant: getVariant(variant2),
                     goBack: bannerType === "Logout",
+                    newTab,
                     children: displayText
                   },
                   id2
@@ -183,18 +186,7 @@ const HeroBanner = ({
               /* @__PURE__ */ jsx("div", { className: selection_section_bg }),
               /* @__PURE__ */ jsxs("div", { className: selection_section_content, children: [
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "h3",
-                    {
-                      className: clsx(
-                        "header_2",
-                        selection_headline_text({
-                          variant: getVariant(variant)
-                        })
-                      ),
-                      children: selection?.headline
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("h3", { className: clsx("header_2", selection_headline_text), children: selection?.headline }),
                   /* @__PURE__ */ jsx("div", { children: selection?.bodyCopy })
                 ] }),
                 selection?.callToActionRow && selection?.callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: selection?.callToActionRow.map(
@@ -203,7 +195,8 @@ const HeroBanner = ({
                     icon,
                     displayText,
                     targetUrl,
-                    type
+                    type,
+                    newTab
                   }) => type === "Button" ? /* @__PURE__ */ jsxs(
                     Button,
                     {
@@ -212,6 +205,7 @@ const HeroBanner = ({
                       size: "large",
                       rounded: "medium",
                       square: true,
+                      newTab,
                       children: [
                         typeof icon !== "undefined" ? /* @__PURE__ */ jsx("div", { className: selection_section_icon, children: /* @__PURE__ */ jsx(
                           "span",
@@ -239,6 +233,7 @@ const HeroBanner = ({
                       rounded: "medium",
                       size: "large",
                       square: true,
+                      newTab,
                       children: [
                         typeof icon !== "undefined" ? /* @__PURE__ */ jsx(
                           "div",
@@ -325,7 +320,7 @@ const HeroBanner = ({
                             /* @__PURE__ */ jsx("div", { className: "img_item", children: getVariant(variant) ? /* @__PURE__ */ jsx(
                               SvgCheckIcon,
                               {
-                                variant: getVariant(variant) === "primary" || getVariant(variant) === "secondary" ? "primary" : "secondary"
+                                variant: getVariant(variant) === "primary" || getVariant(variant) === "secondary" ? "secondary" : "primary"
                               }
                             ) : /* @__PURE__ */ jsx("img", { src: icon?.src, alt: icon?.altText }) }),
                             /* @__PURE__ */ jsx("span", { children: copy })
@@ -362,7 +357,8 @@ const HeroBanner = ({
                       variant: variant2,
                       displayText,
                       targetUrl,
-                      type
+                      type,
+                      newTab
                     }) => type === "Button" ? /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -370,6 +366,7 @@ const HeroBanner = ({
                         color: getVariant(variant2),
                         size: "large",
                         rounded: "medium",
+                        newTab,
                         children: displayText
                       },
                       id2
@@ -378,6 +375,7 @@ const HeroBanner = ({
                       {
                         targetUrl,
                         variant: getVariant(variant2),
+                        newTab,
                         children: displayText
                       },
                       id2

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

@@ -1,16 +1,16 @@
 export declare const lg_hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -18,52 +18,52 @@ export declare const lg_hero_content: string;
 export declare const lg_hero_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const lg_hero_eyebrow: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const lg_headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/HeroBanner/LargeBanner.css.js

@@ -1,4 +1,4 @@
-import '../assets/HeroBanner/LargeBanner.css';import '../assets/Typography/Typography.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                          */

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

@@ -1,22 +1,4 @@
-export declare const selection_headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
-    variant: {
-        primary: {
-            color: `var(--${string})`;
-        };
-        secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
-        };
-        tertiary: {
-            color: `var(--${string})`;
-        };
-        quaternary: {
-            color: `var(--${string})`;
-        };
-    };
-}>;
+export declare const selection_headline_text: string;
 export declare const selection_section: string;
 export declare const selection_section_bg: string;
 export declare const selection_section_content: string;
@@ -24,16 +6,16 @@ export declare const selection_section_icon: string;
 export declare const selection_section_icon_img: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            backgroundColor: `var(--${string})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            backgroundColor: `var(--${string})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            backgroundColor: `var(--${string})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            backgroundColor: `var(--${string})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;