@axos-web-dev/shared-components 0.0.25 → 0.0.27

package/dist/ApyCalculator/index.js

@@ -11,7 +11,8 @@ import { vars } from "../themes/axos.css.js";
 import { apy_calculator, calculator_section, section_header, apy_calculator_form, errorTag, fieldset, field_row, relative, label_symbol, cash, prefix_pad, percent, submit_section, span_12, form_disclosure, marketing, marketing_tile, cta_section, marketing_table } from "./ApyCalculator.css.js";
 const ApyCalculator = () => {
   const [initialDeposit, setInititalDeposit] = useState(1e3);
-  const [APY, setAPY] = useState(2.25);
+  const [APR, setAPR] = useState(2.32);
+  const [APY, setAPY] = useState(2.35);
   const [months, setMonths] = useState(12);
   const [compounding, setCompounding] = useState(360);
   const [monthlyDeposits, setMonthlyDeposits] = useState(100);
@@ -35,20 +36,16 @@ const ApyCalculator = () => {
       return true;
   };
   const convertInterest = useCallback(() => {
-    const newInterestRate = 0.01 * APY;
+    const newInterestRate = 0.01 * APR;
     setInterestRate(newInterestRate);
-  }, [APY]);
+  }, [APR]);
   useEffect(() => {
     convertInterest();
   }, [convertInterest, interestRate, setInterestRate]);
   const handleCalculate = () => {
     convertInterest();
-    if (!isValidNumber(initialDeposit) || !isValidNumber(months) || !isValidNumber(monthlyDeposits) || !isValidAPY(APY)) {
-      if (!isValidAPY(APY)) {
-        setError("*APY has to be a positive number.");
-      } else {
-        setError("Invalid input. Please enter positive numeric values.");
-      }
+    if (!isValidNumber(initialDeposit) || !isValidNumber(months) || !isValidNumber(monthlyDeposits) || !isValidAPY(APY) || !isValidAPY(APR)) {
+      setError("Invalid input. Please enter positive numeric values.");
     } else {
       let total;
       if (compounding === 360) {
@@ -73,8 +70,20 @@ const ApyCalculator = () => {
       );
     }
   };
+  const updateAPR = (value) => {
+    setAPR(value);
+    const new_apy = Number.parseFloat(
+      (100 * ((1 + value / 100 / compounding) ** compounding - 1)).toFixed(2)
+    );
+    setAPY(new_apy);
+    convertInterest();
+  };
   const updateAPY = (value) => {
     setAPY(value);
+    const new_apr = Number.parseFloat(
+      (((1 + value / 100) ** (1 / compounding) - 1) * compounding * 100).toFixed(2)
+    );
+    setAPR(new_apr);
     convertInterest();
   };
   return /* @__PURE__ */ jsx(
@@ -89,7 +98,10 @@ const ApyCalculator = () => {
       children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
         /* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
           /* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
-            /* @__PURE__ */ jsx("h1", { className: "header_1", children: "APY Interest Calculator" }),
+            /* @__PURE__ */ jsxs("h1", { className: "header_1", children: [
+              "APY Interest Calculator",
+              /* @__PURE__ */ jsx("sup", { children: "3" })
+            ] }),
             /* @__PURE__ */ jsxs("p", { className: "push_up", children: [
               "Calculate how much interest you can earn on your money with our APY Interest Calculator.",
               /* @__PURE__ */ jsx("sup", { children: "1" })
@@ -114,6 +126,22 @@ const ApyCalculator = () => {
                   }
                 )
               ] }),
+              /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+                /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "apr", children: "APR (Annual Percentage Rate)" }),
+                /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${percent}`, children: "%" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `${prefix_pad}`,
+                    id: "apr",
+                    type: "number",
+                    step: 0.01,
+                    name: "apr",
+                    value: APR,
+                    onChange: (e) => updateAPR(Number(e.target.value))
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
                 /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "apy", children: "APY (Annual Percentage Yield)" }),
                 /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${percent}`, children: "%" }),
@@ -240,7 +268,7 @@ const ApyCalculator = () => {
                         children: "Learn More"
                       }
                     ),
-                    /* @__PURE__ */ jsx(Chevron, { targetUrl: "#", variant: "primary", children: "Open an Account" })
+                    /* @__PURE__ */ jsx(Chevron, { targetUrl: "/recommended-for-you", variant: "primary", children: "Open an Account" })
                   ] })
                 ]
               }

package/dist/Chevron/index.js

@@ -35,7 +35,7 @@ import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "react-hook-form";
-/* empty css                                              */
+import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import { chevron_wrapper, chevron } from "./Chevron.css.js";
 /* empty css                                */

package/dist/FaqAccordion/FaqAccordion.css.js

@@ -1,5 +1,6 @@
 /* empty css                                */
 /* empty css                                   */
+/* empty css                                          */
 /* empty css                                */
 var faqAccordion = "ph6wj60";
 var header = "ph6wj61";

package/dist/Hyperlink/index.js

