@axos-web-dev/shared-components 0.0.11 → 0.0.13

package/dist/ApyCalculator/index.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
 import { button } from "../Button/Button.css.js";
-import { Chevron } from "../Chevron/index.js";
 import { useState, useCallback, useEffect } from "react";
+import "react-use";
+import { Chevron } from "../Chevron/index.js";
 import { vars } from "../themes/axos.css.js";
 /* empty css                                */
 /* empty css                                   */

package/dist/Button/Button.d.ts

@@ -0,0 +1,24 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { ButtonVariants } from "./Button.css";
+export type ButtonBase = {
+    children?: ReactNode;
+    targetUrl?: string;
+    id?: string;
+    action?: () => void;
+    className?: string;
+    newTab?: boolean;
+};
+export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
+    as?: "button";
+};
+export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBase> & {
+    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<{
+    className: string;
+    href: string;
+    id: string | undefined;
+    target: string;
+    onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
+}, HTMLElement>;

package/dist/Button/Button.js

@@ -0,0 +1,47 @@
+"use client";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
+import { validateLink } from "../utils/validateExternalLinks.js";
+import clsx from "clsx";
+import { createElement } from "react";
+import { button } from "./Button.css.js";
+const Button = ({
+  as = "a",
+  children,
+  color = "primary",
+  size = "large",
+  disabled,
+  rounded = "medium",
+  targetUrl,
+  id,
+  newTab = false,
+  action,
+  className
+}) => {
+  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const onClick = (e) => {
+    if (targetUrl) {
+      const external_link = validateLink(targetUrl);
+      if (external_link) {
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+        setOpenModal(external_link);
+        setTargetLinkUrl(targetUrl);
+      }
+    }
+  };
+  return createElement(
+    as,
+    {
+      className: clsx(button({ color, size, disabled, rounded }), className),
+      href: findMoreAxosDomains(targetUrl),
+      id,
+      target: newTab ? "_blank" : "_self",
+      onClick: action ?? onClick
+    },
+    children
+  );
+};
+export {
+  Button
+};

package/dist/Button/GoBackButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "./Button";
+import { ButtonVariants } from "./Button.css";
+export declare const GoBackButton: (props: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/GoBackButton.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMount } from "react-use";
+import { Button } from "./Button.js";
+const GoBackButton = (props) => {
+  const [previusUrl, setPreviusUrl] = useState("");
+  useMount(() => {
+    setPreviusUrl(document == null ? void 0 : document.referrer);
+  });
+  return /* @__PURE__ */ jsx(Button, { as: "a", targetUrl: previusUrl, children: props.children });
+};
+export {
+  GoBackButton
+};

package/dist/Button/index.d.ts

@@ -1,21 +1,3 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { ButtonVariants } from "./Button.css";
-export type ButtonBase = {
-    children?: ReactNode;
-    targetUrl?: string;
-    id?: string;
-    action?: () => void;
-};
-export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
-    as?: "button";
-};
-export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBase> & {
-    as?: "a";
-};
-export type ButtonProps = ButtonAsButton | ButtonAsLink;
-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>;
+export * from "./Button";
+export * from "./Button.css";
+export * from "./GoBackButton";

package/dist/Button/index.js

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

package/dist/CallToActionBar/index.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import { useState, useEffect } from "react";
+import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
-import { useState, useEffect } from "react";
 import { returnImageDimensions, imageOrientation, getBannerSizeClassName } from "../utils/ctaOptions.js";
 import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_overlap, cta_body_section, cta_text, ctas_section } from "./CallToActionBar.css.js";
 const CallToActionBar = ({
@@ -80,8 +82,11 @@ const CallToActionBar = ({
             /* @__PURE__ */ jsxs(
               "div",
               {
-                className: `${cta_body_section} ${banner_size !== "large" ? "flex middle" : ""}`,
-                style: row_reverse ? { flexDirection: "row-reverse" } : {},
+                className: clsx(
+                  cta_body_section,
+                  banner_size !== "large" ? "flex middle" : "",
+                  row_reverse ? "reversed" : ""
+                ),
                 children: [
                   /* @__PURE__ */ jsxs(
                     "div",
@@ -97,38 +102,27 @@ const CallToActionBar = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(ctas_section, "flex", "text_center"),
-                      style: banner_size === "small" ? {
-                        flexShrink: 0,
-                        marginRight: `${row_reverse ? "40px" : "20px"}`,
-                        padding: 0
-                      } : {},
-                      children: callToActionRow.map(
-                        ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            targetUrl,
-                            color: getVariant(variant),
-                            size: "medium",
-                            rounded: "medium",
-                            children: displayText
-                          },
-                          id2
-                        ) : /* @__PURE__ */ jsx(
-                          Chevron,
-                          {
-                            targetUrl,
-                            variant: getVariant(variant),
-                            children: displayText
-                          },
-                          id2
-                        )
-                      )
-                    }
-                  )
+                  /* @__PURE__ */ jsx("div", { className: clsx(ctas_section, "flex", "text_center"), children: callToActionRow.map(
+                    ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        targetUrl,
+                        color: getVariant(variant),
+                        size: "medium",
+                        rounded: "medium",
+                        children: displayText
+                      },
+                      id2
+                    ) : /* @__PURE__ */ jsx(
+                      Chevron,
+                      {
+                        targetUrl,
+                        variant: getVariant(variant),
+                        children: displayText
+                      },
+                      id2
+                    )
+                  ) })
                 ]
               }
             )

