@axos-web-dev/shared-components 0.0.70 → 0.0.72

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 (25) hide show
  1. package/dist/Calculators/Calculator.js +1 -0
  2. package/dist/Carousel/index.js +1 -0
  3. package/dist/Chevron/index.js +1 -0
  4. package/dist/Comparison/Comparison.js +1 -0
  5. package/dist/Comparison/ComparisonSet.js +1 -0
  6. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +1 -0
  7. package/dist/Forms/ContactUsAAS.js +2 -1
  8. package/dist/Forms/ContactUsBusiness.js +1 -0
  9. package/dist/Forms/EmailOnly.js +1 -0
  10. package/dist/Forms/SuccesForm.js +1 -0
  11. package/dist/HeroBanner/HeroBanner.interface.d.ts +1 -1
  12. package/dist/HeroBanner/HeroBanner.js +208 -105
  13. package/dist/HeroBanner/LargeBanner.css.d.ts +77 -0
  14. package/dist/HeroBanner/LargeBanner.css.js +21 -0
  15. package/dist/Hyperlink/index.js +1 -0
  16. package/dist/ImageLink/ImageLink.js +1 -0
  17. package/dist/ImageLink/ImageLinkSet.js +1 -0
  18. package/dist/ImageLink/index.js +1 -0
  19. package/dist/Input/InputTextArea.js +2 -1
  20. package/dist/Modal/Modal.js +1 -0
  21. package/dist/NavigationMenu/AxosBank/SubNavBar.js +1 -0
  22. package/dist/SetContainer/SetContainer.js +1 -0
  23. package/dist/assets/HeroBanner/LargeBanner.css +243 -0
  24. package/dist/assets/SetContainer/SetContainer.css +20 -0
  25. package/package.json +1 -1
package/dist/Calculators/Calculator.js CHANGED
@@ -44,6 +44,7 @@ import "../Carousel/index.js";
44
44
  /* empty css */
45
45
  import "../Comparison/Comparison.css.js";
46
46
  import "../HeroBanner/HeroBanner.css.js";
47
+ import "../HeroBanner/LargeBanner.css.js";
47
48
  import "../HeroBanner/SelectionBanner.css.js";
48
49
  import "../SetContainer/SetContainer.css.js";
49
50
  import "../Tab/Tab.css.js";
package/dist/Carousel/index.js CHANGED
@@ -46,6 +46,7 @@ import "../Calculators/calculator.css.js";
46
46
  /* empty css */
47
47
  import "../Comparison/Comparison.css.js";
48
48
  import "../HeroBanner/HeroBanner.css.js";
49
+ import "../HeroBanner/LargeBanner.css.js";
49
50
  import "../HeroBanner/SelectionBanner.css.js";
50
51
  import "../SetContainer/SetContainer.css.js";
51
52
  import "../Tab/Tab.css.js";
package/dist/Chevron/index.js CHANGED
@@ -46,6 +46,7 @@ import "../Carousel/index.js";
46
46
  /* empty css */
47
47
  import "../Comparison/Comparison.css.js";
48
48
  import "../HeroBanner/HeroBanner.css.js";
49
+ import "../HeroBanner/LargeBanner.css.js";
49
50
  import "../HeroBanner/SelectionBanner.css.js";
50
51
  import "../SetContainer/SetContainer.css.js";
51
52
  import "../Tab/Tab.css.js";
package/dist/Comparison/Comparison.js CHANGED
@@ -45,6 +45,7 @@ import "../Carousel/index.js";
45
45
  /* empty css */
46
46
  import { comparison, comparison_layout, headerComparison, comparison_feature, feature_header, feature_title, comparison_list, comparison_buttons } from "./Comparison.css.js";
47
47
  import "../HeroBanner/HeroBanner.css.js";
48
+ import "../HeroBanner/LargeBanner.css.js";
48
49
  import "../HeroBanner/SelectionBanner.css.js";
49
50
  import "../SetContainer/SetContainer.css.js";
50
51
  import { active_content } from "../Tab/Tab.css.js";
package/dist/Comparison/ComparisonSet.js CHANGED
@@ -51,6 +51,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
51
51
  import "../FaqAccordion/index.js";
52
52
  import "../FooterDisclosure/FooterDisclosure.css.js";
53
53
  /* empty css */
54
+ import "../HeroBanner/LargeBanner.css.js";
54
55
  import "../HeroBanner/SelectionBanner.css.js";
55
56
  import "../SetContainer/SetContainer.css.js";
56
57
  import "../ImageBillboard/ImageBillboard.css.js";
