@axos-web-dev/shared-components 1.0.8 → 1.0.9-9.dev.1

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})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -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})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     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})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                     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})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;

package/dist/Calculators/ApyCalculator/index.js

@@ -16,9 +16,10 @@ const ApyCalculator = ({
   variant
 }) => {
   const calculator_variant = getVariant(variant);
+  const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
   const [initialDeposit, setInititalDeposit] = useState(1e3);
-  const [APR, setAPR] = useState(2.32);
-  const [APY, setAPY] = useState(2.35);
+  const [APR, setAPR] = useState(AXOS_ONE_APY - 0.1);
+  const [APY, setAPY] = useState(AXOS_ONE_APY);
   const [months, setMonths] = useState(12);
   const [compounding, setCompounding] = useState(360);
   const [monthlyDeposits, setMonthlyDeposits] = useState(100);
@@ -263,16 +264,23 @@ const ApyCalculator = ({
         {
           className: `${container({ variant: getVariant(variant) })} ${marketingTile} rounded bordered`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `header_3 ${header_theme({ variant: calculator_variant })}`,
-                  children: headline
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { children: bodyCopy })
-            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: headerIconBillboard,
+                style: { textAlign: "left" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `header_3 ${header_theme({ variant: calculator_variant })}`,
+                      children: headline
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { children: bodyCopy })
+                ]
+              }
+            ) }),
             callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} middle`, children: callToActionRow.map(
               ({
                 id: id2,

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

package/dist/Calculators/AxosOneCalculator/index.js

@@ -27,9 +27,10 @@ const AxosOneCalculator = ({
   variant
 }) => {
   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(4.86);
-  const [axbEarning, setAxbEarning] = useState(486);
+  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);
@@ -45,7 +46,7 @@ const AxosOneCalculator = ({
     setBalance(newValue);
     return newValue;
   };
-  const calculateBlance = (amount) => {
+  const calculateBalance = (amount) => {
     setAxbEarning(axbAPY / 100 * amount);
     setChaseEarning(chaseAPY / 100 * amount);
     setBofaEarning(bofaAPY / 100 * amount);
@@ -91,7 +92,14 @@ const AxosOneCalculator = ({
           {
             className: ax1_calculator_button,
             size: "large",
-            action: () => calculateBlance(balance),
+            action: () => calculateBalance(balance),
+            tabIndex: 0,
+            role: "button",
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                calculateBalance(balance);
+              }
+            },
             children: "Calculate"
           }
         )
@@ -133,16 +141,16 @@ const AxosOneCalculator = ({
               ] }),
               /* @__PURE__ */ jsxs(TableRow, { children: [
                 /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Chase",
+                  "Wells Fargo",
                   /* @__PURE__ */ jsx("sup", { children: "2" })
                 ] }),
                 /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  chaseAPY.toFixed(2),
+                  fargoAPY.toFixed(2),
                   "%"
                 ] }),
                 /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
                   "$",
-                  chaseEarning.toLocaleString(void 0, {
+                  fargoEarning.toLocaleString(void 0, {
                     maximumFractionDigits: 2
                   })
                 ] })
@@ -165,16 +173,16 @@ const AxosOneCalculator = ({
               ] }),
               /* @__PURE__ */ jsxs(TableRow, { children: [
                 /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Wells Fargo",
+                  "Chase",
                   /* @__PURE__ */ jsx("sup", { children: "4" })
                 ] }),
                 /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  fargoAPY.toFixed(2),
+                  chaseAPY.toFixed(2),
                   "%"
                 ] }),
                 /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
                   "$",
-                  fargoEarning.toLocaleString(void 0, {
+                  chaseEarning.toLocaleString(void 0, {
                     maximumFractionDigits: 2
                   })
                 ] })

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

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

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

@@ -0,0 +1,101 @@
+export declare const calc_container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        secondary: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        tertiary: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        quaternary: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const apy_calculator: string;
+export declare const calculator_section: string;
+export declare const section_header: string;
+export declare const buydown_calculator_form: string;
+export declare const errorTag: string;
+export declare const form_wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})`;
+        };
+        secondary: {
+            color: `var(--${string})`;
+        };
+        tertiary: {
+            color: `var(--${string})`;
+        };
+        quaternary: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const fieldset: string;
+export declare const row_form: string;
+export declare const checkbox_row: string;
+export declare const calculate_row: string;
+export declare const relative: string;
+export declare const label_symbol: string;
+export declare const cash: string;
+export declare const percent: string;
+export declare const prefix_pad: string;
+export declare const submit_section: string;
+export declare const span_12: string;
+export declare const form_disclosure: string;
+export declare const bodyContent: string;
+export declare const theme_header: 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;
+                };
+            };
+        };
+        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;
+                };
+            };
+        };
+        tertiary: {
+            color: `var(--${string})`;
+        };
+        quaternary: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const mt_8: string;
+export declare const pis_0: string;
+export declare const limit_one: string;

