@axos-web-dev/shared-components 0.0.137 → 0.0.138

package/dist/Forms/BlendPurchase.d.ts

@@ -0,0 +1,11 @@
+import { FormProps } from './FormProps';
+
+export type BlendPurchaseInputs = {
+    property_Type: string;
+    Occupancy: string;
+    SalesPrice: string;
+    DownPayment: string;
+    CreditScore: string;
+    ZipCode: string;
+};
+export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/BlendPurchase.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                          */
+/* empty css                                   */
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import { InputPhone } from "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+/* empty css                                                */
+import { associatedEmail } from "../utils/EverestValidity.js";
+import "../utils/allowedAxosDomains.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const BlendPurchase = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  callToAction,
+  validateEmail,
+  id
+}) => {
+  const schema = z.object({
+    property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
+    Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
+    SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    DownPayment: 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;
+    }),
+    CreditScore: z.string(),
+    ZipCode: z.string()
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {}
+  });
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid, isSubmitting }
+  } = methods;
+  const submitForm = async (data) => {
+    await onSubmit(data);
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: `id_${id}`,
+      className: clsx(formContainer({ variant })),
+      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+          description && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "text_center",
+                form,
+                descriptionField({ variant })
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+            /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "property_Type",
+                ...register("property_Type", { required: true }),
+                label: "Property Type",
+                sizes: "medium",
+                required: true,
+                error: !!errors.property_Type,
+                helperText: errors.property_Type?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "Occupancy",
+                ...register("Occupancy", { required: true }),
+                label: "Property Usage",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Occupancy,
+                helperText: errors.Occupancy?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "SalesPrice",
+                ...register("SalesPrice", {
+                  required: true,
+                  validate: {
+                    isValid: associatedEmail
+                  }
+                }),
+                label: "Purchase Price",
+                sizes: "medium",
+                required: true,
+                error: !!errors.SalesPrice,
+                helperText: errors.SalesPrice?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "DownPayment",
+                ...register("DownPayment", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Down Payment",
+                sizes: "medium",
+                required: true,
+                error: !!errors.DownPayment,
+                helperText: errors.DownPayment?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "CreditScore",
+                ...register("CreditScore", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Credit Score",
+                sizes: "medium",
+                required: true,
+                error: !!errors.CreditScore,
+                helperText: errors.CreditScore?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "ZipCode",
+                ...register("ZipCode", { required: true, maxLength: 12 }),
+                label: "Zip Code",
+                sizes: "medium",
+                required: true,
+                error: !!errors.ZipCode,
+                helperText: errors.ZipCode?.message,
+                variant
+              }
+            ) })
+          ] }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: getVariant(callToAction?.variant),
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting,
+              children: callToAction?.displayText
+            }
+          ) })
+        ] })
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  BlendPurchase
+};

package/dist/Forms/BlendRefinance.d.ts

@@ -0,0 +1,11 @@
+import { FormProps } from './FormProps';
+
+export type BlendPurchaseInputs = {
+    property_Type: string;
+    Occupancy: string;
+    SalesPrice: string;
+    DownPayment: string;
+    CreditScore: string;
+    ZipCode: string;
+};
+export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/BlendRefinance.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                          */
+/* empty css                                   */
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import { InputPhone } from "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+/* empty css                                                */
+import { associatedEmail } from "../utils/EverestValidity.js";
+import "../utils/allowedAxosDomains.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const BlendPurchase = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  callToAction,
+  validateEmail,
+  id
+}) => {
+  const schema = z.object({
+    property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
+    Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
+    SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    DownPayment: 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;
+    }),
+    CreditScore: z.string(),
+    ZipCode: z.string()
+  });
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {}
+  });
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid, isSubmitting }
+  } = methods;
+  const submitForm = async (data) => {
+    await onSubmit(data);
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: `id_${id}`,
+      className: clsx(formContainer({ variant })),
+      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+          description && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "text_center",
+                form,
+                descriptionField({ variant })
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+            /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "property_Type",
+                ...register("property_Type", { required: true }),
+                label: "Property Type",
+                sizes: "medium",
+                required: true,
+                error: !!errors.property_Type,
+                helperText: errors.property_Type?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "Occupancy",
+                ...register("Occupancy", { required: true }),
+                label: "Property Usage",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Occupancy,
+                helperText: errors.Occupancy?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "SalesPrice",
+                ...register("SalesPrice", {
+                  required: true,
+                  validate: {
+                    isValid: associatedEmail
+                  }
+                }),
+                label: "Purchase Price",
+                sizes: "medium",
+                required: true,
+                error: !!errors.SalesPrice,
+                helperText: errors.SalesPrice?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "DownPayment",
+                ...register("DownPayment", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Down Payment",
+                sizes: "medium",
+                required: true,
+                error: !!errors.DownPayment,
+                helperText: errors.DownPayment?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "CreditScore",
+                ...register("CreditScore", {
+                  required: true,
+                  maxLength: 12
+                }),
+                label: "Credit Score",
+                sizes: "medium",
+                required: true,
+                error: !!errors.CreditScore,
+                helperText: errors.CreditScore?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "ZipCode",
+                ...register("ZipCode", { required: true, maxLength: 12 }),
+                label: "Zip Code",
+                sizes: "medium",
+                required: true,
+                error: !!errors.ZipCode,
+                helperText: errors.ZipCode?.message,
+                variant
+              }
+            ) })
+          ] }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: getVariant(callToAction?.variant),
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting,
+              children: callToAction?.displayText
+            }
+          ) })
+        ] })
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  BlendPurchase
+};

