@axos-web-dev/shared-components 2.0.0-dev.18-apy.1 → 2.0.0-dev.18-apy.2

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 prefix_pad: string;
36
35
  export declare const submit_section: string;
37
36
  export declare const span_12: string;
38
37
  export declare const form_disclosure: string;
@@ -20,30 +20,29 @@ var field_error = "_1vox1xjf";
20
20
  var relative = "_1vox1xjg";
21
21
  var label_symbol = "_1vox1xjh";
22
22
  var percent = "_1vox1xji";
23
- var prefix_pad = "_1vox1xjj";
24
- var submit_section = "_1vox1xjk";
25
- var span_12 = "_1vox1xjl";
26
- var form_disclosure = "_1vox1xjm";
27
- var marketing = "_1vox1xjn";
28
- var header_theme = createRuntimeFn({ defaultClassName: "_1vox1xjo", variantClassNames: { variant: { primary: "_1vox1xjp", secondary: "_1vox1xjq", tertiary: "_1vox1xjr", quaternary: "_1vox1xjs" } }, defaultVariants: {}, compoundVariants: [] });
29
- var mt_8 = "_1vox1xjt";
30
- var pis_0 = "_1vox1xju";
31
- var listbox_button = "_1vox1xjv";
32
- var chevron_icon = "_1vox1xjw";
33
- var listbox_options = "_1vox1xjx";
34
- var listbox_option = "_1vox1xjy";
35
- var results_wrapper = "_1vox1xjz";
36
- var optional_badge = "_1vox1xj10";
37
- var scrambling = "_1vox1xj12";
38
- var result_card = "_1vox1xj13";
39
- var result_section = "_1vox1xj14";
40
- var result_value_label = "_1vox1xj15";
41
- var result_value = "_1vox1xj16";
42
- var result_item = "_1vox1xj17";
43
- var result_item_label = "_1vox1xj18";
44
- var result_item_value = "_1vox1xj19";
45
- var marketingTile = "_1vox1xj1a";
46
- var bodyContent = "_1vox1xj1b";
23
+ var submit_section = "_1vox1xjj";
24
+ var span_12 = "_1vox1xjk";
25
+ var form_disclosure = "_1vox1xjl";
26
+ var marketing = "_1vox1xjm";
27
+ var header_theme = createRuntimeFn({ defaultClassName: "_1vox1xjn", variantClassNames: { variant: { primary: "_1vox1xjo", secondary: "_1vox1xjp", tertiary: "_1vox1xjq", quaternary: "_1vox1xjr" } }, defaultVariants: {}, compoundVariants: [] });
28
+ var mt_8 = "_1vox1xjs";
29
+ var pis_0 = "_1vox1xjt";
30
+ var listbox_button = "_1vox1xju";
31
+ var chevron_icon = "_1vox1xjv";
32
+ var listbox_options = "_1vox1xjw";
33
+ var listbox_option = "_1vox1xjx";
34
+ var results_wrapper = "_1vox1xjy";
35
+ var optional_badge = "_1vox1xjz";
36
+ var scrambling = "_1vox1xj11";
37
+ var result_card = "_1vox1xj12";
38
+ var result_section = "_1vox1xj13";
39
+ var result_value_label = "_1vox1xj14";
40
+ var result_value = "_1vox1xj15";
41
+ var result_item = "_1vox1xj16";
42
+ var result_item_label = "_1vox1xj17";
43
+ var result_item_value = "_1vox1xj18";
44
+ var marketingTile = "_1vox1xj19";
45
+ var bodyContent = "_1vox1xj1a";
47
46
  export {
48
47
  apy_calculator,
49
48
  apy_calculator_form,
@@ -70,7 +69,6 @@ export {
70
69
  optional_badge,
71
70
  percent,
72
71
  pis_0,
73
- prefix_pad,
74
72
  relative,
75
73
  result_card,
76
74
  result_item,
@@ -99,7 +99,9 @@ const ApyCalculator = ({
99
99
  formatWithCommas(1e4)
100
100
  );
101
101
  const [APY, setAPY] = useState(AXOS_ONE_APY);
102
+ const [APYDisplay, setAPYDisplay] = useState(APY.toString());
102
103
  const [months, setMonths] = useState(12);
104
+ const [monthsDisplay, setMonthsDisplay] = useState(months.toString());
103
105
  const [monthlyDeposits, setMonthlyDeposits] = useState(100);
104
106
  const [monthlyDepositsDisplay, setMonthlyDepositsDisplay] = useState(
105
107
  formatWithCommas(100)
@@ -122,6 +124,18 @@ const ApyCalculator = ({
122
124
  setMonthlyDeposits(num);
123
125
  setMonthlyDepositsDisplay(formatWithCommas(num));
124
126
  };
127
+ const handleMonthsChange = (e) => {
128
+ const raw = e.target.value;
129
+ const num = parseInt(raw.replace(/[^0-9]/g, ""), 10);
130
+ setMonths(num);
131
+ setMonthsDisplay(num > 0 ? num.toString() : "");
132
+ };
133
+ const handleAPYChange = (e) => {
134
+ const raw = e.target.value;
135
+ const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
136
+ setAPY(num);
137
+ setAPYDisplay(raw);
138
+ };
125
139
  const [endingBalanceRaw, setEndingBalanceRaw] = useState(0);
126
140
  const [totalDepositsRaw, setTotalDepositsRaw] = useState(0);
127
141
  const [interestEarnedRaw, setInterestEarnedRaw] = useState(0);
@@ -194,7 +208,7 @@ const ApyCalculator = ({
194
208
  className: `${apy_calculator} containment flex between gap_24`,
195
209
  style: { paddingBlock: "0px" },
196
210
  children: [
197
- /* @__PURE__ */ jsx("div", { className: `${calculator_section}`, children: /* @__PURE__ */ jsx("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: /* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
211
+ /* @__PURE__ */ jsx("div", { className: calculator_section, children: /* @__PURE__ */ jsx("form", { id: "calculator_form", className: apy_calculator_form, children: /* @__PURE__ */ jsxs("div", { className: fieldset, children: [
198
212
  /* @__PURE__ */ jsxs(
199
213
  Field,
200
214
  {
@@ -244,11 +258,12 @@ const ApyCalculator = ({
244
258
  {
245
259
  className: `${field_row_input} ${fieldErrors.APY ? ` ${field_row_input_error}` : ""}`,
246
260
  id: "apy",
247
- type: "number",
261
+ type: "text",
262
+ inputMode: "numeric",
248
263
  name: "apy",
249
264
  min: 0,
250
- value: APY,
251
- onChange: (e) => setAPY(parseFloat(e.target.value)),
265
+ value: APYDisplay,
266
+ onChange: handleAPYChange,
252
267
  "aria-invalid": !!fieldErrors.APY,
253
268
  "aria-describedby": fieldErrors.APY ? "apy-error" : void 0
254
269
  }
@@ -272,10 +287,11 @@ const ApyCalculator = ({
272
287
  className: `${field_row_input}${fieldErrors.months ? ` ${field_row_input_error}` : ""}`,
273
288
  id: "months",
274
289
  min: 1,
275
- type: "number",
290
+ type: "text",
291
+ inputMode: "numeric",
276
292
  name: "months",
277
- value: months,
278
- onChange: (e) => setMonths(parseInt(e.target.value)),
293
+ value: monthsDisplay,
294
+ onChange: handleMonthsChange,
279
295
  "aria-invalid": !!fieldErrors.months,
280
296
  "aria-describedby": fieldErrors.months ? "months-error" : void 0
281
297
  }
@@ -1,42 +1,42 @@
1
- import '../../assets/NavigationMenu/AxosBank/NavBar.css';const header = "_header_1epiq_1";
2
- const wrapper = "_wrapper_1epiq_9";
3
- const header_main_row = "_header_main_row_1epiq_21";
4
- const logo_wrap = "_logo_wrap_1epiq_33";
5
- const primary_links = "_primary_links_1epiq_41";
6
- const main_nav_link = "_main_nav_link_1epiq_49";
7
- const sub_nav_link = "_sub_nav_link_1epiq_113";
8
- const signin_wrap = "_signin_wrap_1epiq_117";
9
- const signin_btn = "_signin_btn_1epiq_119";
10
- const header_sub_row = "_header_sub_row_1epiq_195";
11
- const signin_dropdown = "_signin_dropdown_1epiq_261";
12
- const shadow = "_shadow_1epiq_281";
13
- const signin_header = "_signin_header_1epiq_301";
14
- const signin_subheader = "_signin_subheader_1epiq_315";
15
- const opacity = "_opacity_1epiq_357";
16
- const fadeInDown = "_fadeInDown_1epiq_1";
17
- const signin_footer = "_signin_footer_1epiq_369";
18
- const open = "_open_1epiq_411";
19
- const dd_wrapper = "_dd_wrapper_1epiq_435";
20
- const dd_media = "_dd_media_1epiq_453";
21
- const dd_media_img = "_dd_media_img_1epiq_463";
22
- const dd_site_navs = "_dd_site_navs_1epiq_471";
23
- const dd_media_header = "_dd_media_header_1epiq_485";
24
- const mt_8 = "_mt_8_1epiq_507";
25
- const mt_16 = "_mt_16_1epiq_515";
26
- const ml_8 = "_ml_8_1epiq_523";
27
- const reversed_row = "_reversed_row_1epiq_531";
28
- const headline = "_headline_1epiq_539";
29
- const nav_anchor = "_nav_anchor_1epiq_555";
30
- const headline_cta = "_headline_cta_1epiq_571";
31
- const site_lists = "_site_lists_1epiq_603";
32
- const modify_fit = "_modify_fit_1epiq_643";
33
- const mobile_only = "_mobile_only_1epiq_693";
34
- const mobile_logo = "_mobile_logo_1epiq_705";
35
- const highlight = "_highlight_1epiq_719";
36
- const mobile_opened = "_mobile_opened_1epiq_731";
37
- const dd_footer = "_dd_footer_1epiq_747";
38
- const skip_btn = "_skip_btn_1epiq_763";
39
- const desktop_only = "_desktop_only_1epiq_835";
1
+ import '../../assets/NavigationMenu/AxosBank/NavBar.css';const header = "_header_4c252_1";
2
+ const wrapper = "_wrapper_4c252_5";
3
+ const header_main_row = "_header_main_row_4c252_11";
4
+ const logo_wrap = "_logo_wrap_4c252_17";
5
+ const primary_links = "_primary_links_4c252_21";
6
+ const main_nav_link = "_main_nav_link_4c252_25";
7
+ const sub_nav_link = "_sub_nav_link_4c252_57";
8
+ const signin_wrap = "_signin_wrap_4c252_59";
9
+ const signin_btn = "_signin_btn_4c252_60";
10
+ const header_sub_row = "_header_sub_row_4c252_98";
11
+ const signin_dropdown = "_signin_dropdown_4c252_131";
12
+ const shadow = "_shadow_4c252_141";
13
+ const signin_header = "_signin_header_4c252_151";
14
+ const signin_subheader = "_signin_subheader_4c252_158";
15
+ const opacity = "_opacity_4c252_179";
16
+ const fadeInDown = "_fadeInDown_4c252_1";
17
+ const signin_footer = "_signin_footer_4c252_185";
18
+ const open = "_open_4c252_206";
19
+ const dd_wrapper = "_dd_wrapper_4c252_218";
20
+ const dd_media = "_dd_media_4c252_227";
21
+ const dd_media_img = "_dd_media_img_4c252_232";
22
+ const dd_site_navs = "_dd_site_navs_4c252_236";
23
+ const dd_media_header = "_dd_media_header_4c252_243";
24
+ const mt_8 = "_mt_8_4c252_254";
25
+ const mt_16 = "_mt_16_4c252_258";
26
+ const ml_8 = "_ml_8_4c252_262";
27
+ const reversed_row = "_reversed_row_4c252_266";
28
+ const headline = "_headline_4c252_270";
29
+ const nav_anchor = "_nav_anchor_4c252_278";
30
+ const headline_cta = "_headline_cta_4c252_286";
31
+ const site_lists = "_site_lists_4c252_302";
32
+ const modify_fit = "_modify_fit_4c252_322";
33
+ const mobile_only = "_mobile_only_4c252_347";
34
+ const mobile_logo = "_mobile_logo_4c252_353";
35
+ const highlight = "_highlight_4c252_360";
36
+ const mobile_opened = "_mobile_opened_4c252_366";
37
+ const dd_footer = "_dd_footer_4c252_374";
38
+ const skip_btn = "_skip_btn_4c252_382";
39
+ const desktop_only = "_desktop_only_4c252_418";
40
40
  const styles = {
41
41
  header,
42
42
  wrapper,
@@ -1,4 +1,4 @@
1
- @keyframes _1vox1xj11 {
1
+ @keyframes _1vox1xj10 {
2
2
  0% {
3
3
  opacity: 1;
4
4
  }
@@ -47,10 +47,10 @@
47
47
  list-style: none;
48
48
  }
49
49
  ._1vox1xja {
50
- border-radius: 1rem;
51
50
  background-color: var(--_1073cm81);
52
- padding: 2rem;
53
51
  border: 1px solid #c9e6f7;
52
+ border-radius: 1rem;
53
+ padding: 2rem;
54
54
  }
55
55
  ._1vox1xjb {
56
56
  margin-top: 1.3rem;
@@ -68,11 +68,11 @@
68
68
  border: 1px solid #c9e6f7;
69
69
  border-radius: 12px;
70
70
  color: #363636;
71
+ font-family: var(--header-font-family);
71
72
  font-size: 18px;
72
73
  letter-spacing: .3px;
73
74
  outline: 0;
74
75
  padding: 14px 16px;
75
- font-family: var(--header-font-family);
76
76
  }
77
77
  ._1vox1xjd:focus {
78
78
  border-color: #1e629a;
@@ -93,138 +93,132 @@
93
93
  }
94
94
  ._1vox1xjf {
95
95
  color: var(--_1073cm8t);
96
+ display: block;
96
97
  font-size: 13px;
97
98
  font-weight: 500;
98
99
  margin-top: 5px;
99
100
  padding-left: 16px;
100
- display: block;
101
101
  }
102
102
  ._1vox1xjg {
103
103
  position: relative;
104
104
  }
105
105
  ._1vox1xjh {
106
- position: absolute;
107
106
  color: #363636;
108
107
  font-size: 16px;
109
108
  pointer-events: none;
109
+ position: absolute;
110
110
  user-select: none;
111
111
  }
112
112
  ._1vox1xji {
113
113
  top: 47px;
114
114
  right: 18px;
115
115
  }
116
- ._1vox1xjj {
117
- padding-left: 29px;
118
- }
119
- ._1vox1xjl {
116
+ ._1vox1xjk {
120
117
  width: 100%;
121
118
  }
122
- ._1vox1xjm > p {
119
+ ._1vox1xjl > p {
123
120
  font-size: 14px;
124
121
  line-height: 1.3;
125
122
  margin-bottom: 10px;
126
123
  letter-spacing: .2px;
127
124
  }
128
- ._1vox1xjn {
129
- display: flex!important;
125
+ ._1vox1xjm {
126
+ display: flex !important;
130
127
  flex-direction: column;
131
128
  align-items: center;
132
129
  }
133
130
  ._1vox1xjo {
134
- font-weight: bold;
135
- }
136
- ._1vox1xjp {
137
131
  color: var(--_1073cm85);
138
132
  }
139
- ._1vox1xjq {
133
+ ._1vox1xjp {
140
134
  color: var(--_1073cm8c);
141
135
  }
142
- ._1vox1xjr {
136
+ ._1vox1xjq {
143
137
  color: var(--_1073cm8j);
144
138
  }
145
- ._1vox1xjs {
139
+ ._1vox1xjr {
146
140
  color: var(--_1073cm8q);
147
141
  }
148
- ._1vox1xjt {
142
+ ._1vox1xjs {
149
143
  margin-top: 0.5rem;
150
144
  }
151
- ._1vox1xju {
145
+ ._1vox1xjt {
152
146
  padding-inline-start: 0;
153
147
  }
154
- ._1vox1xjv {
148
+ ._1vox1xju {
155
149
  display: flex;
156
150
  align-items: center;
157
- justify-content: space-between;
158
- width: 100%;
159
151
  background: #ffffff;
160
152
  cursor: pointer;
153
+ justify-content: space-between;
161
154
  text-align: left;
155
+ width: 100%;
162
156
  }
163
- ._1vox1xjw {
164
- width: 20px;
165
- height: 20px;
166
- flex-shrink: 0;
157
+ ._1vox1xjv {
167
158
  color: #6b7280;
159
+ flex-shrink: 0;
160
+ height: 20px;
168
161
  transition: transform 200ms ease;
162
+ width: 20px;
169
163
  }
170
- [data-open] ._1vox1xjw {
164
+ [data-open] ._1vox1xjv {
171
165
  transform: rotate(180deg);
172
166
  }
173
- ._1vox1xjx {
167
+ ._1vox1xjw {
174
168
  background: #ffffff;
175
169
  border: 1px solid #c9e6f7;
176
170
  border-radius: 12px;
177
171
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
178
- min-width: var(--button-width);
179
- z-index: 50;
180
172
  margin-block: 4px;
173
+ min-width: var(--button-width);
181
174
  outline: none;
182
175
  padding: 12px;
176
+ z-index: 50;
183
177
  }
184
- ._1vox1xjy {
178
+ ._1vox1xjx {
179
+ border: 1px solid transparent;
180
+ border-radius: 8px;
185
181
  color: #363636;
186
182
  cursor: pointer;
187
183
  font-family: var(--header-font-family);
188
- font-size: 16px;
189
184
  padding: 8px 16px;
190
- border: 1px solid transparent;
191
- border-radius: 8px;
192
185
  }
193
- ._1vox1xjy[data-selected], ._1vox1xjy[data-focus] {
186
+ ._1vox1xjx[data-selected], ._1vox1xjx[data-focus] {
194
187
  background: #e9f8ff;
195
188
  border-color: #c9e6f7;
196
189
  color: #1e3860;
197
190
  }
198
- ._1vox1xjy[data-selected] {
191
+ ._1vox1xjx[data-selected] {
199
192
  font-weight: 700;
200
193
  }
201
- ._1vox1xjz {
194
+ ._1vox1xjy {
202
195
  width: 100%;
203
196
  max-width: 320px;
204
197
  }
205
- ._1vox1xj10 {
198
+ ._1vox1xjz {
199
+ color: #6b7280;
206
200
  font-size: 13px;
207
201
  font-weight: 400;
208
- color: #6b7280;
209
- margin-left: 6px;
210
202
  letter-spacing: .2px;
203
+ margin-left: 6px;
211
204
  }
212
- ._1vox1xj12 {
213
- animation: _1vox1xj11 120ms linear infinite;
205
+ ._1vox1xj11 {
206
+ animation: _1vox1xj10 120ms linear infinite;
214
207
  filter: blur(0.3px);
215
208
  opacity: 0.85;
216
209
  }
217
- ._1vox1xj13 {
218
- width: 100%;
219
- min-width: 1px;
220
- border-radius: 1rem;
221
- border: 1px solid #c9e6f7;
210
+ ._1vox1xj12 {
222
211
  background: #ffffff;
212
+ border: 1px solid #c9e6f7;
213
+ border-radius: 1rem;
223
214
  padding: 24px;
215
+ width: 100%;
216
+ min-width: 1px;
224
217
  }
225
- ._1vox1xj14 {
218
+ ._1vox1xj13 {
226
219
  background: url('https://www.axos.com/images/7FwQ1qLxA0zA7tLWlsqJNr/current.svg') #1e3860 left / cover;
227
220
  border-radius: 8px;
221
+ box-shadow: 0 4px 20px rgba(0,0,0,0.07);
228
222
  color: #ffffff;
229
223
  display: flex;
230
224
  align-items: center;
@@ -233,59 +227,54 @@
233
227
  margin-bottom: 12px;
234
228
  padding: 1rem;
235
229
  text-align: center;
236
- box-shadow: 0 4px 20px rgba(0,0,0,0.07);
237
230
  }
238
- ._1vox1xj15 {
231
+ ._1vox1xj14 {
232
+ font-family: var(--header-font-family);
239
233
  font-size: 16px;
240
234
  font-weight: 600;
241
235
  letter-spacing: .5px;
242
236
  margin-top: 3px;
243
- font-family: var(--header-font-family);
244
237
  }
245
- ._1vox1xj16 {
246
- font-size: 2.5rem;
247
- font-weight: 700;
248
- letter-spacing: -1px;
249
- line-height: 1.1;
250
- transition: color 200ms ease;
238
+ ._1vox1xj15 {
239
+ font: 700 40px / 1.1 var(--header-font-family);
251
240
  font-variant-numeric: tabular-nums;
252
- font-family: var(--header-font-family);
241
+ letter-spacing: -1px;
253
242
  margin-top: 16px;
243
+ transition: color 200ms ease;
254
244
  }
255
- ._1vox1xj17 {
245
+ ._1vox1xj16 {
256
246
  display: flex;
257
- justify-content: space-between;
258
247
  align-items: center;
248
+ justify-content: space-between;
259
249
  padding: 11px 0;
260
250
  }
261
- ._1vox1xj17 + ._1vox1xj17 {
251
+ ._1vox1xj16 + ._1vox1xj16 {
262
252
  border-top: 1px solid #F3F4F6;
263
253
  }
264
- ._1vox1xj18 {
254
+ ._1vox1xj17 {
255
+ color: #6b7280;
265
256
  font-size: 15px;
266
257
  font-weight: 500;
267
- color: #6b7280;
268
258
  }
269
- ._1vox1xj19 {
270
- font-size: 16px;
271
- font-weight: 700;
259
+ ._1vox1xj18 {
272
260
  color: var(--_1073cm85);
273
261
  font-variant-numeric: tabular-nums;
262
+ font-weight: 700;
274
263
  }
275
- ._1vox1xj1a {
264
+ ._1vox1xj19 {
276
265
  padding: 2rem;
277
266
  width: 100%;
278
267
  }
279
- ._1vox1xj1b {
268
+ ._1vox1xj1a {
280
269
  margin-bottom: 1rem;
281
270
  }
282
- @media screen and (max-width:768px) {
271
+ @media screen and (max-width:770px) {
283
272
  ._1vox1xj5 {
284
273
  flex-wrap: wrap;
285
- justify-content: center;
274
+ justify-content: center !important;
286
275
  }
287
- ._1vox1xj7 {
288
- margin-bottom: 1.5rem;
276
+ ._1vox1xjy {
277
+ max-width: none;
289
278
  }
290
279
  }
291
280
  @media screen and (min-width:1024px) {
@@ -293,6 +282,11 @@
293
282
  width: min(900px, calc(100% - 4rem));
294
283
  }
295
284
  }
285
+ @media screen and (max-width:768px) {
286
+ ._1vox1xj7 {
287
+ margin-bottom: 1.5rem;
288
+ }
289
+ }
296
290
  @media screen and (max-width:603px) {
297
291
  ._1vox1xja {
298
292
  padding: 1rem;
@@ -308,12 +302,12 @@
308
302
  ._1vox1xjd {
309
303
  font-size: 1rem;
310
304
  }
311
- ._1vox1xjm {
305
+ ._1vox1xjl {
312
306
  margin-top: 1rem;
313
307
  }
314
308
  }
315
309
  @media screen and (max-width:1124px) {
316
- ._1vox1xjn {
310
+ ._1vox1xjm {
317
311
  margin-top: 2rem;
318
312
  }
319
313
  }