@axos-web-dev/shared-components 0.0.1

package/dist/ApyCalculator/index.js

@@ -0,0 +1,278 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/index.js";
+import { button } from "../Button/Button.css.js";
+import { Chevron } from "../Chevron/index.js";
+import { useState, useEffect } from "react";
+import { vars } from "../themes/vars.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 [months, setMonths] = useState(12);
+  const [compounding, setCompounding] = useState(360);
+  const [monthlyDeposits, setMonthlyDeposits] = useState(100);
+  const [endingBalance, setEndingBalance] = useState("");
+  const [error, setError] = useState("");
+  const [interestRate, setInterestRate] = useState(0);
+  const isValidNumber = (input) => {
+    if (typeof input !== "number") {
+      return false;
+    } else if (input <= 0) {
+      return false;
+    } else
+      return true;
+  };
+  const convertInterest = () => {
+    const newInterestRate = 0.01 * APY;
+    setInterestRate(newInterestRate);
+  };
+  useEffect(() => {
+    convertInterest();
+  }, [interestRate, setInterestRate]);
+  const handleCalculate = () => {
+    convertInterest();
+    setError("");
+    if (!isValidNumber(initialDeposit) || !isValidNumber(APY) || !isValidNumber(months) || !isValidNumber(monthlyDeposits)) {
+      setError("Invalid input. Please enter positive numeric values.");
+    } else {
+      let total;
+      if (compounding === 360) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, 30 * months) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, 30 * months) - 1);
+      } else if (compounding === 12) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, months) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months) - 1);
+      } else if (compounding === 4) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, months / 3) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 3) - 1);
+      } else if (compounding === 2) {
+        total = initialDeposit * Math.pow(1 + interestRate / compounding, months / 6) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 6) - 1);
+      } else if (compounding === 1) {
+        total = initialDeposit * Math.pow(1 + interestRate, months / 12) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, months / 12) - 1);
+      } else {
+        total = initialDeposit;
+        for (let i = 0; i < months; i++) {
+          total += monthlyDeposits;
+          total *= Math.pow(1 + interestRate / compounding, compounding / 12);
+        }
+      }
+      setEndingBalance(
+        total.toLocaleString("en-US", { style: "currency", currency: "USD" })
+      );
+    }
+  };
+  const updateAPY = (value) => {
+    setAPY(value);
+    convertInterest();
+  };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: `section_spacer`,
+      style: {
+        background: vars.colors.secondary.background,
+        color: "black",
+        paddingBlock: "42px"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
+          /* @__PURE__ */ jsx("div", { className: `${section_header}`, children: /* @__PURE__ */ jsx("h1", { className: "header_1", children: "APY Interest Calculator" }) }),
+          /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
+            /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: /* @__PURE__ */ jsx("span", { className: `${errorTag}`, children: error }) }),
+            /* @__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}`,
+                    id: "initDeposit",
+                    type: "number",
+                    step: 100,
+                    name: "initDeposit",
+                    value: initialDeposit,
+                    onChange: (e) => setInititalDeposit(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: "%" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `${prefix_pad}`,
+                    id: "apy",
+                    type: "number",
+                    step: 0.01,
+                    name: "apy",
+                    value: APY,
+                    onChange: (e) => updateAPY(Number(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}`,
+                    id: "months",
+                    maxLength: 4,
+                    type: "number",
+                    name: "months",
+                    value: months,
+                    onChange: (e) => setMonths(Number(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}`,
+                    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}`,
+                    id: "monthlyDeposits",
+                    maxLength: 25,
+                    type: "number",
+                    value: monthlyDeposits,
+                    name: "monthlyDeposits",
+                    onChange: (e) => setMonthlyDeposits(Number(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}`,
+                    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: "secondary", size: "medium", rounded: "medium" })} center`,
+                      type: "button",
+                      value: "Calculate",
+                      onClick: handleCalculate
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "NOTE:" }),
+                " Our APY Interest Calculator is an educational tool to help you determine potential earnings. Your calculator results are estimates and do not guarantee cost savings or tax benefits. UFB Direct does not guarantee your results as determined by using this calculator."
+              ] }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `${marketing} section_spacer`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex_col", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${marketing_tile} rounded framed flex flex_col between ${span_12}`,
+                style: { backgroundColor: "#efeef0", maxWidth: "520px" },
+                children: [
+                  /* @__PURE__ */ jsx("h2", { className: "header_2", children: "Select Savings" }),
+                  /* @__PURE__ */ jsx("div", { className: "push_up mb_0", children: "Zero fees. Up to 0.20% APY*. Complimentary ATM card. Select Savings helps your clients bank smarter with an account that rewards their savvy money habits." }),
+                  /* @__PURE__ */ jsxs("div", { className: `${cta_section} push_up_24 flex flex_row`, children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        id: "btn-savings",
+                        targetUrl: "https://www.axosadvisor.com/Products/Select-Savings",
+                        color: "secondary",
+                        size: "medium",
+                        rounded: "medium",
+                        children: "Learn More"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Chevron, { targetUrl: "#", variant: "primary", children: "Open an Account" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "section",
+              {
+                className: `${marketing_tile} section_spacer framed rounded`,
+                id: "table",
+                children: /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h2", { className: "header_2", children: "Recommended Accounts" }),
+                  /* @__PURE__ */ jsxs("table", { className: `${marketing_table}`, children: [
+                    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("th", { scope: "col slate", children: "Account" }),
+                      /* @__PURE__ */ jsx("th", { scope: "col slate", children: "APY*" })
+                    ] }) }),
+                    /* @__PURE__ */ jsxs("tbody", { children: [
+                      /* @__PURE__ */ jsxs("tr", { children: [
+                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Money Market", children: /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            className: "link",
+                            href: "https://www.axosadvisor.com/Products/Select-Savings",
+                            children: "Select Savings"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.20%" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("tr", { children: [
+                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Savings", children: /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            className: "link",
+                            href: "https://www.axosadvisor.com/Products/Select-Checking",
+                            children: "Select Checking"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.10%" })
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", {})
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  ApyCalculator
+};
+//# sourceMappingURL=index.js.map

package/dist/ApyCalculator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../lib/ApyCalculator/index.tsx"],"sourcesContent":["\"use client\";\nimport { Button } from \"@lib/Button\";\nimport { button } from \"@lib/Button/Button.css\";\nimport { Chevron } from \"@lib/Chevron\";\nimport { FC, useEffect, useState } from \"react\";\nimport { vars } from \"../themes/vars.css\";\nimport {\n  apy_calculator,\n  apy_calculator_form,\n  calculator_section,\n  cash,\n  cta_section,\n  errorTag,\n  field_row,\n  fieldset,\n  form_disclosure,\n  label_symbol,\n  marketing,\n  marketing_table,\n  marketing_tile,\n  percent,\n  prefix_pad,\n  relative,\n  section_header,\n  span_12,\n  submit_section,\n} from \"./ApyCalculator.css\";\n\nexport const ApyCalculator: FC = () => {\n  const [initialDeposit, setInititalDeposit] = useState<number>(1000);\n  const [APY, setAPY] = useState<number>(2.25);\n  const [months, setMonths] = useState<number>(12);\n  const [compounding, setCompounding] = useState<number>(360);\n  const [monthlyDeposits, setMonthlyDeposits] = useState<number>(100);\n  const [endingBalance, setEndingBalance] = useState<string>(\"\");\n  const [error, setError] = useState<string>(\"\");\n  const [interestRate, setInterestRate] = useState<number>(0);\n\n  const isValidNumber = (input: HTMLInputElement | number) => {\n    if (typeof input !== \"number\") {\n      return false;\n    } else if (input <= 0) {\n      return false;\n    } else return true;\n  };\n\n  const convertInterest = () => {\n    const newInterestRate = 0.01 * APY;\n    setInterestRate(newInterestRate);\n  };\n\n  useEffect(() => {\n    convertInterest();\n  }, [interestRate, setInterestRate]);\n\n  const handleCalculate = () => {\n    convertInterest();\n    setError(\"\");\n    if (\n      !isValidNumber(initialDeposit) ||\n      !isValidNumber(APY) ||\n      !isValidNumber(months) ||\n      !isValidNumber(monthlyDeposits)\n    ) {\n      setError(\"Invalid input. Please enter positive numeric values.\");\n    } else {\n      let total;\n      if (compounding === 360) {\n        total =\n          initialDeposit *\n            Math.pow(1 + interestRate / compounding, 30 * months) +\n          (monthlyDeposits / (interestRate / 12)) *\n            (Math.pow(1 + interestRate / compounding, 30 * months) - 1);\n      } else if (compounding === 12) {\n        total =\n          initialDeposit * Math.pow(1 + interestRate / compounding, months) +\n          (monthlyDeposits / (interestRate / 12)) *\n            (Math.pow(1 + interestRate / compounding, months) - 1);\n      } else if (compounding === 4) {\n        total =\n          initialDeposit *\n            Math.pow(1 + interestRate / compounding, months / 3) +\n          (monthlyDeposits / (interestRate / 12)) *\n            (Math.pow(1 + interestRate / compounding, months / 3) - 1);\n      } else if (compounding === 2) {\n        total =\n          initialDeposit *\n            Math.pow(1 + interestRate / compounding, months / 6) +\n          (monthlyDeposits / (interestRate / 12)) *\n            (Math.pow(1 + interestRate / compounding, months / 6) - 1);\n      } else if (compounding === 1) {\n        total =\n          initialDeposit * Math.pow(1 + interestRate, months / 12) +\n          (monthlyDeposits / (interestRate / 12)) *\n            (Math.pow(1 + interestRate / compounding, months / 12) - 1);\n      } else {\n        total = initialDeposit;\n        for (let i = 0; i < months; i++) {\n          total += monthlyDeposits;\n          total *= Math.pow(1 + interestRate / compounding, compounding / 12);\n        }\n      }\n      setEndingBalance(\n        total.toLocaleString(\"en-US\", { style: \"currency\", currency: \"USD\" })\n      );\n    }\n  };\n\n  const updateAPY = (value: number) => {\n    setAPY(value);\n    convertInterest();\n  };\n\n  return (\n    <section\n      className={`section_spacer`}\n      style={{\n        background: vars.colors.secondary.background,\n        color: \"black\",\n        paddingBlock: \"42px\",\n      }}\n    >\n      <div className={`${apy_calculator} containment flex between`}>\n        <div className={`${calculator_section}`}>\n          <div className={`${section_header}`}>\n            <h1 className=\"header_1\">APY Interest Calculator</h1>\n          </div>\n          <form id=\"calculator_form\" className={`${apy_calculator_form}`}>\n            <div id=\"errmsgbox\" className=\" flex middle\">\n              <span className={`${errorTag}`}>{error}</span>\n            </div>\n            <div className={`${fieldset}`}>\n              <div className={`${field_row} ${relative} flex flex_col`}>\n                <label className=\"input_label\" htmlFor=\"initDeposit\">\n                  Initial Deposit\n                </label>\n                <label className={`${label_symbol} ${cash}`}>$</label>\n                <input\n                  className={`${prefix_pad}`}\n                  id=\"initDeposit\"\n                  type=\"number\"\n                  step={100}\n                  name=\"initDeposit\"\n                  value={initialDeposit}\n                  onChange={(e) => setInititalDeposit(Number(e.target.value))}\n                />\n              </div>\n              <div className={`${field_row} ${relative} flex flex_col`}>\n                <label className=\"input_label\" htmlFor=\"apy\">\n                  {\"APY (Annual Percentage Yield)\"}\n                </label>\n                <label className={`${label_symbol} ${percent}`}>%</label>\n                <input\n                  className={`${prefix_pad}`}\n                  id=\"apy\"\n                  type=\"number\"\n                  step={0.01}\n                  name=\"apy\"\n                  value={APY}\n                  onChange={(e) => updateAPY(Number(e.target.value))}\n                />\n              </div>\n              <div className={`${field_row} ${relative} flex flex_col`}>\n                <label className=\"input_label\" htmlFor=\"months\">\n                  Months\n                </label>\n                <input\n                  className={`${prefix_pad}`}\n                  id=\"months\"\n                  maxLength={4}\n                  type=\"number\"\n                  name=\"months\"\n                  value={months}\n                  onChange={(e) => setMonths(Number(e.target.value))}\n                />\n              </div>\n              <div className={`${field_row} ${relative} flex flex_col`}>\n                <label className=\"input_label\" htmlFor=\"compounding\">\n                  Compounding\n                </label>\n                <select\n                  className={`${prefix_pad}`}\n                  id=\"compounding\"\n                  name=\"compounding\"\n                  value={compounding}\n                  onChange={(e) => setCompounding(Number(e.target.value))}\n                >\n                  <option value={360}>Daily</option>\n                  <option value={12}>Monthly</option>\n                  <option value={4}>Quarterly</option>\n                  <option value={2}>Semi-Annual</option>\n                  <option value={1}>Yearly</option>\n                </select>\n              </div>\n              <div className={`${field_row} ${relative} flex flex_col`}>\n                <label className=\"input_label\" htmlFor=\"monthlyDeposits\">\n                  Monthly Deposits\n                </label>\n                <label className={`${label_symbol} ${cash}`}>$</label>\n                <input\n                  className={`${prefix_pad}`}\n                  id=\"monthlyDeposits\"\n                  maxLength={25}\n                  type=\"number\"\n                  value={monthlyDeposits}\n                  name=\"monthlyDeposits\"\n                  onChange={(e) => setMonthlyDeposits(Number(e.target.value))}\n                />\n              </div>\n              <div className={`${field_row} ${relative} flex flex_col`}>\n                <label className=\"input_label\" htmlFor=\"endBal\">\n                  Ending Balance\n                </label>\n                <input\n                  className={`${prefix_pad}`}\n                  id=\"endBal\"\n                  maxLength={30}\n                  type=\"string\"\n                  readOnly\n                  name=\"endBal\"\n                  value={endingBalance}\n                />\n              </div>\n              <div\n                className={`${submit_section} ${span_12} flex center middle push_up_32`}\n              >\n                <input\n                  className={`${button({ color: \"secondary\", size: \"medium\", rounded: \"medium\" })} center`}\n                  type=\"button\"\n                  value=\"Calculate\"\n                  onClick={handleCalculate}\n                />\n              </div>\n              <div className={`${form_disclosure} push_up_24`}>\n                <p>\n                  <strong>NOTE:</strong> Our APY Interest Calculator is an\n                  educational tool to help you determine potential earnings.\n                  Your calculator results are estimates and do not guarantee\n                  cost savings or tax benefits. UFB Direct does not guarantee\n                  your results as determined by using this calculator.\n                </p>\n              </div>\n            </div>\n          </form>\n        </div>\n        <div className={`${marketing} section_spacer`}>\n          <div className=\"flex flex_col\">\n            <div\n              className={`${marketing_tile} rounded framed flex flex_col between ${span_12}`}\n              style={{ backgroundColor: \"#efeef0\", maxWidth: \"520px\" }}\n            >\n              <h2 className=\"header_2\">Select Savings</h2>\n              <div className=\"push_up mb_0\">\n                Zero fees. Up to 0.20% APY*. Complimentary ATM card. Select\n                Savings helps your clients bank smarter with an account that\n                rewards their savvy money habits.\n              </div>\n              <div className={`${cta_section} push_up_24 flex flex_row`}>\n                <Button\n                  id=\"btn-savings\"\n                  targetUrl={\n                    \"https://www.axosadvisor.com/Products/Select-Savings\"\n                  }\n                  color=\"secondary\"\n                  size=\"medium\"\n                  rounded=\"medium\"\n                >\n                  Learn More\n                </Button>\n                <Chevron targetUrl={\"#\"} variant=\"primary\">\n                  Open an Account\n                </Chevron>\n              </div>\n            </div>\n            <section\n              className={`${marketing_tile} section_spacer framed rounded`}\n              id=\"table\"\n            >\n              <div>\n                <h2 className=\"header_2\">Recommended Accounts</h2>\n                <table className={`${marketing_table}`}>\n                  <thead>\n                    <tr>\n                      <th scope=\"col slate\">Account</th>\n                      <th scope=\"col slate\">APY*</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr>\n                      <td aria-label=\"UFB Secure Money Market\">\n                        <a\n                          className=\"link\"\n                          href=\"https://www.axosadvisor.com/Products/Select-Savings\"\n                        >\n                          Select Savings\n                        </a>\n                      </td>\n                      <td aria-label=\"Up to 5.25%\">Up to 0.20%</td>\n                    </tr>\n                    <tr>\n                      <td aria-label=\"UFB Secure Savings\">\n                        <a\n                          className=\"link\"\n                          href=\"https://www.axosadvisor.com/Products/Select-Checking\"\n                        >\n                          Select Checking\n                        </a>\n                      </td>\n                      <td aria-label=\"Up to 5.25%\">Up to 0.10%</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </section>\n          </div>\n          <div></div>\n        </div>\n      </div>\n    </section>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/BulletItem/BulletItem.css.d.ts

@@ -0,0 +1,2 @@
+export declare const bulletIcon: string;
+//# sourceMappingURL=BulletItem.css.d.ts.map

package/dist/BulletItem/BulletItem.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletItem.css.d.ts","sourceRoot":"","sources":["../../lib/BulletItem/BulletItem.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAGrB,CAAC"}

package/dist/BulletItem/BulletItem.css.js

@@ -0,0 +1,6 @@
+/* empty css                              */
+var bulletIcon = "d5iqlx0";
+export {
+  bulletIcon
+};
+//# sourceMappingURL=BulletItem.css.js.map

package/dist/BulletItem/BulletItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/BulletItem/BulletItem.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+export interface BulletItemProps extends PropsWithChildren {
+    variant?: "primary" | "secondary" | "tertiary" | "quaternary";
+}
+export declare const BulletItem: (props: BulletItemProps) => import("react/jsx-dev-runtime").JSX.Element;
+//# sourceMappingURL=BulletItem.d.ts.map

package/dist/BulletItem/BulletItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletItem.d.ts","sourceRoot":"","sources":["../../lib/BulletItem/BulletItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;CAC/D;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,gDAiBhD,CAAC"}

package/dist/BulletItem/BulletItem.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { listItem } from "../IconBillboard/IconBillboard.css.js";
+import SvgCheckCircle from "../icons/CheckCircle.js";
+import SvgCheckCircleLight from "../icons/CheckCircleLight.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+import "../themes/vars.css.ts.vanilla.css.js";
+/* empty css                                                    */
+import { bulletIcon } from "./BulletItem.css.js";
+const BulletItem = (props) => {
+  const iconCheckVariant = /* @__PURE__ */ new Map([
+    ["primary", /* @__PURE__ */ jsx(SvgCheckCircle, { height: 18, width: 18 })],
+    ["secondary", /* @__PURE__ */ jsx(SvgCheckCircle, { height: 18, width: 18 })],
+    ["tertiary", /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })],
+    ["quaternary", /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })],
+    [void 0, /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })]
+  ]);
+  const Icon = iconCheckVariant.get(props.variant);
+  return /* @__PURE__ */ jsxs("li", { className: listItem, children: [
+    /* @__PURE__ */ jsx("span", { className: bulletIcon, children: Icon }),
+    /* @__PURE__ */ jsx("div", { children: props.children })
+  ] });
+};
+export {
+  BulletItem
+};
+//# sourceMappingURL=BulletItem.js.map

package/dist/BulletItem/BulletItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletItem.js","sources":["../../lib/BulletItem/BulletItem.tsx"],"sourcesContent":["\"use client\";\nimport { listItem } from \"@lib/IconBillboard/IconBillboard.css\";\nimport { CheckCircle, CheckCircleLight } from \"@lib/icons\";\nimport { PropsWithChildren } from \"react\";\nimport { bulletIcon } from \"./BulletItem.css\";\nexport interface BulletItemProps extends PropsWithChildren {\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"quaternary\";\n}\n\nexport const BulletItem = (props: BulletItemProps) => {\n  const iconCheckVariant = new Map([\n    [\"primary\", <CheckCircle height={18} width={18} />],\n    [\"secondary\", <CheckCircle height={18} width={18} />],\n    [\"tertiary\", <CheckCircleLight height={18} width={18} />],\n    [\"quaternary\", <CheckCircleLight height={18} width={18} />],\n    [undefined, <CheckCircleLight height={18} width={18} />],\n  ]);\n\n  const Icon = iconCheckVariant.get(props.variant);\n\n  return (\n    <li className={listItem}>\n      <span className={bulletIcon}>{Icon}</span>\n      <div>{props.children}</div>\n    </li>\n  );\n};\n"],"names":["CheckCircle","CheckCircleLight"],"mappings":";;;;;;;;AASa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA,uCAAuB,IAAI;AAAA,IAC/B,CAAC,WAAY,oBAAAA,gBAAA,EAAY,QAAQ,IAAI,OAAO,IAAI,CAAE;AAAA,IAClD,CAAC,aAAc,oBAAAA,gBAAA,EAAY,QAAQ,IAAI,OAAO,IAAI,CAAE;AAAA,IACpD,CAAC,YAAa,oBAAAC,qBAAA,EAAiB,QAAQ,IAAI,OAAO,IAAI,CAAE;AAAA,IACxD,CAAC,cAAe,oBAAAA,qBAAA,EAAiB,QAAQ,IAAI,OAAO,IAAI,CAAE;AAAA,IAC1D,CAAC,QAAY,oBAAAA,qBAAA,EAAiB,QAAQ,IAAI,OAAO,IAAI,CAAE;AAAA,EAAA,CACxD;AAED,QAAM,OAAO,iBAAiB,IAAI,MAAM,OAAO;AAG7C,SAAA,qBAAC,MAAG,EAAA,WAAW,UACb,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAK,WAAW,YAAa,UAAK,MAAA;AAAA,IACnC,oBAAC,OAAK,EAAA,UAAA,MAAM,SAAS,CAAA;AAAA,EACvB,EAAA,CAAA;AAEJ;"}

