@axos-web-dev/shared-components 0.0.70 → 0.0.71

package/dist/Calculators/Calculator.js

@@ -44,6 +44,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Carousel/index.js

@@ -46,6 +46,7 @@ import "../Calculators/calculator.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Chevron/index.js

@@ -46,6 +46,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Comparison/Comparison.js

@@ -45,6 +45,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import { comparison, comparison_layout, headerComparison, comparison_feature, feature_header, feature_title, comparison_list, comparison_buttons } from "./Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import { active_content } from "../Tab/Tab.css.js";

package/dist/Comparison/ComparisonSet.js

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

package/dist/FaqAccordion/index.d.ts

@@ -4,14 +4,12 @@ export interface AccordionItemProps extends PropsWithChildren {
     id: string;
 }
 export declare const AccordionItem: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-export interface AccordionItemSummaryProps {
+export declare const AccordionItemSummary: (props: {
     id: string;
     level: string;
-}
-export declare const AccordionItemSummary: (props: AccordionItemSummaryProps & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const AccordionItemContent: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export interface FaqAccordionProps {
+export declare const FaqAccordion: (props: {
     header?: string;
     accordionEmbedLevel?: string;
-}
-export declare const FaqAccordion: (props: FaqAccordionProps & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -44,6 +44,7 @@ import "../../Carousel/index.js";
 /* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
 import "../../HeroBanner/HeroBanner.css.js";
+import "../../HeroBanner/LargeBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";
 import "../../SetContainer/SetContainer.css.js";
 import "../../Tab/Tab.css.js";

package/dist/Forms/ContactUsAAS.js

@@ -48,6 +48,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";
@@ -242,7 +243,7 @@ const ContactUsAAS = ({
                 ...register("Current_Assets_Under_Management__c", {
                   required: true
                 }),
-                label: "Current Assets Under Management*",
+                label: "Current AUM*",
                 sizes: "medium",
                 required: true,
                 error: !!errors.Current_Assets_Under_Management__c,

package/dist/Forms/ContactUsBusiness.js

@@ -48,6 +48,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Forms/EmailOnly.js

@@ -49,6 +49,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Forms/SuccesForm.js

@@ -42,6 +42,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

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

@@ -19,7 +19,7 @@ export type HeroBannerWithSelection = {
 };
 export interface HeroBannerInterface extends HeroBannerWithImage, HeroBannerWithSelection {
     id?: string;
-    bannerType?: "Hero" | "Logout";
+    bannerType?: string;
     className?: string;
     variant: string;
     eyebrow: string | ReactNode;

package/dist/HeroBanner/HeroBanner.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
@@ -7,6 +7,7 @@ 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 { lg_hero_banner, lg_hero_content, lg_hero_text, lg_hero_eyebrow, lg_headline_text, lg_hero_img, lg_hero_sizing } from "./LargeBanner.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,
@@ -21,134 +22,248 @@ const HeroBanner = ({
   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,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    bannerType === "Hero" || /* @__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",
                   {
-                    targetUrl,
-                    color: getVariant(variant2),
-                    size: "large",
-                    rounded: "medium",
-                    children: displayText
-                  },
-                  id2
+                    className: heroSupertag({ variant: getVariant(variant) }),
+                    children: eyebrow
+                  }
+                ),
+                eyebrow ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: headline_text({
+                      variant: getVariant(variant)
+                    }),
+                    children: headline
+                  }
                 ) : /* @__PURE__ */ jsx(
-                  Chevron,
+                  "h1",
                   {
-                    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(
+                    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,
-                    icon,
+                    variant: variant2,
                     displayText,
                     targetUrl,
                     type
-                  }) => type === "Button" ? /* @__PURE__ */ jsxs(
+                  }) => type === "Button" ? /* @__PURE__ */ jsx(
                     Button,
                     {
                       targetUrl,
-                      color: "tertiary",
+                      color: getVariant(variant2),
                       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
-                      ]
+                      children: displayText
+                    },
+                    id2
+                  ) : /* @__PURE__ */ jsx(
+                    Chevron,
+                    {
+                      targetUrl,
+                      variant: getVariant(variant2),
+                      goBack: bannerType == "Logout",
+                      children: displayText
                     },
                     id2
-                  ) : /* @__PURE__ */ jsxs(
+                  )
+                ) })
+              ] }),
+              !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
+    ),
+    bannerType === "Large" && /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: lg_hero_banner({ variant: getVariant(variant) }),
+        id: `id_${id}`,
+        children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs("div", { className: `${lg_hero_content} flex between middle`, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${lg_hero_text({ variant: getVariant(variant) })} rounded`,
+              children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
+                eyebrow && /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: lg_hero_eyebrow({
+                      variant: getVariant(variant)
+                    }),
+                    children: eyebrow
+                  }
+                ),
+                eyebrow ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: lg_headline_text({
+                      variant: getVariant(variant)
+                    }),
+                    children: headline
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: headline_text({
+                      variant: getVariant(variant)
+                    }),
+                    children: headline
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "push_up", children: /* @__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: "tertiary",
-                      rounded: "medium",
+                      color: getVariant(variant2),
                       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
-                      ]
+                      rounded: "medium",
+                      children: displayText
+                    },
+                    id2
+                  ) : /* @__PURE__ */ jsx(
+                    Chevron,
+                    {
+                      targetUrl,
+                      variant: getVariant(variant2),
+                      children: displayText
                     },
                     id2
                   )
                 ) })
               ] })
-            ] })
-          ]
-        }
-      ) })
-    },
-    id
-  );
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { role: "presentation", className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${lg_hero_img} rounded`, role: "presentation", children: /* @__PURE__ */ jsx("img", { alt: "", className: lg_hero_sizing, src: image?.src }) }) })
+        ] }) })
+      }
+    )
+  ] });
 };
 export {
   HeroBanner

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

@@ -0,0 +1,77 @@
+export declare const lg_hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const lg_hero_content: string;
+export declare const lg_hero_text: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const lg_hero_eyebrow: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+    };
+}>;
+export declare const lg_headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const lg_hero_img: string;
+export declare const lg_hero_sizing: string;

