@axos-web-dev/shared-components 1.0.5 → 1.0.7-7.1

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

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

package/dist/Hyperlink/index.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import "../Chevron/Chevron.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.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/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/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/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/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                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
 import clsx from "clsx";
 import "react";
-import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../IconBillboard/IconBillboard.css.js";
@@ -20,8 +20,6 @@ import { validateLink } from "../utils/validateExternalLinks.js";
 /* empty css                                          */
 /* empty css                                          */
 import "../Interstitial/Interstitial-variants.css.js";
-/* empty css                                */
-import { useGlobalContext } from "../Modal/contextApi/store.js";
 import "../Button/Button.css.js";
 import "react-use";
 import "../ArticlesSet/ArticlesSet.css.js";
@@ -57,6 +55,12 @@ 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                                */
+import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */
@@ -77,6 +81,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                          */
 /* empty css                                                         */
+/* empty css                                            */
 import "../ImageBillboard/ImageBillboard.css.js";
 /* empty css                                        */
 /* empty css                                              */
@@ -89,9 +94,10 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                              */
 /* empty css                                                                 */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
 /* empty css                                                   */
 import "../NavigationMenu/AxosBank/NavData.js";
-import "next/link.js";
 /* empty css                                                      */
 /* empty css                                                       */
 import "../NavigationMenu/AxosALTS/NavData.js";
@@ -107,11 +113,14 @@ import "react-slick";
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                        */
+/* empty css                                */
 /* empty css                                                  */
 /* empty css                                                */
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+/* empty css                                */
+import { useGlobalContext } from "../Modal/contextApi/store.js";
 import { hyperlink } from "./Hyperlink.css.js";
 const Hyperlink = ({
   children,

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

@@ -3,21 +3,21 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const containerIconBillboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             border: "1px solid #D4D4D4";
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -29,6 +29,7 @@ export declare const layout: import('@vanilla-extract/recipes').RuntimeFn<{
     };
 }>;
 export declare const billboard_icon: string;
+export declare const content: string;
 export declare const headerIconBillboard: string;
 export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
@@ -36,12 +37,12 @@ export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -53,12 +54,12 @@ export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -67,14 +68,13 @@ export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
-export declare const content: string;
 export declare const list: string;
 export declare const listItem: string;
 export declare const buttons: string;
@@ -82,22 +82,22 @@ export declare const section_text: string;
 export declare const header_section: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             backgroundClip: "text";
             WebkitTextFillColor: "transparent";
             textShadow: "0px 0px #00000000";
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             backgroundClip: "text";
             WebkitTextFillColor: "transparent";
             textShadow: "0px 0px #00000000";
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -105,19 +105,19 @@ export declare const section_container: string;
 export declare const section_body: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             border: "1px solid #D4D4D4";
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;

package/dist/IconBillboard/IconBillboard.css.js

@@ -7,9 +7,9 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerIconBillboard = createRuntimeFn({ defaultClassName: "_1r4ovbu0", variantClassNames: { variant: { primary: "_1r4ovbu1", secondary: "_1r4ovbu2", tertiary: "_1r4ovbu3", quaternary: "_1r4ovbu4" } }, defaultVariants: {}, compoundVariants: [] });
 var layout = createRuntimeFn({ defaultClassName: "_1r4ovbu5", variantClassNames: { side: { true: "_1r4ovbu6" } }, defaultVariants: {}, compoundVariants: [] });
 var billboard_icon = "_1r4ovbu7";
-var headerIconBillboard = "_1r4ovbu8";
-var title = createRuntimeFn({ defaultClassName: "_1r4ovbu9", variantClassNames: { variant: { primary: "_1r4ovbua", secondary: "_1r4ovbub", tertiary: "_1r4ovbuc", quaternary: "_1r4ovbud" } }, defaultVariants: {}, compoundVariants: [] });
-var content = "_1r4ovbue";
+var content = "_1r4ovbu8";
+var headerIconBillboard = "_1r4ovbu9";
+var title = createRuntimeFn({ defaultClassName: "_1r4ovbua", variantClassNames: { variant: { primary: "_1r4ovbub", secondary: "_1r4ovbuc", tertiary: "_1r4ovbud", quaternary: "_1r4ovbue" } }, defaultVariants: {}, compoundVariants: [] });
 var list = "_1r4ovbuf";
 var listItem = "_1r4ovbug";
 var buttons = "_1r4ovbuh";

package/dist/IconBillboard/IconBillboard.interface.d.ts

@@ -12,6 +12,7 @@ export interface IconBillboardSet {
     additionalDetails: ReactNode | string;
     side: boolean;
     set?: boolean;
+    numberOfColumns?: string;
 }
 export interface IconBillboardProps {
     id?: string;
@@ -25,4 +26,6 @@ export interface IconBillboardProps {
 export interface ImageInterface {
     src: string;
     alt?: string;
+    height?: string | number;
+    width?: string | number;
 }

package/dist/IconBillboard/IconBillboard.js

@@ -1,11 +1,12 @@
+"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 clsx from "clsx";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
-import "react";
 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 });
@@ -22,22 +23,51 @@ const IconBillboard = (props) => {
     id
   } = props;
   const variant = getVariant(fullVariant);
+  const headingRef = useRef(null);
+  const [headingLevel, setHeadingLevel] = useState("h2");
+  useEffect(() => {
+    if (headingRef.current) {
+      const section = headingRef.current.closest(".section_spacer");
+      if (section) {
+        const existingH2 = section.querySelector("h2._1r4ovbuj");
+        if (existingH2) {
+          setHeadingLevel("h3");
+        }
+      }
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
         containerIconBillboard({ variant }),
-        "billboard",
-        `${set ? "" : "containment"}`
+        `${set ? "" : "containment"}`,
+        "billboard rounded flex_col gap_24 is_icon"
       ),
       id,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: `middle ${layout({ side })}`, children: [
-          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children: /* @__PURE__ */ jsx("img", { src: icon?.src, className: "img_fluid", alt: icon?.alt ?? "" }) }),
+        /* @__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: [
-              /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
-              /* @__PURE__ */ jsx("div", { children: body })
+              headline && createElement(
+                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)) }) })
           ] })