package/dist/BulletItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BulletItem";
+//# sourceMappingURL=index.d.ts.map

package/dist/BulletItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/BulletItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/BulletItem/index.js

@@ -0,0 +1,5 @@
+import { BulletItem } from "./BulletItem.js";
+export {
+  BulletItem
+};
+//# sourceMappingURL=index.js.map

package/dist/BulletItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,91 @@
+import { RecipeVariants } from "@vanilla-extract/recipes";
+export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:hover": {
+                    background: "transparent";
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:hover": {
+                    background: "transparent";
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:hover": {
+                    background: "transparent";
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    skeleton: {
+        true: {
+            background: "#D4D4D4";
+            borderColor: "#D4D4D4";
+        };
+    };
+    size: {
+        small: {
+            paddingInline: number;
+            paddingTop: number;
+            paddingBottom: number;
+            fontSize: number;
+            lineHeight: "20px";
+        };
+        medium: {
+            paddingInline: number;
+            paddingTop: number;
+            paddingBottom: number;
+            fontSize: number;
+            lineHeight: "24px";
+        };
+        large: {
+            paddingInline: number;
+            paddingTop: number;
+            paddingBottom: number;
+            fontSize: number;
+            lineHeight: "26px";
+        };
+    };
+    disabled: {
+        true: {
+            border: "2px solid transparent";
+            color: "#F4F4F4";
+            background: "transparent";
+            cursor: "not-allowed";
+        };
+    };
+    rounded: {
+        none: {
+            borderRadius: number;
+        };
+        small: {
+            borderRadius: number;
+        };
+        medium: {
+            borderRadius: number;
+        };
+        large: {
+            borderRadius: number;
+        };
+    };
+}>;
+export type ButtonVariants = RecipeVariants<typeof button>;
+//# sourceMappingURL=Button.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../lib/Button/Button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAU,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4LjB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC"}

