@axos-web-dev/shared-components 0.0.92 → 0.0.94

package/dist/ATMLocator/ATMLocator.js

@@ -1,9 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "../Modal/contextApi/store.js";
-import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
-import "react";
-import "../Button/Button.css.js";
+import "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
@@ -12,6 +8,12 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                   */
 /* empty css                                                    */
 /* empty css                                                */
+/* empty css                                          */
+/* empty css                                          */
+import { getVariant } from "../utils/getVariant.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
@@ -19,16 +21,14 @@ import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
-/* empty css                                          */
 import "next/image.js";
-import "../IconBillboard/IconBillboard.css.js";
-/* empty css                                          */
-import "react-use";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import clsx from "clsx";
 /* empty css                                                    */
 import "../Carousel/index.js";
+import "../Hyperlink/Hyperlink.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
@@ -46,10 +46,11 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
+import "../Input/Input.css.js";
+/* empty css                                     */
 import "../Input/Dropdown.js";
 /* empty css                                   */
 import "../Input/Input.js";
-import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "react-hook-form";
@@ -58,10 +59,10 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "../ImageBillboard/ImageBillboard.css.js";
-import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */
+import "../Modal/contextApi/store.js";
 /* empty css                                                      */
 /* empty css                                                         */
 /* empty css                                                              */
@@ -82,6 +83,7 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+import "../Interstitial/Interstitial-variants.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "iframe-resizer";

package/dist/Accordion/Accordion.css.d.ts

@@ -4,39 +4,39 @@ export declare const accordion: import('@vanilla-extract/recipes').RuntimeFn<{
     width: {
         "1/2": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "50%";
         };
         "1/3": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "33.333333333333336%";
         };
         "2/3": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "66.66666666666667%";
         };
         "1/4": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "25%";
         };
         "3/4": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "75%";
         };
         "1/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "20%";
         };
         "2/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "40%";
         };
         "3/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "60%";
         };
         "4/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "80%";
         };
     };
 }>;

package/dist/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import { interstitialProps } from '../Interstitial/Interstitial';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 import { ButtonVariants } from './Button.css';
 
@@ -8,6 +9,7 @@ export type ButtonBase = {
     action?: () => void;
     className?: string;
     newTab?: boolean;
+    marketingIntersitial?: interstitialProps;
 };
 export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
     as?: "button";
@@ -16,10 +18,4 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
     as?: "a";
 };
 export type ButtonProps = ButtonAsButton | ButtonAsLink;
-export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, square, }: ButtonProps & ButtonVariants) => import('react').DetailedReactHTMLElement<{
-    className: string;
-    href: string;
-    id: string | undefined;
-    target: string;
-    onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
-}, HTMLElement>;
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, square, marketingIntersitial, }: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.js

@@ -1,10 +1,93 @@
 "use client";
