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

package/dist/ApyCalculator/index.js

@@ -4,7 +4,6 @@ import { Button } from "../Button/Button.js";
 import { button } from "../Button/Button.css.js";
 import { useState, useCallback, useEffect } from "react";
 import "react-use";
-import { Chevron } from "../Chevron/index.js";
 import { vars } from "../themes/axos.css.js";
 /* empty css                                */
 /* empty css                                   */
@@ -102,10 +101,7 @@ const ApyCalculator = () => {
               "APY Interest Calculator",
               /* @__PURE__ */ jsx("sup", { children: "3" })
             ] }),
-            /* @__PURE__ */ jsxs("p", { className: "push_up", children: [
-              "Calculate how much interest you can earn on your money with our APY Interest Calculator.",
-              /* @__PURE__ */ jsx("sup", { children: "1" })
-            ] })
+            /* @__PURE__ */ jsx("p", { className: "push_up", children: "Calculate how much interest you can earn on your money with our APY Interest Calculator." })
           ] }),
           /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
             /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: /* @__PURE__ */ jsx("span", { className: `${errorTag}`, children: error }) }),
@@ -255,21 +251,18 @@ const ApyCalculator = () => {
                 style: { backgroundColor: "#efeef0", maxWidth: "520px" },
                 children: [
                   /* @__PURE__ */ jsx("h2", { className: "header_2", children: "Select Savings" }),
-                  /* @__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." }),
-                  /* @__PURE__ */ jsxs("div", { className: `${cta_section} push_up_24 flex flex_row`, children: [
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        id: "btn-savings",
-                        targetUrl: "/products/select-savings",
-                        color: "secondary",
-                        size: "medium",
-                        rounded: "medium",
-                        children: "Learn More"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Chevron, { targetUrl: "/recommended-for-you", variant: "primary", children: "Open an Account" })
-                  ] })
+                  /* @__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." }),
+                  /* @__PURE__ */ jsx("div", { className: `${cta_section} push_up_24 flex flex_row center`, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      id: "btn-savings",
+                      targetUrl: "/products/select-savings",
+                      color: "secondary",
+                      size: "medium",
+                      rounded: "medium",
+                      children: "Learn More"
+                    }
+                  ) })
                 ]
               }
             ),
