@axos-web-dev/shared-components 0.0.113 → 0.0.115

package/dist/Calculators/ApyCalculator/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../Button/Button.js";
 import { button } from "../../Button/Button.css.js";
 import { useState, useCallback, useEffect } from "react";
-import { container, apy_calculator, calculator_section, section_header, header_theme, mt_8, apy_calculator_form, pis_0, errorTag, fieldset, field_row, relative, label_symbol, cash, prefix_pad, percent, submit_section, span_12, form_disclosure, marketing, marketingTile, bodyContent } from "./ApyCalculator.css.js";
-import { Button } from "../../Button/Button.js";
 import "react-use";
-import { getVariant } from "../../utils/getVariant.js";
 import { Chevron } from "../../Chevron/index.js";
 import { section_container, content, headerIconBillboard, buttons } from "../../IconBillboard/IconBillboard.css.js";
+import { getVariant } from "../../utils/getVariant.js";
+import { container, apy_calculator, calculator_section, section_header, header_theme, mt_8, apy_calculator_form, pis_0, errorTag, fieldset, field_row, relative, label_symbol, cash, prefix_pad, percent, submit_section, span_12, form_disclosure, marketing, marketingTile, bodyContent } from "./ApyCalculator.css.js";
 const ApyCalculator = ({
   header,
   body,
@@ -108,210 +108,204 @@ const ApyCalculator = ({
     setAPR(new_apr);
     convertInterest();
   };
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      className: `section_spacer ${container({ variant: getVariant(variant) })}`,
-      children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
-        /* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
-          (header || body) && /* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
-            header && /* @__PURE__ */ jsx(
-              "h2",
+  return /* @__PURE__ */ jsx("section", { className: `${container({ variant: getVariant(variant) })}`, children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
+      (header || body) && /* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
+        header && /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: `header_2 ${header_theme({ variant: calculator_variant })}`,
+            children: header
+          }
+        ),
+        body && /* @__PURE__ */ jsx("div", { className: mt_8, children: body })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
+        /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: errors.length > 0 && /* @__PURE__ */ jsx("ul", { className: pis_0, children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { className: `${errorTag}`, children: error }, index)) }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "initDeposit", children: "Initial Deposit" }),
+            /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${cash}`, children: "$" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "initDeposit",
+                type: "number",
+                step: 100,
+                name: "initDeposit",
+                value: initialDeposit,
+                onChange: (e) => setInititalDeposit(parseInt(e.target.value))
+              }
+            )
+          ] }),
+          /* @__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} bordered`,
+                id: "apr",
+                type: "number",
+                step: 0.01,
+                name: "apr",
+                value: APR,
+                onChange: (e) => updateAPR(parseFloat(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: "%" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "apy",
+                type: "number",
+                step: 0.01,
+                name: "apy",
+                value: APY,
+                onChange: (e) => updateAPY(parseFloat(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "months", children: "Months" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "months",
+                min: 1,
+                maxLength: 4,
+                type: "number",
+                name: "months",
+                value: months,
+                onChange: (e) => setMonths(parseInt(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "compounding", children: "Compounding" }),
+            /* @__PURE__ */ jsxs(
+              "select",
               {
-                className: `header_2 ${header_theme({ variant: calculator_variant })}`,
-                children: header
+                className: `${prefix_pad} bordered`,
+                id: "compounding",
+                name: "compounding",
+                value: compounding,
+                onChange: (e) => setCompounding(Number(e.target.value)),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: 360, children: "Daily" }),
+                  /* @__PURE__ */ jsx("option", { value: 12, children: "Monthly" }),
+                  /* @__PURE__ */ jsx("option", { value: 4, children: "Quarterly" }),
+                  /* @__PURE__ */ jsx("option", { value: 2, children: "Semi-Annual" }),
+                  /* @__PURE__ */ jsx("option", { value: 1, children: "Yearly" })
+                ]
               }
-            ),
-            body && /* @__PURE__ */ jsx("div", { className: mt_8, children: body })
+            )
           ] }),
