@axos-web-dev/shared-components 1.0.77-patch.7 → 1.0.77-patch.8

package/dist/Blockquote/Blockquote.module.js

@@ -1,6 +1,6 @@
-import '../assets/Blockquote/Blockquote.css.css';const quote_spacer = "_quote_spacer_1r8g1_1";
-const author = "_author_1r8g1_13";
-const quote = "_quote_1r8g1_1";
+import '../assets/Blockquote/Blockquote.css.css';const quote_spacer = "_quote_spacer_1mzku_1";
+const author = "_author_1mzku_7";
+const quote = "_quote_1mzku_1";
 const css = {
   quote_spacer,
   author,

package/dist/Calculators/ApyCalculator/index.js

@@ -18,7 +18,7 @@ const ApyCalculator = ({
   const calculator_variant = getVariant(variant);
   const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
   const [initialDeposit, setInititalDeposit] = useState(1e3);
-  const [APR, setAPR] = useState(AXOS_ONE_APY - 0.11);
+  const [APR, setAPR] = useState(AXOS_ONE_APY - 0.1);
   const [APY, setAPY] = useState(AXOS_ONE_APY);
   const [months, setMonths] = useState(12);
   const [compounding, setCompounding] = useState(360);

package/dist/Carousel/index.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
 import React, { useEffect, Children, cloneElement } from "react";
+import { getVariant } from "../utils/getVariant.js";
 import { section_text } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-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/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty 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/Modal/Modal.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                                                    */
@@ -13,23 +15,16 @@ import SvgQuoteIconGrey from "../icons/QuoteIconGrey.js";
 import SvgQuoteIconWhite from "../icons/QuoteIconWhite.js";
 import SvgQuoteIconYellow from "../icons/QuoteIconYellow.js";
 import "../utils/allowedAxosDomains.js";
-import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
 /* empty css                                          */
 /* empty css                                          */
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
-import "../Interstitial/Interstitial-variants.css.js";
-import "../Chevron/Chevron.css.js";
-/* empty css                                */
-import "../Modal/contextApi/store.js";
-import "../Button/Button.css.js";
-import "react-use";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import "../Button/Button.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
 import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
@@ -52,8 +47,13 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
+import "react-use";
+import "../Chevron/Chevron.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../Inputs/Input.css.js";
 /* empty css                                                         */
+/* empty css                                */
+import "../Modal/contextApi/store.js";
 import "../Hyperlink/Hyperlink.css.js";
 /* empty css                                                      */
 import "iframe-resizer";

package/dist/Comparison/Comparison.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
 import "react";
-import { BulletItem } from "../BulletItem/BulletItem.js";
-import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
+import { title } from "../IconBillboard/IconBillboard.css.js";
+import { BulletItem } from "../BulletItem/BulletItem.js";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react-use";
-import { title } from "../IconBillboard/IconBillboard.css.js";
+import { Chevron } from "../Chevron/index.js";
 import SvgStarIcon from "../icons/Star/index.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";

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

@@ -73,3 +73,5 @@ export declare const headline_text: import('@vanilla-extract/recipes').RuntimeFn
 }>;
 export declare const hero_btns: string;
 export declare const hero_embedded_image: string;
+export declare const hero_sub_bullets: string;
+export declare const hero_bullet_item: string;

package/dist/HeroBanner/HeroBanner.css.js

@@ -18,14 +18,18 @@ var heroSupertag = createRuntimeFn({ defaultClassName: "_1ye8k3fd", variantClass
 var headline_text = createRuntimeFn({ defaultClassName: "_1ye8k3fi", variantClassNames: { variant: { primary: "_1ye8k3fj", secondary: "_1ye8k3fk", tertiary: "_1ye8k3fl", quaternary: "_1ye8k3fm" } }, defaultVariants: {}, compoundVariants: [] });
 var hero_btns = "_1ye8k3fn";
 var hero_embedded_image = "_1ye8k3fo";
+var hero_sub_bullets = "_1ye8k3fp";
+var hero_bullet_item = "_1ye8k3fq";
 export {
   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,

package/dist/HeroBanner/HeroBanner.d.ts

@@ -1,3 +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;
+export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, bullets, subBodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, selection, isSelectionBanner, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { BulletItemProps } from '../BulletItem';
 import { ChevronProps } from '../Chevron/Chevron.interface';
 import { ReactNode } from 'react';
 
@@ -25,5 +26,7 @@ export interface HeroBannerInterface extends HeroBannerWithImage, HeroBannerWith
     eyebrow?: string | ReactNode;
     headline?: string | ReactNode;
     bodyCopy?: string | ReactNode;
+    bullets: BulletItemProps[];
+    subBodyCopy?: string | ReactNode;
     callToActionRow?: ChevronProps[];
 }

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,

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/IconBillboard/IconBillboard.css.d.ts

@@ -121,5 +121,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
 };

package/dist/IconBillboard/index.js

@@ -1,8 +1,7 @@
-import { Icon, IconBillboard } from "./IconBillboard.js";
-import { billboard_icon, buttons, containerIconBillboard, content, headerIconBillboard, header_section, layout, list, listItem, section_body, section_container, section_text, title } from "./IconBillboard.css.js";
+import { IconBillboard } from "./IconBillboard.js";
+import { billboard_icon, buttons, containerIconBillboard, content, headerIconBillboard, header_section, layout, link_wrapper, list, listItem, section_body, section_container, section_text, title } from "./IconBillboard.css.js";
 import { IconBillboardSet } from "./IconBillboardSet.js";
 export {
-  Icon,
   IconBillboard,
   IconBillboardSet,
   billboard_icon,
@@ -12,6 +11,7 @@ export {
   headerIconBillboard,
   header_section,
   layout,
+  link_wrapper,
   list,
   listItem,
   section_body,

package/dist/IconBillboard/sections/CallToActionSection.d.ts

@@ -0,0 +1,12 @@
+import { ChevronProps } from '../../Chevron/Chevron.interface';
+
+interface CallToActionSectionProps {
+    callToActionRow?: ChevronProps[];
+}
+export declare const useFullClick: (callToActionRow?: ChevronProps[]) => {
+    isClickable: boolean;
+    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    chevronText: string | undefined;
+};
+export declare const CallToActionSection: ({ callToActionRow, }: CallToActionSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/IconBillboard/sections/CallToActionSection.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../../Button/Button.js";
+import "../../Button/Button.css.js";
+import { useMemo } from "react";
+import "react-use";
+import { buttons } from "../IconBillboard.css.js";
+import { Chevron } from "../../Chevron/index.js";
+import { getVariant } from "../../utils/getVariant.js";
+const useFullClick = (callToActionRow) => {
+  return useMemo(() => {
+    let chevronCount = 0;
+    let buttonCount = 0;
+    let chevronUrl;
+    let chevronText;
+    if (callToActionRow && callToActionRow.length > 0) {
+      callToActionRow.forEach((cta) => {
+        if (cta.type === "Button") {
+          buttonCount++;
+        } else {
+          chevronCount++;
+          chevronUrl = cta.targetUrl;
+          chevronText = cta.displayText;
+        }
+      });
+    }
+    const isClickable = chevronCount === 1 && buttonCount === 0 && typeof chevronUrl === "string" && chevronUrl.length > 0;
+    const handleClick = (e) => {
+      if (!isClickable) return;
+      const linkEl = e.currentTarget.querySelector("a");
+      if (linkEl && linkEl instanceof HTMLAnchorElement) {
+        window.location.href = linkEl.href;
+      }
+    };
+    return {
+      isClickable,
+      handleClick,
+      chevronText
+    };
+  }, [callToActionRow]);
+};
+const CallToActionSection = ({
+  callToActionRow
+}) => {
+  if (!Array.isArray(callToActionRow) || callToActionRow.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
+    ({
+      id,
+      variant,
+      displayText,
+      targetUrl,
+      type,
+      marketingIntersitial,
+      newTab,
+      ...rest
+    }) => type === "Button" ? rest.as == "button" ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        targetUrl,
+        color: getVariant(variant),
+        size: "medium",
+        rounded: "medium",
+        marketingIntersitial,
+        newTab,
+        as: "button",
+        type: "button",
+        action: rest?.onClick,
+        children: displayText
+      },
+      id
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        targetUrl,
+        color: getVariant(variant),
+        size: "medium",
+        rounded: "medium",
+        marketingIntersitial,
+        newTab,
+        children: displayText
+      },
+      id
+    ) : /* @__PURE__ */ jsx(
+      Chevron,
+      {
+        targetUrl,
+        variant: getVariant(variant),
+        marketingIntersitial,
+        newTab,
+        children: displayText
+      },
+      id
+    )
+  ) });
+};
+export {
+  CallToActionSection,
+  useFullClick
+};

package/dist/IconBillboard/sections/HeaderSection.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref } from 'react';
+import { QuaternaryTypes } from '../../utils';
+
+export interface HeaderSectionProps {
+    body?: ReactNode | undefined;
+    headingLevel: "h2" | "h3";
+    headingRef: Ref<HTMLHeadingElement>;
+    headline?: ReactNode | undefined;
+    variant: QuaternaryTypes;
+}
+export declare const HeaderSection: ({ body, headingLevel, headingRef, headline, variant, }: HeaderSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/sections/HeaderSection.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { headerIconBillboard, title } from "../IconBillboard.css.js";
+const HeaderSection = ({
+  body,
+  headingLevel,
+  headingRef,
+  headline,
+  variant
+}) => /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+  headline && React.createElement(
+    headingLevel,
+    {
+      ref: headingRef,
+      className: `${title({ variant })}`
+    },
+    headline
+  ),
+  body && /* @__PURE__ */ jsx("div", { children: body })
+] });
+export {
+  HeaderSection
+};

