@axos-web-dev/shared-components 0.0.28 → 0.0.30

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.
@@ -4,7 +4,6 @@ import { Button } from "../Button/Button.js";
4
4
  import { button } from "../Button/Button.css.js";
5
5
  import { useState, useCallback, useEffect } from "react";
6
6
  import "react-use";
7
- import { Chevron } from "../Chevron/index.js";
8
7
  import { vars } from "../themes/axos.css.js";
9
8
  /* empty css */
10
9
  /* empty css */
@@ -102,10 +101,7 @@ const ApyCalculator = () => {
102
101
  "APY Interest Calculator",
103
102
  /* @__PURE__ */ jsx("sup", { children: "3" })
104
103
  ] }),
105
- /* @__PURE__ */ jsxs("p", { className: "push_up", children: [
106
- "Calculate how much interest you can earn on your money with our APY Interest Calculator.",
107
- /* @__PURE__ */ jsx("sup", { children: "1" })
108
- ] })
104
+ /* @__PURE__ */ jsx("p", { className: "push_up", children: "Calculate how much interest you can earn on your money with our APY Interest Calculator." })
109
105
  ] }),
110
106
  /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
111
107
  /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: /* @__PURE__ */ jsx("span", { className: `${errorTag}`, children: error }) }),
@@ -255,21 +251,18 @@ const ApyCalculator = () => {
255
251
  style: { backgroundColor: "#efeef0", maxWidth: "520px" },
256
252
  children: [
257
253
  /* @__PURE__ */ jsx("h2", { className: "header_2", children: "Select Savings" }),
258
- /* @__PURE__ */ jsx("div", { className: "push_up mb_0", children: "Zero fees. Up to 0.20% APY**. Complimentary ATM card. Select Savings helps your clients bank smarter with an account that rewards their savvy money habits." }),
259
- /* @__PURE__ */ jsxs("div", { className: `${cta_section} push_up_24 flex flex_row`, children: [
260
- /* @__PURE__ */ jsx(
261
- Button,
262
- {
263
- id: "btn-savings",
264
- targetUrl: "/products/select-savings",
265
- color: "secondary",
266
- size: "medium",
267
- rounded: "medium",
268
- children: "Learn More"
269
- }
270
- ),
271
- /* @__PURE__ */ jsx(Chevron, { targetUrl: "/recommended-for-you", variant: "primary", children: "Open an Account" })
272
- ] })
254
+ /* @__PURE__ */ jsx("div", { className: "push_up mb_0", children: "Zero fees. Up to 0.20% APY*. Complimentary ATM card. Select Savings helps your clients bank smarter with an account that rewards their savvy money habits." }),
255
+ /* @__PURE__ */ jsx("div", { className: `${cta_section} push_up_24 flex flex_row center`, children: /* @__PURE__ */ jsx(
256
+ Button,
257
+ {
258
+ id: "btn-savings",
259
+ targetUrl: "/products/select-savings",
260
+ color: "secondary",
261
+ size: "medium",
262
+ rounded: "medium",
263
+ children: "Learn More"
264
+ }
265
+ ) })
273
266
  ]
274
267
  }
275
268
  ),
@@ -283,7 +276,7 @@ const ApyCalculator = () => {
283
276
  /* @__PURE__ */ jsxs("table", { className: `${marketing_table}`, children: [
284
277
  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
285
278
  /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "Account" }),
286
- /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "APY**" })
279
+ /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "APY*" })
287
280
  ] }) }),