-import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Interstitial } from "../Interstitial/Interstitial.js";
+import "../Chevron/Chevron.css.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+/* empty css                                                */
+import { useState, createElement } from "react";
+import "../AlertBanner/AlertBanner.css.js";
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+import "../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { validateLink } from "../utils/validateExternalLinks.js";
-import clsx from "clsx";
-import { createElement } from "react";
+import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import { button } from "./Button.css.js";
+import "../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "react-use";
+import clsx from "clsx";
+import "../Table/Table.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Input.css.js";
+/* empty css                                          */
+/* empty css                                     */
+import "../Input/Dropdown.js";
+/* empty css                                   */
+import "../Input/Input.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+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 "../Calculators/calculator.css.js";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+/* empty css                                              */
+/* empty css                                          */
+import "next/image.js";
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+import "../Hyperlink/Hyperlink.css.js";
+/* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
+import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../ImageBillboard/ImageBillboard.css.js";
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+import "next/link.js";
+/* empty css                                                   */
+import "next/navigation.js";
+/* empty css                                                      */
+/* empty css                                                       */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+/* empty css                                        */
+/* empty css                                                  */
+/* empty css                                                */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
+/* empty css                                */
+import { useGlobalContext } from "../Modal/contextApi/store.js";
 const Button = ({
   as = "a",
   children,
@@ -17,9 +100,17 @@ const Button = ({
   newTab = false,
   action,
   className,
-  square
+  square,
+  marketingIntersitial
 }) => {
   const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const [isOpenMktInterstitial, setIsOpenMktInterstitial] = useState(false);
+  const openMarketingInterstitial = () => {
+    setIsOpenMktInterstitial(true);
+  };
+  const closeMarketingInterstitial = () => {
+    setIsOpenMktInterstitial(false);
+  };
   const onClick = (e) => {
     if (targetUrl) {
       const external_link = validateLink(targetUrl);
@@ -31,20 +122,30 @@ const Button = ({
       }
     }
   };
-  return createElement(
-    as,
-    {
-      className: clsx(
-        button({ color, size, disabled, rounded, square }),
-        className
-      ),
-      href: findMoreAxosDomains(targetUrl),
-      id,
-      target: newTab ? "_blank" : "_self",
-      onClick: action ?? onClick
-    },
-    children
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    createElement(
+      as,
+      {
+        className: clsx(
+          button({ color, size, disabled, rounded, square }),
+          className
+        ),
+        href: findMoreAxosDomains(targetUrl),
+        id,
+        target: newTab ? "_blank" : "_self",
+        onClick: marketingIntersitial ? openMarketingInterstitial : action ?? onClick
+      },
+      children
+    ),
+    marketingIntersitial && isOpenMktInterstitial && /* @__PURE__ */ jsx(
+      Interstitial,
+      {
+        ...marketingIntersitial,
+        isOpen: isOpenMktInterstitial,
+        onClose: closeMarketingInterstitial
+      }
+    )
+  ] });
 };
 export {
   Button

package/dist/Calculators/Calculator.js

@@ -2,21 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ATMLocator } from "../ATMLocator/ATMLocator.js";
 import "@hookform/resolvers/zod";
-import "../Modal/contextApi/store.js";
-import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
-import { useRef, useEffect } from "react";
-import "../Button/Button.css.js";
-import "react-use";
-import "../Input/Checkbox.js";
-import "../Input/CurrencyInput.js";
-import "../Input/Dropdown.js";
-/* empty css                                          */
-/* empty css                                   */
-import "../Input/Input.js";
-import "../Input/Input.css.js";
-import "../Input/InputPhone.js";
-import "../Input/InputTextArea.js";
+import "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
@@ -25,21 +11,17 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                   */
 /* empty css                                                    */
 /* empty css                                                */
-import "react-hook-form";
-import { iconForm } from "../Forms/Forms.css.js";
-import "../Forms/SalesforceFieldsForm.js";
-import "../LoadingIndicator/LoadingIndicator.css.js";
+/* empty css                                          */
+/* empty css                                          */
+import { getVariant } from "../utils/getVariant.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
-import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 import "next/image.js";
-import "../IconBillboard/IconBillboard.css.js";
-/* empty css                                          */
 import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
@@ -47,8 +29,11 @@ import { calculator_headline, calculator_description } from "./calculator.css.js
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
+import clsx from "clsx";
+import { useRef, useEffect } from "react";
 /* empty css                                                    */
 import "../Carousel/index.js";
+import "../Hyperlink/Hyperlink.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
@@ -64,9 +49,21 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
-import "../Interstitial/Interstitial-variants.css.js";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Input.css.js";
+/* empty css                                     */
+import "../Input/Dropdown.js";
+/* empty css                                   */
+import "../Input/Input.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Chevron/Chevron.css.js";
 /* empty css                                */
+import "../Modal/contextApi/store.js";
+import "react-use";
 /* empty css                                                      */
 /* empty css                                                         */
 /* empty css                                                              */
@@ -87,6 +84,11 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Button/Button.css.js";
+import "react-hook-form";
+import { iconForm } from "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.js";
 import { iframeResizer } from "iframe-resizer";
 import { calculators } from "./calculators.js";

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { container, field_row, marketingTile, bodyContent, header_theme } from "../ApyCalculator/ApyCalculator.css.js";
 import { Button } from "../../Button/Button.js";
 import { button } from "../../Button/Button.css.js";
 import { useEffect } from "react";
 import "react-use";
+import { container, field_row, marketingTile, bodyContent, header_theme } from "../ApyCalculator/ApyCalculator.css.js";
 import { Chevron } from "../../Chevron/index.js";
 import { content, headerIconBillboard, buttons } from "../../IconBillboard/IconBillboard.css.js";
 import { getVariant } from "../../utils/getVariant.js";
@@ -200,7 +200,6 @@ const MarginTradingCalculator = ({
     }
   }, []);
   const calculator_variant = getVariant(variant);
