@axos-web-dev/shared-components 0.0.109 → 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.
@@ -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 */
@@ -94,7 +95,6 @@ import "../Table/Table.css.js";
94
95
  /* empty css */
95
96
  import "../Interstitial/Interstitial-variants.css.js";
96
97
  import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
97
- import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
98
98
  import "iframe-resizer";
99
99
  import { calculator_headline, calculator_description } from "../Calculators/calculator.css.js";
100
100
  const ATMLocator = (props) => {
@@ -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,
@@ -146,8 +146,9 @@ const Calculator = (props) => {
146
146
  MonthlyPaymentCalculator,
147
147
  {
148
148
  header: headline,
149
- body: bodyCopy,
150
- variant
149
+ bodyCopy,
150
+ variant,
151
+ disclosure
151
152
  }
152
153
  );
153
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
  ) }) });
@@ -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,
@@ -15,6 +15,7 @@ import "../Input/Input.css.js";
15
15
  import "../Input/InputAmount.js";
16
16
  import { InputPhone } from "../Input/InputPhone.js";
17
17
  import "../Input/InputTextArea.js";
18
+ import { InputDate } from "../Input/InputDate.js";
18
19
  import "../icons/ArrowIcon/ArrowIcon.css.js";
19
20
  import SvgAxosX from "../icons/AxosX/index.js";
20
21
  import SvgComponent from "../icons/AxosX/Blue.js";
@@ -220,7 +221,9 @@ const ScheduleCall = ({
220
221
  /* @__PURE__ */ jsx("option", { value: "5:00 pm", children: "5:00 pm" })
221
222
  ]
222
223
  }
223
- ) })
224
+ ) }),
225
+ /* @__PURE__ */ jsx(InputDate, { onDateChange: () => {
226
+ } })
224
227
  ] }),
225
228
  children,
226
229
  /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
@@ -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
+ }
@@ -1,2 +1,3 @@
1
1
  export declare const smb_section: string;
2
2
  export declare const smb_wrapper: string;
3
+ export declare const padding_in_footer: string;
@@ -1,7 +1,9 @@
1
1
  /* empty css */
2
2
  var smb_section = "nkpt490";
3
3
  var smb_wrapper = "nkpt491";
4
+ var padding_in_footer = "nkpt492";
4
5
  export {
6
+ padding_in_footer,
5
7
  smb_section,
6
8
  smb_wrapper
7
9
  };