package/dist/Input/DatePicker.css.d.ts

@@ -0,0 +1 @@
+export declare const datePicker: string;

package/dist/Input/DatePicker.css.js

@@ -0,0 +1,6 @@
+/* empty css                                          */
+/* empty css                              */
+var datePicker = "_1oit9ls0";
+export {
+  datePicker
+};

package/dist/Input/Datepicker.d.ts

@@ -0,0 +1,3 @@
+import { DatepickerInputProps } from './InputProps';
+
+export declare const DatePickerInput: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/Datepicker.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import DatePicker from "react-date-picker";
+import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
+const DatePickerInput = (props) => {
+  const {
+    disabled,
+    label,
+    iconLeft,
+    iconRight,
+    sizes,
+    error = false,
+    helperText: helper,
+    variant
+  } = props;
+  const [value, onChange] = useState();
+  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: labelClassName({ error, variant }),
+        htmlFor: props.name,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
+      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          dayPlaceholder: "dd",
+          monthPlaceholder: "mm",
+          yearPlaceholder: "yyyy",
+          minDate: /* @__PURE__ */ new Date(),
+          onChange,
+          value
+        }
+      ),
+      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
+  ] });
+};
+export {
+  DatePickerInput
+};

package/dist/Input/InputDate.css.d.ts

@@ -0,0 +1,6 @@
+export declare const calendarContainer: string;
+export declare const calendarIcon: string;
+export declare const inputDate: string;
+export declare const verticalCenter: string;
+export declare const calendar: string;
+export declare const headerCalendar: string;

package/dist/Input/InputDate.css.js

@@ -0,0 +1,15 @@
+/* empty css                             */
+var calendarContainer = "skzved0";
+var calendarIcon = "skzved1";
+var inputDate = "skzved2";
+var verticalCenter = "skzved3";
+var calendar = "skzved4";
+var headerCalendar = "skzved5";
+export {
+  calendar,
+  calendarContainer,
+  calendarIcon,
+  headerCalendar,
+  inputDate,
+  verticalCenter
+};

package/dist/Input/InputDate.d.ts

@@ -0,0 +1,3 @@
+import { DatepickerInputProps } from './InputProps';
+
+export declare const InputDate: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/InputDate.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import DatePicker from "react-date-picker";
+import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
+const InputDate = (props) => {
+  const {
+    disabled,
+    label,
+    iconLeft,
+    iconRight,
+    sizes,
+    error = false,
+    helperText: helper,
+    variant
+  } = props;
+  const [value, onChange] = useState();
+  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: labelClassName({ error, variant }),
+        htmlFor: props.name,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
+      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          dayPlaceholder: "dd",
+          monthPlaceholder: "mm",
+          yearPlaceholder: "yyyy",
+          minDate: /* @__PURE__ */ new Date(),
+          onChange,
+          value
+        }
+      ),
+      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
+  ] });
+};
+export {
+  InputDate
+};

package/dist/Input/InputProps.d.ts

@@ -36,3 +36,9 @@ export interface RadioButtonProps extends InputProps {
     value: string | number;
     groupName: string;
 }
+export interface DatepickerInputProps extends InputProps {
+    month?: string;
+    selected?: string;
+    show?: boolean;
+    onDateChange: (day: string) => void;
+}

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -117,7 +117,9 @@ function SubNavBar() {
         "/partners",
         "/customer-support",
         "/about-us",
-        "/legal"
+        "/legal",
+        "/commercial/banking/",
+        "/commercial/lending/"
       ].some((el) => pathname?.includes(el) || isHomepage)
     );
   }, [pathname]);