package/dist/Button/Button.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var button = createRuntimeFn({ defaultClassName: "_13pdpuj0", variantClassNames: { color: { primary: "_13pdpuj1", secondary: "_13pdpuj2", tertiary: "_13pdpuj3" }, skeleton: { true: "_13pdpuj4" }, size: { small: "_13pdpuj5", medium: "_13pdpuj6", large: "_13pdpuj7" }, disabled: { true: "_13pdpuj8" }, rounded: { none: "_13pdpuj9", small: "_13pdpuja", medium: "_13pdpujb", large: "_13pdpujc" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", disabled: true }, "_13pdpujd"], [{ color: "secondary", disabled: true }, "_13pdpuje"], [{ color: "tertiary", disabled: true }, "_13pdpujf"], [{ skeleton: true, size: "large" }, "_13pdpujg"], [{ skeleton: true, size: "medium" }, "_13pdpujh"], [{ skeleton: true, size: "small" }, "_13pdpuji"]] });
+export {
+  button
+};
+//# sourceMappingURL=Button.css.js.map

package/dist/Button/Button.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Button/Button.interface.d.ts

@@ -0,0 +1,28 @@
+import { PropsWithChildren, ReactNode } from "react";
+export interface ButtonProps extends PropsWithChildren {
+    /**
+     * Defines the button tag
+     */
+    as?: "button" | "a";
+    /**
+     * react node to add as a children
+     */
+    children?: ReactNode;
+    color: string;
+    size: string;
+    disabled: boolean;
+    rounded: string;
+    /**
+     * Defines the url to redirect
+     */
+    href: string;
+    /**
+     * identifier for the component
+     */
+    id?: string;
+    /**
+     * additional classname
+     */
+    className?: string;
+}
+//# sourceMappingURL=Button.interface.d.ts.map

package/dist/Button/Button.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.interface.d.ts","sourceRoot":"","sources":["../../lib/Button/Button.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/Button/Button.interface.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Button.interface.js.map

package/dist/Button/Button.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.interface.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Button/index.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { ButtonVariants } from "./Button.css";
+export interface ButtonProps {
+    as?: "button" | "a";
+    children?: ReactNode;
+    targetUrl?: string;
+    id?: string;
+    action?: () => void;
+}
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, action, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
+    className: string;
+    href: string | undefined;
+    id: string | undefined;
+    onClick: (() => void) | undefined;
+}, HTMLElement>;
+//# sourceMappingURL=index.d.ts.map

package/dist/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAU,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,6EAUhB,WAAW,GAAG,cAAc;;;;oBAbd,IAAI;eAoBpB,CAAC"}

package/dist/Button/index.js

@@ -0,0 +1,24 @@
+import { createElement } from "react";
+import { button } from "./Button.css.js";
+const Button = ({
+  as = "a",
+  children,
+  color,
+  size = "medium",
+  disabled,
+  rounded = "medium",
+  targetUrl,
+  id,
+  action
+}) => {
+  const className = button({ color, size, disabled, rounded });
+  return createElement(
+    as,
+    { className, href: targetUrl, id, onClick: action },
+    children
+  );
+};
+export {
+  Button
+};
+//# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../lib/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, createElement } from \"react\";\nimport { ButtonVariants, button } from \"./Button.css\";\n\nexport interface ButtonProps {\n  as?: \"button\" | \"a\";\n  children?: ReactNode;\n  targetUrl?: string;\n  id?: string;\n  action?: () => void;\n}\n\nexport const Button = ({\n  as = \"a\",\n  children,\n  color,\n  size = \"medium\",\n  disabled,\n  rounded = \"medium\",\n  targetUrl,\n  id,\n  action,\n}: ButtonProps & ButtonVariants) => {\n  const className = button({ color, size, disabled, rounded });\n  return createElement(\n    as,\n    { className, href: targetUrl, id, onClick: action },\n    children\n  );\n};\n"],"names":[],"mappings":";;AAYO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,YAAY,OAAO,EAAE,OAAO,MAAM,UAAU,SAAS;AACpD,SAAA;AAAA,IACL;AAAA,IACA,EAAE,WAAW,MAAM,WAAW,IAAI,SAAS,OAAO;AAAA,IAClD;AAAA,EAAA;AAEJ;"}

package/dist/CallToActionBar/CallToActionBar.css.d.ts

@@ -0,0 +1,19 @@
+export declare const cta: string;
+export declare const cta_image_section: string;
+export declare const cta_square_image_lg: string;
+export declare const cta_rectangle_image_lg: string;
+export declare const cta_square_image_md: string;
+export declare const cta_rectangle_image_md: string;
+export declare const cta_section_lg: string;
+export declare const cta_section_lg_overlap: string;
+export declare const cta_section_md: string;
+export declare const cta_section_md_overlap: string;
+export declare const cta_section_sm: string;
+export declare const cta_section: string;
+export declare const cta_image_overlap: string;
+export declare const cta_body_section: string;
+export declare const sticky_banner: string;
+export declare const is_sticky: string;
+export declare const ctas_section: string;
+export declare const cta_text: string;
+//# sourceMappingURL=CallToActionBar.css.d.ts.map

package/dist/CallToActionBar/CallToActionBar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallToActionBar.css.d.ts","sourceRoot":"","sources":["../../lib/CallToActionBar/CallToActionBar.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,QAUd,CAAC;AAkBH,eAAO,MAAM,iBAAiB,QAE5B,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAG9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAGjC,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAG9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAGjC,CAAC;AAEH,eAAO,MAAM,cAAc,QAEzB,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAEjC,CAAC;AAEH,eAAO,MAAM,cAAc,QAEzB,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAEjC,CAAC;AAEH,eAAO,MAAM,cAAc,QAEzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAS3B,CAAC;AAUH,eAAO,MAAM,aAAa,QAExB,CAAC;AAMH,eAAO,MAAM,SAAS,QAgBpB,CAAC;AAiCH,eAAO,MAAM,YAAY,QAavB,CAAC;AAMH,eAAO,MAAM,QAAQ,QAAY,CAAC"}