@axos-web-dev/shared-components 1.0.100-dev.5 → 1.0.100-dev.51

package/dist/Calculators/Calculator.js

@@ -7,20 +7,20 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
 import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
+import { useRef, useEffect } from "react";
 import clsx from "clsx";
 /* empty css                                          */
 /* empty css                                          */
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-import { useRef, useEffect } from "react";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../Chevron/Chevron.css.js";
@@ -46,8 +46,16 @@ import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
 import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
 import { MonthlyPaymentLVFCalculator } from "./MonthlyPaymentLVFCalculator/index.js";
 import { SummitApyCalculator } from "./SummitApyCalculator/index.js";
+/* empty css                                    */
 /* empty css                                                    */
 import "../Carousel/index.js";
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/authenticate.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+import "react-use";
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -67,7 +75,6 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                            */
 import "../ImageBillboard/ImageBillboard.css.js";
 import "next/script.js";
-import "react-use";
 /* empty css                                        */
 /* empty css                                        */
 import "../Input/Checkbox.js";
@@ -84,7 +91,6 @@ import "../Input/RadioButton.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 /* empty css                                                      */
@@ -136,7 +142,9 @@ const Calculator = (props) => {
     disclosure,
     headline,
     name,
-    marketingTiles
+    marketingTiles,
+    initialBalance,
+    callToActionRow
   } = props;
   const ref = useRef(null);
   const iframe = calculators.get(name || "");