288
281
  /* @__PURE__ */ jsxs("tbody", { children: [
289
282
  /* @__PURE__ */ jsxs("tr", { children: [
@@ -26,6 +26,7 @@ import "../Carousel/index.js";
26
26
  import "../HeroBanner/HeroBanner.css.js";
27
27
  import "../ContentBanner/ContentBanner.css.js";
28
28
  /* empty css */
29
+ import "../ExecutiveBio/ExecutiveBio.css.js";
29
30
  import "../FaqAccordion/index.js";
30
31
  import "../FooterDisclosure/FooterDisclosure.css.js";
31
32
  import "../Forms/Forms.css.js";
@@ -0,0 +1,169 @@
1
+ export declare const item_bio: import('@vanilla-extract/recipes').RuntimeFn<{
2
+ variant: {
3
+ primary: {
4
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
+ };
8
+ secondary: {
9
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ };
12
+ tertiary: {
13
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ };
16
+ quaternary: {
17
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
18
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
19
+ };
20
+ };
21
+ }>;
22
+ export declare const bio_name: import('@vanilla-extract/recipes').RuntimeFn<{
23
+ variant: {
24
+ primary: {
25
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
26
+ };
27
+ secondary: {
28
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
+ };
30
+ tertiary: {
31
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
+ };
33
+ quaternary: {
34
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ };
36
+ };
37
+ }>;
38
+ export declare const job_title: 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
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
48
+ };
49
+ quaternary: {
50
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
+ };
52
+ };
53
+ }>;
54
+ export declare const svg_icon: import('@vanilla-extract/recipes').RuntimeFn<{
55
+ variant: {
56
+ primary: {
57
+ fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ };
59
+ secondary: {
60
+ fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ };
62
+ tertiary: {
63
+ fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ };
65
+ quaternary: {
66
+ fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ };
68
+ };
69
+ }>;
70
+ export declare const description: string;
71
+ export declare const contact_col: string;
72
+ export declare const padding: string;
73
+ export declare const copy: string;
74
+ export declare const contact_entry: import('@vanilla-extract/recipes').RuntimeFn<{
75
+ variant: {
76
+ primary: {
77
+ color: "#0062B3";
78
+ };
79
+ secondary: {
80
+ color: "#0062B3";
81
+ };
82
+ tertiary: {
83
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
+ };
85
+ quaternary: {
86
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ };
88
+ };
89
+ }>;
90
+ export declare const contacts: string;
91
+ export declare const headshot: string;
92
+ export declare const img_area: string;
93
+ export declare const media: string;
94
+ export declare const person: string;
95
+ export declare const shift: string;
96
+ export declare const bio_section_text: string;
97
+ export declare const section_theme: import('@vanilla-extract/recipes').RuntimeFn<{
98
+ variant: {
99
+ primary: {
100
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
101
+ };
102
+ secondary: {
103
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
104
+ paddingTop: "56px";
105
+ paddingBottom: "56px";
106
+ marginTop: number;
107
+ "@media": {
108
+ "(max-width: 1023px)": {
109
+ paddingTop: "42px";
110
+ paddingBottom: "42px";
111
+ };
112
+ "(max-width: 768px)": {
113
+ paddingTop: "32px";
114
+ paddingBottom: "32px";
115
+ };
116
+ };
117
+ };
118
+ tertiary: {
119
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
+ paddingTop: "56px";
121
+ paddingBottom: "56px";
122
+ marginTop: number;
123
+ "@media": {
124
+ "(max-width: 1023px)": {
125
+ paddingTop: "42px";
126
+ paddingBottom: "42px";
127
+ };
128
+ "(max-width: 768px)": {
129
+ paddingTop: "32px";
130
+ paddingBottom: "32px";
131
+ };
132
+ };
133
+ };
134
+ quaternary: {
135
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
+ paddingTop: "56px";
137
+ paddingBottom: "56px";
138
+ marginTop: number;
139
+ "@media": {
140
+ "(max-width: 1023px)": {
141
+ paddingTop: "42px";
142
+ paddingBottom: "42px";
143
+ };
144
+ "(max-width: 768px)": {
145
+ paddingTop: "32px";
146
+ paddingBottom: "32px";
147
+ };
148
+ };
149
+ };
150
+ };
151
+ }>;
152
+ export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<{
153
+ variant: {
154
+ primary: {
155
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
+ };
157
+ secondary: {
158
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
159
+ };
160
+ tertiary: {
161
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
162
+ };
163
+ quaternary: {
164
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
165
+ };
166
+ };
167
+ }>;
168
+ export declare const components: string;
169
+ export declare const details: string;
@@ -0,0 +1,47 @@
1
+ /* empty css */
2
+ /* empty css */
3
+ /* empty css */
4
+ /* empty css */
5
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
6
+ var item_bio = createRuntimeFn({ defaultClassName: "txcb8d0", variantClassNames: { variant: { primary: "txcb8d1", secondary: "txcb8d2", tertiary: "txcb8d3", quaternary: "txcb8d4" } }, defaultVariants: {}, compoundVariants: [] });
7
+ var bio_name = createRuntimeFn({ defaultClassName: "txcb8d5", variantClassNames: { variant: { primary: "txcb8d6", secondary: "txcb8d7", tertiary: "txcb8d8", quaternary: "txcb8d9" } }, defaultVariants: {}, compoundVariants: [] });
8
+ var job_title = createRuntimeFn({ defaultClassName: "txcb8da", variantClassNames: { variant: { primary: "txcb8db", secondary: "txcb8dc", tertiary: "txcb8dd", quaternary: "txcb8de" } }, defaultVariants: {}, compoundVariants: [] });
9
+ var svg_icon = createRuntimeFn({ defaultClassName: "txcb8df", variantClassNames: { variant: { primary: "txcb8dg", secondary: "txcb8dh", tertiary: "txcb8di", quaternary: "txcb8dj" } }, defaultVariants: {}, compoundVariants: [] });
10
+ var description = "txcb8dk";
11
+ var contact_col = "txcb8dl";
12
+ var padding = "txcb8dm";
13
+ var copy = "txcb8dn";
14
+ var contact_entry = createRuntimeFn({ defaultClassName: "txcb8do", variantClassNames: { variant: { primary: "txcb8dp", secondary: "txcb8dq", tertiary: "txcb8dr", quaternary: "txcb8ds" } }, defaultVariants: {}, compoundVariants: [] });
15
+ var contacts = "txcb8dt";
16
+ var headshot = "txcb8du";
17
+ var img_area = "txcb8dv";
18
+ var media = "txcb8dw";
19
+ var person = "txcb8dx";
20
+ var shift = "txcb8dy";
21
+ var bio_section_text = "txcb8dz";
22
+ var section_theme = createRuntimeFn({ defaultClassName: "txcb8d10", variantClassNames: { variant: { primary: "txcb8d11", secondary: "txcb8d12", tertiary: "txcb8d13", quaternary: "txcb8d14" } }, defaultVariants: {}, compoundVariants: [] });
23
+ var header_theme = createRuntimeFn({ defaultClassName: "txcb8d15", variantClassNames: { variant: { primary: "txcb8d16", secondary: "txcb8d17", tertiary: "txcb8d18", quaternary: "txcb8d19" } }, defaultVariants: {}, compoundVariants: [] });
24
+ var components = "txcb8d1a";
25
+ var details = "txcb8d1b";
26
+ export {
27
+ bio_name,
28
+ bio_section_text,
29
+ components,
30
+ contact_col,
31
+ contact_entry,
32
+ contacts,
33
+ copy,
34
+ description,
35
+ details,
36
+ header_theme,
37
+ headshot,
38
+ img_area,
39
+ item_bio,
40
+ job_title,
41
+ media,
42
+ padding,
43
+ person,
44
+ section_theme,
45
+ shift,
46
+ svg_icon
47
+ };
@@ -0,0 +1,3 @@
1
+ import { Props } from './ExecutiveBio.interface';
2
+
3
+ export declare const ExecutiveBio: ({ id, executiveName, executiveTitle, executiveBodyCopy, executiveEmailAddress, executivePhoneNumber, executiveHeadshot, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,22 @@
1
+ import { ReactNode } from 'react';
2
+ import { ImageInterface } from '../IconBillboard';
3
+ import { QuaternaryTypes } from '../utils/variant.types';
4
+
5
+ export interface ExecutiveBioSetProps {
6
+ id: string;
7
+ variant: QuaternaryTypes;
8
+ title?: ReactNode | string;
9
+ description?: ReactNode | string;
10
+ executiveBios: ExecutiveBioProps[];
11
+ additionalDetails?: string | ReactNode;
12
+ }
13
+ export interface ExecutiveBioProps {
14
+ id: string;
15
+ variant: QuaternaryTypes;
16
+ executiveName: string;
17
+ executiveTitle: string;
18
+ executiveBodyCopy?: string | ReactNode;
19
+ executiveEmailAddress: string;
20
+ executivePhoneNumber: string;
21
+ executiveHeadshot?: ImageInterface;
22
+ }
@@ -0,0 +1,101 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { getVariant } from "../utils/getVariant.js";
3
+ import { padding, item_bio, shift, media, headshot, img_area, description, person, bio_name, job_title, copy, contacts, contact_col, svg_icon, contact_entry } from "./ExecutiveBio.css.js";
4
+ const ExecutiveBio = ({
5
+ id,
6
+ executiveName,
7
+ executiveTitle,
8
+ executiveBodyCopy,
9
+ executiveEmailAddress,
10
+ executivePhoneNumber,
11
+ executiveHeadshot,
12
+ variant
13
+ }) => {
14
+ return /* @__PURE__ */ jsx("section", { className: "section_spacer", id: `id_${id}`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx(
15
+ "div",
16
+ {
17
+ className: `${padding} ${item_bio({ variant: getVariant(variant) })} rounded`,
18
+ children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
19
+ executiveHeadshot && /* @__PURE__ */ jsx("div", { className: media, children: /* @__PURE__ */ jsx("div", { className: headshot, children: /* @__PURE__ */ jsx(
20
+ "div",
21
+ {
22
+ className: img_area,
23
+ style: {
24
+ backgroundImage: `url(${executiveHeadshot == null ? void 0 : executiveHeadshot.src})`
25
+ },
26
+ role: "presentation",
27
+ children: " "
28
+ }
29
+ ) }) }),
30
+ /* @__PURE__ */ jsxs("div", { className: `${description} flex_col between`, children: [
31
+ /* @__PURE__ */ jsxs("div", { className: person, children: [
32
+ /* @__PURE__ */ jsx(
33
+ "h2",
34
+ {
35
+ className: `${bio_name({ variant: getVariant(variant) })} header_3`,
36
+ children: executiveName
37
+ }
38
+ ),
39
+ /* @__PURE__ */ jsx(
40
+ "h3",
41
+ {
42
+ className: `${job_title({ variant: getVariant(variant) })}`,
43
+ children: executiveTitle
44
+ }
45
+ ),
46
+ /* @__PURE__ */ jsx("div", { className: copy, children: executiveBodyCopy })
47
+ ] }),
48
+ executiveEmailAddress || executivePhoneNumber && /* @__PURE__ */ jsx("div", { className: `${contacts} flex between push_up_24`, children: /* @__PURE__ */ jsxs("div", { className: `${contact_col} flex`, children: [
49
+ executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
50
+ /* @__PURE__ */ jsx(
51
+ "svg",
52
+ {
53
+ className: svg_icon({ variant }),
54
+ width: "24",
55
+ height: "24",
56
+ viewBox: "0 0 24 24",
57
+ fill: "none",
58
+ xmlns: "http://www.w3.org/2000/svg",
59
+ children: /* @__PURE__ */ jsx(
60
+ "path",
61
+ {
62
+ "fill-rule": "evenodd",
63
+ "clip-rule": "evenodd",
64
+ d: "M5.25 4.5C5.25 2.84315 6.59315 1.5 8.25 1.5H15.75C17.4069 1.5 18.75 2.84315 18.75 4.5V19.5C18.75 21.1569 17.4069 22.5 15.75 22.5H8.25C6.59315 22.5 5.25 21.1569 5.25 19.5V4.5ZM6.75 4.5C6.75 3.67157 7.42157 3 8.25 3C8.25 3.82843 8.92157 4.5 9.75 4.5H14.25C15.0784 4.5 15.75 3.82843 15.75 3C16.5784 3 17.25 3.67157 17.25 4.5V19.5C17.25 20.3284 16.5784 21 15.75 21H8.25C7.42157 21 6.75 20.3284 6.75 19.5V4.5Z",
65
+ fill: "#fff"
66
+ }
67
+ )
68
+ }
69
+ ),
70
+ /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `tel:${executivePhoneNumber}`, children: executivePhoneNumber }) })
71
+ ] }),
72
+ executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
73
+ /* @__PURE__ */ jsx(
74
+ "svg",
75
+ {
76
+ className: svg_icon({ variant }),
77
+ width: "24",
78
+ height: "24",
79
+ viewBox: "0 0 24 24",
80
+ fill: "none",
81
+ xmlns: "http://www.w3.org/2000/svg",
82
+ children: /* @__PURE__ */ jsx(
83
+ "path",
84
+ {
85
+ d: "M21 4.5C21.8284 4.5 22.5 5.17157 22.5 6V18C22.5 18.8284 21.8284 19.5 21 19.5H3C2.17157 19.5 1.5 18.8284 1.5 18V6C1.5 5.17157 2.17157 4.5 3 4.5H21ZM14.3932 12.455L14.1963 12.6098C12.8873 13.5569 11.1127 13.5569 9.80369 12.6098L9.60517 12.455L4.059 18H19.9395L14.3932 12.455ZM21 6.8655L15.5437 11.483L21 16.9395V6.8655ZM3 6.867V16.938L8.45467 11.483L3 6.867ZM19.701 6H4.2975L10.5466 11.2878C11.3296 11.9503 12.4523 11.9944 13.2806 11.4203L13.4534 11.2878L19.701 6Z",
86
+ fill: "#fff"
87
+ }
88
+ )
89
+ }
90
+ ),
91
+ /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `mailto:${executiveEmailAddress}`, children: executiveEmailAddress }) })
92
+ ] })
93
+ ] }) })
94
+ ] })
95
+ ] })
96
+ }
97
+ ) }) });
98
+ };
99
+ export {
100
+ ExecutiveBio
101
+ };
@@ -0,0 +1,4 @@
1
+ import { Props } from './ExecutiveBio.interface';
2
+ import { SetContainerProps } from '../SetContainer';
3
+
4
+ export declare const ExecutiveBioSet: ({ id, title, description, executiveBios, additionalDetails, variant, headline, }: Props & SetContainerProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,147 @@
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
+ import { getVariant } from "../utils/getVariant.js";
3
+ import { section_theme, bio_section_text, header_theme, components, padding, item_bio, shift, media, headshot, img_area, person, bio_name, job_title, copy, contacts, contact_col, svg_icon, contact_entry, details } from "./ExecutiveBio.css.js";
4
+ const ExecutiveBioSet = ({
5
+ id,
6
+ title,
7
+ description,
8
+ executiveBios,
9
+ additionalDetails,
10
+ variant,
11
+ headline
12
+ }) => {
13
+ return /* @__PURE__ */ jsxs("section", { id, className: section_theme({ variant }), children: [
14
+ /* @__PURE__ */ jsx("div", { className: "containment", children: (title || description) && /* @__PURE__ */ jsxs("div", { className: bio_section_text, children: [
15
+ headline && /* @__PURE__ */ jsx(
16
+ "h2",
17
+ {
18
+ className: `header_1 ${header_theme({ variant: getVariant(variant) })}`,
19
+ children: title
20
+ }
21
+ ),
22
+ description && /* @__PURE__ */ jsx(Fragment, { children: description })
23
+ ] }) }),
24
+ /* @__PURE__ */ jsx("div", { className: components, children: executiveBios.map(
25
+ ({
26
+ id: id2,
27
+ executiveName,
28
+ executiveTitle,
29
+ executiveBodyCopy,
30
+ executiveEmailAddress,
31
+ executivePhoneNumber,
32
+ executiveHeadshot,
33
+ variant: variant2
34
+ }) => /* @__PURE__ */ jsx("section", { className: "section_spacer", id: `id_${id2}`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx(
35
+ "div",
36
+ {
37
+ className: `${padding} ${item_bio({ variant: getVariant(variant2) })} rounded`,
38
+ children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
39
+ executiveHeadshot && /* @__PURE__ */ jsx("div", { className: media, children: /* @__PURE__ */ jsx("div", { className: headshot, children: /* @__PURE__ */ jsx(
40
+ "div",
41
+ {
42
+ className: img_area,
43
+ style: {
44
+ backgroundImage: `url(${executiveHeadshot == null ? void 0 : executiveHeadshot.src})`
45
+ },
46
+ role: "presentation",
47
+ children: " "
48
+ }
49
+ ) }) }),
50
+ /* @__PURE__ */ jsxs("div", { className: `${description} flex_col between`, children: [
51
+ /* @__PURE__ */ jsxs("div", { className: person, children: [
52
+ title ? /* @__PURE__ */ jsxs(Fragment, { children: [
53
+ /* @__PURE__ */ jsx(
54
+ "h3",
55
+ {
56
+ className: `${bio_name({ variant: getVariant(variant2) })} header_3`,
57
+ children: executiveName
58
+ }
59
+ ),
60
+ /* @__PURE__ */ jsx(
61
+ "h4",
62
+ {
63
+ className: `${job_title({ variant: getVariant(variant2) })}`,
64
+ children: executiveTitle
65
+ }
66
+ )
67
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
68
+ /* @__PURE__ */ jsx(
69
+ "h2",
70
+ {
71
+ className: `${bio_name({ variant: getVariant(variant2) })} header_3`,
72
+ children: executiveName
73
+ }
74
+ ),
75
+ /* @__PURE__ */ jsx(
76
+ "h3",
77
+ {
78
+ className: `${job_title({ variant: getVariant(variant2) })}`,
79
+ children: executiveTitle
80
+ }
81
+ )
82
+ ] }),
83
+ /* @__PURE__ */ jsx("div", { className: copy, children: executiveBodyCopy })
84
+ ] }),
85
+ executiveEmailAddress || executivePhoneNumber && /* @__PURE__ */ jsx(
86
+ "div",
87
+ {
88
+ className: `${contacts} flex between push_up_24`,
89
+ children: /* @__PURE__ */ jsxs("div", { className: `${contact_col} flex`, children: [
90
+ executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
91
+ /* @__PURE__ */ jsx(
92
+ "svg",
93
+ {
94
+ className: svg_icon({ variant: variant2 }),
95
+ width: "24",
96
+ height: "24",
97
+ viewBox: "0 0 24 24",
98
+ fill: "none",
99
+ xmlns: "http://www.w3.org/2000/svg",
100
+ children: /* @__PURE__ */ jsx(
101
+ "path",
102
+ {
103
+ "fill-rule": "evenodd",
104
+ "clip-rule": "evenodd",
105
+ d: "M5.25 4.5C5.25 2.84315 6.59315 1.5 8.25 1.5H15.75C17.4069 1.5 18.75 2.84315 18.75 4.5V19.5C18.75 21.1569 17.4069 22.5 15.75 22.5H8.25C6.59315 22.5 5.25 21.1569 5.25 19.5V4.5ZM6.75 4.5C6.75 3.67157 7.42157 3 8.25 3C8.25 3.82843 8.92157 4.5 9.75 4.5H14.25C15.0784 4.5 15.75 3.82843 15.75 3C16.5784 3 17.25 3.67157 17.25 4.5V19.5C17.25 20.3284 16.5784 21 15.75 21H8.25C7.42157 21 6.75 20.3284 6.75 19.5V4.5Z",
106
+ fill: "#fff"
107
+ }
108
+ )
109
+ }
110
+ ),
111
+ /* @__PURE__ */ jsx("div", { className: contact_entry({ variant: variant2 }), children: /* @__PURE__ */ jsx("a", { href: `tel:${executivePhoneNumber}`, children: executivePhoneNumber }) })
112
+ ] }),
113
+ executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
114
+ /* @__PURE__ */ jsx(
115
+ "svg",
116
+ {
117
+ className: svg_icon({ variant: variant2 }),
118
+ width: "24",
119
+ height: "24",
120
+ viewBox: "0 0 24 24",
121
+ fill: "none",
122
+ xmlns: "http://www.w3.org/2000/svg",
123
+ children: /* @__PURE__ */ jsx(
124
+ "path",
125
+ {
126
+ d: "M21 4.5C21.8284 4.5 22.5 5.17157 22.5 6V18C22.5 18.8284 21.8284 19.5 21 19.5H3C2.17157 19.5 1.5 18.8284 1.5 18V6C1.5 5.17157 2.17157 4.5 3 4.5H21ZM14.3932 12.455L14.1963 12.6098C12.8873 13.5569 11.1127 13.5569 9.80369 12.6098L9.60517 12.455L4.059 18H19.9395L14.3932 12.455ZM21 6.8655L15.5437 11.483L21 16.9395V6.8655ZM3 6.867V16.938L8.45467 11.483L3 6.867ZM19.701 6H4.2975L10.5466 11.2878C11.3296 11.9503 12.4523 11.9944 13.2806 11.4203L13.4534 11.2878L19.701 6Z",
127
+ fill: "#fff"
128
+ }
129
+ )
130
+ }
131
+ ),
132
+ /* @__PURE__ */ jsx("div", { className: contact_entry({ variant: variant2 }), children: /* @__PURE__ */ jsx("a", { href: `mailto:${executiveEmailAddress}`, children: executiveEmailAddress }) })
133
+ ] })
134
+ ] })
135
+ }
136
+ )
137
+ ] })
138
+ ] })
139
+ }
140
+ ) }) }, id2)
141
+ ) }),
142
+ additionalDetails && /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: details, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) }) })
143
+ ] });
144
+ };
145
+ export {
146
+ ExecutiveBioSet
147
+ };
@@ -0,0 +1,4 @@
1
+ export * from './ExecutiveBio';
2
+ export * from './ExecutiveBio.css';
3
+ export type * from './ExecutiveBio.interface';
4
+ export * from './ExecutiveBioSet';
@@ -0,0 +1,27 @@
1
+ import { ExecutiveBio } from "./ExecutiveBio.js";
2
+ import { bio_name, bio_section_text, components, contact_col, contact_entry, contacts, copy, description, details, header_theme, headshot, img_area, item_bio, job_title, media, padding, person, section_theme, shift, svg_icon } from "./ExecutiveBio.css.js";
3
+ import { ExecutiveBioSet } from "./ExecutiveBioSet.js";
4
+ export {
5
+ ExecutiveBio,
6
+ ExecutiveBioSet,
7
+ bio_name,
8
+ bio_section_text,
9
+ components,
10
+ contact_col,
11
+ contact_entry,
12
+ contacts,
13
+ copy,
14
+ description,
15
+ details,
16
+ header_theme,
17
+ headshot,
18
+ img_area,
19
+ item_bio,
20
+ job_title,
21
+ media,
22
+ padding,
23
+ person,
24
+ section_theme,
25
+ shift,
26
+ svg_icon
27
+ };
@@ -26,6 +26,7 @@ import "../Carousel/index.js";
26
26
  import "../HeroBanner/HeroBanner.css.js";
