@axos-web-dev/shared-components 1.0.8 → 1.0.9-9.dev.1

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
+};

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -1,21 +1,21 @@
 export declare const billboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
             border: "1px solid #D4D4D4";
         };
         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})`;
         };
     };
 }>;
@@ -61,12 +61,12 @@ export declare const supertag: 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;
@@ -78,12 +78,12 @@ export declare const supertag: 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;
@@ -92,10 +92,10 @@ export declare const supertag: 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})`;
         };
     };
 }>;
@@ -105,12 +105,12 @@ export declare const header: 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;
@@ -122,12 +122,12 @@ export declare const header: 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;
@@ -136,15 +136,16 @@ export declare const header: 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 billboard_container: string;
 export declare const billboard_img: string;
+export declare const is_bg_img: string;
 export declare const billboard_body: string;
 export declare const billboard_header_section: string;
 export declare const billboard_ctas: string;
@@ -156,6 +157,8 @@ export declare const section_text_ImageBillboard: string;
 export declare const billboard_image: string;
 export declare const mh_330: string;
 export declare const image_background: string;
+export declare const image_inner_wrapper: string;
+export declare const image_based: string;
 export declare const rate_container: string;
 export declare const rate_pad: string;
 export declare const up_to: string;
@@ -163,3 +166,16 @@ export declare const rate_billboard: string;
 export declare const apy_billboard: string;
 export declare const body_copy: string;
 export declare const sub_bullets: string;
+export declare const top_left: string;
+export declare const top_center: string;
+export declare const top_right: string;
+export declare const center_left: string;
+export declare const center_right: string;
+export declare const center_center: string;
+export declare const bottom_left: string;
+export declare const bottom_right: string;
+export declare const bottom_center: string;
+export declare const remove_padding: string;
+export declare const exit_intent_backdrop: string;
+export declare const exit_intent: string;
+export declare const modal_close_button: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -11,24 +11,40 @@ var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames
 var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
 var billboard_container = "_1m7m2ai";
 var billboard_img = "_1m7m2aj";
-var billboard_body = "_1m7m2ak";
-var billboard_header_section = "_1m7m2al";
-var billboard_ctas = "_1m7m2am";
-var body = "_1m7m2an";
-var single_container = "_1m7m2ao";
-var two_inline = "_1m7m2ap";
-var three_inline = "_1m7m2aq";
-var section_text_ImageBillboard = "_1m7m2ar";
-var billboard_image = "_1m7m2as";
-var mh_330 = "_1m7m2at";
-var image_background = "_1m7m2au";
-var rate_container = "_1m7m2av";
-var rate_pad = "_1m7m2aw";
-var up_to = "_1m7m2ax";
-var rate_billboard = "_1m7m2ay";
-var apy_billboard = "_1m7m2az";
-var body_copy = "_1m7m2a10";
-var sub_bullets = "_1m7m2a11";
+var is_bg_img = "_1m7m2ak";
+var billboard_body = "_1m7m2al";
+var billboard_header_section = "_1m7m2am";
+var billboard_ctas = "_1m7m2an";
+var body = "_1m7m2ao";
+var single_container = "_1m7m2ap";
+var two_inline = "_1m7m2aq";
+var three_inline = "_1m7m2ar";
+var section_text_ImageBillboard = "_1m7m2as";
+var billboard_image = "_1m7m2at";
+var mh_330 = "_1m7m2au";
+var image_background = "_1m7m2av";
+var image_inner_wrapper = "_1m7m2aw";
+var image_based = "_1m7m2ax";
+var rate_container = "_1m7m2ay";
+var rate_pad = "_1m7m2az";
+var up_to = "_1m7m2a10";
+var rate_billboard = "_1m7m2a11";
+var apy_billboard = "_1m7m2a12";
+var body_copy = "_1m7m2a13";
+var sub_bullets = "_1m7m2a14";
+var top_left = "_1m7m2a15";
+var top_center = "_1m7m2a16";
+var top_right = "_1m7m2a17";
+var center_left = "_1m7m2a18";
+var center_right = "_1m7m2a19";
+var center_center = "_1m7m2a1a";
+var bottom_left = "_1m7m2a1b";
+var bottom_right = "_1m7m2a1c";
+var bottom_center = "_1m7m2a1d";
+var remove_padding = "_1m7m2a1e";
+var exit_intent_backdrop = "_1m7m2a1f";
+var exit_intent = "_1m7m2a1g";
+var modal_close_button = "_1m7m2a1h";
 export {
   apy_billboard,
   billboard,
@@ -40,18 +56,34 @@ export {
   billboard_img,
   body,
   body_copy,
+  bottom_center,
+  bottom_left,
+  bottom_right,
+  center_center,
+  center_left,
+  center_right,
+  exit_intent,
+  exit_intent_backdrop,
   header,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
+  is_bg_img,
   mh_330,
+  modal_close_button,
   rate_billboard,
   rate_container,
   rate_pad,
+  remove_padding,
   section_text_ImageBillboard,
   single_container,
   sub_bullets,
   supertag,
   three_inline,
+  top_center,
+  top_left,
+  top_right,
   two_inline,
   up_to
 };

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -1,6 +1,5 @@
 import { BulletItemProps } from '../BulletItem';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ImageInterface } from '../IconBillboard';
 import { QuaternaryTypes } from '../utils/variant.types';
 import { ReactNode } from 'react';
 
@@ -13,6 +12,22 @@ export interface ImageBillboardSetProps {
     variant: QuaternaryTypes;
     set?: boolean;
     bordered?: boolean;
+    layout?: "Inline" | "Stacked";
+}
+export interface BillboardImageInterface {
+    src: string;
+    alt?: string;
+    imageType?: "Image" | "Background Image";
+    imageAlignment?: string;
+    imageBackgroundColor?: string;
+    height?: string | number;
+    width?: string | number;
+}
+export interface BillboardVideoInterface {
+    videoId: string;
+    videoPlayer: string;
+    thubnailImage: string;
+    transcript?: string;
 }
 export interface ImageBillboardInterface {
     id: string;
@@ -24,11 +39,14 @@ export interface ImageBillboardInterface {
     variant: QuaternaryTypes;
     eyebrow: string | ReactNode;
     bullets: BulletItemProps[];
-    image?: ImageInterface;
+    image?: BillboardImageInterface;
+    video?: BillboardVideoInterface;
     callToActionRow: ChevronProps[];
     set?: boolean;
     textImageLineOneSmall?: ReactNode | string;
     textImageLineTwoBig?: ReactNode | string;
     textImageLineThreeSmall?: ReactNode | string;
     internalName?: string;
+    exitIntent?: boolean;
+    layout?: ImageBillboardSetProps["layout"];
 }

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -1,3 +1,3 @@
 import { ImageBillboardInterface } from './ImageBillboard.interface';
 
-export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, set, textImageLineOneSmall, textImageLineTwoBig, textImageLineThreeSmall, internalName, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBillboard: ({ id, bodyCopy, bordered, bullets, callToActionRow, exitIntent, eyebrow, headline, image, video, imagePlacement: position, internalName, set, textImageLineOneSmall, textImageLineThreeSmall, textImageLineTwoBig, variant, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;