package/dist/Chevron/index.js

@@ -1,11 +1,50 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import SvgArrowIcon from "../icons/ArrowIcon/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                                    */
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
+import { validateLink } from "../utils/validateExternalLinks.js";
+import "clsx";
+import "react";
+import "../Button/Button.css.js";
+import "react-use";
+/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Input/index.js";
+import "react-hook-form";
+/* empty css                                              */
+import "../ImageBillboard/ImageBillboard.css.js";
 import { chevron_wrapper, chevron } from "./Chevron.css.js";
+/* empty css                                */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
 const Chevron = ({
   children,
   variant,
@@ -14,13 +53,26 @@ const Chevron = ({
   className
 }) => {
   variant = getVariant(variant);
+  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const onClick = (e) => {
+    if (targetUrl) {
+      const external_link = validateLink(targetUrl);
+      if (external_link) {
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+        setOpenModal(external_link);
+        setTargetLinkUrl(targetUrl);
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs("span", { className: `sc__btn ${chevron_wrapper}`, children: [
     /* @__PURE__ */ jsx(
       "a",
       {
         id,
-        href: targetUrl,
+        href: findMoreAxosDomains(targetUrl),
         className: `${chevron({ variant })} ${className ? className : ""}`,
+        onClick,
         children
       }
     ),

package/dist/CollectInformationAlert/index.js

@@ -1,5 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { Hyperlink } from "../Hyperlink/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCloseIcon from "../icons/CloseIcon/index.js";

package/dist/ContentBanner/index.js

@@ -2,7 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Chevron } from "../Chevron/index.js";
 import { headline_text } from "../HeroBanner/HeroBanner.css.js";
 import { getVariant } from "../utils/getVariant.js";
-import { Button } from "../Button/index.js";
+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";
 const ContentBanner = ({
   variant,

package/dist/Forms/Forms.css.d.ts

@@ -88,3 +88,4 @@ export declare const disclosureForm: import("@vanilla-extract/recipes").RuntimeF
         };
     };
 }>;
+export declare const form: string;

package/dist/Forms/Forms.css.js

@@ -9,9 +9,11 @@ var headerForm = createRuntimeFn({ defaultClassName: "tfms6a6", variantClassName
 var formWrapper = createRuntimeFn({ defaultClassName: "tfms6ab", variantClassNames: { variant: { primary: "tfms6ac", secondary: "tfms6ad", tertiary: "tfms6ae", quaternary: "tfms6af" } }, defaultVariants: {}, compoundVariants: [] });
 var actions = "tfms6ag";
 var disclosureForm = createRuntimeFn({ defaultClassName: "tfms6ah", variantClassNames: { variant: { primary: "tfms6ai", secondary: "tfms6aj", tertiary: "tfms6ak", quaternary: "tfms6al" } }, defaultVariants: {}, compoundVariants: [] });
+var form = "tfms6am";
 export {
   actions,
   disclosureForm,
+  form,
   formContainer,
   formWrapper,
   headerForm,

package/dist/Forms/ScheduleCall.d.ts

@@ -2,6 +2,7 @@ import { ChevronProps } from '../Chevron/Chevron.interface';
 import { QuaternaryTypes } from '../utils/variant.types';
 import { PropsWithChildren, ReactNode } from "react";
 export interface FormProps extends PropsWithChildren {
+    id?: string;
     onSubmit?: (values: {
         [index: string]: string;
     }) => void;
@@ -12,4 +13,4 @@ export interface FormProps extends PropsWithChildren {
     validateEmail: (email: string) => Promise<boolean>;
     callToAction: Omit<ChevronProps, "targetUrl">;
 }
-export declare const ScheduleCall: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScheduleCall: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/ScheduleCall.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { Input } from "../Input/index.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
@@ -13,7 +16,7 @@ import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
-import { formContainer, iconForm, headerForm, formWrapper, disclosureForm, actions } from "./Forms.css.js";
+import { formContainer, iconForm, headerForm, form, formWrapper, disclosureForm, actions } from "./Forms.css.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const ScheduleCall = ({
   icon = false,
@@ -25,7 +28,8 @@ const ScheduleCall = ({
   variant: fullVariant = "primary",
   headline,
   callToAction,
-  validateEmail
+  validateEmail,
+  id
 }) => {
   var _a, _b, _c, _d;
   const schema = z.object({
@@ -52,16 +56,10 @@ const ScheduleCall = ({
     await onSubmit(data);
   };
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsx("section", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+  return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
     icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: /* @__PURE__ */ jsx(SvgAxosX, {}) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx("header_2 text_center", headerForm({ variant })),
-        children: headline
-      }
-    ),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(submitForm), children: [
+    /* @__PURE__ */ jsx("div", { className: clsx("header_2 text_center", headerForm({ variant })), children: headline }),
+    /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
       /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
         /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
           Input,
@@ -134,7 +132,7 @@ const ScheduleCall = ({
         }
       ) })
     ] })
-  ] }) }) });
+  ] }) }, id);
 };
 export {
   ScheduleCall

package/dist/Forms/index.js

@@ -1,4 +1,4 @@
-import { actions, disclosureForm, formContainer, formWrapper, headerForm, iconForm } from "./Forms.css.js";
+import { actions, disclosureForm, form, formContainer, formWrapper, headerForm, iconForm } from "./Forms.css.js";
 import { RenderWebForm, renderSwitch } from "./RenderForm.js";
 import { SalesforceFieldsForm, SalesforceSchema } from "./SalesforceFieldsForm.js";
 import { ScheduleCall } from "./ScheduleCall.js";
@@ -9,6 +9,7 @@ export {
   ScheduleCall,
   actions,
   disclosureForm,
+  form,
   formContainer,
   formWrapper,
   headerForm,

package/dist/HeroBanner/index.js

@@ -1,5 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import { logout, hero_banner, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";

package/dist/Hyperlink/index.js

@@ -1,16 +1,73 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import "../Chevron/Chevron.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
+import { validateLink } from "../utils/validateExternalLinks.js";
+import "clsx";
+import "react";
+import "../Button/Button.css.js";
+import "react-use";
+/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Input/index.js";
+import "react-hook-form";
+/* empty css                                              */
+import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
 const Hyperlink = ({
   children,
   targetUrl,
   id,
   className
 }) => {
+  const { setTargetLinkUrl, setOpenModal } = useGlobalContext();
+  const onClick = (e) => {
+    if (targetUrl) {
+      const external_link = validateLink(targetUrl);
+      if (external_link) {
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+        setOpenModal(external_link);
+        setTargetLinkUrl(targetUrl);
+      }
+    }
+  };
   return /* @__PURE__ */ jsx(
     "a",
     {
       id: id ? id : "",
-      href: targetUrl,
+      href: findMoreAxosDomains(targetUrl),
       className: `${className ? className : ""}`,
+      onClick,
       children
     }
   );

package/dist/IconBillboard/IconBillboard.d.ts

@@ -1,8 +1,9 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
 import { ReactNode } from "react";
+import { ImageInterface } from ".";
 import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
 export interface FocusProps {
-    icon?: ReactNode;
+    icon?: ImageInterface;
     headline?: ReactNode | undefined;
     body?: ReactNode | undefined;
     items?: {
@@ -10,5 +11,6 @@ export interface FocusProps {
         content: ReactNode;
     }[];
     callToActionRow?: ChevronProps[];
+    set?: boolean;
 }
 export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/IconBillboard.interface.d.ts

@@ -10,6 +10,7 @@ export interface IconBillboardSet {
     iconBillboards: IconBillboardProps[];
     additionalDetails: ReactNode | string;
     side: boolean;
+    set?: boolean;
 }
 export interface IconBillboardProps {
     id?: string;
@@ -18,6 +19,7 @@ export interface IconBillboardProps {
     bodyCopy?: ReactNode | undefined;
     bullets: BulletItemProps[];
     callToActionRow: ChevronProps[];
+    set?: boolean;
 }
 export interface ImageInterface {
     src: string;