@@ -35,7 +35,7 @@ import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "react-hook-form";
-/* empty css                                              */
+import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 /* empty css                                */
 /* empty css                                                      */

package/dist/Modal/Modal.js

@@ -32,7 +32,7 @@ import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "react-hook-form";
-/* empty css                                              */
+import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "./contextApi/store.js";
 /* empty css                                                      */

package/dist/SetContainer/SetContainer.css.d.ts

@@ -1 +1,17 @@
+export declare const set_container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
 export declare const inline_container: string;

package/dist/SetContainer/SetContainer.css.js

@@ -1,5 +1,10 @@
 /* empty css                                */
-var inline_container = "_18ygy9m0";
+/* empty css                                   */
+/* empty css                                */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var set_container = createRuntimeFn({ defaultClassName: "_18ygy9m0", variantClassNames: { variant: { primary: "_18ygy9m1", secondary: "_18ygy9m2", tertiary: "_18ygy9m3", quaternary: "_18ygy9m4" } }, defaultVariants: {}, compoundVariants: [] });
+var inline_container = "_18ygy9m5";
 export {
-  inline_container
+  inline_container,
+  set_container
 };

package/dist/SetContainer/SetContainer.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { section_text, header_section } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
@@ -32,7 +32,7 @@ import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "react-hook-form";
-import { inline_container } from "./SetContainer.css.js";
+import { set_container, inline_container } from "./SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */
@@ -53,20 +53,27 @@ const SetContainer = ({
   children
 }) => {
   const billboard_variant = getVariant(variant);
-  return /* @__PURE__ */ jsxs("section", { className: `containment section_spacer`, children: [
-    (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
-      headline && /* @__PURE__ */ jsx(
-        "h2",
-        {
-          className: `header_2 ${header_section({ variant: billboard_variant })}`,
-          children: headline
-        }
-      ),
-      bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${inline_container}`, children }),
-    additionalDetails && /* @__PURE__ */ jsx("div", { className: clsx(section_text, "push_up_32"), children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
-  ] }, id);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: clsx(set_container({ variant: getVariant(variant) })),
+      children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
+        (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
+          headline && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: `header_2 ${header_section({ variant: billboard_variant })}`,
+              children: headline
+            }
+          ),
+          bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${inline_container}`, children }),
+        additionalDetails && /* @__PURE__ */ jsx("div", { className: clsx(section_text), children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
+      ] })
+    },
+    id
+  );
 };
 export {
   SetContainer

package/dist/SetContainer/index.js

@@ -1,6 +1,7 @@
 import { SetContainer } from "./SetContainer.js";
-import { inline_container } from "./SetContainer.css.js";
+import { inline_container, set_container } from "./SetContainer.css.js";
 export {
   SetContainer,
-  inline_container
+  inline_container,
+  set_container
 };

package/dist/assets/FaqAccordion/FaqAccordion.css

@@ -13,6 +13,7 @@
   letter-spacing: 0.2px;
   color: var(--_1073cm83);
   font-weight: 600;
+  font-family: var(--header-font-family);
 }
 .ph6wj62 {
   display: flex;

package/dist/assets/HeroBanner/HeroBanner.css

@@ -168,6 +168,11 @@
     max-width: 100%;
   }
 }