@@ -283,7 +276,7 @@ const ApyCalculator = () => {
                   /* @__PURE__ */ jsxs("table", { className: `${marketing_table}`, children: [
                     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
                       /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "Account" }),
-                      /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "APY**" })
+                      /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "APY*" })
                     ] }) }),
                     /* @__PURE__ */ jsxs("tbody", { children: [
                       /* @__PURE__ */ jsxs("tr", { children: [

package/dist/Chevron/index.js

@@ -26,6 +26,7 @@ import "../Carousel/index.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";

package/dist/ExecutiveBio/ExecutiveBio.css.d.ts

@@ -0,0 +1,169 @@
+export declare const item_bio: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const bio_name: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const job_title: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const svg_icon: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const description: string;
+export declare const contact_col: string;
+export declare const padding: string;
+export declare const copy: string;
+export declare const contact_entry: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: "#0062B3";
+        };
+        secondary: {
+            color: "#0062B3";
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const contacts: string;
+export declare const headshot: string;
+export declare const img_area: string;
+export declare const media: string;
+export declare const person: string;
+export declare const shift: string;
+export declare const bio_section_text: string;
+export declare const section_theme: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingTop: "56px";
+            paddingBottom: "56px";
+            marginTop: number;
+            "@media": {
+                "(max-width: 1023px)": {
+                    paddingTop: "42px";
+                    paddingBottom: "42px";
+                };
+                "(max-width: 768px)": {
+                    paddingTop: "32px";
+                    paddingBottom: "32px";
+                };
+            };
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingTop: "56px";
+            paddingBottom: "56px";
+            marginTop: number;
+            "@media": {
+                "(max-width: 1023px)": {
+                    paddingTop: "42px";
+                    paddingBottom: "42px";
+                };
+                "(max-width: 768px)": {
+                    paddingTop: "32px";
+                    paddingBottom: "32px";
+                };
+            };
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingTop: "56px";
+            paddingBottom: "56px";
+            marginTop: number;
+            "@media": {
+                "(max-width: 1023px)": {
+                    paddingTop: "42px";
+                    paddingBottom: "42px";
+                };
+                "(max-width: 768px)": {
+                    paddingTop: "32px";
+                    paddingBottom: "32px";
+                };
+            };
+        };
+    };
+}>;
+export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const components: string;
+export declare const details: string;

package/dist/ExecutiveBio/ExecutiveBio.css.js

@@ -0,0 +1,47 @@
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var item_bio = createRuntimeFn({ defaultClassName: "txcb8d0", variantClassNames: { variant: { primary: "txcb8d1", secondary: "txcb8d2", tertiary: "txcb8d3", quaternary: "txcb8d4" } }, defaultVariants: {}, compoundVariants: [] });
+var bio_name = createRuntimeFn({ defaultClassName: "txcb8d5", variantClassNames: { variant: { primary: "txcb8d6", secondary: "txcb8d7", tertiary: "txcb8d8", quaternary: "txcb8d9" } }, defaultVariants: {}, compoundVariants: [] });
+var job_title = createRuntimeFn({ defaultClassName: "txcb8da", variantClassNames: { variant: { primary: "txcb8db", secondary: "txcb8dc", tertiary: "txcb8dd", quaternary: "txcb8de" } }, defaultVariants: {}, compoundVariants: [] });
+var svg_icon = createRuntimeFn({ defaultClassName: "txcb8df", variantClassNames: { variant: { primary: "txcb8dg", secondary: "txcb8dh", tertiary: "txcb8di", quaternary: "txcb8dj" } }, defaultVariants: {}, compoundVariants: [] });
+var description = "txcb8dk";
+var contact_col = "txcb8dl";
+var padding = "txcb8dm";
+var copy = "txcb8dn";
+var contact_entry = createRuntimeFn({ defaultClassName: "txcb8do", variantClassNames: { variant: { primary: "txcb8dp", secondary: "txcb8dq", tertiary: "txcb8dr", quaternary: "txcb8ds" } }, defaultVariants: {}, compoundVariants: [] });
+var contacts = "txcb8dt";
+var headshot = "txcb8du";
+var img_area = "txcb8dv";
+var media = "txcb8dw";
+var person = "txcb8dx";
+var shift = "txcb8dy";
+var bio_section_text = "txcb8dz";
+var section_theme = createRuntimeFn({ defaultClassName: "txcb8d10", variantClassNames: { variant: { primary: "txcb8d11", secondary: "txcb8d12", tertiary: "txcb8d13", quaternary: "txcb8d14" } }, defaultVariants: {}, compoundVariants: [] });
+var header_theme = createRuntimeFn({ defaultClassName: "txcb8d15", variantClassNames: { variant: { primary: "txcb8d16", secondary: "txcb8d17", tertiary: "txcb8d18", quaternary: "txcb8d19" } }, defaultVariants: {}, compoundVariants: [] });
+var components = "txcb8d1a";
+var details = "txcb8d1b";
+export {
+  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
+};

package/dist/ExecutiveBio/ExecutiveBio.d.ts

@@ -0,0 +1,3 @@
+import { Props } from './ExecutiveBio.interface';
+
+export declare const ExecutiveBio: ({ id, executiveName, executiveTitle, executiveBodyCopy, executiveEmailAddress, executivePhoneNumber, executiveHeadshot, variant, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/ExecutiveBio/ExecutiveBio.interface.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ImageInterface } from '../IconBillboard';
+import { QuaternaryTypes } from '../utils/variant.types';
+
+export interface ExecutiveBioSetProps {
+    id: string;
+    variant: QuaternaryTypes;
+    title?: ReactNode | string;
+    description?: ReactNode | string;
+    executiveBios: ExecutiveBioProps[];
+    additionalDetails?: string | ReactNode;
+}
+export interface ExecutiveBioProps {
+    id: string;
+    variant: QuaternaryTypes;
+    executiveName: string;
+    executiveTitle: string;
+    executiveBodyCopy?: string | ReactNode;
+    executiveEmailAddress: string;
+    executivePhoneNumber: string;
+    executiveHeadshot?: ImageInterface;
+}

package/dist/ExecutiveBio/ExecutiveBio.interface.js

@@ -0,0 +1 @@
+

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getVariant } from "../utils/getVariant.js";
+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";
+const ExecutiveBio = ({
+  id,
+  executiveName,
+  executiveTitle,
+  executiveBodyCopy,
+  executiveEmailAddress,
+  executivePhoneNumber,
+  executiveHeadshot,
+  variant
+}) => {
+  return /* @__PURE__ */ jsx("section", { className: "section_spacer", id: `id_${id}`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${padding} ${item_bio({ variant: getVariant(variant) })} rounded`,
+      children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
+        executiveHeadshot && /* @__PURE__ */ jsx("div", { className: media, children: /* @__PURE__ */ jsx("div", { className: headshot, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: img_area,
+            style: {
+              backgroundImage: `url(${executiveHeadshot == null ? void 0 : executiveHeadshot.src})`
+            },
+            role: "presentation",
+            children: " "
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${description} flex_col between`, children: [
+          /* @__PURE__ */ jsxs("div", { className: person, children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: `${bio_name({ variant: getVariant(variant) })} header_3`,
+                children: executiveName
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: `${job_title({ variant: getVariant(variant) })}`,
+                children: executiveTitle
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: copy, children: executiveBodyCopy })
+          ] }),
+          executiveEmailAddress || executivePhoneNumber && /* @__PURE__ */ jsx("div", { className: `${contacts} flex between push_up_24`, children: /* @__PURE__ */ jsxs("div", { className: `${contact_col} flex`, children: [
+            executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: svg_icon({ variant }),
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      "fill-rule": "evenodd",
+                      "clip-rule": "evenodd",
+                      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",
+                      fill: "#fff"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `tel:${executivePhoneNumber}`, children: executivePhoneNumber }) })
+            ] }),
+            executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: svg_icon({ variant }),
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: "#fff"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `mailto:${executiveEmailAddress}`, children: executiveEmailAddress }) })
+            ] })
+          ] }) })
+        ] })
+      ] })
+    }
+  ) }) });
+};
+export {
+  ExecutiveBio
+};

