@axos-web-dev/shared-components 0.0.20 → 0.0.21

package/dist/Forms/RenderForm.d.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from "react";
-import { FormProps } from ".";
+import { FormProps } from '.';
+import { PropsWithChildren } from 'react';
+
 export interface renderFormProps extends FormProps, PropsWithChildren {
     form?: string;
 }

package/dist/Forms/SalesforceFieldsForm.d.ts

@@ -68,4 +68,4 @@ export type Props = {
     queryParams?: Partial<QueryParams>;
     location?: Record<string, unknown>;
 };
-export declare const SalesforceFieldsForm: import("react").NamedExoticComponent<Props>;
+export declare const SalesforceFieldsForm: import('react').NamedExoticComponent<Props>;

package/dist/Forms/ScheduleCall.d.ts

@@ -1,6 +1,7 @@
-import { ChevronProps } from '../Chevron/Chevron.interface';
+import { PropsWithChildren, ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
-import { PropsWithChildren, ReactNode } from "react";
+import { ChevronProps } from '../Chevron/Chevron.interface';
+
 export interface FormProps extends PropsWithChildren {
     id?: string;
     onSubmit?: (values: {

package/dist/Forms/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./Forms.css";
-export * from "./RenderForm";
-export * from "./SalesforceFieldsForm";
-export * from "./ScheduleCall";
+export * from './Forms.css';
+export * from './RenderForm';
+export * from './SalesforceFieldsForm';
+export * from './ScheduleCall';

package/dist/HeroBanner/HeroBanner.css.d.ts

@@ -1,5 +1,5 @@
 export declare const logout: string;
-export declare const hero_banner: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -24,7 +24,7 @@ export declare const reversed: string;
 export declare const hero_text: string;
 export declare const hero_wrapper: string;
 export declare const hero_img: string;
-export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -44,7 +44,7 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const headline_text: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/HeroBanner/HeroBanner.interface.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from "react";
+
 export interface ImageInterface {
     src: string;
     alt?: string;

package/dist/HeroBanner/index.d.ts

@@ -1,2 +1,3 @@
-import { HeroBannerInterface } from "./HeroBanner.interface";
+import { HeroBannerInterface } from './HeroBanner.interface';
+
 export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/HeroBanner/index.js

@@ -20,6 +20,7 @@ const HeroBanner = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
+      id: `id_${id}`,
       className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
       children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
         "div",

package/dist/Hyperlink/Hyperlink.interface.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from 'react';
+
 export interface HyperlinkProps extends PropsWithChildren {
     /**
      * react node to add as a children

package/dist/Hyperlink/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
-import { HyperlinkProps } from "./Hyperlink.interface";
+import { HyperlinkProps } from './Hyperlink.interface';
+import { FC } from 'react';
+
 export declare const Hyperlink: FC<HyperlinkProps>;

package/dist/Hyperlink/index.js

@@ -39,9 +39,7 @@ import "react-hook-form";
 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                                        */

package/dist/IconBillboard/IconBillboard.css.d.ts

@@ -1,5 +1,6 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const containerIconBillboard: import("@vanilla-extract/recipes").RuntimeFn<{
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+export declare const containerIconBillboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -18,7 +19,7 @@ export declare const containerIconBillboard: import("@vanilla-extract/recipes").
         };
     };
 }>;
-export declare const layout: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const layout: import('@vanilla-extract/recipes').RuntimeFn<{
     side: {
         true: {
             flexDirection: "row";
@@ -27,7 +28,7 @@ export declare const layout: import("@vanilla-extract/recipes").RuntimeFn<{
 }>;
 export declare const billboard_icon: string;
 export declare const headerIconBillboard: string;
-export declare const title: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             selectors: {
@@ -72,7 +73,7 @@ export declare const list: string;
 export declare const listItem: string;
 export declare const buttons: string;
 export declare const section_text: string;
-export declare const header_section: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const header_section: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/IconBillboard/IconBillboard.d.ts

@@ -1,7 +1,8 @@
+import { ContainerVariants, LayoutVariants } from './IconBillboard.css';
+import { ImageInterface } from '.';
+import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from "react";
-import { ImageInterface } from ".";
-import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
+
 export interface FocusProps {
     icon?: ImageInterface;
     headline?: ReactNode | undefined;

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

@@ -1,7 +1,8 @@
-import { BulletItemProps } from '../BulletItem';
-import { ChevronProps } from '../Chevron/Chevron.interface';
+import { ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
-import { ReactNode } from "react";
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { BulletItemProps } from '../BulletItem';
+
 export interface IconBillboardSet {
     id: string;
     headline: ReactNode | string;

package/dist/IconBillboard/IconBillboard.js

@@ -36,7 +36,7 @@ const IconBillboard = (props) => {
               /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
               /* @__PURE__ */ jsx("div", { children: body })
             ] }),
-            items && (items == null ? void 0 : items.length) > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
+            items && (items == null ? void 0 : items.length) > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: clsx(list, "list_unstyled"), children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, variant, children: item.content }, item.id)) }) })
           ] })
         ] }),
         callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(

package/dist/IconBillboard/IconBillboardSet.d.ts

@@ -1,2 +1,3 @@
-import type { IconBillboardSet as Props } from "./IconBillboard.interface";
+import { Props } from './IconBillboard.interface';
+
 export declare const IconBillboardSet: ({ variant, side, iconBillboards, headline, bodyCopy, additionalDetails, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./IconBillboard";
-export * from "./IconBillboard.css";
-export type { IconBillboardSet, ImageInterface, } from "./IconBillboard.interface";
-export * from "./IconBillboardSet";
+export * from './IconBillboard';
+export * from './IconBillboard.css';
+export type { IconBillboardSet, ImageInterface, } from './IconBillboard.interface';
+export * from './IconBillboardSet';

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -1,4 +1,4 @@
-export declare const billboard: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const billboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -18,7 +18,7 @@ export declare const billboard: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const imagePlacement: import('@vanilla-extract/recipes').RuntimeFn<{
     position: {
         left: {
             selectors: {
@@ -37,7 +37,7 @@ export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeF
         };
     };
 }>;
-export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             selectors: {
@@ -77,7 +77,7 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const header: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             selectors: {

package/dist/ImageBillboard/ImageBillboard.d.ts

@@ -1,2 +1,3 @@
-import type { ImageBillboardSetProps as Props } from "./ImageBillboard.interface";
+import { Props } from './ImageBillboard.interface';
+
 export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -1,8 +1,9 @@
-import { BulletItemProps } from '../BulletItem';
-import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ImageInterface } from '../IconBillboard';
+import { ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
-import { ReactNode } from "react";
+import { ImageInterface } from '../IconBillboard';
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { BulletItemProps } from '../BulletItem';
+
 export interface ImageBillboardSetProps {
     id: string;
     headline?: string | ReactNode;

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -1,2 +1,3 @@
-import { ImageBillboardInterface } from "./ImageBillboard.interface";
+import { ImageBillboardInterface } from './ImageBillboard.interface';
+
 export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, set, textImageLineOneSmall, textImageLineTwoBig, textImageLineThreeSmall, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -87,15 +87,20 @@ const ImageBillboard = ({
               )
             ] }),
             /* @__PURE__ */ jsx("div", { className: `push_up ${body_copy}`, children: bodyCopy }),
-            /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up", children: bullets.map(({ id: id2, icon, copy }) => /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
-              /* @__PURE__ */ jsx("div", { className: "img_item", children: billboard_variant ? /* @__PURE__ */ jsx(
-                SvgCheckIcon,
-                {
-                  variant: billboard_variant === "primary" || billboard_variant === "secondary" ? "primary" : "secondary"
-                }
-              ) : /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, alt: icon == null ? void 0 : icon.altText }) }),
-              /* @__PURE__ */ jsx("span", { children: copy })
-            ] }, id2)) })
+            bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up", children: bullets.map(
+              ({ id: id2, icon, copy, subBullet }) => !subBullet ? /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
+                /* @__PURE__ */ jsx("div", { className: "img_item", children: billboard_variant ? /* @__PURE__ */ jsx(
+                  SvgCheckIcon,
+                  {
+                    variant: billboard_variant === "primary" || billboard_variant === "secondary" ? "primary" : "secondary"
+                  }
+                ) : /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, alt: icon == null ? void 0 : icon.altText }) }),
+                /* @__PURE__ */ jsx("span", { children: copy })
+              ] }, id2) : /* @__PURE__ */ jsx("ul", { className: "mb_0 push_up", children: /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
+                /* @__PURE__ */ jsx("div", { className: "img_item", children: /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, alt: icon == null ? void 0 : icon.altText }) }),
+                /* @__PURE__ */ jsx("span", { children: copy })
+              ] }) }, id2)
+            ) })
           ] }),
           callToActionRow.length > 0 && /* @__PURE__ */ jsx(
             "div",

package/dist/ImageBillboard/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./ImageBillboard";
-export * from "./ImageBillboard.css";
-export type * from "./ImageBillboard.interface";
-export * from "./ImageBillboardSet";
+export * from './ImageBillboard';
+export * from './ImageBillboard.css';
+export type * from './ImageBillboard.interface';
+export * from './ImageBillboardSet';

package/dist/Input/Input.css.d.ts

@@ -1,4 +1,4 @@
-export declare const iconInput: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const iconInput: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             width: number;
@@ -14,7 +14,7 @@ export declare const iconInput: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const labelClassName: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {};
         secondary: {};
@@ -39,7 +39,7 @@ export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeF
 }>;
 export declare const iconContainerBase: string;
 export declare const iconContainer: Record<"left" | "right", string>;
