@axos-web-dev/shared-components 0.0.86 → 0.0.89

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

@@ -27,8 +27,8 @@ import "../Button/Button.css.js";
 import "react-use";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                */
-import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -44,9 +44,9 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Table/Table.css.js";
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -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

@@ -24,8 +24,8 @@ import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                */
-import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -41,9 +41,9 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Table/Table.css.js";
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -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

@@ -27,8 +27,8 @@ import "../ArticlesSet/ArticlesSet.css.js";
 import "next/image.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                */
-import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -44,9 +44,9 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Table/Table.css.js";
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -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

@@ -24,8 +24,8 @@ import "../Button/Button.css.js";
 import "react-use";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                */
-import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -41,9 +41,9 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Table/Table.css.js";
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -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

@@ -23,8 +23,9 @@ import "react";
 import "react-use";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                */
-import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "clsx";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -34,16 +35,15 @@ import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
-import "clsx";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Table/Table.css.js";
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -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

@@ -26,8 +26,8 @@ import "../../Button/Button.css.js";
 import { useLocation } from "react-use";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                   */
-import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Table/Table.css.js";
+import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
@@ -43,9 +43,9 @@ import "../../Forms/SalesforceFieldsForm.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Table/Table.css.js";
-import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../../Calculators/calculator.css.js";
+/* empty css                                                                                   */
+import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                                       */
@@ -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

@@ -26,8 +26,8 @@ import { header_section } from "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-/* empty css                                                                                */
-import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -43,9 +43,9 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Table/Table.css.js";
-import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -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 });