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

package/dist/ApyCalculator/index.js

@@ -19,6 +19,14 @@ const ApyCalculator = () => {
   const [error, setError] = useState("");
   const [interestRate, setInterestRate] = useState(0);
   const isValidNumber = (input) => {
+    if (typeof input !== "number") {
+      return false;
+    } else if (input < 0) {
+      return false;
+    } else
+      return true;
+  };
+  const isValidAPY = (input) => {
     if (typeof input !== "number") {
       return false;
     } else if (input <= 0) {
@@ -35,9 +43,12 @@ const ApyCalculator = () => {
   }, [convertInterest, interestRate, setInterestRate]);
   const handleCalculate = () => {
     convertInterest();
-    setError("");
-    if (!isValidNumber(initialDeposit) || !isValidNumber(APY) || !isValidNumber(months) || !isValidNumber(monthlyDeposits)) {
-      setError("Invalid input. Please enter positive numeric values.");
+    if (!isValidNumber(initialDeposit) || !isValidNumber(months) || !isValidNumber(monthlyDeposits) || !isValidAPY(APY)) {
+      if (!isValidAPY(APY)) {
+        setError("*APY has to be a positive number.");
+      } else {
+        setError("Invalid input. Please enter positive numeric values.");
+      }
     } else {
       let total;
       if (compounding === 360) {
@@ -77,7 +88,13 @@ const ApyCalculator = () => {
       },
       children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
         /* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
-          /* @__PURE__ */ jsx("div", { className: `${section_header}`, children: /* @__PURE__ */ jsx("h1", { className: "header_1", children: "APY Interest Calculator" }) }),
+          /* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
+            /* @__PURE__ */ jsx("h1", { className: "header_1", children: "APY Interest Calculator" }),
+            /* @__PURE__ */ jsxs("p", { className: "push_up", children: [
+              "Calculate how much interest you can earn on your money with our APY Interest Calculator.",
+              /* @__PURE__ */ jsx("sup", { children: "1" })
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
             /* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: /* @__PURE__ */ jsx("span", { className: `${errorTag}`, children: error }) }),
             /* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
@@ -196,7 +213,7 @@ const ApyCalculator = () => {
               ),
               /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: /* @__PURE__ */ jsxs("p", { children: [
                 /* @__PURE__ */ jsx("strong", { children: "NOTE:" }),
-                " Our APY Interest Calculator is an educational tool to help you determine potential earnings. Your calculator results are estimates and do not guarantee cost savings or tax benefits. UFB Direct does not guarantee your results as determined by using this calculator."
+                " Our APY Interest Calculator is an educational tool to help you determine potential earnings. Your calculator results are estimates and do not guarantee cost savings or tax benefits. Axos Bank does not guarantee your results as determined by using this calculator."
               ] }) })
             ] })
           ] })