@@ -249,7 +251,7 @@ function SubNavBar() {
           }
         ) })
       ] }),
-      pathname?.includes("/business") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      (pathname?.includes("/business") || pathname?.includes("/commercial/banking/") || pathname?.includes("/commercial/lending/")) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("li", { className: styles.sub_nav_link, children: /* @__PURE__ */ jsxs(
           "a",
           {

package/dist/Table/Table.d.ts

@@ -15,13 +15,11 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
     autoFocus?: boolean | undefined;
     contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
@@ -45,6 +43,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     rev?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
     color?: string | undefined;

package/dist/assets/Input/DatePicker.css

@@ -0,0 +1,95 @@
+.react-date-picker {
+  width: 100%;
+}
+.react-date-picker__wrapper {
+  border: none !important;
+}
+.react-calendar__month-view__weekdays__weekday {
+  width: 45px;
+  height: 22px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--main-font-family);
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  justify-content: center;
+}
+.react-calendar__month-view__weekdays__weekday {
+  font-size: 12px;
+  line-height: 16;
+  color: #2F5B88;
+}
+.react-calendar__month-view__weekdays__weekday > abbr {
+  text-decoration: none;
+}
+.react-calendar__month-view__days__day {
+  width: 49px;
+  height: 49px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-calendar__month-view__days__day > abbr {
+  font-family: var(--main-font-family) !important;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: #051A3F;
+}
+.react-date-picker__inputGroup__input, .react-date-picker__inputGroup__divider {
+  color: #5E6A74 !important;
+}
+.react-date-picker__clear-button {
+  display: none;
+}
+.react-calendar__navigation__label__labelText {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: 0.2px;
+  color: #1E3860;
+  font-family: var(--header-font-family);
+}
+.react-datepicker-popper {
+  transform: translateY(40px)!important;
+}
+.react-calendar__month-view__days__day--neighboringMonth {
+  background-color: #F4F4F4 !important;
+  opacity: 50%;
+}
+.react-calendar__month-view__days__day--neighboringMonth > abbr {
+  color: #5E6A74;
+}
+.react-calendar__tile--active > abbr {
+  color: white;
+}
+.react-calendar {
+  border: 12px solid #FFFFFF4D !important;
+  border-radius: 4px;
+}
+.react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
+  display: none;
+}
+.react-date-picker__calendar {
+  max-width: 100% !important;
+}
+.react-date-picker__inputGroup__input:focus-visible {
+  outline: none;
+}
+.react-date-picker__inputGroup__input:invalid {
+  background: transparent !important;
+}
+@media screen and (max-width:320px) {
+  .react-calendar__month-view__weekdays__weekday {
+    width: 43.5px;
+  }
+  .react-calendar__month-view__days__day {
+    width: 43.5px;
+  }
+}
+@media screen and (max-width:400px) {
+  .react-calendar__navigation .react-calendar__navigation__prev-button, .react-calendar__navigation .react-calendar__navigation__next-button {
+    min-width: auto;
+  }
+}

package/dist/assets/Input/InputDate.css

@@ -0,0 +1,39 @@
+.skzved0 {
+  position: relative;
+}
+.skzved1 {
+  position: relative;
+  top: 5px;
+  left: 5px;
+}
+.skzved2 {
+  width: 100px;
+  padding-left: 5px;
+  padding-right: 5px;
+  line-height: 28px;
+  font-size: 14pt;
+}
+.skzved3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.skzved4 {
+  display: block;
+  background: #FFFFFF;
+  width: 300px;
+  border: solid 1px #CCCCCC;
+  margin: 10px auto;
+  box-shadow: 0 0 15px 0 #C0C0C0;
+  font-size: 1.3rem;
+  text-align: center;
+  z-index: 999;
+}
+.skzved4 .skzved5 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  cursor: default;
+  font-weight: bold;
+}

package/dist/utils/allowedAxosDomains.js

@@ -20,7 +20,8 @@ const moreDomains = {
   "{AUTOAXB}": "https://auto.axosbank.com/partner/axos-purchase/AU",
   "{COMMERCIALPORTAL}": process.env.COMMERCIALPORTAL_URL || "https://portals.axosbank.com/",
   "{DEVAXC}": process.env.DEVELOPER_CLEARING || "https://developer.axosclearing.com",
-  "{AFF}": process.env.FUNDFINDER_URL || "https://axosfundfinder.com/"
+  "{AFF}": process.env.FUNDFINDER_URL || "https://axosfundfinder.com/",
+  "{APL}": process.env.PERSONAL_LOANS || "https://personalloans.axosbank.com"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);

package/package.json

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