package/dist/Calculators/BuyDownCalculator/BuyDownCalculator.css.js

@@ -0,0 +1,56 @@
+import '../../assets/Calculators/BuyDownCalculator/BuyDownCalculator.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                                     */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var calc_container = createRuntimeFn({ defaultClassName: "n9fzuw0", variantClassNames: { variant: { primary: "n9fzuw1", secondary: "n9fzuw2", tertiary: "n9fzuw3", quaternary: "n9fzuw4" } }, defaultVariants: {}, compoundVariants: [] });
+var apy_calculator = "n9fzuw5";
+var calculator_section = "n9fzuw6";
+var section_header = "n9fzuw7";
+var buydown_calculator_form = "n9fzuw8";
+var errorTag = "n9fzuw9";
+var form_wrapper = createRuntimeFn({ defaultClassName: "n9fzuwa", variantClassNames: { variant: { primary: "n9fzuwb", secondary: "n9fzuwc", tertiary: "n9fzuwd", quaternary: "n9fzuwe" } }, defaultVariants: {}, compoundVariants: [] });
+var fieldset = "n9fzuwf";
+var row_form = "n9fzuwg";
+var checkbox_row = "n9fzuwh";
+var calculate_row = "n9fzuwi";
+var relative = "n9fzuwj";
+var label_symbol = "n9fzuwk";
+var cash = "n9fzuwl";
+var percent = "n9fzuwm";
+var prefix_pad = "n9fzuwn";
+var submit_section = "n9fzuwo";
+var span_12 = "n9fzuwp";
+var form_disclosure = "n9fzuwq";
+var bodyContent = "n9fzuwr";
+var theme_header = createRuntimeFn({ defaultClassName: "n9fzuws", variantClassNames: { variant: { primary: "n9fzuwt", secondary: "n9fzuwu", tertiary: "n9fzuwv", quaternary: "n9fzuww" } }, defaultVariants: {}, compoundVariants: [] });
+var mt_8 = "n9fzuwx";
+var pis_0 = "n9fzuwy";
+var limit_one = "n9fzuwz";
+export {
+  apy_calculator,
+  bodyContent,
+  buydown_calculator_form,
+  calc_container,
+  calculate_row,
+  calculator_section,
+  cash,
+  checkbox_row,
+  errorTag,
+  fieldset,
+  form_disclosure,
+  form_wrapper,
+  label_symbol,
+  limit_one,
+  mt_8,
+  percent,
+  pis_0,
+  prefix_pad,
+  relative,
+  row_form,
+  section_header,
+  span_12,
+  submit_section,
+  theme_header
+};

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

@@ -0,0 +1,25 @@
+import { QuaternaryTypes } from '../../utils';
+import { FC, ReactNode } from 'react';
+
+export interface BuyDownCalculatorProps {
+    header?: ReactNode | string;
+    body?: ReactNode | string;
+    variant: QuaternaryTypes;
+    disclosure?: ReactNode | string;
+}
+export type BuyDownCalculatorInputs = {
+    purchasePrice: number;
+    downpayment: number;
+    dealerContribution: number;
+    program: string;
+    fico: string;
+    buydownRate: number;
+    buydownTerm: number;
+    fullTimeCharter: boolean;
+    mooringOutsideContinentalUS: boolean;
+    operatingAccount: boolean;
+    ltvAbove60: boolean;
+    floorplanDealerIncentive: boolean;
+    dealerCommercialDeposit: boolean;
+};
+export declare const BuyDownCalculator: FC<BuyDownCalculatorProps>;