package/dist/IconBillboard/IconBillboardSet.js

@@ -22,7 +22,7 @@ const IconBillboardSet = ({
       headline && /* @__PURE__ */ jsx(
         "h2",
         {
-          className: `header_2 ${header_section({ variant: billboard_variant })}`,
+          className: `header_1 ${header_section({ variant: billboard_variant })}`,
           children: headline
         }
       ),

package/dist/ImageBillboard/ExitIntentModal/ModalWrapper.d.ts

@@ -0,0 +1,9 @@
+import { default as React, ReactNode } from 'react';
+
+interface ModalWrapperProps {
+    children: ReactNode;
+    onClose: () => void;
+    modalRef: React.RefObject<HTMLDivElement>;
+}
+export declare const ModalWrapper: ({ children, onClose, modalRef, }: ModalWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ImageBillboard/ExitIntentModal/ModalWrapper.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { exit_intent_backdrop, exit_intent, modal_close_button } from "../ImageBillboard.css.js";
+const ModalWrapper = ({
+  children,
+  onClose,
+  modalRef
+}) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+  useEffect(() => {
+    const focusableSelectors = [
+      "a[href]",
+      "button:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ];
+    const trapFocus = (e) => {
+      if (e.key !== "Tab") return;
+      const focusableEls = modalRef.current?.querySelectorAll(
+        focusableSelectors.join(",")
+      );
+      if (!focusableEls || focusableEls.length === 0) return;
+      const first = focusableEls[0];
+      const last = focusableEls[focusableEls.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    const focusFirst = () => {
+      const focusableEls = modalRef.current?.querySelectorAll(
+        focusableSelectors.join(",")
+      );
+      focusableEls?.[0]?.focus();
+    };
+    focusFirst();
+    document.addEventListener("keydown", trapFocus);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", trapFocus);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [modalRef]);
+  const handleEscape = (e) => {
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: exit_intent_backdrop, role: "presentation", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: exit_intent,
+      ref: modalRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "exit-intent-heading",
+      "aria-describedby": "exit-intent-description",
+      children: /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close modal",
+            className: modal_close_button,
+            onClick: onClose,
+            children: "X"
+          }
+        ),
+        children
+      ] })
+    }
+  ) });
+};
+export {
+  ModalWrapper
+};

package/dist/ImageBillboard/ExitIntentModal/useExitIntentModal.d.ts

@@ -0,0 +1,5 @@
+export declare const useExitIntentModal: (enabled: boolean) => {
+    isVisible: boolean;
+    close: () => void;
+    modalRef: import('react').MutableRefObject<HTMLDivElement | null>;
+};

package/dist/ImageBillboard/ExitIntentModal/useExitIntentModal.js

@@ -0,0 +1,90 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+const useExitIntentModal = (enabled) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const modalRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const STORAGE_KEY = "exitIntentShown";
+    const sessionExpiry = 24 * 60 * 60 * 1e3;
+    const hasShown = () => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) return false;
+      const { timestamp } = JSON.parse(stored);
+      return Date.now() - timestamp < sessionExpiry;
+    };
+    const markShown = () => {
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({ timestamp: Date.now() })
+      );
+    };
+    const showBanner = () => {
+      if (!hasShown()) {
+        setIsVisible(true);
+        markShown();
+      }
+    };
+    const handleMouseLeave = (e) => {
+      if (e.clientY <= 0) showBanner();
+    };
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      const maxScroll = document.body.scrollHeight - window.innerHeight;
+      const percentScrolled = scrollY / maxScroll * 100;
+      if (percentScrolled > 60) {
+        window.addEventListener("scroll", detectScrollUp);
+      }
+    };
+    const detectScrollUp = () => {
+      if (window.scrollY < window.innerHeight * 0.25) {
+        showBanner();
+        window.removeEventListener("scroll", detectScrollUp);
+      }
+    };
+    let inactivityTimer;
+    const resetInactivity = () => {
+      clearTimeout(inactivityTimer);
+      inactivityTimer = setTimeout(() => {
+        showBanner();
+      }, 15e3);
+    };
+    const startListeners = () => {
+      document.addEventListener("mouseleave", handleMouseLeave);
+      window.addEventListener("scroll", handleScroll);
+      document.addEventListener("mousemove", resetInactivity);
+      document.addEventListener("keydown", resetInactivity);
+    };
+    const initTimeout = setTimeout(startListeners, 1e4);
+    resetInactivity();
+    return () => {
+      clearTimeout(initTimeout);
+      clearTimeout(inactivityTimer);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      window.removeEventListener("scroll", handleScroll);
+      document.removeEventListener("mousemove", resetInactivity);
+      document.removeEventListener("keydown", resetInactivity);
+      window.removeEventListener("scroll", detectScrollUp);
+    };
+  }, [enabled]);
+  useEffect(() => {
+    if (!isVisible) return;
+    const handleClickOutside = (e) => {
+      if (modalRef.current && !modalRef.current.contains(e.target)) {
+        setIsVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isVisible]);
+  return {
+    isVisible,
+    close: () => setIsVisible(false),
+    modalRef
+  };
+};
+export {
+  useExitIntentModal
+};