@dmsi/wedgekit-react 0.0.161 → 0.0.163

package/dist/components/index.cjs

@@ -74,7 +74,6 @@ __export(components_exports, {
   Menu: () => Menu,
   MenuOption: () => MenuOption,
   Paragraph: () => Paragraph,
-  PaymentOnAccountModal: () => PaymentOnAccountModal,
   Search: () => Search,
   Select: () => Select,
   Subheader: () => Subheader,
@@ -1271,7 +1270,8 @@ var Menu = (_a) => {
     mobileHide,
     useDefaultMinWidth,
     autoFocusOff,
-    menuName
+    menuName,
+    calculateMinMaxHeight
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -1289,7 +1289,8 @@ var Menu = (_a) => {
     "mobileHide",
     "useDefaultMinWidth",
     "autoFocusOff",
-    "menuName"
+    "menuName",
+    "calculateMinMaxHeight"
   ]);
   const internalRef = (0, import_react8.useRef)(null);
   const actualRef = ref || internalRef;
@@ -1306,8 +1307,11 @@ var Menu = (_a) => {
     }
   );
   (0, import_react8.useEffect)(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
       if (actualRef.current.childElementCount > 4) {
@@ -1325,7 +1329,18 @@ var Menu = (_a) => {
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+  (0, import_react8.useEffect)(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
   (0, import_react8.useEffect)(() => {
     if (!show) {
       return;
@@ -2004,7 +2019,7 @@ function DataCellHeader(_a) {
                   children: "Filter"
                 })
               ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   onClick: () => {
@@ -2055,11 +2070,7 @@ function DataCellHeader(_a) {
                       })
                     );
                   },
-                  children: [
-                    "Freeze [",
-                    header.column.columnDef.header,
-                    "]"
-                  ]
+                  children: `Freeze [${header.column.columnDef.header}]`
                 })
               )
             ]
@@ -2633,6 +2644,7 @@ function ColumnSelectorHeaderCell({
             position: "bottom-right",
             show,
             setShow,
+            calculateMinMaxHeight: true,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Button,
@@ -3703,461 +3715,32 @@ var Tooltip = ({
 };
 Tooltip.displayName = "Tooltip";
 
-// src/components/Modal.tsx
-var import_clsx24 = __toESM(require("clsx"), 1);
-var import_react19 = require("react");
+// src/components/Accordion.tsx
+var import_clsx21 = __toESM(require("clsx"), 1);
 
-// src/components/Heading.tsx
+// src/components/Card.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Heading = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as,
-    color,
-    align,
-    variant = "heading1",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "color",
-    "align",
-    "variant",
-    "id",
-    "testid"
-  ]);
-  const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
-  const Element = as != null ? as : defaultElement;
+function Card(props) {
+  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
       className: (0, import_clsx19.default)(
-        typography[variant],
-        className,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right"
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
+        rest.className
       ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      })
-    }, props), {
       children
     })
   );
-};
-Heading.displayName = "Heading";
-var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
-var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
-var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
-Heading1.displayName = "Heading1";
-Heading2.displayName = "Heading2";
-Heading3.displayName = "Heading3";
-
-// src/components/ModalHeader.tsx
-var import_clsx20 = __toESM(require("clsx"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var ModalHeader = ({
-  title,
-  hideCloseIcon,
-  headerIcon,
-  onClose,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx20.default)(
-        "flex justify-between items-center",
-        layoutPaddding,
-        layoutGroupGap
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_clsx20.default)("flex items-center", layoutGroupGap), children: [
-          headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
-        ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          Button,
-          {
-            id: id ? `${id}-close-button` : void 0,
-            testid: testid ? `${testid}-close-button` : void 0,
-            iconOnly: true,
-            variant: "tertiary",
-            onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 24 }) })
-          }
-        )
-      ]
-    }
-  );
-};
-ModalHeader.displayName = "ModalHeader";
-
-// src/components/ModalContent.tsx
-var import_clsx21 = __toESM(require("clsx"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function ModalContent({
-  fixedHeightScrolling,
-  children,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx21.default)(
-        "flex-grow desktop:flex-grow-0",
-        layoutPaddding,
-        fixedHeightScrolling && "overflow-auto"
-      ),
-      children
-    }
-  );
 }
