@axos-web-dev/shared-components 0.0.60 → 0.0.62

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,119 @@
+"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 "../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,17 @@ 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 "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -58,9 +60,12 @@ import "../Chevron/Chevron.css.js";
 /* empty css                                                                 */
 /* empty css                                                    */
 /* empty css                                                  */
-import "../StepItems/StepItems.css.js";
+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                                              */

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,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                                                    */
+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 "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -58,9 +60,12 @@ import { chevron_wrapper, chevron } from "./Chevron.css.js";
 /* empty css                                                                 */
 /* empty css                                                    */
 /* empty css                                                  */
-import "../StepItems/StepItems.css.js";
+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                                              */

package/dist/ContentBanner/ContentBanner.css.d.ts

@@ -18,7 +18,7 @@ export declare const content_banner: import('@vanilla-extract/recipes').RuntimeF
         };
     };
 }>;
-export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
+export declare const cb_eyebrow: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -27,7 +27,10 @@ export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
             textShadow: "0px 0px #00000000";
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            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})`;
@@ -37,7 +40,9 @@ export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
         };
     };
 }>;
+export declare const push_down_24: string;
 export declare const section_pad: string;
+export declare const section_min_pad: string;
 export declare const body_copy: string;
 export declare const call_to_action_row: string;
 export declare const link: string;

package/dist/ContentBanner/ContentBanner.css.js

@@ -4,16 +4,20 @@
 /* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var content_banner = createRuntimeFn({ defaultClassName: "_1bwl51g0", variantClassNames: { variant: { primary: "_1bwl51g1", secondary: "_1bwl51g2", tertiary: "_1bwl51g3", quaternary: "_1bwl51g4" } }, defaultVariants: {}, compoundVariants: [] });
-var headline = createRuntimeFn({ defaultClassName: "_1bwl51g5", variantClassNames: { variant: { primary: "_1bwl51g6", secondary: "_1bwl51g7", tertiary: "_1bwl51g8", quaternary: "_1bwl51g9" } }, defaultVariants: {}, compoundVariants: [] });
-var section_pad = "_1bwl51ga";
-var body_copy = "_1bwl51gb";
-var call_to_action_row = "_1bwl51gc";
-var link = "_1bwl51gd";
+var cb_eyebrow = createRuntimeFn({ defaultClassName: "_1bwl51g5", variantClassNames: { variant: { primary: "_1bwl51g6", secondary: "_1bwl51g7", tertiary: "_1bwl51g8", quaternary: "_1bwl51g9" } }, defaultVariants: {}, compoundVariants: [] });
+var push_down_24 = "_1bwl51ga";
+var section_pad = "_1bwl51gb";
+var section_min_pad = "_1bwl51gc";
+var body_copy = "_1bwl51gd";
+var call_to_action_row = "_1bwl51ge";
+var link = "_1bwl51gf";
 export {
   body_copy,
   call_to_action_row,
+  cb_eyebrow,
   content_banner,
-  headline,
   link,
+  push_down_24,
+  section_min_pad,
   section_pad
 };

package/dist/ContentBanner/ContentBanner.interface.d.ts

@@ -1,11 +1,15 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
 import { ReactNode } from 'react';
+import { ImageInterface } from '../IconBillboard';
 
 export interface HeroBannerInterface {
     id?: string;
     className?: string;
-    variant: string;
-    headline: string | ReactNode;
-    bodyCopy: string | ReactNode;
+    variant?: string;
+    icon?: ImageInterface;
+    eyebrow?: string | ReactNode;
+    headline?: string | ReactNode;
+    bodyCopy?: string | ReactNode;
     callToActionRow?: boolean | ChevronProps[];
+    bannerSize?: string;
 }

package/dist/ContentBanner/index.js

@@ -6,12 +6,15 @@ import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
 import "react-use";
-import { content_banner, section_pad, body_copy, call_to_action_row, link } from "./ContentBanner.css.js";
+import { content_banner, section_pad, section_min_pad, push_down_24, cb_eyebrow, body_copy, call_to_action_row, link } from "./ContentBanner.css.js";
 const ContentBanner = ({
   variant,
+  icon,
+  eyebrow,
   headline,
   bodyCopy,
   callToActionRow,
+  bannerSize,
   id
 }) => {
   const banner_variant = getVariant(variant);
@@ -19,9 +22,11 @@ const ContentBanner = ({
     "section",
     {
       id: `id_${id}`,
-      className: `${content_banner({ variant: banner_variant })} ${section_pad}`,
+      className: `${content_banner({ variant: banner_variant })} ${bannerSize == "Large" ? section_pad : section_min_pad}`,
       children: /* @__PURE__ */ jsxs("div", { className: `containment`, children: [
         /* @__PURE__ */ jsxs("div", { className: `text_center`, children: [
+          icon && /* @__PURE__ */ jsx("div", { className: `${push_down_24} flex center`, role: "presentation", children: /* @__PURE__ */ jsx("img", { src: icon.src, alt: "" }) }),
+          eyebrow && /* @__PURE__ */ jsx("span", { className: cb_eyebrow({ variant: banner_variant }), children: eyebrow }),
           /* @__PURE__ */ jsx(
             "h1",
             {
@@ -29,7 +34,7 @@ const ContentBanner = ({
               children: headline
             }
           ),
-          bodyCopy ? /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy }) : null
+          bodyCopy && /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy })
         ] }),
         Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow?.map(
           ({ id: id2, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(