@axos-web-dev/shared-components 0.0.108 → 0.0.110

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.
Files changed (62) hide show
  1. package/dist/ATMLocator/ATMLocator.js +3 -1
  2. package/dist/Accordion/Accordion.css.d.ts +9 -9
  3. package/dist/Button/Button.js +2 -0
  4. package/dist/Calculators/BalanceAPYCalculator/index.js +7 -2
  5. package/dist/Calculators/Calculator.js +5 -2
  6. package/dist/Calculators/MonthlyPaymentCalculator/index.d.ts +2 -1
  7. package/dist/Calculators/MonthlyPaymentCalculator/index.js +22 -9
  8. package/dist/Carousel/index.js +2 -0
  9. package/dist/Chevron/index.js +2 -0
  10. package/dist/Comparison/Comparison.js +2 -0
  11. package/dist/FaqAccordion/FaqAccordion.css.js +1 -1
  12. package/dist/FaqAccordion/index.d.ts +4 -0
  13. package/dist/FaqAccordion/index.js +113 -1
  14. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +2 -0
  15. package/dist/Forms/ClearingForm.d.ts +14 -0
  16. package/dist/Forms/ClearingForm.js +334 -0
  17. package/dist/Forms/ContactUsBusiness.js +2 -0
  18. package/dist/Forms/ContactUsNMLSId.js +2 -0
  19. package/dist/Forms/EmailOnly.js +2 -0
  20. package/dist/Forms/SalesforceFieldsForm.d.ts +0 -1
  21. package/dist/Forms/ScheduleCall.js +4 -1
  22. package/dist/Forms/SuccesForm.js +2 -0
  23. package/dist/Forms/index.d.ts +1 -0
  24. package/dist/Forms/index.js +2 -0
  25. package/dist/Hyperlink/index.js +2 -0
  26. package/dist/ImageLink/ImageLink.js +2 -0
  27. package/dist/ImageLink/ImageLinkSet.js +2 -0
  28. package/dist/ImageLink/index.js +2 -0
  29. package/dist/Input/Checkbox.css.d.ts +2 -0
  30. package/dist/Input/Checkbox.css.js +5 -1
  31. package/dist/Input/Checkbox.d.ts +1 -1
  32. package/dist/Input/CheckboxGroup.d.ts +20 -0
  33. package/dist/Input/CheckboxGroup.js +39 -0
  34. package/dist/Input/DatePicker.css.d.ts +1 -0
  35. package/dist/Input/DatePicker.css.js +6 -0
  36. package/dist/Input/Datepicker.d.ts +3 -0
  37. package/dist/Input/Datepicker.js +47 -0
  38. package/dist/Input/InputDate.css.d.ts +6 -0
  39. package/dist/Input/InputDate.css.js +15 -0
  40. package/dist/Input/InputDate.d.ts +3 -0
  41. package/dist/Input/InputDate.js +47 -0
  42. package/dist/Input/InputProps.d.ts +6 -0
  43. package/dist/Insight/Featured/CategorySelector.js +2 -0
  44. package/dist/Insight/Featured/Featured.js +2 -0
  45. package/dist/Modal/Modal.js +2 -0
  46. package/dist/NavigationMenu/AxosBank/SubNavBar.js +2 -0
  47. package/dist/SetContainer/SetContainer.js +2 -0
  48. package/dist/SocialMediaBar/SocialMediaBar.css.d.ts +1 -0
  49. package/dist/SocialMediaBar/SocialMediaBar.css.js +2 -0
  50. package/dist/SocialMediaBar/index.d.ts +7 -1
  51. package/dist/SocialMediaBar/index.js +17 -3
  52. package/dist/Table/Table.d.ts +13 -13
  53. package/dist/assets/FaqAccordion/FaqAccordion.css +6 -0
  54. package/dist/assets/Input/Checkbox.css +7 -0
  55. package/dist/assets/Input/DatePicker.css +95 -0
  56. package/dist/assets/Input/InputDate.css +39 -0
  57. package/dist/assets/Interstitial/Interstitial-variants.css +7 -0
  58. package/dist/assets/SocialMediaBar/SocialMediaBar.css +13 -0
  59. package/dist/assets/Table/Table.css +0 -1
  60. package/dist/main.js +8 -1
  61. package/dist/utils/allowedAxosDomains.js +2 -1
  62. package/package.json +1 -1
@@ -24,6 +24,7 @@ import "../ArticlesSet/ArticlesSet.css.js";
24
24
  /* empty css */
