@axos-web-dev/shared-components 1.0.77-patch.57 → 1.0.77-patch.59

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.
@@ -53,7 +53,7 @@ const AxosOneCalculator = ({
53
53
  };
54
54
  const calculateBalance = (amount) => {
55
55
  setCalculatedBalance(amount);
56
- const TIER_THRESHOLD = 499999.99;
56
+ const TIER_THRESHOLD = 249999.99;
57
57
  if (amount > TIER_THRESHOLD) {
58
58
  const tier1Amount = TIER_THRESHOLD;
59
59
  const tier2Amount = amount - TIER_THRESHOLD;
@@ -157,8 +157,14 @@ const AxosOneCalculator = ({
157
157
  /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Balance" })
158
158
  ] }),
159
159
  /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
160
- /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Percentage Yield*" }),
161
- /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "APY*" })
160
+ /* @__PURE__ */ jsxs("div", { className: clsx(headerCell, ax1_d_label), children: [
161
+ "Annual Percentage Yield",
162
+ /* @__PURE__ */ jsx("sup", { children: "**" })
163
+ ] }),
164
+ /* @__PURE__ */ jsxs("div", { className: clsx(headerCell, ax1_m_label), children: [
165
+ "APY",
166
+ /* @__PURE__ */ jsx("sup", { children: "**" })
167
+ ] })
162
168
  ] }),
163
169
  /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
164
170
  /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Earnings" }),
@@ -184,7 +190,7 @@ const AxosOneCalculator = ({
184
190
  /* @__PURE__ */ jsxs(TableRow, { className: clsx(tieredRowAnimation), children: [
185
191
  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
186
192
  "$",
187
- formatUSD(499999.99)
193
+ formatUSD(249999.99)
188
194
  ] }),
189
195
  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
190
196
  AXOS_ONE_APY.toFixed(2),
@@ -198,7 +204,7 @@ const AxosOneCalculator = ({
198
204
  /* @__PURE__ */ jsxs(TableRow, { className: clsx(tieredRowAnimationDelayed), children: [
199
205
  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
200
206
  "$",
201
- formatUSD(calculatedBalance - 499999.99)
207
+ formatUSD(calculatedBalance - 249999.99)
202
208
  ] }),
203
209
  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
204
210
  AXOS_ONE_APY_TIERED.toFixed(2),
@@ -228,7 +234,7 @@ const AxosOneCalculator = ({
228
234
  id
229
235
  )
230
236
  ) }),
231
- showTieredRows && disclosure && /* @__PURE__ */ jsx("div", { className: ax1_calc_disclosure({ variant: calc_variant }), children: disclosure })
237
+ disclosure && /* @__PURE__ */ jsx("div", { className: ax1_calc_disclosure({ variant: calc_variant }), children: disclosure })
232
238
  ] }) });
233
239
  };
