@axos-web-dev/shared-components 1.0.77-patch.61 → 1.0.77-patch.63

package/dist/Forms/ConstructionLendingDynamic.js

@@ -0,0 +1,327 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import { useEffect } from "react";
+import "react-use";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import { Dropdown } from "../Input/Dropdown.js";
+import "../Input/Dropdown.css.js";
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import { InputPhone } from "../Input/InputPhone.js";
+import { InputTextArea } from "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
+import "../Input/RadioButton.js";
+import { LoadingIndicator } from "../LoadingIndicator/index.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";
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.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 { iconForm, headerContainer, headerForm, form, descriptionField, fullRowForm, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const HOMEOWNER_VALUE = "I am a homeowner.";
+const BROKER_VALUE = "I am a broker.";
+const USER_TYPE_PARAM = "user_type";
+function getInitialUserTypeFromQuery() {
+  if (typeof window === "undefined") return "";
+  const params = new URLSearchParams(window.location.search);
+  const value = params.get(USER_TYPE_PARAM)?.toLowerCase();
+  if (value === "homeowner") return HOMEOWNER_VALUE;
+  if (value === "broker") return BROKER_VALUE;
+  return "";
+}
+const ConstructionLendingDynamic = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  callToAction,
+  validateEmail,
+  onValidate,
+  description,
+  id
+}) => {
+  const cachedEmailValidator = useCachedEmailValidator(validateEmail);
+  const schema = z.object({
+    User_Type__c: z.string({
+      required_error: "Please select whether you are a homeowner or a broker.",
+      invalid_type_error: "Invalid selection"
+    }).min(1, {
+      message: "Please select whether you are a homeowner or a broker."
+    }),
+    first_name: z.string({
+      required_error: "First name is required",
+      invalid_type_error: "Invalid first name"
+    }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Invalid first name"
+    }).trim().min(1, { message: "First Name is required." }),
+    last_name: z.string({
+      required_error: "Last name is required",
+      invalid_type_error: "Invalid last name"
+    }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Invalid last name"
+    }).trim().min(1, { message: "Last Name is required." }),
+    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) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Phone must have at least 10 and no more than 10 characters."
+        });
+        return z.NEVER;
+      }
+      if (removeDashes.endsWith("00000") || removeDashes.startsWith("999") || removeDashes.length === 10 && /^[01]/.test(removeDashes)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid phone number."
+        });
+        return z.NEVER;
+      }
+      return removeDashes;
+    }),
+    description: z.string().trim().optional().or(z.literal("")),
+    Company_NMLS_ID__c: z.string().min(6).max(7).optional().or(z.literal(""))
+  });
+  const gen_schema = schema.merge(SalesforceSchema).merge(honeyPotSchema).superRefine((data, ctx) => {
+    if (!isValidHoneyPot(data)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "fields are not valid."
+      });
+    }
+    if (data.User_Type__c === BROKER_VALUE) {
+      const nmls = data.Company_NMLS_ID__c ?? "";
+      if (!nmls || nmls.length < 6 || nmls.length > 7) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "NMLS ID is required for brokers and must be 6-7 characters.",
+          path: ["Company_NMLS_ID__c"]
+        });
+      }
+    }
+  });
+  const methods = useForm({
+    resolver: zodResolver(gen_schema, {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {
+      User_Type__c: "",
+      email: ""
+    },
+    shouldUnregister: true
+  });
+  const {
+    handleSubmit,
+    register,
+    watch,
+    setValue,
+    formState: { errors, isValid, isSubmitting }
+  } = methods;
+  useEffect(() => {
+    const initialUserType = getInitialUserTypeFromQuery();
+    if (initialUserType) {
+      setValue("User_Type__c", initialUserType, { shouldValidate: true });
+    }
+  }, [setValue]);
+  useEffect(() => {
+    const syncUserTypeFromUrl = () => {
+      const userType2 = getInitialUserTypeFromQuery();
+      if (userType2) {
+        setValue("User_Type__c", userType2, { shouldValidate: true });
+      }
+    };
+    window.addEventListener("popstate", syncUserTypeFromUrl);
+    return () => window.removeEventListener("popstate", syncUserTypeFromUrl);
+  }, [setValue]);
+  const userType = watch("User_Type__c");
+  const isBroker = userType === BROKER_VALUE;
+  const isExpanded = userType === HOMEOWNER_VALUE || userType === BROKER_VALUE;
+  const submitForm = async (data) => {
+    await onSubmit(data);
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx("section", { 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: clsx(
+            "text_center",
+            form,
+            descriptionField({ variant })
+          ),
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: form,
+        onSubmit: async (e) => {
+          onValidate && onValidate(e);
+          await handleSubmit(submitForm)(e);
+          e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+            /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "User_Type__c",
+                ...register("User_Type__c", { required: true }),
+                label: "Are you a homeowner or a broker?",
+                sizes: "medium",
+                required: true,
+                error: !!errors.User_Type__c,
+                helperText: errors.User_Type__c?.message,
+                variant,
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: isExpanded, children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: HOMEOWNER_VALUE, children: HOMEOWNER_VALUE }),
+                  /* @__PURE__ */ jsx("option", { value: BROKER_VALUE, children: BROKER_VALUE })
+                ]
+              }
+            ) }),
+            isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "first_name",
+                  ...register("first_name", { required: true }),
+                  label: "First Name",
+                  sizes: "medium",
+                  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",
+                  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",
+                  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",
+                  required: true,
+                  error: !!errors.phone,
+                  helperText: errors.phone?.message,
+                  variant
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+                InputTextArea,
+                {
+                  id: "description",
+                  ...register("description"),
+                  label: "Message",
+                  sizes: "medium",
+                  error: !!errors.description,
+                  helperText: errors.description?.message,
+                  variant,
+                  rows: 2
+                }
+              ) }),
+              isBroker && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "Company_NMLS_ID__c",
+                  ...register("Company_NMLS_ID__c"),
+                  label: "Company NMLS ID",
+                  sizes: "medium",
+                  required: true,
+                  error: !!errors.Company_NMLS_ID__c,
+                  helperText: errors.Company_NMLS_ID__c?.message,
+                  variant
+                }
+              ) }),
+              /* @__PURE__ */ jsx(HoneyPot, { register, variant })
+            ] })
+          ] }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__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: !isExpanded || !isValid || isSubmitting,
+              children: callToAction?.displayText
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) }) }, id);
+};
+export {
+  ConstructionLendingDynamic
+};

