@axos-web-dev/shared-components 0.0.12 → 0.0.14

package/dist/Button/Button.d.ts

@@ -17,8 +17,8 @@ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElem
 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 | undefined;
+    href: string;
     id: string | undefined;
     target: string;
-    onClick: (() => void) | undefined;
+    onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
 }, HTMLElement>;

package/dist/Button/Button.js

@@ -1,3 +1,7 @@
+"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";
@@ -14,14 +18,26 @@ const Button = ({
   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: targetUrl,
+      href: findMoreAxosDomains(targetUrl),
       id,
       target: newTab ? "_blank" : "_self",
-      onClick: action
+      onClick: action ?? onClick
     },
     children
   );

package/dist/CallToActionBar/CallToActionBar.interface.d.ts

@@ -10,6 +10,7 @@ export interface CallToActionBarInterface {
     headline: string | ReactNode;
     bodyCopy: string | ReactNode;
     callToActionRow: ChevronProps[];
+    internalName?: string;
 }
 export interface ImageInterface {
     src: string;

package/dist/CallToActionBar/index.js

@@ -18,7 +18,8 @@ const CallToActionBar = ({
   headline,
   bodyCopy,
   callToActionRow,
-  id
+  id,
+  internalName
 }) => {
   const [stickyTop, setstickyTop] = useState(0);
   const [imageSize, setImageSize] = useState({ width: "0px", height: "0px" });
@@ -60,6 +61,7 @@ const CallToActionBar = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
+      id: internalName == null ? void 0 : internalName.replace(/ /g, "-"),
       className: `${cta} ${getBannerSizeClassName(
         banner_size,
         image_overlap

package/dist/Chevron/index.js

@@ -1,11 +1,52 @@
+"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                                                      */
+import "../NavigationMenu/AxosAdvisor/NavBar.module.js";
+/* empty css                                                         */
+import "../NavigationMenu/AxosFiduciary/NavBar.module.js";
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
 const Chevron = ({
   children,
   variant,
@@ -14,13 +55,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/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.js

@@ -16,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,
@@ -59,7 +59,7 @@ const ScheduleCall = ({
   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__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
       /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
         /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
           Input,

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/Hyperlink/index.js

@@ -1,16 +1,75 @@
+"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                                                      */
+import "../NavigationMenu/AxosAdvisor/NavBar.module.js";
+/* empty css                                                         */
+import "../NavigationMenu/AxosFiduciary/NavBar.module.js";
+/* 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/ImageBillboard/ImageBillboard.css.d.ts

@@ -127,3 +127,5 @@ export declare const single_container: string;
 export declare const two_inline: string;
 export declare const three_inline: string;
 export declare const section_text_ImageBillboard: string;
+export declare const billboard_image: string;
+export declare const mh_330: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -17,16 +17,20 @@ var single_container = "_1m7m2ao";
 var two_inline = "_1m7m2ap";
 var three_inline = "_1m7m2aq";
 var section_text_ImageBillboard = "_1m7m2ar";
+var billboard_image = "_1m7m2as";
+var mh_330 = "_1m7m2at";
 export {
   billboard,
   billboard_body,
   billboard_container,
   billboard_ctas,
   billboard_header_section,
+  billboard_image,
   billboard_img,
   body,
   header,
   imagePlacement,
+  mh_330,
   section_text_ImageBillboard,
   single_container,
   supertag,

package/dist/ImageBillboard/ImageBillboard.js

@@ -5,13 +5,12 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
 /* empty css                                   */
 /* empty css                                                    */
 import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
 import "react-use";
 import { inline_container } from "../SetContainer/SetContainer.css.js";
-import { section_text_ImageBillboard, header, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
+import { section_text_ImageBillboard, header, billboard, billboard_container, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
 const ImageBillboardSet = ({
   id,
   variant,
@@ -51,14 +50,7 @@ const ImageBillboardSet = ({
               ${billboard({ variant: billboard_variant })} ${inline ? "" : billboard_container} 
               rounded flex ${inline ? "flex_col" : "flex_row"} ${bordered ? "bordered" : ""} ${imagePlacement.toLowerCase() === "left" && !inline ? "reversed" : ""}`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: image == null ? void 0 : image.src,
-                className: clsx("img_fluid", billboard_img),
-                alt: image.alt
-              }
-            ) }),
+            /* @__PURE__ */ jsx("div", { "background-image": image.src, "aria-label": image.alt }),
             /* @__PURE__ */ jsxs("div", { className: body, children: [
               /* @__PURE__ */ jsxs("div", { className: billboard_body, children: [
                 /* @__PURE__ */ jsxs("div", { className: `${billboard_header_section}`, children: [

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -10,7 +10,7 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
 /* empty css                                                    */
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
-import { billboard, imagePlacement, billboard_img, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
+import { billboard, imagePlacement, billboard_img, billboard_image, mh_330, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
 const ImageBillboard = ({
   id,
   variant,
@@ -41,7 +41,14 @@ const ImageBillboard = ({
         imagePlacement({ position: position == null ? void 0 : position.toLowerCase() })
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: /* @__PURE__ */ jsx("img", { src: image.src, className: "img_fluid", alt: image.alt }) }),
+        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image.src,
+            className: `${billboard_image} ${set ? mh_330 : null}`,
+            alt: image.alt
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: body, children: [
           /* @__PURE__ */ jsxs("div", { className: billboard_body, children: [
             /* @__PURE__ */ jsxs("div", { className: `${billboard_header_section}`, children: [
@@ -71,7 +78,7 @@ const ImageBillboard = ({
               /* @__PURE__ */ jsx("span", { children: copy })
             ] }, id2)) })
           ] }),
-          callToActionRow && /* @__PURE__ */ jsx(
+          callToActionRow.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(

package/dist/ImageBillboard/index.js

@@ -1,5 +1,5 @@
 import { ImageBillboardSet } from "./ImageBillboard.js";
-import { billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_img, body, header, imagePlacement, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline } from "./ImageBillboard.css.js";
+import { billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, header, imagePlacement, mh_330, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline } from "./ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
@@ -9,10 +9,12 @@ export {
   billboard_container,
   billboard_ctas,
   billboard_header_section,
+  billboard_image,
   billboard_img,
   body,
   header,
   imagePlacement,
+  mh_330,
   section_text_ImageBillboard,
   single_container,
   supertag,

package/dist/Input/Input.css.js

@@ -1,10 +1,5 @@
 /* empty css                                */
-/* empty css                                */
 /* empty css                                   */
-/* empty css                                          */
-/* empty css                                  */
-/* empty css                                              */
-/* empty css                                                    */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var icon = createRuntimeFn({ defaultClassName: "_18du0la0", variantClassNames: { size: { small: "_18du0la1", medium: "_18du0la2", large: "_18du0la3" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/MainHTML/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { axosTheme } from "../themes/axos.css.js";
 import { premierTheme } from "../themes/premier.css.js";
 const MainHTML = ({ theme = "Axos", children }) => {
-  return /* @__PURE__ */ jsx("main", { className: theme === "Premier" ? premierTheme : axosTheme, children });
+  return /* @__PURE__ */ jsx("body", { className: theme === "Premier" ? premierTheme : axosTheme, children: /* @__PURE__ */ jsx("main", { children }, "main-body") });
 };
 export {
   MainHTML

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { ModalProps } from "./Modal.interface";
+export declare const Modal: FC<ModalProps>;

package/dist/Modal/Modal.js

@@ -0,0 +1,97 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { chevron } from "../Chevron/Chevron.css.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import "../AlertBanner/AlertBanner.css.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+/* empty css                                                */
+import "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
+/* empty css                                          */
+import "clsx";
+/* 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 "./contextApi/store.js";
+/* empty css                                                      */
+import "../NavigationMenu/AxosAdvisor/NavBar.module.js";
+/* empty css                                                         */
+import "../NavigationMenu/AxosFiduciary/NavBar.module.js";
+/* empty css                                                    */
+import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
+import { modal, modal_dialog, modal_content, modal_header, modal_title, modal_subtitle, solid, modal_body, site_link, modal_footer } from "./Modal.css.js";
+const Modal = ({
+  headline,
+  bodyCopy,
+  body,
+  onAccept,
+  onCancel
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { id: "speedbump", tabIndex: -1, role: "dialog", className: modal, children: /* @__PURE__ */ jsx("div", { className: `${modal_dialog} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${modal_content} rounded`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${modal_header} text_center`, children: [
+      /* @__PURE__ */ jsx("h2", { className: `${modal_title} header_3`, children: headline }),
+      /* @__PURE__ */ jsx("p", { className: `${modal_subtitle} p_16 mb_0 push_up`, children: bodyCopy })
+    ] }),
+    /* @__PURE__ */ jsx("hr", { className: solid }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${modal_body} text-center flex flex_col center middle mx_auto`,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "p_16", children: "You will now be redirected to:" }),
+          /* @__PURE__ */ jsx("p", { id: "insert-url", className: site_link, children: body })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("hr", { className: solid }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${modal_footer} flex center middle push_up_24`,
+        style: { marginInline: "auto", width: "max-content" },
+        children: [
+          /* @__PURE__ */ jsx(Button, { color: "primary", action: onAccept, children: "Continue" }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              style: { textDecoration: "none", padding: "8px 48px" },
+              role: "button",
+              className: `sc__btn ${chevron({ variant: "primary" })}`,
+              "aria-label": "Close",
+              title: "Go Back",
+              id: "close",
+              onClick: onCancel,
+              children: "Close"
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) }) });
+};
+export {
+  Modal
+};

package/dist/Modal/contextApi/store.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+export interface ContextProps {
+    targetLinkUrl: string;
+    setTargetLinkUrl: Dispatch<SetStateAction<string>>;
+    openModal: boolean;
+    setOpenModal: Dispatch<SetStateAction<boolean>>;
+}
+export declare const GlobalContext: import("react").Context<ContextProps>;
+export declare const GlobalContextProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const useGlobalContext: () => ContextProps;

package/dist/Modal/contextApi/store.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Modal } from "../Modal.js";
+import { shortUrl } from "../../utils/validateExternalLinks.js";
+import { createContext, useState, useContext } from "react";
+import { createPortal } from "react-dom";
+const GlobalContext = createContext({
+  targetLinkUrl: "",
+  setTargetLinkUrl: () => "",
+  openModal: false,
+  setOpenModal: () => false
+});
+const GlobalContextProvider = ({ children }) => {
+  const [targetLinkUrl, setTargetLinkUrl] = useState("");
+  const [openModal, setOpenModal] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    GlobalContext.Provider,
+    {
+      value: {
+        targetLinkUrl,
+        setTargetLinkUrl,
+        openModal,
+        setOpenModal
+      },
+      children: [
+        children,
+        openModal ? createPortal(
+          /* @__PURE__ */ jsx(
+            Modal,
+            {
+              headline: "You're continuing to another website",
+              bodyCopy: `Axos Bank does not endorse the information,
+               content, presentation or accuracy of any other 
+               website and claims no responsibility for it.`,
+              body: shortUrl(targetLinkUrl),
+              onCancel: () => setOpenModal(false),
+              onAccept: () => {
+                window.open(targetLinkUrl, "_blank", "noreferrer");
+                setOpenModal(false);
+              }
+            }
+          ),
+          document.body,
+          "GlobalSpeedBump"
+        ) : null
+      ]
+    }
+  );
+};
+const useGlobalContext = () => useContext(GlobalContext);
+export {
+  GlobalContext,
+  GlobalContextProvider,
+  useGlobalContext
+};

package/dist/Modal/index.d.ts

@@ -1,3 +1,2 @@
-import { FC } from "react";
-import { ModalProps } from "./Modal.interface";
-export declare const Modal: FC<ModalProps>;
+export * from "./Modal";
+export * from "./contextApi/store";