234
240
  export {
@@ -99,7 +99,7 @@ const ImageBillboard = ({
99
99
  image?.imageType === "Image" ? image_based : ""
100
100
  ),
101
101
  children: [
102
- /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image && image.src ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsx(
102
+ (image || video || textImageLineOneSmall || textImageLineTwoBig || textImageLineThreeSmall) && /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image && image.src ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsx(
103
103
  "div",
104
104
  {
105
105
  role: "presentation",
@@ -148,11 +148,17 @@ const ImageBillboard = ({
148
148
  "flex_row middle center"
149
149
  ),
150
150
  role: "presentation",
151
- children: /* @__PURE__ */ jsxs("div", { className: clsx(rate_pad, "text_center", "flex", "flex_col"), children: [
152
- /* @__PURE__ */ jsx("span", { className: up_to, children: textImageLineOneSmall }),
153
- /* @__PURE__ */ jsx("span", { className: rate_billboard, children: textImageLineTwoBig }),
154
- /* @__PURE__ */ jsx("span", { className: clsx(apy_billboard, "push_up"), children: textImageLineThreeSmall })
155
- ] })
151
+ children: /* @__PURE__ */ jsxs(
152
+ "div",
153
+ {
154
+ className: clsx(rate_pad, "text_center", "flex", "flex_col"),
155
+ children: [
156
+ /* @__PURE__ */ jsx("span", { className: up_to, children: textImageLineOneSmall }),
157
+ /* @__PURE__ */ jsx("span", { className: rate_billboard, children: textImageLineTwoBig }),
158
+ /* @__PURE__ */ jsx("span", { className: clsx(apy_billboard, "push_up"), children: textImageLineThreeSmall })
159
+ ]
160
+ }
161
+ )
156
162
  }
157
163
  ) }),
158
164
  /* @__PURE__ */ jsxs("div", { className: body, children: [
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
3
- import { useState, useRef, useEffect } from "react";
3
+ import { useState, useRef, useMemo, useEffect } from "react";
4
4
  import { AnimatePresence, motion } from "framer-motion";
5
5
  import { usePathname } from "next/navigation.js";
6
6
  import Link from "next/link.js";
7
- import { menuData, getQuickLinks } from "./MobileNavData.js";
7
+ import { menuData, getLoginGroups, getQuickLinks } from "./MobileNavData.js";
8
8
  import styles from "./MobileMenu.module.js";
9
9
  const slideVariants = {
10
10
  enter: (direction) => ({
@@ -34,7 +34,10 @@ const MobileDrawerMenu = () => {
34
34
  const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
35
35
  const [direction, setDirection] = useState("forward");
36
36
  const [quickLinks, setQuickLinks] = useState([]);
37
+ const [loginDrawerOpen, setLoginDrawerOpen] = useState(false);
37
38
  const drawerRef = useRef(null);
39
+ const loginDrawerRef = useRef(null);
40
+ const loginGroups = useMemo(() => getLoginGroups(), []);
38
41
  const currentLevel = stack[stack.length - 1];
39
42
  const prevLevel = stack[stack.length - 2];
40
43
  useEffect(() => {
@@ -74,6 +77,13 @@ const MobileDrawerMenu = () => {
74
77
  return isOpening;
75
78
  });
76
79
  };
80
+ const handleLoginDrawerOpen = () => setLoginDrawerOpen(true);
81
+ const handleLoginDrawerClose = () => setLoginDrawerOpen(false);
82
+ const handleLoginDrawerOutsideClick = (e) => {
83
+ if (loginDrawerRef.current && !loginDrawerRef.current.contains(e.target)) {
84
+ setLoginDrawerOpen(false);
85
+ }
86
+ };
77
87
  const handleOutsideClick = (e) => {
78
88
  if (drawerRef.current && !drawerRef.current.contains(e.target)) {
79
89
  setOpen(false);
@@ -96,35 +106,61 @@ const MobileDrawerMenu = () => {
96
106
  }
97
107
  return () => document.removeEventListener("keydown", onEsc);
98
108
  }, [open]);
109
+ useEffect(() => {
110
+ if (!loginDrawerOpen) return;
111
+ document.addEventListener("mousedown", handleLoginDrawerOutsideClick);
112
+ return () => document.removeEventListener("mousedown", handleLoginDrawerOutsideClick);
113
+ }, [loginDrawerOpen]);
114
+ useEffect(() => {
115
+ const onEsc = (e) => {
116
+ if (e.key === "Escape") setLoginDrawerOpen(false);
117
+ };
118
+ if (loginDrawerOpen) {
119
+ document.addEventListener("keydown", onEsc);
120
+ }
121
+ return () => document.removeEventListener("keydown", onEsc);
122
+ }, [loginDrawerOpen]);
99
123
  return /* @__PURE__ */ jsxs(Fragment, { children: [
100
- /* @__PURE__ */ jsx(
101
- "button",
102
- {
103
- onClick: handleToggle,
104
- className: `${styles.hamburger} flex_col`,
105
- "aria-label": "open navigation menu",
106
- children: /* @__PURE__ */ jsx(
107
- "svg",
108
- {
109
- width: 24,
110
- height: 24,
111
- viewBox: "0 0 24 24",
112
- fill: "none",
113
- xmlns: "http://www.w3.org/2000/svg",
114
- "aria-hidden": "true",
115
- children: /* @__PURE__ */ jsx(
116
- "path",
117
- {
118
- fillRule: "evenodd",
119
- clipRule: "evenodd",
120
- d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
121
- fill: "#14263D"
122
- }
123
- )
124
- }
125
- )
126
- }
127
- ),
124
+ /* @__PURE__ */ jsxs("div", { className: styles.mobileNavRow, children: [
125
+ /* @__PURE__ */ jsx(
126
+ "button",
127
+ {
128
+ type: "button",
129
+ onClick: handleLoginDrawerOpen,
130
+ className: styles.loginTrigger,
131
+ "aria-label": "Open login options",
132
+ children: "Log in"
133
+ }
134
+ ),
135
+ /* @__PURE__ */ jsx(
136
+ "button",
137
+ {
138
+ onClick: handleToggle,
139
+ className: `${styles.hamburger} flex_col`,
140
+ "aria-label": "open navigation menu",
141
+ children: /* @__PURE__ */ jsx(
142
+ "svg",
143
+ {
144
+ width: 24,
145
+ height: 24,
146
+ viewBox: "0 0 24 24",
147
+ fill: "none",
148
+ xmlns: "http://www.w3.org/2000/svg",
149
+ "aria-hidden": "true",
150
+ children: /* @__PURE__ */ jsx(
151
+ "path",
152
+ {
153
+ fillRule: "evenodd",
154
+ clipRule: "evenodd",
155
+ d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
156
+ fill: "#14263D"
157
+ }
158
+ )
159
+ }
160
+ )
161
+ }
162
+ )
163
+ ] }),
128
164
  /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
129
165
  motion.div,
130
166
  {
@@ -264,47 +300,51 @@ const MobileDrawerMenu = () => {
264
300
  animate: "center",
265
301
  exit: "exit",
266
302
  transition: { duration: 0.3, ease: "linear" },
267
- children: Object.entries(currentLevel.items).map(
268
- ([key, value]) => {
269
- const hasChildren = typeof value === "object";
270
- return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
271
- "button",
272
- {
273
- className: styles.menuItem,
274
- onClick: () => handleClick(key),
275
- "aria-label": `open submenu for ${key}`,
276
- children: [
277
- /* @__PURE__ */ jsx("span", { children: key }),
278
- /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
279
- "svg",
280
- {
281
- className: styles.chevronIcon,
282
- width: 12,
283
- height: 20,
284
- viewBox: "0 0 12 20",
285
- fill: "none",
286
- xmlns: "http://www.w3.org/2000/svg",
287
- children: /* @__PURE__ */ jsx(
288
- "path",
289
- {
290
- d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
291
- fill: "#4A5560"
292
- }
293
- )
294
- }
295
- ) })
296
- ]
297
- }
298
- ) : /* @__PURE__ */ jsx(
299
- Link,
300
- {
301
- href: value + (queryString && !value.includes("?") ? `?${queryString}` : ""),
302
- className: styles.menuItem,
303
- children: /* @__PURE__ */ jsx("span", { children: key })
304
- }
305
- ) }, key);
306
- }
307
- )
303
+ children: Object.entries(
304
+ stack.length === 1 ? Object.fromEntries(
305
+ Object.entries(currentLevel.items).filter(
306
+ ([k]) => k !== "Log in"
307
+ )
308
+ ) : currentLevel.items
309
+ ).map(([key, value]) => {
310
+ const hasChildren = typeof value === "object";
311
+ return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
312
+ "button",
313
+ {
314
+ className: styles.menuItem,
315
+ onClick: () => handleClick(key),
316
+ "aria-label": `open submenu for ${key}`,
317
+ children: [
318
+ /* @__PURE__ */ jsx("span", { children: key }),
319
+ /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
320
+ "svg",
321
+ {
322
+ className: styles.chevronIcon,
323
+ width: 12,
324
+ height: 20,
325
+ viewBox: "0 0 12 20",
326
+ fill: "none",
327
+ xmlns: "http://www.w3.org/2000/svg",
328
+ children: /* @__PURE__ */ jsx(
329
+ "path",
330
+ {
331
+ d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
332
+ fill: "#4A5560"
333
+ }
334
+ )
335
+ }
336
+ ) })
337
+ ]
338
+ }
339
+ ) : /* @__PURE__ */ jsx(
340
+ Link,
341
+ {
342
+ href: `${value}${queryString && !value.includes("?") ? `?${queryString}` : ""}`,
343
+ className: styles.menuItem,
344
+ children: /* @__PURE__ */ jsx("span", { children: key })
345
+ }
346
+ ) }, key);
347
+ })
308
348
  },
309
349
  currentLevel.title
310
350
  )
@@ -337,6 +377,110 @@ const MobileDrawerMenu = () => {
337
377
  }
338
378
  )
