@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/components/MobileDataGrid.js

@@ -0,0 +1,125 @@
+import {
+  Theme
+} from "../chunk-I2UVVKQI.js";
+import {
+  Stack
+} from "../chunk-U42SKNR6.js";
+import {
+  Heading3
+} from "../chunk-TYI74BSP.js";
+import {
+  Button
+} from "../chunk-KENSVWOY.js";
+import {
+  Paragraph
+} from "../chunk-K3IKUSZW.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/MobileDataGrid.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MobileDataGrid({
+  columns,
+  data,
+  header,
+  getId,
+  renderLink,
+  renderChevron
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "rounded",
+        "overflow-hidden",
+        "divide-y divide-border-primary-normal",
+        "border border-border-primary-normal",
+        "overflow-y-scroll scrollbar-thin"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MobileDataGridHeader, { header }),
+        data.map((item) => /* @__PURE__ */ jsx(
+          MobileDataGridCard,
+          {
+            data: item,
+            columns,
+            renderLink,
+            renderChevron
+          },
+          getId(item)
+        ))
+      ]
+    }
+  );
+}
+function MobileDataGridHeader({ header }) {
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      horizontal: true,
+      items: "start",
+      justify: "center",
+      backgroundColor: "background-primary-normal",
+      padding: true,
+      sizing: "component",
+      children: /* @__PURE__ */ jsx(Heading3, { as: "span", color: "text-primary-normal", children: header })
+    }
+  ) }) });
+}
+function MobileDataGridCard({
+  data,
+  columns,
+  renderLink,
+  renderChevron
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Stack, { sizing: "component", padding: true, children: [
+      /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+        renderLink && renderLink(data),
+        /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "end", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: () => console.log("Edit", data.id),
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "docs" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: () => console.log("Edit", data.id),
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "swap_vert" })
+            }
+          )
+        ] })
+      ] }),
+      columns.filter((x) => x.show).map((column) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mb-2 grid grid-cols-2",
+          children: [
+            /* @__PURE__ */ jsxs(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+              column.header,
+              ":"
+            ] }),
+            " ",
+            column.cell ? column.cell({ row: data }) : String(data[column.accessorKey])
+          ]
+        },
+        String(column.accessorKey)
+      ))
+    ] }),
+    renderChevron && /* @__PURE__ */ jsx(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: renderChevron(data) })
+  ] });
+}
+export {
+  MobileDataGrid
+};

package/dist/components/Modal.cjs

@@ -63,8 +63,8 @@ __export(Modal_exports, {
   Modal: () => Modal
 });
 module.exports = __toCommonJS(Modal_exports);
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_react2 = require("react");
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_react3 = require("react");
 
 // src/components/Heading.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
@@ -400,10 +400,18 @@ function Icon(_a) {
 
 // src/components/ModalHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ModalHeader = ({ title, onClose }) => {
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { as: "p", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+      headerIcon,
+      title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { as: "p", children: title })
+    ] }),
+    !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Button,
       {
         iconOnly: true,
@@ -417,16 +425,33 @@ var ModalHeader = ({ title, onClose }) => {
 ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ModalContent({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-4", children });
+function ModalContent({
+  fixedHeightScrolling,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: (0, import_clsx5.default)(
+        "flex-grow desktop:flex-grow-0 p-4",
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
 }
 ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var ModalButtons = ({ onClose, onContinue }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: [
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Button,
       {
@@ -447,33 +472,32 @@ var ModalButtons = ({ onClose, onContinue }) => {
         children: "Continue"
       }
     )
-  ] });
+  ] }) });
 };
 ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
+  size = "small",
   children,
   onClick,
   ref
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: (0, import_clsx5.default)(
-        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed opacity-0",
+      className: (0, import_clsx6.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: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { children: show }),
-        children
-      ]
+      children
     }
   );
 };
