@axos-web-dev/shared-components 1.0.100 → 1.0.101-dev.1

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, shift, media, headshot, img_area, description, person, headline_setting, job_title, copy, contacts, contact_col, svg_icon, contact_entry, url_row, item_bio, 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, ceoSection } 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";
-/* 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/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.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,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";
@@ -140,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);
@@ -162,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: [
@@ -292,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/ExecutiveBioSet.js

@@ -1,7 +1,7 @@
 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 { bio_section_text, header_theme, components, details, section_theme } from "./ExecutiveBio.css.js";
 const ExecutiveBioSet = ({
   id,
   title,

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