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

package/dist/Forms/BlendRefinance.js

@@ -1,215 +0,0 @@
-"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

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

package/dist/Input/DatePicker.css.js

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

package/dist/Input/Datepicker.d.ts

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

package/dist/Input/Datepicker.js

@@ -1,47 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/* 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

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

package/dist/Input/InputDate.js

@@ -1,47 +0,0 @@
-"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/assets/Input/DatePicker.css

@@ -1,95 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-.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;
-}