package/dist/ExecutiveBio/ExecutiveBioSet.d.ts

@@ -0,0 +1,4 @@
+import { Props } from './ExecutiveBio.interface';
+import { SetContainerProps } from '../SetContainer';
+
+export declare const ExecutiveBioSet: ({ id, title, description, executiveBios, additionalDetails, variant, headline, }: Props & SetContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ExecutiveBio/ExecutiveBioSet.js

@@ -0,0 +1,147 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { getVariant } from "../utils/getVariant.js";
+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";
+const ExecutiveBioSet = ({
+  id,
+  title,
+  description,
+  executiveBios,
+  additionalDetails,
+  variant,
+  headline
+}) => {
+  return /* @__PURE__ */ jsxs("section", { id, className: section_theme({ variant }), children: [
+    /* @__PURE__ */ jsx("div", { className: "containment", children: (title || description) && /* @__PURE__ */ jsxs("div", { className: bio_section_text, children: [
+      headline && /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: `header_1 ${header_theme({ variant: getVariant(variant) })}`,
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(Fragment, { children: description })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: components, children: executiveBios.map(
+      ({
+        id: id2,
+        executiveName,
+        executiveTitle,
+        executiveBodyCopy,
+        executiveEmailAddress,
+        executivePhoneNumber,
+        executiveHeadshot,
+        variant: variant2
+      }) => /* @__PURE__ */ jsx("section", { className: "section_spacer", id: `id_${id2}`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${padding} ${item_bio({ variant: getVariant(variant2) })} rounded`,
+          children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
+            executiveHeadshot && /* @__PURE__ */ jsx("div", { className: media, children: /* @__PURE__ */ jsx("div", { className: headshot, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: img_area,
+                style: {
+                  backgroundImage: `url(${executiveHeadshot == null ? void 0 : executiveHeadshot.src})`
+                },
+                role: "presentation",
+                children: " "
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxs("div", { className: `${description} flex_col between`, children: [
+              /* @__PURE__ */ jsxs("div", { className: person, children: [
+                title ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: `${bio_name({ variant: getVariant(variant2) })} header_3`,
+                      children: executiveName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "h4",
+                    {
+                      className: `${job_title({ variant: getVariant(variant2) })}`,
+                      children: executiveTitle
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: `${bio_name({ variant: getVariant(variant2) })} header_3`,
+                      children: executiveName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: `${job_title({ variant: getVariant(variant2) })}`,
+                      children: executiveTitle
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: copy, children: executiveBodyCopy })
+              ] }),
+              executiveEmailAddress || executivePhoneNumber && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${contacts} flex between push_up_24`,
+                  children: /* @__PURE__ */ jsxs("div", { className: `${contact_col} flex`, children: [
+                    executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: svg_icon({ variant: variant2 }),
+                          width: "24",
+                          height: "24",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              "fill-rule": "evenodd",
+                              "clip-rule": "evenodd",
+                              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",
+                              fill: "#fff"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: contact_entry({ variant: variant2 }), children: /* @__PURE__ */ jsx("a", { href: `tel:${executivePhoneNumber}`, children: executivePhoneNumber }) })
+                    ] }),
+                    executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: svg_icon({ variant: variant2 }),
+                          width: "24",
+                          height: "24",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              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",
+                              fill: "#fff"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: contact_entry({ variant: variant2 }), children: /* @__PURE__ */ jsx("a", { href: `mailto:${executiveEmailAddress}`, children: executiveEmailAddress }) })
+                    ] })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        }
+      ) }) }, id2)
+    ) }),
+    additionalDetails && /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: details, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) }) })
+  ] });
+};
+export {
+  ExecutiveBioSet
+};