@@ -1 +1,7 @@
1
- export declare const SocialMediaBar: () => import("react/jsx-runtime").JSX.Element;
1
+ import { CSSProperties } from 'react';
2
+
3
+ export * from './SocialMediaBar.css';
4
+ export declare const SocialMediaBar: ({ className, style, }: {
5
+ className?: string;
6
+ style?: CSSProperties;
7
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,11 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { Facebook, Instagram, Xtwitter, Youtube, LinkedIn, Pinterest } from "./iconsRepository.js";
3
3
  import { smb_section, smb_wrapper } from "./SocialMediaBar.css.js";
4
- const SocialMediaBar = () => {
4
+ import { padding_in_footer } from "./SocialMediaBar.css.js";
5
+ const SocialMediaBar = ({
6
+ className,
7
+ style
8
+ }) => {
5
9
  const iconsToRender = [
6
10
  Facebook,
7
11
  Instagram,
@@ -16,8 +20,18 @@ const SocialMediaBar = () => {
16
20
  // i.Libsyn,
17
21
  // i.Spotify,
18
22
  ];
19
- return /* @__PURE__ */ jsx("section", { role: "contentinfo", className: smb_section, children: /* @__PURE__ */ jsx("div", { className: `containment flex center middle ${smb_wrapper}`, children: iconsToRender.map((Icon, id) => /* @__PURE__ */ jsx(Icon, {}, id)) }) });
23
+ return /* @__PURE__ */ jsx("section", { role: "contentinfo", className: smb_section, children: /* @__PURE__ */ jsx(
24
+ "div",
25
+ {
26
+ className: `containment flex center middle ${smb_wrapper} ${className}`,
27
+ style: { ...style },
28
+ children: iconsToRender.map((Icon, id) => /* @__PURE__ */ jsx(Icon, {}, id))
29
+ }
30
+ ) });
20
31
  };
21
32
  export {
22
- SocialMediaBar
33
+ SocialMediaBar,
34
+ padding_in_footer,
35
+ smb_section,
36
+ smb_wrapper
23
37
  };
@@ -47,9 +47,15 @@ details[open] .ph6wj62 {
47
47
  .ph6wj64 ol {
48
48
  padding-bottom: 1rem;
49
49
  }
50
+ .ph6wj64 ol ul {
51
+ padding-bottom: 0;
52
+ }
50
53
  .ph6wj64 ul {
51
54
  padding-bottom: 1rem;
52
55
  }
56
+ .ph6wj64 ul ol {
57
+ padding-bottom: 0;
58
+ }
53
59
  details summary::-webkit-details-marker {
54
60
  display: none;
55
61
  }
@@ -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
+ }
@@ -15,4 +15,11 @@
15
15
  flex-direction: column;
16
16
  gap: 1em;
17
17
  list-style: none;
18
+ }
19
+ @media screen and (max-width:400px) {
20
+ .ep91dm4 {
21
+ -webkit-padding-start: 0;
22
+ padding-inline-start: 0;
23
+ text-align: left;
24
+ }
18
25
  }
@@ -7,6 +7,9 @@
7
7
  flex-wrap: wrap;
8
8
  gap: 24px;
9
9
  }
10
+ .nkpt492 {
11
+ padding: 16px 0 3.5rem 0;
12
+ }
10
13
  .nkpt491 svg {
11
14
  max-width: 100%;
12
15
  height: auto;
@@ -32,4 +35,14 @@
32
35
  .nkpt491 {
33
36
  min-height: 104px;
34
37
  }
38
+ }
39
+ @media screen and (max-width: 1023px) {
40
+ .nkpt492 {
41
+ padding-bottom: 50px;
42
+ }
43
+ }
44
+ @media screen and (max-width: 768px) {
45
+ .nkpt492 {
46
+ padding-bottom: 30px;
47
+ }
35
48
  }
@@ -148,7 +148,6 @@ tr:last-child td {
148
148
  overflow: hidden;
149
149
  margin: auto;
150
150
  border-radius: 1rem;
151
- height: 100%;
152
151
  }
153
152
  ._1nivbwes {
154
153
  border: 1px solid var(--_1073cm87);
package/dist/main.js CHANGED
@@ -36,7 +36,7 @@ import { DownloadTile } from "./DownloadTile/index.js";
36
36
  import { ExecutiveBio } from "./ExecutiveBio/ExecutiveBio.js";
37
37
  import { bio_section_text, components, contact_col, contact_entry, contact_links, contacts, copy, description, details, header_theme, headline_setting, headshot, img_area, item_bio, job_title, media, padding, person, section_theme, shift, svg_icon } from "./ExecutiveBio/ExecutiveBio.css.js";
38
38
  import { ExecutiveBioSet } from "./ExecutiveBio/ExecutiveBioSet.js";
39
- import { AccordionItem, AccordionItemContent, AccordionItemSummary, FaqAccordion } from "./FaqAccordion/index.js";
39
+ import { AccordionCtas, AccordionItem, AccordionItemContent, AccordionItemSummary, FaqAccordion } from "./FaqAccordion/index.js";
40
40
  import { footerDisclosure, footerLink, footerParagraph, iconsContent } from "./FooterDisclosure/FooterDisclosure.css.js";
41
41
  import { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph } from "./FooterDisclosure/FooterDisclosure.js";
42
42
  import { AxosFooterSiteMap } from "./FooterSiteMap/AxosBank/FooterSiteMap.js";
@@ -153,6 +153,7 @@ import { associatedEmail } from "./utils/EverestValidity.js";
153
153
  import { findMoreAxosDomains, isAllowedUrl } from "./utils/allowedAxosDomains.js";
154
154
  import { getVariant, getVariantWithRegex } from "./utils/getVariant.js";
155
155
  import { isAbsoluteUrl, isEmailLink, isPhoneLink, shortUrl, validateLink } from "./utils/validateExternalLinks.js";
156
+ import { padding_in_footer, smb_section, smb_wrapper } from "./SocialMediaBar/SocialMediaBar.css.js";
156
157
  export {
157
158
  default20 as AASLogo,
158
159
  default21 as AFSLogo,
@@ -162,6 +163,7 @@ export {
162
163
  default24 as AXILogo,
163
164
  default25 as AXOS,
164
165
  Accordion,
166
+ AccordionCtas,
165
167
  AccordionCtx,
166
168
  AccordionDetails,
167
169
  AccordionHeader,
@@ -465,6 +467,7 @@ export {
465
467
  ol,
466
468
  one_row,
467
469
  padding,
470
+ padding_in_footer,
468
471
  paragraph,
469
472
  person,
470
473
  picker_arrow,
@@ -506,6 +509,8 @@ export {
506
509
  shortUrl,
507
510
  show,
508
511
  single_container,
512
+ smb_section,
513
+ smb_wrapper,
509
514
  step_num,
510
515
  steps_wrapper,
511
516
  sticky_nav,
@@ -16,7 +16,8 @@ const moreDomains = {
16
16
  "{AFP}": process.env.AFP_URL || "https://afp.axosbank.com",
17
17
  "{INVESTORS}": process.env.INVESTORS_URL || "https://investors.axosfinancial.com",
18
18
  "{OBAXB}": process.env.ONLINEBANKING_URL || "https://onlinebanking.axosbank.com",
19
- "{UNVENROLLMENT}": String(process.env.UNVENROLLMENT_URL) || "https://enroll.axosbank.com"
19
+ "{UNVENROLLMENT}": String(process.env.UNVENROLLMENT_URL) || "https://enroll.axosbank.com",
20
+ "{AUTOAXB}": "https://auto.axosbank.com/partner/axos-purchase/AU"
20
21
  };
21
22
  const isAllowedUrl = (url) => {
22
23
  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.109",
4
+ "version": "0.0.110",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",