@axos-web-dev/shared-components 1.0.100-dev.6 → 1.0.100-dev.60

package/dist/ExecutiveBio/ExecutiveBio.css.js

@@ -1,6 +1,7 @@
-import '../assets/ExecutiveBio/ExecutiveBio.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+import '../assets/ExecutiveBio/ExecutiveBio.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -26,8 +27,48 @@ var header_theme = createRuntimeFn({ defaultClassName: "txcb8d16", variantClassN
 var components = "txcb8d1b";
 var details = "txcb8d1c";
 var url_row = "txcb8d1d";
+var flexColumn = "txcb8d1e";
+var ceoSection = createRuntimeFn({ defaultClassName: "txcb8d1f", variantClassNames: { variant: { primary: "txcb8d1g", secondary: "txcb8d1h", tertiary: "txcb8d1i", quaternary: "txcb8d1j" } }, defaultVariants: {}, compoundVariants: [] });
+var ceoContainer = "txcb8d1k";
+var ceoWrapper = "txcb8d1l";
+var ceoMedia = "txcb8d1m txcb8d1e";
+var ceoImgWrapper = "txcb8d1n";
+var imgAlignment = "txcb8d1o";
+var highlights = "txcb8d1p txcb8d1e";
+var bulletsHeadline = createRuntimeFn({ defaultClassName: "txcb8d1q", variantClassNames: { variant: { primary: "txcb8d1r", secondary: "txcb8d1s", tertiary: "txcb8d1t", quaternary: "txcb8d1u" } }, defaultVariants: {}, compoundVariants: [] });
+var bulletsWrapper = "txcb8d1v txcb8d1e";
+var ceoContent = "txcb8d1w txcb8d1e";
+var ceoHeader = "txcb8d1x txcb8d1e";
+var ceoPersonalInfo = "txcb8d1y txcb8d1e";
+var ceo_name = createRuntimeFn({ defaultClassName: "txcb8d1z", variantClassNames: { variant: { primary: "txcb8d20", secondary: "txcb8d21", tertiary: "txcb8d22", quaternary: "txcb8d23" } }, defaultVariants: {}, compoundVariants: [] });
+var ceo_title = createRuntimeFn({ defaultClassName: "txcb8d24", variantClassNames: { variant: { primary: "txcb8d25", secondary: "txcb8d26", tertiary: "txcb8d27", quaternary: "txcb8d28" } }, defaultVariants: {}, compoundVariants: [] });
+var ceo_contacts = "txcb8d29";
+var svg_color = createRuntimeFn({ defaultClassName: "txcb8d2a", variantClassNames: { variant: { primary: "txcb8d2b", secondary: "txcb8d2c", tertiary: "txcb8d2d", quaternary: "txcb8d2e" } }, defaultVariants: {}, compoundVariants: [] });
+var ceo_quote = createRuntimeFn({ defaultClassName: "txcb8d2f", variantClassNames: { variant: { primary: "txcb8d2g", secondary: "txcb8d2h", tertiary: "txcb8d2i", quaternary: "txcb8d2j" } }, defaultVariants: {}, compoundVariants: [] });
+var ceo_body = "txcb8d2k";
+var hover = "txcb8d2l";
+var social = "txcb8d2m";
+var tooltip = createRuntimeFn({ defaultClassName: "txcb8d2n", variantClassNames: { variant: { primary: "txcb8d2o", secondary: "txcb8d2p", tertiary: "txcb8d2q", quaternary: "txcb8d2r" } }, defaultVariants: {}, compoundVariants: [] });
+var order_3 = "txcb8d2s";
+var overlay = "txcb8d2t";
+var stroke_color = createRuntimeFn({ defaultClassName: "txcb8d2u", variantClassNames: { variant: { primary: "txcb8d2v", secondary: "txcb8d2w", tertiary: "txcb8d2x", quaternary: "txcb8d2y" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bio_section_text,
+  bulletsHeadline,
+  bulletsWrapper,
+  ceoContainer,
+  ceoContent,
+  ceoHeader,
+  ceoImgWrapper,
+  ceoMedia,
+  ceoPersonalInfo,
+  ceoSection,
+  ceoWrapper,
+  ceo_body,
+  ceo_contacts,
+  ceo_name,
+  ceo_quote,
+  ceo_title,
   components,
   contact_col,
   contact_entry,
@@ -36,17 +77,27 @@ export {
   description,
   details,
   executive_bio,
+  flexColumn,
   header_theme,
   headline_setting,
   headshot,
+  highlights,
+  hover,
+  imgAlignment,
   img_area,
   item_bio,
   job_title,
   media,
+  order_3,
+  overlay,
   padding,
   person,
   section_theme,
   shift,
+  social,
+  stroke_color,
+  svg_color,
   svg_icon,
+  tooltip,
   url_row
 };

package/dist/ExecutiveBio/ExecutiveBio.d.ts

@@ -1,3 +1,3 @@
 import { ExecutiveBioProps as Props } from './ExecutiveBio.interface';
 
-export declare const ExecutiveBio: ({ id, executiveName, executiveTitle, executiveBodyCopy, executiveEmailAddress, executivePhoneNumber, executiveLinkedIn, executiveWebsite, executiveHeadshot, variant: fullVariant, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ExecutiveBio: ({ id, executiveName, executiveTitle, executiveBodyCopy, executiveEmailAddress, executivePhoneNumber, executiveLinkedIn, executiveWebsite, executiveHeadshot, variant: fullVariant, bannerType, executiveTwitter, executiveFacebook, bullets, bulletsTitle, quote, backgroundOverlay, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
-import { QuaternaryTypes } from '../utils/variant.types';
-import { ImageInterface } from '../IconBillboard';
 import { ReactNode } from 'react';
+import { QuaternaryTypes } from '../utils/variant.types';
+import { ImageInterface, BulletItemProps } from '../main';
 
 export interface ExecutiveBioSetProps {
     id: string;
@@ -13,12 +13,19 @@ export interface ExecutiveBioSetProps {
 export interface ExecutiveBioProps {
     id: string;
     variant: QuaternaryTypes;
-    executiveName: string;
-    executiveTitle: string;
+    executiveName?: string;
+    executiveTitle?: string;
     executiveBodyCopy?: string | ReactNode;
     executiveEmailAddress?: string;
     executivePhoneNumber?: string;
     executiveLinkedIn?: string;
     executiveWebsite?: string;
+    executiveTwitter?: string;
+    executiveFacebook?: string;
     executiveHeadshot?: ImageInterface;
+    bullets?: BulletItemProps[];
+    bulletsTitle?: ReactNode | string;
+    quote?: ReactNode | string;
+    bannerType?: "Standard" | "Hero";
+    backgroundOverlay?: boolean;
 }

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -1,15 +1,17 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, createElement } from "react";
 import { getVariant } from "../utils/getVariant.js";
 import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
-import { executive_bio, padding, item_bio, shift, media, headshot, img_area, description, person, headline_setting, job_title, copy, contacts, contact_col, svg_icon, contact_entry, url_row } from "./ExecutiveBio.css.js";
+import { Overlay } from "./Overlay.js";
+import { executive_bio, padding, item_bio, shift, media, headshot, img_area, description, person, headline_setting, job_title, copy, contacts, contact_col, svg_icon, contact_entry, url_row, ceoSection, ceoContainer, ceoWrapper, ceoMedia, ceoImgWrapper, imgAlignment, highlights, bulletsHeadline, bulletsWrapper, ceoContent, ceoHeader, ceoPersonalInfo, ceo_name, ceo_title, ceo_contacts, social, hover, svg_color, tooltip, ceo_quote, ceo_body, order_3, overlay } from "./ExecutiveBio.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
@@ -69,8 +71,16 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
 import "../Carousel/index.js";
+/* empty css                                                   */
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/authenticate.js";
+/* empty css                                    */
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -94,7 +104,6 @@ import "next/script.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                                      */
 import "next/navigation.js";
@@ -134,7 +143,14 @@ const ExecutiveBio = ({
   executiveLinkedIn,
   executiveWebsite,
   executiveHeadshot,
-  variant: fullVariant = "primary"
+  variant: fullVariant = "primary",
+  bannerType = "Standard",
+  executiveTwitter,
+  executiveFacebook,
+  bullets,
+  bulletsTitle,
+  quote,
+  backgroundOverlay = false
 }) => {
   const variant = getVariant(fullVariant);
   const execNameRef = useRef(null);
@@ -156,7 +172,7 @@ const ExecutiveBio = ({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx("section", { className: `section_spacer ${executive_bio}`, id, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${padding} ${item_bio({ variant })} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: bannerType === "Standard" ? /* @__PURE__ */ jsx("section", { className: `section_spacer ${executive_bio}`, id, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${padding} ${item_bio({ 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, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: executiveHeadshot?.src, alt: "" }) }) }) }),
     /* @__PURE__ */ jsxs("div", { className: `${description} flex_col between`, children: [
       /* @__PURE__ */ jsxs("div", { className: person, children: [
@@ -286,7 +302,252 @@ const ExecutiveBio = ({
         ] })
       ] })
     ] })
-  ] }) }) }) });
+  ] }) }) }) }) : /* @__PURE__ */ jsxs("section", { id, className: ceoSection({ variant }), children: [
+    /* @__PURE__ */ jsx("div", { className: `containment ${ceoContainer}`, children: /* @__PURE__ */ jsxs("div", { className: ceoWrapper, children: [
+      (executiveHeadshot || bullets) && /* @__PURE__ */ jsxs("div", { className: ceoMedia, children: [
+        /* @__PURE__ */ jsx("div", { className: ceoImgWrapper, role: "presentation", children: /* @__PURE__ */ jsxs("picture", { children: [
+          /* @__PURE__ */ jsx(
+            "source",
+            {
+              srcSet: `${executiveHeadshot?.src}?fm=avif`,
+              type: "image/avif"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "source",
+            {
+              srcSet: `${executiveHeadshot?.src}?fm=webp`,
+              type: "image/webp"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: executiveHeadshot?.src,
+              className: imgAlignment,
+              alt: ""
+            }
+          )
+        ] }) }),
+        (bulletsTitle || bullets) && /* @__PURE__ */ jsxs("div", { className: highlights, children: [
+          bulletsTitle && /* @__PURE__ */ jsx("span", { className: bulletsHeadline({ variant }), children: bulletsTitle }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: bulletsWrapper, children: bullets.map(({ id: id2, copy: copy2 }) => /* @__PURE__ */ jsx("li", { children: copy2 }, id2)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: ceoContent, children: [
+        (executiveName || executiveTitle || executiveFacebook || executiveTwitter || executiveLinkedIn) && /* @__PURE__ */ jsxs("header", { className: ceoHeader, children: [
+          /* @__PURE__ */ jsxs("div", { className: ceoPersonalInfo, children: [
+            executiveName && /* @__PURE__ */ jsx("h1", { className: `header_1 ${ceo_name({ variant })}`, children: executiveName }),
+            executiveTitle && /* @__PURE__ */ jsx("p", { className: ceo_title({ variant }), children: executiveTitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: ceo_contacts, children: [
+            executiveFacebook && /* @__PURE__ */ jsxs(
+              Hyperlink,
+              {
+                targetUrl: executiveFacebook,
+                ariaLabel: "Facebook",
+                className: social,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: 32,
+                      height: 32,
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      className: hover,
+                      children: [
+                        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_86_10)", children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M19.3761 16.932L19.8169 14.0583H17.0596V12.1933C17.0596 11.4071 17.4448 10.6408 18.6798 10.6408H19.9334V8.19419C19.9334 8.19419 18.7957 8 17.708 8C15.4371 8 13.9529 9.37631 13.9529 11.868V14.0583H11.4286V16.932H13.9529V23.8792C14.459 23.9586 14.9778 24 15.5063 24C16.0347 24 16.5535 23.9586 17.0596 23.8792V16.932H19.3761Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              clipRule: "evenodd",
+                              d: "M16 30.8571C24.2054 30.8571 30.8571 24.2054 30.8571 16C30.8571 7.79463 24.2054 1.14286 16 1.14286C7.79463 1.14286 1.14286 7.79463 1.14286 16C1.14286 24.2054 7.79463 30.8571 16 30.8571ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_86_10", children: /* @__PURE__ */ jsx("rect", { width: 32, height: 32, fill: "white" }) }) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: tooltip({ variant }), children: "Facebook" })
+                ]
+              }
+            ),
+            executiveTwitter && /* @__PURE__ */ jsxs(
+              Hyperlink,
+              {
+                targetUrl: executiveTwitter,
+                ariaLabel: "Twitter",
+                className: social,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: 32,
+                      height: 32,
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      className: hover,
+                      children: [
+                        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_86_5)", children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              clipRule: "evenodd",
+                              d: "M16 30.8571C24.2054 30.8571 30.8571 24.2054 30.8571 16C30.8571 7.79463 24.2054 1.14286 16 1.14286C7.79463 1.14286 1.14286 7.79463 1.14286 16C1.14286 24.2054 7.79463 30.8571 16 30.8571ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M17.5222 14.7749L23.4785 8H22.0671L16.8952 13.8826L12.7644 8H8L14.2466 16.8955L8 24H9.41155L14.8732 17.7878L19.2356 24H24L17.5222 14.7749ZM9.92015 9.03974H12.0882L22.0677 23.0075H19.8997L9.92015 9.03974Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_86_5", children: /* @__PURE__ */ jsx("rect", { width: 32, height: 32, fill: "white" }) }) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: tooltip({ variant }), children: "X / Twitter" })
+                ]
+              }
+            ),
+            executiveLinkedIn && /* @__PURE__ */ jsxs(
+              Hyperlink,
+              {
+                targetUrl: executiveLinkedIn,
+                ariaLabel: "LinkedIn",
+                className: social,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: 32,
+                      height: 32,
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      className: hover,
+                      children: [
+                        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_86_141)", children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              clipRule: "evenodd",
+                              d: "M16 30.8571C24.2054 30.8571 30.8571 24.2054 30.8571 16C30.8571 7.79463 24.2054 1.14286 16 1.14286C7.79463 1.14286 1.14286 7.79463 1.14286 16C1.14286 24.2054 7.79463 30.8571 16 30.8571ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M23.4286 17.2709V22.2857H20.587V17.8391C20.587 16.7787 20.5687 15.4146 19.1103 15.4146C17.6316 15.4146 17.4059 16.5703 17.4059 17.7632V22.2857H14.5674V13.1418H17.2916V14.3919H17.3305C17.7095 13.6731 18.6367 12.9149 20.0194 12.9149C22.8968 12.9149 23.4286 14.8083 23.4286 17.2709Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M9.93986 13.1418H12.7846V22.2857H9.93986V13.1418Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M9.71429 10.2444C9.71429 9.33477 10.4503 8.59642 11.363 8.59642C12.2721 8.59642 13.0102 9.33477 13.0102 10.2444C13.0102 11.1542 12.2721 11.8926 11.363 11.8926C10.4503 11.8926 9.71429 11.1542 9.71429 10.2444Z",
+                              fill: "#2F5B88",
+                              className: svg_color({ variant })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_86_141", children: /* @__PURE__ */ jsx("rect", { width: 32, height: 32, fill: "white" }) }) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: tooltip({ variant }), children: "LinkedIn" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        quote && /* @__PURE__ */ jsx("blockquote", { className: ceo_quote({ variant }), children: quote }),
+        executiveBodyCopy && /* @__PURE__ */ jsx("div", { className: ceo_body, children: executiveBodyCopy }),
+        (executivePhoneNumber || executiveEmailAddress) && /* @__PURE__ */ jsxs("div", { className: `${contact_col} ${order_3}`, children: [
+          executivePhoneNumber && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    clipRule: "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: "#1E3860",
+                    className: svg_icon({ variant })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `tel:${executivePhoneNumber}`, children: executivePhoneNumber }) })
+          ] }),
+          executiveEmailAddress && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                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: "#1E3860",
+                    className: svg_icon({ variant })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `mailto:${executiveEmailAddress}`, children: executiveEmailAddress }) })
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    backgroundOverlay && /* @__PURE__ */ jsx(Overlay, { className: overlay, variant })
+  ] }) });
 };
 export {
   ExecutiveBio

package/dist/ExecutiveBio/Overlay.d.ts

@@ -0,0 +1,8 @@
+import { QuaternaryTypes } from '../utils/variant.types';
+
+interface OverlayProps {
+    className?: string;
+    variant?: QuaternaryTypes;
+}
+export declare const Overlay: ({ className, variant }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};