-export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             paddingTop: number;
@@ -73,7 +73,7 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             fontSize: number;
@@ -129,12 +129,12 @@ export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     [x: string]: {
         [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
     };
 }>;
-export declare const helperText: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const helperText: import('@vanilla-extract/recipes').RuntimeFn<{
     disabled: {
         true: {
             color: "#5E6A74";

package/dist/Input/Input.d.ts

@@ -1,5 +1,6 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils';
-import { InputHTMLAttributes, ReactNode } from "react";
+
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: ReactNode;
     iconLeft?: ReactNode;
@@ -10,4 +11,4 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     helperText?: ReactNode;
     variant?: QuaternaryTypes;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input/InputPhone.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { InputProps } from ".";
-export declare const InputPhone: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+import { InputProps } from '.';
+
+export declare const InputPhone: import('react').ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./Input";
-export * from "./Input.css";
-export * from "./InputPhone";
+export * from './Input';
+export * from './Input.css';
+export * from './InputPhone';

package/dist/Inputs/Input.css.d.ts

@@ -1,4 +1,4 @@
-export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             width: number;
@@ -14,7 +14,7 @@ export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const labelClassName: import('@vanilla-extract/recipes').RuntimeFn<{
     error: {
         true: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -29,7 +29,7 @@ export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeF
 }>;
 export declare const iconContainerBase: string;
 export declare const iconContainer: Record<"left" | "right", string>;
-export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             paddingTop: number;
@@ -63,7 +63,7 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             fontSize: number;
@@ -119,12 +119,12 @@ export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     [x: string]: {
         [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
     };
 }>;
-export declare const helperText: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const helperText: import('@vanilla-extract/recipes').RuntimeFn<{
     disabled: {
         true: {
             color: "#5E6A74";

package/dist/MainHTML/index.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
+
 export interface BodyProps extends PropsWithChildren {
     theme: "Axos" | "Premier";
 }

package/dist/Modal/Modal.css.d.ts

@@ -9,3 +9,4 @@ export declare const modal_subtitle: string;
 export declare const modal_body: string;
 export declare const modal_footer: string;
 export declare const site_link: string;
+export declare const speedbump_background: string;

package/dist/Modal/Modal.css.js

@@ -12,6 +12,7 @@ var modal_subtitle = "_427id37";
 var modal_body = "_427id38";
 var modal_footer = "_427id39";
 var site_link = "_427id3a";
+var speedbump_background = "_427id3b";
 export {
   hr,
   modal,
@@ -23,5 +24,6 @@ export {
   modal_subtitle,
   modal_title,
   site_link,
-  solid
+  solid,
+  speedbump_background
 };

package/dist/Modal/Modal.d.ts

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

package/dist/Modal/Modal.js

@@ -36,16 +36,14 @@ import "react-hook-form";
 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";
+import { modal, speedbump_background, 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,
@@ -53,47 +51,50 @@ const Modal = ({
   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"
-            }
-          )
-        ]
-      }
-    )
-  ] }) }) }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { id: "speedbump", tabIndex: -1, role: "dialog", className: modal, children: [
+    /* @__PURE__ */ jsx("div", { className: speedbump_background, onClick: onCancel }),
+    /* @__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

@@ -1,10 +1,11 @@
-import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+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 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/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Modal";
-export * from "./contextApi/store";
+export * from './Modal';
+export * from './contextApi/store';