@axos-web-dev/shared-components 0.0.61 → 0.0.63

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

@@ -38,96 +38,48 @@ export declare const item_bio: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const headline_setting: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const job_title: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const svg_icon: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            selectors: {
-                [x: string]: {
-                    fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            selectors: {
-                [x: string]: {
-                    fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -138,32 +90,16 @@ export declare const copy: string;
 export declare const contact_entry: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    color: "#0062B3";
-                };
-            };
+            color: "#0062B3";
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    color: "#0062B3";
-                };
-            };
+            color: "#0062B3";
         };
         tertiary: {
-            selectors: {
-                [x: string]: {
-                    color: "#fff";
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            selectors: {
-                [x: string]: {
-                    color: "#FAA74A";
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -178,72 +114,32 @@ export declare const bio_section_text: string;
 export declare const section_theme: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            selectors: {
-                [x: string]: {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                } | {
-                    background: "#1E262F";
-                };
-            };
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            selectors: {
-                [x: string]: {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                } | {
-                    background: "#1E262F";
-                };
-            };
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            selectors: {
-                [x: string]: {
-                    color: "#1E3860";
-                } | {
-                    color: "#1E262F";
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            selectors: {
-                [x: string]: {
-                    color: "#1E3860";
-                } | {
-                    color: "#1E262F";
-                };
-            };
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -18,21 +18,11 @@ import "react-use";
 /* empty css                                                   */
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                                 */
 /* empty css                                             */
 /* empty css                                             */
-/* empty css                                                 */
 import "../../IconBillboard/IconBillboard.css.js";
 /* empty css                                             */
-/* empty css                                                       */
-import "../../Carousel/index.js";
-/* empty css                                                                       */
-import "../../HeroBanner/HeroBanner.css.js";
-import "../../ContentBanner/ContentBanner.css.js";
-/* empty css                                                 */
-import "../../ExecutiveBio/ExecutiveBio.css.js";
-import "../../FaqAccordion/index.js";
-import "../../FooterDisclosure/FooterDisclosure.css.js";
-import { 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 "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
@@ -45,6 +35,19 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../../Calculators/calculator.css.js";
+/* empty css                                                       */
+import "../../Carousel/index.js";
+/* empty css                                                                       */
+import "../../HeroBanner/HeroBanner.css.js";
+import "../../ContentBanner/ContentBanner.css.js";
+/* empty css                                                 */
+import "../../ExecutiveBio/ExecutiveBio.css.js";
+import "../../FaqAccordion/index.js";
+import "../../FooterDisclosure/FooterDisclosure.css.js";
+import { 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

@@ -30,11 +30,17 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
+/* empty css                                          */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import { z } from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -45,10 +51,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import { useForm, FormProvider } from "react-hook-form";
-import { z } from "zod";
-import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
-import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+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

@@ -30,11 +30,18 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
+/* empty css                                          */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
+import { associatedEmail } from "../utils/EverestValidity.js";
 import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import { z } from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -45,11 +52,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import { associatedEmail } from "../utils/EverestValidity.js";
-import { useForm, FormProvider } from "react-hook-form";
-import { z } from "zod";
-import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
-import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+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

@@ -30,10 +30,12 @@ import "../AlertBanner/AlertBanner.css.js";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
+/* empty css                                          */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -44,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

@@ -31,10 +31,12 @@ import "../AlertBanner/AlertBanner.css.js";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
+/* empty css                                          */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -45,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
+};