@axos-web-dev/shared-components 1.0.100-dev.8 → 1.0.100-dev.81

package/dist/BulletItem/BulletItem.js

@@ -3,13 +3,14 @@ import { listItem } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgCheckCircle from "../icons/CheckCircle.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                                */
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.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 "react";
 import clsx from "clsx";
 import { bulletIcon } from "./BulletItem.css.js";
 const BulletItem = (props) => {

package/dist/Button/Button.css.d.ts

@@ -118,13 +118,13 @@ export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
             flexDirection: "column";
             justifyContent: "center";
             background: "#fff";
-            color: "#333D46";
+            color: "#1F1F1F";
             border: "1px solid #EBEBEB";
             alignItems: "center";
             gap: number;
             ":hover": {
-                background: "#EBEBEB";
-                color: "#333D46";
+                background: "#E9F8FF";
+                color: "#1F1F1F";
             };
             "@media": {
                 "screen and (max-width:768px)": {

package/dist/Button/Button.css.js

@@ -1,6 +1,7 @@
-import '../assets/Button/Button.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+import '../assets/Button/Button.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.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                                    */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/Button/Button.js

@@ -6,8 +6,9 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/Modal/Modal.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/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.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/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.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                                */
+import '../assets/Modal/Modal.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/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/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.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/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
@@ -20,8 +21,6 @@ import { button } from "./Button.css.js";
 import "react-use";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../IconBillboard/IconBillboard.css.js";
-import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
-import { validateLink } from "../utils/validateExternalLinks.js";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
@@ -67,12 +66,14 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
 import "../Carousel/index.js";
+/* empty css                                                   */
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/authenticate.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+/* empty css                                    */
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
@@ -99,7 +100,6 @@ import "next/script.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                                      */
 import "next/navigation.js";
@@ -107,15 +107,12 @@ import "next/navigation.js";
 /* empty css                                                              */
 /* empty css                                                                 */
 import "next/link.js";
-import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
 /* empty css                                                   */
-import "../NavigationMenu/AxosBank/NavData.js";
 /* empty css                                                      */
 /* empty css                                                       */
-import "../NavigationMenu/AxosALTS/NavData.js";
 /* empty css                                                   */
 /* empty css                                                     */
-import "../NavigationMenu/LaVictoire/NavData.js";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
 import "../PageNavItem/PageNavItem.css.js";
 import "react-slick";
 /* empty css                                                 */
@@ -130,7 +127,6 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                */
 /* empty css                                              */
 /* empty css                                */
-import { useGlobalContext } from "../Modal/contextApi/store.js";
 const Button = ({
   as = "a",
   children,
@@ -148,7 +144,7 @@ const Button = ({
   ...rest
 }) => {
   const variant = getVariant(color);
-  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const { setTargetLinkUrl, setOpenModal, validateLink, resolveUrl } = useGlobalContext();
   const [isOpenMktInterstitial, setIsOpenMktInterstitial] = useState(false);
   const openMarketingInterstitial = () => {
     setIsOpenMktInterstitial(true);
@@ -176,7 +172,7 @@ const Button = ({
           button({ color: variant, size, disabled, rounded, square }),
           className
         ),
-        href: findMoreAxosDomains(targetUrl),
+        href: resolveUrl(targetUrl),
         id,
         target: newTab ? "_blank" : "_self",
         onClick: marketingIntersitial ? openMarketingInterstitial : action ?? onClick,

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

@@ -1,5 +1,6 @@
-import '../../assets/Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                             */
 /* empty css                                       */

package/dist/Calculators/AnnualFeeCalculator/index.js

@@ -3,10 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../../Button/Button.js";
 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 clsx from "clsx";
 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 = ({

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

@@ -39,38 +39,10 @@ export declare const bodyContent: string;
 export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: "transparent";
-                    textShadow: "0px 0px #00000000";
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: "transparent";
-                    textShadow: "0px 0px #00000000";
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;

package/dist/Calculators/ApyCalculator/ApyCalculator.css.js

@@ -1,5 +1,6 @@
-import '../../assets/Calculators/ApyCalculator/ApyCalculator.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/ApyCalculator/ApyCalculator.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/Calculators/ApyCalculator/index.js

@@ -16,12 +16,20 @@ const ApyCalculator = ({
   variant
 }) => {
   const calculator_variant = getVariant(variant);
+  const [compounding, setCompounding] = useState(360);
+  const getAPR = (apy) => {
+    return Number.parseFloat(
+      (((1 + apy / 100) ** (1 / compounding) - 1) * compounding * 100).toFixed(
+        2
+      )
+    );
+  };
   const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
+  const AXOS_ONE_APR = getAPR(AXOS_ONE_APY);
   const [initialDeposit, setInititalDeposit] = useState(1e3);
-  const [APR, setAPR] = useState(AXOS_ONE_APY - 0.1);
+  const [APR, setAPR] = useState(AXOS_ONE_APR);
   const [APY, setAPY] = useState(AXOS_ONE_APY);
   const [months, setMonths] = useState(12);
-  const [compounding, setCompounding] = useState(360);
   const [monthlyDeposits, setMonthlyDeposits] = useState(100);
   const [endingBalance, setEndingBalance] = useState("");
   const [errors, setErrors] = useState([]);
@@ -103,9 +111,7 @@ const ApyCalculator = ({
   };
   const updateAPY = (value) => {
     setAPY(value);
-    const new_apr = Number.parseFloat(
-      (((1 + value / 100) ** (1 / compounding) - 1) * compounding * 100).toFixed(2)
-    );
+    const new_apr = getAPR(value);
     setAPR(new_apr);
     convertInterest();
   };

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

@@ -43,3 +43,6 @@ export declare const ax1_calc_disclosure: import('@vanilla-extract/recipes').Run
         };
     };
 }>;
+export declare const call_to_action_row: string;
+export declare const tieredRowAnimation: string;
+export declare const tieredRowAnimationDelayed: string;

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

@@ -1,7 +1,9 @@
-import '../../assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css';import '../../assets/Table/Table.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.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                                        */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var ax1_container = "_11b2y8z0";
@@ -19,6 +21,9 @@ var ax1_header_calc = "_11b2y8zb";
 var ax1_calc_text = "_11b2y8zc";
 var ax1_description_text = createRuntimeFn({ defaultClassName: "_11b2y8zd", variantClassNames: { variant: { primary: "_11b2y8ze", secondary: "_11b2y8zf", tertiary: "_11b2y8zg", quaternary: "_11b2y8zh" } }, defaultVariants: {}, compoundVariants: [] });
 var ax1_calc_disclosure = createRuntimeFn({ defaultClassName: "_11b2y8zi", variantClassNames: { variant: { primary: "_11b2y8zj", secondary: "_11b2y8zk", tertiary: "_11b2y8zl", quaternary: "_11b2y8zm" } }, defaultVariants: {}, compoundVariants: [] });
+var call_to_action_row = "_11b2y8zn";
+var tieredRowAnimation = "_11b2y8zp";
+var tieredRowAnimationDelayed = "_11b2y8zq";
 export {
   ax1_calc_disclosure,
   ax1_calc_icon,
@@ -34,5 +39,8 @@ export {
   ax1_input_container,
   ax1_input_label,
   ax1_m_label,
-  ax1_table_container
+  ax1_table_container,
+  call_to_action_row,
+  tieredRowAnimation,
+  tieredRowAnimationDelayed
 };

package/dist/Calculators/AxosOneCalculator/index.d.ts

@@ -1,4 +1,5 @@
 import { default as React, FC } from 'react';
+import { ChevronProps } from '../../Chevron/Chevron.interface';
 
 export interface AxosOneCalculatorProps {
     headline?: React.ReactNode | string;
@@ -6,5 +7,7 @@ export interface AxosOneCalculatorProps {
     bodyCopy?: React.ReactNode | string;
     disclosure: React.ReactNode | string;
     variant: string;
+    initialBalance?: number;
+    callToActionRow?: ChevronProps[];
 }
 export declare const AxosOneCalculator: FC<AxosOneCalculatorProps>;

package/dist/Calculators/AxosOneCalculator/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Button } from "../../Button/Button.js";
 import "../../Button/Button.css.js";
 import { useState } from "react";
@@ -8,35 +8,39 @@ 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                                   */
+import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
+/* empty css                                  */
 /* empty css                                       */
 /* empty css                                                       */
 /* empty css                                                   */
 import { Table, TableHead, TableRow, TableCell, TableBody } from "../../Table/Table.js";
 import { headerCell } from "../../Table/Table.css.js";
-import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
 import clsx from "clsx";
-import { ax1_calc_icon, ax1_header_container, ax1_header_calc, ax1_calc_text, ax1_description_text, ax1_calculator_wrapper, ax1_input_container, ax1_input_label, ax1_calculator_input, ax1_calculator_button, ax1_d_label, ax1_m_label, ax1_table_container, ax1_calc_disclosure, ax1_container } from "./BalanceAPYCalculator.css.js";
+import { ax1_calc_icon, ax1_header_container, ax1_header_calc, ax1_calc_text, ax1_description_text, ax1_calculator_wrapper, ax1_input_container, ax1_input_label, ax1_calculator_input, ax1_calculator_button, ax1_d_label, ax1_m_label, tieredRowAnimation, tieredRowAnimationDelayed, ax1_table_container, call_to_action_row, ax1_calc_disclosure, ax1_container } from "./BalanceAPYCalculator.css.js";
 const AxosOneCalculator = ({
   headline,
   bodyCopy,
   disclosure,
   icon,
-  variant
+  variant,
+  initialBalance,
+  callToActionRow
 }) => {
   const calc_variant = getVariant(variant);
   const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
-  const [balance, setBalance] = useState(1e4);
-  const [axbAPY, _setAxbAPY] = useState(AXOS_ONE_APY);
-  const [axbEarning, setAxbEarning] = useState(AXOS_ONE_APY * 100);
-  const [chaseAPY, _setChaseAPY] = useState(0.01);
-  const [chaseEarning, setChaseEarning] = useState(1);
-  const [bofaAPY, _setBofaAPY] = useState(0.01);
-  const [bofaEarning, setBofaEarning] = useState(1);
-  const [fargoAPY, _setFargoAPY] = useState(0.05);
-  const [fargoEarning, setFargoEarning] = useState(5);
+  const AXOS_ONE_APY_TIERED = +process.env.NEXT_PUBLIC_AXOS1_APY_TIER;
+  const startingBalance = Number.isFinite(Number(initialBalance)) && Number(initialBalance) >= 0 ? Number(initialBalance) : 1e4;
+  const [balance, setBalance] = useState(startingBalance);
+  const [calculatedBalance, setCalculatedBalance] = useState(startingBalance);
+  const [axbAPY, setAxbAPY] = useState(AXOS_ONE_APY);
+  const [axbEarning, setAxbEarning] = useState(
+    AXOS_ONE_APY / 100 * startingBalance
+  );
+  const [tier1Earning, setTier1Earning] = useState(0);
+  const [tier2Earning, setTier2Earning] = useState(0);
+  const [showTieredRows, setShowTieredRows] = useState(false);
   const removeNonNumeric = (value) => {
     if (value === "") {
       value = "0";
@@ -47,10 +51,27 @@ const AxosOneCalculator = ({
     return newValue;
   };
   const calculateBalance = (amount) => {
-    setAxbEarning(axbAPY / 100 * amount);
-    setChaseEarning(chaseAPY / 100 * amount);
-    setBofaEarning(bofaAPY / 100 * amount);
-    setFargoEarning(fargoAPY / 100 * amount);
+    setCalculatedBalance(amount);
+    const TIER_THRESHOLD = 249999.99;
+    if (amount > TIER_THRESHOLD) {
+      const tier1Amount = TIER_THRESHOLD;
+      const tier2Amount = amount - TIER_THRESHOLD;
+      const tier1Earn = AXOS_ONE_APY / 100 * tier1Amount;
+      const tier2Earn = AXOS_ONE_APY_TIERED / 100 * tier2Amount;
+      setTier1Earning(tier1Earn);
+      setTier2Earning(tier2Earn);
+      const totalEarning = tier1Earn + tier2Earn;
+      setAxbEarning(totalEarning);
+      const effectiveAPY = totalEarning / amount * 100;
+      setAxbAPY(effectiveAPY);
+      setShowTieredRows(true);
+    } else {
+      setAxbEarning(AXOS_ONE_APY / 100 * amount);
+      setAxbAPY(AXOS_ONE_APY);
+      setTier1Earning(0);
+      setTier2Earning(0);
+      setShowTieredRows(false);
+    }
   };
   const onUpdateBalance = (e) => {
     const text = e.target.value;
@@ -59,7 +80,25 @@ const AxosOneCalculator = ({
       setBalance(0);
     }
   };
-  return /* @__PURE__ */ jsx("section", { className: clsx(ax1_container), children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
+  const formatUSD = (value) => {
+    if (Number.isInteger(value)) {
+      return value.toLocaleString(void 0, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      });
+    }
+    return value.toLocaleString(void 0, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  };
+  const formatEarnings = (value) => {
+    return Math.round(value).toLocaleString(void 0, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+  };
+  return /* @__PURE__ */ jsx("section", { className: clsx(ax1_container), id: "axoapycalc", children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
     icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", ax1_calc_icon), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
     (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: `${ax1_header_container} text_center`, children: [
       headline && /* @__PURE__ */ jsx("h2", { className: clsx("header_2", ax1_header_calc), children: headline }),
@@ -113,12 +152,18 @@ const AxosOneCalculator = ({
           children: [
             /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
               /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
-                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Bank" }),
-                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Bank" })
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Balance" }),
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Balance" })
               ] }),
               /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
-                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Percentage Yield*" }),
-                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "APY*" })
+                /* @__PURE__ */ jsxs("div", { className: clsx(headerCell, ax1_d_label), children: [
+                  "Annual Percentage Yield",
+                  /* @__PURE__ */ jsx("sup", { children: "**" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: clsx(headerCell, ax1_m_label), children: [
+                  "APY",
+                  /* @__PURE__ */ jsx("sup", { children: "**" })
+                ] })
               ] }),
               /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
                 /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Earnings" }),
@@ -127,64 +172,47 @@ const AxosOneCalculator = ({
             ] }) }),
             /* @__PURE__ */ jsxs(TableBody, { children: [
               /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsx("b", { children: "Axos Bank" }) }),
+                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
+                  "$",
+                  formatUSD(calculatedBalance)
+                ] }) }),
                 /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
                   axbAPY.toFixed(2),
                   "%"
                 ] }) }),
                 /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
                   "$",
-                  axbEarning.toLocaleString(void 0, {
-                    maximumFractionDigits: 2
-                  })
+                  formatEarnings(axbEarning)
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Wells Fargo",
-                  /* @__PURE__ */ jsx("sup", { children: "2" })
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  fargoAPY.toFixed(2),
-                  "%"
+              showTieredRows && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(TableRow, { className: clsx(tieredRowAnimation), children: [
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatUSD(249999.99)
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    AXOS_ONE_APY.toFixed(2),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatEarnings(tier1Earning)
+                  ] })
                 ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "$",
-                  fargoEarning.toLocaleString(void 0, {
-                    maximumFractionDigits: 2
-                  })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Bank of America",
-                  /* @__PURE__ */ jsx("sup", { children: "3" })
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  bofaAPY.toFixed(2),
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "$",
-                  bofaEarning.toLocaleString(void 0, {
-                    maximumFractionDigits: 2
-                  })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Chase",
-                  /* @__PURE__ */ jsx("sup", { children: "4" })
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  chaseAPY.toFixed(2),
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "$",
-                  chaseEarning.toLocaleString(void 0, {
-                    maximumFractionDigits: 2
-                  })
+                /* @__PURE__ */ jsxs(TableRow, { className: clsx(tieredRowAnimationDelayed), children: [
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatUSD(calculatedBalance - 249999.99)
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    AXOS_ONE_APY_TIERED.toFixed(2),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatEarnings(tier2Earning)
+                  ] })
                 ] })
               ] })
             ] })
@@ -192,6 +220,19 @@ const AxosOneCalculator = ({
         }
       )
     ] }),
+    Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow?.map(
+      ({ id, variant: variant2, displayText, targetUrl }) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          targetUrl,
+          color: getVariant(variant2),
+          size: "medium",
+          rounded: "medium",
+          children: displayText
+        },
+        id
+      )
+    ) }),
     disclosure && /* @__PURE__ */ jsx("div", { className: ax1_calc_disclosure({ variant: calc_variant }), children: disclosure })
   ] }) });
 };

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

@@ -33,38 +33,10 @@ export declare const header_container: string;
 export declare const header_calc: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            readonly selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: string;
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: string;
-                    textShadow: string;
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         secondary: {
-            selectors: {
-                [x: string]: {
-                    WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})`;
-                    WebkitTextFillColor: "transparent";
-                    textShadow: "0px 0px #00000000";
-                    color?: undefined;
-                } | {
-                    color: `var(--${string})`;
-                    WebkitBackgroundClip?: undefined;
-                    backgroundImage?: undefined;
-                    WebkitTextFillColor?: undefined;
-                    textShadow?: undefined;
-                };
-            };
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;

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

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