package/dist/ExecutiveBio/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ExecutiveBio';
+export * from './ExecutiveBio.css';
+export type * from './ExecutiveBio.interface';
+export * from './ExecutiveBioSet';

package/dist/ExecutiveBio/index.js

@@ -0,0 +1,27 @@
+import { ExecutiveBio } from "./ExecutiveBio.js";
+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";
+import { ExecutiveBioSet } from "./ExecutiveBioSet.js";
+export {
+  ExecutiveBio,
+  ExecutiveBioSet,
+  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
+};

package/dist/Hyperlink/index.js

@@ -26,6 +26,7 @@ import "../Carousel/index.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";

package/dist/Modal/Modal.js

@@ -23,6 +23,7 @@ import "../Carousel/index.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";

package/dist/SetContainer/SetContainer.js

@@ -23,6 +23,7 @@ import "../Carousel/index.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";

package/dist/assets/ExecutiveBio/ExecutiveBio.css

@@ -0,0 +1,288 @@
+.txcb8d0 {
+  border: 1px solid transparent;
+}
+.txcb8d1 {
+  background: var(--_1073cm81);
+  color: var(--_1073cm82);
+  border-color: var(--_1073cm87);
+}
+.txcb8d2 {
+  background: var(--_1073cm88);
+  color: var(--_1073cm89);
+}
+.txcb8d3 {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8g);
+}
+.txcb8d4 {
+  background: var(--_1073cm8m);
+  color: var(--_1073cm8n);
+}
+.txcb8d6 {
+  color: var(--_1073cm83);
+}
+.txcb8d7 {
+  color: var(--_1073cm8a);
+}
+.txcb8d8 {
+  color: var(--_1073cm8h);
+}
+.txcb8d9 {
+  color: var(--_1073cm8o);
+}
+.txcb8da {
+  font-family: var(--main-font-family);
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.29;
+  margin-top: 10px;
+}
+.txcb8db {
+  color: var(--_1073cm83);
+}
+.txcb8dc {
+  color: var(--_1073cm8a);
+}
+.txcb8dd {
+  color: var(--_1073cm8g);
+}
+.txcb8de {
+  color: var(--_1073cm8n);
+}
+.txcb8dg {
+  fill: var(--_1073cm83);
+}
+.txcb8dh {
+  fill: var(--_1073cm8a);
+}
+.txcb8di {
+  fill: var(--_1073cm8h);
+}
+.txcb8dj {
+  fill: var(--_1073cm8o);
+}
+.txcb8dm {
+  padding: 48px;
+}
+.txcb8dn {
+  margin-top: 24px;
+}
+.txcb8dn p {
+  font-size: 1.5rem;
+  line-height: 1.5;
+}
+.txcb8dl a {
+  color: inherit;
+}
+.txcb8dl a:hover {
+  text-decoration: underline;
+  opacity: 0.8;
+}
+.txcb8dl > * + * {
+  margin-left: 24px;
+}
+.txcb8do {
+  margin-left: 15px;
+  font-size: 20px;
+  font-family: var(--header-font-family);
+  text-decoration: none;
+}
+.txcb8dp {
+  color: #0062B3;
+}
+.txcb8dq {
+  color: #0062B3;
+}
+.txcb8dr {
+  color: var(--_1073cm8h);
+}
+.txcb8ds {
+  color: var(--_1073cm8o);
+}
+options => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === 'boolean') {
+          // @ts-expect-error
+          selection = selection === true ? 'true' : 'false';
+        }
+        var selectionClassName =
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection];
+        if (selectionClassName) {
+          className += ' ' + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += ' ' + compoundClassName;
+      }
+    }
+    return className;
+  } a {
+  text-decoration: none;
+}
+.txcb8dv {
+  aspect-ratio: 1 / 1;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 50%;
+  width: 320px;
+}
+.txcb8dw {
+  margin-right: 64px;
+  width: auto;
+}
+.txcb8dz {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 40px;
+  text-align: center;
+  max-width: 800px;
+}
+.txcb8dz h2 + p {
+  margin-top: 8px;
+}
+.txcb8d11 {
+  background: var(--_1073cm81);
+}
+.txcb8d12 {
+  background: var(--_1073cm88);
+  padding-top: 56px;
+  padding-bottom: 56px;
+  margin-top: 0;
+}
+.txcb8d13 {
+  background: var(--_1073cm8f);
+  padding-top: 56px;
+  padding-bottom: 56px;
+  margin-top: 0;
+}
+.txcb8d14 {
+  background: var(--_1073cm8m);
+  padding-top: 56px;
+  padding-bottom: 56px;
+  margin-top: 0;
+}
+.txcb8d16 {
+  color: var(--_1073cm83);
+}
+.txcb8d17 {
+  color: var(--_1073cm8a);
+}
+.txcb8d18 {
+  color: var(--_1073cm8h);
+}
+.txcb8d19 {
+  color: var(--_1073cm8o);
+}
+.txcb8d1a {
+  position: relative;
+}
+.txcb8d1b {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+  text-align: center;
+  max-width: 800px;
+}
+@media (max-width: 1200px) {
+  .txcb8dl {
+    flex-direction: column;
+  }
+  .txcb8dl > * + * {
+    margin-left: 0px;
+    margin-top: 24px;
+  }
+}
+@media (max-width: 1023px) {
+  .txcb8dk {
+    margin-top: 24px;
+  }
+  .txcb8dl {
+    max-width: 100%;
+  }
+  .txcb8du {
+    display: flex;
+    justify-content: center;
+  }
+  .txcb8dw {
+    margin-right: 0px;
+  }
+  .txcb8dx {
+    transform: translateY(1%);
+  }
+  .txcb8dx p:first-of-type {
+    margin-top: 8px;
+  }
+  .txcb8dy {
+    flex-direction: column;
+  }
+  .txcb8dz {
+    margin-bottom: 24px;
+  }
+  .txcb8d12 {
+    padding-top: 42px;
+    padding-bottom: 42px;
+  }
+  .txcb8d13 {
+    padding-top: 42px;
+    padding-bottom: 42px;
+  }
+  .txcb8d14 {
+    padding-top: 42px;
+    padding-bottom: 42px;
+  }
+  .txcb8d1b {
+    margin-top: 24px;
+  }
+}
+@media (max-width: 768px) {
+  .txcb8da {
+    margin-top: 8px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+  .txcb8dm {
+    padding: 24px;
+  }
+  .txcb8dn {
+    margin-top: 8x;
+  }
+  .txcb8dl > * + * {
+    margin-top: 10px;
+  }
+  .txcb8do {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  .txcb8dt {
+    margin-top: 16px;
+  }
+  .txcb8dv {
+    width: 200px;
+  }
+  .txcb8dz h2 + p {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  .txcb8d12 {
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+  .txcb8d13 {
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+  .txcb8d14 {
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+}

package/dist/assets/Table/Table.css

@@ -54,7 +54,7 @@
 ._1nivbwec {
   font-size: 12px;
   font-weight: 700;
-  line-height: 24px;
+  line-height: 1.33;
   letter-spacing: 0.2px;
 }
 ._1nivbwed {

package/dist/main.d.ts

@@ -9,6 +9,7 @@ export * from './Chevron';
 export * from './CollectInformationAlert';
 export * from './ContentBanner';
 export * from './DownloadTile';
+export * from './ExecutiveBio';
 export * from './FaqAccordion';
 export * from './FooterDisclosure';
 export * from './Forms';

package/dist/main.js

@@ -13,6 +13,9 @@ import { Chevron } from "./Chevron/index.js";
 import { CollectInformationAlert } from "./CollectInformationAlert/index.js";
 import { ContentBanner } from "./ContentBanner/index.js";
 import { DownloadTile } from "./DownloadTile/index.js";
+import { ExecutiveBio } from "./ExecutiveBio/ExecutiveBio.js";
+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";
+import { ExecutiveBioSet } from "./ExecutiveBio/ExecutiveBioSet.js";
 import { AccordionItem, AccordionItemContent, AccordionItemSummary, FaqAccordion } from "./FaqAccordion/index.js";
 import { footerDisclosure, footerLink, footerParagraph, iconsContent } from "./FooterDisclosure/FooterDisclosure.css.js";
 import { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph } from "./FooterDisclosure/FooterDisclosure.js";
@@ -102,6 +105,8 @@ export {
   default13 as DownloadIcon,
   DownloadTile,
   default14 as EqualHousingLender,
+  ExecutiveBio,
+  ExecutiveBioSet,
   FaqAccordion,
   FooterContent,
   FooterDisclosure,
@@ -159,15 +164,24 @@ export {
   billboard_icon,
   billboard_image,
   billboard_img,
+  bio_name,
+  bio_section_text,
   body,
   bodyAccordion,
   bodyHeader,
   body_copy,
   button,
   buttons,
+  components,
+  contact_col,
+  contact_entry,
+  contacts,
   container,
   containerIconBillboard,
   content,
+  copy,
+  description,
+  details,
   disclosureForm,
   expand_icon,
   findMoreAxosDomains,
@@ -187,6 +201,8 @@ export {
   headerIconBillboard,
   headerVariants,
   header_section,
+  header_theme,
+  headshot,
   helperText,
   hide,
   hide_transcript,
@@ -200,6 +216,7 @@ export {
   iconsContent,
   imagePlacement,
   image_background,
+  img_area,
   inline_container,
   input,
   isAbsoluteUrl,
@@ -207,13 +224,18 @@ export {
   isEmailLink,
   isPhoneLink,
   item,
+  item_bio,
+  job_title,
   labelClassName,
   layout,
   list,
   listItem,
   mb_8,
+  media,
   mh_330,
+  padding,
   paragraph,
+  person,
   premierTheme,
   rate_billboard,
   rate_container,
@@ -222,7 +244,9 @@ export {
   section_container,
   section_text,
   section_text_ImageBillboard,
+  section_theme,
   set_container,
+  shift,
   shortUrl,
   show,
   single_container,
@@ -232,6 +256,7 @@ export {
   success_icon,
   success_wrap,
   supertag,
+  svg_icon,
   table,
   tableWrapper,
   table_container,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",