25
25
  import "../Calculators/ApyCalculator/ApyCalculator.css.js";
26
26
  /* empty css */
27
+ import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
27
28
  import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
28
29
  import clsx from "clsx";
29
30
  /* empty css */
@@ -58,6 +59,8 @@ import { iconForm } from "../Forms/Forms.css.js";
58
59
  import "../Forms/SalesforceFieldsForm.js";
59
60
  import "../LoadingIndicator/LoadingIndicator.css.js";
60
61
  import "../Input/RadioButton.js";
62
+ import "../Input/RadioButton.css.js";
63
+ import "../Input/Checkbox.css.js";
61
64
  import "../ImageBillboard/ImageBillboard.css.js";
62
65
  /* empty css */
63
66
  /* empty css */
@@ -92,7 +95,6 @@ import "../Table/Table.css.js";
92
95
  /* empty css */
93
96
  import "../Interstitial/Interstitial-variants.css.js";
94
97
  import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
95
- import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
96
98
  import "iframe-resizer";
97
99
  import { calculator_headline, calculator_description } from "../Calculators/calculator.css.js";
98
100
  const ATMLocator = (props) => {
@@ -4,39 +4,39 @@ export declare const accordion: import('@vanilla-extract/recipes').RuntimeFn<{
4
4
  width: {
5
5
  "1/2": {
6
6
  display: "flex";
7
- flexBasis: `${number}%`;
7
+ flexBasis: "50%";
8
8
  };
9
9
  "1/3": {
10
10
  display: "flex";
11
- flexBasis: `${number}%`;
11
+ flexBasis: "33.333333333333336%";
12
12
  };
13
13
  "2/3": {
14
14
  display: "flex";
15
- flexBasis: `${number}%`;
15
+ flexBasis: "66.66666666666667%";
16
16
  };
17
17
  "1/4": {
18
18
  display: "flex";
19
- flexBasis: `${number}%`;
19
+ flexBasis: "25%";
20
20
  };
21
21
  "3/4": {
22
22
  display: "flex";
23
- flexBasis: `${number}%`;
23
+ flexBasis: "75%";
24
24
  };
25
25
  "1/5": {
26
26
  display: "flex";
27
- flexBasis: `${number}%`;
27
+ flexBasis: "20%";
28
28
  };
29
29
  "2/5": {
30
30
  display: "flex";
31
- flexBasis: `${number}%`;
31
+ flexBasis: "40%";
32
32
  };
33
33
  "3/5": {
34
34
  display: "flex";
35
- flexBasis: `${number}%`;
35
+ flexBasis: "60%";
36
36
  };
37
37
  "4/5": {
38
38
  display: "flex";
39
- flexBasis: `${number}%`;
39
+ flexBasis: "80%";
40
40
  };
41
41
  };
42
42
  }>;
@@ -40,6 +40,8 @@ import "../Forms/Forms.css.js";
40
40
  import "../Forms/SalesforceFieldsForm.js";
41
41
  import "../LoadingIndicator/LoadingIndicator.css.js";
42
42
  import "../Input/RadioButton.js";
43
+ import "../Input/RadioButton.css.js";
44
+ import "../Input/Checkbox.css.js";
43
45
  import "iframe-resizer";
44
46
  import "../Calculators/calculator.css.js";
45
47
  /* empty css */
@@ -37,7 +37,13 @@ const BalanceAPYCalculator = ({
37
37
  const [checkingEarning, setCheckingEarning] = useState(1.5);
38
38
  const [error, setError] = useState(false);
39
39
  const removeNonNumeric = (value) => {
40
- return parseInt(value.replace(/\D/g, ""));
40
+ if (value === "") {
41
+ value = "0";
42
+ }
43
+ const removeNonNumericChars = value.replace(/\D/g, "");
44
+ const newValue = parseInt(removeNonNumericChars, 10);
45
+ setBalance(newValue);
46
+ return newValue;
41
47
  };
42
48
  const calculateBlance = (amount) => {
43
49
  setAxbEarning(axbAPY / 100 * amount);
@@ -96,7 +102,6 @@ const BalanceAPYCalculator = ({
96
102
  {
97
103
  className: calculator_input,
98
104
  id: "amount",
99
- type: "number",
100
105
  step: 100,
101
106
  name: "amount",
102
107
  value: balance,
@@ -97,6 +97,8 @@ import "react-hook-form";
97
97
  import { iconForm } from "../Forms/Forms.css.js";
98
98
  import "../Forms/SalesforceFieldsForm.js";
99
99
  import "../Input/RadioButton.js";
100
+ import "../Input/RadioButton.css.js";
101
+ import "../Input/Checkbox.css.js";
100
102
  import { iframeResizer } from "iframe-resizer";
101
103
  import { calculators } from "./calculators.js";
102
104
  const Calculator = (props) => {
@@ -144,8 +146,9 @@ const Calculator = (props) => {
144
146
  MonthlyPaymentCalculator,
145
147
  {
146
148
  header: headline,
147
- body: bodyCopy,
148
- variant
149
+ bodyCopy,
150
+ variant,
151
+ disclosure
149
152
  }
150
153
  );
151
154
  } else if (name === "Max Loan") {
@@ -2,7 +2,8 @@ import { default as React, FC } from 'react';
2
2
 
3
3
  export interface MonthlyPaymentCalculatorProps {
4
4
  header?: React.ReactNode | string;
5
- body?: React.ReactNode | string;
5
+ bodyCopy?: React.ReactNode | string;
6
6
  variant?: string;
7
+ disclosure?: React.ReactNode;
7
8
  }
8
9
  export declare const MonthlyPaymentCalculator: FC<MonthlyPaymentCalculatorProps>;
@@ -5,10 +5,13 @@ import { title } from "../../IconBillboard/IconBillboard.css.js";
5
5
  import "../../utils/allowedAxosDomains.js";
6
6
  import { getVariant } from "../../utils/getVariant.js";
7
7
  import { useState } from "react";
8
+ import { calc_text, description_text, calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
8
9
  import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";
9
10
  const MonthlyPaymentCalculator = ({
10
11
  variant,
11
- header
12
+ header,
13
+ disclosure,
14
+ bodyCopy
12
15
  }) => {
13
16
  const fullVariant = getVariant(variant);
14
17
  const [loanAmountDisplay, setLoanAmountDisplay] = useState("");
@@ -111,13 +114,22 @@ const MonthlyPaymentCalculator = ({
111
114
  {
112
115
  className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,
113
116
  children: [
114
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
115
- "h2",
116
- {
117
- className: `text_center ${title({ variant: fullVariant })} ${h2i}`,
118
- children: header
119
- }
120
- ) }),
117
+ /* @__PURE__ */ jsxs("div", { children: [
118
+ /* @__PURE__ */ jsx(
119
+ "h2",
120
+ {
121
+ className: `text_center ${title({ variant: fullVariant })} ${h2i}`,
122
+ children: header
123
+ }
124
+ ),
125
+ bodyCopy && /* @__PURE__ */ jsx(
126
+ "div",
127
+ {
128
+ className: `${calc_text} ${description_text({ variant: fullVariant })} text_center`,
129
+ children: bodyCopy
130
+ }
131
+ )
132
+ ] }),
121
133
  /* @__PURE__ */ jsxs(
122
134
  "div",
123
135
  {
@@ -204,7 +216,8 @@ const MonthlyPaymentCalculator = ({
204
216
  estimatedPayment.toFixed(2)
205
217
  ] })
206
218
  ] })
207
- ] })
219
+ ] }),
220
+ disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: fullVariant }), children: disclosure })
208
221
  ]
