@axos-web-dev/shared-components 0.0.62 → 0.0.63

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.
Files changed (43) hide show
  1. package/dist/Button/Button.css.d.ts +27 -0
  2. package/dist/Button/Button.css.js +1 -1
  3. package/dist/Button/Button.d.ts +1 -1
  4. package/dist/Button/Button.js +6 -2
  5. package/dist/Calculators/Calculator.js +1 -0
  6. package/dist/Carousel/index.js +1 -0
  7. package/dist/Chevron/Chevron.interface.d.ts +4 -0
  8. package/dist/Chevron/index.js +1 -0
  9. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +1 -0
  10. package/dist/Forms/ContactUsBusiness.js +1 -0
  11. package/dist/Forms/EmailOnly.js +1 -0
  12. package/dist/Forms/RenderForm.js +1 -0
  13. package/dist/Forms/SuccesForm.js +1 -0
  14. package/dist/HeroBanner/HeroBanner.css.d.ts +1 -1
  15. package/dist/HeroBanner/HeroBanner.css.js +4 -3
  16. package/dist/HeroBanner/HeroBanner.d.ts +3 -0
  17. package/dist/HeroBanner/HeroBanner.interface.d.ts +14 -4
  18. package/dist/HeroBanner/HeroBanner.js +155 -0
  19. package/dist/HeroBanner/SelectionBanner.css.d.ts +24 -0
  20. package/dist/HeroBanner/SelectionBanner.css.js +19 -0
  21. package/dist/HeroBanner/index.d.ts +4 -3
  22. package/dist/HeroBanner/index.js +20 -81
  23. package/dist/Hyperlink/index.js +1 -0
  24. package/dist/ImageLink/ImageLink.js +1 -0
  25. package/dist/ImageLink/ImageLinkSet.js +1 -0
  26. package/dist/ImageLink/index.js +1 -0
  27. package/dist/Modal/Modal.js +1 -0
  28. package/dist/NavigationMenu/AxosAdvisor/NavBar.module.js +53 -53
  29. package/dist/SetContainer/SetContainer.js +1 -0
  30. package/dist/StepItem/StepItem.d.ts +1 -0
  31. package/dist/StepItem/StepItem.js +2 -2
  32. package/dist/StepItemSet/StepItemSet.css.d.ts +30 -2
  33. package/dist/StepItemSet/StepItemSet.js +2 -1
  34. package/dist/assets/Button/Button.css +33 -8
  35. package/dist/assets/HeroBanner/HeroBanner.css +5 -0
  36. package/dist/assets/HeroBanner/SelectionBanner.css +83 -0
  37. package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css.css +116 -115
  38. package/dist/assets/StepItem/StepItem.css +2 -1
  39. package/dist/assets/StepItemSet/StepItemSet.css +15 -2
  40. package/dist/assets/TopicalNavItem/TopicalNavItem.css +1 -1
  41. package/dist/assets/themes/axos.css +1 -1
  42. package/dist/main.js +19 -1
  43. package/package.json +2 -1