@@ -227,7 +235,9 @@ const Calculator = (props) => {
         bodyCopy,
         variant,
         disclosure,
-        icon
+        icon,
+        initialBalance,
+        callToActionRow
       }
     );
   } else if (name === "APY Balance Summit Savings") {

package/dist/Calculators/MarginTradingCalculator/MarginTradingCalculator.css.js

@@ -1,4 +1,4 @@
-import '../../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';/* empty css                                           */
+/* empty css                                           */
 var w100 = "_1mgfcbj0";
 var w50 = "_1mgfcbj1";
 var g24 = "_1mgfcbj2";

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -74,8 +74,8 @@ const MarginTradingCalculator = ({
         4: { axs: 12.5, axe: 12, td: 12.125, et: 13.2 },
         5: { axs: 12, axe: 11.5, td: 12.075, et: 12.7 },
         6: { axs: 12, axe: 11.5, td: 12.75, et: 12.2 },
-        7: { axs: 11.5, axe: 11 },
-        8: { axs: 11, axe: 10.75 }
+        7: { axs: 11.5, axe: 11, td: "N/A", et: "N/A" },
+        8: { axs: 11, axe: 10.75, td: "N/A", et: "N/A" }
       };
       if (cashVal && secVal && axsCell && axeCell && tdCell && etCell && duration) {
         const totalValue = Number(cashVal.value) + Number(secVal.value);

package/dist/Calculators/MarineLoanMonthlyPaymentCalculator/index.js

@@ -4,8 +4,8 @@ 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 clsx from "clsx";
 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, hide_select_arrow, calculation_header, payment_results } from "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -5,8 +5,8 @@ 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 clsx from "clsx";
 import { calculator } from "../calculator.css.js";
 const MaxLoanCalculator = ({
   variant,

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

@@ -1,20 +1,20 @@
 export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -22,16 +22,16 @@ export declare const input_container: string;
 export declare const input_box: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

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

@@ -1,4 +1,4 @@
-import '../../assets/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                            */

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -4,8 +4,8 @@ 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 clsx from "clsx";
 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";

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

@@ -1,16 +1,16 @@
 export declare const bg_vars: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -18,32 +18,32 @@ export declare const calc_content_area: string;
 export declare const calc_h2: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const calc_bodycopy: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

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

@@ -1,4 +1,4 @@
-import '../../assets/Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                             */

package/dist/Calculators/SummitApyCalculator/BalanceAPYCalculator.css.d.ts

@@ -15,32 +15,32 @@ export declare const summit_calc_text: string;
 export declare const summit_description_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const summit_calc_disclosure: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js

@@ -1,4 +1,4 @@
-import '../../assets/Calculators/SummitApyCalculator/BalanceAPYCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                             */

package/dist/Calculators/SummitApyCalculator/index.js

@@ -8,7 +8,7 @@ import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../../icons/AxosX/index.js";
 import SvgComponent from "../../icons/AxosX/Blue.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                                       */
@@ -18,7 +18,7 @@ import { headerCell } from "../../Table/Table.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
 import clsx from "clsx";
-import { summit_container, summit_calc_icon, summit_header_container, summit_header_calc, summit_calc_text, summit_description_text, summit_calculator_wrapper, summit_input_container, summit_input_label, summit_d_label, summit_m_label, summit_calculator_input, summit_calculator_button, focus_row, summit_table_container, summit_calc_disclosure } from "./BalanceAPYCalculator.css.js";
+import { summit_container, summit_calc_icon, summit_header_container, summit_header_calc, summit_calc_text, summit_description_text, summit_table_container, summit_calculator_wrapper, summit_input_container, summit_input_label, summit_d_label, summit_m_label, summit_calculator_input, summit_calculator_button, focus_row, summit_calc_disclosure } from "./BalanceAPYCalculator.css.js";
 const SummitApyCalculator = ({
   headline,
   bodyCopy,
@@ -27,15 +27,24 @@ const SummitApyCalculator = ({
   variant
 }) => {
   const calc_variant = getVariant(variant);
+  const SUMMIT_APY = +process.env.NEXT_PUBLIC_SUMMIT_SAVINGS_APY;
   const [balance, setBalance] = useState(1e4);
-  const [axbAPY, _setAxbAPY] = useState(4);
-  const [axbEarning, setAxbEarning] = useState(400);
-  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.7);
-  const [capitalOneEarning, setcapitalOneEarning] = useState(370);
+  const [axbAPY, _setAxbAPY] = useState(SUMMIT_APY);
+  const [axbEarning, setAxbEarning] = useState(
+    SUMMIT_APY / 100 * balance
+  );
+  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.4);
+  const [capitalOneEarning, setcapitalOneEarning] = useState(
+    capitalOneAPY / 100 * balance
+  );
   const [bofaAPY, _setBofaAPY] = useState(0.04);
-  const [bofaEarning, setBofaEarning] = useState(4);
+  const [bofaEarning, setBofaEarning] = useState(
+    bofaAPY / 100 * balance
+  );
   const [chaseAPY, _setchaseAPY] = useState(0.01);
-  const [chaseEarning, setchaseEarning] = useState(1);
+  const [chaseEarning, setchaseEarning] = useState(
+    chaseAPY / 100 * balance
+  );
   const removeNonNumeric = (value) => {
     if (value === "") {
       value = "0";

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

@@ -2,42 +2,36 @@ export declare const calculator: string;
 export declare const calculator_description: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})`;
-            color: `var(--${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const calculator_headline: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/Calculators/calculator.css.js

@@ -1,4 +1,4 @@
-import '../assets/Calculators/calculator.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                    */

package/dist/CallToActionBar/CallToActionBar.css.d.ts

@@ -1,4 +1,7 @@
 export declare const cta: string;
+export declare const cta_h2: string;
+export declare const is_sticky: string;
+export declare const cta_containment: string;
 export declare const cta_image_section: string;
 export declare const cta_image_section_overlap: string;
 export declare const cta_section_lg: string;
@@ -10,7 +13,6 @@ export declare const cta_section: string;
 export declare const cta_image_overlap: string;
 export declare const cta_body_section: string;
 export declare const sticky_banner: string;
-export declare const is_sticky: string;
 export declare const ctas_section: string;
 export declare const cta_text: string;
 export declare const cta_large_image: string;

package/dist/CallToActionBar/CallToActionBar.css.js

@@ -1,26 +1,32 @@
-import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
+/* empty css                                          */
+/* empty css                                    */
 /* empty css                                   */
 var cta = "_1tdyl740";
-var cta_image_section = "_1tdyl741";
-var cta_image_section_overlap = "_1tdyl742";
-var cta_section_lg = "_1tdyl743";
-var cta_section_lg_overlap = "_1tdyl744";
-var cta_section_md = "_1tdyl745";
-var cta_section_md_overlap = "_1tdyl746";
-var cta_section_sm = "_1tdyl747";
-var cta_section = "_1tdyl748";
-var cta_image_overlap = "_1tdyl749";
-var cta_body_section = "_1tdyl74a";
-var sticky_banner = "_1tdyl74b";
-var is_sticky = "_1tdyl74c";
-var ctas_section = "_1tdyl74d";
-var cta_text = "_1tdyl74e";
-var cta_large_image = "_1tdyl74f";
+var cta_h2 = "_1tdyl741";
+var is_sticky = "_1tdyl742";
+var cta_containment = "_1tdyl743";
+var cta_image_section = "_1tdyl744";
+var cta_image_section_overlap = "_1tdyl745";
+var cta_section_lg = "_1tdyl746";
+var cta_section_lg_overlap = "_1tdyl747";
+var cta_section_md = "_1tdyl748";
+var cta_section_md_overlap = "_1tdyl749";
+var cta_section_sm = "_1tdyl74a";
+var cta_section = "_1tdyl74b";
+var cta_image_overlap = "_1tdyl74c";
+var cta_body_section = "_1tdyl74d";
+var sticky_banner = "_1tdyl74e";
+var ctas_section = "_1tdyl74f";
+var cta_text = "_1tdyl74g";
+var cta_large_image = "_1tdyl74h";
 export {
   cta,
   cta_body_section,
+  cta_containment,
+  cta_h2,
   cta_image_overlap,
   cta_image_section,
   cta_image_section_overlap,

package/dist/CallToActionBar/index.js

@@ -8,7 +8,7 @@ import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { getBannerSizeClassName } from "../utils/ctaOptions.js";
-import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_large_image, cta_text, ctas_section, cta_body_section } from "./CallToActionBar.css.js";
+import { sticky_banner, is_sticky, cta, cta_containment, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_large_image, cta_body_section, cta_text, cta_h2, ctas_section } from "./CallToActionBar.css.js";
 const CallToActionBar = ({
   bannerSize,
   image,
@@ -67,6 +67,7 @@ const CallToActionBar = ({
             "containment",
             "flex",
             "middle",
+            cta_containment,
             row_reverse && image ? "reversed" : ""
           ),
           style: { justifyContent: "center" },
@@ -106,8 +107,8 @@ const CallToActionBar = ({
                         (imageMobileView || !image) && "text_center"
                       ),
                       children: [
-                        headline && /* @__PURE__ */ jsx("h2", { className: "header_3", children: headline }),
-                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+                        headline && /* @__PURE__ */ jsx("h2", { className: clsx(cta_h2, "header_3"), children: headline }),
+                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { children: bodyCopy }) })
                       ]
                     }
                   ),