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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,9 @@
1
1
  /* empty css */
2
2
  /* empty css */
3
+ /* empty css */
4
+ /* empty css */
5
+ /* empty css */
6
+ /* empty css */
3
7
  /* empty css */
4
8
  /* empty css */
5
9
  /* empty css */
@@ -0,0 +1,11 @@
1
+ import { FormProps } from './FormProps';
2
+
3
+ export type BlendPurchaseInputs = {
4
+ property_Type: string;
5
+ Occupancy: string;
6
+ SalesPrice: string;
7
+ DownPayment: string;
8
+ CreditScore: string;
9
+ ZipCode: string;
10
+ };
11
+ export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,215 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { zodResolver } from "@hookform/resolvers/zod";
4
+ import { Button } from "../Button/Button.js";
5
+ import "../Button/Button.css.js";
6
+ import "react";
7
+ import "react-use";
8
+ import "../Input/Checkbox.js";
9
+ import "../Input/CurrencyInput.js";
10
+ import "../Input/Dropdown.js";
11
+ /* empty css */
12
+ /* empty css */
13
+ import { Input } from "../Input/Input.js";
14
+ import "../Input/Input.css.js";
15
+ import "../Input/InputAmount.js";
16
+ import { InputPhone } from "../Input/InputPhone.js";
17
+ import "../Input/InputTextArea.js";
18
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
19
+ import SvgAxosX from "../icons/AxosX/index.js";
20
+ import SvgComponent from "../icons/AxosX/Blue.js";
21
+ import "../icons/CheckIcon/CheckIcon.css.js";
22
+ /* empty css */
23
+ /* empty css */
24
+ /* empty css */
25
+ /* empty css */
26
+ import { associatedEmail } from "../utils/EverestValidity.js";
27
+ import "../utils/allowedAxosDomains.js";
28
+ import { getVariant } from "../utils/getVariant.js";
29
+ import clsx from "clsx";
30
+ import { useForm, FormProvider } from "react-hook-form";
31
+ import * as z from "zod";
32
+ import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
33
+ import { SalesforceSchema } from "./SalesforceFieldsForm.js";
34
+ const BlendPurchase = ({
35
+ icon = false,
36
+ children,
37
+ onSubmit = (values) => {
38
+ console.log(values);
39
+ },
40
+ disclosure,
41
+ variant: fullVariant = "primary",
42
+ headline,
43
+ description,
44
+ callToAction,
45
+ validateEmail,
46
+ id
47
+ }) => {
48
+ const schema = z.object({
49
+ property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
50
+ Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
51
+ SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
52
+ DownPayment: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
53
+ const removeDashes = val.replace(/-/gi, "");
54
+ if (removeDashes.length !== 10) {
55
+ ctx.addIssue({
56
+ code: z.ZodIssueCode.custom,
57
+ message: "Phone must have at least 10 and no more than 10 characters."
58
+ });
59
+ return z.NEVER;
60
+ }
61
+ return removeDashes;
62
+ }),
63
+ CreditScore: z.string(),
64
+ ZipCode: z.string()
65
+ });
66
+ const methods = useForm({
67
+ resolver: zodResolver(schema.merge(SalesforceSchema), {
68
+ async: true
69
+ }),
70
+ mode: "all",
71
+ defaultValues: {}
72
+ });
73
+ const {
74
+ handleSubmit,
75
+ register,
76
+ formState: { errors, isValid, isSubmitting }
77
+ } = methods;
78
+ const submitForm = async (data) => {
79
+ await onSubmit(data);
80
+ };
81
+ const variant = getVariant(fullVariant);
82
+ return /* @__PURE__ */ jsx(
83
+ "section",
84
+ {
85
+ id: `id_${id}`,
86
+ className: clsx(formContainer({ variant })),
87
+ children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
88
+ icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
89
+ /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
90
+ /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
91
+ description && /* @__PURE__ */ jsx(
92
+ "div",
93
+ {
94
+ className: clsx(
95
+ "text_center",
96
+ form,
97
+ descriptionField({ variant })
98
+ ),
99
+ children: description
100
+ }
101
+ )
102
+ ] }),
103
+ /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
104
+ /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
105
+ /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
106
+ Input,
107
+ {
108
+ id: "property_Type",
109
+ ...register("property_Type", { required: true }),
110
+ label: "Property Type",
111
+ sizes: "medium",
112
+ required: true,
113
+ error: !!errors.property_Type,
114
+ helperText: errors.property_Type?.message,
115
+ variant
116
+ }
117
+ ) }),
118
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
119
+ Input,
120
+ {
121
+ id: "Occupancy",
122
+ ...register("Occupancy", { required: true }),
123
+ label: "Property Usage",
124
+ sizes: "medium",
125
+ required: true,
126
+ error: !!errors.Occupancy,
127
+ helperText: errors.Occupancy?.message,
128
+ variant
129
+ }
130
+ ) }),
131
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
132
+ Input,
133
+ {
134
+ id: "SalesPrice",
135
+ ...register("SalesPrice", {
136
+ required: true,
137
+ validate: {
138
+ isValid: associatedEmail
139
+ }
140
+ }),
141
+ label: "Purchase Price",
142
+ sizes: "medium",
143
+ required: true,
144
+ error: !!errors.SalesPrice,
145
+ helperText: errors.SalesPrice?.message,
146
+ variant
147
+ }
148
+ ) }),
149
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
150
+ InputPhone,
151
+ {
152
+ id: "DownPayment",
153
+ ...register("DownPayment", {
154
+ required: true,
155
+ maxLength: 12
156
+ }),
157
+ label: "Down Payment",
158
+ sizes: "medium",
159
+ required: true,
160
+ error: !!errors.DownPayment,
161
+ helperText: errors.DownPayment?.message,
162
+ variant
163
+ }
164
+ ) }),
165
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
166
+ InputPhone,
167
+ {
168
+ id: "CreditScore",
169
+ ...register("CreditScore", {
170
+ required: true,
171
+ maxLength: 12
172
+ }),
173
+ label: "Credit Score",
174
+ sizes: "medium",
175
+ required: true,
176
+ error: !!errors.CreditScore,
177
+ helperText: errors.CreditScore?.message,
178
+ variant
179
+ }
180
+ ) }),
181
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
182
+ InputPhone,
183
+ {
184
+ id: "ZipCode",
185
+ ...register("ZipCode", { required: true, maxLength: 12 }),
186
+ label: "Zip Code",
187
+ sizes: "medium",
188
+ required: true,
189
+ error: !!errors.ZipCode,
190
+ helperText: errors.ZipCode?.message,
191
+ variant
192
+ }
193
+ ) })
194
+ ] }),
195
+ children,
196
+ /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
197
+ /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
198
+ Button,
199
+ {
200
+ color: getVariant(callToAction?.variant),
201
+ as: "button",
202
+ type: "submit",
203
+ disabled: !isValid || isSubmitting,
204
+ children: callToAction?.displayText
205
+ }
206
+ ) })
207
+ ] })
208
+ ] }) })
209
+ },
210
+ id
211
+ );
212
+ };
213
+ export {
214
+ BlendPurchase
215
+ };
@@ -0,0 +1,11 @@
1
+ import { FormProps } from './FormProps';
2
+
3
+ export type BlendPurchaseInputs = {
4
+ property_Type: string;
5
+ Occupancy: string;
6
+ SalesPrice: string;
7
+ DownPayment: string;
8
+ CreditScore: string;
9
+ ZipCode: string;
10
+ };
11
+ export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,215 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { zodResolver } from "@hookform/resolvers/zod";
4
+ import { Button } from "../Button/Button.js";
5
+ import "../Button/Button.css.js";
6
+ import "react";
7
+ import "react-use";
8
+ import "../Input/Checkbox.js";
9
+ import "../Input/CurrencyInput.js";
10
+ import "../Input/Dropdown.js";
11
+ /* empty css */
12
+ /* empty css */
13
+ import { Input } from "../Input/Input.js";
14
+ import "../Input/Input.css.js";
15
+ import "../Input/InputAmount.js";
16
+ import { InputPhone } from "../Input/InputPhone.js";
17
+ import "../Input/InputTextArea.js";
18
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
19
+ import SvgAxosX from "../icons/AxosX/index.js";
20
+ import SvgComponent from "../icons/AxosX/Blue.js";
21
+ import "../icons/CheckIcon/CheckIcon.css.js";
22
+ /* empty css */
23
+ /* empty css */
24
+ /* empty css */
25
+ /* empty css */
26
+ import { associatedEmail } from "../utils/EverestValidity.js";
27
+ import "../utils/allowedAxosDomains.js";
28
+ import { getVariant } from "../utils/getVariant.js";
29
+ import clsx from "clsx";
30
+ import { useForm, FormProvider } from "react-hook-form";
31
+ import * as z from "zod";
32
+ import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
33
+ import { SalesforceSchema } from "./SalesforceFieldsForm.js";
34
+ const BlendPurchase = ({
35
+ icon = false,
36
+ children,
37
+ onSubmit = (values) => {
38
+ console.log(values);
39
+ },
40
+ disclosure,
41
+ variant: fullVariant = "primary",
42
+ headline,
43
+ description,
44
+ callToAction,
45
+ validateEmail,
46
+ id
47
+ }) => {
48
+ const schema = z.object({
49
+ property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
50
+ Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
51
+ SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
52
+ DownPayment: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
53
+ const removeDashes = val.replace(/-/gi, "");
54
+ if (removeDashes.length !== 10) {
55
+ ctx.addIssue({
56
+ code: z.ZodIssueCode.custom,
57
+ message: "Phone must have at least 10 and no more than 10 characters."
58
+ });
59
+ return z.NEVER;
60
+ }
61
+ return removeDashes;
62
+ }),
63
+ CreditScore: z.string(),
64
+ ZipCode: z.string()
65
+ });
66
+ const methods = useForm({
67
+ resolver: zodResolver(schema.merge(SalesforceSchema), {
68
+ async: true
69
+ }),
70
+ mode: "all",
71
+ defaultValues: {}
72
+ });
73
+ const {
74
+ handleSubmit,
75
+ register,
76
+ formState: { errors, isValid, isSubmitting }
77
+ } = methods;
78
+ const submitForm = async (data) => {
79
+ await onSubmit(data);
80
+ };
81
+ const variant = getVariant(fullVariant);
82
+ return /* @__PURE__ */ jsx(
83
+ "section",
84
+ {
85
+ id: `id_${id}`,
86
+ className: clsx(formContainer({ variant })),
87
+ children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
88
+ icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
89
+ /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
90
+ /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
91
+ description && /* @__PURE__ */ jsx(
92
+ "div",
93
+ {
94
+ className: clsx(
95
+ "text_center",
96
+ form,
97
+ descriptionField({ variant })
98
+ ),
99
+ children: description
100
+ }
101
+ )
102
+ ] }),
103
+ /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
104
+ /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
105
+ /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
106
+ Input,
107
+ {
108
+ id: "property_Type",
109
+ ...register("property_Type", { required: true }),
110
+ label: "Property Type",
111
+ sizes: "medium",
112
+ required: true,
113
+ error: !!errors.property_Type,
114
+ helperText: errors.property_Type?.message,
115
+ variant
116
+ }
117
+ ) }),
118
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
119
+ Input,
120
+ {
121
+ id: "Occupancy",
122
+ ...register("Occupancy", { required: true }),
123
+ label: "Property Usage",
124
+ sizes: "medium",
125
+ required: true,
126
+ error: !!errors.Occupancy,
127
+ helperText: errors.Occupancy?.message,
128
+ variant
129
+ }
130
+ ) }),
131
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
132
+ Input,
133
+ {
134
+ id: "SalesPrice",
135
+ ...register("SalesPrice", {
136
+ required: true,
137
+ validate: {
138
+ isValid: associatedEmail
139
+ }
140
+ }),
141
+ label: "Purchase Price",
142
+ sizes: "medium",
143
+ required: true,
144
+ error: !!errors.SalesPrice,
145
+ helperText: errors.SalesPrice?.message,
146
+ variant
147
+ }
148
+ ) }),
149
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
150
+ InputPhone,
151
+ {
152
+ id: "DownPayment",
153
+ ...register("DownPayment", {
154
+ required: true,
155
+ maxLength: 12
156
+ }),
157
+ label: "Down Payment",
158
+ sizes: "medium",
159
+ required: true,
160
+ error: !!errors.DownPayment,
161
+ helperText: errors.DownPayment?.message,
162
+ variant
163
+ }
164
+ ) }),
165
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
166
+ InputPhone,
167
+ {
168
+ id: "CreditScore",
169
+ ...register("CreditScore", {
170
+ required: true,
171
+ maxLength: 12
172
+ }),
173
+ label: "Credit Score",
174
+ sizes: "medium",
175
+ required: true,
176
+ error: !!errors.CreditScore,
177
+ helperText: errors.CreditScore?.message,
178
+ variant
179
+ }
180
+ ) }),
181
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
182
+ InputPhone,
183
+ {
184
+ id: "ZipCode",
185
+ ...register("ZipCode", { required: true, maxLength: 12 }),
186
+ label: "Zip Code",
187
+ sizes: "medium",
188
+ required: true,
189
+ error: !!errors.ZipCode,
190
+ helperText: errors.ZipCode?.message,
191
+ variant
192
+ }
193
+ ) })
194
+ ] }),
195
+ children,
196
+ /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
197
+ /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
198
+ Button,
199
+ {
200
+ color: getVariant(callToAction?.variant),
201
+ as: "button",
202
+ type: "submit",
203
+ disabled: !isValid || isSubmitting,
204
+ children: callToAction?.displayText
205
+ }
206
+ ) })
207
+ ] })
208
+ ] }) })
209
+ },
210
+ id
211
+ );
212
+ };
213
+ export {
214
+ BlendPurchase
215
+ };
@@ -0,0 +1 @@
1
+ export declare const datePicker: string;
@@ -0,0 +1,6 @@
1
+ /* empty css */
2
+ /* empty css */
3
+ var datePicker = "_1oit9ls0";
4
+ export {
5
+ datePicker
6
+ };
@@ -0,0 +1,3 @@
1
+ import { DatepickerInputProps } from './InputProps';
2
+
3
+ export declare const DatePickerInput: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,47 @@
1
+ "use client";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
+ import { useState } from "react";
4
+ import DatePicker from "react-date-picker";
5
+ import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
6
+ const DatePickerInput = (props) => {
7
+ const {
8
+ disabled,
9
+ label,
10
+ iconLeft,
11
+ iconRight,
12
+ sizes,
13
+ error = false,
14
+ helperText: helper,
15
+ variant
16
+ } = props;
17
+ const [value, onChange] = useState();
18
+ return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
19
+ label && /* @__PURE__ */ jsx(
20
+ "label",
21
+ {
22
+ className: labelClassName({ error, variant }),
23
+ htmlFor: props.name,
24
+ children: label
25
+ }
26
+ ),
27
+ /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
28
+ iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
29
+ /* @__PURE__ */ jsx(
30
+ DatePicker,
31
+ {
32
+ dayPlaceholder: "dd",
33
+ monthPlaceholder: "mm",
34
+ yearPlaceholder: "yyyy",
35
+ minDate: /* @__PURE__ */ new Date(),
36
+ onChange,
37
+ value
38
+ }
39
+ ),
40
+ iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
41
+ ] }),
42
+ /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
43
+ ] });
44
+ };
45
+ export {
46
+ DatePickerInput
47
+ };
@@ -0,0 +1,6 @@
1
+ export declare const calendarContainer: string;
2
+ export declare const calendarIcon: string;
3
+ export declare const inputDate: string;
4
+ export declare const verticalCenter: string;
5
+ export declare const calendar: string;
6
+ export declare const headerCalendar: string;
@@ -0,0 +1,15 @@
1
+ /* empty css */
2
+ var calendarContainer = "skzved0";
3
+ var calendarIcon = "skzved1";
4
+ var inputDate = "skzved2";
5
+ var verticalCenter = "skzved3";
6
+ var calendar = "skzved4";
7
+ var headerCalendar = "skzved5";
8
+ export {
9
+ calendar,
10
+ calendarContainer,
11
+ calendarIcon,
12
+ headerCalendar,
13
+ inputDate,
14
+ verticalCenter
15
+ };
@@ -0,0 +1,3 @@
1
+ import { DatepickerInputProps } from './InputProps';
2
+
3
+ export declare const InputDate: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,47 @@
1
+ "use client";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
+ import { useState } from "react";
4
+ import DatePicker from "react-date-picker";
5
+ import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
6
+ const InputDate = (props) => {
7
+ const {
8
+ disabled,
9
+ label,
10
+ iconLeft,
11
+ iconRight,
12
+ sizes,
13
+ error = false,
14
+ helperText: helper,
15
+ variant
16
+ } = props;
17
+ const [value, onChange] = useState();
18
+ return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
19
+ label && /* @__PURE__ */ jsx(
20
+ "label",
21
+ {
22
+ className: labelClassName({ error, variant }),
23
+ htmlFor: props.name,
24
+ children: label
25
+ }
26
+ ),
27
+ /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
28
+ iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
29
+ /* @__PURE__ */ jsx(
30
+ DatePicker,
31
+ {
32
+ dayPlaceholder: "dd",
33
+ monthPlaceholder: "mm",
34
+ yearPlaceholder: "yyyy",
35
+ minDate: /* @__PURE__ */ new Date(),
36
+ onChange,
37
+ value
38
+ }
39
+ ),
40
+ iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
41
+ ] }),
42
+ /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
43
+ ] });
44
+ };
45
+ export {
46
+ InputDate
47
+ };
@@ -36,3 +36,9 @@ export interface RadioButtonProps extends InputProps {
36
36
  value: string | number;
37
37
  groupName: string;
38
38
  }
