@axos-web-dev/shared-components 0.0.10 → 0.0.11

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.
@@ -63,10 +63,8 @@ const HeroBanner = ({
63
63
  "data-nimg": 1,
64
64
  className: "img_fluid",
65
65
  style: { color: "transparent" },
66
- src: `${image.src}?fm=png&w=500&h=400&fit=fill&r=20`,
67
- alt: image.alt,
68
- width: 500,
69
- height: 400
66
+ src: `${image.src}?w=604&h=480&fit=fill`,
67
+ alt: image.alt
70
68
  }
71
69
  ) })
72
70
  ]
@@ -0,0 +1,2 @@
1
+ declare const MobileToggle: () => import("react/jsx-runtime").JSX.Element;
2
+ export default MobileToggle;
@@ -0,0 +1,120 @@
1
+ "use client";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
+ import clsx from "clsx";
4
+ import { useState } from "react";
5
+ import { NavItem } from "../NavItem/index.js";
6
+ import styles from "./NavBar.module.js";
7
+ import { navItems } from "./NavData.js";
8
+ const MobileToggle = () => {
9
+ const [isOpenMobile, setisOpenMobile] = useState(false);
10
+ const mobileToggle = () => setisOpenMobile(!isOpenMobile);
11
+ return /* @__PURE__ */ jsxs("header", { children: [
12
+ /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
13
+ /* @__PURE__ */ jsx(
14
+ "button",
15
+ {
16
+ className: clsx(styles.mobile_only, styles.hamburger),
17
+ onClick: mobileToggle,
18
+ children: /* @__PURE__ */ jsx(
19
+ "svg",
20
+ {
21
+ width: 24,
22
+ height: 24,
23
+ viewBox: "0 0 24 24",
24
+ fill: "none",
25
+ xmlns: "http://www.w3.org/2000/svg",
26
+ children: /* @__PURE__ */ jsx(
27
+ "path",
28
+ {
29
+ fillRule: "evenodd",
30
+ clipRule: "evenodd",
31
+ d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
32
+ fill: "#4A5560"
33
+ }
34
+ )
35
+ }
36
+ )
37
+ }
38
+ ),
39
+ /* @__PURE__ */ jsx("div", { className: `${styles.mobile_only} ${styles.mobile_logo}`, children: /* @__PURE__ */ jsx(
40
+ "img",
41
+ {
42
+ src: "//images.axos.com/o9ov1v03uwqk/70DeSnNiwKxnnpoNEmdHYc/c89285e7f92b31397b49e09ddb9ea14d/afs-logo-mobile.svg",
43
+ alt: "",
44
+ width: 113,
45
+ height: 58
46
+ }
47
+ ) })
48
+ ] }) }) }),
49
+ /* @__PURE__ */ jsx(
50
+ "div",
51
+ {
52
+ className: clsx(
53
+ styles.mobile_nav,
54
+ styles.mobile_only,
55
+ "relative",
56
+ "bg_white",
57
+ isOpenMobile ? styles.mobile_opened : ""
58
+ ),
59
+ "aria-expanded": isOpenMobile,
60
+ role: "menu",
61
+ children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.inner_wrapper, "bg_white"), children: [
62
+ /* @__PURE__ */ jsxs("div", { className: `${styles.mobile_header} relative text_center`, children: [
63
+ /* @__PURE__ */ jsx("p", { role: "heading", children: "Welcome" }),
64
+ /* @__PURE__ */ jsx("button", { onClick: mobileToggle, "aria-label": "close navigation menu", children: /* @__PURE__ */ jsx(
65
+ "svg",
66
+ {
67
+ xmlns: "http://www.w3.org/2000/svg",
68
+ width: 24,
69
+ height: 24,
70
+ viewBox: "0 0 24 24",
71
+ fill: "none",
72
+ children: /* @__PURE__ */ jsx(
73
+ "path",
74
+ {
75
+ 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",
76
+ fill: "#4A5560"
77
+ }
78
+ )
79
+ }
80
+ ) })
81
+ ] }),
82
+ /* @__PURE__ */ jsxs("div", { className: styles.mobile_body, children: [
83
+ navItems.map((item, i) => /* @__PURE__ */ jsx(
84
+ NavItem,
85
+ {
86
+ className: styles.main_nav_link,
87
+ index: i,
88
+ name: item.name,
89
+ url: item.url
90
+ },
91
+ i
92
+ )),
93
+ /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", children: [
94
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_1", children: /* @__PURE__ */ jsx("a", { href: "#", children: "About Us" }) }),
95
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_2", children: /* @__PURE__ */ jsx("a", { href: "/services", children: "Services" }) }),
96
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_3", children: /* @__PURE__ */ jsx("a", { href: "/Software", children: "Software" }) }),
97
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_4", children: /* @__PURE__ */ jsx("a", { href: "/Contact", children: "Contact" }) })
98
+ ] })
99
+ ] }),
100
+ /* @__PURE__ */ jsx("div", { className: styles.mobile_footer, children: /* @__PURE__ */ jsxs("div", { className: "flex_row between", children: [
101
+ /* @__PURE__ */ jsxs(
102
+ "div",
103
+ {
104
+ className: `${styles.mobile_footer_content} flex_col between`,
105
+ children: [
106
+ /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Contact a Specialist Today!" }) }),
107
+ /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx("a", { href: "/contact", children: "Talk With Us" }) })
108
+ ]
109
+ }
110
+ ),
111
+ /* @__PURE__ */ jsx("div", { className: styles.mobile_footer_media, children: " " })
112
+ ] }) })
113
+ ] })
114
+ }
115
+ )
116
+ ] });
117
+ };
118
+ export {
119
+ MobileToggle as default
120
+ };
@@ -1,43 +1,43 @@
1
- const header = "_header_106qs_1";
2
- const wrapper = "_wrapper_106qs_5";
3
- const header_main_row = "_header_main_row_106qs_11";
4
- const mobile_header = "_mobile_header_106qs_12";
5
- const logo_wrap = "_logo_wrap_106qs_18";
6
- const primary_links = "_primary_links_106qs_22";
7
- const main_nav = "_main_nav_106qs_26";
8
- const main_nav_link = "_main_nav_link_106qs_33";
9
- const sub_nav_link = "_sub_nav_link_106qs_55";
10
- const signin_wrap = "_signin_wrap_106qs_57";
11
- const signin_btn = "_signin_btn_106qs_58";
12
- const sub_nav = "_sub_nav_106qs_55";
13
- const header_sub_row = "_header_sub_row_106qs_99";
14
- const shadow = "_shadow_106qs_115";
15
- const opacity = "_opacity_106qs_131";
16
- const fadeInDown = "_fadeInDown_106qs_1";
17
- const footer = "_footer_106qs_137";
18
- const open = "_open_106qs_153";
19
- const mt_8 = "_mt_8_106qs_161";
20
- const mt_16 = "_mt_16_106qs_165";
21
- const ml_8 = "_ml_8_106qs_169";
22
- const reversed_row = "_reversed_row_106qs_173";
23
- const nav_anchor = "_nav_anchor_106qs_177";
24
- const site_lists = "_site_lists_106qs_188";
25
- const hamburger = "_hamburger_106qs_192";
26
- const mobile_logo = "_mobile_logo_106qs_206";
27
- const mobile_nav = "_mobile_nav_106qs_229";
28
- const mobile_opened = "_mobile_opened_106qs_241";
29
- const mobile_nav_item = "_mobile_nav_item_106qs_245";
30
- const icon_wrap = "_icon_wrap_106qs_260";
31
- const mobile_footer = "_mobile_footer_106qs_265";
32
- const mobile_footer_content = "_mobile_footer_content_106qs_271";
33
- const mobile_footer_media = "_mobile_footer_media_106qs_285";
34
- const footer_cta = "_footer_cta_106qs_292";
35
- const inner_wrapper = "_inner_wrapper_106qs_324";
36
- const btn = "_btn_106qs_328";
37
- const sub_menu = "_sub_menu_106qs_333";
38
- const main = "_main_106qs_26";
39
- const desktop_only = "_desktop_only_106qs_362";
40
- const mobile_only = "_mobile_only_106qs_409";
1
+ const header = "_header_nlu6n_1";
2
+ const wrapper = "_wrapper_nlu6n_5";
3
+ const header_main_row = "_header_main_row_nlu6n_11";
4
+ const mobile_header = "_mobile_header_nlu6n_12";
5
+ const logo_wrap = "_logo_wrap_nlu6n_18";
6
+ const primary_links = "_primary_links_nlu6n_22";
7
+ const main_nav = "_main_nav_nlu6n_26";
8
+ const main_nav_link = "_main_nav_link_nlu6n_33";
9
+ const sub_nav_link = "_sub_nav_link_nlu6n_55";
10
+ const signin_wrap = "_signin_wrap_nlu6n_57";
11
+ const signin_btn = "_signin_btn_nlu6n_58";
12
+ const sub_nav = "_sub_nav_nlu6n_55";
13
+ const header_sub_row = "_header_sub_row_nlu6n_99";
14
+ const shadow = "_shadow_nlu6n_115";
15
+ const opacity = "_opacity_nlu6n_131";
16
+ const fadeInDown = "_fadeInDown_nlu6n_1";
17
+ const footer = "_footer_nlu6n_137";
18
+ const open = "_open_nlu6n_153";
19
+ const mt_8 = "_mt_8_nlu6n_161";
20
+ const mt_16 = "_mt_16_nlu6n_165";
21
+ const ml_8 = "_ml_8_nlu6n_169";
22
+ const reversed_row = "_reversed_row_nlu6n_173";
23
+ const nav_anchor = "_nav_anchor_nlu6n_177";
24
+ const site_lists = "_site_lists_nlu6n_188";
25
+ const hamburger = "_hamburger_nlu6n_192";
26
+ const mobile_logo = "_mobile_logo_nlu6n_206";
27
+ const mobile_nav = "_mobile_nav_nlu6n_229";
28
+ const mobile_opened = "_mobile_opened_nlu6n_241";
29
+ const mobile_nav_item = "_mobile_nav_item_nlu6n_245";
30
+ const icon_wrap = "_icon_wrap_nlu6n_260";
31
+ const mobile_footer = "_mobile_footer_nlu6n_265";
32
+ const mobile_footer_content = "_mobile_footer_content_nlu6n_271";
33
+ const mobile_footer_media = "_mobile_footer_media_nlu6n_285";
34
+ const footer_cta = "_footer_cta_nlu6n_292";
35
+ const inner_wrapper = "_inner_wrapper_nlu6n_324";
36
+ const btn = "_btn_nlu6n_328";
37
+ const sub_menu = "_sub_menu_nlu6n_333";
38
+ const main = "_main_nlu6n_26";
39
+ const desktop_only = "_desktop_only_nlu6n_362";
40
+ const mobile_only = "_mobile_only_nlu6n_409";
41
41
  const styles = {
42
42
  header,
43
43
  wrapper,
@@ -0,0 +1,4 @@
1
+ export declare const navItems: {
2
+ name: string;
3
+ url: string;
4
+ }[];
@@ -0,0 +1,9 @@
1
+ const navItems = [
2
+ { name: "About Us", url: "/about-us" },
3
+ { name: "Services", url: "/services" },
4
+ { name: "Software", url: "/software" },
5
+ { name: "Contact", url: "/contact" }
6
+ ];
7
+ export {
8
+ navItems
9
+ };
@@ -1,11 +1,25 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from "react/jsx-runtime";
3
3
  import clsx from "clsx";
4
- import { useState } from "react";
4
+ import { useState, useEffect } from "react";
5
+ import { NavItem } from "../NavItem/index.js";
5
6
  import styles from "./NavBar.module.js";
7
+ import { navItems } from "./NavData.js";
6
8
  const NavBarAFS = () => {
7
9
  const [isOpenMobile, setisOpenMobile] = useState(false);
8
10
  const mobileToggle = () => setisOpenMobile(!isOpenMobile);
11
+ const [activeIndex, setActiveIndex] = useState();
12
+ const handleClick = (index) => setActiveIndex(index);
13
+ const getActiveIndex = () => {
14
+ const pathname = "/" + location.pathname.split("/")[1];
15
+ const index = navItems.findIndex(
16
+ (path) => path.url === pathname
17
+ );
18
+ setActiveIndex(index);
19
+ };
20
+ useEffect(() => {
21
+ getActiveIndex();
22
+ }, [activeIndex]);
9
23
  return /* @__PURE__ */ jsxs("header", { children: [
10
24
  /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
11
25
  /* @__PURE__ */ jsx("div", { className: `${styles.desktop_only} flex_row middle`, children: /* @__PURE__ */ jsxs("div", { className: `${styles.main_nav} flex_row middle`, children: [
@@ -25,12 +39,20 @@ const NavBarAFS = () => {
25
39
  )
26
40
  }
27
41
  ) }),
28
- /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", role: "menu", children: [
29
- /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/about-us", className: "active", role: "menuitem", children: "About Us" }) }),
30
- /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/services", role: "menuitem", children: "Services" }) }),
31
- /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/software", role: "menuitem", children: "Software" }) }),
32
- /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "contact", role: "menuitem", children: "Contact" }) })
33
- ] }) })
42
+ /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
43
+ (item, i) => /* @__PURE__ */ jsx(
44
+ NavItem,
45
+ {
46
+ className: styles.main_nav_link,
47
+ onClick: handleClick,
48
+ index: i,
49
+ name: item.name,
50
+ url: item.url,
51
+ isActive: activeIndex == i
52
+ },
53
+ i
54
+ )
55
+ ) }) })
34
56
  ] }) }),