@@ -1,56 +1,56 @@
1
- const header = "_header_1i6pg_1";
2
- const wrapper = "_wrapper_1i6pg_5";
3
- const header_main_row = "_header_main_row_1i6pg_11";
4
- const mobile_header = "_mobile_header_1i6pg_12";
5
- const logo_wrap = "_logo_wrap_1i6pg_18";
6
- const primary_links = "_primary_links_1i6pg_22";
7
- const main_nav_link = "_main_nav_link_1i6pg_26";
8
- const sub_nav_link = "_sub_nav_link_1i6pg_48";
9
- const signin_wrap = "_signin_wrap_1i6pg_50";
10
- const signin_btn = "_signin_btn_1i6pg_51";
11
- const sub_nav = "_sub_nav_1i6pg_48";
12
- const header_sub_row = "_header_sub_row_1i6pg_93";
13
- const signin_dropdown = "_signin_dropdown_1i6pg_109";
14
- const shadow = "_shadow_1i6pg_119";
15
- const signin_header = "_signin_header_1i6pg_127";
16
- const signin_subheader = "_signin_subheader_1i6pg_134";
17
- const opacity = "_opacity_1i6pg_156";
18
- const fadeInDown = "_fadeInDown_1i6pg_1";
19
- const footer = "_footer_1i6pg_162";
20
- const open = "_open_1i6pg_178";
21
- const dd_wrapper = "_dd_wrapper_1i6pg_190";
22
- const dd_media = "_dd_media_1i6pg_195";
23
- const dd_media_img = "_dd_media_img_1i6pg_200";
24
- const dd_site_navs = "_dd_site_navs_1i6pg_204";
25
- const dd_media_header = "_dd_media_header_1i6pg_211";
26
- const mt_8 = "_mt_8_1i6pg_220";
27
- const mt_16 = "_mt_16_1i6pg_224";
28
- const ml_8 = "_ml_8_1i6pg_228";
29
- const dd_media_cta = "_dd_media_cta_1i6pg_232";
30
- const reversed_row = "_reversed_row_1i6pg_246";
31
- const headline = "_headline_1i6pg_262";
32
- const nav_anchor = "_nav_anchor_1i6pg_268";
33
- const headline_cta = "_headline_cta_1i6pg_276";
34
- const site_lists = "_site_lists_1i6pg_291";
35
- const hamburger = "_hamburger_1i6pg_326";
36
- const mobile_only = "_mobile_only_1i6pg_340";
37
- const mobile_logo = "_mobile_logo_1i6pg_346";
38
- const highlight = "_highlight_1i6pg_351";
39
- const mobile_nav = "_mobile_nav_1i6pg_387";
40
- const mobile_opened = "_mobile_opened_1i6pg_398";
41
- const mobile_nav_item = "_mobile_nav_item_1i6pg_402";
42
- const has_dropdown = "_has_dropdown_1i6pg_417";
43
- const icon_wrap = "_icon_wrap_1i6pg_438";
44
- const mobile_footer = "_mobile_footer_1i6pg_443";
45
- const mobile_footer_content = "_mobile_footer_content_1i6pg_448";
46
- const mobile_footer_media = "_mobile_footer_media_1i6pg_462";
47
- const footer_cta = "_footer_cta_1i6pg_468";
48
- const inner_wrapper = "_inner_wrapper_1i6pg_496";
49
- const btn = "_btn_1i6pg_501";
50
- const sub_menu = "_sub_menu_1i6pg_506";
51
- const main = "_main_1i6pg_26";
52
- const dd_footer = "_dd_footer_1i6pg_531";
53
- const desktop_only = "_desktop_only_1i6pg_550";
1
+ const header = "_header_s8el6_1";
2
+ const wrapper = "_wrapper_s8el6_5";
3
+ const header_main_row = "_header_main_row_s8el6_11";
4
+ const mobile_header = "_mobile_header_s8el6_12";
5
+ const logo_wrap = "_logo_wrap_s8el6_18";
6
+ const primary_links = "_primary_links_s8el6_22";
7
+ const main_nav_link = "_main_nav_link_s8el6_26";
8
+ const sub_nav_link = "_sub_nav_link_s8el6_48";
9
+ const signin_wrap = "_signin_wrap_s8el6_50";
10
+ const signin_btn = "_signin_btn_s8el6_51";
11
+ const sub_nav = "_sub_nav_s8el6_48";
12
+ const header_sub_row = "_header_sub_row_s8el6_94";
13
+ const signin_dropdown = "_signin_dropdown_s8el6_110";
14
+ const shadow = "_shadow_s8el6_120";
15
+ const signin_header = "_signin_header_s8el6_128";
16
+ const signin_subheader = "_signin_subheader_s8el6_135";
17
+ const opacity = "_opacity_s8el6_157";
18
+ const fadeInDown = "_fadeInDown_s8el6_1";
19
+ const footer = "_footer_s8el6_163";
20
+ const open = "_open_s8el6_179";
21
+ const dd_wrapper = "_dd_wrapper_s8el6_191";
22
+ const dd_media = "_dd_media_s8el6_196";
23
+ const dd_media_img = "_dd_media_img_s8el6_201";
24
+ const dd_site_navs = "_dd_site_navs_s8el6_205";
25
+ const dd_media_header = "_dd_media_header_s8el6_212";
26
+ const mt_8 = "_mt_8_s8el6_221";
27
+ const mt_16 = "_mt_16_s8el6_225";
28
+ const ml_8 = "_ml_8_s8el6_229";
29
+ const dd_media_cta = "_dd_media_cta_s8el6_233";
30
+ const reversed_row = "_reversed_row_s8el6_247";
31
+ const headline = "_headline_s8el6_263";
32
+ const nav_anchor = "_nav_anchor_s8el6_269";
33
+ const headline_cta = "_headline_cta_s8el6_277";
34
+ const site_lists = "_site_lists_s8el6_292";
35
+ const hamburger = "_hamburger_s8el6_327";
36
+ const mobile_only = "_mobile_only_s8el6_341";
37
+ const mobile_logo = "_mobile_logo_s8el6_347";
38
+ const highlight = "_highlight_s8el6_352";
39
+ const mobile_nav = "_mobile_nav_s8el6_388";
40
+ const mobile_opened = "_mobile_opened_s8el6_399";
41
+ const mobile_nav_item = "_mobile_nav_item_s8el6_403";
42
+ const has_dropdown = "_has_dropdown_s8el6_418";
43
+ const icon_wrap = "_icon_wrap_s8el6_439";
44
+ const mobile_footer = "_mobile_footer_s8el6_444";
45
+ const mobile_footer_content = "_mobile_footer_content_s8el6_449";
46
+ const mobile_footer_media = "_mobile_footer_media_s8el6_463";
47
+ const footer_cta = "_footer_cta_s8el6_469";
48
+ const inner_wrapper = "_inner_wrapper_s8el6_497";
49
+ const btn = "_btn_s8el6_502";
50
+ const sub_menu = "_sub_menu_s8el6_507";
51
+ const main = "_main_s8el6_26";
52
+ const dd_footer = "_dd_footer_s8el6_532";
53
+ const desktop_only = "_desktop_only_s8el6_551";
54
54
  const styles = {
55
55
  header,
56
56
  wrapper,
@@ -46,6 +46,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
46
46
  import "../FaqAccordion/index.js";
47
47
  import "../FooterDisclosure/FooterDisclosure.css.js";
48
48
  /* empty css */
49
+ import "../HeroBanner/SelectionBanner.css.js";
49
50
  import { set_container, inline_container } from "./SetContainer.css.js";
50
51
  import "../ImageBillboard/ImageBillboard.css.js";
51
52
  import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -3,6 +3,7 @@ import { ReactNode, FC } from 'react';
3
3
 
4
4
  export interface StepItemProps {
5
5
  id: string;
6
+ counter: number;
6
7
  title?: string | ReactNode;
7
8
  description?: string | ReactNode;
8
9
  variant?: QuaternaryTypes;
@@ -3,16 +3,16 @@ import { getVariant } from "../utils/getVariant.js";
3
3
  import { li, line_points, point, step_num, bullet_details, bs_topic, bs_copy } from "./StepItem.css.js";
4
4
  const StepItem = ({
5
5
  id,
6
+ counter,
6
7
  title,
7
8
  description,
8
9
  variant: fullVariant = "primary"
9
10
  }) => {
10
11
  const variant = getVariant(fullVariant);
11
- let counter = 0;
12
12
  return /* @__PURE__ */ jsxs("li", { className: `flex ${li}`, id: `id_${id}`, children: [
13
13
  /* @__PURE__ */ jsx("div", { className: `${line_points({ variant })}`, children: /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
14
14
  /* @__PURE__ */ jsx("div", { className: `${point({ variant })}`, children: " " }),
15
- /* @__PURE__ */ jsx("div", { className: `flex center middle ${step_num({ variant })}`, children: ++counter })
15
+ /* @__PURE__ */ jsx("div", { className: `flex center middle ${step_num({ variant })}`, children: counter })
16
16
  ] }) }),
17
17
  /* @__PURE__ */ jsxs("div", { className: bullet_details, children: [
18
18
  /* @__PURE__ */ jsx("span", { className: `${bs_topic({ variant })}`, role: "heading", children: title }),
@@ -39,10 +39,38 @@ export declare const modifier: import('@vanilla-extract/recipes').RuntimeFn<{
39
39
  export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
40
40
  variant: {
41
41
  primary: {
42
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
42
+ selectors: {
43
+ [x: string]: {
44
+ WebkitBackgroundClip: "text";
45
+ backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
+ WebkitTextFillColor: "transparent";
47
+ textShadow: "0px 0px #00000000";
48
+ color?: undefined;
49
+ } | {
50
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
+ WebkitBackgroundClip?: undefined;
52
+ backgroundImage?: undefined;
53
+ WebkitTextFillColor?: undefined;
54
+ textShadow?: undefined;
55
+ };
56
+ };
43
57
  };
44
58
  secondary: {
45
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ selectors: {
60
+ [x: string]: {
61
+ WebkitBackgroundClip: "text";
62
+ backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ WebkitTextFillColor: "transparent";
64
+ textShadow: "0px 0px #00000000";
65
+ color?: undefined;
66
+ } | {
67
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
68
+ WebkitBackgroundClip?: undefined;
69
+ backgroundImage?: undefined;
70
+ WebkitTextFillColor?: undefined;
71
+ textShadow?: undefined;
72
+ };
73
+ };
46
74
  };
47
75
  tertiary: {
48
76
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -65,7 +65,8 @@ const StepItemSet = ({
65
65
  /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
66
66
  StepItem,
67
67
  {
68
- id: `id_${id}`,
68
+ id: `id_${step.id}`,
69
+ counter: index + 1,
69
70
  title: step?.title,
70
71
  description: step?.description,
71
72
  variant: step?.variant
@@ -90,48 +90,67 @@
90
90
  border-radius: 16px;
91
91
  }
92
92
  ._13pdpujd {
93
+ width: 160px;
94
+ min-height: 160px;
95
+ white-space: break-spaces;
96
+ text-align: center;
97
+ padding: 0 1em;
98
+ display: flex;
99
+ flex-direction: column;
100
+ justify-content: center;
101
+ background: #fff;
102
+ color: #333D46;
103
+ border: 1px solid #EBEBEB;
104
+ align-items: center;
105
+ gap: 8px;
106
+ }
107
+ ._13pdpujd:hover {
108
+ background: #EBEBEB;
109
+ color: #333D46;
110
+ }
111
+ ._13pdpuje {
93
112
  color: #5E6A74;
94
113
  background: transparent;
95
114
  cursor: not-allowed;
96
115
  }
97
- ._13pdpujd:hover {
116
+ ._13pdpuje:hover {
98
117
  cursor: not-allowed;
99
118
  background: transparent;
100
119
  text-decoration: none;
101
120
  color: #5E6A74;
102
121
  border-color: transparent;
103
122
  }
104
- ._13pdpuje {
123
+ ._13pdpujf {
105
124
  background: #8F8F8F;
106
125
  color: #FFFFFF;
107
126
  }
108
- ._13pdpuje:hover {
127
+ ._13pdpujf:hover {
109
128
  cursor: not-allowed;
110
129
  background: #8F8F8F;
111
130
  text-decoration: none;
112
131
  color: #FFFFFF;
113
132
  border-color: #8F8F8F;
114
133
  }
115
- ._13pdpujf {
134
+ ._13pdpujg {
116
135
  background: #8F8F8F;
117
136
  color: #FFFFFF;
118
137
  }
119
- ._13pdpujf:hover {
138
+ ._13pdpujg:hover {
120
139
  cursor: not-allowed;
121
140
  background: #8F8F8F;
122
141
  text-decoration: none;
123
142
  color: #FFFFFF;
124
143
  border-color: #8F8F8F;
125
144
  }
126
- ._13pdpujg {
145
+ ._13pdpujh {
127
146
  height: 50px;
128
147
  padding: 12px 64px 12px 64px;
129
148
  }
130
- ._13pdpujh {
149
+ ._13pdpuji {
131
150
  height: 40px;
132
151
  padding: 8px 48px 8px 48px;
133
152
  }
134
- ._13pdpuji {
153
+ ._13pdpujj {
135
154
  height: 28px;
136
155
  padding: 4px 32px 4px 32px;
137
156
  }
@@ -145,4 +164,10 @@
145
164
  ._13pdpuj7 {
146
165
  padding: 11px 1.5rem;
147
166
  }
167
+ }
168
+ @media screen and (max-width:768px) {
169
+ ._13pdpujd {
170
+ width: 120px;
171
+ min-height: 120px;
172
+ }
148
173
  }
@@ -114,6 +114,11 @@
114
114
  ._1ye8k3f0 ._1ye8k3fl {
115
115
  flex-direction: column;
116
116
  }
117
+ ._7etqoq5 ._1ye8k3fl {
118
+ flex-direction: row;
119
+ justify-content: center;
120
+ flex-wrap: wrap;
121
+ }
117
122
  }
118
123
  @media (max-width: 1280px) and (min-width: 1024px) {
119
124
  ._1ye8k3f0 ._1ye8k3f9 {
@@ -0,0 +1,83 @@
1
+ ._7etqoq0 {
2
+ font: 600 2.5rem / 1.25 var(--header-font-family);
3
+ }
4
+ ._7etqoq1 {
5
+ color: var(--_1073cm83);
6
+ }
7
+ ._7etqoq2 {
8
+ background: var(--_1073cm8a);
9
+ background-clip: text;
10
+ -webkit-text-fill-color: transparent;
11
+ text-shadow: 0px 0px #00000000;
12
+ }
13
+ ._7etqoq3 {
14
+ color: var(--_1073cm8j);
15
+ }
16
+ ._7etqoq4 {
17
+ color: var(--_1073cm8o);
18
+ }
19
+ ._7etqoq5 {
20
+ background: #fff;
21
+ min-height: 480px;
22
+ width: 50%;
23
+ position: relative;
24
+ display: flex;
25
+ align-items: center;
26
+ }
27
+ ._7etqoq6 {
28
+ position: absolute;
29
+ background: #fff;
30
+ left: 0;
31
+ top: 0;
32
+ bottom: 0;
33
+ width: 50vw;
34
+ z-index: 0;
35
+ }
36
+ ._7etqoq7 {
37
+ position: relative;
38
+ color: #333D46;
39
+ padding-left: 60px;
40
+ max-width: 588px;
41
+ width: 100%;
42
+ }
43
+ ._7etqoq8 {
44
+ max-width: 64px;
45
+ max-height: 64px;
46
+ width: 100%;
47
+ height: 100%;
48
+ }
49
+ ._7etqoq9 {
50
+ max-width: 64px;
51
+ width: 100%;
52
+ height: 100%;
53
+ max-height: 64px;
54
+ }
55
+ @media screen and (max-width:768px) {
56
+ ._7etqoq0 {
57
+ font-size: 28px;
58
+ line-height: 1.29;
59
+ text-align: center;
60
+ }
61
+ }
62
+ @media (max-width:1024px) {
63
+ ._7etqoq5 {
64
+ width: 100vw;
65
+ padding: 2rem 0;
66
+ }
67
+ ._7etqoq7 {
68
+ width: min(45rem, calc(100% - 4rem));
69
+ margin: 0 auto;
70
+ padding: 2rem 0;
71
+ text-align: center;
72
+ }
73
+ }
74
+ @media screen and (max-width:1280px) {
75
+ ._7etqoq8 {
76
+ max-width: 48px;
77
+ max-height: 48px;
78
+ }
79
+ ._7etqoq9 {
80
+ max-width: 48px;
81
+ max-height: 48px;
82
+ }
83
+ }