209
222
  }
210
223
  ) }) });
@@ -46,6 +46,8 @@ import "../Forms/Forms.css.js";
46
46
  import "../Forms/SalesforceFieldsForm.js";
47
47
  import "../LoadingIndicator/LoadingIndicator.css.js";
48
48
  import "../Input/RadioButton.js";
49
+ import "../Input/RadioButton.css.js";
50
+ import "../Input/Checkbox.css.js";
49
51
  import "iframe-resizer";
50
52
  import "../Calculators/calculator.css.js";
51
53
  /* empty css */
@@ -43,6 +43,8 @@ import "../Forms/Forms.css.js";
43
43
  import "../Forms/SalesforceFieldsForm.js";
44
44
  import "../LoadingIndicator/LoadingIndicator.css.js";
45
45
  import "../Input/RadioButton.js";
46
+ import "../Input/RadioButton.css.js";
47
+ import "../Input/Checkbox.css.js";
46
48
  import "iframe-resizer";
47
49
  import "../Calculators/calculator.css.js";
48
50
  /* empty css */
@@ -41,6 +41,8 @@ import "../Forms/Forms.css.js";
41
41
  import "../Forms/SalesforceFieldsForm.js";
42
42
  import "../LoadingIndicator/LoadingIndicator.css.js";
