@axos-web-dev/shared-components 0.0.86 → 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                                                      */

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/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                                                      */

package/dist/NavigationMenu/AxosBank/SubNavBar.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                                       */

package/dist/SetContainer/SetContainer.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 "../Chevron/Chevron.css.js";
 /* empty css                                */

package/dist/Table/Table.css.d.ts

@@ -159,3 +159,4 @@ export declare const table: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const alternate_color_rows: string;
 export declare const apy_table: string;
 export declare const table_description_text: string;
+export declare const highlight_cell: string;

package/dist/Table/Table.css.js

@@ -17,12 +17,14 @@ var table = createRuntimeFn({ defaultClassName: "_1nivbwew", variantClassNames:
 var alternate_color_rows = "_1nivbwe11";
 var apy_table = "_1nivbwe12";
 var table_description_text = "_1nivbwe13 _1nivbwe3";
+var highlight_cell = "_1nivbwe14";
 export {
   alternate_color_rows,
   apy_table,
   bodyHeader,
   headerCell,
   headerVariants,
+  highlight_cell,
   highlight_first_row,
   highlight_last_row,
   table,

package/dist/Table/Table.interface.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 
 export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
+    className?: string;
 }
 export interface CellProps extends HtmlHTMLAttributes<HTMLTableCellElement>, PropsWithChildren {
     as?: "td" | "th";

package/dist/Table/Table.js

@@ -66,7 +66,7 @@ const Table = ({
   );
 };
 const TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx("tr", { ...props, children });
+  return /* @__PURE__ */ jsx("tr", { className: props.className, ...props, children });
 };
 const TableHead = ({ children }) => {
   return /* @__PURE__ */ jsx("thead", { children });

package/dist/Table/index.js

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table.js";
-import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table.css.js";
 export {
   Table,
   TableBody,
@@ -12,6 +12,7 @@ export {
   bodyHeader,
   headerCell,
   headerVariants,
+  highlight_cell,
   highlight_first_row,
   highlight_last_row,
   table,

package/dist/assets/HeroBanner/HeroBanner.css

@@ -24,75 +24,75 @@
   justify-content: space-between;
   align-items: center;
 }
-._1ye8k3f8 {
+._1ye8k3f9 {
   padding: 2rem 0;
 }
-._1ye8k3fa {
+._1ye8k3fb {
   display: flex;
   justify-content: flex-end;
   max-width: 600px;
 }
-._1ye8k3fa img {
+._1ye8k3fb img {
   max-width: 604px;
   max-height: 480px;
   object-fit: cover;
 }
-._1ye8k3fb {
+._1ye8k3fc {
   display: block;
   font: 700 14px / 1.3 var(--main-font-family);
   margin-bottom: 2px;
   letter-spacing: .2px;
 }
-._1ye8k3fc {
+._1ye8k3fd {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fd {
+._1ye8k3fe {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fe {
+._1ye8k3ff {
   color: var(--_1073cm8k);
 }
-._1ye8k3ff {
+._1ye8k3fg {
   color: var(--_1073cm8n);
 }
-._1ye8k3fg {
+._1ye8k3fh {
   font: 600 2.5rem / 1.25 var(--header-font-family);
 }
-._1ye8k3fh {
+._1ye8k3fi {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fi {
+._1ye8k3fj {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-._1ye8k3fj {
+._1ye8k3fk {
   color: var(--_1073cm8h);
 }
-._1ye8k3fk {
+._1ye8k3fl {
   color: var(--_1073cm8o);
 }
-._1ye8k3f8 p {
+._1ye8k3f9 p {
   font: 400 18px / 1.44 var(--main-font-family);
   letter-spacing: .2px;
 }
-._1ye8k3fl {
+._1ye8k3fm {
   margin-top: 3.5rem;
   display: flex;
   align-items: center;
   gap: 2rem;
 }
-._1ye8k3fl:empty {
+._1ye8k3fm:empty {
   display: none;
 }
 @media screen and (min-width:1024px) {
@@ -100,34 +100,38 @@
     flex-direction: row-reverse;
   }
   ._1ye8k3f8 {
+    left: 0;
+    right: unset;
+  }
+  ._1ye8k3f9 {
     flex: 1 1;
     max-width: 588px;
   }
-  ._1ye8k3f0 ._1ye8k3f8 {
+  ._1ye8k3f0 ._1ye8k3f9 {
     max-width: 468px;
   }
 }
 @media screen and (max-width:1280px) {
-  ._1ye8k3fl {
+  ._1ye8k3fm {
     margin-top: 2.5rem;
   }
-  ._1ye8k3f0 ._1ye8k3fl {
+  ._1ye8k3f0 ._1ye8k3fm {
     flex-direction: column;
   }
-  ._7etqoq5 ._1ye8k3fl {
+  ._7etqoq5 ._1ye8k3fm {
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
   }
 }
 @media (max-width: 1280px) and (min-width: 1024px) {
-  ._1ye8k3f0 ._1ye8k3f9 {
+  ._1ye8k3f0 ._1ye8k3fa {
     width: calc(100%-28px);
   }
-  ._1ye8k3fa img {
+  ._1ye8k3fb img {
     aspect-ratio: 1 / 1;
   }
-  ._1ye8k3f0 ._1ye8k3fl {
+  ._1ye8k3f0 ._1ye8k3fm {
     align-items: flex-start;
   }
 }
@@ -135,19 +139,19 @@
   ._1ye8k3f6 {
     flex-direction: column;
   }
-  ._1ye8k3f8 {
+  ._1ye8k3f9 {
     text-align: center;
   }
-  ._1ye8k3fl {
+  ._1ye8k3fm {
     flex-direction: column;
   }
 }
 @media (max-width: 1023px) {
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     justify-content: center;
     width: min(375px,100%);
   }
-  ._1ye8k3fa img {
+  ._1ye8k3fb img {
     max-width: 100%;
   }
 }
@@ -160,7 +164,7 @@
     min-height: 740px;
     gap: 1.5rem;
   }
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     min-height: 480px;
     _1ye8k3f0 & {
       max-width: 708px;
@@ -168,38 +172,38 @@
   }
 }
 @media screen and (max-width:603px) {
-  ._1ye8k3f8 {
+  ._1ye8k3f9 {
     max-width: calc(100% - 2rem);
     margin-left: auto;
     margin-right: auto;
   }
 }
 @media (max-width: 603px) {
-  ._1ye8k3f9 {
+  ._1ye8k3fa {
     width: 100%;
     max-width: 100%;
   }
 }
 @media (max-width: 450px) {
-  ._1ye8k3fa {
+  ._1ye8k3fb {
     width: 100%;
   }
 }
 @media screen and (max-width:768px) {
-  ._1ye8k3fg {
+  ._1ye8k3fh {
     font-size: 28px;
     line-height: 1.29;
   }
-  ._1ye8k3f8 p {
+  ._1ye8k3f9 p {
     font-size: 1rem;
     line-height: 1.5;
   }
-  ._1ye8k3fl {
+  ._1ye8k3fm {
     margin-top: 1.7rem;
   }
 }
 @media (max-width:1280px) and (min-width:1024px) {
-  ._1ye8k3fa:not(._1ye8k3f0 ._1ye8k3fa) {
+  ._1ye8k3fb:not(._1ye8k3f0 ._1ye8k3fb) {
     flex: 1 1;
     overflow: hidden;
   }

package/dist/assets/HeroBanner/SelectionBanner.css

@@ -69,6 +69,7 @@
   ._7etqoq5 {
     width: 100vw;
     padding: 2rem 0;
+    min-height: auto;
   }
   ._7etqoq7 {
     width: min(45rem, calc(100% - 4rem));

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

@@ -0,0 +1,9 @@
+.ep91dm0 {
+  font: 600 28px / 1.29 var(--header-font-family);
+}
+.ep91dm1 {
+  color: var(--_1073cm83);
+}
+.ep91dm2 {
+  color: var(--_1073cm8a);
+}

package/dist/assets/Interstitial/Interstitial.css.css

@@ -0,0 +1,137 @@
+@keyframes _appear_1euix_1 {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes _vanish_1euix_1 {
+  0% {
+    display: block;
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    display: none;
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+._overlay_1euix_24 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+._overlay_1euix_24.active {
+  display: flex;
+}
+
+._modal_1euix_40 {
+  animation: _vanish_1euix_1 0.45s ease;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  position: relative;
+  transition: transform 0.45s ease;
+  width: min(calc(100% - 2rem), 800px);
+  overflow: hidden;
+}
+
+._modal_1euix_40.active {
+  animation: _appear_1euix_1 0.45s ease;
+}
+
+._close_button_1euix_55 {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  border: none;
+  color: #4a5560;
+  cursor: pointer;
+  font-size: 1.9rem;
+  line-height: 1;
+  right: 1.5rem;
+  text-align: center;
+  top: 1.5rem;
+  width: 32px;
+}
+
+._modal_content_1euix_70 {
+  padding: 16px 24px 24px;
+}
+
+._img_area_1euix_74 {
+  background-position: center center;
+  background-size: cover;
+  height: 418px;
+}
+
+body:has(._overlay_1euix_24.active) {
+  overflow-y: hidden;
+}
+
+._body_copy_1euix_84 {
+  margin-top: 8px;
+}
+
+._body_copy_1euix_84 > * {
+  color: #333d46;
+}
+
+._body_copy_1euix_84 > p {
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+._btns_1euix_98 {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding-top: 16px;
+  margin-top: 16px;
+  width: 100%;
+  justify-content: center;
+}
+
+._btns_1euix_98:empty {
+  display: none;
+}
+
+._modal_content_1euix_70:nth-child(2) h2 {
+  margin-top: 31px;
+}
+
+@media (max-width: 1023px) {
+  ._btns_1euix_98 {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (max-width: 832px) {
+  ._img_area_1euix_74 {
+    height: calc(12.25rem + ((1vw - 3.75px) * 48.5777));
+  }
+}
+
+@media (max-width: 500px) {
+  ._modal_1euix_40 {
+    width: calc(100% - 1rem);
+  }
+  ._overlay_1euix_24.active {
+    align-items: flex-start;
+    overflow-y: scroll;
+    padding-top: 40px;
+  }
+}

package/dist/assets/SetContainer/SetContainer.css

@@ -42,6 +42,7 @@
   padding-top: 2.5rem;
   text-align: center;
   max-width: 1000px;
+  padding-bottom: 2.5rem;
 }
 ._18ygy9ma {
   isolation: isolate;

package/dist/assets/Table/Table.css

@@ -215,7 +215,7 @@ tr:last-child td {
   background: #f4f4f4;
 }
 ._1nivbwe12 tr:nth-child(odd) td {
-  background: #ffffff !important;
+  background: #ffffff;
 }
 ._1nivbwe12 tr th:first-child {
   text-align: left;
@@ -269,6 +269,10 @@ td:has(.flex.middle span.img_fluid) .flex.middle {
 td:has(.flex.middle span.img_fluid) .img_fluid {
   min-width: 24px;
 }
+._1nivbwe14 {
+  background-image: linear-gradient(0deg,#152d54,#27466f) !important;
+  color: var(--_1073cm8g) !important;
+}
 @media screen and (max-width: 768px) {
   ._1nivbwed:first-child {
     box-shadow: 0 15px 20px 0px rgb(0 0 0 / 0.3);

package/dist/assets/globals.css

@@ -166,6 +166,12 @@ h1, h2, h3, h4, h5, h6, es_font {
   line-height: 36px;
   letter-spacing: 0.2px;
 }
+.header_4 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: 0.2px;
+}
 .gradient_text {
   background: linear-gradient(3deg, #051A3F 14.64%, #1E3860 48.42%, #4D85B0 85.36%);
   background-size: 100%;

package/dist/main.d.ts

@@ -32,6 +32,7 @@ export * from './IconBillboard';
 export * from './ImageBillboard';
 export * from './ImageLink';
 export * from './Input';
+export * from './Interstitial';
 export * from './LandingPageHeader';
 export * from './LoadingIndicator';
 export * from './MainHTML';

package/dist/main.js

@@ -56,7 +56,7 @@ import { ScheduleCallPremier } from "./Forms/ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
 import { WCPLSurvey } from "./Forms/WcplSurvey.js";
 import { HeroBanner } from "./HeroBanner/HeroBanner.js";
-import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_img, hero_text, hero_wrapper, logout, reversed } from "./HeroBanner/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/HeroBanner.css.js";
 import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./HeroBanner/SelectionBanner.css.js";
 import { Hyperlink } from "./Hyperlink/index.js";
 import { IconBillboard } from "./IconBillboard/IconBillboard.js";
@@ -78,6 +78,7 @@ import { Input } from "./Input/Input.js";
 import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input/Input.css.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
+import { Interstitial } from "./Interstitial/index.js";
 import { LandingPageHeader } from "./LandingPageHeader/LandingPageHeader.js";
 import { lp_container, lp_hover, lp_theme, svg_fill } from "./LandingPageHeader/LandingPageHeader.css.js";
 import { LoadingIndicator } from "./LoadingIndicator/index.js";
@@ -95,7 +96,7 @@ import { bs_copy, bs_topic, bullet_details, li, line_points, point, step_num } f
 import { StepItemSet } from "./StepItemSet/StepItemSet.js";
 import { bs_add_details, bs_btns, bs_image, bs_section, bs_wrapper, modifier, ol, sec_subtitle, sec_title, steps_wrapper, svg_logo, tablet_col } from "./StepItemSet/StepItemSet.css.js";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table/Table.js";
-import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table/Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table/Table.css.js";
 import { TextBlock } from "./TextBlock/TextBlock.js";
 import { textBlockHeader, textBlockList, textBlockParagraph } from "./TextBlock/TextBlock.css.js";
 import { picker_arrow, picker_itemContent, picker_itemProduct, picker_navIcon, picker_navItem } from "./TopicalNavItem/TopicalNavItem.css.js";
@@ -219,6 +220,7 @@ export {
   Input,
   InputPhone,
   InputTextArea,
+  Interstitial,
   LandingPageHeader,
   LoadingIndicator,
   default18 as LockIcon,
@@ -378,6 +380,7 @@ export {
   hero_wrapper,
   hide,
   hide_transcript,
+  highlight_cell,
   highlight_first_row,
   highlight_last_row,
   icon,
@@ -434,6 +437,7 @@ export {
   rate_container,
   rate_pad,
   reversed,
+  reversed_lg_image,
   sec_subtitle,
   sec_title,
   section_body,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",