@@ -210,7 +227,7 @@ const ApyCalculator = () => {
                 style: { backgroundColor: "#efeef0", maxWidth: "520px" },
                 children: [
                   /* @__PURE__ */ jsx("h2", { className: "header_2", children: "Select Savings" }),
-                  /* @__PURE__ */ jsx("div", { className: "push_up mb_0", children: "Zero fees. Up to 0.20% APY*. Complimentary ATM card. Select Savings helps your clients bank smarter with an account that rewards their savvy money habits." }),
+                  /* @__PURE__ */ jsx("div", { className: "push_up mb_0", children: "Zero fees. Up to 0.20% APY**. Complimentary ATM card. Select Savings helps your clients bank smarter with an account that rewards their savvy money habits." }),
                   /* @__PURE__ */ jsxs("div", { className: `${cta_section} push_up_24 flex flex_row`, children: [
                     /* @__PURE__ */ jsx(
                       Button,
@@ -237,16 +254,16 @@ const ApyCalculator = () => {
                   /* @__PURE__ */ jsx("h2", { className: "header_2", children: "Recommended Accounts" }),
                   /* @__PURE__ */ jsxs("table", { className: `${marketing_table}`, children: [
                     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("th", { scope: "col slate", children: "Account" }),
-                      /* @__PURE__ */ jsx("th", { scope: "col slate", children: "APY*" })
+                      /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "Account" }),
+                      /* @__PURE__ */ jsx("th", { style: { width: "50%" }, scope: "col slate", children: "APY**" })
                     ] }) }),
                     /* @__PURE__ */ jsxs("tbody", { children: [
                       /* @__PURE__ */ jsxs("tr", { children: [
-                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Money Market", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-savings", children: "Select Savings" }) }),
+                        /* @__PURE__ */ jsx("td", { "aria-label": "Select Checking", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-savings", children: "Select Savings" }) }),
                         /* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.20%" })
                       ] }),
                       /* @__PURE__ */ jsxs("tr", { children: [
-                        /* @__PURE__ */ jsx("td", { "aria-label": "UFB Secure Savings", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-checking", children: "Select Checking" }) }),
+                        /* @__PURE__ */ jsx("td", { "aria-label": "Select Checking", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-checking", children: "Select Checking" }) }),
                         /* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.10%" })
                       ] })
                     ] })

package/dist/BulletItem/BulletItem.d.ts

@@ -8,5 +8,6 @@ export interface BulletItemProps extends PropsWithChildren {
         altText?: string;
     };
     copy?: ReactNode;
+    subBullet?: boolean;
 }
 export declare const BulletItem: (props: BulletItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/BulletItem/BulletItem.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { listItem } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgCheckCircle from "../icons/CheckCircle.js";
@@ -7,13 +7,40 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                                    */
+import { vars } from "../themes/axos.css.js";
 import { bulletIcon } from "./BulletItem.css.js";
 const BulletItem = (props) => {
   const iconCheckVariant = /* @__PURE__ */ new Map([
-    ["primary", /* @__PURE__ */ jsx(SvgCheckCircle, { height: 18, width: 18 })],
-    ["secondary", /* @__PURE__ */ jsx(SvgCheckCircle, { height: 18, width: 18 })],
-    ["tertiary", /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })],
-    ["quaternary", /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })],
+    [
+      "primary",
+      /* @__PURE__ */ jsx(SvgCheckCircle, { fill: vars.icons.check.primary, height: 18, width: 18 })
+    ],
+    [
+      "secondary",
+      /* @__PURE__ */ jsx(SvgCheckCircle, { fill: vars.icons.check.primary, height: 18, width: 18 })
+    ],
+    [
+      "tertiary",
+      /* @__PURE__ */ jsx(
+        SvgCheckCircleLight,
+        {
+          fill: vars.icons.check.secondary,
+          height: 18,
+          width: 18
+        }
+      )
+    ],
+    [
+      "quaternary",
+      /* @__PURE__ */ jsx(
+        SvgCheckCircleLight,
+        {
+          fill: vars.icons.check.secondary,
+          height: 18,
+          width: 18
+        }
+      )
+    ],
     [void 0, /* @__PURE__ */ jsx(SvgCheckCircleLight, { height: 18, width: 18 })]
   ]);
   const Icon = iconCheckVariant.get(props.variant);

package/dist/Carousel/index.js

@@ -68,26 +68,28 @@ const Carousel = (props) => {
   const selectItem = (id) => {
     change(id);
   };
+  const child = children;
   const showDots = () => {
-    if (children) {
-      return Children.map(children, (_, indx) => /* @__PURE__ */ jsx(
+    var _a, _b;
+    if (children && ((_b = (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.content) == null ? void 0 : _b.length) > 1) {
+      return /* @__PURE__ */ jsx("div", { className: dots, children: Children.map(children, (_, indx) => /* @__PURE__ */ jsx(
         "div",
         {
           onClick: () => selectItem(indx),
           className: dot({ variant, selected: indx === itemSelected })
         },
         indx
-      ));
+      )) });
     }
-    if (items) {
-      return items.map((_, indx) => /* @__PURE__ */ jsx(
+    if (items && items.length > 1) {
+      return /* @__PURE__ */ jsx("div", { className: dots, children: items.map((_, indx) => /* @__PURE__ */ jsx(
         "div",
         {
           onClick: () => selectItem(indx),
           className: dot({ variant, selected: indx === itemSelected })
         },
         indx
-      ));
+      )) });
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: clsx(carousel({ variant })), children: [
@@ -108,7 +110,7 @@ const Carousel = (props) => {
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsx("div", { className: dots, children: showDots() })
+    showDots()
   ] });
 };
 export {

package/dist/Chevron/Chevron.css.d.ts

@@ -2,12 +2,30 @@ export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:hover": {
+                    textDecoration: "underline";
+                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
         };
         secondary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:hover": {
+                    textDecoration: "underline";
+                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:hover": {
+                    textDecoration: "underline";
+                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
         };
     };
 }>;

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

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
 
 export interface HeroBannerInterface {
+    id?: string;
     className?: string;
     variant: string;
     headline: string | ReactNode;

package/dist/ContentBanner/index.js

@@ -11,12 +11,14 @@ const ContentBanner = ({
   variant,
   headline,
   bodyCopy,
-  callToActionRow
+  callToActionRow,
+  id
 }) => {
   const banner_variant = getVariant(variant);
   return /* @__PURE__ */ jsx(
     "section",
     {
+      id: `id_${id}`,
       className: `${content_banner({ variant: banner_variant })} ${section_pad}`,
       children: /* @__PURE__ */ jsxs("div", { className: `containment`, children: [
         /* @__PURE__ */ jsxs("div", { className: `text_center`, children: [
@@ -30,7 +32,7 @@ const ContentBanner = ({
           bodyCopy ? /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy }) : null
         ] }),
         Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow == null ? void 0 : callToActionRow.map(
-          ({ id, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+          ({ id: id2, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
             Button,
             {
               targetUrl,
@@ -39,7 +41,7 @@ const ContentBanner = ({
               rounded: "medium",
               children: displayText
             },
-            id
+            id2
           ) : /* @__PURE__ */ jsx(
             Chevron,
             {
@@ -48,7 +50,7 @@ const ContentBanner = ({
               className: `${link}`,
               children: displayText
             },
-            id
+            id2
           )
         ) })
       ] })

package/dist/FooterDisclosure/FooterDisclosure.css.d.ts

@@ -4,6 +4,5 @@ export declare const footerDisclosure: import('@vanilla-extract/recipes').Runtim
     };
 }>;
 export declare const footerParagraph: string;
-export declare const footerContent: string;
 export declare const iconsContent: string;
 export declare const footerLink: string;

package/dist/FooterDisclosure/FooterDisclosure.css.js

@@ -2,11 +2,9 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var footerDisclosure = createRuntimeFn({ defaultClassName: "_1a6b3vu0", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
 var footerParagraph = "_1a6b3vu1";
-var footerContent = "_1a6b3vu2";
-var iconsContent = "_1a6b3vu3";
-var footerLink = "_1a6b3vu4";
+var iconsContent = "_1a6b3vu2";
+var footerLink = "_1a6b3vu3";
 export {
-  footerContent,
   footerDisclosure,
   footerLink,
   footerParagraph,

package/dist/FooterDisclosure/FooterDisclosure.js

@@ -1,15 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { footerContent, footerParagraph, iconsContent, footerDisclosure } from "./FooterDisclosure.css.js";
+import { footerParagraph, iconsContent, footerDisclosure } from "./FooterDisclosure.css.js";
 const FooterContent = (props) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(footerContent, props.className, "containment"),
-      style: props.style,
-      children: props.children
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: clsx(props.className, "containment"), style: props.style, children: props.children });
 };
 const FooterParagraph = (props) => {
   return /* @__PURE__ */ jsx("div", { className: clsx(footerParagraph, props.className), style: props.style, children: props.children });
@@ -18,7 +11,12 @@ const FooterIcons = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(iconsContent, props.className, "containment"),
+      className: clsx(
+        iconsContent,
+        props.className,
+        "containment",
+        "push_up_24"
+      ),
       style: props.style,
       children: props.children
     }

package/dist/FooterDisclosure/index.js

@@ -1,11 +1,10 @@
-import { footerContent, footerDisclosure, footerLink, footerParagraph, iconsContent } from "./FooterDisclosure.css.js";
+import { footerDisclosure, footerLink, footerParagraph, iconsContent } from "./FooterDisclosure.css.js";
 import { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph } from "./FooterDisclosure.js";
 export {
   FooterContent,
   FooterDisclosure,
   FooterIcons,
   FooterParagraph,
-  footerContent,
   footerDisclosure,
   footerLink,
   footerParagraph,

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/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/ImageBillboard/ImageBillboard.css.d.ts

@@ -135,3 +135,4 @@ export declare const rate_pad: string;
 export declare const up_to: string;
 export declare const rate_billboard: string;
 export declare const apy_billboard: string;
+export declare const body_copy: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -26,6 +26,7 @@ var rate_pad = "_1m7m2aw";
 var up_to = "_1m7m2ax";
 var rate_billboard = "_1m7m2ay";
 var apy_billboard = "_1m7m2az";
+var body_copy = "_1m7m2a10";
 export {
   apy_billboard,
   billboard,
@@ -36,6 +37,7 @@ export {
   billboard_image,
   billboard_img,
   body,
+  body_copy,
   header,
   imagePlacement,
   image_background,

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -11,7 +11,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, image_background, rate_container, rate_pad, up_to, rate_billboard, apy_billboard, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
+import { billboard, imagePlacement, billboard_img, image_background, rate_container, rate_pad, up_to, rate_billboard, apy_billboard, body, billboard_body, billboard_header_section, supertag, header, body_copy, billboard_ctas } from "./ImageBillboard.css.js";
 const ImageBillboard = ({
   id,
   variant,
@@ -86,16 +86,21 @@ const ImageBillboard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "push_up", 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)) })
+            /* @__PURE__ */ jsx("div", { className: `push_up ${body_copy}`, children: bodyCopy }),
+            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.js

@@ -1,5 +1,5 @@
 import { ImageBillboardSet } from "./ImageBillboard.js";
-import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, header, imagePlacement, image_background, mh_330, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
+import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, header, imagePlacement, image_background, mh_330, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
@@ -13,6 +13,7 @@ export {
   billboard_image,
   billboard_img,
   body,
+  body_copy,
   header,
   imagePlacement,
   image_background,

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.js

@@ -43,7 +43,7 @@ import "../Table/Table.css.js";
 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,
@@ -51,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