package/dist/HeroBanner/LargeBanner.css.js

@@ -0,0 +1,21 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                               */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var lg_hero_banner = createRuntimeFn({ defaultClassName: "_1bsyngo0", variantClassNames: { variant: { primary: "_1bsyngo1", secondary: "_1bsyngo2", tertiary: "_1bsyngo3", quaternary: "_1bsyngo4" } }, defaultVariants: {}, compoundVariants: [] });
+var lg_hero_content = "_1bsyngo5";
+var lg_hero_text = createRuntimeFn({ defaultClassName: "_1bsyngo6", variantClassNames: { variant: { primary: "_1bsyngo7", secondary: "_1bsyngo8", tertiary: "_1bsyngo9", quaternary: "_1bsyngoa" } }, defaultVariants: {}, compoundVariants: [] });
+var lg_hero_eyebrow = createRuntimeFn({ defaultClassName: "_1bsyngob", variantClassNames: { variant: { primary: "_1bsyngoc", secondary: "_1bsyngod", tertiary: "_1bsyngoe", quaternary: "_1bsyngof" } }, defaultVariants: {}, compoundVariants: [] });
+var lg_headline_text = createRuntimeFn({ defaultClassName: "_1bsyngog", variantClassNames: { variant: { primary: "_1bsyngoh", secondary: "_1bsyngoi", tertiary: "_1bsyngoj", quaternary: "_1bsyngok" } }, defaultVariants: {}, compoundVariants: [] });
+var lg_hero_img = "_1bsyngol";
+var lg_hero_sizing = "_1bsyngom";
+export {
+  lg_headline_text,
+  lg_hero_banner,
+  lg_hero_content,
+  lg_hero_eyebrow,
+  lg_hero_img,
+  lg_hero_sizing,
+  lg_hero_text
+};

package/dist/Hyperlink/index.js

@@ -46,6 +46,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/IconBillboard/IconBillboard.css.d.ts

@@ -5,11 +5,9 @@ export declare const containerIconBillboard: import('@vanilla-extract/recipes').
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             border: "1px solid #D4D4D4";
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/ImageLink/ImageLink.js

@@ -72,6 +72,7 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 const ImageLink = ({
   id,

package/dist/ImageLink/ImageLinkSet.js

@@ -54,6 +54,7 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import ImageLink from "./ImageLink.js";

package/dist/ImageLink/index.js

@@ -43,6 +43,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Input/InputTextArea.js

@@ -35,7 +35,8 @@ const InputTextArea = forwardRef((props, ref) => {
           className: clsx(props.className, input({ size: sizes })),
           rows,
           placeholder: props.placeholder,
-          maxLength
+          maxLength,
+          style: { resize: "vertical" }
         }
       ),
       iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })

package/dist/Modal/Modal.js

@@ -43,6 +43,7 @@ import "../Carousel/index.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -45,6 +45,7 @@ import "../../Carousel/index.js";
 /* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
 import "../../HeroBanner/HeroBanner.css.js";
+import "../../HeroBanner/LargeBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";
 import "../../SetContainer/SetContainer.css.js";
 import "../../Tab/Tab.css.js";

package/dist/SetContainer/SetContainer.js

@@ -74,6 +74,7 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 const SetContainer = ({
   id,

package/dist/Table/Table.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { CellProps, RowProps, TableContainerProps, TableProps } from './Table.interface';
 
 export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, tableType, tableDescription, internalName, id, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, className, style, }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHead: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const TableBody: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.interface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 
 export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
 }
@@ -12,8 +12,6 @@ export interface TableProps extends PropsWithChildren {
     highlight?: "First Row" | "Last Row" | "First and Last Row" | undefined;
     tableType?: "Standard" | "Rate";
     alternateColorRows?: boolean;
-    className?: string;
-    style?: CSSProperties;
 }
 export interface TableContainerProps extends PropsWithChildren {
     id?: string;

package/dist/Table/Table.js

@@ -33,21 +33,13 @@ const Table = ({
   children,
   highlight,
   tableType = "Standard",
-  alternateColorRows = false,
-  className,
-  style
+  alternateColorRows = false
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(
-        tableWrapper({ variant: getVariant(variant) }),
-        className
-      ),
-      style: {
-        ...style,
-        ...tableType === "Rate" && { width: "90%", border: "none" }
-      },
+      className: tableWrapper({ variant: getVariant(variant) }),
+      style: tableType === "Rate" ? { width: "90%", border: "none" } : {},
       children: /* @__PURE__ */ jsx(
         "table",
         {

package/dist/assets/Chevron/Chevron.css

@@ -2,10 +2,10 @@
   font-weight: 600;
   opacity: 1;
   margin-bottom: 0;
+  padding: 0;
   text-decoration: none;
   cursor: pointer;
   font-family: var(--main-font-family);
-  padding: 0;
 }
 ._1gp5vfo1 {
   color: var(--_1073cm86);

package/dist/assets/HeroBanner/LargeBanner.css

@@ -0,0 +1,243 @@
+._1bsyngo0 {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+._1bsyngo1 {
+  background: var(--_1073cm81);
+}
+._1bsyngo2 {
+  background: var(--_1073cm88);
+}
+._1bsyngo3 {
+  background: var(--_1073cm8f);
+}
+._1bsyngo4 {
+  background: var(--_1073cm8m);
+}
+._1bsyngo5 {
+  isolation: isolate;
+  overflow: hidden;
+  position: relative;
+}
+._1bsyngo6 {
+  padding: 2rem 0;
+  position: relative;
+  z-index: 1;
+}
+._1bsyngo7 {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8g);
+}
+._1bsyngo8 {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8g);
+}
+._1bsyngo9 {
+  background: var(--_1073cm81);
+  color: var(--_1073cm82);
+}
+._1bsyngoa {
+  background: var(--_1073cm81);
+  color: var(--_1073cm82);
+}
+._1bsyngob {
+  display: block;
+  font: 700 14px / 1.3 var(--main-font-family);
+  margin-bottom: 2px;
+  letter-spacing: .2px;
+}
+._1bsyngoc {
+  color: var(--_1073cm8k);
+}
+._1bsyngod {
+  color: var(--_1073cm8k);
+}
+._1bsyngoe {
+  background: var(--_1073cm84);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1bsyngof {
+  background: var(--_1073cm84);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1bsyngog {
+  font: 600 2.5rem / 1.25 var(--header-font-family);
+}
+._1bsyngoh {
+  color: var(--_1073cm8h);
+}
+._1bsyngoi {
+  color: var(--_1073cm8h);
+}
+._1bsyngoj {
+  color: var(--_1073cm83);
+}
+._1bsyngok {
+  color: var(--_1073cm83);
+}
+options => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === 'boolean') {
+          // @ts-expect-error
+          selection = selection === true ? 'true' : 'false';
+        }
+        var selectionClassName =
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection];
+        if (selectionClassName) {
+          className += ' ' + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += ' ' + compoundClassName;
+      }
+    }
+    return className;
+  } p {
+  font: 400 18px / 1.44 var(--main-font-family);
+  letter-spacing: .2px;
+}
+._1bsyngol {
+  isolation: isolate;
+  overflow: hidden;
+  position: relative;
+}
+._1bsyngom {
+  width: 100%;
+  height: 100%;
+  object-position: right bottom;
+  object-fit: cover;
+}
+@media (max-width:1023px) {
+  options => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === 'boolean') {
+          // @ts-expect-error
+          selection = selection === true ? 'true' : 'false';
+        }
+        var selectionClassName =
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection];
+        if (selectionClassName) {
+          className += ' ' + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += ' ' + compoundClassName;
+      }
+    }
+    return className;
+  } > .containment {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 0 !important;
+  }
+  ._1bsyngo5 > .containment {
+    padding: 24px;
+  }
+  ._1bsyngo5 > * {
+    width: 100%;
+    border-radius: 0 !important;
+  }
+}
+@media (max-width: 1023px) {
+  ._1bsyngo5 {
+    flex-direction: column;
+  }
+  ._1bsyngo6 {
+    text-align: center;
+    border-radius: 0;
+  }
+  ._1bsyngol {
+    justify-content: flex-start;
+    width: 100%;
+    max-width: min(330px,100%);
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+@media (min-width: 1024px) {
+  ._1bsyngo5 {
+    min-height: calc(42.5rem + ((1vw - 10.24px) * 23.3463));
+  }
+  ._1bsyngo6 {
+    width: 59%;
+    max-width: 690px;
+    padding: 56px;
+  }
+  ._1bsyngol {
+    position: absolute;
+    right: 0;
+    height: 81%;
+    width: 66%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+@media (min-width: 1281px) {
+  ._1bsyngo5 {
+    min-height: 740px;
+  }
+}
+@media (min-width:1024px) {
+  ._1bsyngo5 .containment {
+    display: contents;
+  }
+}
+@media screen and (max-width:768px) {
+  ._1bsyngog {
+    font-size: 28px;
+    line-height: 1.29;
+  }
+  options => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === 'boolean') {
+          // @ts-expect-error
+          selection = selection === true ? 'true' : 'false';
+        }
+        var selectionClassName =
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection];
+        if (selectionClassName) {
+          className += ' ' + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += ' ' + compoundClassName;
+      }
+    }
+    return className;
+  } p {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+}

package/dist/assets/IconBillboard/IconBillboard.css

@@ -9,11 +9,9 @@
 ._1r4ovbu1 {
   background: var(--_1073cm81);
   border: 1px solid #D4D4D4;
-  color: var(--_1073cm82);
 }
 ._1r4ovbu2 {
   background: var(--_1073cm88);
-  color: var(--_1073cm89);
 }
 ._1r4ovbu3 {
   background: var(--_1073cm8f);
@@ -78,7 +76,6 @@
   flex-direction: column;
   gap: 24px;
   font-family: var(--main-font-family);
-  width: 100%;
 }
 ._1r4ovbuf {
   display: flex;
@@ -99,7 +96,6 @@
   margin-top: auto;
   gap: 24px;
   flex-wrap: wrap;
-  align-items: center;
 }
 ._1r4ovbui {
   margin-inline: auto;

package/dist/assets/SetContainer/SetContainer.css

@@ -87,6 +87,26 @@
     grid-template-columns: 1fr;
   }
 }
+@media (min-width: 1024px) {
+  ._18ygy9m5:has(:nth-child(5):last-child) {
+    grid-template-columns: repeat(4,1fr);
+  }
+  ._18ygy9m5:has(:nth-child(5):last-child) > * {
+    grid-column: span 2;
+  }
+  ._18ygy9m5:has(:nth-child(5):last-child) > *:last-child {
+    grid-column: 2 / span 2;
+  }
+  ._18ygy9m5:has(:nth-child(7):last-child) {
+    grid-template-columns: repeat(4,1fr);
+  }
+  ._18ygy9m5:has(:nth-child(7):last-child) > * {
+    grid-column: span 2;
+  }
+  ._18ygy9m5:has(:nth-child(7):last-child) > *:last-child {
+    grid-column: 2 / span 2;
+  }
+}
 @media screen and (max-width:320px) {
   ._18ygy9m7 {
     max-width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",