-          /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
-            /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: errors.length > 0 && /* @__PURE__ */ jsx("ul", { className: pis_0, children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { className: `${errorTag}`, children: error }, index)) }) }),
-            /* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
-              /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
-                /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "initDeposit", children: "Initial Deposit" }),
-                /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${cash}`, children: "$" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${prefix_pad} bordered`,
-                    id: "initDeposit",
-                    type: "number",
-                    step: 100,
-                    name: "initDeposit",
-                    value: initialDeposit,
-                    onChange: (e) => setInititalDeposit(parseInt(e.target.value))
-                  }
-                )
-              ] }),
-              /* @__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} bordered`,
-                    id: "apr",
-                    type: "number",
-                    step: 0.01,
-                    name: "apr",
-                    value: APR,
-                    onChange: (e) => updateAPR(parseFloat(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: "%" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${prefix_pad} bordered`,
-                    id: "apy",
-                    type: "number",
-                    step: 0.01,
-                    name: "apy",
-                    value: APY,
-                    onChange: (e) => updateAPY(parseFloat(e.target.value))
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
-                /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "months", children: "Months" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${prefix_pad} bordered`,
-                    id: "months",
-                    min: 1,
-                    maxLength: 4,
-                    type: "number",
-                    name: "months",
-                    value: months,
-                    onChange: (e) => setMonths(parseInt(e.target.value))
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
-                /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "compounding", children: "Compounding" }),
-                /* @__PURE__ */ jsxs(
-                  "select",
-                  {
-                    className: `${prefix_pad} bordered`,
-                    id: "compounding",
-                    name: "compounding",
-                    value: compounding,
-                    onChange: (e) => setCompounding(Number(e.target.value)),
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: 360, children: "Daily" }),
-                      /* @__PURE__ */ jsx("option", { value: 12, children: "Monthly" }),
-                      /* @__PURE__ */ jsx("option", { value: 4, children: "Quarterly" }),
-                      /* @__PURE__ */ jsx("option", { value: 2, children: "Semi-Annual" }),
-                      /* @__PURE__ */ jsx("option", { value: 1, children: "Yearly" })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
-                /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "monthlyDeposits", children: "Monthly Deposits" }),
-                /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${cash}`, children: "$" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${prefix_pad} bordered`,
-                    id: "monthlyDeposits",
-                    maxLength: 25,
-                    type: "number",
-                    value: monthlyDeposits,
-                    name: "monthlyDeposits",
-                    onChange: (e) => setMonthlyDeposits(parseInt(e.target.value))
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
-                /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "endBal", children: "Ending Balance" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${prefix_pad} bordered`,
-                    id: "endBal",
-                    maxLength: 30,
-                    type: "string",
-                    readOnly: true,
-                    name: "endBal",
-                    value: endingBalance
-                  }
-                )
-              ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "monthlyDeposits", children: "Monthly Deposits" }),
+            /* @__PURE__ */ jsx("label", { className: `${label_symbol} ${cash}`, children: "$" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "monthlyDeposits",
+                maxLength: 25,
+                type: "number",
+                value: monthlyDeposits,
+                name: "monthlyDeposits",
+                onChange: (e) => setMonthlyDeposits(parseInt(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
+            /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "endBal", children: "Ending Balance" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${prefix_pad} bordered`,
+                id: "endBal",
+                maxLength: 30,
+                type: "string",
+                readOnly: true,
+                name: "endBal",
+                value: endingBalance
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${submit_section} ${span_12} flex center middle push_up_32`,
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: `${button({ color: "primary", size: "medium", rounded: "medium" })} center`,
+                  type: "button",
+                  value: "Calculate",
+                  onClick: handleCalculate
+                }
+              )
+            }
+          ),
+          disclosure && /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: disclosure })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${marketing} ${section_container}`, children: marketingTiles && marketingTiles?.map(
+      ({ id, headline, bodyCopy, callToActionRow }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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: `${submit_section} ${span_12} flex center middle push_up_32`,
-                  children: /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      className: `${button({ color: "primary", size: "medium", rounded: "medium" })} center`,
-                      type: "button",
-                      value: "Calculate",
-                      onClick: handleCalculate
-                    }
-                  )
+                  className: `header_3 ${header_theme({ variant: calculator_variant })}`,
+                  children: headline
                 }
               ),
-              disclosure && /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: disclosure })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: `${marketing} ${section_container}`, children: marketingTiles && marketingTiles?.map(
-          ({ id, headline, bodyCopy, callToActionRow }) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              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 })
-                ] }) }),
-                callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} middle`, children: callToActionRow.map(
-                  ({
-                    id: id2,
-                    variant: variant2,
-                    displayText,
-                    targetUrl,
-                    type
-                  }) => type === "Button" ? /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      targetUrl,
-                      color: getVariant(variant2),
-                      size: "medium",
-                      rounded: "medium",
-                      children: displayText
-                    },
-                    id2
-                  ) : /* @__PURE__ */ jsx(
-                    Chevron,
-                    {
-                      targetUrl,
-                      variant: getVariant(variant2),
-                      children: displayText
-                    },
-                    id2
-                  )
-                ) })
-              ]
-            },
-            id
-          )
-        ) })
-      ] })
-    }
-  );
+              /* @__PURE__ */ jsx("div", { children: bodyCopy })
+            ] }) }),
+            callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} middle`, children: callToActionRow.map(
+              ({
+                id: id2,
+                variant: variant2,
+                displayText,
+                targetUrl,
+                type
+              }) => type === "Button" ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  targetUrl,
+                  color: getVariant(variant2),
+                  size: "medium",
+                  rounded: "medium",
+                  children: displayText
+                },
+                id2
+              ) : /* @__PURE__ */ jsx(
+                Chevron,
+                {
+                  targetUrl,
+                  variant: getVariant(variant2),
+                  children: displayText
+                },
+                id2
+              )
+            ) })
+          ]
+        },
+        id
+      )
+    ) })
+  ] }) });
 };
 export {
   ApyCalculator

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

@@ -1,7 +1,7 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                 */
-/* empty css                                                                                 */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                             */
+/* empty css                                        */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var container = createRuntimeFn({ defaultClassName: "_1mjmksf0", variantClassNames: { variant: { primary: "_1mjmksf1", secondary: "_1mjmksf2", tertiary: "_1mjmksf3", quaternary: "_1mjmksf4" } }, defaultVariants: {}, compoundVariants: [] });
 var table_container = "_1mjmksf5";