@axos-web-dev/shared-components 0.0.61 → 0.0.63

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

@@ -94,5 +94,32 @@ export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
             borderRadius: number;
         };
     };
+    square: {
+        true: {
+            width: number;
+            minHeight: number;
+            whiteSpace: "break-spaces";
+            textAlign: "center";
+            padding: "0 1em";
+            display: "flex";
+            flexDirection: "column";
+            justifyContent: "center";
+            background: "#fff";
+            color: "#333D46";
+            border: "1px solid #EBEBEB";
+            alignItems: "center";
+            gap: number;
+            ":hover": {
+                background: "#EBEBEB";
+                color: "#333D46";
+            };
+            "@media": {
+                "screen and (max-width:768px)": {
+                    width: number;
+                    minHeight: number;
+                };
+            };
+        };
+    };
 }>;
 export type ButtonVariants = RecipeVariants<typeof button>;

package/dist/Button/Button.css.js

@@ -3,7 +3,7 @@
 /* empty css                                   */
 /* 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"]] });
+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" }, square: { true: "_13pdpujd" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", disabled: true }, "_13pdpuje"], [{ color: "secondary", disabled: true }, "_13pdpujf"], [{ color: "tertiary", disabled: true }, "_13pdpujg"], [{ skeleton: true, size: "large" }, "_13pdpujh"], [{ skeleton: true, size: "medium" }, "_13pdpuji"], [{ skeleton: true, size: "small" }, "_13pdpujj"]] });
 export {
   button
 };

package/dist/Button/Button.d.ts

@@ -16,7 +16,7 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
     as?: "a";
 };
 export type ButtonProps = ButtonAsButton | ButtonAsLink;
-export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import('react').DetailedReactHTMLElement<{
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, square, }: ButtonProps & ButtonVariants) => import('react').DetailedReactHTMLElement<{
     className: string;
     href: string;
     id: string | undefined;

package/dist/Button/Button.js

@@ -16,7 +16,8 @@ const Button = ({
   id,
   newTab = false,
   action,
-  className
+  className,
+  square
 }) => {
   const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
   const onClick = (e) => {
@@ -33,7 +34,10 @@ const Button = ({
   return createElement(
     as,
     {
-      className: clsx(button({ color, size, disabled, rounded }), className),
+      className: clsx(
+        button({ color, size, disabled, rounded, square }),
+        className
+      ),
       href: findMoreAxosDomains(targetUrl),
       id,
       target: newTab ? "_blank" : "_self",

package/dist/Calculators/Calculator.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface CalculatorProps {
+    id?: string;
+    internalName?: string;
+    variant?: string;
+    icon?: boolean;
+    name?: string;
+    headline?: React.ReactNode;
+    bodyCopy?: React.ReactNode;
+    disclosure?: React.ReactNode;
+}
+export declare const Calculator: (props: CalculatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Calculators/Calculator.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@hookform/resolvers/zod";
+import "../Modal/contextApi/store.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useRef, useEffect } from "react";
+import "../Button/Button.css.js";
+import "react-use";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                          */
+/* empty css                                   */
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+/* empty css                                                */
+import "react-hook-form";
+import { iconForm } from "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../Chevron/Chevron.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+/* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
+/* empty css                                          */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+import { calculator_headline, calculator_description } from "./calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../ImageBillboard/ImageBillboard.css.js";
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+import "../Table/Table.css.js";
+/* empty css                                        */
+/* empty css                                                  */
+/* empty css                                                */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
+import { iframeResizer } from "iframe-resizer";
+import { calculators } from "./calculators.js";
+const Calculator = (props) => {
+  const { id, bodyCopy, icon = false, disclosure, headline, name } = props;
+  const ref = useRef(null);
+  const iframe = calculators.get(name || "");
+  useEffect(() => {
+    if (window !== void 0) {
+      iframeResizer({ log: false }, ".iframe-calculator");
+    }
+  }, []);
+  const variant = getVariant(props.variant);
+  return /* @__PURE__ */ jsx("section", { id, className: "", children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: clsx(
+            "header_2 text_center",
+            calculator_headline({ variant })
+          ),
+          children: headline
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: bodyCopy })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "calc section-narrow", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref,
+        style: {
+          width: "100%",
+          maxWidth: "100%",
+          minHeight: "clamp(1100px, 200vh)"
+        },
+        scrolling: "no",
+        frameBorder: "0",
+        className: "iframe-calculator",
+        allow: "from",
+        src: iframe?.src
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: disclosure })
+  ] }) });
+};
+export {
+  Calculator
+};

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