27
27
  import "../ContentBanner/ContentBanner.css.js";
28
28
  /* empty css */
29
+ import "../ExecutiveBio/ExecutiveBio.css.js";
29
30
  import "../FaqAccordion/index.js";
30
31
  import "../FooterDisclosure/FooterDisclosure.css.js";
31
32
  import "../Forms/Forms.css.js";
@@ -23,6 +23,7 @@ import "../Carousel/index.js";
23
23
  import "../HeroBanner/HeroBanner.css.js";
24
24
  import "../ContentBanner/ContentBanner.css.js";
25
25
  /* empty css */
26
+ import "../ExecutiveBio/ExecutiveBio.css.js";
26
27
  import "../FaqAccordion/index.js";
27
28
  import "../FooterDisclosure/FooterDisclosure.css.js";
28
29
  import "../Forms/Forms.css.js";
@@ -181,7 +181,7 @@ function NavBar() {
181
181
  /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
182
182
  "a",
183
183
  {
184
- href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
184
+ href: `${define_process_env_default.LOGIN_APP_LOGIN_URL}/auth/login`,
185
185
  role: "menuitem",
186
186
  children: "Account Login"
187
187
  }
@@ -23,6 +23,7 @@ import "../Carousel/index.js";
23
23
  import "../HeroBanner/HeroBanner.css.js";
24
24
  import "../ContentBanner/ContentBanner.css.js";
25
25
  /* empty css */
26
+ import "../ExecutiveBio/ExecutiveBio.css.js";
26
27
  import "../FaqAccordion/index.js";
27
28
  import "../FooterDisclosure/FooterDisclosure.css.js";
28
29
  import "../Forms/Forms.css.js";
@@ -0,0 +1,288 @@
1
+ .txcb8d0 {
2
+ border: 1px solid transparent;
3
+ }
4
+ .txcb8d1 {
5
+ background: var(--_1073cm81);
6
+ color: var(--_1073cm82);
7
+ border-color: var(--_1073cm87);
8
+ }
9
+ .txcb8d2 {
10
+ background: var(--_1073cm88);
11
+ color: var(--_1073cm89);
12
+ }
13
+ .txcb8d3 {
14
+ background: var(--_1073cm8f);
15
+ color: var(--_1073cm8g);
16
+ }
17
+ .txcb8d4 {
18
+ background: var(--_1073cm8m);
19
+ color: var(--_1073cm8n);
20
+ }
21
+ .txcb8d6 {
22
+ color: var(--_1073cm83);
23
+ }
24
+ .txcb8d7 {
25
+ color: var(--_1073cm8a);
26
+ }
27
+ .txcb8d8 {
28
+ color: var(--_1073cm8h);
29
+ }
30
+ .txcb8d9 {
31
+ color: var(--_1073cm8o);
32
+ }
33
+ .txcb8da {
34
+ font-family: var(--main-font-family);
35
+ font-size: 18px;
36
+ font-weight: 500;
37
+ line-height: 1.29;
38
+ margin-top: 10px;
39
+ }
40
+ .txcb8db {
41
+ color: var(--_1073cm83);
42
+ }
43
+ .txcb8dc {
44
+ color: var(--_1073cm8a);
45
+ }
46
+ .txcb8dd {
47
+ color: var(--_1073cm8g);
48
+ }
49
+ .txcb8de {
50
+ color: var(--_1073cm8n);
51
+ }
52
+ .txcb8dg {
53
+ fill: var(--_1073cm83);
54
+ }
55
+ .txcb8dh {
56
+ fill: var(--_1073cm8a);
57
+ }
58
+ .txcb8di {
59
+ fill: var(--_1073cm8h);
60
+ }
61
+ .txcb8dj {
62
+ fill: var(--_1073cm8o);
63
+ }
64
+ .txcb8dm {
65
+ padding: 48px;
66
+ }
67
+ .txcb8dn {
68
+ margin-top: 24px;
69
+ }
70
+ .txcb8dn p {
71
+ font-size: 1.5rem;
72
+ line-height: 1.5;
73
+ }
74
+ .txcb8dl a {
75
+ color: inherit;
76
+ }
77
+ .txcb8dl a:hover {
78
+ text-decoration: underline;
79
+ opacity: 0.8;
80
+ }
81
+ .txcb8dl > * + * {
82
+ margin-left: 24px;
83
+ }
84
+ .txcb8do {
85
+ margin-left: 15px;
86
+ font-size: 20px;
87
+ font-family: var(--header-font-family);
88
+ text-decoration: none;
89
+ }
90
+ .txcb8dp {
91
+ color: #0062B3;
92
+ }
93
+ .txcb8dq {
94
+ color: #0062B3;
95
+ }
96
+ .txcb8dr {
97
+ color: var(--_1073cm8h);
98
+ }
99
+ .txcb8ds {
100
+ color: var(--_1073cm8o);
101
+ }
102
+ options => {
103
+ var className = config.defaultClassName;
104
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
105
+ for (var variantName in selections) {
106
+ var _selections$variantNa;
107
+ var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
108
+ if (variantSelection != null) {
109
+ var selection = variantSelection;
110
+ if (typeof selection === 'boolean') {
111
+ // @ts-expect-error
112
+ selection = selection === true ? 'true' : 'false';
113
+ }
114
+ var selectionClassName =
115
+ // @ts-expect-error
116
+ config.variantClassNames[variantName][selection];
117
+ if (selectionClassName) {
118
+ className += ' ' + selectionClassName;
119
+ }
120
+ }
121
+ }
122
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
123
+ if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
124
+ className += ' ' + compoundClassName;
125
+ }
126
+ }
127
+ return className;
128
+ } a {
129
+ text-decoration: none;
130
+ }
131
+ .txcb8dv {
132
+ aspect-ratio: 1 / 1;
133
+ background-position: center center;
134
+ background-repeat: no-repeat;
135
+ background-size: cover;
136
+ border-radius: 50%;
137
+ width: 320px;
138
+ }
139
+ .txcb8dw {
140
+ margin-right: 64px;
141
+ width: auto;
142
+ }
143
+ .txcb8dz {
144
+ margin-left: auto;
145
+ margin-right: auto;
146
+ margin-bottom: 40px;
147
+ text-align: center;
148
+ max-width: 800px;
149
+ }
150
+ .txcb8dz h2 + p {
151
+ margin-top: 8px;
152
+ }
153
+ .txcb8d11 {
154
+ background: var(--_1073cm81);
155
+ }
156
+ .txcb8d12 {
157
+ background: var(--_1073cm88);
158
+ padding-top: 56px;
159
+ padding-bottom: 56px;
160
+ margin-top: 0;
161
+ }
162
+ .txcb8d13 {
163
+ background: var(--_1073cm8f);
164
+ padding-top: 56px;
165
+ padding-bottom: 56px;
166
+ margin-top: 0;
167
+ }
168
+ .txcb8d14 {
169
+ background: var(--_1073cm8m);
170
+ padding-top: 56px;
171
+ padding-bottom: 56px;
172
+ margin-top: 0;
173
+ }
174
+ .txcb8d16 {
175
+ color: var(--_1073cm83);
176
+ }
177
+ .txcb8d17 {
178
+ color: var(--_1073cm8a);
179
+ }
180
+ .txcb8d18 {
181
+ color: var(--_1073cm8h);
182
+ }
183
+ .txcb8d19 {
184
+ color: var(--_1073cm8o);
185
+ }
186
+ .txcb8d1a {
187
+ position: relative;
188
+ }
189
+ .txcb8d1b {
190
+ margin-left: auto;
191
+ margin-right: auto;
192
+ margin-top: 40px;
193
+ text-align: center;
194
+ max-width: 800px;
195
+ }
196
+ @media (max-width: 1200px) {
197
+ .txcb8dl {
198
+ flex-direction: column;
199
+ }
200
+ .txcb8dl > * + * {
201
+ margin-left: 0px;
202
+ margin-top: 24px;
203
+ }
204
+ }
205
+ @media (max-width: 1023px) {
206
+ .txcb8dk {
207
+ margin-top: 24px;
208
+ }
209
+ .txcb8dl {
210
+ max-width: 100%;
211
+ }
212
+ .txcb8du {
213
+ display: flex;
214
+ justify-content: center;
215
+ }
216
+ .txcb8dw {
217
+ margin-right: 0px;
218
+ }
219
+ .txcb8dx {
220
+ transform: translateY(1%);
221
+ }
222
+ .txcb8dx p:first-of-type {
223
+ margin-top: 8px;
224
+ }
225
+ .txcb8dy {
226
+ flex-direction: column;
227
+ }
228
+ .txcb8dz {
229
+ margin-bottom: 24px;
230
+ }
231
+ .txcb8d12 {
232
+ padding-top: 42px;
233
+ padding-bottom: 42px;
234
+ }
235
+ .txcb8d13 {
236
+ padding-top: 42px;
237
+ padding-bottom: 42px;
238
+ }
239
+ .txcb8d14 {
240
+ padding-top: 42px;
241
+ padding-bottom: 42px;
242
+ }
243
+ .txcb8d1b {
244
+ margin-top: 24px;
245
+ }
246
+ }
247
+ @media (max-width: 768px) {
248
+ .txcb8da {
249
+ margin-top: 8px;
250
+ font-size: 16px;
251
+ line-height: 1.5;
252
+ }
253
+ .txcb8dm {
254
+ padding: 24px;
255
+ }
256
+ .txcb8dn {
257
+ margin-top: 8x;
258
+ }
259
+ .txcb8dl > * + * {
260
+ margin-top: 10px;
261
+ }
262
+ .txcb8do {
263
+ font-size: 18px;
264
+ line-height: 26px;
265
+ }
266
+ .txcb8dt {
267
+ margin-top: 16px;
268
+ }
269
+ .txcb8dv {
270
+ width: 200px;
271
+ }
272
+ .txcb8dz h2 + p {
273
+ font-size: 1rem;
274
+ line-height: 1.5;
275
+ }
276
+ .txcb8d12 {
277
+ padding-top: 32px;
278
+ padding-bottom: 32px;
279
+ }
280
+ .txcb8d13 {
281
+ padding-top: 32px;
282
+ padding-bottom: 32px;
283
+ }
284
+ .txcb8d14 {
285
+ padding-top: 32px;
286
+ padding-bottom: 32px;
287
+ }
288
+ }
@@ -54,7 +54,7 @@
54
54
  ._1nivbwec {
55
55
  font-size: 12px;
56
56
  font-weight: 700;
57
- line-height: 24px;
57
+ line-height: 1.33;
58
58
  letter-spacing: 0.2px;
59
59
  }