package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js CHANGED
@@ -44,6 +44,7 @@ import "../../Carousel/index.js";
44
44
  /* empty css */
45
45
  import "../../Comparison/Comparison.css.js";
46
46
  import "../../HeroBanner/HeroBanner.css.js";
47
+ import "../../HeroBanner/LargeBanner.css.js";
47
48
  import "../../HeroBanner/SelectionBanner.css.js";
48
49
  import "../../SetContainer/SetContainer.css.js";
49
50
  import "../../Tab/Tab.css.js";
package/dist/Forms/ContactUsAAS.js CHANGED
@@ -48,6 +48,7 @@ import "../Carousel/index.js";
48
48
  /* empty css */
49
49
  import "../Comparison/Comparison.css.js";
50
50
  import "../HeroBanner/HeroBanner.css.js";
51
+ import "../HeroBanner/LargeBanner.css.js";
51
52
  import "../HeroBanner/SelectionBanner.css.js";
52
53
  import "../SetContainer/SetContainer.css.js";
53
54
  import "../Tab/Tab.css.js";
@@ -242,7 +243,7 @@ const ContactUsAAS = ({
242
243
  ...register("Current_Assets_Under_Management__c", {
243
244
  required: true
244
245
  }),
245
- label: "Current Assets Under Management*",
246
+ label: "Current AUM*",
246
247
  sizes: "medium",
247
248
  required: true,
248
249
  error: !!errors.Current_Assets_Under_Management__c,
package/dist/Forms/ContactUsBusiness.js CHANGED
@@ -48,6 +48,7 @@ import "../Carousel/index.js";
48
48
  /* empty css */
49
49
  import "../Comparison/Comparison.css.js";
50
50
  import "../HeroBanner/HeroBanner.css.js";
51
+ import "../HeroBanner/LargeBanner.css.js";
51
52
  import "../HeroBanner/SelectionBanner.css.js";
52
53
  import "../SetContainer/SetContainer.css.js";
53
54
  import "../Tab/Tab.css.js";
package/dist/Forms/EmailOnly.js CHANGED
@@ -49,6 +49,7 @@ import "../Carousel/index.js";
49
49
  /* empty css */
50
50
  import "../Comparison/Comparison.css.js";
51
51
  import "../HeroBanner/HeroBanner.css.js";
52
+ import "../HeroBanner/LargeBanner.css.js";
52
53
  import "../HeroBanner/SelectionBanner.css.js";
53
54
  import "../SetContainer/SetContainer.css.js";
54
55
  import "../Tab/Tab.css.js";
package/dist/Forms/SuccesForm.js CHANGED
@@ -42,6 +42,7 @@ import "../Carousel/index.js";
42
42
  /* empty css */
43
43
  import "../Comparison/Comparison.css.js";
44
44
  import "../HeroBanner/HeroBanner.css.js";
45
+ import "../HeroBanner/LargeBanner.css.js";
45
46
  import "../HeroBanner/SelectionBanner.css.js";
46
47
  import "../SetContainer/SetContainer.css.js";
47
48
  import "../Tab/Tab.css.js";
package/dist/HeroBanner/HeroBanner.interface.d.ts CHANGED
@@ -19,7 +19,7 @@ export type HeroBannerWithSelection = {
19
19
  };
20
20
  export interface HeroBannerInterface extends HeroBannerWithImage, HeroBannerWithSelection {
21
21
  id?: string;
22
- bannerType?: "Hero" | "Logout";
22
+ bannerType?: string;
23
23
  className?: string;
24
24
  variant: string;
25
25
  eyebrow: string | ReactNode;
package/dist/HeroBanner/HeroBanner.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
+ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import { Button } from "../Button/Button.js";
3
3
  import "../Button/Button.css.js";
4
4
  import "react";
@@ -7,6 +7,7 @@ import { Chevron } from "../Chevron/index.js";
7
7
  import { getVariant } from "../utils/getVariant.js";
8
8
  import clsx from "clsx";
9
9
  import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
10
+ import { lg_hero_banner, lg_hero_content, lg_hero_text, lg_hero_eyebrow, lg_headline_text, lg_hero_img, lg_hero_sizing } from "./LargeBanner.css.js";
10
11
  import { selection_section, selection_section_bg, selection_section_content, selection_headline_text, selection_section_icon, selection_section_icon_img } from "./SelectionBanner.css.js";
11
12
  const HeroBanner = ({
12
13
  id,
@@ -21,134 +22,236 @@ const HeroBanner = ({
21
22
  selection,
22
23
  isSelectionBanner = false
23
24
  }) => {
24
- return /* @__PURE__ */ jsx(
25
- "section",
26
- {
27
- id: `id_${id}`,
28
- className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
29
- children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
30
- "div",
31
- {
32
- className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
33
- children: [
34
- /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
35
- eyebrow && /* @__PURE__ */ jsx("h1", { className: heroSupertag({ variant: getVariant(variant) }), children: eyebrow }),
36
- eyebrow ? /* @__PURE__ */ jsx("h2", { className: headline_text({ variant: getVariant(variant) }), children: headline }) : /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
37
- /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
38
- callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
39
- ({
40
- id: id2,
41
- variant: variant2,
42
- displayText,
43
- targetUrl,
44
- type
45
- }) => type === "Button" ? /* @__PURE__ */ jsx(
46
- Button,
25
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
26
+ (bannerType === "Hero" || "Logout") && /* @__PURE__ */ jsx(
27
+ "section",
28
+ {
29
+ id: `id_${id}`,
30
+ className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
31
+ children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
32
+ "div",
33
+ {
34
+ className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
35
+ children: [
36
+ /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
37
+ eyebrow && /* @__PURE__ */ jsx(
38
+ "h1",
47
39
  {
48
- targetUrl,
49
- color: getVariant(variant2),
50
- size: "large",
51
- rounded: "medium",
52
- children: displayText
53
- },
54
- id2
40
+ className: heroSupertag({ variant: getVariant(variant) }),
41
+ children: eyebrow
42
+ }
43
+ ),
44
+ eyebrow ? /* @__PURE__ */ jsx(
45
+ "h2",
46
+ {
47
+ className: headline_text({
48
+ variant: getVariant(variant)
49
+ }),
50
+ children: headline
51
+ }
55
52
  ) : /* @__PURE__ */ jsx(
56
- Chevron,
53
+ "h1",
57
54
  {
58
- targetUrl,
59
- variant: getVariant(variant2),
60
- goBack: bannerType == "Logout",
61
- children: displayText
62
- },
63
- id2
64
- )
65
- ) })
66
- ] }),
67
- !isSelectionBanner ? /* @__PURE__ */ jsx("div", { className: hero_img, role: "presentation", children: /* @__PURE__ */ jsx(
68
- "img",
69
- {
70
- decoding: "async",
71
- "data-nimg": 1,
72
- className: "img_fluid",
73
- style: { color: "transparent" },
74
- src: `${image?.src}?fm=webp&w=604&h=480&fit=fill`,
75
- alt: image?.alt
76
- }
77
- ) }) : /* @__PURE__ */ jsxs("div", { className: clsx(selection_section), children: [
78
- /* @__PURE__ */ jsx("div", { className: clsx(selection_section_bg) }),
79
- /* @__PURE__ */ jsxs("div", { className: clsx(selection_section_content), children: [
80
- /* @__PURE__ */ jsxs("div", { children: [
81
- /* @__PURE__ */ jsx(
82
- "h3",
83
- {
84
- className: clsx(
85
- "header_2",
86
- selection_headline_text({ variant: getVariant(variant) })
87
- ),
88
- children: selection?.headline
89
- }
90
- ),
91
- /* @__PURE__ */ jsx("div", { children: selection?.bodyCopy })
92
- ] }),
93
- selection?.callToActionRow && selection?.callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: selection?.callToActionRow.map(
55
+ className: headline_text({
56
+ variant: getVariant(variant)
57
+ }),
58
+ children: headline
59
+ }
60
+ ),
61
+ /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
62
+ callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
94
63
  ({
95
64
  id: id2,
96
- icon,
65
+ variant: variant2,
97
66
  displayText,
98
67
  targetUrl,
99
68
  type
100
- }) => type === "Button" ? /* @__PURE__ */ jsxs(
69
+ }) => type === "Button" ? /* @__PURE__ */ jsx(
101
70
  Button,
102
71
  {
103
72
  targetUrl,
104
- color: "tertiary",
73
+ color: getVariant(variant2),
105
74
  size: "large",
106
75
  rounded: "medium",
107
- square: true,
108
- children: [
109
- /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
110
- "img",
111
- {
112
- alt: "",
113
- src: icon,
114
- className: clsx(selection_section_icon_img)
115
- }
116
- ) }),
117
- displayText
118
- ]
76
+ children: displayText
77
+ },
78
+ id2
79
+ ) : /* @__PURE__ */ jsx(
80
+ Chevron,
81
+ {
82
+ targetUrl,
83
+ variant: getVariant(variant2),
84
+ goBack: bannerType == "Logout",
85
+ children: displayText
119
86
  },
120
87
  id2
121
- ) : /* @__PURE__ */ jsxs(
88
+ )
89
+ ) })
90
+ ] }),
91
+ !isSelectionBanner ? /* @__PURE__ */ jsx("div", { className: hero_img, role: "presentation", children: /* @__PURE__ */ jsx(
92
+ "img",
93
+ {
94
+ decoding: "async",
95
+ "data-nimg": 1,
96
+ className: "img_fluid",
97
+ style: { color: "transparent" },
98
+ src: `${image?.src}?fm=webp&w=604&h=480&fit=fill`,
99
+ alt: image?.alt
100
+ }
101
+ ) }) : /* @__PURE__ */ jsxs("div", { className: clsx(selection_section), children: [
102
+ /* @__PURE__ */ jsx("div", { className: clsx(selection_section_bg) }),
103
+ /* @__PURE__ */ jsxs("div", { className: clsx(selection_section_content), children: [
104
+ /* @__PURE__ */ jsxs("div", { children: [
105
+ /* @__PURE__ */ jsx(
106
+ "h3",
107
+ {
108
+ className: clsx(
109
+ "header_2",
110
+ selection_headline_text({
111
+ variant: getVariant(variant)
112
+ })
113
+ ),
114
+ children: selection?.headline
115
+ }
116
+ ),
117
+ /* @__PURE__ */ jsx("div", { children: selection?.bodyCopy })
118
+ ] }),
119
+ selection?.callToActionRow && selection?.callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: selection?.callToActionRow.map(
120
+ ({
121
+ id: id2,
122
+ icon,
123
+ displayText,
124
+ targetUrl,
125
+ type
126
+ }) => type === "Button" ? /* @__PURE__ */ jsxs(
127
+ Button,
128
+ {
129
+ targetUrl,
130
+ color: "tertiary",
131
+ size: "large",
132
+ rounded: "medium",
133
+ square: true,
134
+ children: [
135
+ /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
136
+ "img",
137
+ {
138
+ alt: "",
139
+ src: icon,
140
+ className: clsx(
141
+ selection_section_icon_img
142
+ )
143
+ }
144
+ ) }),
145
+ displayText
146
+ ]
147
+ },
148
+ id2
149
+ ) : /* @__PURE__ */ jsxs(
150
+ Button,
151
+ {
152
+ targetUrl,
153
+ color: "tertiary",
154
+ rounded: "medium",
155
+ size: "large",
156
+ square: true,
157
+ children: [
158
+ /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
159
+ "img",
160
+ {
161
+ alt: "",
162
+ src: icon,
163
+ className: clsx(
164
+ selection_section_icon_img
165
+ )
166
+ }
167
+ ) }),
168
+ displayText
169
+ ]
170
+ },
171
+ id2
172
+ )
173
+ ) })
174
+ ] })
175
+ ] })
176
+ ]
177
+ }
178
+ ) })
179
+ },
180
+ id
181
+ ),
182
+ bannerType === "Large" && /* @__PURE__ */ jsx(
183
+ "section",
184
+ {
185
+ className: lg_hero_banner({ variant: getVariant(variant) }),
186
+ id: `id_${id}`,
187
+ children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs("div", { className: `${lg_hero_content} flex between middle`, children: [
188
+ /* @__PURE__ */ jsx(
189
+ "div",
190
+ {
191
+ className: `${lg_hero_text({ variant: getVariant(variant) })} rounded`,
192
+ children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
193
+ eyebrow && /* @__PURE__ */ jsx(
194
+ "h1",
195
+ {
196
+ className: lg_hero_eyebrow({
197
+ variant: getVariant(variant)
198
+ }),
199
+ children: eyebrow
200
+ }
201
+ ),
202
+ eyebrow ? /* @__PURE__ */ jsx(
203
+ "h2",
204
+ {
205
+ className: lg_headline_text({
206
+ variant: getVariant(variant)
207
+ }),
208
+ children: headline
209
+ }
210
+ ) : /* @__PURE__ */ jsx(
211
+ "h1",
212
+ {
213
+ className: headline_text({
214
+ variant: getVariant(variant)
215
+ }),
216
+ children: headline
217
+ }
218
+ ),
219
+ /* @__PURE__ */ jsx("div", { className: "push_up", children: /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }) }),
220
+ callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
221
+ ({
222
+ id: id2,
223
+ variant: variant2,
224
+ displayText,
225
+ targetUrl,
226
+ type
227
+ }) => type === "Button" ? /* @__PURE__ */ jsx(
122
228
  Button,
123
229
  {
124
230
  targetUrl,
125
- color: "tertiary",
126
- rounded: "medium",
231
+ color: getVariant(variant2),
127
232
  size: "large",
128
- square: true,
129
- children: [
130
- /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
131
- "img",
132
- {
133
- alt: "",
134
- src: icon,
135
- className: clsx(selection_section_icon_img)
136
- }
137
- ) }),
138
- displayText
139
- ]
233
+ rounded: "medium",
234
+ children: displayText
235
+ },
236
+ id2
237
+ ) : /* @__PURE__ */ jsx(
238
+ Chevron,
239
+ {
240
+ targetUrl,
241
+ variant: getVariant(variant2),
242
+ children: displayText
140
243
  },
141
244
  id2
142
245
  )
143
246
  ) })