43
43
  import "../Input/RadioButton.js";
44
+ import "../Input/RadioButton.css.js";
45
+ import "../Input/Checkbox.css.js";
44
46
  import "iframe-resizer";
45
47
  import "../Calculators/calculator.css.js";
46
48
  /* empty css */
@@ -1,6 +1,6 @@
1
+ /* empty css */
1
2
  /* empty css */
2
3
  /* empty css */
3
- /* empty css */
4
4
  /* empty css */
5
5
  var faqAccordion = "ph6wj60";
6
6
  var header = "ph6wj61";
@@ -1,3 +1,4 @@
1
+ import { ChevronProps } from '../Chevron/Chevron.interface';
1
2
  import { PropsWithChildren } from 'react';
2
3
 
3
4
  export interface AccordionItemProps extends PropsWithChildren {
@@ -8,6 +9,9 @@ export declare const AccordionItemSummary: (props: {
8
9
  id: string;
9
10
  level: string;
10
11
  } & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
12
+ export declare const AccordionCtas: (props: {
13
+ callToActionRow: ChevronProps;
14
+ }) => import("react/jsx-runtime").JSX.Element;
11
15
  export declare const AccordionItemContent: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
12
16
  export declare const FaqAccordion: (props: {
13
17
  header?: string;
@@ -1,4 +1,8 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { Button } from "../Button/Button.js";
3
+ import "../Button/Button.css.js";
4
+ import "react";
5
+ import "react-use";
2
6
  import "../icons/ArrowIcon/ArrowIcon.css.js";
3
7
  import "../icons/CheckIcon/CheckIcon.css.js";
4
8
  import SvgChevronDown from "../icons/ChevronDown.js";
@@ -7,9 +11,95 @@ import SvgChevronUp from "../icons/ChevronUp.js";
7
11
  /* empty css */
8
12
  /* empty css */
9
13
  /* empty css */
14
+ import "../Accordion/Accordion.js";
15
+ import { icon } from "../Accordion/Accordion.css.js";
16
+ import { Chevron } from "../Chevron/index.js";
17
+ import "../AlertBanner/AlertBanner.css.js";
18
+ import { getVariant } from "../utils/getVariant.js";
19
+ import "../Article/Article.css.js";
20
+ import "../ArticlesSet/ArticlesSet.css.js";
21
+ import "../IconBillboard/IconBillboard.css.js";
22
+ import "../utils/allowedAxosDomains.js";
23
+ import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
24
+ import "../Calculators/ApyCalculator/ApyCalculator.css.js";
25
+ import "clsx";
26
+ import "../Table/Table.css.js";
27
+ import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
28
+ import "@hookform/resolvers/zod";
29
+ import "../Input/Checkbox.js";
30
+ import "../Input/CurrencyInput.js";
31
+ import "../Input/Dropdown.js";
32
+ /* empty css */
33
+ /* empty css */
34
+ import "../Input/Input.js";
35
+ import "../Input/Input.css.js";
36
+ import "../Input/InputAmount.js";
37
+ import "../Input/InputPhone.js";
38
+ import "../Input/InputTextArea.js";
39
+ import "react-hook-form";
40
+ import "../Forms/Forms.css.js";
41
+ import "../Forms/SalesforceFieldsForm.js";
42
+ import "../LoadingIndicator/LoadingIndicator.css.js";
43
+ import "../Input/RadioButton.js";
44
+ import "../Input/RadioButton.css.js";
45
+ import "../Input/Checkbox.css.js";
46
+ import "iframe-resizer";
47
+ import "../Calculators/calculator.css.js";
48
+ /* empty css */
49
+ import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
50
+ /* empty css */
51
+ /* empty css */
52
+ /* empty css */
53
+ /* empty css */
54
+ import "../Carousel/index.js";
55
+ import "../Hyperlink/Hyperlink.css.js";
56
+ /* empty css */
57
+ import "../Comparison/Comparison.css.js";
58
+ import "../HeroBanner/HeroBanner.css.js";
59
+ import "../HeroBanner/LargeBanner.css.js";
60
+ import "../HeroBanner/SelectionBanner.css.js";
61
+ import "../SetContainer/SetContainer.css.js";
62
+ import "../Tab/Tab.css.js";
63
+ import "../icons/Star/Star.css.js";
64
+ import "../ContentBanner/ContentBanner.css.js";
65
+ /* empty css */
66
+ import "../ExecutiveBio/ExecutiveBio.css.js";
67
+ import "../FooterDisclosure/FooterDisclosure.css.js";
68
+ /* empty css */
69
+ import "../ImageBillboard/ImageBillboard.css.js";
70
+ /* empty css */
71
+ /* empty css */
72
+ import "../Interstitial/Interstitial-variants.css.js";
73
+ import "../LandingPageHeader/LandingPageHeader.css.js";
74
+ import "../Chevron/Chevron.css.js";
75
+ /* empty css */
76
+ import "../Modal/contextApi/store.js";
77
+ /* empty css */
78
+ /* empty css */
79
+ /* empty css */
80
+ /* empty css */
81
+ /* empty css */
82
+ import "next/image.js";
83
+ import "next/link.js";
84
+ import "next/navigation.js";
85
+ /* empty css */
86
+ /* empty css */
87
+ import "../PageNavItem/PageNavItem.css.js";
88
+ import "lodash";
89
+ import "react-slick";
90
+ /* empty css */
91
+ /* empty css */
92
+ /* empty css */
93
+ /* empty css */
94
+ import "../StepItem/StepItem.css.js";
95
+ import "../StepItemSet/StepItemSet.css.js";
96
+ /* empty css */
97
+ /* empty css */
98
+ /* empty css */
99
+ /* empty css */
100
+ /* empty css */
10
101
  import { getLevelNumber } from "../utils/faqAccordionOptions.js";
11
102
  import { create } from "zustand";
12
- import { icon } from "../Accordion/Accordion.css.js";
13
103
  import { summary, summaryHeader, content, header, faqAccordion } from "./FaqAccordion.css.js";
14
104
  const useAccordion = create()((set) => ({
15
105
  itemsOpened: [],
@@ -65,6 +155,27 @@ const AccordionItemSummary = (props) => {
65
155
  /* @__PURE__ */ jsx("div", { className: icon, children: isOpen.includes(props.id) ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
66
156
  ] });
67
157
  };
158
+ const AccordionCtas = (props) => {
159
+ return props.callToActionRow && /* @__PURE__ */ jsx("div", { className: "push_up", children: props.callToActionRow.type === "Button" ? /* @__PURE__ */ jsx(
160
+ Button,
161
+ {
162
+ targetUrl: props.callToActionRow.targetUrl,
163
+ color: getVariant(props.callToActionRow.variant),
164
+ size: "medium",
165
+ rounded: "medium",
166
+ children: props.callToActionRow.displayText
167
+ },
168
+ props.callToActionRow.id
169
+ ) : /* @__PURE__ */ jsx(
170
+ Chevron,
171
+ {
172
+ targetUrl: props.callToActionRow.targetUrl,
173
+ variant: getVariant(props.callToActionRow.variant),
174
+ children: props.callToActionRow.displayText
175
+ },
176
+ props.callToActionRow.id
177
+ ) });
178
+ };
68
179
  const AccordionItemContent = (props) => {
69
180
  return /* @__PURE__ */ jsx("div", { className: content, children: props.children });
70
181
  };
@@ -76,6 +187,7 @@ const FaqAccordion = (props) => {
76
187
  ] });
77
188
  };
78
189
  export {
190
+ AccordionCtas,
79
191
  AccordionItem,
80
192
  AccordionItemContent,
81
193
  AccordionItemSummary,
@@ -41,6 +41,8 @@ import "../../Forms/Forms.css.js";
41
41
  import "../../Forms/SalesforceFieldsForm.js";
42
42
  import "../../LoadingIndicator/LoadingIndicator.css.js";
43
43
  import "../../Input/RadioButton.js";
44
+ import "../../Input/RadioButton.css.js";
45
+ import "../../Input/Checkbox.css.js";
44
46
  import "iframe-resizer";
45
47
  import "../../Calculators/calculator.css.js";
46
48
  /* empty css */
@@ -0,0 +1,14 @@
1
+ import { FormProps } from './FormProps';
2
+
3
+ export type ClearingInputs = {
4
+ first_name: string;
5
+ last_name: string;
6
+ email: string;
7
+ phone: string;
8
+ company: string;
9
+ Business_Type__c: string;
10
+ Current_Assets_Under_Management__c: string;
11
+ Memo__c: string;
12
+ business_type_selection: string;
13
+ };
14
+ export declare const ClearingForm: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;