@axos-web-dev/shared-components 0.0.62 → 0.0.64

package/dist/BulletItem/BulletItem.d.ts

@@ -1,8 +1,9 @@
 import { PropsWithChildren, ReactNode } from 'react';
+import { QuaternaryTypes } from '../utils';
 
 export interface BulletItemProps extends PropsWithChildren {
     id: string;
-    variant?: "primary" | "secondary" | "tertiary" | "quaternary";
+    variant?: QuaternaryTypes;
     icon?: {
         src: string;
         altText?: string;

package/dist/BulletItem/BulletItem.js

@@ -10,6 +10,7 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                                */
 import { vars } from "../themes/axos.css.js";
 import { bulletIcon } from "./BulletItem.css.js";
+import { getVariant } from "../utils/getVariant.js";
 const BulletItem = (props) => {
   const iconCheckVariant = /* @__PURE__ */ new Map([
     [
@@ -44,7 +45,7 @@ const BulletItem = (props) => {
     ],
     [void 0, /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })]
   ]);
-  const Icon = iconCheckVariant.get(props.variant);
+  const Icon = iconCheckVariant.get(getVariant(props.variant));
   return /* @__PURE__ */ jsxs("li", { className: listItem, children: [
     /* @__PURE__ */ jsx("span", { className: bulletIcon, children: Icon }),
     /* @__PURE__ */ jsx("div", { children: props.children })

package/dist/Button/Button.css.d.ts

@@ -94,5 +94,32 @@ export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
             borderRadius: number;
         };
     };
+    square: {
+        true: {
+            width: number;
+            minHeight: number;
+            whiteSpace: "break-spaces";
+            textAlign: "center";
+            padding: "0 1em";
+            display: "flex";
+            flexDirection: "column";
+            justifyContent: "center";
+            background: "#fff";
+            color: "#333D46";
+            border: "1px solid #EBEBEB";
+            alignItems: "center";
+            gap: number;
+            ":hover": {
+                background: "#EBEBEB";
+                color: "#333D46";
+            };
+            "@media": {
+                "screen and (max-width:768px)": {
+                    width: number;
+                    minHeight: number;
+                };
+            };
+        };
+    };
 }>;
 export type ButtonVariants = RecipeVariants<typeof button>;

package/dist/Button/Button.css.js

@@ -3,7 +3,7 @@
 /* empty css                                   */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = createRuntimeFn({ defaultClassName: "_13pdpuj0", variantClassNames: { color: { primary: "_13pdpuj1", secondary: "_13pdpuj2", tertiary: "_13pdpuj3" }, skeleton: { true: "_13pdpuj4" }, size: { small: "_13pdpuj5", medium: "_13pdpuj6", large: "_13pdpuj7" }, disabled: { true: "_13pdpuj8" }, rounded: { none: "_13pdpuj9", small: "_13pdpuja", medium: "_13pdpujb", large: "_13pdpujc" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", disabled: true }, "_13pdpujd"], [{ color: "secondary", disabled: true }, "_13pdpuje"], [{ color: "tertiary", disabled: true }, "_13pdpujf"], [{ skeleton: true, size: "large" }, "_13pdpujg"], [{ skeleton: true, size: "medium" }, "_13pdpujh"], [{ skeleton: true, size: "small" }, "_13pdpuji"]] });
+var button = createRuntimeFn({ defaultClassName: "_13pdpuj0", variantClassNames: { color: { primary: "_13pdpuj1", secondary: "_13pdpuj2", tertiary: "_13pdpuj3" }, skeleton: { true: "_13pdpuj4" }, size: { small: "_13pdpuj5", medium: "_13pdpuj6", large: "_13pdpuj7" }, disabled: { true: "_13pdpuj8" }, rounded: { none: "_13pdpuj9", small: "_13pdpuja", medium: "_13pdpujb", large: "_13pdpujc" }, square: { true: "_13pdpujd" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", disabled: true }, "_13pdpuje"], [{ color: "secondary", disabled: true }, "_13pdpujf"], [{ color: "tertiary", disabled: true }, "_13pdpujg"], [{ skeleton: true, size: "large" }, "_13pdpujh"], [{ skeleton: true, size: "medium" }, "_13pdpuji"], [{ skeleton: true, size: "small" }, "_13pdpujj"]] });
 export {
   button
 };

package/dist/Button/Button.d.ts

@@ -16,7 +16,7 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
     as?: "a";
 };
 export type ButtonProps = ButtonAsButton | ButtonAsLink;
-export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import('react').DetailedReactHTMLElement<{
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, square, }: ButtonProps & ButtonVariants) => import('react').DetailedReactHTMLElement<{
     className: string;
     href: string;
     id: string | undefined;

package/dist/Button/Button.js

@@ -16,7 +16,8 @@ const Button = ({
   id,
   newTab = false,
   action,
-  className
+  className,
+  square
 }) => {
   const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
   const onClick = (e) => {
@@ -33,7 +34,10 @@ const Button = ({
   return createElement(
     as,
     {
-      className: clsx(button({ color, size, disabled, rounded }), className),
+      className: clsx(
+        button({ color, size, disabled, rounded, square }),
+        className
+      ),
       href: findMoreAxosDomains(targetUrl),
       id,
       target: newTab ? "_blank" : "_self",

package/dist/Calculators/Calculator.js

@@ -49,6 +49,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Carousel/index.js

@@ -12,11 +12,11 @@ import SvgQuoteIconYellow from "../icons/QuoteIconYellow.js";
 /* empty css                                                */
 /* empty css                                          */
 /* empty css                                          */
+import { getVariant } from "../utils/getVariant.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Modal/contextApi/store.js";
-import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import React, { useEffect, Children, cloneElement } from "react";
 import "../Button/Button.css.js";
@@ -49,6 +49,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Chevron/Chevron.interface.d.ts

@@ -34,4 +34,8 @@ export interface ChevronProps extends PropsWithChildren {
      * Value that allow to go back in the previus page
      */
     goBack?: boolean;
+    /**
+     * URL for icon selection button
+     */
+    icon?: string;
 }

package/dist/Chevron/index.js

@@ -49,6 +49,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -47,6 +47,7 @@ import "../../ExecutiveBio/ExecutiveBio.css.js";
 import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 import { footer_section, footer_wrapper, ft_col, ft_col_header, ft_col_subheader, nested_grid, app_col, footer_mobile, ft_panel_group, ft_panel } from "./FooterSiteMap.css.js";
+import "../../HeroBanner/SelectionBanner.css.js";
 import "../../SetContainer/SetContainer.css.js";
 import "../../ImageBillboard/ImageBillboard.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Forms/ContactUsBusiness.js

@@ -51,6 +51,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Forms/EmailOnly.js

@@ -52,6 +52,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Forms/RenderForm.js

@@ -46,6 +46,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Forms/SuccesForm.js

@@ -47,6 +47,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/HeroBanner/HeroBanner.css.d.ts

@@ -24,7 +24,7 @@ export declare const reversed: string;
 export declare const hero_text: string;
 export declare const hero_wrapper: string;
 export declare const hero_img: string;
-export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
+export declare const heroSupertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/HeroBanner/HeroBanner.css.js

@@ -1,3 +1,4 @@
+/* empty css                                   */
 /* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
@@ -10,11 +11,12 @@ var reversed = "_1ye8k3f7";
 var hero_text = "_1ye8k3f8";
 var hero_wrapper = "_1ye8k3f9";
 var hero_img = "_1ye8k3fa";
-var supertag = createRuntimeFn({ defaultClassName: "_1ye8k3fb", variantClassNames: { variant: { primary: "_1ye8k3fc", secondary: "_1ye8k3fd", tertiary: "_1ye8k3fe", quaternary: "_1ye8k3ff" } }, defaultVariants: {}, compoundVariants: [] });
+var heroSupertag = createRuntimeFn({ defaultClassName: "_1ye8k3fb", variantClassNames: { variant: { primary: "_1ye8k3fc", secondary: "_1ye8k3fd", tertiary: "_1ye8k3fe", quaternary: "_1ye8k3ff" } }, defaultVariants: {}, compoundVariants: [] });
 var headline_text = createRuntimeFn({ defaultClassName: "_1ye8k3fg", variantClassNames: { variant: { primary: "_1ye8k3fh", secondary: "_1ye8k3fi", tertiary: "_1ye8k3fj", quaternary: "_1ye8k3fk" } }, defaultVariants: {}, compoundVariants: [] });
 var hero_btns = "_1ye8k3fl";
 export {
   headline_text,
+  heroSupertag,
   hero_banner,
   hero_btns,
   hero_content,
@@ -22,6 +24,5 @@ export {
   hero_text,
   hero_wrapper,
   logout,
-  reversed,
-  supertag
+  reversed
 };

package/dist/HeroBanner/HeroBanner.d.ts

@@ -0,0 +1,3 @@
+import { HeroBannerInterface } from './HeroBanner.interface';
+
+export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, selection, isSelectionBanner, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/HeroBanner/HeroBanner.interface.d.ts

@@ -1,11 +1,23 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
 import { ReactNode } from 'react';
 
-export interface ImageInterface {
+export interface HeroImageInterface {
     src: string;
     alt?: string;
 }
-export interface HeroBannerInterface {
+export type HeroBannerWithImage = {
+    image?: HeroImageInterface;
+    imagePlacement?: "Right" | "Left";
+};
+export type HeroBannerWithSelection = {
+    isSelectionBanner?: boolean;
+    selection?: {
+        headline?: ReactNode;
+        bodyCopy?: ReactNode;
+        callToActionRow?: ChevronProps[];
+    };
+};
+export interface HeroBannerInterface extends HeroBannerWithImage, HeroBannerWithSelection {
     id?: string;
     bannerType?: "Hero" | "Logout";
     className?: string;
@@ -13,7 +25,5 @@ export interface HeroBannerInterface {
     eyebrow: string | ReactNode;
     headline: string | ReactNode;
     bodyCopy: string | ReactNode;
-    image: ImageInterface;
-    imagePlacement?: "Right" | "Left";
     callToActionRow?: ChevronProps[];
 }

package/dist/HeroBanner/HeroBanner.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import { Chevron } from "../Chevron/index.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
+import { selection_section, selection_section_bg, selection_section_content, selection_headline_text, selection_section_icon, selection_section_icon_img } from "./SelectionBanner.css.js";
+const HeroBanner = ({
+  id,
+  eyebrow,
+  headline,
+  bodyCopy,
+  callToActionRow,
+  bannerType = "Hero",
+  image,
+  imagePlacement = "Right",
+  variant,
+  selection,
+  isSelectionBanner = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: `id_${id}`,
+      className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
+      children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
+              eyebrow && /* @__PURE__ */ jsx("h1", { className: heroSupertag({ variant: getVariant(variant) }), children: eyebrow }),
+              eyebrow ? /* @__PURE__ */ jsx("h2", { className: headline_text({ variant: getVariant(variant) }), children: headline }) : /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
+              /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
+              callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
+                ({
+                  id: id2,
+                  variant: variant2,
+                  displayText,
+                  targetUrl,
+                  type
+                }) => type === "Button" ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    targetUrl,
+                    color: getVariant(variant2),
+                    size: "large",
+                    rounded: "medium",
+                    children: displayText
+                  },
+                  id2
+                ) : /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    targetUrl,
+                    variant: getVariant(variant2),
+                    goBack: bannerType == "Logout",
+                    children: displayText
+                  },
+                  id2
+                )
+              ) })
+            ] }),
+            !isSelectionBanner ? /* @__PURE__ */ jsx("div", { className: hero_img, role: "presentation", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                decoding: "async",
+                "data-nimg": 1,
+                className: "img_fluid",
+                style: { color: "transparent" },
+                src: `${image?.src}?fm=webp&w=604&h=480&fit=fill`,
+                alt: image?.alt
+              }
+            ) }) : /* @__PURE__ */ jsxs("div", { className: clsx(selection_section), children: [
+              /* @__PURE__ */ jsx("div", { className: clsx(selection_section_bg) }),
+              /* @__PURE__ */ jsxs("div", { className: clsx(selection_section_content), children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: clsx(
+                        "header_2",
+                        selection_headline_text({ variant: getVariant(variant) })
+                      ),
+                      children: selection?.headline
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { children: selection?.bodyCopy })
+                ] }),
+                selection?.callToActionRow && selection?.callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: selection?.callToActionRow.map(
+                  ({
+                    id: id2,
+                    icon,
+                    displayText,
+                    targetUrl,
+                    type
+                  }) => type === "Button" ? /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      targetUrl,
+                      color: "tertiary",
+                      size: "large",
+                      rounded: "medium",
+                      square: true,
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: "",
+                            src: icon,
+                            className: clsx(selection_section_icon_img)
+                          }
+                        ) }),
+                        displayText
+                      ]
+                    },
+                    id2
+                  ) : /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      targetUrl,
+                      color: "tertiary",
+                      rounded: "medium",
+                      size: "large",
+                      square: true,
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: "",
+                            src: icon,
+                            className: clsx(selection_section_icon_img)
+                          }
+                        ) }),
+                        displayText
+                      ]
+                    },
+                    id2
+                  )
+                ) })
+              ] })
+            ] })
+          ]
+        }
+      ) })
+    },
+    id
+  );
+};
+export {
+  HeroBanner
+};