144
247
  ] })
145
- ] })
146
- ]
147
- }
148
- ) })
149
- },
150
- id
151
- );
248
+ }
249
+ ),
250
+ /* @__PURE__ */ jsx("div", { role: "presentation", className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${lg_hero_img} rounded`, role: "presentation", children: /* @__PURE__ */ jsx("img", { alt: "", className: lg_hero_sizing, src: image?.src }) }) })
251
+ ] }) })
252
+ }
253
+ )
254
+ ] });
152
255
  };
153
256
  export {
154
257
  HeroBanner
package/dist/HeroBanner/LargeBanner.css.d.ts ADDED
@@ -0,0 +1,77 @@
1
+ export declare const lg_hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
2
+ variant: {
3
+ primary: {
4
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5
+ };
6
+ secondary: {
7
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
+ };
9
+ tertiary: {
10
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ };
12
+ quaternary: {
13
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14
+ };
15
+ };
16
+ }>;
17
+ export declare const lg_hero_content: string;
18
+ export declare const lg_hero_text: import('@vanilla-extract/recipes').RuntimeFn<{
19
+ variant: {
20
+ primary: {
21
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
+ };
24
+ secondary: {
25
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
26
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ };
28
+ tertiary: {
29
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ };
32
+ quaternary: {
33
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ };
36
+ };
37
+ }>;
38
+ export declare const lg_hero_eyebrow: import('@vanilla-extract/recipes').RuntimeFn<{
39
+ variant: {
40
+ primary: {
41
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
42
+ };
43
+ secondary: {
44
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
45
+ };
46
+ tertiary: {
47
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
48
+ backgroundClip: "text";
49
+ WebkitTextFillColor: "transparent";
50
+ textShadow: "0px 0px #00000000";
51
+ };
52
+ quaternary: {
53
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
+ backgroundClip: "text";
55
+ WebkitTextFillColor: "transparent";
56
+ textShadow: "0px 0px #00000000";
57
+ };
58
+ };
59
+ }>;
60
+ export declare const lg_headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
61
+ variant: {
62
+ primary: {
63
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ };
65
+ secondary: {
66
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ };
68
+ tertiary: {
69
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ };
71
+ quaternary: {
72
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
+ };
74
+ };
75
+ }>;
76
+ export declare const lg_hero_img: string;
77
+ export declare const lg_hero_sizing: string;
package/dist/HeroBanner/LargeBanner.css.js ADDED
@@ -0,0 +1,21 @@
1
+ /* empty css */
2
+ /* empty css */
3
+ /* empty css */
4
+ /* empty css */
5
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
6
+ var lg_hero_banner = createRuntimeFn({ defaultClassName: "_1bsyngo0", variantClassNames: { variant: { primary: "_1bsyngo1", secondary: "_1bsyngo2", tertiary: "_1bsyngo3", quaternary: "_1bsyngo4" } }, defaultVariants: {}, compoundVariants: [] });
7
+ var lg_hero_content = "_1bsyngo5";
8
+ var lg_hero_text = createRuntimeFn({ defaultClassName: "_1bsyngo6", variantClassNames: { variant: { primary: "_1bsyngo7", secondary: "_1bsyngo8", tertiary: "_1bsyngo9", quaternary: "_1bsyngoa" } }, defaultVariants: {}, compoundVariants: [] });
9
+ var lg_hero_eyebrow = createRuntimeFn({ defaultClassName: "_1bsyngob", variantClassNames: { variant: { primary: "_1bsyngoc", secondary: "_1bsyngod", tertiary: "_1bsyngoe", quaternary: "_1bsyngof" } }, defaultVariants: {}, compoundVariants: [] });
10
+ var lg_headline_text = createRuntimeFn({ defaultClassName: "_1bsyngog", variantClassNames: { variant: { primary: "_1bsyngoh", secondary: "_1bsyngoi", tertiary: "_1bsyngoj", quaternary: "_1bsyngok" } }, defaultVariants: {}, compoundVariants: [] });
11
+ var lg_hero_img = "_1bsyngol";
12
+ var lg_hero_sizing = "_1bsyngom";
13
+ export {
14
+ lg_headline_text,
15
+ lg_hero_banner,
16
+ lg_hero_content,
17
+ lg_hero_eyebrow,
18
+ lg_hero_img,
19
+ lg_hero_sizing,
20
+ lg_hero_text
21
+ };
package/dist/Hyperlink/index.js CHANGED
@@ -46,6 +46,7 @@ import "../Carousel/index.js";
46
46
  /* empty css */
47
47
  import "../Comparison/Comparison.css.js";
48
48
  import "../HeroBanner/HeroBanner.css.js";
49
+ import "../HeroBanner/LargeBanner.css.js";
49
50
  import "../HeroBanner/SelectionBanner.css.js";
50
51
  import "../SetContainer/SetContainer.css.js";
51
52
  import "../Tab/Tab.css.js";
package/dist/ImageLink/ImageLink.js CHANGED
@@ -72,6 +72,7 @@ import "../Table/Table.css.js";
72
72
  import "next/script.js";
73
73
  /* empty css */
74
74
  /* empty css */
75
+ import "../HeroBanner/LargeBanner.css.js";
75
76
  import "../HeroBanner/SelectionBanner.css.js";
76
77
  const ImageLink = ({
77
78
  id,
package/dist/ImageLink/ImageLinkSet.js CHANGED
@@ -54,6 +54,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
54
54
  import "../FaqAccordion/index.js";
55
55
  import "../FooterDisclosure/FooterDisclosure.css.js";
56
56
  /* empty css */
57
+ import "../HeroBanner/LargeBanner.css.js";
57
58
  import "../HeroBanner/SelectionBanner.css.js";
58
59
  import "../ImageBillboard/ImageBillboard.css.js";
59
60
  import ImageLink from "./ImageLink.js";
package/dist/ImageLink/index.js CHANGED
@@ -43,6 +43,7 @@ import "../Carousel/index.js";
43
43
  /* empty css */
44
44
  import "../Comparison/Comparison.css.js";
45
45
  import "../HeroBanner/HeroBanner.css.js";
46
+ import "../HeroBanner/LargeBanner.css.js";
46
47
  import "../HeroBanner/SelectionBanner.css.js";
47
48
  import "../SetContainer/SetContainer.css.js";
48
49
  import "../Tab/Tab.css.js";
package/dist/Input/InputTextArea.js CHANGED
@@ -35,7 +35,8 @@ const InputTextArea = forwardRef((props, ref) => {
35
35
  className: clsx(props.className, input({ size: sizes })),
36
36
  rows,
37
37
  placeholder: props.placeholder,
38
- maxLength
38
+ maxLength,
39
+ style: { resize: "vertical" }
39
40
  }
40
41
  ),
41
42
  iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
package/dist/Modal/Modal.js CHANGED
@@ -43,6 +43,7 @@ import "../Carousel/index.js";
43
43
  /* empty css */
44
44
  import "../Comparison/Comparison.css.js";
45
45
  import "../HeroBanner/HeroBanner.css.js";
46
+ import "../HeroBanner/LargeBanner.css.js";
46
47
  import "../HeroBanner/SelectionBanner.css.js";
47
48
  import "../SetContainer/SetContainer.css.js";
48
49
  import "../Tab/Tab.css.js";
package/dist/NavigationMenu/AxosBank/SubNavBar.js CHANGED
@@ -45,6 +45,7 @@ import "../../Carousel/index.js";
45
45
  /* empty css */
46
46
  import "../../Comparison/Comparison.css.js";
47
47
  import "../../HeroBanner/HeroBanner.css.js";
48
+ import "../../HeroBanner/LargeBanner.css.js";
48
49
  import "../../HeroBanner/SelectionBanner.css.js";
49
50
  import "../../SetContainer/SetContainer.css.js";
50
51
  import "../../Tab/Tab.css.js";
package/dist/SetContainer/SetContainer.js CHANGED
@@ -74,6 +74,7 @@ import "../Table/Table.css.js";
74
74
  import "next/script.js";
75
75
  /* empty css */
76
76
  /* empty css */
77
+ import "../HeroBanner/LargeBanner.css.js";
77
78
  import "../HeroBanner/SelectionBanner.css.js";
78
79
  const SetContainer = ({
79
80
  id,
package/dist/assets/HeroBanner/LargeBanner.css ADDED
@@ -0,0 +1,243 @@
1
+ ._1bsyngo0 {
2
+ position: relative;
3
+ overflow: hidden;
4
+ isolation: isolate;
5
+ }
6
+ ._1bsyngo1 {
7
+ background: var(--_1073cm81);
8
+ }
9
+ ._1bsyngo2 {
10
+ background: var(--_1073cm88);
11
+ }
12
+ ._1bsyngo3 {
13
+ background: var(--_1073cm8f);
14
+ }
15
+ ._1bsyngo4 {
16
+ background: var(--_1073cm8m);
17
+ }
18
+ ._1bsyngo5 {
19
+ isolation: isolate;
20
+ overflow: hidden;
21
+ position: relative;
22
+ }
23
+ ._1bsyngo6 {
24
+ padding: 2rem 0;
25
+ position: relative;
26
+ z-index: 1;
27
+ }
28
+ ._1bsyngo7 {
29
+ background: var(--_1073cm8f);
30
+ color: var(--_1073cm8g);
31
+ }
32
+ ._1bsyngo8 {
33
+ background: var(--_1073cm8f);
34
+ color: var(--_1073cm8g);
35
+ }
36
+ ._1bsyngo9 {
37
+ background: var(--_1073cm81);
38
+ color: var(--_1073cm82);
39
+ }
40
+ ._1bsyngoa {
41
+ background: var(--_1073cm81);
42
+ color: var(--_1073cm82);
43
+ }
44
+ ._1bsyngob {
45
+ display: block;
46
+ font: 700 14px / 1.3 var(--main-font-family);
47
+ margin-bottom: 2px;
48
+ letter-spacing: .2px;
49
+ }
50
+ ._1bsyngoc {
51
+ color: var(--_1073cm8k);
52
+ }
53
+ ._1bsyngod {
54
+ color: var(--_1073cm8k);
55
+ }
56
+ ._1bsyngoe {
57
+ background: var(--_1073cm84);
58
+ background-clip: text;
59
+ -webkit-text-fill-color: transparent;
60
+ text-shadow: 0px 0px #00000000;
61
+ }
62
+ ._1bsyngof {
63
+ background: var(--_1073cm84);
64
+ background-clip: text;
65
+ -webkit-text-fill-color: transparent;
66
+ text-shadow: 0px 0px #00000000;
67
+ }
68
+ ._1bsyngog {
69
+ font: 600 2.5rem / 1.25 var(--header-font-family);
70
+ }
71
+ ._1bsyngoh {
72
+ color: var(--_1073cm8h);
73
+ }
74
+ ._1bsyngoi {
75
+ color: var(--_1073cm8h);
76
+ }
77
+ ._1bsyngoj {
78
+ color: var(--_1073cm83);
79
+ }
80
+ ._1bsyngok {
81
+ color: var(--_1073cm83);
82
+ }
83
+ options => {
84
+ var className = config.defaultClassName;
85
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
86
+ for (var variantName in selections) {
87
+ var _selections$variantNa;
88
+ var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
89
+ if (variantSelection != null) {
90
+ var selection = variantSelection;
91
+ if (typeof selection === 'boolean') {
92
+ // @ts-expect-error
93
+ selection = selection === true ? 'true' : 'false';
94
+ }
95
+ var selectionClassName =
96
+ // @ts-expect-error
97
+ config.variantClassNames[variantName][selection];
98
+ if (selectionClassName) {
99
+ className += ' ' + selectionClassName;
100
+ }
101
+ }
102
+ }
103
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
104
+ if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
105
+ className += ' ' + compoundClassName;
106
+ }
107
+ }
108
+ return className;
109
+ } p {
110
+ font: 400 18px / 1.44 var(--main-font-family);
111
+ letter-spacing: .2px;
112
+ }
113
+ ._1bsyngol {
114
+ isolation: isolate;
115
+ overflow: hidden;
116
+ position: relative;
117
+ }
118
+ ._1bsyngom {
119
+ width: 100%;
120
+ height: 100%;
121
+ object-position: right bottom;
122
+ object-fit: cover;
123
+ }
124
+ @media (max-width:1023px) {
125
+ options => {
126
+ var className = config.defaultClassName;
127
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
128
+ for (var variantName in selections) {
129
+ var _selections$variantNa;
130
+ var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
131
+ if (variantSelection != null) {
132
+ var selection = variantSelection;
133
+ if (typeof selection === 'boolean') {
134
+ // @ts-expect-error
135
+ selection = selection === true ? 'true' : 'false';
136
+ }
137
+ var selectionClassName =
138
+ // @ts-expect-error
139
+ config.variantClassNames[variantName][selection];
140
+ if (selectionClassName) {
141
+ className += ' ' + selectionClassName;
142
+ }
143
+ }
144
+ }
145
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
146
+ if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
147
+ className += ' ' + compoundClassName;
148
+ }
149
+ }
150
+ return className;
151
+ } > .containment {
152
+ width: 100%;
153
+ max-width: 100%;
154
+ border-radius: 0 !important;
155
+ }
156
+ ._1bsyngo5 > .containment {
157
+ padding: 24px;
158
+ }
159
+ ._1bsyngo5 > * {
160
+ width: 100%;
161
+ border-radius: 0 !important;
162
+ }
163
+ }
164
+ @media (max-width: 1023px) {
165
+ ._1bsyngo5 {
166
+ flex-direction: column;
167
+ }
168
+ ._1bsyngo6 {
169
+ text-align: center;
170
+ border-radius: 0;
171
+ }
172
+ ._1bsyngol {
173
+ justify-content: flex-start;
174
+ width: 100%;
175
+ max-width: min(330px,100%);
176
+ margin-right: auto;
177
+ margin-left: auto;
178
+ }
179
+ }
180
+ @media (min-width: 1024px) {
181
+ ._1bsyngo5 {
182
+ min-height: calc(42.5rem + ((1vw - 10.24px) * 23.3463));
183
+ }
184
+ ._1bsyngo6 {
185
+ width: 59%;
186
+ max-width: 690px;
187
+ padding: 56px;
188
+ }
189
+ ._1bsyngol {
190
+ position: absolute;
191
+ right: 0;
192
+ height: 81%;
193
+ width: 66%;
194
+ top: 50%;
195
+ transform: translateY(-50%);
196
+ }
197
+ }
198
+ @media (min-width: 1281px) {
199
+ ._1bsyngo5 {
200
+ min-height: 740px;
201
+ }
202
+ }
203
+ @media (min-width:1024px) {
204
+ ._1bsyngo5 .containment {
205
+ display: contents;
206
+ }
207
+ }
208
+ @media screen and (max-width:768px) {
209
+ ._1bsyngog {
210
+ font-size: 28px;
211
+ line-height: 1.29;
212
+ }
213
+ options => {
214
+ var className = config.defaultClassName;
215
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
216
+ for (var variantName in selections) {
217
+ var _selections$variantNa;
218
+ var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
219
+ if (variantSelection != null) {
220
+ var selection = variantSelection;
221
+ if (typeof selection === 'boolean') {
222
+ // @ts-expect-error
223
+ selection = selection === true ? 'true' : 'false';
224
+ }
225
+ var selectionClassName =
226
+ // @ts-expect-error
227
+ config.variantClassNames[variantName][selection];
228
+ if (selectionClassName) {
229
+ className += ' ' + selectionClassName;
230
+ }
231
+ }
232
+ }
233
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
234
+ if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
235
+ className += ' ' + compoundClassName;
236
+ }
237
+ }
238
+ return className;
239
+ } p {
240
+ font-size: 1rem;
241
+ line-height: 1.5;
242
+ }
243
+ }
package/dist/assets/SetContainer/SetContainer.css CHANGED
@@ -87,6 +87,26 @@
87
87
  grid-template-columns: 1fr;
88
88
  }
89
89
  }
90
+ @media (min-width: 1024px) {
91
+ ._18ygy9m5:has(:nth-child(5):last-child) {
92
+ grid-template-columns: repeat(4,1fr);
93
+ }
94
+ ._18ygy9m5:has(:nth-child(5):last-child) > * {
95
+ grid-column: span 2;
96
+ }
97
+ ._18ygy9m5:has(:nth-child(5):last-child) > *:last-child {
98
+ grid-column: 2 / span 2;
99
+ }
100
+ ._18ygy9m5:has(:nth-child(7):last-child) {
101
+ grid-template-columns: repeat(4,1fr);
102
+ }
103
+ ._18ygy9m5:has(:nth-child(7):last-child) > * {
104
+ grid-column: span 2;
105
+ }
106
+ ._18ygy9m5:has(:nth-child(7):last-child) > *:last-child {
107
+ grid-column: 2 / span 2;
108
+ }
109
+ }
90
110
  @media screen and (max-width:320px) {
91
111
  ._18ygy9m7 {
92
112
  max-width: 100%;
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.70",
4
+ "version": "0.0.72",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",