39
+ export interface DatepickerInputProps extends InputProps {
40
+ month?: string;
41
+ selected?: string;
42
+ show?: boolean;
43
+ onDateChange: (day: string) => void;
44
+ }
@@ -117,13 +117,15 @@ function SubNavBar() {
117
117
  "/partners",
118
118
  "/customer-support",
119
119
  "/about-us",
120
- "/legal"
120
+ "/legal",
121
+ "/commercial",
122
+ "/invest/insights"
121
123
  ].some((el) => pathname?.includes(el) || isHomepage)
122
124
  );
123
125
  }, [pathname]);
124
126
  return showNavbar ? /* @__PURE__ */ jsx("div", { className: `${styles.sub_nav} ${sub_nav} ${styles.desktop_only}`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsx("div", { className: styles.header_sub_row, children: /* @__PURE__ */ jsxs("nav", { children: [
125
127
  /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", children: [
126
- (isHomepage || pathname?.includes("/personal")) && /* @__PURE__ */ jsxs(Fragment, { children: [
128
+ (isHomepage || pathname?.includes("/personal") || pathname?.includes("/invest/insights")) && /* @__PURE__ */ jsxs(Fragment, { children: [
127
129
  /* @__PURE__ */ jsx("li", { className: styles.sub_nav_link, children: /* @__PURE__ */ jsxs(
128
130
  "a",
129
131
  {
@@ -249,7 +251,7 @@ function SubNavBar() {
249
251
  }
250
252
  ) })
251
253
  ] }),
252
- pathname?.includes("/business") && /* @__PURE__ */ jsxs(Fragment, { children: [
254
+ (pathname?.includes("/business") || pathname?.includes("/commercial")) && /* @__PURE__ */ jsxs(Fragment, { children: [
253
255
  /* @__PURE__ */ jsx("li", { className: styles.sub_nav_link, children: /* @__PURE__ */ jsxs(
254
256
  "a",
255
257
  {
@@ -1,8 +1,8 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { CellProps, RowProps, TableContainerProps, TableProps } from './Table.interface';
3
3
 
4
- export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, tableType, tableDescription, internalName, id, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
5
- export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, style, className, }: TableProps) => import("react/jsx-runtime").JSX.Element;
4
+ export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, tableType, tableDescription, internalName, id, icon, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
5
+ export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, style, className, tableAriaLabel, }: TableProps) => import("react/jsx-runtime").JSX.Element;
6
6
  export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
7
7
  export declare const TableHead: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
8
8
  export declare const TableBody: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
@@ -15,13 +15,11 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
15
15
  suppressContentEditableWarning?: boolean | undefined;
16
16
  suppressHydrationWarning?: boolean | undefined;
17
17
  accessKey?: string | undefined;
18
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
19
18
  autoFocus?: boolean | undefined;
20
19
  contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
21
20
  contextMenu?: string | undefined;
22
21
  dir?: string | undefined;
23
22
  draggable?: (boolean | "false" | "true") | undefined;
24
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
25
23
  hidden?: boolean | undefined;
26
24
  id?: string | undefined;
27
25
  lang?: string | undefined;
@@ -45,6 +43,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
45
43
  rev?: string | undefined;
46
44
  typeof?: string | undefined;
47
45
  vocab?: string | undefined;
46
+ autoCapitalize?: string | undefined;
48
47
  autoCorrect?: string | undefined;
49
48
  autoSave?: string | undefined;
50
49
  color?: string | undefined;
@@ -15,6 +15,7 @@ export interface TableProps extends PropsWithChildren {
15
15
  alternateColorRows?: boolean;
16
16
  style?: CSSProperties;
17
17
  className?: string;
18
+ tableAriaLabel?: string;
18
19
  }
19
20
  export interface TableContainerProps extends PropsWithChildren {
20
21
  id?: string;
@@ -25,4 +26,5 @@ export interface TableContainerProps extends PropsWithChildren {
25
26
  tableType?: string;
26
27
  tableDescription?: ReactNode | string;
27
28
  internalName?: string;
29
+ icon?: boolean;
28
30
  }
@@ -1,4 +1,11 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
3
+ import SvgComponent from "../icons/AxosX/Blue.js";
4
+ import "../icons/CheckIcon/CheckIcon.css.js";
5
+ /* empty css */
6
+ /* empty css */
7
+ /* empty css */
8
+ /* empty css */
2
9
  import "../utils/allowedAxosDomains.js";
3
10
  import { getVariant } from "../utils/getVariant.js";
4
11
  import clsx from "clsx";
@@ -11,7 +18,8 @@ const TableContainer = ({
11
18
  tableType = "Standard",
12
19
  tableDescription,
13
20
  internalName,
14
- id
21
+ id,
22
+ icon
15
23
  }) => {
16
24
  return /* @__PURE__ */ jsx(
17
25
  "section",
@@ -26,7 +34,10 @@ const TableContainer = ({
26
34
  "containment"
27
35
  ),
28
36
  children: [
29
- tableTitle && /* @__PURE__ */ jsx("div", { className: table_container_text, children: /* @__PURE__ */ jsx("h2", { className: clsx("header_2", table_headline), children: tableTitle }) }),
37
+ (tableTitle || icon) && /* @__PURE__ */ jsxs("div", { className: table_container_text, children: [
38
+ icon && /* @__PURE__ */ jsx("div", { className: "mb_16 text_center", children: /* @__PURE__ */ jsx(SvgComponent, {}) }),
39
+ /* @__PURE__ */ jsx("h2", { className: clsx("header_2", table_headline), children: tableTitle })
40
+ ] }),
30
41
  tableDescription && /* @__PURE__ */ jsx("div", { className: table_description_text, children: tableDescription }),
31
42
  tableBody,
32
43
  tableFooter && /* @__PURE__ */ jsx("div", { className: clsx(table_container_text, "push_up_24"), children: tableFooter })
@@ -44,7 +55,8 @@ const Table = ({
44
55
  tableType = "Standard",
45
56
  alternateColorRows = false,
46
57
  style,
47
- className
58
+ className,
59
+ tableAriaLabel
48
60
  }) => {
49
61
  return /* @__PURE__ */ jsx(
50
62
  "div",
@@ -60,6 +72,7 @@ const Table = ({
60
72
  children: /* @__PURE__ */ jsx(
61
73
  "table",
62
74
  {
75
+ "aria-label": tableAriaLabel,
63
76
  className: clsx(
64
77
  table({ variant: getVariant(variant) }),
65
78
  highlight === "First Row" && highlight_first_row,
File without changes
@@ -0,0 +1 @@
1
+ import "./Tooltip.css.ts.vanilla.css.js";
@@ -0,0 +1 @@
1
+ export declare const Tooltip: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { jsxs } from "react/jsx-runtime";
2
+ const Tooltip = () => {
3
+ return /* @__PURE__ */ jsxs("a", { onMouseOver: () => {
4
+ }, href: "#", className: "show-tooltips", children: [
5
+ " ",
6
+ "Link 2"
7
+ ] });
8
+ };
9
+ export {
10
+ Tooltip
11
+ };
File without changes
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,95 @@
1
+ .react-date-picker {
2
+ width: 100%;
3
+ }
4
+ .react-date-picker__wrapper {
5
+ border: none !important;
6
+ }
7
+ .react-calendar__month-view__weekdays__weekday {
8
+ width: 45px;
9
+ height: 22px;
10
+ margin: 0;
11
+ display: inline-flex;
12
+ align-items: center;
13
+ font-family: var(--main-font-family);
14
+ font-weight: 500;
15
+ letter-spacing: 0.2px;
16
+ justify-content: center;
17
+ }
18
+ .react-calendar__month-view__weekdays__weekday {
19
+ font-size: 12px;
20
+ line-height: 16;
21
+ color: #2F5B88;
22
+ }
23
+ .react-calendar__month-view__weekdays__weekday > abbr {
24
+ text-decoration: none;
25
+ }
26
+ .react-calendar__month-view__days__day {
27
+ width: 49px;
28
+ height: 49px;
29
+ margin: 0;
30
+ display: inline-flex;
31
+ align-items: center;
32
+ justify-content: center;
33
+ }
34
+ .react-calendar__month-view__days__day > abbr {
35
+ font-family: var(--main-font-family) !important;
36
+ font-weight: 500;
37
+ letter-spacing: 0.2px;
38
+ color: #051A3F;
39
+ }
40
+ .react-date-picker__inputGroup__input, .react-date-picker__inputGroup__divider {
41
+ color: #5E6A74 !important;
42
+ }
43
+ .react-date-picker__clear-button {
44
+ display: none;
45
+ }
46
+ .react-calendar__navigation__label__labelText {
47
+ font-weight: 600;
48
+ font-size: 24px;
49
+ line-height: 36px;
50
+ letter-spacing: 0.2px;
51
+ color: #1E3860;
52
+ font-family: var(--header-font-family);
53
+ }
54
+ .react-datepicker-popper {
55
+ transform: translateY(40px)!important;
56
+ }
57
+ .react-calendar__month-view__days__day--neighboringMonth {
58
+ background-color: #F4F4F4 !important;
59
+ opacity: 50%;
60
+ }
61
+ .react-calendar__month-view__days__day--neighboringMonth > abbr {
62
+ color: #5E6A74;
63
+ }
64
+ .react-calendar__tile--active > abbr {
65
+ color: white;
66
+ }
67
+ .react-calendar {
68
+ border: 12px solid #FFFFFF4D !important;
69
+ border-radius: 4px;
70
+ }
71
+ .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
72
+ display: none;
73
+ }
74
+ .react-date-picker__calendar {
75
+ max-width: 100% !important;
76
+ }
77
+ .react-date-picker__inputGroup__input:focus-visible {
78
+ outline: none;
79
+ }
80
+ .react-date-picker__inputGroup__input:invalid {
81
+ background: transparent !important;
82
+ }
83
+ @media screen and (max-width:320px) {
84
+ .react-calendar__month-view__weekdays__weekday {
85
+ width: 43.5px;
86
+ }
87
+ .react-calendar__month-view__days__day {
88
+ width: 43.5px;
89
+ }
90
+ }
91
+ @media screen and (max-width:400px) {
92
+ .react-calendar__navigation .react-calendar__navigation__prev-button, .react-calendar__navigation .react-calendar__navigation__next-button {
93
+ min-width: auto;
94
+ }
95
+ }
@@ -0,0 +1,39 @@
1
+ .skzved0 {
2
+ position: relative;
3
+ }
4
+ .skzved1 {
5
+ position: relative;
6
+ top: 5px;
7
+ left: 5px;
8
+ }
9
+ .skzved2 {
10
+ width: 100px;
11
+ padding-left: 5px;
12
+ padding-right: 5px;
13
+ line-height: 28px;
14
+ font-size: 14pt;
15
+ }
16
+ .skzved3 {
17
+ display: flex;
18
+ justify-content: center;
19
+ align-items: center;
20
+ }
21
+ .skzved4 {
22
+ display: block;
23
+ background: #FFFFFF;
24
+ width: 300px;
25
+ border: solid 1px #CCCCCC;
26
+ margin: 10px auto;
27
+ box-shadow: 0 0 15px 0 #C0C0C0;
28
+ font-size: 1.3rem;
29
+ text-align: center;
30
+ z-index: 999;
31
+ }
32
+ .skzved4 .skzved5 {
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ color: #FFFFFF;
37
+ cursor: default;
38
+ font-weight: bold;
39
+ }
@@ -20,7 +20,8 @@ const moreDomains = {
20
20
  "{AUTOAXB}": "https://auto.axosbank.com/partner/axos-purchase/AU",
21
21
  "{COMMERCIALPORTAL}": process.env.COMMERCIALPORTAL_URL || "https://portals.axosbank.com/",
22
22
  "{DEVAXC}": process.env.DEVELOPER_CLEARING || "https://developer.axosclearing.com",
23
- "{AFF}": process.env.FUNDFINDER_URL || "https://axosfundfinder.com/"
23
+ "{AFF}": process.env.FUNDFINDER_URL || "https://axosfundfinder.com/",
24
+ "{APL}": process.env.PERSONAL_LOANS || "https://personalloans.axosbank.com"
24
25
  };
25
26
  const isAllowedUrl = (url) => {
26
27
  const uri = new URL(url, location.href);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@axos-web-dev/shared-components",
3
3
  "description": "Axos shared components library for web.",
4
- "version": "0.0.137",
4
+ "version": "0.0.139",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",