@axos-web-dev/shared-components 1.0.53 → 1.0.55

package/dist/Auth/Logout.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useFormState } from "react-dom";
 import { useForm } from "react-hook-form";
-import { sign_in_button, sign_in_form } from "./SignIn.css.js";
+import { sign_in_form, sign_in_button } from "./SignIn.css.js";
 const Logout = ({
   action
 }) => {

package/dist/Auth/SignIn.css.d.ts

@@ -1,3 +1,4 @@
 export declare const sign_in_form: string;
 export declare const sign_in_button: string;
 export declare const form_input: string;
+export declare const body_sign_in: string;

package/dist/Auth/SignIn.css.js

@@ -1,11 +1,13 @@
-import '../assets/Auth/SignIn.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                          */
 var sign_in_form = "_1c7jj80";
 var sign_in_button = "_1c7jj81";
 var form_input = "_1c7jj82";
+var body_sign_in = "_1c7jj83";
 export {
+  body_sign_in,
   form_input,
   sign_in_button,
   sign_in_form

package/dist/Auth/SignInPassword.d.ts

@@ -1,3 +1,15 @@
-export declare const SignIn: ({ signin, }: {
-    signin: (prev: unknown, formData: FormData) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+import { QuaternaryTypes } from '../utils';
+import { ReactNode } from 'react';
+
+export type SignIn = {
+    signin: any;
+    headline?: ReactNode;
+    bodyCopy?: ReactNode;
+    additionalDetails?: ReactNode;
+    variant?: QuaternaryTypes;
+};
+export type Credentials = {
+    username: string;
+    password: string;
+};
+export declare const SignIn: (props: SignIn) => import("react/jsx-runtime").JSX.Element;

package/dist/Auth/SignInPassword.js

@@ -1,45 +1,98 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "../Input/Input.js";
+import "../utils/allowedAxosDomains.js";
+import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
-import { useFormState } from "react-dom";
+import { useAction } from "next-safe-action/hooks";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { form_input, sign_in_button, sign_in_form } from "./SignIn.css.js";
-const SignIn = ({
-  signin
-}) => {
-  const [, dispatch, pending] = useFormState(signin, void 0);
-  const { register } = useForm({
-    defaultValues: {
-      password: ""
-    },
+import { z } from "zod";
+import { ErrorAlert } from "./ErrorAlert.js";
+import { sign_in_form, body_sign_in, sign_in_button } from "./SignIn.css.js";
+const schema = z.object({
+  username: z.string().min(1, { message: "username is required." }),
+  password: z.string().min(1, { message: "Password is required." })
+});
+const SignIn = (props) => {
+  const { signin, headline, bodyCopy, variant: fullVariant } = props;
+  const [showError, setShowError] = useState(false);
+  const onCloseError = () => {
+    setShowError(false);
+  };
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid, isSubmitting }
+  } = useForm({
+    resolver: zodResolver(schema),
     mode: "onChange"
   });
-  return /* @__PURE__ */ jsx(
+  const { executeAsync, isPending } = useAction(signin, {
+    onError: () => {
+      setShowError(true);
+    }
+  });
+  const onSubmit = async (data) => {
+    await executeAsync({
+      username: data.username,
+      password: data.password
+    });
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       id: "axb-page",
       className: clsx("containment", "section_spacer", "center"),
-      children: /* @__PURE__ */ jsxs("form", { action: dispatch, className: clsx(sign_in_form), children: [
-        /* @__PURE__ */ jsx("h2", { className: clsx(), children: "Sign in" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Please login to access this resource. ",
-          /* @__PURE__ */ jsx("br", {}),
-          "Your password was sent via email during the onboarding process."
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: clsx(form_input), children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "password", children: "Password" }),
-          /* @__PURE__ */ jsx("input", { type: "password", ...register("password", {}) })
+      children: [
+        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: clsx(sign_in_form), children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx(), children: headline ?? "Log in" }),
+          /* @__PURE__ */ jsx("div", { className: clsx(body_sign_in), children: bodyCopy ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { children: "Please login to access this resource." }),
+            /* @__PURE__ */ jsx("p", { children: "Your password was sent via email during the onboarding process." })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "username",
+              ...register("username", { required: true }),
+              label: "Username",
+              sizes: "medium",
+              placeholder: "Username",
+              required: true,
+              error: !!errors.username,
+              helperText: errors?.username?.message,
+              variant
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "password",
+              ...register("password", { required: true }),
+              label: "Password",
+              sizes: "medium",
+              placeholder: "Password",
+              required: true,
+              error: !!errors.password,
+              helperText: errors?.password?.message,
+              variant
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: clsx(sign_in_button),
+              disabled: !isValid || isSubmitting || isPending,
+              type: "submit",
+              children: "Log in"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: clsx(sign_in_button),
-            disabled: pending,
-            type: "submit",
-            children: "Sign in"
-          }
-        )
-      ] })
+        showError && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ErrorAlert, { onClose: onCloseError }) })
+      ]
     }
   );
 };

