@axos-web-dev/shared-components 2.0.0-dev.18-apy.2 → 2.0.0-dev.18-apy.3
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.
|
@@ -32,7 +32,6 @@ export declare const field_error: string;
|
|
|
32
32
|
export declare const relative: string;
|
|
33
33
|
export declare const label_symbol: string;
|
|
34
34
|
export declare const percent: string;
|
|
35
|
-
export declare const submit_section: string;
|
|
36
35
|
export declare const span_12: string;
|
|
37
36
|
export declare const form_disclosure: string;
|
|
38
37
|
export declare const marketing: string;
|
|
@@ -68,5 +67,15 @@ export declare const result_value: string;
|
|
|
68
67
|
export declare const result_item: string;
|
|
69
68
|
export declare const result_item_label: string;
|
|
70
69
|
export declare const result_item_value: string;
|
|
70
|
+
export declare const result_image: string;
|
|
71
|
+
export declare const definitions_accordion: string;
|
|
72
|
+
export declare const definitions_button: string;
|
|
73
|
+
export declare const definitions_h2: string;
|
|
74
|
+
export declare const definitions_panel: string;
|
|
75
|
+
export declare const definitions_columns: string;
|
|
76
|
+
export declare const definitions_column: string;
|
|
77
|
+
export declare const definitions_item: string;
|
|
78
|
+
export declare const definitions_term: string;
|
|
79
|
+
export declare const definitions_text: string;
|
|
71
80
|
export declare const marketingTile: string;
|
|
72
81
|
export declare const bodyContent: string;
|
|
@@ -20,29 +20,38 @@ var field_error = "_1vox1xjf";
|
|
|
20
20
|
var relative = "_1vox1xjg";
|
|
21
21
|
var label_symbol = "_1vox1xjh";
|
|
22
22
|
var percent = "_1vox1xji";
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
-
var
|
|
23
|
+
var span_12 = "_1vox1xjj";
|
|
24
|
+
var form_disclosure = "_1vox1xjk";
|
|
25
|
+
var marketing = "_1vox1xjl";
|
|
26
|
+
var header_theme = createRuntimeFn({ defaultClassName: "_1vox1xjm", variantClassNames: { variant: { primary: "_1vox1xjn", secondary: "_1vox1xjo", tertiary: "_1vox1xjp", quaternary: "_1vox1xjq" } }, defaultVariants: {}, compoundVariants: [] });
|
|
27
|
+
var mt_8 = "_1vox1xjr";
|
|
28
|
+
var pis_0 = "_1vox1xjs";
|
|
29
|
+
var listbox_button = "_1vox1xjt";
|
|
30
|
+
var chevron_icon = "_1vox1xju";
|
|
31
|
+
var listbox_options = "_1vox1xjv";
|
|
32
|
+
var listbox_option = "_1vox1xjw";
|
|
33
|
+
var results_wrapper = "_1vox1xjx";
|
|
34
|
+
var optional_badge = "_1vox1xjy";
|
|
35
|
+
var scrambling = "_1vox1xj10";
|
|
36
|
+
var result_card = "_1vox1xj11";
|
|
37
|
+
var result_section = "_1vox1xj12";
|
|
38
|
+
var result_value_label = "_1vox1xj13";
|
|
39
|
+
var result_value = "_1vox1xj14";
|
|
40
|
+
var result_item = "_1vox1xj15";
|
|
41
|
+
var result_item_label = "_1vox1xj16";
|
|
42
|
+
var result_item_value = "_1vox1xj17";
|
|
43
|
+
var result_image = "_1vox1xj18";
|
|
44
|
+
var definitions_accordion = "_1vox1xj19";
|
|
45
|
+
var definitions_button = "_1vox1xj1a";
|
|
46
|
+
var definitions_h2 = "_1vox1xj1b";
|
|
47
|
+
var definitions_panel = "_1vox1xj1c";
|
|
48
|
+
var definitions_columns = "_1vox1xj1d";
|
|
49
|
+
var definitions_column = "_1vox1xj1e";
|
|
50
|
+
var definitions_item = "_1vox1xj1f";
|
|
51
|
+
var definitions_term = "_1vox1xj1g";
|
|
52
|
+
var definitions_text = "_1vox1xj1h";
|
|
53
|
+
var marketingTile = "_1vox1xj1i";
|
|
54
|
+
var bodyContent = "_1vox1xj1j";
|
|
46
55
|
export {
|
|
47
56
|
apy_calculator,
|
|
48
57
|
apy_calculator_form,
|
|
@@ -50,6 +59,15 @@ export {
|
|
|
50
59
|
calculator_section,
|
|
51
60
|
chevron_icon,
|
|
52
61
|
container,
|
|
62
|
+
definitions_accordion,
|
|
63
|
+
definitions_button,
|
|
64
|
+
definitions_column,
|
|
65
|
+
definitions_columns,
|
|
66
|
+
definitions_h2,
|
|
67
|
+
definitions_item,
|
|
68
|
+
definitions_panel,
|
|
69
|
+
definitions_term,
|
|
70
|
+
definitions_text,
|
|
53
71
|
errorTag,
|
|
54
72
|
field_error,
|
|
55
73
|
field_label,
|
|
@@ -71,6 +89,7 @@ export {
|
|
|
71
89
|
pis_0,
|
|
72
90
|
relative,
|
|
73
91
|
result_card,
|
|
92
|
+
result_image,
|
|
74
93
|
result_item,
|
|
75
94
|
result_item_label,
|
|
76
95
|
result_item_value,
|
|
@@ -80,6 +99,5 @@ export {
|
|
|
80
99
|
results_wrapper,
|
|
81
100
|
scrambling,
|
|
82
101
|
section_header,
|
|
83
|
-
span_12
|
|
84
|
-
submit_section
|
|
102
|
+
span_12
|
|
85
103
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useGlobalContext } from "../../Modal/contextApi/store.js";
|
|
4
4
|
import { getVariant } from "../../utils/getVariant.js";
|
|
5
5
|
import Image from "next/image.js";
|
|
6
|
-
import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption } from "@headlessui/react";
|
|
6
|
+
import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption, Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
|
|
7
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
7
8
|
import { useState, useCallback, useEffect, useRef } from "react";
|
|
8
|
-
import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, container } from "./ApyCalculator.css.js";
|
|
9
|
+
import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_image, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, definitions_accordion, definitions_button, definitions_h2, definitions_panel, definitions_columns, definitions_column, definitions_item, definitions_term, definitions_text, container } from "./ApyCalculator.css.js";
|
|
9
10
|
const COMPOUNDING_OPTIONS = [
|
|
10
11
|
{ value: 360, label: "Daily" },
|
|
11
12
|
{ value: 12, label: "Monthly" },
|
|
@@ -13,7 +14,45 @@ const COMPOUNDING_OPTIONS = [
|
|
|
13
14
|
{ value: 2, label: "Semi-Annual" },
|
|
14
15
|
{ value: 1, label: "Yearly" }
|
|
15
16
|
];
|
|
17
|
+
const CALCULATOR_DEFINITIONS = [
|
|
18
|
+
{
|
|
19
|
+
term: "Initial deposit",
|
|
20
|
+
description: "The amount of money you're starting with."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
term: "APY (Annual Percentage Yield)",
|
|
24
|
+
description: "The rate your money earns in a year, with compounding included."
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
term: "Months",
|
|
28
|
+
description: "How long you plan to keep your money in the account."
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
term: "Compounding",
|
|
32
|
+
description: "How often interest is calculated and added to your balance. APY on bank accounts usually compounds monthly."
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
term: "Monthly deposits",
|
|
36
|
+
description: "Any additional amount you plan to contribute each month."
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
term: "Interest earned",
|
|
40
|
+
description: "The amount gained from interest over the selected time period."
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
term: "Ending balance",
|
|
44
|
+
description: "Your projected balance at the end of the selected time period, based on the inputs above."
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
term: "Total deposits",
|
|
48
|
+
description: "The total money you contribute, including your initial and monthly deposits."
|
|
49
|
+
}
|
|
50
|
+
];
|
|
16
51
|
const SCRAMBLE_CHARS = "0123456789";
|
|
52
|
+
const DEFINITIONS_ITEM_TRANSITION = {
|
|
53
|
+
duration: 0.35,
|
|
54
|
+
ease: [0.22, 1, 0.36, 1]
|
|
55
|
+
};
|
|
17
56
|
function scrambleCurrency(target, progress) {
|
|
18
57
|
const formatted = target.toLocaleString("en-US", {
|
|
19
58
|
style: "currency",
|
|
@@ -142,6 +181,9 @@ const ApyCalculator = ({
|
|
|
142
181
|
const { display: endingBalanceDisplay, isScrambling: balanceScrambling } = useScramble(endingBalanceRaw);
|
|
143
182
|
const { display: totalDepositsDisplay, isScrambling: depositsScrambling } = useScramble(totalDepositsRaw);
|
|
144
183
|
const { display: interestEarnedDisplay, isScrambling: interestScrambling } = useScramble(interestEarnedRaw);
|
|
184
|
+
const midPoint = Math.ceil(CALCULATOR_DEFINITIONS.length / 2);
|
|
185
|
+
const leftDefinitions = CALCULATOR_DEFINITIONS.slice(0, midPoint);
|
|
186
|
+
const rightDefinitions = CALCULATOR_DEFINITIONS.slice(midPoint);
|
|
145
187
|
const calculate = useCallback(() => {
|
|
146
188
|
const newErrors = {};
|
|
147
189
|
if (!initialDeposit || initialDeposit <= 0 || Number.isNaN(initialDeposit)) {
|
|
@@ -205,7 +247,7 @@ const ApyCalculator = ({
|
|
|
205
247
|
/* @__PURE__ */ jsxs(
|
|
206
248
|
"div",
|
|
207
249
|
{
|
|
208
|
-
className: `${apy_calculator}
|
|
250
|
+
className: `${apy_calculator} flex between`,
|
|
209
251
|
style: { paddingBlock: "0px" },
|
|
210
252
|
children: [
|
|
211
253
|
/* @__PURE__ */ jsx("div", { className: calculator_section, children: /* @__PURE__ */ jsx("form", { id: "calculator_form", className: apy_calculator_form, children: /* @__PURE__ */ jsxs("div", { className: fieldset, children: [
|
|
@@ -411,9 +453,9 @@ const ApyCalculator = ({
|
|
|
411
453
|
{
|
|
412
454
|
src: "https://www.axos.com/images/5IyqVlv7El9K7hAX0vIGWG/axb-25th-growth-lg.png",
|
|
413
455
|
alt: "",
|
|
414
|
-
height:
|
|
415
|
-
width:
|
|
416
|
-
className:
|
|
456
|
+
height: 173,
|
|
457
|
+
width: 202,
|
|
458
|
+
className: `img_fluid ${result_image}`,
|
|
417
459
|
priority: true
|
|
418
460
|
}
|
|
419
461
|
),
|
|
@@ -430,7 +472,7 @@ const ApyCalculator = ({
|
|
|
430
472
|
),
|
|
431
473
|
/* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": "true", children: [
|
|
432
474
|
/* @__PURE__ */ jsxs("div", { className: result_item, children: [
|
|
433
|
-
/* @__PURE__ */ jsx("span", { className: result_item_label, children: "Ending Balance" }),
|
|
475
|
+
/* @__PURE__ */ jsx("span", { className: result_item_label, children: "Ending Balance:" }),
|
|
434
476
|
/* @__PURE__ */ jsx(
|
|
435
477
|
"span",
|
|
436
478
|
{
|
|
@@ -440,7 +482,7 @@ const ApyCalculator = ({
|
|
|
440
482
|
)
|
|
441
483
|
] }),
|
|
442
484
|
/* @__PURE__ */ jsxs("div", { className: result_item, children: [
|
|
443
|
-
/* @__PURE__ */ jsx("span", { className: result_item_label, children: "Total Deposits" }),
|
|
485
|
+
/* @__PURE__ */ jsx("span", { className: result_item_label, children: "Total Deposits:" }),
|
|
444
486
|
/* @__PURE__ */ jsx(
|
|
445
487
|
"span",
|
|
446
488
|
{
|
|
@@ -453,7 +495,88 @@ const ApyCalculator = ({
|
|
|
453
495
|
] }) })
|
|
454
496
|
]
|
|
455
497
|
}
|
|
456
|
-
)
|
|
498
|
+
),
|
|
499
|
+
/* @__PURE__ */ jsx("div", { id: "definitions", className: "push_up_24", children: /* @__PURE__ */ jsx(
|
|
500
|
+
"div",
|
|
501
|
+
{
|
|
502
|
+
className: `${definitions_accordion} ${apy_calculator}`,
|
|
503
|
+
"aria-label": "Calculator definitions",
|
|
504
|
+
style: { paddingBlock: "0px" },
|
|
505
|
+
children: /* @__PURE__ */ jsx(Disclosure, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
506
|
+
/* @__PURE__ */ jsxs(DisclosureButton, { className: definitions_button, children: [
|
|
507
|
+
/* @__PURE__ */ jsx("h2", { className: definitions_h2, children: "Calculator definitions" }),
|
|
508
|
+
/* @__PURE__ */ jsx(
|
|
509
|
+
"svg",
|
|
510
|
+
{
|
|
511
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
512
|
+
width: "20",
|
|
513
|
+
height: "20",
|
|
514
|
+
viewBox: "0 0 20 20",
|
|
515
|
+
fill: "none",
|
|
516
|
+
"aria-hidden": "true",
|
|
517
|
+
children: /* @__PURE__ */ jsx(
|
|
518
|
+
"path",
|
|
519
|
+
{
|
|
520
|
+
d: "M10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM10.625 8.75V14.375H9.375V8.75H10.625ZM10 5.625C10.5178 5.625 10.9375 6.04473 10.9375 6.5625C10.9375 7.08027 10.5178 7.5 10 7.5C9.48223 7.5 9.0625 7.08027 9.0625 6.5625C9.0625 6.04473 9.48223 5.625 10 5.625Z",
|
|
521
|
+
fill: "#435164"
|
|
522
|
+
}
|
|
523
|
+
)
|
|
524
|
+
}
|
|
525
|
+
)
|
|
526
|
+
] }),
|
|
527
|
+
/* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
|
|
528
|
+
DisclosurePanel,
|
|
529
|
+
{
|
|
530
|
+
static: true,
|
|
531
|
+
as: motion.div,
|
|
532
|
+
className: definitions_panel,
|
|
533
|
+
initial: { opacity: 0, height: 0, y: -6 },
|
|
534
|
+
animate: { opacity: 1, height: "auto", y: 0 },
|
|
535
|
+
exit: { opacity: 0, height: 0, y: -4 },
|
|
536
|
+
style: { overflow: "hidden" },
|
|
537
|
+
children: /* @__PURE__ */ jsxs("div", { className: definitions_columns, children: [
|
|
538
|
+
/* @__PURE__ */ jsx("div", { className: definitions_column, children: leftDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
|
|
539
|
+
motion.div,
|
|
540
|
+
{
|
|
541
|
+
className: definitions_item,
|
|
542
|
+
initial: { opacity: 0, y: 8 },
|
|
543
|
+
animate: { opacity: 1, y: 0 },
|
|
544
|
+
exit: { opacity: 0, y: 6 },
|
|
545
|
+
transition: {
|
|
546
|
+
...DEFINITIONS_ITEM_TRANSITION,
|
|
547
|
+
delay: index * 0.045
|
|
548
|
+
},
|
|
549
|
+
children: [
|
|
550
|
+
/* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
|
|
551
|
+
/* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
|
|
552
|
+
]
|
|
553
|
+
},
|
|
554
|
+
definition.term
|
|
555
|
+
)) }),
|
|
556
|
+
/* @__PURE__ */ jsx("div", { className: definitions_column, children: rightDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
|
|
557
|
+
motion.div,
|
|
558
|
+
{
|
|
559
|
+
className: definitions_item,
|
|
560
|
+
initial: { opacity: 0, y: 8 },
|
|
561
|
+
animate: { opacity: 1, y: 0 },
|
|
562
|
+
exit: { opacity: 0, y: 6 },
|
|
563
|
+
transition: {
|
|
564
|
+
...DEFINITIONS_ITEM_TRANSITION,
|
|
565
|
+
delay: (leftDefinitions.length + index) * 0.045
|
|
566
|
+
},
|
|
567
|
+
children: [
|
|
568
|
+
/* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
|
|
569
|
+
/* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
|
|
570
|
+
]
|
|
571
|
+
},
|
|
572
|
+
definition.term
|
|
573
|
+
)) })
|
|
574
|
+
] })
|
|
575
|
+
}
|
|
576
|
+
) })
|
|
577
|
+
] }) })
|
|
578
|
+
}
|
|
579
|
+
) })
|
|
457
580
|
]
|
|
458
581
|
}
|
|
459
582
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _1vox1xjz {
|
|
2
2
|
0% {
|
|
3
3
|
opacity: 1;
|
|
4
4
|
}
|
|
@@ -32,15 +32,23 @@
|
|
|
32
32
|
color: var(--_1073cm8o);
|
|
33
33
|
}
|
|
34
34
|
._1vox1xj5 {
|
|
35
|
-
padding:
|
|
35
|
+
padding-block: 48px;
|
|
36
|
+
}
|
|
37
|
+
._1vox1xj5 ._1vox1xj5 {
|
|
38
|
+
gap: 32px;
|
|
39
|
+
width: calc(100% - 2rem);
|
|
40
|
+
margin-inline: auto;
|
|
36
41
|
}
|
|
37
42
|
._1vox1xj6 {
|
|
38
|
-
|
|
43
|
+
flex: 1 1 0%;
|
|
39
44
|
}
|
|
40
45
|
._1vox1xj7 {
|
|
41
|
-
margin-bottom:
|
|
46
|
+
margin-bottom: 48px;
|
|
42
47
|
text-align: center;
|
|
43
48
|
}
|
|
49
|
+
._1vox1xj8 {
|
|
50
|
+
height: 100%;
|
|
51
|
+
}
|
|
44
52
|
._1vox1xj9 {
|
|
45
53
|
color: red;
|
|
46
54
|
font-size: larger;
|
|
@@ -48,31 +56,36 @@
|
|
|
48
56
|
}
|
|
49
57
|
._1vox1xja {
|
|
50
58
|
background-color: var(--_1073cm81);
|
|
51
|
-
border: 1px solid #c9e6f7;
|
|
52
59
|
border-radius: 1rem;
|
|
53
60
|
padding: 2rem;
|
|
61
|
+
height: 100%;
|
|
54
62
|
}
|
|
55
63
|
._1vox1xjb {
|
|
56
64
|
margin-top: 1.3rem;
|
|
57
65
|
}
|
|
66
|
+
._1vox1xja ._1vox1xjb {
|
|
67
|
+
margin-top: 16px;
|
|
68
|
+
}
|
|
58
69
|
._1vox1xjc {
|
|
59
|
-
color:
|
|
70
|
+
color: #435164;
|
|
60
71
|
font-family: var(--header-font-family);
|
|
61
72
|
font-size: 18px;
|
|
62
73
|
font-weight: 700;
|
|
63
74
|
margin-bottom: 4px;
|
|
64
75
|
padding-left: 16px;
|
|
76
|
+
line-height: 1.15;
|
|
65
77
|
}
|
|
66
78
|
._1vox1xjd {
|
|
67
79
|
-webkit-appearance: none;
|
|
68
|
-
border: 1px solid #
|
|
69
|
-
border-radius:
|
|
70
|
-
color: #
|
|
71
|
-
font-
|
|
72
|
-
font-size: 18px;
|
|
80
|
+
border: 1px solid #F0F0F0;
|
|
81
|
+
border-radius: 4px;
|
|
82
|
+
color: #626E7D;
|
|
83
|
+
font-weight: 500;
|
|
73
84
|
letter-spacing: .3px;
|
|
85
|
+
line-height: 1.5;
|
|
74
86
|
outline: 0;
|
|
75
|
-
padding:
|
|
87
|
+
padding: 12px 16px;
|
|
88
|
+
transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
|
|
76
89
|
}
|
|
77
90
|
._1vox1xjd:focus {
|
|
78
91
|
border-color: #1e629a;
|
|
@@ -85,6 +98,7 @@
|
|
|
85
98
|
}
|
|
86
99
|
._1vox1xje {
|
|
87
100
|
border-color: var(--_1073cm8t) !important;
|
|
101
|
+
transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
|
|
88
102
|
}
|
|
89
103
|
._1vox1xje:focus {
|
|
90
104
|
border-color: var(--_1073cm8t) !important;
|
|
@@ -110,42 +124,42 @@
|
|
|
110
124
|
user-select: none;
|
|
111
125
|
}
|
|
112
126
|
._1vox1xji {
|
|
113
|
-
top:
|
|
114
|
-
right:
|
|
127
|
+
top: 38px;
|
|
128
|
+
right: 16px;
|
|
115
129
|
}
|
|
116
|
-
.
|
|
130
|
+
._1vox1xjj {
|
|
117
131
|
width: 100%;
|
|
118
132
|
}
|
|
119
|
-
.
|
|
133
|
+
._1vox1xjk > p {
|
|
120
134
|
font-size: 14px;
|
|
121
135
|
line-height: 1.3;
|
|
122
136
|
margin-bottom: 10px;
|
|
123
137
|
letter-spacing: .2px;
|
|
124
138
|
}
|
|
125
|
-
.
|
|
139
|
+
._1vox1xjl {
|
|
126
140
|
display: flex !important;
|
|
127
141
|
flex-direction: column;
|
|
128
142
|
align-items: center;
|
|
129
143
|
}
|
|
130
|
-
.
|
|
144
|
+
._1vox1xjn {
|
|
131
145
|
color: var(--_1073cm85);
|
|
132
146
|
}
|
|
133
|
-
.
|
|
147
|
+
._1vox1xjo {
|
|
134
148
|
color: var(--_1073cm8c);
|
|
135
149
|
}
|
|
136
|
-
.
|
|
150
|
+
._1vox1xjp {
|
|
137
151
|
color: var(--_1073cm8j);
|
|
138
152
|
}
|
|
139
|
-
.
|
|
153
|
+
._1vox1xjq {
|
|
140
154
|
color: var(--_1073cm8q);
|
|
141
155
|
}
|
|
142
|
-
.
|
|
156
|
+
._1vox1xjr {
|
|
143
157
|
margin-top: 0.5rem;
|
|
144
158
|
}
|
|
145
|
-
.
|
|
159
|
+
._1vox1xjs {
|
|
146
160
|
padding-inline-start: 0;
|
|
147
161
|
}
|
|
148
|
-
.
|
|
162
|
+
._1vox1xjt {
|
|
149
163
|
display: flex;
|
|
150
164
|
align-items: center;
|
|
151
165
|
background: #ffffff;
|
|
@@ -154,20 +168,20 @@
|
|
|
154
168
|
text-align: left;
|
|
155
169
|
width: 100%;
|
|
156
170
|
}
|
|
157
|
-
.
|
|
171
|
+
._1vox1xju {
|
|
158
172
|
color: #6b7280;
|
|
159
173
|
flex-shrink: 0;
|
|
160
174
|
height: 20px;
|
|
161
175
|
transition: transform 200ms ease;
|
|
162
176
|
width: 20px;
|
|
163
177
|
}
|
|
164
|
-
[data-open] .
|
|
178
|
+
[data-open] ._1vox1xju {
|
|
165
179
|
transform: rotate(180deg);
|
|
166
180
|
}
|
|
167
|
-
.
|
|
181
|
+
._1vox1xjv {
|
|
168
182
|
background: #ffffff;
|
|
169
183
|
border: 1px solid #c9e6f7;
|
|
170
|
-
border-radius:
|
|
184
|
+
border-radius: 4px;
|
|
171
185
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
172
186
|
margin-block: 4px;
|
|
173
187
|
min-width: var(--button-width);
|
|
@@ -175,139 +189,228 @@
|
|
|
175
189
|
padding: 12px;
|
|
176
190
|
z-index: 50;
|
|
177
191
|
}
|
|
178
|
-
.
|
|
192
|
+
._1vox1xjw {
|
|
179
193
|
border: 1px solid transparent;
|
|
180
194
|
border-radius: 8px;
|
|
181
|
-
color: #
|
|
195
|
+
color: #626E7D;
|
|
182
196
|
cursor: pointer;
|
|
183
|
-
font-family: var(--header-font-family);
|
|
184
197
|
padding: 8px 16px;
|
|
185
198
|
}
|
|
186
|
-
.
|
|
199
|
+
._1vox1xjw[data-selected], ._1vox1xjw[data-focus] {
|
|
187
200
|
background: #e9f8ff;
|
|
188
201
|
border-color: #c9e6f7;
|
|
189
202
|
color: #1e3860;
|
|
190
203
|
}
|
|
191
|
-
.
|
|
204
|
+
._1vox1xjw[data-selected] {
|
|
192
205
|
font-weight: 700;
|
|
193
206
|
}
|
|
194
|
-
.
|
|
207
|
+
._1vox1xjx {
|
|
195
208
|
width: 100%;
|
|
196
|
-
max-width:
|
|
209
|
+
max-width: 466px;
|
|
210
|
+
display: flex;
|
|
197
211
|
}
|
|
198
|
-
.
|
|
212
|
+
._1vox1xjy {
|
|
199
213
|
color: #6b7280;
|
|
200
214
|
font-size: 13px;
|
|
201
215
|
font-weight: 400;
|
|
202
216
|
letter-spacing: .2px;
|
|
203
217
|
margin-left: 6px;
|
|
204
218
|
}
|
|
205
|
-
.
|
|
206
|
-
animation:
|
|
219
|
+
._1vox1xj10 {
|
|
220
|
+
animation: _1vox1xjz 120ms linear infinite;
|
|
207
221
|
filter: blur(0.3px);
|
|
208
222
|
opacity: 0.85;
|
|
209
223
|
}
|
|
210
|
-
.
|
|
224
|
+
._1vox1xj11 {
|
|
211
225
|
background: #ffffff;
|
|
212
|
-
border: 1px solid #c9e6f7;
|
|
213
226
|
border-radius: 1rem;
|
|
214
|
-
padding:
|
|
227
|
+
padding: 32px;
|
|
215
228
|
width: 100%;
|
|
216
229
|
min-width: 1px;
|
|
217
230
|
}
|
|
218
|
-
.
|
|
219
|
-
background: url('https://www.axos.com/images/7FwQ1qLxA0zA7tLWlsqJNr/current.svg') #1e3860 left / cover;
|
|
220
|
-
border-radius:
|
|
231
|
+
._1vox1xj12 {
|
|
232
|
+
background: url('https://www.axos.com/images/7FwQ1qLxA0zA7tLWlsqJNr/current.svg') #1e3860 left 32% / cover;
|
|
233
|
+
border-radius: 16px;
|
|
221
234
|
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
|
|
222
235
|
color: #ffffff;
|
|
223
236
|
display: flex;
|
|
224
237
|
align-items: center;
|
|
225
238
|
flex-direction: column;
|
|
226
239
|
justify-content: center;
|
|
227
|
-
margin-bottom:
|
|
228
|
-
padding:
|
|
240
|
+
margin-bottom: 13px;
|
|
241
|
+
padding: 32px 24px;
|
|
229
242
|
text-align: center;
|
|
243
|
+
container-type: inline-size;
|
|
230
244
|
}
|
|
231
|
-
.
|
|
245
|
+
._1vox1xj13 {
|
|
232
246
|
font-family: var(--header-font-family);
|
|
233
|
-
font-size:
|
|
234
|
-
font-weight:
|
|
247
|
+
font-size: clamp(18px,6.78cqw, 24px);
|
|
248
|
+
font-weight: 700;
|
|
235
249
|
letter-spacing: .5px;
|
|
250
|
+
line-height: 1.15;
|
|
236
251
|
margin-top: 3px;
|
|
237
252
|
}
|
|
238
|
-
.
|
|
239
|
-
font:
|
|
253
|
+
._1vox1xj14 {
|
|
254
|
+
font: 800 56px / 1.15 var(--header-font-family);
|
|
240
255
|
font-variant-numeric: tabular-nums;
|
|
241
256
|
letter-spacing: -1px;
|
|
242
|
-
margin-top:
|
|
257
|
+
margin-top: 10px;
|
|
243
258
|
transition: color 200ms ease;
|
|
259
|
+
font-size: clamp(38px, 15.82cqw, 56px);
|
|
260
|
+
text-shadow: 1px 1px 4px #1e3860;
|
|
244
261
|
}
|
|
245
|
-
.
|
|
262
|
+
._1vox1xj15 {
|
|
246
263
|
display: flex;
|
|
247
264
|
align-items: center;
|
|
248
265
|
justify-content: space-between;
|
|
249
|
-
padding:
|
|
266
|
+
padding-block: 12px;
|
|
250
267
|
}
|
|
251
|
-
.
|
|
268
|
+
._1vox1xj15 + ._1vox1xj15 {
|
|
252
269
|
border-top: 1px solid #F3F4F6;
|
|
270
|
+
padding-bottom: 0px;
|
|
253
271
|
}
|
|
254
|
-
.
|
|
255
|
-
color:
|
|
256
|
-
font-size:
|
|
257
|
-
font-weight:
|
|
272
|
+
._1vox1xj16 {
|
|
273
|
+
color: var(--_1073cm85);
|
|
274
|
+
font-size: 18px;
|
|
275
|
+
font-weight: 700;
|
|
276
|
+
font-family: var(--header-font-family);
|
|
277
|
+
line-height: 1.15;
|
|
258
278
|
}
|
|
259
|
-
.
|
|
279
|
+
._1vox1xj17 {
|
|
260
280
|
color: var(--_1073cm85);
|
|
261
281
|
font-variant-numeric: tabular-nums;
|
|
262
|
-
font-weight:
|
|
282
|
+
font-weight: 400;
|
|
283
|
+
font-family: var(--header-font-family);
|
|
284
|
+
}
|
|
285
|
+
._1vox1xj1a {
|
|
286
|
+
display: flex;
|
|
287
|
+
align-items: center;
|
|
288
|
+
background: transparent;
|
|
289
|
+
border: 0;
|
|
290
|
+
color: var(--_1073cm85);
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
gap: 8px;
|
|
293
|
+
padding: 0 0 0 8px;
|
|
294
|
+
}
|
|
295
|
+
._1vox1xj1b {
|
|
296
|
+
font-size: 16px;
|
|
297
|
+
line-height: 1.15;
|
|
298
|
+
}
|
|
299
|
+
._1vox1xj1c {
|
|
300
|
+
border-top: 1px solid var(--_1073cm85);
|
|
301
|
+
margin-top: 24px;
|
|
302
|
+
padding-top: 24px;
|
|
303
|
+
}
|
|
304
|
+
._1vox1xj1d {
|
|
305
|
+
display: grid;
|
|
306
|
+
gap: 24px;
|
|
307
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
308
|
+
}
|
|
309
|
+
._1vox1xj1e {
|
|
310
|
+
display: grid;
|
|
311
|
+
gap: 24px;
|
|
312
|
+
}
|
|
313
|
+
._1vox1xj1f {
|
|
314
|
+
display: grid;
|
|
315
|
+
gap: 3px;
|
|
263
316
|
}
|
|
264
|
-
.
|
|
317
|
+
._1vox1xj1g {
|
|
318
|
+
color: var(--_1073cm83);
|
|
319
|
+
font-family: var(--main-font-family);
|
|
320
|
+
font-size: 16px;
|
|
321
|
+
line-height: 1.15;
|
|
322
|
+
}
|
|
323
|
+
._1vox1xj1h {
|
|
324
|
+
color: var(--_1073cm83);
|
|
325
|
+
line-height: 1.5;
|
|
326
|
+
}
|
|
327
|
+
._1vox1xj1i {
|
|
265
328
|
padding: 2rem;
|
|
266
329
|
width: 100%;
|
|
267
330
|
}
|
|
268
|
-
.
|
|
331
|
+
._1vox1xj1j {
|
|
269
332
|
margin-bottom: 1rem;
|
|
270
333
|
}
|
|
271
|
-
@media screen and (
|
|
272
|
-
._1vox1xj5 {
|
|
273
|
-
|
|
274
|
-
justify-content: center !important;
|
|
334
|
+
@media screen and (min-width:604px) {
|
|
335
|
+
._1vox1xj5 ._1vox1xj5 {
|
|
336
|
+
width: min(466px, calc(100% - 4rem));
|
|
275
337
|
}
|
|
276
|
-
|
|
277
|
-
|
|
338
|
+
}
|
|
339
|
+
@media screen and (min-width:931px) {
|
|
340
|
+
._1vox1xj5 ._1vox1xj5 {
|
|
341
|
+
width: min(1136px, calc(100% - 4rem));
|
|
278
342
|
}
|
|
279
343
|
}
|
|
280
|
-
@media screen and (
|
|
344
|
+
@media screen and (max-width:930px) {
|
|
345
|
+
._1vox1xj5 {
|
|
346
|
+
flex-direction: column;
|
|
347
|
+
align-items: stretch !important;
|
|
348
|
+
}
|
|
281
349
|
._1vox1xj5 ._1vox1xj5 {
|
|
282
|
-
|
|
350
|
+
gap: 24px;
|
|
351
|
+
}
|
|
352
|
+
._1vox1xjx {
|
|
353
|
+
max-width: none;
|
|
354
|
+
}
|
|
355
|
+
._1vox1xj1c {
|
|
356
|
+
margin-top: 16px;
|
|
357
|
+
padding-top: 16px;
|
|
358
|
+
}
|
|
359
|
+
._1vox1xj1d {
|
|
360
|
+
grid-template-columns: 1fr;
|
|
361
|
+
gap: 16px;
|
|
362
|
+
}
|
|
363
|
+
._1vox1xj1e {
|
|
364
|
+
gap: 16px;
|
|
283
365
|
}
|
|
284
366
|
}
|
|
285
367
|
@media screen and (max-width:768px) {
|
|
368
|
+
._1vox1xj5 {
|
|
369
|
+
padding-block: 32px;
|
|
370
|
+
}
|
|
286
371
|
._1vox1xj7 {
|
|
287
|
-
margin-bottom:
|
|
372
|
+
margin-bottom: 32px;
|
|
288
373
|
}
|
|
289
374
|
}
|
|
290
375
|
@media screen and (max-width:603px) {
|
|
291
376
|
._1vox1xja {
|
|
292
|
-
padding:
|
|
377
|
+
padding: 1.5rem;
|
|
293
378
|
}
|
|
294
379
|
._1vox1xjc {
|
|
380
|
+
font-size: 14px;
|
|
381
|
+
}
|
|
382
|
+
._1vox1xjd {
|
|
295
383
|
font-size: 1rem;
|
|
296
384
|
}
|
|
297
385
|
._1vox1xji {
|
|
298
|
-
top:
|
|
386
|
+
top: 33px;
|
|
387
|
+
}
|
|
388
|
+
._1vox1xj11 {
|
|
389
|
+
padding: 1.5rem;
|
|
390
|
+
}
|
|
391
|
+
._1vox1xj16 {
|
|
392
|
+
font-size: 16px;
|
|
393
|
+
}
|
|
394
|
+
._1vox1xj17 {
|
|
395
|
+
font-size: 16px;
|
|
396
|
+
}
|
|
397
|
+
._1vox1xj18 {
|
|
398
|
+
max-width: 127px;
|
|
399
|
+
height: auto;
|
|
299
400
|
}
|
|
300
401
|
}
|
|
301
|
-
@media screen and (max-width:
|
|
302
|
-
.
|
|
303
|
-
|
|
402
|
+
@media screen and (max-width:316px) {
|
|
403
|
+
._1vox1xji {
|
|
404
|
+
top: 49px;
|
|
304
405
|
}
|
|
305
|
-
|
|
406
|
+
}
|
|
407
|
+
@media screen and (max-width:1023px) {
|
|
408
|
+
._1vox1xjk {
|
|
306
409
|
margin-top: 1rem;
|
|
307
410
|
}
|
|
308
411
|
}
|
|
309
412
|
@media screen and (max-width:1124px) {
|
|
310
|
-
.
|
|
413
|
+
._1vox1xjl {
|
|
311
414
|
margin-top: 2rem;
|
|
312
415
|
}
|
|
313
416
|
}
|
package/package.json
CHANGED