@axos-web-dev/shared-components 1.0.77-patch.5 → 1.0.77-patch.50

package/dist/HeroBanner/HeroBanner.js

@@ -4,10 +4,18 @@ import "../Button/Button.css.js";
 import "react";
 import "react-use";
 import { Chevron } from "../Chevron/index.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+import SvgCheckIcon from "../icons/CheckIcon/index.js";
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                   */
+/* empty css                                    */
+/* empty css                                                    */
+/* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
 import Image from "next/image.js";
 import clsx from "clsx";
-import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_btns, hero_img, img_contents, reversed_lg_image } from "./HeroBanner.css.js";
+import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_bullet_item, hero_sub_bullets, hero_btns, hero_img, img_contents, reversed_lg_image } 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_icon_img, selection_section_icon, selection_section, selection_section_bg, selection_section_content, selection_headline_text } from "./SelectionBanner.css.js";
 const HeroBanner = ({
@@ -15,6 +23,8 @@ const HeroBanner = ({
   eyebrow,
   headline,
   bodyCopy,
+  bullets,
+  subBodyCopy,
   callToActionRow,
   bannerType = "Hero",
   image,
@@ -59,6 +69,42 @@ const HeroBanner = ({
                 }
               ),
               /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
+              bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up_24", children: bullets.map(
+                ({ id: id2, icon, copy, subBullet }) => !subBullet ? /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: `list_item flex ${hero_bullet_item}`,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "img_item", children: getVariant(variant) ? /* @__PURE__ */ jsx(
+                        SvgCheckIcon,
+                        {
+                          variant: getVariant(variant) === "primary" || getVariant(variant) === "secondary" ? "primary" : "secondary"
+                        }
+                      ) : /* @__PURE__ */ jsx("img", { src: icon?.src, alt: icon?.altText }) }),
+                      /* @__PURE__ */ jsx("span", { children: copy })
+                    ]
+                  },
+                  id2
+                ) : /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    className: clsx(hero_sub_bullets, "mb_0", "push_up"),
+                    children: /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
+                      /* @__PURE__ */ jsx("div", { className: "img_item", children: /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          style: { maxWidth: "max-content" },
+                          src: icon?.src,
+                          alt: icon?.altText
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("span", { children: copy })
+                    ] })
+                  },
+                  id2
+                )
+              ) }),
+              subBodyCopy && /* @__PURE__ */ jsx("div", { className: "push_up_24", children: subBodyCopy }),
               callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
                 ({
                   id: id2,
@@ -66,7 +112,8 @@ const HeroBanner = ({
                   displayText,
                   targetUrl,
                   type,
-                  icon
+                  icon,
+                  newTab
                 }) => type === "Button" ? /* @__PURE__ */ jsxs(
                   Button,
                   {
@@ -75,6 +122,7 @@ const HeroBanner = ({
                     size: "large",
                     rounded: "medium",
                     square: icon !== void 0,
+                    newTab,
                     children: [
                       typeof icon !== "undefined" ? /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
                         "span",
@@ -100,6 +148,7 @@ const HeroBanner = ({
                     targetUrl,
                     variant: getVariant(variant2),
                     goBack: bannerType === "Logout",
+                    newTab,
                     children: displayText
                   },
                   id2
@@ -137,18 +186,7 @@ const HeroBanner = ({
               /* @__PURE__ */ jsx("div", { className: selection_section_bg }),
               /* @__PURE__ */ jsxs("div", { className: 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("h3", { className: clsx("header_2", selection_headline_text), 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(
@@ -157,7 +195,8 @@ const HeroBanner = ({
                     icon,
                     displayText,
                     targetUrl,
-                    type
+                    type,
+                    newTab
                   }) => type === "Button" ? /* @__PURE__ */ jsxs(
                     Button,
                     {
@@ -166,6 +205,7 @@ const HeroBanner = ({
                       size: "large",
                       rounded: "medium",
                       square: true,
+                      newTab,
                       children: [
                         typeof icon !== "undefined" ? /* @__PURE__ */ jsx("div", { className: selection_section_icon, children: /* @__PURE__ */ jsx(
                           "span",
@@ -193,6 +233,7 @@ const HeroBanner = ({
                       rounded: "medium",
                       size: "large",
                       square: true,
+                      newTab,
                       children: [
                         typeof icon !== "undefined" ? /* @__PURE__ */ jsx(
                           "div",
@@ -268,14 +309,56 @@ const HeroBanner = ({
                       children: headline
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "push_up", children: /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "push_up", children: [
+                    /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
+                    bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up_24", children: bullets.map(
+                      ({ id: id2, icon, copy, subBullet }) => !subBullet ? /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: `list_item flex ${hero_bullet_item}`,
+                          children: [
+                            /* @__PURE__ */ jsx("div", { className: "img_item", children: getVariant(variant) ? /* @__PURE__ */ jsx(
+                              SvgCheckIcon,
+                              {
+                                variant: getVariant(variant) === "primary" || getVariant(variant) === "secondary" ? "secondary" : "primary"
+                              }
+                            ) : /* @__PURE__ */ jsx("img", { src: icon?.src, alt: icon?.altText }) }),
+                            /* @__PURE__ */ jsx("span", { children: copy })
+                          ]
+                        },
+                        id2
+                      ) : /* @__PURE__ */ jsx(
+                        "ul",
+                        {
+                          className: clsx(
+                            hero_sub_bullets,
+                            "mb_0",
+                            "push_up"
+                          ),
+                          children: /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
+                            /* @__PURE__ */ jsx("div", { className: "img_item", children: /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                style: { maxWidth: "max-content" },
+                                src: icon?.src,
+                                alt: icon?.altText
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx("span", { children: copy })
+                          ] })
+                        },
+                        id2
+                      )
+                    ) })
+                  ] }),
                   callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
                     ({
                       id: id2,
                       variant: variant2,
                       displayText,
                       targetUrl,
-                      type
+                      type,
+                      newTab
                     }) => type === "Button" ? /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -283,6 +366,7 @@ const HeroBanner = ({
                         color: getVariant(variant2),
                         size: "large",
                         rounded: "medium",
+                        newTab,
                         children: displayText
                       },
                       id2
@@ -291,6 +375,7 @@ const HeroBanner = ({
                       {
                         targetUrl,
                         variant: getVariant(variant2),
+                        newTab,
                         children: displayText
                       },
                       id2

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

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

package/dist/HeroBanner/SelectionBanner.css.js

@@ -4,12 +4,12 @@ import '../assets/HeroBanner/SelectionBanner.css';import '../assets/themes/victo
 /* 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 = createRuntimeFn({ defaultClassName: "_7etqoq9", variantClassNames: { variant: { primary: "_7etqoqa", secondary: "_7etqoqb", tertiary: "_7etqoqc", quaternary: "_7etqoqd" } }, defaultVariants: {}, compoundVariants: [] });
+var selection_headline_text = "_7etqoq0";
+var selection_section = "_7etqoq1";
+var selection_section_bg = "_7etqoq2";
+var selection_section_content = "_7etqoq3";
+var selection_section_icon = "_7etqoq4";
+var selection_section_icon_img = createRuntimeFn({ defaultClassName: "_7etqoq5", variantClassNames: { variant: { primary: "_7etqoq6", secondary: "_7etqoq7", tertiary: "_7etqoq8", quaternary: "_7etqoq9" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   selection_headline_text,
   selection_section,

package/dist/HeroBanner/index.js

@@ -1,5 +1,5 @@
 import { HeroBanner } from "./HeroBanner.js";
-import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, img_contents, logout, reversed, reversed_lg_image } from "./HeroBanner.css.js";
+import { headline_text, heroSupertag, hero_banner, hero_btns, hero_bullet_item, hero_content, hero_embedded_image, hero_img, hero_sub_bullets, hero_text, hero_wrapper, img_contents, logout, reversed, reversed_lg_image } 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,
@@ -7,9 +7,11 @@ export {
   heroSupertag,
   hero_banner,
   hero_btns,
+  hero_bullet_item,
   hero_content,
   hero_embedded_image,
   hero_img,
+  hero_sub_bullets,
   hero_text,
   hero_wrapper,
   img_contents,

package/dist/Hyperlink/Hyperlink.css.d.ts

@@ -1,20 +1,20 @@
 export declare const hyperlink: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: "#0062B3";
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: "#0062B3";
+                    textDecorationColor: `var(--${string})`;
                 };
             };
         };
         secondary: {
-            color: "#FAA74A";
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: "#FAA74A";
+                    textDecorationColor: `var(--${string})`;
                 };
             };
         };

package/dist/Hyperlink/Hyperlink.css.js

@@ -1,4 +1,7 @@
-import '../assets/Hyperlink/Hyperlink.css';/* empty css                             */
+import '../assets/Hyperlink/Hyperlink.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                   */
+/* empty css                                    */
+/* empty css                             */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var hyperlink = createRuntimeFn({ defaultClassName: "hvs5ng0", variantClassNames: { variant: { primary: "hvs5ng1", secondary: "hvs5ng2", "default": "hvs5ng3" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
 export {

package/dist/Hyperlink/index.js

@@ -5,7 +5,7 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/Modal/Modal.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/VideoTile.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/Modal/Modal.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -41,8 +41,11 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
@@ -55,8 +58,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */
@@ -65,6 +66,12 @@ import "../Auth/SignInPassword.js";
 /* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/authenticate.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -83,6 +90,8 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 /* empty css                                            */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "next/script.js";
+/* empty css                                        */
 /* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
@@ -116,8 +125,6 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                */
 /* empty css                                                  */
 /* empty css                                                */
-import "next/script.js";
-/* empty css                                        */
 /* empty css                                              */
 /* empty css                                */
 import { useGlobalContext } from "../Modal/contextApi/store.js";

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

@@ -4,7 +4,7 @@ export declare const containerIconBillboard: import('@vanilla-extract/recipes').
     variant: {
         primary: {
             background: `var(--${string})`;
-            border: "1px solid #D4D4D4";
+            border: "1px solid #E9EBEF";
             color: `var(--${string})`;
         };
         secondary: {
@@ -34,38 +34,10 @@ export declare const headerIconBillboard: string;
 export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: "transparent";
-                    textShadow: "0px 0px #00000000";
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: "transparent";
-                    textShadow: "0px 0px #00000000";
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;
@@ -82,16 +54,10 @@ export declare const section_text: string;
 export declare const header_section: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;
@@ -106,7 +72,7 @@ export declare const section_body: import('@vanilla-extract/recipes').RuntimeFn<
     variant: {
         primary: {
             background: `var(--${string})`;
-            border: "1px solid #D4D4D4";
+            border: "1px solid #E9EBEF";
         };
         secondary: {
             background: `var(--${string})`;
@@ -121,5 +87,6 @@ export declare const section_body: import('@vanilla-extract/recipes').RuntimeFn<
         };
     };
 }>;
+export declare const link_wrapper: string;
 export type ContainerVariants = RecipeVariants<typeof containerIconBillboard>;
 export type LayoutVariants = RecipeVariants<typeof layout>;

package/dist/IconBillboard/IconBillboard.css.js

@@ -17,6 +17,7 @@ var section_text = "_1r4ovbui";
 var header_section = createRuntimeFn({ defaultClassName: "_1r4ovbuj", variantClassNames: { variant: { primary: "_1r4ovbuk", secondary: "_1r4ovbul", tertiary: "_1r4ovbum", quaternary: "_1r4ovbun" } }, defaultVariants: {}, compoundVariants: [] });
 var section_container = "_1r4ovbuo";
 var section_body = createRuntimeFn({ defaultClassName: "_1r4ovbup", variantClassNames: { variant: { primary: "_1r4ovbuq", secondary: "_1r4ovbur", tertiary: "_1r4ovbus", quaternary: "_1r4ovbut" } }, defaultVariants: {}, compoundVariants: [] });
+var link_wrapper = "_1r4ovbuu";
 export {
   billboard_icon,
   buttons,
@@ -25,6 +26,7 @@ export {
   headerIconBillboard,
   header_section,
   layout,
+  link_wrapper,
   list,
   listItem,
   section_body,

package/dist/IconBillboard/IconBillboard.d.ts

@@ -1,5 +1,5 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ImageInterface } from '.';
 import { ContainerVariants, LayoutVariants } from './IconBillboard.css';
 
@@ -15,5 +15,4 @@ export interface FocusProps {
     set?: boolean;
     id?: string;
 }
-export declare const Icon: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/IconBillboard.js

@@ -1,15 +1,14 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, createElement } from "react";
-import { BulletItem } from "../BulletItem/BulletItem.js";
-import { Chevron } from "../Chevron/index.js";
-import { getVariant } from "../utils/getVariant.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react-use";
-import { billboard_icon, layout, headerIconBillboard, title, list, content, buttons, containerIconBillboard } from "./IconBillboard.css.js";
-const Icon = ({ children }) => /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children });
+import { useRef, useState, useEffect } from "react";
+import { getVariant } from "../utils/getVariant.js";
+import { content, containerIconBillboard, link_wrapper } from "./IconBillboard.css.js";
+import { LayoutSection } from "./sections/LayoutSection.js";
+import { IconSection } from "./sections/IconSection.js";
+import { HeaderSection } from "./sections/HeaderSection.js";
+import { ItemsSection } from "./sections/ItemsSection.js";
+import { useFullClick, CallToActionSection } from "./sections/CallToActionSection.js";
 const IconBillboard = (props) => {
   const {
     callToActionRow,
@@ -36,96 +35,42 @@ const IconBillboard = (props) => {
       }
     }
   }, []);
+  const { isClickable, handleClick, chevronText } = useFullClick(callToActionRow);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
+      onClick: handleClick,
+      role: isClickable ? "link" : void 0,
+      title: isClickable ? chevronText : void 0,
       className: clsx(
         containerIconBillboard({ variant }),
         `${set ? "" : "containment"}`,
-        "billboard rounded flex_col gap_24 is_icon"
+        "billboard rounded flex_col gap_24 is_icon",
+        isClickable && link_wrapper
       ),
-      id,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: `flex_col middle ${layout({ side })}`, children: [
-          icon && /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: icon?.src,
-              alt: icon?.alt ?? "",
-              className: "img_fluid",
-              height: icon?.height,
-              width: icon?.width
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: clsx(content), children: [
-            /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
-              headline && createElement(
+        /* @__PURE__ */ jsxs(LayoutSection, { side, children: [
+          /* @__PURE__ */ jsx(IconSection, { icon }),
+          /* @__PURE__ */ jsxs("div", { className: content, children: [
+            /* @__PURE__ */ jsx(
+              HeaderSection,
+              {
+                headline,
                 headingLevel,
-                {
-                  ref: headingRef,
-                  className: `${title({ variant })}`
-                },
-                headline
-              ),
-              body && /* @__PURE__ */ jsx("div", { children: body })
-            ] }),
-            items && items?.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: clsx(list, "list_unstyled"), children: items?.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, variant, children: item.content }, item.id)) }) })
+                headingRef,
+                body,
+                variant
+              }
+            ),
+            /* @__PURE__ */ jsx(ItemsSection, { items, variant })
           ] })
         ] }),
-        callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
-          ({
-            id: id2,
-            variant: variant2,
-            displayText,
-            targetUrl,
-            type,
-            marketingIntersitial,
-            newTab,
-            ...rest
-          }) => type === "Button" ? rest.as == "button" ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              targetUrl,
-              color: getVariant(variant2),
-              size: "medium",
-              rounded: "medium",
-              marketingIntersitial,
-              newTab,
-              as: "button",
-              type: "button",
-              action: rest?.onClick,
-              children: displayText
-            },
-            id2
-          ) : /* @__PURE__ */ jsx(
-            Button,
-            {
-              targetUrl,
-              color: getVariant(variant2),
-              size: "medium",
-              rounded: "medium",
-              marketingIntersitial,
-              newTab,
-              children: displayText
-            },
-            id2
-          ) : /* @__PURE__ */ jsx(
-            Chevron,
-            {
-              targetUrl,
-              variant: getVariant(variant2),
-              marketingIntersitial,
-              newTab,
-              children: displayText
-            },
-            id2
-          )
-        ) })
+        /* @__PURE__ */ jsx(CallToActionSection, { callToActionRow })
       ]
     }
   );
 };
 export {
-  Icon,
   IconBillboard
 };