package/dist/Forms/EmailUs.js

@@ -100,7 +100,7 @@ const EmailUs = ({
           e.preventDefault();
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant, formType: "email" })), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant, formType: "emailUs" })), children: [
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               Input,
               {

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

@@ -76,6 +76,9 @@ export declare const formWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
             gap: number;
             gridTemplateColumns: "1fr auto !important";
         };
+        emailUs: {
+            gridTemplateColumns: "1fr !important";
+        };
         questionnaire: {
             display: "flex";
             flexDirection: "column";

package/dist/Forms/Forms.css.js

@@ -17,45 +17,45 @@ var headerContainer = "tfms6a8";
 var axosHeader = "tfms6a9";
 var headerF = createRuntimeFn({ defaultClassName: "tfms6aa", variantClassNames: { variant: { primary: "tfms6ab", secondary: "tfms6ac", tertiary: "tfms6ad", quaternary: "tfms6ae" } }, defaultVariants: {}, compoundVariants: [] });
 var headerForm = createRuntimeFn({ defaultClassName: "tfms6af", variantClassNames: { variant: { primary: "tfms6ag", secondary: "tfms6ah", tertiary: "tfms6ai", quaternary: "tfms6aj" } }, defaultVariants: {}, compoundVariants: [] });
-var formWrapper = createRuntimeFn({ defaultClassName: "tfms6ak", variantClassNames: { variant: { primary: "tfms6al", secondary: "tfms6am", tertiary: "tfms6an", quaternary: "tfms6ao" }, formType: { email: "tfms6ap", questionnaire: "tfms6aq", "default": "tfms6ar" } }, defaultVariants: {}, compoundVariants: [] });
-var form_row = "tfms6as";
-var actions = "tfms6at";
-var disclosureForm = createRuntimeFn({ defaultClassName: "tfms6au", variantClassNames: { variant: { primary: "tfms6av", secondary: "tfms6aw", tertiary: "tfms6ax", quaternary: "tfms6ay" } }, defaultVariants: {}, compoundVariants: [] });
-var form = "tfms6az";
-var apply_now_form = "tfms6a10";
-var success_wrap = createRuntimeFn({ defaultClassName: "tfms6a13", variantClassNames: { variant: { primary: "tfms6a14", secondary: "tfms6a15", tertiary: "tfms6a16", quaternary: "tfms6a17" } }, defaultVariants: {}, compoundVariants: [] });
-var success_icon = "tfms6a18";
-var succes_check_mark = "tfms6a19";
-var success_circle = createRuntimeFn({ defaultClassName: "tfms6a1a", variantClassNames: { variant: { primary: "tfms6a1b", secondary: "tfms6a1c", tertiary: "tfms6a1d", quaternary: "tfms6a1e" } }, defaultVariants: {}, compoundVariants: [] });
-var descriptionField = createRuntimeFn({ defaultClassName: "tfms6a1f", variantClassNames: { variant: { primary: "tfms6a1g", secondary: "tfms6a1h", tertiary: "tfms6a1i", quaternary: "tfms6a1j" }, formType: { questionnaire: "tfms6a1k" } }, defaultVariants: {}, compoundVariants: [] });
-var fullRowForm = "tfms6a1l";
-var one_row = "tfms6a1m";
-var section_title = createRuntimeFn({ defaultClassName: "tfms6a1n", variantClassNames: { variant: { primary: "tfms6a1o", secondary: "tfms6a1p", tertiary: "tfms6a1q", quaternary: "tfms6a1r" } }, defaultVariants: {}, compoundVariants: [] });
-var checkbox_group = "tfms6a1s";
-var ro_input = "tfms6a1t";
-var pl_label = "tfms6a1u";
-var x_input = "tfms6a1v";
-var xc_input = "tfms6a1w";
-var fullRowSelect = "tfms6a1x";
-var mt2rem = "tfms6a1y";
-var centerSelect = "tfms6a1z";
-var formBtns = "tfms6a20";
-var modalCheckboxContainer = "tfms6a21";
-var threeColRow = "tfms6a22";
-var mt1Rem = "tfms6a23";
-var mw24 = "tfms6a24";
-var modalMobile = "tfms6a25";
-var resposiveLabel = "tfms6a26";
-var dropdown = "tfms6a27";
-var dynPH = "tfms6a28";
-var na_cursor = "tfms6a29";
-var show_options = "tfms6a2a";
-var hide_options = "tfms6a2b";
-var back_btn_apply_now = "tfms6a2c";
-var iconbillboards_option_apply_now = "tfms6a2d";
-var form_nav_apply_now = "tfms6a2e";
-var step_title_apply_now = "tfms6a2f";
-var email_only_btn = "tfms6a2g";
+var formWrapper = createRuntimeFn({ defaultClassName: "tfms6ak", variantClassNames: { variant: { primary: "tfms6al", secondary: "tfms6am", tertiary: "tfms6an", quaternary: "tfms6ao" }, formType: { email: "tfms6ap", emailUs: "tfms6aq", questionnaire: "tfms6ar", "default": "tfms6as" } }, defaultVariants: {}, compoundVariants: [] });
+var form_row = "tfms6at";
+var actions = "tfms6au";
+var disclosureForm = createRuntimeFn({ defaultClassName: "tfms6av", variantClassNames: { variant: { primary: "tfms6aw", secondary: "tfms6ax", tertiary: "tfms6ay", quaternary: "tfms6az" } }, defaultVariants: {}, compoundVariants: [] });
+var form = "tfms6a10";
+var apply_now_form = "tfms6a11";
+var success_wrap = createRuntimeFn({ defaultClassName: "tfms6a14", variantClassNames: { variant: { primary: "tfms6a15", secondary: "tfms6a16", tertiary: "tfms6a17", quaternary: "tfms6a18" } }, defaultVariants: {}, compoundVariants: [] });
+var success_icon = "tfms6a19";
+var succes_check_mark = "tfms6a1a";
+var success_circle = createRuntimeFn({ defaultClassName: "tfms6a1b", variantClassNames: { variant: { primary: "tfms6a1c", secondary: "tfms6a1d", tertiary: "tfms6a1e", quaternary: "tfms6a1f" } }, defaultVariants: {}, compoundVariants: [] });
+var descriptionField = createRuntimeFn({ defaultClassName: "tfms6a1g", variantClassNames: { variant: { primary: "tfms6a1h", secondary: "tfms6a1i", tertiary: "tfms6a1j", quaternary: "tfms6a1k" }, formType: { questionnaire: "tfms6a1l" } }, defaultVariants: {}, compoundVariants: [] });
+var fullRowForm = "tfms6a1m";
+var one_row = "tfms6a1n";
+var section_title = createRuntimeFn({ defaultClassName: "tfms6a1o", variantClassNames: { variant: { primary: "tfms6a1p", secondary: "tfms6a1q", tertiary: "tfms6a1r", quaternary: "tfms6a1s" } }, defaultVariants: {}, compoundVariants: [] });
+var checkbox_group = "tfms6a1t";
+var ro_input = "tfms6a1u";
+var pl_label = "tfms6a1v";
+var x_input = "tfms6a1w";
+var xc_input = "tfms6a1x";
+var fullRowSelect = "tfms6a1y";
+var mt2rem = "tfms6a1z";
+var centerSelect = "tfms6a20";
+var formBtns = "tfms6a21";
+var modalCheckboxContainer = "tfms6a22";
+var threeColRow = "tfms6a23";
+var mt1Rem = "tfms6a24";
+var mw24 = "tfms6a25";
+var modalMobile = "tfms6a26";
+var resposiveLabel = "tfms6a27";
+var dropdown = "tfms6a28";
+var dynPH = "tfms6a29";
+var na_cursor = "tfms6a2a";
+var show_options = "tfms6a2b";
+var hide_options = "tfms6a2c";
+var back_btn_apply_now = "tfms6a2d";
+var iconbillboards_option_apply_now = "tfms6a2e";
+var form_nav_apply_now = "tfms6a2f";
+var step_title_apply_now = "tfms6a2g";
+var email_only_btn = "tfms6a2h";
 export {
   actions,
   apply_now_form,

package/dist/Forms/index.d.ts

@@ -6,6 +6,7 @@ export * from './CommercialDeposits';
 export * from './CommercialDepositsNoLendingOption';
 export * from './CommercialLending';
 export * from './CommercialPremiumFinance';
+export * from './ConstructionLendingDynamic';
 export * from './ContactCompany';
 export * from './ContactCompanyTitle';
 export * from './ContactUs';
@@ -34,3 +35,4 @@ export * from './ScheduleCallPremier';
 export * from './SuccesForm';
 export * from './VendorQuestionnaire';
 export * from './WcplSurvey';
+export * from './BoatMooringLocation';

package/dist/Forms/index.js

@@ -7,6 +7,7 @@ import { CommercialDeposits } from "./CommercialDeposits.js";
 import { CommercialDepositsNoLendingOption } from "./CommercialDepositsNoLendingOption.js";
 import { CommercialLending } from "./CommercialLending.js";
 import { CommercialPremiumFinance } from "./CommercialPremiumFinance.js";
+import { ConstructionLendingDynamic } from "./ConstructionLendingDynamic.js";
 import { ContactCompany } from "./ContactCompany.js";
 import { ContactCompanyTitle } from "./ContactCompanyTitle.js";
 import { ContactUs } from "./ContactUs.js";
@@ -41,14 +42,17 @@ import { ScheduleCallPremier } from "./ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./SuccesForm.js";
 import { VendorQuestionnaire } from "./VendorQuestionnaire.js";
 import { WCPLSurvey } from "./WcplSurvey.js";
+import { BoatMooringLocation } from "./BoatMooringLocation.js";
 export {
   ApplicationStart,
   ApplyNow,
+  BoatMooringLocation,
   ClearingForm,
   CommercialDeposits,
   CommercialDepositsNoLendingOption,
   CommercialLending,
   CommercialPremiumFinance,
+  ConstructionLendingDynamic,
   ContactCompany,
   ContactCompanyTitle,
   ContactUs,

package/dist/Hyperlink/index.js

@@ -17,7 +17,7 @@ import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
-import { validateLink } from "../utils/validateExternalLinks.js";
+import { isPhoneLink, isEmailLink, validateLink } from "../utils/validateExternalLinks.js";
 /* empty css                                          */
 /* empty css                                          */
 import "../Interstitial/Interstitial-variants.css.js";
@@ -144,6 +144,7 @@ const Hyperlink = ({
 }) => {
   const hyperlink_variant = variant.toLowerCase();
   const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const isTelOrMailto = targetUrl && (isPhoneLink(targetUrl) || isEmailLink(targetUrl));
   const onClick = (e) => {
     if (targetUrl) {
       const external_link = validateLink(targetUrl);
@@ -167,7 +168,7 @@ const Hyperlink = ({
       ),
       onClick,
       "aria-label": ariaLabel,
-      target: newTab ? "_blank" : "_self",
+      target: newTab && !isTelOrMailto ? "_blank" : "_self",
       ...noFollow && { rel: "nofollow" },
       children
     }

package/dist/LandingPageHeader/LandingPageHeader.css.d.ts

@@ -9,10 +9,28 @@ export declare const lp_theme: import('@vanilla-extract/recipes').RuntimeFn<{
         tertiary: {
             background: `var(--${string})`;
         };
+        quaternary: {
+            background: `var(--${string})`;
+        };
     };
 }>;
 export declare const lp_container: string;
 export declare const spb_container: string;
 export declare const lp_hover: string;
 export declare const spb_hover: string;
-export declare const svg_fill: string;
+export declare const svg_fill: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            fill: `var(--${string})`;
+        };
+        secondary: {
+            fill: `var(--${string})`;
+        };
+        tertiary: {
+            fill: `var(--${string})`;
+        };
+        quaternary: {
+            fill: `var(--${string})`;
+        };
+    };
+}>;

package/dist/LandingPageHeader/LandingPageHeader.css.js

@@ -4,12 +4,12 @@ import '../assets/LandingPageHeader/LandingPageHeader.css';import '../assets/the
 /* empty css                                    */
 /* empty css                                     */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var lp_theme = createRuntimeFn({ defaultClassName: "_1o1hxre0", variantClassNames: { variant: { primary: "_1o1hxre1", secondary: "_1o1hxre2", tertiary: "_1o1hxre3" } }, defaultVariants: {}, compoundVariants: [] });
-var lp_container = "_1o1hxre4";
-var spb_container = "_1o1hxre5";
-var lp_hover = "_1o1hxre6";
-var spb_hover = "_1o1hxre7";
-var svg_fill = "_1o1hxre8";
+var lp_theme = createRuntimeFn({ defaultClassName: "_1o1hxre0", variantClassNames: { variant: { primary: "_1o1hxre1", secondary: "_1o1hxre2", tertiary: "_1o1hxre3", quaternary: "_1o1hxre4" } }, defaultVariants: {}, compoundVariants: [] });
+var lp_container = "_1o1hxre5";
+var spb_container = "_1o1hxre6";
+var lp_hover = "_1o1hxre7";
+var spb_hover = "_1o1hxre8";
+var svg_fill = createRuntimeFn({ defaultClassName: "_1o1hxre9", variantClassNames: { variant: { primary: "_1o1hxrea", secondary: "_1o1hxreb", tertiary: "_1o1hxrec", quaternary: "_1o1hxred" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   lp_container,
   lp_hover,

package/dist/LandingPageHeader/LandingPageHeader.d.ts

@@ -1,9 +1,11 @@
 import { QuaternaryTypes } from '../utils/variant.types';
+import { ImageInterface } from '../main';
 
 export interface LandingPageHeaderProps {
     id: string;
     variant: QuaternaryTypes;
     project?: string;
     alt?: string;
+    logo?: ImageInterface;
 }
-export declare const LandingPageHeader: ({ id, variant: fullVariant, project, alt, }: LandingPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LandingPageHeader: ({ id, variant: fullVariant, project, alt, logo, }: LandingPageHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/LandingPageHeader/LandingPageHeader.js

@@ -13,28 +13,45 @@ import SvgComponent from "../icons/Logos/AXA.js";
 import SvgComponent$2 from "../icons/Logos/AXC.js";
 import SvgComponent$4 from "../icons/Logos/AXI.js";
 import SvgComponent$5 from "../icons/Logos/AXOS.js";
-import SvgComponent$7 from "../icons/Logos/GBLVF.js";
-import SvgComponent$6 from "../icons/Logos/LVF.js";
-import SvgComponent$8 from "../icons/Logos/SPB.js";
+import SvgComponent$6 from "../icons/Logos/GBLVF.js";
+import SvgComponent$7 from "../icons/Logos/SPB.js";
 import { getVariant } from "../utils/getVariant.js";
-import { lp_theme, spb_container, lp_container, spb_hover, lp_hover, svg_fill } from "./LandingPageHeader.css.js";
+import { svg_fill, lp_theme, spb_container, lp_container, spb_hover, lp_hover } from "./LandingPageHeader.css.js";
 const LandingPageHeader = ({
   id,
   variant: fullVariant = "primary",
   project = "AXB",
-  alt
+  alt,
+  logo
 }) => {
   const variant = getVariant(fullVariant);
   const website = /* @__PURE__ */ new Map([
-    ["AXA", /* @__PURE__ */ jsx(SvgComponent, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AFS", /* @__PURE__ */ jsx(SvgComponent$1, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AXC", /* @__PURE__ */ jsx(SvgComponent$2, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AAS", /* @__PURE__ */ jsx(SvgComponent$3, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AXI", /* @__PURE__ */ jsx(SvgComponent$4, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AXB", /* @__PURE__ */ jsx(SvgComponent$5, { height: 30, width: 120, classNameFill: svg_fill })],
-    ["LVF", /* @__PURE__ */ jsx(SvgComponent$6, { height: 30, width: 120, classNameFill: `${svg_fill}` })],
-    ["GBLVF", /* @__PURE__ */ jsx(SvgComponent$7, { height: 60, width: 220 })],
-    ["SPB", /* @__PURE__ */ jsx(SvgComponent$8, { height: "100%", width: "100%" })]
+    [
+      "AXA",
+      /* @__PURE__ */ jsx(SvgComponent, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AFS",
+      /* @__PURE__ */ jsx(SvgComponent$1, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AXC",
+      /* @__PURE__ */ jsx(SvgComponent$2, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AAS",
+      /* @__PURE__ */ jsx(SvgComponent$3, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AXI",
+      /* @__PURE__ */ jsx(SvgComponent$4, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AXB",
+      /* @__PURE__ */ jsx(SvgComponent$5, { height: 30, width: 120, classNameFill: svg_fill({ variant }) })
+    ],
+    ["GBLVF", /* @__PURE__ */ jsx(SvgComponent$6, { height: 60, width: 220 })],
+    ["SPB", /* @__PURE__ */ jsx(SvgComponent$7, { height: "100%", width: "100%" })]
   ]);
   const isSPBPage = project === "SPB";
   return /* @__PURE__ */ jsx("header", { className: `${lp_theme({ variant })}`, id: `id_${id}`, children: /* @__PURE__ */ jsx(
@@ -46,8 +63,17 @@ const LandingPageHeader = ({
         {
           href: project == "AXI" ? "/invest" : "/",
           className: isSPBPage ? spb_hover : lp_hover,
-          "aria-label": alt ?? "axos logo, return to homepage",
-          children: website.get(project)
+          "aria-label": alt ?? "return to homepage",
+          children: logo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: logo.src,
+              alt: logo.alt ?? "",
+              height: Number(logo.height),
+              width: Number(logo.width),
+              className: "img_fluid"
+            }
+          ) : website.get(project)
         }
       )
     }