339
379
  }
380
+ ) }),
381
+ /* @__PURE__ */ jsx(AnimatePresence, { children: loginDrawerOpen && /* @__PURE__ */ jsx(
382
+ motion.div,
383
+ {
384
+ className: styles.overlay,
385
+ initial: { opacity: 0 },
386
+ animate: { opacity: 1 },
387
+ exit: { opacity: 0 },
388
+ children: /* @__PURE__ */ jsxs(
389
+ motion.div,
390
+ {
391
+ className: `${styles.drawer} flex_col`,
392
+ ref: loginDrawerRef,
393
+ initial: { x: "100%" },
394
+ animate: { x: 0 },
395
+ exit: { x: "100%" },
396
+ transition: { type: "tween", duration: 0.3 },
397
+ role: "dialog",
398
+ "aria-modal": "true",
399
+ "aria-label": "Login options",
400
+ children: [
401
+ /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
402
+ /* @__PURE__ */ jsx(
403
+ "a",
404
+ {
405
+ href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
406
+ "aria-label": "return to home page",
407
+ children: /* @__PURE__ */ jsx(
408
+ "img",
409
+ {
410
+ src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
411
+ alt: "",
412
+ width: 86,
413
+ height: 19
414
+ }
415
+ )
416
+ }
417
+ ),
418
+ /* @__PURE__ */ jsx("span", { className: styles.loginDrawerTitle, children: "Log in" }),
419
+ /* @__PURE__ */ jsx(
420
+ "button",
421
+ {
422
+ type: "button",
423
+ className: `${styles.close} flex_col`,
424
+ "aria-label": "Close login options",
425
+ onClick: handleLoginDrawerClose,
426
+ children: /* @__PURE__ */ jsx(
427
+ "svg",
428
+ {
429
+ xmlns: "http://www.w3.org/2000/svg",
430
+ width: "24",
431
+ height: "24",
432
+ viewBox: "0 0 24 24",
433
+ fill: "none",
434
+ "aria-hidden": "true",
435
+ children: /* @__PURE__ */ jsx(
436
+ "path",
437
+ {
438
+ d: "M20.2812 2.65625L21.3419 3.71691L13.0602 11.9982L21.3419 20.2812L20.2812 21.3419L11.9982 13.0602L3.71691 21.3419L2.65625 20.2812L10.9377 11.9982L2.65625 3.71691L3.71691 2.65625L11.9982 10.9377L20.2812 2.65625Z",
439
+ fill: "#14263D"
440
+ }
441
+ )
442
+ }
443
+ )
444
+ }
445
+ )
446
+ ] }),
447
+ /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsx(
448
+ "ul",
449
+ {
450
+ className: styles.loginAccordionList,
451
+ "aria-label": "Login options",
452
+ children: loginGroups.map((group) => /* @__PURE__ */ jsxs(
453
+ "li",
454
+ {
455
+ className: styles.loginAccordionGroup,
456
+ "aria-label": `${group.heading} login options`,
457
+ children: [
458
+ /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.heading }),
459
+ /* @__PURE__ */ jsx("ul", { className: styles.loginAccordionGroupList, children: group.items.map((item) => /* @__PURE__ */ jsx(
460
+ "li",
461
+ {
462
+ "aria-label": `access ${item.title}`,
463
+ children: /* @__PURE__ */ jsx(
464
+ Link,
465
+ {
466
+ href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
467
+ className: styles.menuItem,
468
+ children: /* @__PURE__ */ jsx("span", { children: item.title })
469
+ }
470
+ )
471
+ },
472
+ item.title
473
+ )) })
474
+ ]
475
+ },
476
+ group.heading
477
+ ))
478
+ }
479
+ ) }) })
480
+ ]
481
+ }
482
+ )
483
+ }
340
484
  ) })
