@axos-web-dev/shared-components 0.0.85 → 0.0.87

package/dist/Calculators/Calculator.js

@@ -63,6 +63,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 /* empty css                                                      */
@@ -159,42 +160,39 @@ const Calculator = (props) => {
       }
     );
   } else
-    return /* @__PURE__ */ jsxs("section", { id, children: [
-      /* @__PURE__ */ jsx("h1", { children: "Iframe Calculator" }),
-      /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: clsx(
-                "header_2 text_center",
-                calculator_headline({ variant })
-              ),
-              children: headline
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: bodyCopy })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "calc section-narrow", children: /* @__PURE__ */ jsx(
-          "iframe",
+    return /* @__PURE__ */ jsx("section", { id, children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+        /* @__PURE__ */ jsx(
+          "h2",
           {
-            ref,
-            style: {
-              width: "100%",
-              maxWidth: "100%",
-              minHeight: "clamp(1100px, 200vh)"
-            },
-            scrolling: "no",
-            frameBorder: "0",
-            className: "iframe-calculator",
-            allow: "from",
-            src: iframe?.src
+            className: clsx(
+              "header_2 text_center",
+              calculator_headline({ variant })
+            ),
+            children: headline
           }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: disclosure })
-      ] })
-    ] });
+        ),
+        /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: bodyCopy })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "calc section-narrow", children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref,
+          style: {
+            width: "100%",
+            maxWidth: "100%",
+            minHeight: "clamp(1100px, 200vh)"
+          },
+          scrolling: "no",
+          frameBorder: "0",
+          className: "iframe-calculator",
+          allow: "from",
+          src: iframe?.src
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: disclosure })
+    ] }) });
 };
 export {
   Calculator

package/dist/Carousel/index.js

@@ -64,6 +64,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */

package/dist/Chevron/index.js

@@ -64,6 +64,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import { chevron_wrapper, chevron } from "./Chevron.css.js";
 /* empty css                                */

package/dist/Comparison/Comparison.js

@@ -62,6 +62,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */

package/dist/Comparison/ComparisonSet.js

@@ -62,6 +62,7 @@ import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import { SetContainer } from "../SetContainer/SetContainer.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */

package/dist/FaqAccordion/index.js

@@ -30,7 +30,6 @@ const AccordionItem = (props) => {
   const isOpen = useAccordion((state) => state.itemsOpened);
   const toggle = (event) => {
     event.stopPropagation();
-    event.preventDefault();
     const ev = event.target;
     let evClasses = ev.getAttribute("class");
     if (!evClasses) {
@@ -39,6 +38,7 @@ const AccordionItem = (props) => {
     if (!evClasses?.includes(summary) !== (evClasses?.includes(summaryHeader) || evClasses?.includes(icon))) {
       return;
     }
+    event.preventDefault();
     if (!isOpen.includes(props.id)) {
       addItem(props.id);
     } else {

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -62,6 +62,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 import { footer_section, footer_wrapper, ft_col, ft_col_header, ft_col_subheader, nested_grid, app_col, footer_mobile, ft_panel_group, ft_panel } from "./FooterSiteMap.css.js";
 import "../../ImageBillboard/ImageBillboard.css.js";
+import "../../Interstitial/Interstitial-variants.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                   */
 /* empty css                                                         */

package/dist/Forms/ContactUsBusiness.js

@@ -66,6 +66,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";

package/dist/Forms/ContactUsNMLSId.js

@@ -66,6 +66,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";

package/dist/Forms/EmailOnly.js

@@ -67,6 +67,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";

package/dist/Forms/SuccesForm.js

@@ -61,6 +61,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 /* empty css                                                      */

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

@@ -21,6 +21,7 @@ export declare const hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
 }>;
 export declare const hero_content: string;
 export declare const reversed: string;
+export declare const reversed_lg_image: string;
 export declare const hero_text: string;
 export declare const hero_wrapper: string;
 export declare const hero_img: string;

package/dist/HeroBanner/HeroBanner.css.js

@@ -8,12 +8,13 @@ var logout = "_1ye8k3f0";
 var hero_banner = createRuntimeFn({ defaultClassName: "_1ye8k3f1", variantClassNames: { variant: { primary: "_1ye8k3f2", secondary: "_1ye8k3f3", tertiary: "_1ye8k3f4", quaternary: "_1ye8k3f5" } }, defaultVariants: {}, compoundVariants: [] });
 var hero_content = "_1ye8k3f6";
 var reversed = "_1ye8k3f7";
-var hero_text = "_1ye8k3f8";
-var hero_wrapper = "_1ye8k3f9";
-var hero_img = "_1ye8k3fa";
-var heroSupertag = createRuntimeFn({ defaultClassName: "_1ye8k3fb", variantClassNames: { variant: { primary: "_1ye8k3fc", secondary: "_1ye8k3fd", tertiary: "_1ye8k3fe", quaternary: "_1ye8k3ff" } }, defaultVariants: {}, compoundVariants: [] });
-var headline_text = createRuntimeFn({ defaultClassName: "_1ye8k3fg", variantClassNames: { variant: { primary: "_1ye8k3fh", secondary: "_1ye8k3fi", tertiary: "_1ye8k3fj", quaternary: "_1ye8k3fk" } }, defaultVariants: {}, compoundVariants: [] });
-var hero_btns = "_1ye8k3fl";
+var reversed_lg_image = "_1ye8k3f8";
+var hero_text = "_1ye8k3f9";
+var hero_wrapper = "_1ye8k3fa";
+var hero_img = "_1ye8k3fb";
+var heroSupertag = createRuntimeFn({ defaultClassName: "_1ye8k3fc", variantClassNames: { variant: { primary: "_1ye8k3fd", secondary: "_1ye8k3fe", tertiary: "_1ye8k3ff", quaternary: "_1ye8k3fg" } }, defaultVariants: {}, compoundVariants: [] });
+var headline_text = createRuntimeFn({ defaultClassName: "_1ye8k3fh", variantClassNames: { variant: { primary: "_1ye8k3fi", secondary: "_1ye8k3fj", tertiary: "_1ye8k3fk", quaternary: "_1ye8k3fl" } }, defaultVariants: {}, compoundVariants: [] });
+var hero_btns = "_1ye8k3fm";
 export {
   headline_text,
   heroSupertag,
@@ -24,5 +25,6 @@ export {
   hero_text,
   hero_wrapper,
   logout,
-  reversed
+  reversed,
+  reversed_lg_image
 };

package/dist/HeroBanner/HeroBanner.js

@@ -6,7 +6,7 @@ import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
-import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
+import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, heroSupertag, headline_text, hero_btns, hero_img, 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, selection_section_icon_img, selection_section, selection_section_bg, selection_section_content, selection_headline_text } from "./SelectionBanner.css.js";
 const HeroBanner = ({
@@ -200,71 +200,84 @@ const HeroBanner = ({
     {
       className: lg_hero_banner({ variant: getVariant(variant) }),
       id: `id_${id}`,
-      children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs("div", { className: `${lg_hero_content} flex between middle`, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${lg_hero_text({ variant: getVariant(variant) })} rounded`,
-            children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
-              eyebrow && /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: lg_hero_eyebrow({
-                    variant: getVariant(variant)
-                  }),
-                  children: eyebrow
-                }
-              ),
-              eyebrow ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: lg_headline_text({
-                    variant: getVariant(variant)
-                  }),
-                  children: headline
-                }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: headline_text({
-                    variant: getVariant(variant)
-                  }),
-                  children: headline
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "push_up", children: /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }) }),
-              callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
-                ({
-                  id: id2,
-                  variant: variant2,
-                  displayText,
-                  targetUrl,
-                  type
-                }) => type === "Button" ? /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    targetUrl,
-                    color: getVariant(variant2),
-                    size: "large",
-                    rounded: "medium",
-                    children: displayText
-                  },
-                  id2
-                ) : /* @__PURE__ */ jsx(
-                  Chevron,
-                  {
-                    targetUrl,
-                    variant: getVariant(variant2),
-                    children: displayText
-                  },
-                  id2
-                )
-              ) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { role: "presentation", className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${lg_hero_img} rounded`, role: "presentation", children: /* @__PURE__ */ jsx("img", { alt: "", className: lg_hero_sizing, src: image?.src }) }) })
-      ] }) })
+      children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${lg_hero_content} ${imagePlacement !== "Right" ? reversed : ""} flex between middle `,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${lg_hero_text({ variant: getVariant(variant) })} rounded`,
+                children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
+                  eyebrow && /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: lg_hero_eyebrow({
+                        variant: getVariant(variant)
+                      }),
+                      children: eyebrow
+                    }
+                  ),
+                  eyebrow ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: lg_headline_text({
+                        variant: getVariant(variant)
+                      }),
+                      children: headline
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: headline_text({
+                        variant: getVariant(variant)
+                      }),
+                      children: headline
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "push_up", children: /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }) }),
+                  callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
+                    ({
+                      id: id2,
+                      variant: variant2,
+                      displayText,
+                      targetUrl,
+                      type
+                    }) => type === "Button" ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        targetUrl,
+                        color: getVariant(variant2),
+                        size: "large",
+                        rounded: "medium",
+                        children: displayText
+                      },
+                      id2
+                    ) : /* @__PURE__ */ jsx(
+                      Chevron,
+                      {
+                        targetUrl,
+                        variant: getVariant(variant2),
+                        children: displayText
+                      },
+                      id2
+                    )
+                  ) })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${lg_hero_img} ${imagePlacement !== "Right" ? reversed_lg_image : ""} rounded`,
+                role: "presentation",
+                children: /* @__PURE__ */ jsx("img", { alt: "", className: lg_hero_sizing, src: image?.src })
+              }
+            )
+          ]
+        }
+      ) })
     }
   ) });
 };

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_img, hero_text, hero_wrapper, logout, reversed } from "./HeroBanner.css.js";
+import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_img, hero_text, hero_wrapper, 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,
@@ -13,6 +13,7 @@ export {
   hero_wrapper,
   logout,
   reversed,
+  reversed_lg_image,
   selection_headline_text,
   selection_section,
   selection_section_bg,

package/dist/Hyperlink/index.js

@@ -64,6 +64,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 /* empty css                                                      */

package/dist/ImageLink/ImageLink.js

@@ -59,6 +59,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */

package/dist/ImageLink/ImageLinkSet.js

@@ -64,6 +64,7 @@ import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import ImageLink from "./ImageLink.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */

package/dist/ImageLink/index.js

@@ -62,6 +62,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
 import { ImageLinkSet } from "./ImageLinkSet.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                */
 /* empty css                                                      */

package/dist/Interstitial/Interstitial-variants.css.d.ts

@@ -0,0 +1,10 @@
+export declare const int_headline: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;

package/dist/Interstitial/Interstitial-variants.css.js

@@ -0,0 +1,9 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                                         */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var int_headline = createRuntimeFn({ defaultClassName: "ep91dm0", variantClassNames: { variant: { primary: "ep91dm1", secondary: "ep91dm2" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  int_headline
+};

package/dist/Interstitial/Interstitial.d.ts

@@ -0,0 +1,16 @@
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { ImageInterface } from '../IconBillboard';
+import { SecondaryTypes } from '../utils/variant.types';
+import { FC, ReactNode } from 'react';
+
+export interface interstitialProps {
+    id: string;
+    variant?: SecondaryTypes;
+    image?: ImageInterface;
+    callToActionRow?: boolean | ChevronProps[];
+    headline?: string | ReactNode;
+    bodyCopy?: string | ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+}
+export declare const Modal: FC<interstitialProps>;

package/dist/Interstitial/Interstitial.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import { Chevron } from "../Chevron/index.js";
+import { getVariant } from "../utils/getVariant.js";
+import { int_headline } from "./Interstitial-variants.css.js";
+import css from "./Interstitial.module.js";
+const Modal = ({
+  id,
+  image,
+  headline,
+  bodyCopy,
+  variant: fullVariant = "primary",
+  callToActionRow,
+  isOpen,
+  onClose
+}) => {
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${css.overlay} ${isOpen ? "active" : ""}`,
+      id: `modal_${id}`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: `modal_${id}`,
+          className: `${css.modal} ${isOpen ? "active" : ""}`,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: css.close_button,
+                onClick: onClose,
+                "aria-label": "Close modal",
+                children: "×"
+              }
+            ),
+            image && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: css.img_area,
+                style: { backgroundImage: `url(${image?.src})` },
+                children: " "
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: `${css.modal_content} text_center`, children: [
+              headline && /* @__PURE__ */ jsx("h2", { className: `header_3 ${int_headline({ variant })}`, children: headline }),
+              bodyCopy && /* @__PURE__ */ jsx("div", { className: css.body_copy, children: bodyCopy }),
+              Array.isArray(callToActionRow) && callToActionRow?.length > 0 && /* @__PURE__ */ jsx("div", { className: css.btns, children: callToActionRow.map(
+                ({
+                  id: id2,
+                  variant: variant2,
+                  displayText,
+                  targetUrl,
+                  type
+                }) => type === "Button" ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    targetUrl,
+                    color: getVariant(variant2),
+                    size: "large",
+                    rounded: "medium",
+                    children: displayText
+                  },
+                  id2
+                ) : /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    targetUrl,
+                    variant: getVariant(variant2),
+                    children: displayText
+                  },
+                  id2
+                )
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Modal
+};