package/dist/HeroBanner/SelectionBanner.css.d.ts

@@ -0,0 +1,24 @@
+export declare const selection_headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const selection_section: string;
+export declare const selection_section_bg: string;
+export declare const selection_section_content: string;
+export declare const selection_section_icon: string;
+export declare const selection_section_icon_img: string;

package/dist/HeroBanner/SelectionBanner.css.js

@@ -0,0 +1,19 @@
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                   */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var selection_headline_text = createRuntimeFn({ defaultClassName: "_7etqoq0", variantClassNames: { variant: { primary: "_7etqoq1", secondary: "_7etqoq2", tertiary: "_7etqoq3", quaternary: "_7etqoq4" } }, defaultVariants: {}, compoundVariants: [] });
+var selection_section = "_7etqoq5";
+var selection_section_bg = "_7etqoq6";
+var selection_section_content = "_7etqoq7";
+var selection_section_icon = "_7etqoq8";
+var selection_section_icon_img = "_7etqoq9";
+export {
+  selection_headline_text,
+  selection_section,
+  selection_section_bg,
+  selection_section_content,
+  selection_section_icon,
+  selection_section_icon_img
+};

package/dist/HeroBanner/index.d.ts

@@ -1,3 +1,4 @@
-import { HeroBannerInterface } from './HeroBanner.interface';
-
-export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;
+export * from './HeroBanner';
+export * from './HeroBanner.css';
+export * from './HeroBanner.interface';
+export * from './SelectionBanner.css';

