@axos-web-dev/shared-components 1.0.100-dev.8 → 1.0.100-dev.80

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -1,27 +1,29 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, createElement } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
 import { getVariant } from "../utils/getVariant.js";
+import { Chevron } from "../Chevron/index.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, compact, 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/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.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                                */
+/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
-import "clsx";
-import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
+import "clsx";
 /* empty css                                          */
 /* empty css                                          */
 import "../Interstitial/Interstitial-variants.css.js";
+import "../Chevron/Chevron.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";
 import "../Button/Button.css.js";
@@ -69,12 +71,14 @@ 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";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+/* empty css                                    */
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
@@ -100,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";
@@ -132,6 +135,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                              */
 const ExecutiveBio = ({
   id,
+  hasParentH2 = false,
   executiveName,
   executiveTitle,
   executiveBodyCopy,
@@ -140,52 +144,355 @@ 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);
-  const execTitleRef = useRef(null);
-  const [execNameLevel, setExecNameLevel] = useState("h2");
-  const [execTitleLevel, setExecTitleLevel] = useState("h3");
-  useEffect(() => {
-    if (execNameRef.current) {
-      const section = execNameRef.current.closest("section:has(section)");
-      if (section) {
-        const existingH2inTitle = section.querySelector("h2.header_1");
-        const existingH2inComponent = section.querySelector("h2.header_3");
-        if (existingH2inTitle) {
-          setExecNameLevel("h3");
-        }
-        if (existingH2inTitle && existingH2inComponent) {
-          setExecTitleLevel("h4");
-        }
-      }
+  const execNameLevel = hasParentH2 ? "h3" : "h2";
+  const execTitleLevel = hasParentH2 ? "h4" : "h3";
+  return /* @__PURE__ */ jsx(Fragment, { children: bannerType !== "Hero" ? /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: `${executive_bio} ${bannerType === "Compact" ? compact : ""}`,
+      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: [
+            executiveName && createElement(
+              execNameLevel,
+              {
+                className: `header_3 ${headline_setting({ variant })}`
+              },
+              executiveName
+            ),
+            executiveTitle && createElement(
+              execTitleLevel,
+              {
+                className: `${job_title({ variant })}`
+              },
+              executiveTitle
+            ),
+            executiveBodyCopy && /* @__PURE__ */ jsx("div", { className: copy, children: executiveBodyCopy })
+          ] }),
+          (executiveEmailAddress || executivePhoneNumber || executiveLinkedIn || executiveWebsite) && /* @__PURE__ */ jsxs("div", { className: `${contacts} flex between push_up_24`, children: [
+            (executivePhoneNumber || executiveEmailAddress) && /* @__PURE__ */ jsxs("div", { className: contact_col, 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 }) })
+              ] })
+            ] }),
+            (executiveLinkedIn || executiveWebsite) && /* @__PURE__ */ jsxs("div", { className: `flex middle ${url_row}`, children: [
+              executiveLinkedIn && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    height: "24",
+                    width: "24",
+                    children: [
+                      /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_34_11)", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M21.376 1H2.62403C1.72722 1 1 1.72722 1 2.62403V21.376C1 22.2728 1.72722 23 2.62403 23H21.376C22.2728 23 23 22.2728 23 21.376V2.62403C23 1.72722 22.2728 1 21.376 1ZM7.55722 19.7428H4.24958V9.23472H7.55722V19.7412V19.7428ZM5.90417 7.77875C4.85153 7.77875 3.9975 6.97667 3.9975 5.87972C3.9975 4.78278 4.85153 3.98069 5.90417 3.98069C6.95681 3.98069 7.81083 4.78278 7.81083 5.87972C7.81083 6.97667 6.95681 7.77875 5.90417 7.77875ZM19.7504 19.7504H16.4428V14.0121C16.4428 12.3193 15.7232 11.7968 14.7943 11.7968C13.8135 11.7968 12.851 12.5347 12.851 14.0549V19.7519H9.54333V9.24236H12.7242V10.6983H12.7669C13.0862 10.0521 14.2046 8.9475 15.9111 8.9475C17.7567 8.9475 19.7504 10.0429 19.7504 13.2513V19.7504Z",
+                          fill: "#1E3860",
+                          className: svg_icon({ variant })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_34_11", children: /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          width: "22",
+                          height: "22",
+                          fill: "white",
+                          transform: "translate(1 1)"
+                        }
+                      ) }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: executiveLinkedIn, children: "LinkedIn" }) })
+              ] }),
+              executiveWebsite && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
+                bannerType !== "Compact" && /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM14.1489 2.96268C15.396 3.25958 16.5456 3.80819 17.541 4.55185C17.0479 4.92025 16.5169 5.24079 15.955 5.50657C15.4554 4.5679 14.8471 3.71173 14.1489 2.96268ZM18.5052 5.38047C17.8846 5.87004 17.2076 6.29124 16.4855 6.6327C17.0807 8.07337 17.4348 9.66586 17.4915 11.3364H21.2495C21.0873 9.01027 20.068 6.92039 18.5052 5.38047ZM12.4032 3.01931C13.3464 3.81456 14.1595 4.81264 14.7923 5.96297C14.0335 6.20289 13.2325 6.34791 12.4032 6.38411V3.01931ZM15.3357 7.0952C14.409 7.40551 13.4248 7.5904 12.4032 7.62969V11.3364H16.2463C16.1906 9.81381 15.8684 8.38134 15.3357 7.0952ZM11.1587 3.01931L11.1587 6.35622C10.4387 6.29219 9.74234 6.14593 9.07907 5.92691C9.64291 4.9109 10.3478 3.76049 11.1587 3.01931ZM11.1587 7.60513C10.2455 7.53365 9.365 7.34562 8.53212 7.05589C7.98967 8.35213 7.66148 9.79828 7.60516 11.3364H11.1587V7.60513ZM9.66329 3.00507C8.99396 3.73051 8.4084 4.55491 7.92336 5.45629C7.40009 5.20069 6.90443 4.89732 6.44205 4.55185C7.39178 3.84227 8.48193 3.31027 9.66329 3.00507ZM7.38787 6.58008C6.70679 6.24829 6.06686 5.84518 5.47779 5.38047C3.91502 6.92039 2.89567 9.01027 2.73347 11.3364H6.36001C6.41741 9.64549 6.77947 8.03455 7.38787 6.58008ZM21.2539 12.5809C21.1064 14.9333 20.0827 17.048 18.5052 18.6024C17.8481 18.0839 17.1277 17.6422 16.3574 17.2906C16.993 15.8557 17.386 14.2604 17.4784 12.5809H21.2539ZM17.541 19.431C17.0021 19.0284 16.4181 18.683 15.7979 18.4037C15.221 19.4225 14.5137 20.3374 13.7013 21.115C15.1213 20.8506 16.4276 20.2628 17.541 19.431ZM16.2323 12.5809C16.1408 14.1185 15.7771 15.559 15.2 16.8432C14.3131 16.5597 13.3751 16.3905 12.4032 16.3531V12.5809H16.2323ZM14.6179 17.9666C13.9111 17.7584 13.1692 17.6322 12.4032 17.5987V20.6047C13.2619 19.8807 14.0127 18.9886 14.6179 17.9666ZM11.1587 12.5809V16.3777C10.2951 16.4453 9.46081 16.6171 8.66834 16.8806C8.0815 15.587 7.71159 14.1334 7.61924 12.5809H11.1587ZM11.1587 17.6266C10.5016 17.685 9.86413 17.812 9.25358 18.0002C9.78588 18.8919 10.4294 19.9381 11.1587 20.6047V17.6266ZM6.37306 12.5809C6.46656 14.2801 6.8678 15.8932 7.51657 17.3411C6.78731 17.6842 6.10383 18.1085 5.47779 18.6024C3.90035 17.048 2.87657 14.9333 2.72913 12.5809H6.37306ZM8.08081 18.4515C7.49934 18.722 6.95056 19.051 6.44205 19.431C7.51211 20.2305 8.76043 20.8045 10.1166 21.0827C9.33093 20.3243 8.64461 19.4371 8.08081 18.4515Z",
+                        fill: "#1E3860",
+                        className: svg_icon({ variant })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: bannerType === "Compact" ? /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    targetUrl: executiveWebsite,
+                    variant: variant === "primary" || variant === "secondary" ? "primary" : "secondary",
+                    children: "Read Bio"
+                  }
+                ) : /* @__PURE__ */ jsx(Hyperlink, { targetUrl: executiveWebsite, children: "Website" }) })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }) }) })
     }