60
60
  ._1nivbwed {
@@ -291,9 +291,6 @@ ul:empty {
291
291
  }
292
292
  }
293
293
  @media screen and (max-width:1280px) {
294
- .header_1 {
295
- font-size: 2.125rem;
296
- }
297
294
  .header_2 {
298
295
  font-size: 2rem;
299
296
  }
package/dist/main.d.ts CHANGED
@@ -9,6 +9,7 @@ export * from './Chevron';
9
9
  export * from './CollectInformationAlert';
10
10
  export * from './ContentBanner';
11
11
  export * from './DownloadTile';
12
+ export * from './ExecutiveBio';
12
13
  export * from './FaqAccordion';
13
14
  export * from './FooterDisclosure';
14
15
  export * from './Forms';
package/dist/main.js CHANGED
@@ -13,6 +13,9 @@ import { Chevron } from "./Chevron/index.js";
13
13
  import { CollectInformationAlert } from "./CollectInformationAlert/index.js";
14
14
  import { ContentBanner } from "./ContentBanner/index.js";
15
15
  import { DownloadTile } from "./DownloadTile/index.js";
16
+ import { ExecutiveBio } from "./ExecutiveBio/ExecutiveBio.js";
17
+ import { bio_name, bio_section_text, components, contact_col, contact_entry, contacts, copy, description, details, header_theme, headshot, img_area, item_bio, job_title, media, padding, person, section_theme, shift, svg_icon } from "./ExecutiveBio/ExecutiveBio.css.js";
18
+ import { ExecutiveBioSet } from "./ExecutiveBio/ExecutiveBioSet.js";
16
19
  import { AccordionItem, AccordionItemContent, AccordionItemSummary, FaqAccordion } from "./FaqAccordion/index.js";
17
20
  import { footerDisclosure, footerLink, footerParagraph, iconsContent } from "./FooterDisclosure/FooterDisclosure.css.js";
18
21
  import { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph } from "./FooterDisclosure/FooterDisclosure.js";
@@ -102,6 +105,8 @@ export {
102
105
  default13 as DownloadIcon,
103
106
  DownloadTile,
104
107
  default14 as EqualHousingLender,
108
+ ExecutiveBio,
109
+ ExecutiveBioSet,
105
110
  FaqAccordion,
106
111
  FooterContent,
107
112
  FooterDisclosure,
@@ -159,15 +164,24 @@ export {
159
164
  billboard_icon,
160
165
  billboard_image,
161
166
  billboard_img,
167
+ bio_name,
168
+ bio_section_text,
162
169
  body,
163
170
  bodyAccordion,
164
171
  bodyHeader,
165
172
  body_copy,
166
173
  button,
167
174
  buttons,
175
+ components,
176
+ contact_col,
177
+ contact_entry,
178
+ contacts,
168
179
  container,
169
180
  containerIconBillboard,
170
181
  content,
182
+ copy,
183
+ description,
184
+ details,
171
185
  disclosureForm,
172
186
  expand_icon,
173
187
  findMoreAxosDomains,
@@ -187,6 +201,8 @@ export {
187
201
  headerIconBillboard,
188
202
  headerVariants,
189
203
  header_section,
204
+ header_theme,
205
+ headshot,
190
206
  helperText,
191
207
  hide,
192
208
  hide_transcript,
@@ -200,6 +216,7 @@ export {
200
216
  iconsContent,
201
217
  imagePlacement,
202
218
  image_background,
219
+ img_area,
203
220
  inline_container,
204
221
  input,
205
222
  isAbsoluteUrl,
@@ -207,13 +224,18 @@ export {
207
224
  isEmailLink,
208
225
  isPhoneLink,
209
226
  item,
227
+ item_bio,
228
+ job_title,
210
229
  labelClassName,
211
230
  layout,
212
231
  list,
213
232
  listItem,
214
233
  mb_8,
234
+ media,
215
235
  mh_330,
236
+ padding,
216
237
  paragraph,
238
+ person,
217
239
  premierTheme,
218
240
  rate_billboard,
219
241
  rate_container,
@@ -222,7 +244,9 @@ export {
222
244
  section_container,
223
245
  section_text,
224
246
  section_text_ImageBillboard,
247
+ section_theme,
225
248
  set_container,
249
+ shift,
226
250
  shortUrl,
227
251
  show,
228
252
  single_container,
@@ -232,6 +256,7 @@ export {
232
256
  success_icon,
233
257
  success_wrap,
234
258
  supertag,
259
+ svg_icon,
235
260
  table,
236
261
  tableWrapper,
237
262
  table_container,
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.28",
4
+ "version": "0.0.30",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",