+@media (max-width: 450px) {
+  ._1ye8k3fa {
+    width: 100%;
+  }
+}
 @media screen and (max-width:1024px) {
   ._1ye8k3fl {
     flex-direction: column;

package/dist/assets/IconBillboard/IconBillboard.css

@@ -94,7 +94,8 @@
 }
 ._1r4ovbui {
   margin-inline: auto;
-  margin-bottom: 2.5rem;
+  padding-bottom: 2.5rem;
+  padding-top: 2.5rem;
   text-align: center;
   max-width: 1000px;
 }

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -1,10 +1,10 @@
 ._1m7m2a0 {
   height: auto;
 }
-._18ygy9m0 ._1m7m2a0 {
+._18ygy9m5 ._1m7m2a0 {
   flex-direction: column;
 }
-._18ygy9m0 ._1m7m2a0:only-child {
+._18ygy9m5 ._1m7m2a0:only-child {
   flex-direction: row;
 }
 ._1m7m2a1 {
@@ -23,18 +23,18 @@
   background: var(--_1073cm8m);
   color: var(--_1073cm8n);
 }
-._18ygy9m0 ._1m7m2a6 {
+._18ygy9m5 ._1m7m2a6 {
   flex-direction: column;
 }
-._18ygy9m0 ._1m7m2a7 {
+._18ygy9m5 ._1m7m2a7 {
   flex-direction: column-reverse;
   justify-content: space-between;
 }
-._18ygy9m0 > .billboard > div {
+._18ygy9m5 > .billboard > div {
   width: 100%;
   max-width: 100%;
 }
-._18ygy9m0 .billboard {
+._18ygy9m5 .billboard {
   width: 100%;
 }
 ._1073cm80 ._1m7m2a9 {
@@ -89,7 +89,7 @@
   width: 100%;
   height: auto;
 }
-._18ygy9m0 .billboard ._1m7m2aj img {
+._18ygy9m5 .billboard ._1m7m2aj img {
   max-height: 300px;
 }
 ._1m7m2aj img {
@@ -103,7 +103,7 @@
   width: 100%;
   max-width: 50%;
 }
-._18ygy9m0 ._1m7m2an {
+._18ygy9m5 ._1m7m2an {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -141,7 +141,7 @@
   background-size: cover;
   background-position: center center;
 }
-._18ygy9m0 ._1m7m2au {
+._18ygy9m5 ._1m7m2au {
   min-height: 330px;
 }
 ._1m7m2av {
@@ -205,7 +205,7 @@
   ._1m7m2au {
     min-height: 275px;
   }
-  ._18ygy9m0 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2au {
     min-height: 275px;
   }
   ._1m7m2ax {
@@ -222,7 +222,7 @@
   ._1m7m2au {
     min-height: 200px;
   }
-  ._18ygy9m0 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2au {
     min-height: 200px;
   }
 }
@@ -230,7 +230,7 @@
   ._1m7m2au {
     min-height: 160px;
   }
-  ._18ygy9m0 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2au {
     min-height: 160px;
   }
 }

package/dist/assets/SetContainer/SetContainer.css

@@ -1,13 +1,25 @@
-._18ygy9m0 {
+._18ygy9m1 {
+  background: var(--_1073cm81);
+}
+._18ygy9m2 {
+  background: var(--_1073cm88);
+}
+._18ygy9m3 {
+  background: var(--_1073cm8f);
+}
+._18ygy9m4 {
+  background: var(--_1073cm8m);
+}
+._18ygy9m5 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 24px;
 }
-._18ygy9m0 .containment {
+._18ygy9m5 .containment {
   width: 100%;
 }
-@media screen and (max-width: 1024px) {
-  ._18ygy9m0 {
-    grid-template-columns: 100%;
+@media screen and (max-width: 1023px) {
+  ._18ygy9m5 {
+    grid-template-columns: 1fr;
   }
 }

package/dist/assets/Table/Table.css

@@ -1,5 +1,6 @@
 ._1nivbwe0 {
   border-radius: 16px;
+  height: 100%;
 }
 ._1nivbwe1 {
   background: #f4f4f4;
@@ -220,7 +221,7 @@ tr:last-child td {
 }
 @media screen and (max-width: 768px) {
   ._1nivbwed:first-child {
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: 0 15px 20px 0px rgb(0 0 0 / 0.3);
     z-index: 2;
     top: 0;
     width: 25%;
@@ -235,7 +236,7 @@ tr:last-child td {
     font-size: 14px;
   }
   ._1nivbwej:first-child {
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: 0 15px 20px 0px rgb(0 0 0 / 0.3);
     z-index: 2;
     width: 25%;
   }
@@ -283,4 +284,9 @@ tr:last-child td {
     border-radius: 0;
     overflow-x: scroll;
   }
+}
+@media screen and (max-width: 450px) {
+  ._1nivbwe12 {
+    min-width: 100%;
+  }
 }

package/dist/main.js

@@ -44,7 +44,7 @@ import { default as default2 } from "./NavigationMenu/AxosAdvisor/index.js";
 import { default as default3 } from "./NavigationMenu/AxosFiduciary/index.js";
 import { SecondaryFooter } from "./SecondaryFooter/index.js";
 import { SetContainer } from "./SetContainer/SetContainer.js";
-import { inline_container } from "./SetContainer/SetContainer.css.js";
+import { inline_container, set_container } from "./SetContainer/SetContainer.css.js";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table/Table.js";
 import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table/Table.css.js";
 import { TextBlock } from "./TextBlock/TextBlock.js";
@@ -222,6 +222,7 @@ export {
   section_container,
   section_text,
   section_text_ImageBillboard,
+  set_container,
   shortUrl,
   show,
   single_container,

package/dist/utils/allowedAxosDomains.js

@@ -1,11 +1,10 @@
 const moreDomains = {
   "{AXOS}": "https://www.axos.com",
   "{AXOSBANK}": "https://www.axosbank.com",
-  "{AXOSCLEARING}": "https://axosclearing.com/",
+  "{AXOSCLEARING}": "https://axosclearing.com",
   "{AAS}": "https://www.axosadvisorservices.com",
   "{NATIONWIDE}": "https://www.nationwide.axosbank.com",
-  // '{ENROLLMENT}': process.env.NEXT_PUBLIC_ENROLLMENT_URL as string,
-  // '{SECENROLLMENT}': process.env.NEXT_PUBLIC_ENROLLMENT2_URL as string,
+  "{ENROLLMENT}": "https://enrollment.axosbank.com",
   "{ASSETSURL}": "https://assets.axos.com",
   "{IMAGEASSETSURL}": "https://images.axos.com",
   "{ONLINEBANKING}": "https://onlinebanking.uat.axsobank.com",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",