@@ -508,11 +532,35 @@ function findDocumentRoot(element) {
 // src/components/Modal.tsx
 var import_react_use = require("react-use");
 
-// src/components/useMounted.tsx
+// src/components/useMatchesMedia.tsx
 var import_react = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+  return isMobile;
+};
+
+// src/components/useMounted.tsx
+var import_react2 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -566,16 +614,16 @@ var whenAllAnimationsFinish = (animations, callback) => {
 };
 var sizes = {
   small: {
-    sizeClass: "max-w-120"
+    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
   },
   medium: {
-    sizeClass: "max-w-180"
+    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
   },
   large: {
-    sizeClass: "max-w-240"
+    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
   },
   "x-large": {
-    sizeClass: "max-w-300"
+    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
   }
 };
 var Modal = ({
@@ -587,15 +635,20 @@ var Modal = ({
   onClose,
   onContinue,
   closeOnBackdropClick = true,
-  showButtons = false
+  showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  fixedHeightScrolling = false,
+  customActions
 }) => {
   var _a;
   const mounted = useMounted();
-  const modalRef = (0, import_react2.useRef)(null);
-  const bgRef = (0, import_react2.useRef)(null);
+  const modalRef = (0, import_react3.useRef)(null);
+  const bgRef = (0, import_react3.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
-  (0, import_react2.useEffect)(() => {
-    console.log("was open", wasOpen, open);
+  const isMobile = useMatchesMobile();
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
+  (0, import_react3.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -603,7 +656,6 @@ var Modal = ({
     }
     if (wasOpen === void 0) return;
     if (wasOpen && !open) {
-      console.log('"Closing modal"');
       const modalAnimation = fadeOutScale(modalRef.current);
       const bgAnimation = bgFadeOut(bgRef.current);
       whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
@@ -612,12 +664,11 @@ var Modal = ({
         }
       });
     } else if (!wasOpen && open) {
-      console.log('"Opening modal"');
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
   }, [mounted, open]);
-  const handleKeyDown = (0, import_react2.useCallback)(
+  const handleKeyDown = (0, import_react3.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -628,12 +679,12 @@ var Modal = ({
     },
     [onClose, bgRef, modalRef]
   );
-  const handleClose = (0, import_react2.useCallback)(() => {
+  const handleClose = (0, import_react3.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -641,12 +692,31 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
+  (0, import_react3.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_react2.useCallback)(
+  const backgroundClickHandler = (0, import_react3.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
-      console.log(currentTarget, target, currentTarget.contains(target));
       if (currentTarget.contains(target) && currentTarget !== target) {
         e.stopPropagation();
         return;
@@ -661,23 +731,48 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalScrim, { ref: bgRef, show: open, onClick: backgroundClickHandler, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "div",
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ModalScrim,
       {
-        ref: modalRef,
-        className: (0, import_clsx6.default)(
-          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden max-h-[calc(100vh-32px)] w-full opacity-0",
-          className,
-          sizeClass
-        ),
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalHeader, { title, onClose: handleClose }),
-          children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalContent, { children }),
-          showButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalButtons, { onClose: handleClose, onContinue })
-        ]
+        size,
+        ref: bgRef,
+        show: open,
+        onClick: backgroundClickHandler,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            ref: modalRef,
+            className: (0, import_clsx7.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_runtime8.jsx)(
+                ModalHeader,
+                {
+                  title,
+                  onClose: handleClose,
+                  hideCloseIcon,
+                  headerIcon
+                }
+              ),
+              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalContent, { fixedHeightScrolling: computedFixedHeightScrolling, children }),
+              showButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                ModalButtons,
+                {
+                  onClose: handleClose,
+                  onContinue,
+                  customActions
+                }
+              )
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     findDocumentRoot(bgRef.current)
   );
 };

package/dist/components/Modal.js

@@ -2,19 +2,22 @@
 import {
   useMounted
 } from "../chunk-4RJKB7LC.js";
+import {
+  ModalButtons
+} from "../chunk-6ZY524ID.js";
 import {
   ModalContent
-} from "../chunk-I7LXSGQA.js";
+} from "../chunk-Q3FKEKIN.js";
 import {
   ModalHeader
-} from "../chunk-SPQH4CSJ.js";
+} from "../chunk-XUIPGYP5.js";
 import {
   ModalScrim
-} from "../chunk-C7S6DKZ6.js";
-import {
-  ModalButtons
-} from "../chunk-25Y2OMTD.js";
+} from "../chunk-TU55CHXU.js";
 import "../chunk-TYI74BSP.js";
+import {
+  useMatchesMobile
+} from "../chunk-SEKKGFM6.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
@@ -74,16 +77,16 @@ var whenAllAnimationsFinish = (animations, callback) => {
 };
 var sizes = {
   small: {
-    sizeClass: "max-w-120"
+    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
   },
   medium: {
-    sizeClass: "max-w-180"
+    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
   },
   large: {
-    sizeClass: "max-w-240"
+    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
   },
   "x-large": {
-    sizeClass: "max-w-300"
+    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
   }
 };
 var Modal = ({
@@ -95,15 +98,20 @@ var Modal = ({
   onClose,
   onContinue,
   closeOnBackdropClick = true,
-  showButtons = false
+  showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  fixedHeightScrolling = false,
+  customActions
 }) => {
   var _a;
   const mounted = useMounted();
   const modalRef = useRef(null);
   const bgRef = useRef(null);
   const wasOpen = usePrevious(open);
+  const isMobile = useMatchesMobile();
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
   useEffect(() => {
-    console.log("was open", wasOpen, open);
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -111,7 +119,6 @@ var Modal = ({
     }
     if (wasOpen === void 0) return;
     if (wasOpen && !open) {
-      console.log('"Closing modal"');
       const modalAnimation = fadeOutScale(modalRef.current);
       const bgAnimation = bgFadeOut(bgRef.current);
       whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
@@ -120,7 +127,6 @@ var Modal = ({
         }
       });
     } else if (!wasOpen && open) {
-      console.log('"Opening modal"');
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
@@ -149,12 +155,31 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
+  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 = useCallback(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
-      console.log(currentTarget, target, currentTarget.contains(target));
       if (currentTarget.contains(target) && currentTarget !== target) {
         e.stopPropagation();
         return;
@@ -169,23 +194,48 @@ var Modal = ({
     return null;
   }
   return createPortal(
-    /* @__PURE__ */ jsx(ModalScrim, { ref: bgRef, show: open, onClick: backgroundClickHandler, children: /* @__PURE__ */ jsxs(
-      "div",
+    /* @__PURE__ */ jsx(
+      ModalScrim,
       {
-        ref: modalRef,
-        className: clsx(
-          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden max-h-[calc(100vh-32px)] w-full opacity-0",
-          className,
-          sizeClass
-        ),
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(ModalHeader, { title, onClose: handleClose }),
-          children && /* @__PURE__ */ jsx(ModalContent, { children }),
-          showButtons && /* @__PURE__ */ jsx(ModalButtons, { onClose: handleClose, onContinue })
-        ]
+        size,
+        ref: bgRef,
+        show: open,
+        onClick: backgroundClickHandler,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: modalRef,
+            className: clsx(
+              "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__ */ jsx(
+                ModalHeader,
+                {
+                  title,
+                  onClose: handleClose,
+                  hideCloseIcon,
+                  headerIcon
+                }
+              ),
+              children && /* @__PURE__ */ jsx(ModalContent, { fixedHeightScrolling: computedFixedHeightScrolling, children }),
+              showButtons && /* @__PURE__ */ jsx(
+                ModalButtons,
+                {
+                  onClose: handleClose,
+                  onContinue,
+                  customActions
+                }
+              )
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     findDocumentRoot(bgRef.current)
   );
 };

package/dist/components/ModalButtons.cjs

@@ -350,8 +350,12 @@ function Icon(_a) {
 
 // src/components/ModalButtons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ModalButtons = ({ onClose, onContinue }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: [
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Button,
       {
@@ -372,7 +376,7 @@ var ModalButtons = ({ onClose, onContinue }) => {
         children: "Continue"
       }
     )
-  ] });
+  ] }) });
 };
 ModalButtons.displayName = "ModalButtons";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/ModalButtons.js

@@ -1,6 +1,6 @@
 import {
   ModalButtons
-} from "../chunk-25Y2OMTD.js";
+} from "../chunk-6ZY524ID.js";
 import "../chunk-KENSVWOY.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-KX3O6GJ6.js";