package/dist/IconBillboard/sections/IconSection.d.ts

@@ -0,0 +1,7 @@
+import { ImageInterface } from '..';
+
+interface IconSectionProps {
+    icon?: ImageInterface;
+}
+export declare const IconSection: ({ icon }: IconSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/IconBillboard/sections/IconSection.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { billboard_icon } from "../IconBillboard.css.js";
+const IconSection = ({ icon }) => {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: icon?.src,
+      alt: icon?.alt ?? "",
+      className: "img_fluid",
+      height: icon?.height,
+      width: icon?.width
+    }
+  ) });
+};
+export {
+  IconSection
+};

package/dist/IconBillboard/sections/ItemsSection.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { QuaternaryTypes } from '../../utils';
+
+export interface ItemsSectionProps {
+    items?: {
+        id: string;
+        content: ReactNode;
+    }[];
+    variant: QuaternaryTypes;
+}
+export declare const ItemsSection: ({ items, variant }: ItemsSectionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/IconBillboard/sections/ItemsSection.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { list } from "../IconBillboard.css.js";
+import { BulletItem } from "../../BulletItem/BulletItem.js";
+const ItemsSection = ({ items, variant }) => {
+  if (!items || items.length === 0) return null;
+  return /* @__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)) }) });
+};
+export {
+  ItemsSection
+};