-  console.log("marketingtiles: ", marketingTiles);
   return /* @__PURE__ */ jsx(
     "section",
     {

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -9,6 +9,7 @@ const MaxLoanCalculator = ({
   variant,
   header
 }) => {
+  const fullVariant = getVariant(variant);
   const [monthlyPaymentDisplay, setMonthlyPaymentDisplay] = useState("");
   const [monthlyPayment, setMonthlyPayment] = useState(
     void 0
@@ -111,12 +112,12 @@ const MaxLoanCalculator = ({
   return /* @__PURE__ */ jsx("section", { className: `section_spacer`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `rounded ${calc_container} ${container({ variant: getVariant(variant) })}`,
+      className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,
       children: [
         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
           "h2",
           {
-            className: `text_center ${title({ variant: getVariant(variant) })} ${h2i}`,
+            className: `text_center ${title({ variant: fullVariant })} ${h2i}`,
             children: header
           }
         ) }),
@@ -130,7 +131,7 @@ const MaxLoanCalculator = ({
                 /* @__PURE__ */ jsx(
                   "input",
                   {
-                    className: `text_center bordered ${input_box}`,
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
                     id: "monthlyPayment",
                     maxLength: 10,
                     name: "monthlyPayment",
@@ -147,7 +148,7 @@ const MaxLoanCalculator = ({
                 /* @__PURE__ */ jsxs(
                   "select",
                   {
-                    className: `text_center bordered ${input_box}`,
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
                     id: "loanDuration",
                     name: "loanDuration",
                     value: loanDuration,
@@ -170,7 +171,7 @@ const MaxLoanCalculator = ({
                 /* @__PURE__ */ jsx(
                   "input",
                   {
-                    className: `text_center bordered ${input_box}`,
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
                     id: "interestRate",
                     maxLength: 6,
                     name: "interestRate",

package/dist/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.d.ts

@@ -19,7 +19,22 @@ export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     };
 }>;
 export declare const input_container: string;
-export declare const input_box: string;
+export declare const input_box: 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})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
 export declare const payment_results: string;
 export declare const calc_container: string;
 export declare const inputs_container: string;

package/dist/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js

@@ -4,13 +4,13 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var container = createRuntimeFn({ defaultClassName: "_10pitvc0", variantClassNames: { variant: { primary: "_10pitvc1", secondary: "_10pitvc2", tertiary: "_10pitvc3", quaternary: "_10pitvc4" } }, defaultVariants: {}, compoundVariants: [] });
 var input_container = "_10pitvc5";
-var input_box = "_10pitvc6";
-var payment_results = "_10pitvc7";
-var calc_container = "_10pitvc8";
-var inputs_container = "_10pitvc9";
-var calculation_header = "_10pitvca";
-var error_message = "_10pitvcb";
-var h2i = "_10pitvcc";
+var input_box = createRuntimeFn({ defaultClassName: "_10pitvc6", variantClassNames: { variant: { primary: "_10pitvc7", secondary: "_10pitvc8", tertiary: "_10pitvc9", quaternary: "_10pitvca" } }, defaultVariants: {}, compoundVariants: [] });
+var payment_results = "_10pitvcb";
+var calc_container = "_10pitvcc";
+var inputs_container = "_10pitvcd";
+var calculation_header = "_10pitvce";
+var error_message = "_10pitvcf";
+var h2i = "_10pitvcg";
 export {
   calc_container,
   calculation_header,

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";
 import { button } from "../../Button/Button.css.js";
-import { getVariant } from "../../utils/getVariant.js";
 import { title } from "../../IconBillboard/IconBillboard.css.js";
+import { getVariant } from "../../utils/getVariant.js";
+import { useState } from "react";
+import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";
 const MonthlyPaymentCalculator = ({
   variant,
   header
 }) => {
+  const fullVariant = getVariant(variant);
   const [loanAmountDisplay, setLoanAmountDisplay] = useState("");
   const [loanAmount, setLoanAmount] = useState(void 0);
   const [loanDuration, setLoanDuration] = useState(60);
@@ -107,12 +108,12 @@ const MonthlyPaymentCalculator = ({
   return /* @__PURE__ */ jsx("section", { className: `section_spacer`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `rounded ${calc_container} ${container({ variant: getVariant(variant) })}`,
+      className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,
       children: [
         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
           "h2",
           {
-            className: `text_center ${title({ variant: getVariant(variant) })} ${h2i}`,
+            className: `text_center ${title({ variant: fullVariant })} ${h2i}`,
             children: header
           }
         ) }),
@@ -126,7 +127,7 @@ const MonthlyPaymentCalculator = ({
                 /* @__PURE__ */ jsx(
                   "input",
                   {
-                    className: `text_center bordered ${input_box}`,
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
                     id: "loanAmount",
                     maxLength: 10,
                     name: "loanAmount",
@@ -143,7 +144,7 @@ const MonthlyPaymentCalculator = ({
                 /* @__PURE__ */ jsxs(
                   "select",
                   {
-                    className: `text_center bordered ${input_box}`,
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
                     id: "loanDuration",
                     name: "loanDuration",
                     value: loanDuration,
@@ -166,7 +167,7 @@ const MonthlyPaymentCalculator = ({
                 /* @__PURE__ */ jsx(
                   "input",
                   {
-                    className: `text_center bordered ${input_box}`,
+                    className: `text_center bordered ${input_box({ variant: fullVariant })}`,
                     id: "interestRate",
                     maxLength: 6,
                     name: "interestRate",

package/dist/Carousel/index.js

@@ -13,22 +13,31 @@ import SvgQuoteIconYellow from "../icons/QuoteIconYellow.js";
 /* empty css                                          */
 /* empty css                                          */
 import { getVariant } from "../utils/getVariant.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+import "../Button/Button.css.js";
+import React, { useEffect, Children, cloneElement } from "react";
+import "react-use";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Chevron/Chevron.css.js";
+/* empty css                                */
 import "../Modal/contextApi/store.js";
 import clsx from "clsx";
-import React, { useEffect, Children, cloneElement } from "react";
-import "../Button/Button.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import "react-use";
 import "../Table/Table.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
+import "../Input/Input.css.js";
+/* empty css                                     */
 import "../Input/Dropdown.js";
 /* empty css                                   */
 import "../Input/Input.js";
-import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "react-hook-form";
@@ -40,15 +49,11 @@ import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
-import "../Accordion/Accordion.js";
-import "../Accordion/Accordion.css.js";
-import "../AlertBanner/AlertBanner.css.js";
-import "../Article/Article.css.js";
-import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 import "next/image.js";
 /* empty css                                                    */
+import "../Hyperlink/Hyperlink.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
@@ -64,10 +69,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                                */
 /* empty css                                                      */
 /* empty css                                                         */
 /* empty css                                                              */

package/dist/Chevron/Chevron.interface.d.ts

@@ -1,3 +1,4 @@
+import { interstitialProps } from '../Interstitial/Interstitial';
 import { CallToActionTypes } from '../utils/variant.types';
 import { PropsWithChildren, ReactNode } from 'react';
 
@@ -38,4 +39,5 @@ export interface ChevronProps extends PropsWithChildren {
      * URL for icon selection button
      */
     icon?: string;
+    marketingIntersitial?: interstitialProps;
 }