-ModalContent.displayName = "ModalContent";
-
-// src/components/ModalButtons.tsx
-var import_clsx22 = __toESM(require("clsx"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var ModalButtons = ({
-  onClose,
-  onContinue,
-  customActions,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx22.default)(
-        "border-t border-neutral-300 flex justify-end",
-        layoutPaddding,
-        layoutGroupGap
-      ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          Button,
-          {
-            id: id ? `${id}-close-button` : void 0,
-            testid: testid ? `${testid}-close-button` : void 0,
-            variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "close", size: 24 }),
-            onClick: onClose,
-            className: "max-sm:w-full",
-            children: "Close"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          Button,
-          {
-            id: id ? `${id}-continue-button` : void 0,
-            testid: testid ? `${testid}-continue-button` : void 0,
-            variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "check", size: 24 }),
-            className: "max-sm:w-full",
-            onClick: onContinue,
-            children: "Continue"
-          }
-        )
-      ] })
-    }
-  );
-};
-ModalButtons.displayName = "ModalButtons";
-
-// src/components/ModalScrim.tsx
-var import_clsx23 = __toESM(require("clsx"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var ModalScrim = ({
-  show = false,
-  size = "small",
-  children,
-  onClick,
-  ref,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx23.default)(
-        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
-        !show && " pointer-events-none",
-        size === "small" && "p-4",
-        "inset-0 z-50"
-      ),
-      onMouseDown: onClick,
-      ref,
-      children
-    }
-  );
-};
-ModalScrim.displayName = "ModalScrim";
-
-// src/components/Modal.tsx
-var import_react_dom3 = require("react-dom");
-var import_react_use = require("react-use");
-
-// src/components/useMounted.tsx
-var import_react18 = require("react");
-var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
-  }, []);
-  return isMounted;
-};
-
-// src/components/Modal.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var fadeInScale = (element, duration = 300) => element.animate(
-  [
-    { opacity: 0, transform: "scale(0.95)" },
-    { opacity: 1, transform: "scale(1)" }
-  ],
-  {
-    duration,
-    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-    fill: "both"
-  }
-);
-var fadeOutScale = (element, duration = 200) => element.animate(
-  [
-    { opacity: 1, transform: "scale(1)" },
-    { opacity: 0, transform: "scale(0.95)" }
-  ],
-  {
-    duration,
-    easing: "ease-in-out",
-    fill: "both"
-  }
-);
-var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
-  duration,
-  easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-  fill: "both"
-});
-var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
-  duration,
-  easing: "ease-in-out",
-  fill: "both"
-});
-var whenAllAnimationsFinish = (animations, callback) => {
-  let finishedCount = 0;
-  animations.forEach((animation) => {
-    animation.onfinish = () => {
-      finishedCount += 1;
-      if (finishedCount === animations.length) {
-        callback();
-      }
-    };
-  });
-};
-var sizes = {
-  small: {
-    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
-  },
-  medium: {
-    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
-  },
-  large: {
-    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
-  },
-  "x-large": {
-    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
-  }
-};
-var Modal = ({
-  id,
-  testid,
-  title,
-  open = false,
-  size = "small",
-  className,
-  children,
-  onClose,
-  onContinue,
-  closeOnBackdropClick = true,
-  showButtons = false,
-  hideCloseIcon = false,
-  headerIcon,
-  fixedHeightScrolling = false,
-  customActions
-}) => {
-  var _a;
-  const mounted = useMounted();
-  const modalRef = (0, import_react19.useRef)(null);
-  const bgRef = (0, import_react19.useRef)(null);
-  const wasOpen = (0, import_react_use.usePrevious)(open);
-  const isMobile = useMatchesMobile();
-  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react19.useEffect)(() => {
-    if (!mounted) return;
-    if (!modalRef.current || !bgRef.current) {
-      console.error("Modal or background reference is not set.");
-      return;
-    }
-    if (wasOpen === void 0) return;
-    if (wasOpen && !open) {
-      const modalAnimation = fadeOutScale(modalRef.current);
-      const bgAnimation = bgFadeOut(bgRef.current);
-      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
-        if (onClose) {
-          onClose();
-        }
-      });
-    } else if (!wasOpen && open) {
-      fadeInScale(modalRef.current);
-      bgFadeIn(bgRef.current);
-    }
-  }, [mounted, open]);
-  const handleKeyDown = (0, import_react19.useCallback)(
-    (e) => {
-      if (e.key === "Escape") {
-        if (onClose) {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    },
-    [onClose, bgRef, modalRef]
-  );
-  const handleClose = (0, import_react19.useCallback)(() => {
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
-  (0, import_react19.useEffect)(() => {
-    if (open) {
-      document.addEventListener("keyup", handleKeyDown);
-    }
-    return () => {
-      document.removeEventListener("keyup", handleKeyDown);
-    };
-  }, [open, handleKeyDown]);
-  (0, import_react19.useEffect)(() => {
-    if (!open) return;
-    const scrollY = window.scrollY;
-    const body = document.body;
-    body.style.position = "fixed";
-    body.style.top = `-${scrollY}px`;
-    body.style.left = "0";
-    body.style.right = "0";
-    body.style.overflow = "hidden";
-    body.style.width = "100%";
-    return () => {
-      body.style.position = "";
-      body.style.top = "";
-      body.style.left = "";
-      body.style.right = "";
-      body.style.overflow = "";
-      body.style.width = "";
-      window.scrollTo(0, scrollY);
-    };
-  }, [open]);
-  const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react19.useCallback)(
-    (e) => {
-      const target = e.target;
-      const currentTarget = e.currentTarget;
-      if (currentTarget.contains(target) && currentTarget !== target) {
-        e.stopPropagation();
-        return;
-      }
-      if (open && closeOnBackdropClick) {
-        handleClose();
-      }
-    },
-    [open, closeOnBackdropClick, handleClose]
-  );
-  if (!mounted) {
-    return null;
-  }
-  return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      ModalScrim,
-      {
-        id: id ? `${id}-scrim` : void 0,
-        testid: testid ? `${testid}-scrim` : void 0,
-        size,
-        ref: bgRef,
-        show: open,
-        onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-          "div",
-          {
-            id,
-            "data-testid": testid,
-            ref: modalRef,
-            className: (0, import_clsx24.default)(
-              "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
-              computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
-              className,
-              sizeClass
-            ),
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                ModalHeader,
-                {
-                  id: id ? `${id}-header` : void 0,
-                  testid: testid ? `${testid}-header` : void 0,
-                  title,
-                  onClose: handleClose,
-                  hideCloseIcon,
-                  headerIcon
-                }
-              ),
-              children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                ModalContent,
-                {
-                  id: id ? `${id}-content` : void 0,
-                  testid: testid ? `${testid}-content` : void 0,
-                  fixedHeightScrolling: computedFixedHeightScrolling,
-                  children
-                }
-              ),
-              showButtons && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                ModalButtons,
-                {
-                  id: id ? `${id}-buttons` : void 0,
-                  testid: testid ? `${testid}-buttons` : void 0,
-                  onClose: handleClose,
-                  onContinue,
-                  customActions
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    findDocumentRoot(bgRef.current)
-  );
-};
-Modal.displayName = "Modal";
 
 // src/components/Stack.tsx
-var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx25.default)(
+var import_clsx20 = __toESM(require("clsx"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx20.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -4173,7 +3756,7 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx25.default)
   justify === "around" && "justify-around"
 );
 var useGapClassNames = (sizing) => {
-  return (0, import_clsx25.default)(
+  return (0, import_clsx20.default)(
     sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
     sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
     sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
@@ -4258,7 +3841,7 @@ var Stack = (_a) => {
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -4279,7 +3862,7 @@ var Stack = (_a) => {
         top: top !== void 0 ? `${top}px` : void 0,
         left: left !== void 0 ? `${left}px` : void 0
       },
-      className: (0, import_clsx25.default)(
+      className: (0, import_clsx20.default)(
         "scrollbar-thin",
         "max-w-screen",
         width !== "fit" && "w-full",
@@ -4324,44 +3907,18 @@ var Stack = (_a) => {
   );
 };
 
-// src/components/Card.tsx
-var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function Card(props) {
-  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      "data-testid": testid,
-      className: (0, import_clsx26.default)(
-        "rounded-sm p-desktop-layout-padding",
-        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
-        rest.className
-      ),
-      children
-    })
-  );
-}
-
-// src/components/PaymentOnAccountModal.tsx
-var import_react21 = require("react");
-
-// src/components/SelectPaymentMethod.tsx
-var import_react20 = require("react");
-
 // src/components/Accordion.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Accordion(props) {
   const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
-    after = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    after = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Icon,
       {
         name: "expand_more",
-        className: (0, import_clsx27.default)(
+        className: (0, import_clsx21.default)(
           "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
           isOpen ? "rotate-180" : "rotate-0"
         )
@@ -4374,10 +3931,10 @@ function Accordion(props) {
     e.preventDefault();
     onClick == null ? void 0 : onClick();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Card,
     {
-      className: (0, import_clsx27.default)(
+      className: (0, import_clsx21.default)(
         "overflow-hidden select-none",
         { "cursor-pointer": !disabled },
         className
@@ -4386,25 +3943,25 @@ function Accordion(props) {
       onClick: handleClick,
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
             before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
+            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
           ] }),
           after
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
-            className: (0, import_clsx27.default)("grid transition-all duration-300 ease-in-out"),
+            className: (0, import_clsx21.default)("grid transition-all duration-300 ease-in-out"),
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
             "data-testid": testid ? `${testid}-content-container` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "div",
               {
-                className: (0, import_clsx27.default)(
+                className: (0, import_clsx21.default)(
                   typography.paragraph,
                   "text-text-primary-normal desktop:pt-desktop-layout-gap",
                   "flex flex-col gap-desktop-layout-gap"
@@ -4419,561 +3976,6 @@ function Accordion(props) {
     }
   );
 }
-
-// src/components/Radio.tsx
-var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Radio = (_a) => {
-  var _b = _a, {
-    className,
-    label,
-    error,
-    disabled,
-    checked,
-    readOnly,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "label",
-    "error",
-    "disabled",
-    "checked",
-    "readOnly",
-    "id",
-    "testid"
-  ]);
-  const radioId = id;
-  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
-  const defaultClassName = (0, import_clsx28.default)(
-    !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
-  );
-  const errorClassName = (0, import_clsx28.default)(
-    error && !disabled && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
-  );
-  const disabledClassName = (0, import_clsx28.default)(
-    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
-  );
-  const readonlyClassName = (0, import_clsx28.default)(
-    readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    "label",
-    {
-      htmlFor: radioId,
-      className: (0, import_clsx28.default)(
-        "flex items-center",
-        componentGap,
-        disabled ? "cursor-default" : "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            "input",
-            __spreadValues({
-              id: radioId,
-              "data-testid": testid,
-              type: "radio",
-              className: "sr-only peer",
-              disabled,
-              checked,
-              readOnly
-            }, props)
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            "div",
-            {
-              className: (0, import_clsx28.default)(
-                "size-6 rounded-full border flex items-center justify-center",
-                baseTransition,
-                defaultClassName,
-                errorClassName,
-                disabledClassName,
-                readonlyClassName
-              ),
-              children: checked && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                RadioIcon,
-                {
-                  className: (0, import_clsx28.default)(
-                    "transition-colors",
-                    !error && !disabled && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
-                    error && !disabled && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
-                    disabled && "text-icon-on-action-secondary-disabled",
-                    readOnly && "text-icon-on-action-secondary-disabled"
-                  )
-                }
-              )
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
-      ]
-    }
-  );
-};
-Radio.displayName = "Radio";
-var RadioIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "rect",
-          {
-            x: "1",
-            y: "1",
-            width: "22",
-            height: "22",
-            rx: "11",
-            stroke: "currentColor",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
-      ]
-    }
-  );
-};
-RadioIcon.displayName = "RadioIcon";
-
-// src/components/HorizontalDivider.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function HorizontalDivider({ id, testid, hideOnMobile }) {
-  const hideOnMobileStyle = (0, import_clsx29.default)(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { id, "data-testid": testid, className: (0, import_clsx29.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
-}
-
-// src/components/Spinner.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "animate-spin",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "0s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.875s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.75s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.625s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.5s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.375s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.25s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.125s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/WorldpayIframe.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function WorldpayIframe({ url }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
-}
-
-// src/components/SelectPaymentMethod.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-function SelectPaymentMethod(props) {
-  const {
-    amountToPay,
-    selectedMethod,
-    onSelectMethod,
-    selectedCredits,
-    allCredits,
-    allowedMethods,
-    selectedACHBankGuid,
-    setSelectedACHBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading,
-    withCredits = false,
-    isLoadingCCiframe,
-    cardPaymentUrl,
-    testid
-  } = props;
-  const payAllWithCredits = withCredits && amountToPay <= 0;
-  (0, import_react20.useEffect)(() => {
-    if (payAllWithCredits) {
-      onSelectMethod("CreditsOnly");
-    } else {
-      onSelectMethod(null);
-    }
-  }, [onSelectMethod, payAllWithCredits]);
-  function handleToggle(method) {
-    onSelectMethod(method);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      CreditsSelector,
-      {
-        testid: testid ? `${testid}-credit-selector` : void 0,
-        selectedCredits: selectedCredits || [],
-        allCredits: allCredits || [],
-        setSelectedCredits: props.setSelectedCredits || (() => {
-        })
-      }
-    ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      ACHSelector,
-      {
-        testid: testid ? `${testid}-ach-selector` : void 0,
-        selectedMethod,
-        handleToggle,
-        selectedBankGuid: selectedACHBankGuid || null,
-        setSelectedBankGuid: setSelectedACHBankGuid || (() => {
-        }),
-        customerBanks: customerBanks || [],
-        onPay,
-        isPayLoading: isPayLoading || false,
-        disabled: payAllWithCredits || !amountToPay
-      }
-    ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      Accordion,
-      {
-        testid: testid ? `${testid}-cc-payment` : void 0,
-        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          Radio,
-          {
-            testid: testid ? `${testid}-cc-payment-radio` : void 0,
-            label: "Pay by Credit/Debit Card",
-            checked: !payAllWithCredits && selectedMethod === "CCPayment",
-            onChange: (e) => e.stopPropagation(),
-            disabled: payAllWithCredits || !amountToPay
-          }
-        ),
-        onClick: () => {
-          if (payAllWithCredits || !amountToPay) return;
-          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
-        },
-        disabled: payAllWithCredits || !amountToPay,
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            items: "center",
-            justify: "center",
-            style: {
-              flex: 1
-            },
-            minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spinner, {})
-          }
-        )
-      }
-    ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      Button,
-      {
-        block: true,
-        onClick: onPay,
-        disabled: isPayLoading || amountToPay <= 0,
-        testid: testid ? `${testid}-submit-payment-button` : void 0,
-        children: isPayLoading ? "Processing..." : "Submit Payment"
-      }
-    ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      Button,
-      {
-        testid: testid ? `${testid}-submit-payment-button` : void 0,
-        block: true,
-        onClick: onPay,
-        disabled: isPayLoading,
-        children: isPayLoading ? "Processing..." : "Submit Payment"
-      }
-    )
-  ] });
-}
-function ACHSelector(props) {
-  const {
-    selectedMethod,
-    handleToggle,
-    selectedBankGuid,
-    setSelectedBankGuid,
-    customerBanks,
-    disabled,
-    testid
-  } = props;
-  function handleBankSelect(e, bankGuid) {
-    if (disabled) return;
-    e.stopPropagation();
-    setSelectedBankGuid(bankGuid);
-    handleToggle("ACHPayment");
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    Card,
-    {
-      testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
-      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        Radio,
-        {
-          label: `Pay by ${bank.AccountDisplayString}`,
-          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-          disabled,
-          onChange: (e) => e.stopPropagation()
-        }
-      )
-    },
-    bank.CustBankGUID
-  )) });
-}
-function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(true);
-  const handleCreditSelect = (credit) => {
-    if (setSelectedCredits) {
-      setSelectedCredits(
-        (prev) => prev.includes(credit) ? prev.filter((c) => c !== credit) : [...prev, credit]
-      );
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    Accordion,
-    {
-      isOpen,
-      title: "Available Credits",
-      onClick: () => setIsOpen((prev) => !prev),
-      testid,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-              Stack,
-              {
-                horizontal: true,
-                justify: "between",
-                items: "center",
-                sizing: "layout-group",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Stack,
-                    {
-                      sizing: "layout-group",
-                      onClick: () => handleCreditSelect(credits),
-                      paddingY: true,
-                      flexGrow: 1,
-                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                        Checkbox,
-                        {
-                          testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
-                          label: credits.InvoiceNumber,
-                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                          onChange: () => handleCreditSelect(credits)
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                    Subheader,
-                    {
-                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0,
-                      className: " pr-desktop-component-padding",
-                      children: [
-                        "$",
-                        formatCurrencyDisplay(
-                          formatDecimalValue(Math.abs(credits.InvoiceBalanceDue), 2)
-                        )
-                      ]
-                    }
-                  )
-                ]
-              },
-              credits.AROpenGUID
-            ))
-          }
-        ) })
-      ]
-    }
-  );
-}
-
-// src/components/PaymentOnAccountModal.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-function PaymentOnAccountModal(props) {
-  const {
-    isOpen,
-    paymentProps,
-    onClose,
-    onAmountChange,
-    cardPaymentUrl,
-    setCardPaymentUrl,
-    isLoadingCCiframe,
-    testid
-  } = props;
-  const [amount, setAmount] = (0, import_react21.useState)(paymentProps.amountToPay);
-  const { creditCardSettings, selectedMethod } = paymentProps;
-  (0, import_react21.useEffect)(() => {
-    setAmount(paymentProps.amountToPay);
-  }, [paymentProps.amountToPay]);
-  function handleAmountChange(event) {
-    const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
-    const value = +inputValue || 0;
-    setAmount(value);
-    onAmountChange == null ? void 0 : onAmountChange(value);
-  }
-  const creditCardSurcharge = (0, import_react21.useMemo)(() => {
-    const applySurcharge = (creditCardSettings == null ? void 0 : creditCardSettings.ApplySurcharge) || false;
-    if (!applySurcharge || selectedMethod !== "CCPayment") {
-      return 0;
-    }
-    const surchargeType = creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisType;
-    const surchargeRate = (creditCardSettings == null ? void 0 : creditCardSettings.SurchargeBasisAmount) || 0;
-    if (surchargeType === "Percent") {
-      return calculateSurcharge(amount, surchargeRate);
-    }
-    if (surchargeType === "Fixed") {
-      return surchargeRate;
-    }
-    return 0;
-  }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-    selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Paragraph, { children: "Surcharge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
-        "$",
-        formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        Input,
-        {
-          testid: testid ? `${testid}-amount-to-pay` : void 0,
-          type: "number",
-          placeholder: "$0.00",
-          align: "right",
-          value: amount === 0 ? "" : amount,
-          onChange: handleAmountChange,
-          before: "$"
-        }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      SelectPaymentMethod,
-      __spreadProps(__spreadValues({}, paymentProps), {
-        testid: testid ? `${testid}-select-payment-method` : void 0,
-        amountToPay: amount + creditCardSurcharge,
-        cardPaymentUrl,
-        setCardPaymentUrl,
-        isLoadingCCiframe
-      })
-    )
-  ] }) });
-}
-function calculateSurcharge(amountInDollars, surchargeRate) {
-  const amountInCents = amountInDollars * 100;
-  const surchargeInCents = amountInCents * surchargeRate / 100;
-  const roundedSurchargeInCents = Math.round(surchargeInCents);
-  return roundedSurchargeInCents / 100;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4991,7 +3993,6 @@ function calculateSurcharge(amountInDollars, surchargeRate) {
   Menu,
   MenuOption,
   Paragraph,
-  PaymentOnAccountModal,
   Search,
   Select,
   Subheader,