@axos-web-dev/shared-components 0.0.118 → 0.0.119

package/dist/ATMLocator/ATMLocator.js

@@ -23,10 +23,11 @@ import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
+import clsx from "clsx";
+import { calculator_headline, calculator_description } from "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
-import clsx from "clsx";
 /* empty css                                                    */
 import "../Carousel/index.js";
 import "../Hyperlink/Hyperlink.css.js";
@@ -62,6 +63,7 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -95,7 +97,6 @@ import "../Table/Table.css.js";
 import "../Interstitial/Interstitial-variants.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "iframe-resizer";
-import { calculator_headline, calculator_description } from "../Calculators/calculator.css.js";
 const ATMLocator = (props) => {
   const { id, bodyCopy, icon = false, disclosure, headline } = props;
   const variant = getVariant(props.variant);

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.js

@@ -18,11 +18,12 @@ 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 "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import { button } from "./Button.css.js";
 import "react-use";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import clsx from "clsx";
 import "../Table/Table.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
@@ -44,7 +45,6 @@ import "../Input/Checkbox.css.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                                              */
@@ -68,6 +68,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";

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

@@ -24,7 +24,22 @@ export declare const text_block: string;
 export declare const slider_block_wrapper: string;
 export declare const calc_container: string;
 export declare const fb50: string;
-export declare const stat: string;
+export declare const stat: 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 w100: string;
 export declare const balance_wrapper: string;
 export declare const stat_row: string;

package/dist/Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js

@@ -9,14 +9,14 @@ var text_block = "_7zr6kt6";
 var slider_block_wrapper = "_7zr6kt7";
 var calc_container = "_7zr6kt8";
 var fb50 = "_7zr6kt9";
-var stat = "_7zr6kta";
-var w100 = "_7zr6ktb";
-var balance_wrapper = "_7zr6ktc";
-var stat_row = "_7zr6ktd";
-var slider_wrapper = "_7zr6kte";
-var slider = "_7zr6ktf";
-var pt0_1023 = "_7zr6ktg";
-var pb0_1023 = "_7zr6kth";
+var stat = createRuntimeFn({ defaultClassName: "_7zr6kta", variantClassNames: { variant: { primary: "_7zr6ktb", secondary: "_7zr6ktc", tertiary: "_7zr6ktd", quaternary: "_7zr6kte" } }, defaultVariants: {}, compoundVariants: [] });
+var w100 = "_7zr6ktf";
+var balance_wrapper = "_7zr6ktg";
+var stat_row = "_7zr6kth";
+var slider_wrapper = "_7zr6kti";
+var slider = "_7zr6ktj";
+var pt0_1023 = "_7zr6ktk";
+var pb0_1023 = "_7zr6ktl";
 export {
   balance_wrapper,
   calc_block,

package/dist/Calculators/AnnualFeeCalculator/index.js

@@ -5,12 +5,15 @@ import { Chevron } from "../../Chevron/index.js";
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
+import clsx from "clsx";
 import { useRef, useState, useEffect } from "react";
+import { calculator } from "../calculator.css.js";
 import { container, calc_container, calc_block, pb0_1023, slider_block_wrapper, w100, stat_row, balance_wrapper, fb50, stat, slider_wrapper, slider, pt0_1023, text_block } from "./AnnualFeeCalculator.css.js";
 const AnnualFeeCalculator = ({
   marketingTiles,
-  variant
+  variant: fullVariant = "primary"
 }) => {
+  const variant = getVariant(fullVariant);
   const sliderRef = useRef(null);
   const balanceRef = useRef(null);
   const feeRef = useRef(null);
@@ -53,7 +56,7 @@ const AnnualFeeCalculator = ({
   const handleSliderChange = (event) => {
     setSliderValue(parseFloat(event.target.value));
   };
-  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx(
     "div",
     {
       className: `rounded containment ${container({ variant: getVariant(variant) })}`,
@@ -68,14 +71,14 @@ const AnnualFeeCalculator = ({
           ),
           /* @__PURE__ */ jsxs("div", { className: `flex push_up_32 ${w100} ${stat_row}`, children: [
             /* @__PURE__ */ jsxs("div", { className: `${balance_wrapper} text_center ${fb50}`, children: [
-              /* @__PURE__ */ jsxs("p", { className: stat, children: [
+              /* @__PURE__ */ jsxs("p", { className: stat({ variant }), children: [
                 "$",
                 /* @__PURE__ */ jsx("span", { ref: balanceRef, id: "balance", children: "100,000" })
               ] }),
               /* @__PURE__ */ jsx("p", { className: "stat-subhead mb-0", children: "Account Balance" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: `fee-wrapper text_center ${fb50}`, children: [
-              /* @__PURE__ */ jsxs("p", { className: stat, children: [
+              /* @__PURE__ */ jsxs("p", { className: stat({ variant }), children: [
                 "$",
                 /* @__PURE__ */ jsx("span", { ref: feeRef, id: "fee", children: "20.00" })
               ] }),

package/dist/Calculators/Calculator.js

@@ -49,6 +49,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -9,6 +9,8 @@ import { Chevron } from "../../Chevron/index.js";
 import { content, headerIconBillboard, buttons } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
+import clsx from "clsx";
+import { calculator_headline } from "../calculator.css.js";
 import { px40, fc1023, w100, bb_gray, fb50, r400_fs, fs36, green, h50, r603_fs24, mx1, table, r502_fs12, tc, bb0, btl, w25, btml, btr, bbl, bbml, bbr, savingsSummary, w50, g24, mtc } from "./MarginTradingCalculator.css.js";
 const MarginTradingCalculator = ({
   marketingTiles,
@@ -204,11 +206,20 @@ const MarginTradingCalculator = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
-      className: `${px40} ${container({ variant: getVariant(variant) })}`,
+      className: `${px40} ${container({ variant: calculator_variant })}`,
       children: /* @__PURE__ */ jsx("div", { className: `containment`, children: /* @__PURE__ */ jsxs("div", { className: `flex ${fc1023}`, children: [
         /* @__PURE__ */ jsxs("div", { className: w100, children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "header_2 gradient_text", children: "How much can I buy or borrow using margin?" }),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: clsx(
+                  "header_2",
+                  calculator_headline({ variant: calculator_variant })
+                ),
+                children: "How much can I buy or borrow using margin?"
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { className: `${field_row} flex_col`, children: [
               /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "accCashVal", children: "Account Cash Value" }),
               /* @__PURE__ */ jsx(
@@ -241,7 +252,7 @@ const MarginTradingCalculator = ({
             /* @__PURE__ */ jsx("div", { className: `center middle push_up_32`, children: /* @__PURE__ */ jsx(
               "input",
               {
-                className: `${button({ color: "primary", size: "medium", rounded: "medium" })} center`,
+                className: `${button({ color: calculator_variant === "primary" || calculator_variant === "secondary" ? "primary" : "secondary", size: "medium", rounded: "medium" })} center`,
                 type: "button",
                 value: "Calculate",
                 id: "calculateBtn"
@@ -271,7 +282,16 @@ const MarginTradingCalculator = ({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx("h2", { className: "header_2 push_up_32 gradient_text", children: "How much will it cost me?" }),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: clsx(
+                  "header_2 push_up_32",
+                  calculator_headline({ variant: calculator_variant })
+                ),
+                children: "How much will it cost me?"
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { className: `${field_row} flex_col`, children: [
               /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "duration", children: "Duration (days)" }),
               /* @__PURE__ */ jsx(
@@ -318,7 +338,7 @@ const MarginTradingCalculator = ({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `savingsSummary gradient_text ${savingsSummary}`,
+                  className: `savingsSummary ${savingsSummary} ${calculator_headline({ variant: calculator_variant })}`,
                   children: [
                     "Save",
                     " ",

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -5,7 +5,9 @@ import { calc_container, container, h2i, inputs_container, input_container, inpu
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
+import clsx from "clsx";
 import { useState } from "react";
+import { calculator } from "../calculator.css.js";
 const MaxLoanCalculator = ({
   variant,
   header
@@ -110,7 +112,7 @@ const MaxLoanCalculator = ({
       setLoanAmount(0);
     }
   };
-  return /* @__PURE__ */ jsx("section", { className: "", children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -4,8 +4,10 @@ import { button } from "../../Button/Button.css.js";
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
+import clsx from "clsx";
 import { useState } from "react";
 import { calc_text, description_text, calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import { calculator } from "../calculator.css.js";
 import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";
 const MonthlyPaymentCalculator = ({
   variant,
@@ -109,7 +111,7 @@ const MonthlyPaymentCalculator = ({
       setEstimatedPayment(0);
     }
   };
-  return /* @__PURE__ */ jsx("section", { className: ``, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,

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

@@ -1,3 +1,4 @@
+export declare const calculator: string;
 export declare const calculator_description: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {

package/dist/Calculators/calculator.css.js

@@ -3,9 +3,11 @@
 /* empty css                                   */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var calculator_description = createRuntimeFn({ defaultClassName: "iois7n0", variantClassNames: { variant: { primary: "iois7n1", secondary: "iois7n2", tertiary: "iois7n3", quaternary: "iois7n4" } }, defaultVariants: {}, compoundVariants: [] });
-var calculator_headline = createRuntimeFn({ defaultClassName: "iois7n5", variantClassNames: { variant: { primary: "iois7n6", secondary: "iois7n7", tertiary: "iois7n8", quaternary: "iois7n9" } }, defaultVariants: {}, compoundVariants: [] });
+var calculator = "iois7n0";
+var calculator_description = createRuntimeFn({ defaultClassName: "iois7n1", variantClassNames: { variant: { primary: "iois7n2", secondary: "iois7n3", tertiary: "iois7n4", quaternary: "iois7n5" } }, defaultVariants: {}, compoundVariants: [] });
+var calculator_headline = createRuntimeFn({ defaultClassName: "iois7n6", variantClassNames: { variant: { primary: "iois7n7", secondary: "iois7n8", tertiary: "iois7n9", quaternary: "iois7na" } }, defaultVariants: {}, compoundVariants: [] });
 export {
+  calculator,
   calculator_description,
   calculator_headline
 };

package/dist/Calculators/index.js

@@ -2,7 +2,7 @@ import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
 import { ApyCalculator } from "./ApyCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
 import { Calculator } from "./Calculator.js";
-import { calculator_description, calculator_headline } from "./calculator.css.js";
+import { calculator, calculator_description, calculator_headline } from "./calculator.css.js";
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
@@ -14,6 +14,7 @@ export {
   MarginTradingCalculator,
   MaxLoanCalculator,
   MonthlyPaymentCalculator,
+  calculator,
   calculator_description,
   calculator_headline
 };

package/dist/Carousel/Carousel.css.d.ts

@@ -1,5 +1,6 @@
 import { RecipeVariants } from '@vanilla-extract/recipes';
 
+export declare const quoteSetContainer: string;
 export declare const dots: string;
 export declare const headerCarousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {

package/dist/Carousel/Carousel.css.js

@@ -2,17 +2,18 @@
 /* empty css                                   */
 /* empty css                            */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var dots = "jgs3fs0";
-var headerCarousel = createRuntimeFn({ defaultClassName: "jgs3fs1", variantClassNames: { variant: { primary: "jgs3fs2", secondary: "jgs3fs3", tertiary: "jgs3fs4", quaternary: "jgs3fs5" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
-var carousel = createRuntimeFn({ defaultClassName: "jgs3fs6", variantClassNames: { variant: { primary: "jgs3fs7", secondary: "jgs3fs8", tertiary: "jgs3fs9", quaternary: "jgs3fsa" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
-var descriptionCarousel = createRuntimeFn({ defaultClassName: "jgs3fsb", variantClassNames: { variant: { primary: "jgs3fsc", secondary: "jgs3fsd", tertiary: "jgs3fse", quaternary: "jgs3fsf" } }, defaultVariants: {}, compoundVariants: [] });
-var authorLocation = "jgs3fsg";
-var author = createRuntimeFn({ defaultClassName: "jgs3fsi jgs3fsh", variantClassNames: { variant: { primary: "jgs3fsj", secondary: "jgs3fsk", tertiary: "jgs3fsl", quaternary: "jgs3fsm" } }, defaultVariants: {}, compoundVariants: [] });
-var slideBase = "jgs3fsn";
-var slide = { show: "jgs3fso jgs3fsn", hide: "jgs3fsp jgs3fsn" };
-var slides = "jgs3fsq";
-var icon = createRuntimeFn({ defaultClassName: "jgs3fsr", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
-var dot = createRuntimeFn({ defaultClassName: "jgs3fss", variantClassNames: { variant: { primary: "jgs3fst", secondary: "jgs3fsu", tertiary: "jgs3fsv", quaternary: "jgs3fsw" }, selected: { true: "jgs3fsx" } }, defaultVariants: { variant: "primary" }, compoundVariants: [[{ variant: "primary", selected: true }, "jgs3fsy"], [{ variant: "secondary", selected: true }, "jgs3fsz"], [{ variant: "tertiary", selected: true }, "jgs3fs10"], [{ variant: "quaternary", selected: true }, "jgs3fs11"]] });
+var quoteSetContainer = "jgs3fs0";
+var dots = "jgs3fs1";
+var headerCarousel = createRuntimeFn({ defaultClassName: "jgs3fs2", variantClassNames: { variant: { primary: "jgs3fs3", secondary: "jgs3fs4", tertiary: "jgs3fs5", quaternary: "jgs3fs6" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
+var carousel = createRuntimeFn({ defaultClassName: "jgs3fs7", variantClassNames: { variant: { primary: "jgs3fs8", secondary: "jgs3fs9", tertiary: "jgs3fsa", quaternary: "jgs3fsb" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
+var descriptionCarousel = createRuntimeFn({ defaultClassName: "jgs3fsc", variantClassNames: { variant: { primary: "jgs3fsd", secondary: "jgs3fse", tertiary: "jgs3fsf", quaternary: "jgs3fsg" } }, defaultVariants: {}, compoundVariants: [] });
+var authorLocation = "jgs3fsh";
+var author = createRuntimeFn({ defaultClassName: "jgs3fsj jgs3fsi", variantClassNames: { variant: { primary: "jgs3fsk", secondary: "jgs3fsl", tertiary: "jgs3fsm", quaternary: "jgs3fsn" } }, defaultVariants: {}, compoundVariants: [] });
+var slideBase = "jgs3fso";
+var slide = { show: "jgs3fsp jgs3fso", hide: "jgs3fsq jgs3fso" };
+var slides = "jgs3fsr";
+var icon = createRuntimeFn({ defaultClassName: "jgs3fss", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+var dot = createRuntimeFn({ defaultClassName: "jgs3fst", variantClassNames: { variant: { primary: "jgs3fsu", secondary: "jgs3fsv", tertiary: "jgs3fsw", quaternary: "jgs3fsx" }, selected: { true: "jgs3fsy" } }, defaultVariants: { variant: "primary" }, compoundVariants: [[{ variant: "primary", selected: true }, "jgs3fsz"], [{ variant: "secondary", selected: true }, "jgs3fs10"], [{ variant: "tertiary", selected: true }, "jgs3fs11"], [{ variant: "quaternary", selected: true }, "jgs3fs12"]] });
 export {
   author,
   authorLocation,
@@ -22,6 +23,7 @@ export {
   dots,
   headerCarousel,
   icon,
+  quoteSetContainer,
   slide,
   slideBase,
   slides

package/dist/Carousel/index.d.ts

@@ -15,7 +15,7 @@ export interface CarouselProps extends PropsWithChildren {
     items?: SlideProps[];
     title?: ReactNode;
     description?: ReactNode;
-    id?: string;
+    internalName?: string;
 }
 export declare const CarouselSlide: (props: SlideProps & carouselVariants) => import("react/jsx-runtime").JSX.Element;
 export declare const Carousel: (props: CarouselProps & carouselVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Carousel/index.js

@@ -27,6 +27,7 @@ import "../Chevron/Chevron.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";
 import clsx from "clsx";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
@@ -49,7 +50,6 @@ import "../Input/Checkbox.css.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                                              */
@@ -71,6 +71,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -97,7 +98,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                */
 /* empty css                                        */
 /* empty css                                              */
-import { icon, slide, authorLocation, author, headerCarousel, descriptionCarousel, carousel, slides, dots, dot } from "./Carousel.css.js";
+import { icon, slide, authorLocation, author, quoteSetContainer, headerCarousel, descriptionCarousel, carousel, slides, dots, dot } from "./Carousel.css.js";
 import { useCarousel } from "./store.js";
 const iconVarints = /* @__PURE__ */ new Map([
   [
@@ -143,7 +144,7 @@ const Carousel = (props) => {
     auto = false,
     title = void 0,
     description = void 0,
-    id
+    internalName
   } = props;
   const change = useCarousel((state) => state.change);
   const itemSelected = useCarousel((state) => state.selected);
@@ -164,8 +165,8 @@ const Carousel = (props) => {
     const changeAfterTime = setInterval(() => plusSlides(itemSelected), time);
     return () => clearInterval(changeAfterTime);
   }, [auto, change, children, itemSelected, time]);
-  const selectItem = (id2) => {
-    change(id2);
+  const selectItem = (id) => {
+    change(id);
   };
   const child = children;
   const showDots = () => {
@@ -180,32 +181,39 @@ const Carousel = (props) => {
       )) });
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: `containment`, id, children: [
-    title && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
-      /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerCarousel({ variant })), children: title }),
-      /* @__PURE__ */ jsx("div", { className: clsx(descriptionCarousel({ variant })), children: description })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: clsx(carousel({ variant })), children: [
-      /* @__PURE__ */ jsx("div", { children: iconVarints.get(variant) }),
-      /* @__PURE__ */ jsx("div", { className: slides, children: children ? Children.map(
-        children,
-        (item, idx) => React.isValidElement(item) && cloneElement(item, {
-          ...item.props,
-          selected: idx === itemSelected,
-          variant
-        })
-      ) : items?.map((item, idx) => /* @__PURE__ */ jsx(
-        CarouselSlide,
-        {
-          selected: idx === itemSelected,
-          ...item,
-          variant
-        },
-        item.id
-      )) }),
-      showDots()
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `containment ${quoteSetContainer}`,
+      id: internalName?.replace(/ /g, "-"),
+      children: [
+        title && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerCarousel({ variant })), children: title }),
+          /* @__PURE__ */ jsx("div", { className: clsx(descriptionCarousel({ variant })), children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(carousel({ variant })), children: [
+          /* @__PURE__ */ jsx("div", { children: iconVarints.get(variant) }),
+          /* @__PURE__ */ jsx("div", { className: slides, children: children ? Children.map(
+            children,
+            (item, idx) => React.isValidElement(item) && cloneElement(item, {
+              ...item.props,
+              selected: idx === itemSelected,
+              variant
+            })
+          ) : items?.map((item, idx) => /* @__PURE__ */ jsx(
+            CarouselSlide,
+            {
+              selected: idx === itemSelected,
+              ...item,
+              variant
+            },
+            item.id
+          )) }),
+          showDots()
+        ] })
+      ]
+    }
+  );
 };
 export {
   Carousel,

package/dist/Chevron/index.js

@@ -22,6 +22,7 @@ import "clsx";
 import { useState } from "react";
 import "../Button/Button.css.js";
 import "../IconBillboard/IconBillboard.css.js";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "react-use";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
@@ -46,7 +47,6 @@ import "../Input/Checkbox.css.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                                              */
@@ -70,6 +70,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Comparison/Comparison.css.js

@@ -1,7 +1,7 @@
 /* empty css                                */
-/* empty css                                          */
-/* empty css                                */
 /* empty css                                   */
+/* empty css                                */
+/* empty css                                          */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var comparison = createRuntimeFn({ defaultClassName: "_198o0lt0", variantClassNames: { variant: { primary: "_198o0lt1", secondary: "_198o0lt2", tertiary: "_198o0lt3", quaternary: "_198o0lt4" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/Comparison/Comparison.js

@@ -21,6 +21,7 @@ import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../utils/allowedAxosDomains.js";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
@@ -44,7 +45,6 @@ import "../Input/Checkbox.css.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                                              */
@@ -66,6 +66,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../Interstitial/Interstitial-variants.css.js";

package/dist/ContentBanner/ContentBanner.interface.d.ts

@@ -1,6 +1,6 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from 'react';
 import { ImageInterface } from '../IconBillboard';
+import { ReactNode } from 'react';
 
 export interface HeroBannerInterface {
     id?: string;
@@ -12,4 +12,5 @@ export interface HeroBannerInterface {
     bodyCopy?: string | ReactNode;
     callToActionRow?: boolean | ChevronProps[];
     bannerSize?: string;
+    internalName?: string;
 }

package/dist/ContentBanner/index.js

@@ -15,13 +15,14 @@ const ContentBanner = ({
   bodyCopy,
   callToActionRow,
   bannerSize,
-  id
+  id,
+  internalName
 }) => {
   const banner_variant = getVariant(variant);
   return /* @__PURE__ */ jsx(
     "section",
     {
-      id,
+      id: internalName?.replace(/ /g, "-") ?? id,
       className: `${content_banner({ variant: banner_variant })} ${bannerSize == "Large" ? section_pad : section_min_pad}`,
       children: /* @__PURE__ */ jsxs("div", { className: `containment`, children: [
         /* @__PURE__ */ jsxs("div", { className: `text_center`, children: [