package/dist/Auth/index.d.ts

@@ -1,3 +1,5 @@
+export * from './ErrorAlert';
+export * from './ErrorAlert.css';
 export * from './Logout';
 export * from './SignIn.css';
 export * from './SignInPassword';

package/dist/Auth/index.js

@@ -1,10 +1,18 @@
+import { ErrorAlert } from "./ErrorAlert.js";
+import { error_alert, error_alert_content, error_close_button, separator } from "./ErrorAlert.css.js";
 import { Logout } from "./Logout.js";
-import { form_input, sign_in_button, sign_in_form } from "./SignIn.css.js";
+import { body_sign_in, form_input, sign_in_button, sign_in_form } from "./SignIn.css.js";
 import { SignIn } from "./SignInPassword.js";
 export {
+  ErrorAlert,
   Logout,
   SignIn,
+  body_sign_in,
+  error_alert,
+  error_alert_content,
+  error_close_button,
   form_input,
+  separator,
   sign_in_button,
   sign_in_form
 };

package/dist/Avatar/Avatar.module.js

@@ -1,4 +1,4 @@
-import '../assets/Avatar/Avatar.css.css';const avatar_sec = "_avatar_sec_1bnm9_1";
+const avatar_sec = "_avatar_sec_1bnm9_1";
 const container = "_container_1bnm9_5";
 const image = "_image_1bnm9_14";
 const text = "_text_1bnm9_23";

package/dist/AwardsBanner/AwardsBanner.css.js

@@ -1,4 +1,4 @@
-import '../assets/AwardsBanner/AwardsBanner.css';/* empty css                                */
+/* empty css                                */
 var awards_section = "_1amgyqo0";
 var awards_row = "_1amgyqo1";
 export {

package/dist/AwardsItem/AwardsItem.css.js

@@ -1,4 +1,4 @@
-import '../assets/AwardsItem/AwardsItem.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                                          */
 /* empty css                              */
 var award_item = "_16tnqb20";
 var award_company = "_16tnqb21";

package/dist/Blockquote/Blockquote.module.js

@@ -1,4 +1,4 @@
-import '../assets/Blockquote/Blockquote.css.css';const quote_spacer = "_quote_spacer_1mzku_1";
+const quote_spacer = "_quote_spacer_1mzku_1";
 const author = "_author_1mzku_7";
 const quote = "_quote_1mzku_1";
 const css = {

package/dist/BulletItem/BulletItem.css.js

@@ -1,4 +1,4 @@
-import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                                          */
 /* empty css                              */
 var bulletIcon = "d5iqlx0";
 export {

package/dist/BulletItem/BulletItem.js

@@ -3,7 +3,7 @@ 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                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */

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

@@ -3,44 +3,44 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
     color: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
         };

package/dist/Button/Button.css.js

@@ -1,4 +1,4 @@
-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                                          */
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                    */

package/dist/Button/Button.js

@@ -6,7 +6,7 @@ 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/VideoTile/VideoTile.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/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/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                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -60,8 +60,10 @@ import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
 import "../Input/PercentageInput.js";
 import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+/* empty css                                    */
 import "react-dom";
 /* empty css                                */
+import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */
@@ -95,11 +97,11 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                              */
 /* empty css                                                                 */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
 /* empty css                                                   */
 import "../NavigationMenu/AxosBank/NavData.js";
-import "next/link.js";
 /* empty css                                                      */
-import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
 /* empty css                                                       */
 import "../NavigationMenu/AxosALTS/NavData.js";
 /* empty css                                                   */

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

@@ -1,21 +1,21 @@
 export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             border: "1px solid #D4D4D4";
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -27,16 +27,16 @@ export declare const fb50: string;
 export declare const stat: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

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

@@ -1,4 +1,4 @@
-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                                   */
+/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                             */

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

@@ -1,20 +1,20 @@
 export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})`;
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
@@ -42,12 +42,12 @@ export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -59,12 +59,12 @@ export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -73,10 +73,10 @@ export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<
             };
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

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

@@ -1,4 +1,4 @@
-import '../../assets/Calculators/ApyCalculator/ApyCalculator.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/AxosOneCalculator/BalanceAPYCalculator.css.d.ts

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

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

@@ -1,4 +1,4 @@
-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                                   */
+/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                             */

package/dist/Calculators/AxosOneCalculator/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 { 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_container, ax1_calc_icon, ax1_header_container, ax1_header_calc, ax1_calc_text, ax1_description_text, ax1_table_container, ax1_calculator_wrapper, ax1_input_container, ax1_input_label, ax1_calculator_input, ax1_calculator_button, ax1_d_label, ax1_m_label, ax1_calc_disclosure } from "./BalanceAPYCalculator.css.js";
 const AxosOneCalculator = ({
   headline,
   bodyCopy,