35
57
  /* @__PURE__ */ jsx(
36
58
  "button",
@@ -0,0 +1,10 @@
1
+ export interface NavItemProps {
2
+ className: string;
3
+ url: string;
4
+ index: number;
5
+ name: string;
6
+ onClick?: (index: number) => void;
7
+ isActive?: boolean;
8
+ }
9
+ export declare const NavItem: ({ className, url, name, index, onClick, isActive, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
10
+ export default NavItem;
@@ -0,0 +1,25 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ const NavItem = ({
3
+ className,
4
+ url,
5
+ name,
6
+ index,
7
+ onClick,
8
+ isActive
9
+ }) => {
10
+ const handleClick = () => onClick && onClick(index);
11
+ return /* @__PURE__ */ jsx("li", { className, children: /* @__PURE__ */ jsx(
12
+ "a",
13
+ {
14
+ href: url,
15
+ className: isActive ? "active" : "",
16
+ role: "menuitem",
17
+ onClick: handleClick,
18
+ children: name
19
+ }
20
+ ) });
21
+ };
22
+ export {
23
+ NavItem,
24
+ NavItem as default
25
+ };
@@ -99,6 +99,7 @@
99
99
  background: transparent;
100
100
  text-decoration: none;
101
101
  color: #5E6A74;
102
+ border-color: transparent;
102
103
  }
103
104
  ._13pdpuje {
104
105
  background: #8F8F8F;
@@ -109,6 +110,7 @@
109
110
  background: #8F8F8F;
110
111
  text-decoration: none;
111
112
  color: #FFFFFF;
113
+ border-color: #8F8F8F;
112
114
  }
113
115
  ._13pdpujf {
114
116
  background: #8F8F8F;
@@ -119,6 +121,7 @@
119
121
  background: #8F8F8F;
120
122
  text-decoration: none;
121
123
  color: #FFFFFF;
124
+ border-color: #8F8F8F;
122
125
  }
123
126
  ._13pdpujg {
124
127
  height: 50px;
@@ -34,6 +34,9 @@
34
34
  justify-content: flex-end;
35
35
  }
36
36
  ._1ye8k3f8 img {
37
+ max-width: 663px;
38
+ object-fit: cover;
39
+ aspect-ratio: 1 / 1;
37
40
  max-height: 480px;
38
41
  }
39
42
  ._1ye8k3fa {
@@ -85,7 +85,6 @@
85
85
  min-height: 304px;
86
86
  object-fit: cover;
87
87
  aspect-ratio: 1 / 1;
88
- min-width: 600px;
89
88
  }
90
89
  ._1m7m2an {
91
90
  padding: 32px 28px;
@@ -1,50 +1,50 @@
1
- ._header_106qs_1 {
1
+ ._header_nlu6n_1 {
2
2
  border-bottom: 1px solid #ebebeb;
3
3
  }
4
4
 
5
- ._wrapper_106qs_5 {
5
+ ._wrapper_nlu6n_5 {
6
6
  width: calc(100% - 80px);
7
7
  margin-left: auto;
8
8
  margin-right: auto;
9
9
  }
10
10
 
11
- ._header_main_row_106qs_11,
12
- ._mobile_header_106qs_12 {
11
+ ._header_main_row_nlu6n_11,
12
+ ._mobile_header_nlu6n_12 {
13
13
  min-height: 80px;
14
14
  padding-top: 1rem;
15
15
  padding-bottom: 0.5rem;
16
16
  }
17
17
 
18
- ._logo_wrap_106qs_18 {
18
+ ._logo_wrap_nlu6n_18 {
19
19
  padding: 9px 6px;
20
20
  }
21
21
 
22
- ._primary_links_106qs_22 {
22
+ ._primary_links_nlu6n_22 {
23
23
  margin-left: 30px;
24
24
  }
25
25
 
26
- ._main_nav_106qs_26 {
26
+ ._main_nav_nlu6n_26 {
27
27
  margin: 0 auto;
28
28
  width: 94%;
29
29
  max-width: 1640px;
30
30
  justify-content: space-between;
31
31
  }
32
32
 
33
- ._main_nav_link_106qs_33 {
33
+ ._main_nav_link_nlu6n_33 {
34
34
  padding: 10px 8px;
35
35
  text-align: center;
36
36
  }
37
37
 
38
- ._main_nav_link_106qs_33 .active {
38
+ ._main_nav_link_nlu6n_33 .active {
39
39
  border-color: currentColor;
40
40
  transition: border-color 0.5s ease;
41
41
  }
42
42
 
43
- ._main_nav_link_106qs_33 .active {
43
+ ._main_nav_link_nlu6n_33 .active {
44
44
  font-weight: 700;
45
45
  }
46
46
 
47
- ._main_nav_link_106qs_33 > a {
47
+ ._main_nav_link_nlu6n_33 > a {
48
48
  color: #1e3860;
49
49
  display: inline-block;
50
50
  font-size: 18px;
@@ -52,26 +52,26 @@
52
52
  border-bottom: 4px solid transparent;
53
53
  }
54
54
 
55
- ._sub_nav_link_106qs_55 a,
56
- ._main_nav_link_106qs_33 a,
57
- ._signin_wrap_106qs_57 a,
58
- ._signin_btn_106qs_58 {
55
+ ._sub_nav_link_nlu6n_55 a,
56
+ ._main_nav_link_nlu6n_33 a,
57
+ ._signin_wrap_nlu6n_57 a,
58
+ ._signin_btn_nlu6n_58 {
59
59
  text-decoration: none;
60
60
  transition: opacity 0.3s ease;
61
61
  }
62
62
 
63
- ._sub_nav_link_106qs_55:hover,
64
- ._main_nav_link_106qs_33 a:hover,
65
- ._signin_wrap_106qs_57 a:hover {
63
+ ._sub_nav_link_nlu6n_55:hover,
64
+ ._main_nav_link_nlu6n_33 a:hover,
65
+ ._signin_wrap_nlu6n_57 a:hover {
66
66
  opacity: 0.8;
67
67
  }
68
68
 
69
- ._signin_wrap_106qs_57 .link {
69
+ ._signin_wrap_nlu6n_57 .link {
70
70
  text-decoration: none;
71
71
  padding: 8px;
72
72
  }
73
73
 
74
- ._signin_btn_106qs_58 {
74
+ ._signin_btn_nlu6n_58 {
75
75
  background-color: #2f5b88;
76
76
  border: none;
77
77
  color: #fff;
@@ -84,39 +84,39 @@
84
84
  cursor: pointer;
85
85
  }
86
86
 
87
- ._signin_btn_106qs_58:hover {
87
+ ._signin_btn_nlu6n_58:hover {
88
88
  opacity: 0.9;
89
89
  }
90
90
 
91
- ._signin_btn_106qs_58 > span {
91
+ ._signin_btn_nlu6n_58 > span {
92
92
  margin-right: 8px;
93
93
  }
94
94
 
95
- ._sub_nav_106qs_55 {
95
+ ._sub_nav_nlu6n_55 {
96
96
  background-color: #1e3860;
97
97
  }
98
98
 
99
- ._header_sub_row_106qs_99 {
99
+ ._header_sub_row_nlu6n_99 {
100
100
  padding-block: 12px;
101
101
  min-height: 48px;
102
102
  }
103
103
 
104
- ._sub_nav_link_106qs_55 {
104
+ ._sub_nav_link_nlu6n_55 {
105
105
  padding-inline: 1rem;
106
106
  text-align: center;
107
107
  color: #fff;
108
108
  }
109
109
 
110
- ._sub_nav_link_106qs_55 a {
110
+ ._sub_nav_link_nlu6n_55 a {
111
111
  font-weight: 500;
112
112
  line-height: 1.5;
113
113
  }
114
114
 
115
- ._shadow_106qs_115 {
115
+ ._shadow_nlu6n_115 {
116
116
  box-shadow: 0px 8px 16px 0px rgba(30, 38, 47, 0.2);
117
117
  }
118
118
 
119
- @keyframes _fadeInDown_106qs_1 {
119
+ @keyframes _fadeInDown_nlu6n_1 {
120
120
  from {
121
121
  opacity: 0;
122
122
  transform: translate3d(0, -1%, 0);
@@ -128,18 +128,18 @@
128
128
  }
129
129
  }
130
130
 
131
- ._opacity_106qs_131 {
131
+ ._opacity_nlu6n_131 {
132
132
  animation-duration: 0.5s;
133
133
  animation-fill-mode: both;
134
- animation-name: _fadeInDown_106qs_1;
134
+ animation-name: _fadeInDown_nlu6n_1;
135
135
  }
136
136
 
137
- ._footer_106qs_137 {
137
+ ._footer_nlu6n_137 {
138
138
  margin-top: 0.5rem;
139
139
  padding-top: 1rem;
140
140
  }
141
141
 
142
- ._footer_106qs_137::before {
142
+ ._footer_nlu6n_137::before {
143
143
  content: "";
144
144
  background-color: #8f8f8f;
145
145
  height: 2px;
@@ -150,31 +150,31 @@
150
150
  width: 94%;
151
151
  }
152
152
 
153
- ._open_106qs_153 {
153
+ ._open_nlu6n_153 {
154
154
  opacity: 0.8;
155
155
  }
156
156
 
157
- ._open_106qs_153 > img {
157
+ ._open_nlu6n_153 > img {
158
158
  transform: scaleY(-1);
159
159
  }
160
160
 
161
- ._mt_8_106qs_161 {
161
+ ._mt_8_nlu6n_161 {
162
162
  margin-top: 8px;
163
163
  }
164
164
 
165
- ._mt_16_106qs_165 {
165
+ ._mt_16_nlu6n_165 {
166
166
  margin-top: 1rem;
167
167
  }
168
168
 
169
- ._ml_8_106qs_169 {
169
+ ._ml_8_nlu6n_169 {
170
170
  margin-left: 8px;
171
171
  }
172
172
 
173
- ._reversed_row_106qs_173 {
173
+ ._reversed_row_nlu6n_173 {
174
174
  flex-direction: row-reverse;
175
175
  }
176
176
 
177
- ._nav_anchor_106qs_177 {
177
+ ._nav_anchor_nlu6n_177 {
178
178
  width: 1.5rem;
179
179
  height: 1.5rem;
180
180
  aspect-ratio: 1;
@@ -182,14 +182,14 @@
182
182
  border-radius: 8px;
183
183
  }
184
184
 
185
- ._sub_nav_link_106qs_55:hover,
186
- ._signin_wrap_106qs_57 a:hover,
187
- ._main_nav_link_106qs_33 a:not(.active):hover,
188
- ._site_lists_106qs_188 a:hover {
185
+ ._sub_nav_link_nlu6n_55:hover,
186
+ ._signin_wrap_nlu6n_57 a:hover,
187
+ ._main_nav_link_nlu6n_33 a:not(.active):hover,
188
+ ._site_lists_nlu6n_188 a:hover {
189
189
  text-decoration: underline;
190
190
  }
191
191
 
192
- ._hamburger_106qs_192 {
192
+ ._hamburger_nlu6n_192 {
193
193
  background: transparent;
194
194
  border: none;
195
195
  font-size: 0px;
@@ -197,36 +197,36 @@
197
197
  outline: none;
198
198
  }
199
199
 
200
- ._hamburger_106qs_192:hover,
201
- ._mobile_header_106qs_12 button:hover {
200
+ ._hamburger_nlu6n_192:hover,
201
+ ._mobile_header_nlu6n_12 button:hover {
202
202
  cursor: pointer;
203
203
  opacity: 0.8;
204
204
  }
205
205
 
206
- ._mobile_logo_106qs_206 {
206
+ ._mobile_logo_nlu6n_206 {
207
207
  flex: 1 1 0%;
208
208
  text-align: center;
209
209
  }
210
210
 
211
- ._mobile_header_106qs_12 {
211
+ ._mobile_header_nlu6n_12 {
212
212
  padding-bottom: 1rem;
213
213
  display: grid;
214
214
  place-items: center;
215
215
  border-bottom: 1px solid #ebebeb;
216
216
  }
217
217
 
218
- ._mobile_header_106qs_12 p {
218
+ ._mobile_header_nlu6n_12 p {
219
219
  font: 400 20px / 1.3 var(--main-font-family);
220
220
  }
221
221
 
222
- ._mobile_header_106qs_12 button {
222
+ ._mobile_header_nlu6n_12 button {
223
223
  position: absolute;
224
224
  top: 50%;
225
225
  transform: translateY(-50%);
226
226
  right: 40px;
227
227
  }
228
228
 
229
- ._mobile_nav_106qs_229 {
229
+ ._mobile_nav_nlu6n_229 {
230
230
  border-right: 1px solid #ebebeb;
231
231
  left: -100%;
232
232
  min-height: 100vh;
@@ -238,16 +238,16 @@
238
238
  z-index: 9999999;
239
239
  }
240
240
 
241
- ._mobile_opened_106qs_241 {
241
+ ._mobile_opened_nlu6n_241 {
242
242
  left: 0%;
243
243
  }
244
244
 
245
- ._mobile_nav_item_106qs_245 {
245
+ ._mobile_nav_item_nlu6n_245 {
246
246
  background-color: #fff;
247
247
  border-bottom: 1px solid #ebebeb;
248
248
  }
249
249
 
250
- ._mobile_nav_item_106qs_245 > a {
250
+ ._mobile_nav_item_nlu6n_245 > a {
251
251
  color: #333d46;
252
252
  display: flex;
253
253
  font-weight: 700;
@@ -257,24 +257,24 @@
257
257
  width: 100%;
258
258
  }
259
259
 
260
- ._icon_wrap_106qs_260 {
260
+ ._icon_wrap_nlu6n_260 {
261
261
  line-height: 1;
262
262
  height: 24px;
263
263
  }
264
264
 
265
- ._mobile_footer_106qs_265 {
265
+ ._mobile_footer_nlu6n_265 {
266
266
  position: fixed;
267
267
  bottom: 0;
268
268
  width: 100%;
269
269
  }
270
270
 
271
- ._mobile_footer_content_106qs_271 {
271
+ ._mobile_footer_content_nlu6n_271 {
272
272
  background-color: #f4f4f4;
273
273
  flex: 1 1 0%;
274
274
  padding: 16px 24px 16px 40px;
275
275
  }
276
276
 
277
- ._mobile_footer_content_106qs_271 p {
277
+ ._mobile_footer_content_nlu6n_271 p {
278
278
  line-height: 1.5;
279
279
  text-overflow: ellipsis;
280
280
  display: -webkit-box;
@@ -282,18 +282,18 @@
282
282
  -webkit-line-clamp: 2;
283
283
  }
284
284
 
285
- ._mobile_footer_media_106qs_285 {
285
+ ._mobile_footer_media_nlu6n_285 {
286
286
  flex-basis: 42%;
287
287
  background: url("https://images.axos.com/o9ov1v03uwqk/7bX71xagL9g8Bc0gqlHLR/e51fb20a12c50b5e7458a4cf15567964/afs-nav-footer.jpg")
288
288
  no-repeat right center / cover;
289
289
  background-color: #f4f4f4;
290
290
  }
291
291
 
292
- ._footer_cta_106qs_292 {
292
+ ._footer_cta_nlu6n_292 {
293
293
  margin-top: 3px;
294
294
  }
295
295
 
296
- ._footer_cta_106qs_292 a {
296
+ ._footer_cta_nlu6n_292 a {
297
297
  background-color: #2f5b88;
298
298
  border-radius: 4px;
299
299
  border: 2px solid transparent;
@@ -304,40 +304,40 @@
304
304
  text-decoration: none;
305
305
  }
306
306
 
307
- ._footer_cta_106qs_292 a:hover {
307
+ ._footer_cta_nlu6n_292 a:hover {
308
308
  background-color: transparent;
309
309
  border-color: #2f5b88;
310
310
  color: #2f5b88;
311
311
  text-decoration: underline;
312
312
  }
313
313
 
314
- ._footer_cta_106qs_292 a:active {
314
+ ._footer_cta_nlu6n_292 a:active {
315
315
  background-color: #2f5b88;
316
316
  border-color: transparent;
317
317
  color: #fff;
318
318
  }
319
319
 
320
- ._mobile_footer_106qs_265 > .flex_row {
320
+ ._mobile_footer_nlu6n_265 > .flex_row {
321
321
  min-height: 112px;
322
322
  }
323
323
 
324
- ._inner_wrapper_106qs_324 {
324
+ ._inner_wrapper_nlu6n_324 {
325
325
  max-height: calc(100vh - 117px);
326
326
  }
327
327
 
328
- ._btn_106qs_328 {
328
+ ._btn_nlu6n_328 {
329
329
  display: block;
330
330
  position: relative;
331
331
  }
332
332
 
333
- ._sub_menu_106qs_333 {
333
+ ._sub_menu_nlu6n_333 {
334
334
  overflow: hidden;
335
335
  max-height: 0;
336
336
  transition: max-height 0.8s ease-out;
337
337
  background: #fff;
338
338
  }
339
339
 
340
- ._sub_menu_106qs_333 a {
340
+ ._sub_menu_nlu6n_333 a {
341
341
  display: block;
342
342
  padding: 12px 14px 12px 64px;
343
343
  position: relative;
@@ -345,28 +345,28 @@
345
345
  text-decoration: none;
346
346
  }
347
347
 
348
- ._sub_menu_106qs_333 a._main_106qs_26 {
348
+ ._sub_menu_nlu6n_333 a._main_nlu6n_26 {
349
349
  font-weight: 700;
350
350
  }
351
351
 
352
- ._sub_menu_106qs_333 a + a {
352
+ ._sub_menu_nlu6n_333 a + a {
353
353
  border-top: 1px solid #ebebeb;
354
354
  }
355
355
 
356
356
  @media (max-width: 1280px) and (min-width: 1024px) {
357
- ._wrapper_106qs_5 {
357
+ ._wrapper_nlu6n_5 {
358
358
  width: calc(100% - 28px);
359
359
  }
360
360
  }
361
361
 
362
- ._desktop_only_106qs_362 {
362
+ ._desktop_only_nlu6n_362 {
363
363
  margin: 0 auto;
364
364
  width: 94%;
365
365
  max-width: 1640px;
366
366
  }
367
367
 
368
368
  @media (max-width: 1075px) {
369
- ._desktop_only_106qs_362 {
369
+ ._desktop_only_nlu6n_362 {
370
370
  display: none !important;
371
371
  margin: 0 auto;
372
372
  width: 94%;
@@ -375,30 +375,30 @@
375
375
  }
376
376
 
377
377
  @media (max-width: 768px) {
378
- ._wrapper_106qs_5 {
378
+ ._wrapper_nlu6n_5 {
379
379
  width: calc(100% - 48px);
380
380
  }
381
381
 
382
- ._mobile_header_106qs_12 button {
382
+ ._mobile_header_nlu6n_12 button {
383
383
  right: 1.5rem;
384
384
  }
385
385
 
386
- ._mobile_nav_item_106qs_245 > a {
386
+ ._mobile_nav_item_nlu6n_245 > a {
387
387
  padding: 16px 24px;
388
388
  }
389
389
 
390
- ._sub_menu_106qs_333 a {
390
+ ._sub_menu_nlu6n_333 a {
391
391
  padding-left: 48px;
392
392
  }
393
393
 
394
- ._mobile_footer_content_106qs_271 {
394
+ ._mobile_footer_content_nlu6n_271 {
395
395
  padding-right: 15px;
396
396
  padding-left: 24px;
397
397
  }
398
398
  }
399
399
 
400
400
  @media (max-width: 450px) {
401
- ._footer_cta_106qs_292 a {
401
+ ._footer_cta_nlu6n_292 a {
402
402
  white-space: break-spaces;
403
403
  width: 100%;
404
404
  text-align: center;
@@ -406,14 +406,14 @@
406
406
  }
407
407
 
408
408
  @media (min-width: 1076px) {
409
- ._mobile_only_106qs_409 {
409
+ ._mobile_only_nlu6n_409 {
410
410
  display: none !important;
411
411
  }
412
412
  }
413
413
 
414
414
  @media (max-width: 1076px) {
415
- ._mobile_logo_106qs_206 {
415
+ ._mobile_logo_nlu6n_206 {
416
416
  margin: 10px auto;
417
- max-width: 150px;
417
+ max-width: 110px;
418
418
  }
419
419
  }
@@ -225,6 +225,11 @@ hide {
225
225
  max-width: 49.5rem;
226
226
  text-align: center;
227
227
  }
228
+ sup {
229
+ vertical-align: top;
230
+ position: relative;
231
+ top: -0.5em;
232
+ }
228
233
  @media screen and (max-width: 1023px) {
229
234
  .containment {
230
235
  width: min(41.25rem, calc(100% - 4rem));
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.10",
4
+ "version": "0.0.11",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
@@ -47,7 +47,6 @@
47
47
  "@vanilla-extract/css-utils": "^0.1.3",
48
48
  "@vanilla-extract/recipes": "^0.5.1",
49
49
  "@vanilla-extract/vite-plugin": "^4.0.3",
50
- "next": "14.0.4",
51
50
  "react": "^18.2.0",
52
51
  "react-dom": "^18.2.0"
53
52
  },