package/dist/HeroBanner/index.js

@@ -1,83 +1,22 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react";
-import "react-use";
-import { Chevron } from "../Chevron/index.js";
-import { getVariant } from "../utils/getVariant.js";
-import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
-const HeroBanner = ({
-  id,
-  eyebrow,
-  headline,
-  bodyCopy,
-  callToActionRow,
-  bannerType = "Hero",
-  image,
-  imagePlacement = "Right",
-  variant
-}) => {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      id: `id_${id}`,
-      className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
-      children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
-              eyebrow && /* @__PURE__ */ jsx("h1", { className: supertag({ variant: getVariant(variant) }), children: eyebrow }),
-              eyebrow ? /* @__PURE__ */ jsx("h2", { className: headline_text({ variant: getVariant(variant) }), children: headline }) : /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
-              /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
-              callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
-                ({
-                  id: id2,
-                  variant: variant2,
-                  displayText,
-                  targetUrl,
-                  type
-                }) => type === "Button" ? /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    targetUrl,
-                    color: getVariant(variant2),
-                    size: "large",
-                    rounded: "medium",
-                    children: displayText
-                  },
-                  id2
-                ) : /* @__PURE__ */ jsx(
-                  Chevron,
-                  {
-                    targetUrl,
-                    variant: getVariant(variant2),
-                    goBack: bannerType == "Logout",
-                    children: displayText
-                  },
-                  id2
-                )
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: hero_img, role: "presentation", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                decoding: "async",
-                "data-nimg": 1,
-                className: "img_fluid",
-                style: { color: "transparent" },
-                src: `${image.src}?fm=webp&w=604&h=480&fit=fill`,
-                alt: image.alt
-              }
-            ) })
-          ]
-        }
-      ) })
-    },
-    id
-  );
-};
+import { HeroBanner } from "./HeroBanner.js";
+import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_img, hero_text, hero_wrapper, logout, reversed } from "./HeroBanner.css.js";
+import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./SelectionBanner.css.js";
 export {
-  HeroBanner
+  HeroBanner,
+  headline_text,
+  heroSupertag,
+  hero_banner,
+  hero_btns,
+  hero_content,
+  hero_img,
+  hero_text,
+  hero_wrapper,
+  logout,
+  reversed,
+  selection_headline_text,
+  selection_section,
+  selection_section_bg,
+  selection_section_content,
+  selection_section_icon,
+  selection_section_icon_img
 };

package/dist/Hyperlink/index.js

@@ -49,6 +49,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/ImageLink.js

@@ -46,6 +46,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/ImageLinkSet.js

@@ -8,8 +8,8 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                                */
 /* empty css                                          */
 /* empty css                                          */
-import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
+import { Chevron } from "../Chevron/index.js";
 import "clsx";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
@@ -49,6 +49,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import ImageLink from "./ImageLink.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/index.js

@@ -46,6 +46,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import { ImageLinkSet } from "./ImageLinkSet.js";