package/dist/Interstitial/Interstitial.module.js

@@ -0,0 +1,32 @@
+const overlay = "_overlay_1euix_24";
+const modal = "_modal_1euix_40";
+const vanish = "_vanish_1euix_1";
+const appear = "_appear_1euix_1";
+const close_button = "_close_button_1euix_55";
+const modal_content = "_modal_content_1euix_70";
+const img_area = "_img_area_1euix_74";
+const body_copy = "_body_copy_1euix_84";
+const btns = "_btns_1euix_98";
+const css = {
+  overlay,
+  modal,
+  vanish,
+  appear,
+  close_button,
+  modal_content,
+  img_area,
+  body_copy,
+  btns
+};
+export {
+  appear,
+  body_copy,
+  btns,
+  close_button,
+  css as default,
+  img_area,
+  modal,
+  modal_content,
+  overlay,
+  vanish
+};

package/dist/Interstitial/index.d.ts

@@ -0,0 +1 @@
+export declare const Interstitial: () => import("react/jsx-runtime").JSX.Element;

package/dist/Interstitial/index.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Modal } from "./Interstitial.js";
+const Interstitial = () => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const openModal = (id) => {
+    setModalOpen((prev) => ({ ...prev, id }));
+  };
+  const closeModal = () => setModalOpen(false);
+  useEffect(() => {
+    const links = document.querySelectorAll('[href^="#modal_"]');
+    links.forEach((link) => {
+      const dataId = link.getAttribute("href").substring(1);
+      link.addEventListener("click", () => openModal(dataId));
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(Modal, { id: "test-intersitial", isOpen: isModalOpen, onClose: closeModal });
+};
+export {
+  Interstitial
+};

package/dist/Modal/Modal.js

@@ -61,6 +61,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "./contextApi/store.js";
 /* empty css                                                      */