@@ -0,0 +1,42 @@
+export declare const calculator_description: 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})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const calculator_headline: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;

package/dist/Calculators/calculator.css.js

@@ -0,0 +1,11 @@
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                              */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var calculator_description = createRuntimeFn({ defaultClassName: "iois7n0", variantClassNames: { variant: { primary: "iois7n1", secondary: "iois7n2", tertiary: "iois7n3", quaternary: "iois7n4" } }, defaultVariants: {}, compoundVariants: [] });
+var calculator_headline = createRuntimeFn({ defaultClassName: "iois7n5", variantClassNames: { variant: { primary: "iois7n6", secondary: "iois7n7", tertiary: "iois7n8", quaternary: "iois7n9" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  calculator_description,
+  calculator_headline
+};

package/dist/Calculators/calculators.d.ts

@@ -0,0 +1,7 @@
+export declare const calculators: Map<string, {
+    src: string;
+    height: number;
+} | {
+    src: string;
+    height?: undefined;
+}>;

package/dist/Calculators/calculators.js

@@ -0,0 +1,83 @@
+const calculators = /* @__PURE__ */ new Map([
+  [
+    "Accounts Receivable Analysis",
+    {
+      src: "https://www.fintactix.com/bofi/tools/management/man07",
+      height: 1100
+    }
+  ],
+  [
+    "Break Even Analysis",
+    {
+      src: "https://www.fintactix.com/bofi/tools/management/man03",
+      height: 1100
+    }
+  ],
+  [
+    "Business Inventory",
+    {
+      src: "https://www.fintactix.com/bofi/tools/management/man04",
+      height: 1100
+    }
+  ],
+  [
+    "Business Loan or Line of Credit",
+    {
+      src: "https://www.fintactix.com/bofi/tools/finance/fin01",
+      height: 1100
+    }
+  ],
+  [
+    "Financial Ratio Analysis",
+    {
+      src: "https://www.fintactix.com/bofi/tools/finance/fin05",
+      height: 1100
+    }
+  ],
+  [
+    "Projecting Cash-Flow",
+    {
+      src: "https://www.fintactix.com/bofi/tools/finance/fin04",
+      height: 1100
+    }
+  ],
+  [
+    "Purchase or Lease Equipment",
+    {
+      src: "https://www.fintactix.com/bofi/tools/finance/fin02",
+      height: 1100
+    }
+  ],
+  [
+    "Working Capital Requirements",
+    {
+      src: "https://www.fintactix.com/bofi/tools/management/man05",
+      height: 1100
+    }
+  ],
+  [
+    "Saving to Start a Business",
+    {
+      src: "https://www.fintactix.com/bofi/tools/management/man01"
+    }
+  ],
+  [
+    "Save Towards a Goal",
+    {
+      src: "https://www.fintactix.com/bofi/tools/savings/s06"
+    }
+  ],
+  [
+    "Save for Retirement",
+    {
+      src: "https://www.fintactix.com/bofi/tools/retirement/r07"
+    }
+  ],
+  [
+    "Calculate a Loan Payment",
+    { src: "https://www.fintactix.com/bofi/tools/debt/d08" }
+  ]
+]);
+export {
+  calculators
+};

package/dist/Calculators/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Calculator';
+export * from './calculator.css';

package/dist/Calculators/index.js

@@ -0,0 +1,7 @@
+import { Calculator } from "./Calculator.js";
+import { calculator_description, calculator_headline } from "./calculator.css.js";
+export {
+  Calculator,
+  calculator_description,
+  calculator_headline
+};

package/dist/Carousel/index.js

@@ -24,17 +24,8 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
-/* empty css                                              */
-/* empty css                                                    */
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
+/* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -47,6 +38,18 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/Chevron/Chevron.interface.d.ts

@@ -34,4 +34,8 @@ export interface ChevronProps extends PropsWithChildren {
      * Value that allow to go back in the previus page
      */
     goBack?: boolean;
+    /**
+     * URL for icon selection button
+     */
+    icon?: string;
 }

package/dist/Chevron/index.js

@@ -20,21 +20,11 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-/* empty css                                              */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -47,6 +37,19 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";