341
485
  ] });
342
486
  };
@@ -1,23 +1,38 @@
1
- import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_fwuiv_1";
2
- const drawer = "_drawer_fwuiv_9";
3
- const hamburger = "_hamburger_fwuiv_29";
4
- const header = "_header_fwuiv_40";
5
- const back = "_back_fwuiv_51";
6
- const close = "_close_fwuiv_59";
7
- const levelContainer = "_levelContainer_fwuiv_70";
8
- const level = "_level_fwuiv_70";
9
- const levelTitle = "_levelTitle_fwuiv_86";
10
- const menu = "_menu_fwuiv_91";
11
- const menuItem = "_menuItem_fwuiv_111";
12
- const chevron = "_chevron_fwuiv_127";
13
- const chevronIcon = "_chevronIcon_fwuiv_132";
14
- const quickLinks = "_quickLinks_fwuiv_143";
15
- const quickLink = "_quickLink_fwuiv_143";
16
- const sr_only = "_sr_only_fwuiv_167";
1
+ import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_7ufer_1";
2
+ const drawer = "_drawer_7ufer_9";
3
+ const mobileNavRow = "_mobileNavRow_7ufer_29";
4
+ const loginTrigger = "_loginTrigger_7ufer_35";
5
+ const hamburger = "_hamburger_7ufer_51";
6
+ const loginDrawerTitle = "_loginDrawerTitle_7ufer_73";
7
+ const loginDrawerContent = "_loginDrawerContent_7ufer_79";
8
+ const header = "_header_7ufer_85";
9
+ const back = "_back_7ufer_96";
10
+ const close = "_close_7ufer_104";
11
+ const levelContainer = "_levelContainer_7ufer_115";
12
+ const level = "_level_7ufer_115";
13
+ const levelTitle = "_levelTitle_7ufer_131";
14
+ const menu = "_menu_7ufer_136";
15
+ const menuItem = "_menuItem_7ufer_152";
16
+ const loginAccordion = "_loginAccordion_7ufer_168";
17
+ const loginAccordionList = "_loginAccordionList_7ufer_172";
18
+ const loginAccordionGroup = "_loginAccordionGroup_7ufer_178";
19
+ const loginAccordionHeading = "_loginAccordionHeading_7ufer_215";
20
+ const loginAccordionGroupList = "_loginAccordionGroupList_7ufer_225";
21
+ const loginHeading = "_loginHeading_7ufer_269";
22
+ const chevron = "_chevron_7ufer_279";
23
+ const chevronIcon = "_chevronIcon_7ufer_284";
24
+ const quickLinks = "_quickLinks_7ufer_295";
25
+ const quickLink = "_quickLink_7ufer_295";
26
+ const sr_only = "_sr_only_7ufer_319";
27
+ const loginAccordionOverlay = "_loginAccordionOverlay_7ufer_344";
17
28
  const styles = {
18
29
  overlay,
19
30
  drawer,
31
+ mobileNavRow,
32
+ loginTrigger,
20
33
  hamburger,
34
+ loginDrawerTitle,
35
+ loginDrawerContent,
21
36
  header,
22
37
  back,
23
38
  close,
@@ -26,11 +41,18 @@ const styles = {
26
41
  levelTitle,
27
42
  menu,
28
43
  menuItem,
44
+ loginAccordion,
45
+ loginAccordionList,
46
+ loginAccordionGroup,
47
+ loginAccordionHeading,
48
+ loginAccordionGroupList,
49
+ loginHeading,
29
50
  chevron,
30
51
  chevronIcon,
31
52
  quickLinks,
32
53
  quickLink,
33
- sr_only
54
+ sr_only,
55
+ loginAccordionOverlay
34
56
  };
35
57
  export {
36
58
  back,
@@ -44,8 +66,19 @@ export {
44
66
  level,
45
67
  levelContainer,
46
68
  levelTitle,
69
+ loginAccordion,
70
+ loginAccordionGroup,
71
+ loginAccordionGroupList,
72
+ loginAccordionHeading,
73
+ loginAccordionList,
74
+ loginAccordionOverlay,
75
+ loginDrawerContent,
76
+ loginDrawerTitle,
77
+ loginHeading,
78
+ loginTrigger,
47
79
  menu,
48
80
  menuItem,
81
+ mobileNavRow,
49
82
  overlay,
50
83
  quickLink,
51
84
  quickLinks,
@@ -242,24 +242,33 @@ export declare const menuData: {
242
242
  };
243
243
  "Log in": {
244
244
  Personal: {
245
- "Personal Banking Home": string;
246
245
  "Account Login": string;
247
246
  "Make a Payment": string;
248
247
  };
249
248
  Business: {
250
- "Business Banking Home": string;
251
249
  "Business Banking Login": string;
252
250
  "MWA Business Login": string;
253
251
  "Commercial Portal": string;
254
252
  };
255
253
  Partners: {
256
- "Partners Home": string;
257
254
  "Wholesale and Correspondent": string;
258
255
  "Advisor Login": string;
259
256
  };
257
+ Additional: {
258
+ "Customer Support": string;
259
+ "Return to Application": string;
260
+ };
260
261
  };
261
- "Return to Application": string;
262
262
  };
263
+ export type FlattenedLoginItem = {
264
+ title: string;
265
+ url: string;
266
+ };
267
+ export type LoginGroup = {
268
+ heading: string;
269
+ items: FlattenedLoginItem[];
270
+ };
271
+ export declare const getLoginGroups: () => LoginGroup[];
263
272
  export declare const getQuickLinks: (pathname: string) => {
264
273
  icon: string;
265
274
  title: string;
@@ -600,12 +600,10 @@ const menuData = {
600
600
  },
601
601
  "Log in": {
602
602
  Personal: {
603
- "Personal Banking Home": findMoreAxosDomains("{AXOSBANK}/personal"),
604
603
  "Account Login": findMoreAxosDomains("{ONLINEBANKING}/auth/Login"),
605
604
  "Make a Payment": "https://loanpayment.axosbank.com"
606
605
  },
607
606
  Business: {
608
- "Business Banking Home": findMoreAxosDomains("{AXOSBANK}/business"),
609
607
  "Business Banking Login": findMoreAxosDomains(
610
608
  "{AXOSBANK}/business/login"
611
609
  ),
@@ -617,14 +615,36 @@ const menuData = {
617
615
  )
618
616
  },
619
617
  Partners: {
620
- "Partners Home": findMoreAxosDomains("{AXOSBANK}/partners"),
621
618
  "Wholesale and Correspondent": "https://thirdpartylending.axosbank.com/index",
622
619
  "Advisor Login": findMoreAxosDomains("{ARMS}")
620
+ },
621
+ Additional: {
622
+ "Customer Support": findMoreAxosDomains("{AXOSBANK}/customer-support"),
623
+ "Return to Application": findMoreAxosDomains(
624
+ "{AXOSBANK}/return-to-application"
625
+ )
623
626
  }
624
- },
625
- "Return to Application": findMoreAxosDomains(
626
- "{AXOSBANK}/return-to-application"
627
- )
627
+ }
628
+ };
629
+ const getLoginGroups = () => {
630
+ const loginSection = menuData["Log in"];
631
+ if (!loginSection || typeof loginSection !== "object") return [];
632
+ const groups = [];
633
+ for (const [heading, category] of Object.entries(
634
+ loginSection
635
+ )) {
636
+ if (!category || typeof category !== "object") continue;
637
+ const items = [];
638
+ for (const [title, url] of Object.entries(category)) {
639
+ if (typeof url === "string") {
640
+ items.push({ title, url });
641
+ }
642
+ }
643
+ if (items.length) {
644
+ groups.push({ heading, items });
645
+ }
646
+ }
647
+ return groups;
628
648
  };
629
649
  const getQuickLinks = (pathname) => {
630
650
  let insightsUrl = findMoreAxosDomains("{AXOSBANK}/personal/insights");
@@ -666,6 +686,7 @@ const getQuickLinks = (pathname) => {
666
686
  ];
667
687
  };
668
688
  export {
689
+ getLoginGroups,
669
690
  getQuickLinks,
670
691
  menuData
671
692
  };
@@ -1,4 +1,4 @@
1
- ._overlay_fwuiv_1 {
1
+ ._overlay_7ufer_1 {
2
2
  position: fixed;
3
3
  inset: 0;
4
4
  height: 100vh;
@@ -6,7 +6,7 @@
6
6
  z-index: 10000;
7
7
  }
8
8
 
9
- ._drawer_fwuiv_9 {
9
+ ._drawer_7ufer_9 {
10
10
  background: #fff;
11
11
  border-radius: 0 0 0 1rem;
12
12
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
@@ -22,22 +22,67 @@
22
22
  z-index: 10001;
23
23
  }
24
24
 
25
- ._drawer_fwuiv_9::-webkit-scrollbar {
25
+ ._drawer_7ufer_9::-webkit-scrollbar {
26
26
  display: none;
27
27
  }
28
28
 
29
- ._hamburger_fwuiv_29 {
29
+ ._mobileNavRow_7ufer_29 {
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 16px;
33
+ }
34
+
35
+ ._loginTrigger_7ufer_35 {
36
+ background: transparent;
37
+ border: none;
38
+ color: var(--_1073cm83);
39
+ cursor: pointer;
40
+ font-family: var(--header-font-family);
41
+ font-size: 1rem;
42
+ font-weight: 700;
43
+ padding: 0.25rem 0;
44
+ transition: opacity 0.2s ease;
45
+ }
46
+
47
+ ._loginTrigger_7ufer_35:hover {
48
+ opacity: 0.85;
49
+ }
50
+
51
+ ._hamburger_7ufer_51 {
30
52
  background: transparent;
31
53
  border: none;
32
54
  cursor: pointer;
33
55
  transition: opacity 0.3s ease;
56
+ position: relative;
57
+ }
58
+
59
+ ._hamburger_7ufer_51::before {
60
+ content: "";
61
+ position: absolute;
62
+ left: -7px;
63
+ bottom: 0;
64
+ height: 28px;
65
+ border-left: 2px solid #1f1f1f;
66
+ top: -2px;
34
67
  }
35
68
 
36
- ._hamburger_fwuiv_29:hover {
69
+ ._hamburger_7ufer_51:hover {
37
70
  opacity: 0.8;
38
71
  }
39
72
 
40
- ._header_fwuiv_40 {
73
+ ._loginDrawerTitle_7ufer_73 {
74
+ font-weight: 700;
75
+ font-size: 1rem;
76
+ color: var(--_1073cm83);
77
+ }
78
+
79
+ ._loginDrawerContent_7ufer_79 {
80
+ padding: 1rem 1.2rem 1.2rem;
81
+ overflow: auto;
82
+ flex: 1;
83
+ }
84
+
85
+ ._header_7ufer_85 {
41
86
  display: flex;
42
87
  align-items: center;
43
88
  background: #f4f4f4;
@@ -48,7 +93,7 @@
48
93
  z-index: 1;
49
94
  }
50
95
 
51
- ._back_fwuiv_51 {
96
+ ._back_7ufer_96 {
52
97
  color: var(--_1073cm83);
53
98
  font-size: 1rem;
54
99
  font-weight: 700;
@@ -56,23 +101,23 @@
56
101
  padding: 0;
57
102
  }
58
103
 
59
- ._close_fwuiv_59 {
104
+ ._close_7ufer_104 {
60
105
  font-size: 1.3rem;
61
106
  }
62
107
 
63
- ._back_fwuiv_51,
64
- ._close_fwuiv_59 {
108
+ ._back_7ufer_96,
109
+ ._close_7ufer_104 {
65
110
  background: none;
66
111
  border: none;
67
112
  cursor: pointer;
68
113
  }
69
114
 
70
- ._levelContainer_fwuiv_70 {
115
+ ._levelContainer_7ufer_115 {
71
116
  height: 100%;
72
117
  position: relative;
73
118
  }
74
119
 
75
- ._level_fwuiv_70 {
120
+ ._level_7ufer_115 {
76
121
  background: var(--_1073cm86);
77
122
  color: var(--_1073cm85);
78
123
  font-size: 0.9rem;
@@ -83,12 +128,12 @@
83
128
  z-index: 1;
84
129
  }
85
130
 
86
- ._levelTitle_fwuiv_86 {
131
+ ._levelTitle_7ufer_131 {
87
132
  font: 700 0.9rem / 1.39 var(--main-font-family);
88
133
  letter-spacing: 0.4px;
89
134
  }
90
135
 
91
- ._menu_fwuiv_91 {
136
+ ._menu_7ufer_136 {
92
137
  background-color: transparent;
93
138
  list-style: none;
94
139
  margin: 0;
@@ -97,18 +142,14 @@
97
142
  position: relative;
98
143
  }
99
144
 
100
- ._menu_fwuiv_91 li {
145
+ ._menu_7ufer_136 li {
101
146
  color: var(--_1073cm83);
102
147
  font-family: var(--header-font-family);
103
148
  font-weight: 500;
104
149
  border-top: 1px solid #e9e9e9;
105
150
  }
106
151
 
107
- ._menu_fwuiv_91 li + li {
108
- margin-top: 0.5rem;
109
- }
110
-
111
- ._menuItem_fwuiv_111 {
152
+ ._menuItem_7ufer_152 {
112
153
  display: flex;
113
154
  align-items: center;
114
155
  background: none;
@@ -124,23 +165,134 @@
124
165
  width: 100%;
125
166
  }
126
167
 
127
- ._chevron_fwuiv_127 {
168
+ ._loginAccordion_7ufer_168 {
169
+ padding: 0;
170
+ }
171
+
172
+ ._loginAccordionList_7ufer_172 {
173
+ list-style: none;
174
+ margin: 0;
175
+ padding: 0;
176
+ }
177
+
178
+ ._loginAccordionGroup_7ufer_178 {
179
+ padding-block: 4px;
180
+ }
181
+
182
+ ._loginAccordionGroup_7ufer_178 + ._loginAccordionGroup_7ufer_178 {
183
+ margin-top: 2px;
184
+ position: relative;
185
+ }
186
+
187
+ ._loginAccordionGroup_7ufer_178:nth-child(4):is(:last-child) {
188
+ padding-top: 12px;
189
+ margin-top: 12px;
190
+ }
191
+
192
+ ._loginAccordionGroup_7ufer_178:nth-child(4):is(:last-child)::before {
193
+ content: "";
194
+ background-color: #8f8f8f;
195
+ height: 2px;
196
+ opacity: 0.3;
197
+ position: absolute;
198
+ right: 8px;
199
+ top: 0;
200
+ width: 94%;
201
+ }
202
+
203
+ ._loginAccordionGroup_7ufer_178:nth-child(4):is(:last-child) > span {
204
+ position: absolute;
205
+ border: 0;
206
+ clip: rect(0, 0, 0, 0);
207
+ height: 1px;
208
+ margin: -1px;
209
+ overflow: hidden;
210
+ padding: 0;
211
+ white-space: nowrap;
212
+ width: 1px;
213
+ }
214
+
215
+ ._loginAccordionHeading_7ufer_215 {
216
+ display: block;
217
+ font-family: var(--header-font-family);
218
+ font-weight: 700;
219
+ font-size: 18px;
220
+ line-height: 1.39;
221
+
222
+ padding: 0.35rem 0 0.2rem;
223
+ }
224
+
225
+ ._loginAccordionGroupList_7ufer_225 {
226
+ list-style: none;
227
+ margin: 0;
228
+ padding: 0 0 0 8px;
229
+ }
230
+
231
+ ._loginAccordionList_7ufer_172 li {
232
+ font-family: var(--header-font-family);
233
+ font-weight: 500;
234
+ }
235
+
236
+ ._loginAccordionList_7ufer_172 li li {
237
+ border-top: none;
238
+ color: #1e629a;
239
+ font-weight: 400;
240
+ padding-block: 3px;
241
+ font-family: var(--main-font-family);
242
+ }
243
+
244
+ ._loginAccordionList_7ufer_172 ._menuItem_7ufer_152 {
245
+ display: inline;
246
+ padding-block: 0px;
247
+ }
248
+
249
+ ._loginAccordionList_7ufer_172 ._menuItem_7ufer_152:hover {
250
+ opacity: 0.7;
251
+ }
252
+
253
+ ._loginAccordion_7ufer_168 > ._menuItem_7ufer_152 {
254
+ padding-block: 4px;
255
+ position: relative;
256
+ isolation: isolate;
257
+ }
258
+
259
+ ._loginAccordion_7ufer_168 > ._menuItem_7ufer_152::after {
260
+ content: "return to menu";
261
+ position: absolute;
262
+ right: 36px;
263
+ bottom: 50%;
264
+ font-size: 12px;
265
+ transform: translateY(50%);
266
+ letter-spacing: 0.5px;
267
+ }
268
+
269
+ ._loginHeading_7ufer_269 {
270
+ font-family: var(--header-font-family);
271
+ font-size: 20px;
272
+ font-weight: 700;
273
+ line-height: 1;
274
+ display: flex;
275
+ align-items: center;
276
+ gap: 8px;
277
+ }
278
+
279
+ ._chevron_7ufer_279 {
128
280
  font-size: 1.2rem;
129
281
  margin-left: auto;
130
282
  }
131
283
 
132
- ._chevronIcon_fwuiv_132 {
284
+ ._chevronIcon_7ufer_284 {
133
285
  height: auto;
134
286
  margin-right: 10px;
135
287
  max-width: 8px;
136
288
  }
137
289
 
138
- body:has(._drawer_fwuiv_9) {
290
+ body:has(._drawer_7ufer_9) {
139
291
  overflow-y: hidden;
140
292
  position: relative;
141
293
  }
142
294
 
143
- ._quickLinks_fwuiv_143 {
295
+ ._quickLinks_7ufer_295 {
144
296
  background-color: #e8f7ff;
145
297
  bottom: 0;
146
298
  box-shadow: 0 15px 10px -20px rgba(0, 0, 0, 0.45) inset;
@@ -150,7 +302,7 @@ body:has(._drawer_fwuiv_9) {
150
302
  position: sticky;
151
303
  }
152
304
 
153
- ._quickLink_fwuiv_143 {
305
+ ._quickLink_7ufer_295 {
154
306
  display: flex;
155
307
  align-items: center;
156
308
  color: var(--_1073cm83);
@@ -164,7 +316,7 @@ body:has(._drawer_fwuiv_9) {
164
316
  text-transform: uppercase;
165
317
  }
166
318
 
167
- ._sr_only_fwuiv_167 {
319
+ ._sr_only_7ufer_319 {
168
320
  position: absolute;
169
321
  border: 0;
170
322
  clip: rect(0, 0, 0, 0);
@@ -177,16 +329,25 @@ body:has(._drawer_fwuiv_9) {
177
329
  }
178
330
 
179
331
  @media (max-width: 540px) {
180
- ._drawer_fwuiv_9 {
332
+ ._drawer_7ufer_9 {
181
333
  border-radius: 0;
182
334
  max-width: none;
183
335
  width: 100%;
184
336
  }
185
- ._menu_fwuiv_91 li + li {
337
+ ._menu_7ufer_136 li + li {
186
338
  margin-top: 3px;
187
339
  }
188
- ._menuItem_fwuiv_111 {
340
+ ._menuItem_7ufer_152 {
189
341
  font-size: 0.9rem;
190
342
  padding: 0.65rem 0;
191
343
  }
344
+ ._loginAccordionOverlay_7ufer_344::before {
345
+ opacity: 0.1;
346
+ }
347
+ }
348
+
349
+ @media (min-width: 541px) {
350
+ ._drawer_7ufer_9:has(._loginDrawerContent_7ufer_79) {
351
+ max-width: 345px;
352
+ }
192
353
  }
@@ -162,7 +162,7 @@ h1, h2, h3, h4, h5, h6, es_font {
162
162
  }
163
163
  .list_item {
164
164
  font-size: 1rem;
165
- line-height: 1.5rem;
165
+ line-height: 1.5;
166
166
  -webkit-box-align: start;
167
167
  align-items: flex-start;
168
168
  }
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": "1.0.77-patch.57",
4
+ "version": "1.0.77-patch.59",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",