-  }, []);
-  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: [
-    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: [
-        executiveName && createElement(
-          execNameLevel,
-          {
-            ref: execNameRef,
-            className: `header_3 ${headline_setting({ variant })}`
-          },
-          executiveName
-        ),
-        executiveTitle && createElement(
-          execTitleLevel,
-          {
-            ref: execTitleRef,
-            className: `${job_title({ variant })}`
-          },
-          executiveTitle
-        ),
-        executiveBodyCopy && /* @__PURE__ */ jsx("div", { className: copy, children: executiveBodyCopy })
+  ) : /* @__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)) })
+        ] })
       ] }),
-      (executiveEmailAddress || executivePhoneNumber || executiveLinkedIn || executiveWebsite) && /* @__PURE__ */ jsxs("div", { className: `${contacts} flex between push_up_24`, children: [
-        (executivePhoneNumber || executiveEmailAddress) && /* @__PURE__ */ jsxs("div", { className: contact_col, children: [
+      /* @__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",
@@ -232,67 +539,11 @@ const ExecutiveBio = ({
             ),
             /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx("a", { href: `mailto:${executiveEmailAddress}`, children: executiveEmailAddress }) })
           ] })
-        ] }),
-        (executiveLinkedIn || executiveWebsite) && /* @__PURE__ */ jsxs("div", { className: `flex middle ${url_row}`, children: [
-          executiveLinkedIn && /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
-            /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                height: "24",
-                width: "24",
-                children: [
-                  /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_34_11)", children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M21.376 1H2.62403C1.72722 1 1 1.72722 1 2.62403V21.376C1 22.2728 1.72722 23 2.62403 23H21.376C22.2728 23 23 22.2728 23 21.376V2.62403C23 1.72722 22.2728 1 21.376 1ZM7.55722 19.7428H4.24958V9.23472H7.55722V19.7412V19.7428ZM5.90417 7.77875C4.85153 7.77875 3.9975 6.97667 3.9975 5.87972C3.9975 4.78278 4.85153 3.98069 5.90417 3.98069C6.95681 3.98069 7.81083 4.78278 7.81083 5.87972C7.81083 6.97667 6.95681 7.77875 5.90417 7.77875ZM19.7504 19.7504H16.4428V14.0121C16.4428 12.3193 15.7232 11.7968 14.7943 11.7968C13.8135 11.7968 12.851 12.5347 12.851 14.0549V19.7519H9.54333V9.24236H12.7242V10.6983H12.7669C13.0862 10.0521 14.2046 8.9475 15.9111 8.9475C17.7567 8.9475 19.7504 10.0429 19.7504 13.2513V19.7504Z",
-                      fill: "#1E3860",
-                      className: svg_icon({ variant })
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_34_11", children: /* @__PURE__ */ jsx(
-                    "rect",
-                    {
-                      width: "22",
-                      height: "22",
-                      fill: "white",
-                      transform: "translate(1 1)"
-                    }
-                  ) }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: executiveLinkedIn, children: "LinkedIn" }) })
-          ] }),
-          executiveWebsite && /* @__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",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    clipRule: "evenodd",
-                    d: "M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM14.1489 2.96268C15.396 3.25958 16.5456 3.80819 17.541 4.55185C17.0479 4.92025 16.5169 5.24079 15.955 5.50657C15.4554 4.5679 14.8471 3.71173 14.1489 2.96268ZM18.5052 5.38047C17.8846 5.87004 17.2076 6.29124 16.4855 6.6327C17.0807 8.07337 17.4348 9.66586 17.4915 11.3364H21.2495C21.0873 9.01027 20.068 6.92039 18.5052 5.38047ZM12.4032 3.01931C13.3464 3.81456 14.1595 4.81264 14.7923 5.96297C14.0335 6.20289 13.2325 6.34791 12.4032 6.38411V3.01931ZM15.3357 7.0952C14.409 7.40551 13.4248 7.5904 12.4032 7.62969V11.3364H16.2463C16.1906 9.81381 15.8684 8.38134 15.3357 7.0952ZM11.1587 3.01931L11.1587 6.35622C10.4387 6.29219 9.74234 6.14593 9.07907 5.92691C9.64291 4.9109 10.3478 3.76049 11.1587 3.01931ZM11.1587 7.60513C10.2455 7.53365 9.365 7.34562 8.53212 7.05589C7.98967 8.35213 7.66148 9.79828 7.60516 11.3364H11.1587V7.60513ZM9.66329 3.00507C8.99396 3.73051 8.4084 4.55491 7.92336 5.45629C7.40009 5.20069 6.90443 4.89732 6.44205 4.55185C7.39178 3.84227 8.48193 3.31027 9.66329 3.00507ZM7.38787 6.58008C6.70679 6.24829 6.06686 5.84518 5.47779 5.38047C3.91502 6.92039 2.89567 9.01027 2.73347 11.3364H6.36001C6.41741 9.64549 6.77947 8.03455 7.38787 6.58008ZM21.2539 12.5809C21.1064 14.9333 20.0827 17.048 18.5052 18.6024C17.8481 18.0839 17.1277 17.6422 16.3574 17.2906C16.993 15.8557 17.386 14.2604 17.4784 12.5809H21.2539ZM17.541 19.431C17.0021 19.0284 16.4181 18.683 15.7979 18.4037C15.221 19.4225 14.5137 20.3374 13.7013 21.115C15.1213 20.8506 16.4276 20.2628 17.541 19.431ZM16.2323 12.5809C16.1408 14.1185 15.7771 15.559 15.2 16.8432C14.3131 16.5597 13.3751 16.3905 12.4032 16.3531V12.5809H16.2323ZM14.6179 17.9666C13.9111 17.7584 13.1692 17.6322 12.4032 17.5987V20.6047C13.2619 19.8807 14.0127 18.9886 14.6179 17.9666ZM11.1587 12.5809V16.3777C10.2951 16.4453 9.46081 16.6171 8.66834 16.8806C8.0815 15.587 7.71159 14.1334 7.61924 12.5809H11.1587ZM11.1587 17.6266C10.5016 17.685 9.86413 17.812 9.25358 18.0002C9.78588 18.8919 10.4294 19.9381 11.1587 20.6047V17.6266ZM6.37306 12.5809C6.46656 14.2801 6.8678 15.8932 7.51657 17.3411C6.78731 17.6842 6.10383 18.1085 5.47779 18.6024C3.90035 17.048 2.87657 14.9333 2.72913 12.5809H6.37306ZM8.08081 18.4515C7.49934 18.722 6.95056 19.051 6.44205 19.431C7.51211 20.2305 8.76043 20.8045 10.1166 21.0827C9.33093 20.3243 8.64461 19.4371 8.08081 18.4515Z",
-                    fill: "#1E3860",
-                    className: svg_icon({ variant })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: contact_entry({ variant }), children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: executiveWebsite, children: "Website" }) })
-          ] })
         ] })
       ] })
-    ] })
-  ] }) }) }) });
+    ] }) }),
+    backgroundOverlay && /* @__PURE__ */ jsx(Overlay, { className: overlay, variant })
+  ] }) });
 };
 export {
   ExecutiveBio

package/dist/ExecutiveBio/ExecutiveBioSet.d.ts

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

package/dist/ExecutiveBio/ExecutiveBioSet.js

@@ -2,36 +2,50 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
 import { ExecutiveBio } from "./ExecutiveBio.js";
 import { section_theme, bio_section_text, header_theme, components, details } from "./ExecutiveBio.css.js";
+import "../utils/allowedAxosDomains.js";
+import "react";
+import { columnValues } from "../utils/variant.types.js";
+import { getNumOfColumns } from "../utils/getNumber.js";
 const ExecutiveBioSet = ({
   id,
   title,
   description,
   executiveBios,
   additionalDetails,
-  variant: fullVariant = "primary"
+  variant: fullVariant = "primary",
+  numberOfColumns = "1 Column"
 }) => {
   const variant = getVariant(fullVariant);
+  const numOfCols = getNumOfColumns(numberOfColumns);
   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: [
       title && /* @__PURE__ */ jsx("h2", { className: `header_1 ${header_theme({ variant })}`, children: title }),
       description && /* @__PURE__ */ jsx(Fragment, { children: description })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: components, children: executiveBios.map((bio) => /* @__PURE__ */ jsx(
-      ExecutiveBio,
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        id: `id_${bio.id}`,
-        executiveName: bio?.executiveName,
-        executiveTitle: bio?.executiveTitle,
-        executiveBodyCopy: bio?.executiveBodyCopy,
-        executiveEmailAddress: bio?.executiveEmailAddress,
-        executivePhoneNumber: bio?.executivePhoneNumber,
-        executiveLinkedIn: bio?.executiveLinkedIn,
-        executiveWebsite: bio?.executiveWebsite,
-        executiveHeadshot: { src: bio?.executiveHeadshot?.src || "" },
-        variant: bio?.variant
-      },
-      bio.id
-    )) }),
+        className: numOfCols && columnValues.includes(numOfCols) ? `${components({ columns: numOfCols })} cols_${numOfCols} containment` : "",
+        children: executiveBios.map((bio) => /* @__PURE__ */ jsx(
+          ExecutiveBio,
+          {
+            id: `id_${bio.id}`,
+            hasParentH2: Boolean(title),
+            executiveName: bio?.executiveName,
+            executiveTitle: bio?.executiveTitle,
+            executiveBodyCopy: bio?.executiveBodyCopy,
+            executiveEmailAddress: bio?.executiveEmailAddress,
+            executivePhoneNumber: bio?.executivePhoneNumber,
+            executiveLinkedIn: bio?.executiveLinkedIn,
+            executiveWebsite: bio?.executiveWebsite,
+            executiveHeadshot: { src: bio?.executiveHeadshot?.src || "" },
+            variant: bio?.variant,
+            bannerType: bio?.bannerType
+          },
+          bio.id
+        ))
+      }
+    ),
     additionalDetails && /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: details, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) }) })
   ] });
 };

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 {};