@dmsi/wedgekit-react 0.0.503 → 0.0.504

package/dist/components/MobileDataGrid/index.cjs

@@ -715,7 +715,7 @@ function Theme({
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react39 = require("react");
+var import_react34 = require("react");
 
 // src/components/DataGridCell.tsx
 var import_sortable = require("@dnd-kit/sortable");
@@ -5360,972 +5360,919 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
 var import_clsx29 = __toESM(require("clsx"), 1);
 var import_jsx_runtime40 = require("react/jsx-runtime");
 
-// src/components/PDFViewer/index.tsx
-var import_react32 = require("react");
-
-// src/components/Modal.tsx
-var import_clsx34 = __toESM(require("clsx"), 1);
-var import_react29 = require("react");
-
-// src/components/ModalHeader.tsx
+// src/components/ListGroup.tsx
+var import_react28 = require("react");
 var import_clsx30 = __toESM(require("clsx"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var ModalHeader = ({
-  title,
-  hideCloseIcon,
-  headerIcon,
-  headerIconAlign,
-  onClose,
+
+// src/components/Pagination.tsx
+var import_react29 = require("react");
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
   id,
   testid,
-  headerClassname,
-  titleAs: TitleComponent
+  className,
+  disabled
 }) => {
-  const Title = TitleComponent || Heading2;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    "div",
+  const goTo = (0, import_react29.useCallback)(
+    (page) => {
+      if (disabled) return;
+      onPageChange(page);
+    },
+    [onPageChange, disabled]
+  );
+  const handleKey = (e) => {
+    if (disabled) return;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goTo(currentPage - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goTo(currentPage + 1);
+    }
+  };
+  const pageTokens = (0, import_react29.useMemo)(() => {
+    if (totalPages <= 5) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = /* @__PURE__ */ new Set();
+    pages.add(1);
+    pages.add(totalPages);
+    if (currentPage <= 3) {
+      pages.add(2);
+      pages.add(3);
+      pages.add(4);
+    } else if (currentPage >= totalPages - 2) {
+      pages.add(totalPages - 1);
+      pages.add(totalPages - 2);
+      pages.add(totalPages - 3);
+    } else {
+      pages.add(currentPage - 1);
+      pages.add(currentPage);
+      pages.add(currentPage + 1);
+    }
+    const sorted = Array.from(pages).sort((a, b) => a - b);
+    const tokens = [];
+    for (let i = 0; i < sorted.length; i++) {
+      const value = sorted[i];
+      const prev = sorted[i - 1];
+      if (i > 0) {
+        if (value - prev === 2) {
+          tokens.push(prev + 1);
+        } else if (value - prev > 2) {
+          tokens.push("ellipsis");
+        }
+      }
+      tokens.push(value);
+    }
+    return tokens;
+  }, [totalPages, currentPage]);
+  if (totalPages <= 1) return null;
+  const buttonClass = (0, import_clsx31.default)(
+    "cursor-pointer disabled:cursor-default",
+    paddingUsingComponentGap,
+    "w-8 h-8",
+    "flex items-center justify-center",
+    "bg-transparent",
+    "box-content",
+    "hover:bg-background-grouped-secondary-normal",
+    "focus:bg-background-grouped-secondary-normal focus:outline-0",
+    "disabled:bg-transparent disabled:text-text-action-primary-disabled"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "nav",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx30.default)(
-        "flex justify-between items-center",
-        headerIconAlign === "center" && "justify-center",
-        headerIconAlign === "right" && "justify-end",
-        headerIconAlign === "left" && "justify-start",
-        layoutPaddding,
-        layoutGroupGap,
-        headerClassname
+      "aria-label": "Pagination",
+      onKeyDown: handleKey,
+      className: (0, import_clsx31.default)(
+        "flex items-center",
+        "border border-border-primary-normal",
+        "bg-background-grouped-primary-normal",
+        "rounded-sm",
+        className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx30.default)("flex items-center flex-1", layoutGroupGap), children: [
-          headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            Title,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "button",
+          {
+            disabled: disabled || currentPage <= 1,
+            "aria-label": "Previous page",
+            onClick: () => goTo(currentPage - 1),
+            className: (0, import_clsx31.default)(buttonClass, "border-r-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "keyboard_arrow_left" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: (0, import_clsx31.default)("flex items-center"), children: pageTokens.map((token, index) => {
+          if (token === "ellipsis") {
+            return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "li",
+              {
+                className: "w-8 h-8 select-none text-text-action-primary-disabled",
+                children: "\u2026"
+              },
+              `ellipsis-${index}`
+            );
+          }
+          const selected = token === currentPage;
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "button",
             {
-              id: id ? `${id}-title` : void 0,
-              testid: testid ? `${testid}-title` : void 0,
-              as: "p",
-              children: title
+              "aria-label": `Page ${token}`,
+              "aria-current": selected ? "page" : void 0,
+              disabled,
+              onClick: () => goTo(token),
+              className: (0, import_clsx31.default)(
+                buttonClass,
+                selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Subheader, { align: "center", weight: "bold", children: token })
             }
-          )
-        ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          Button,
+          ) }, token);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime41.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "close", size: 24 }) })
+            disabled: disabled || currentPage >= totalPages,
+            "aria-label": "Next page",
+            onClick: () => goTo(currentPage + 1),
+            className: (0, import_clsx31.default)(buttonClass, "border-l-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "keyboard_arrow_right" })
           }
         )
       ]
     }
   );
 };
-ModalHeader.displayName = "ModalHeader";
+Pagination.displayName = "Pagination";
 
-// src/components/ModalContent.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function ModalContent({
-  fixedHeightScrolling,
-  children,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx31.default)(
-        "flex-grow desktop:flex-grow-0",
-        layoutPaddding,
-        fixedHeightScrolling && "overflow-auto"
-      ),
-      children
-    }
-  );
-}
-ModalContent.displayName = "ModalContent";
+// src/components/SkeletonParagraph.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
 
-// src/components/ModalButtons.tsx
+// src/components/EmptyCartIcon.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// src/components/SearchResultImage/index.tsx
+var import_react30 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// src/components/Alert.tsx
 var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var ModalButtons = ({
-  onClose,
-  onContinue,
-  customActions,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var import_react31 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// src/components/OrderCheckIcon.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+var import_react33 = require("react");
+
+// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
+var import_react32 = require("react");
+var GridContext = (0, import_react32.createContext)(null);
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+function useGridContext() {
+  const ctx = (0, import_react33.useContext)(GridContext);
+  if (!ctx) {
+    throw new Error("useGridContext must be used within GridContextProvider");
+  }
+  return ctx;
+}
+
+// src/components/MobileDataGrid/ColumnSelector/index.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function ColumnSelector() {
+  const context = useGridContext();
+  const ref = (0, import_react34.useRef)(null);
+  const [show, setShow] = (0, import_react34.useState)(false);
+  const {
+    columns,
+    id,
+    testid,
+    visibleColumns,
+    numberOfColumnsToShow,
+    primaryKey,
+    resetColumnVisibility,
+    dispatch
+  } = context;
+  const toggleColumnVisibility = (0, import_react34.useCallback)(
+    (index, visible) => {
+      dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
+    },
+    [dispatch]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
-      id,
+      id: id ? `${id}-column-selector` : void 0,
       "data-testid": testid,
-      className: (0, import_clsx32.default)(
-        "border-t border-neutral-300 flex justify-end",
-        layoutPaddding,
-        layoutGroupGap
-      ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          Button,
-          {
-            id: id ? `${id}-close-button` : void 0,
-            testid: testid ? `${testid}-close-button` : void 0,
-            variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "close", size: 24 }),
-            onClick: onClose,
-            className: "max-sm:w-full",
-            children: "Close"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           Button,
           {
-            id: id ? `${id}-continue-button` : void 0,
-            testid: testid ? `${testid}-continue-button` : void 0,
-            variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "check", size: 24 }),
-            className: "max-sm:w-full",
-            onClick: onContinue,
-            children: "Continue"
+            id: id ? `${id}-button` : void 0,
+            testid: testid ? `${testid}-button` : void 0,
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
+            iconOnly: true,
+            size: 24,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          Menu,
+          {
+            id: id ? `${id}-menu` : void 0,
+            testid: testid ? `${testid}-menu` : void 0,
+            positionTo: ref,
+            position: "bottom-right",
+            show,
+            setShow,
+            calculateMinMaxHeight: true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                Button,
+                {
+                  id: id ? `${id}-reset-button` : void 0,
+                  testid: testid ? `${testid}-reset-button` : void 0,
+                  variant: "tertiary",
+                  onClick: () => {
+                    resetColumnVisibility();
+                    setShow(false);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              columns.filter((x) => {
+                var _a;
+                return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
+              }).map((column) => {
+                var _a, _b, _c;
+                return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  MenuOption,
+                  {
+                    testid: testid ? `${testid}-option-${column.id}` : void 0,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                      Checkbox,
+                      {
+                        id: id ? `${id}-checkbox-${column.id}` : void 0,
+                        testid: testid ? `${testid}-checkbox-${column.id}` : void 0,
+                        label: (_a = column.header) == null ? void 0 : _a.toString(),
+                        checked: !!((_b = column.meta) == null ? void 0 : _b.visible) || column.id === String(primaryKey),
+                        disabled: typeof numberOfColumnsToShow !== "undefined" && // account for header+link occupying one slot
+                        visibleColumns.length >= numberOfColumnsToShow - 1 && ((_c = column.meta) == null ? void 0 : _c.visible) !== true || column.id === String(primaryKey),
+                        onChange: (e) => {
+                          toggleColumnVisibility(
+                            columns.findIndex(({ id: id2 }) => id2 === column.id),
+                            e.target.checked
+                          );
+                        }
+                      }
+                    )
+                  },
+                  id ? `${id}-option-${column.id}` : void 0
+                );
+              })
+            ]
           }
         )
-      ] })
-    }
-  );
-};
-ModalButtons.displayName = "ModalButtons";
-
-// src/components/ModalScrim.tsx
-var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var ModalScrim = ({
-  show = false,
-  size = "small",
-  children,
-  onClick,
-  ref,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx33.default)(
-        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
-        !show && " pointer-events-none",
-        size === "small" && "p-4",
-        size === "screen" ? "desktop:p-0" : "desktop:p-4",
-        "inset-0 z-50"
-      ),
-      onMouseDown: onClick,
-      ref,
-      children
+      ]
     }
   );
-};
-ModalScrim.displayName = "ModalScrim";
-
-// src/components/Modal.tsx
-var import_react_dom4 = require("react-dom");
-var import_react_use = require("react-use");
-
-// src/components/useMounted.tsx
-var import_react28 = require("react");
-var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react28.useState)(false);
-  (0, import_react28.useEffect)(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
-  }, []);
-  return isMounted;
-};
+}
 
-// src/components/Modal.tsx
-var import_jsx_runtime45 = 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"
-  },
-  screen: {
-    sizeClass: "w-screen h-screen max-w-screen !rounded-none"
-  }
-};
-var Modal = ({
-  id,
-  testid,
-  title,
-  open = false,
-  size = "small",
-  className,
-  children,
-  onClose,
-  onContinue,
-  closeOnBackdropClick = true,
-  showButtons = false,
-  hideCloseIcon = false,
-  headerIcon,
-  headerIconAlign,
-  fixedHeightScrolling = false,
-  customActions,
-  headerClassname,
-  customFooter,
-  noWrapper,
-  titleAs: TitleComponent
-}) => {
-  var _a;
-  const mounted = useMounted();
-  const modalRef = (0, import_react29.useRef)(null);
-  const bgRef = (0, import_react29.useRef)(null);
-  const wasOpen = (0, import_react_use.usePrevious)(open);
-  const isMobile = useMatchesMobile();
-  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react29.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, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react29.useCallback)(
-    (e) => {
-      if (e.key === "Escape") {
-        if (onClose) {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    },
-    [onClose]
-  );
-  const handleClose = (0, import_react29.useCallback)(() => {
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
-  (0, import_react29.useEffect)(() => {
-    if (open) {
-      document.addEventListener("keyup", handleKeyDown);
-    }
-    return () => {
-      document.removeEventListener("keyup", handleKeyDown);
-    };
-  }, [open, handleKeyDown]);
-  (0, import_react29.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_react29.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_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      ModalScrim,
+// src/components/MobileDataGrid/MobileDataGridHeader.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function MobileDataGridHeader({
+  header: Header,
+  enableColumnSelector,
+  enableRowSelection
+}) {
+  var _a, _b;
+  const ctx = useGridContext();
+  const {
+    id,
+    testid,
+    selectedRowIds,
+    data,
+    primaryKey,
+    columns,
+    handleRowSelectAll
+  } = ctx;
+  if (typeof Header === "undefined" && !primaryKey) return null;
+  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "string" || primaryKey)
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "div",
       {
-        id: id ? `${id}-scrim` : void 0,
-        testid: testid ? `${testid}-scrim` : void 0,
-        size,
-        ref: bgRef,
-        show: open,
-        onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          "div",
+        id: id ? `${id}-header` : void 0,
+        "data-testid": testid ? `${testid}-header` : void 0,
+        className: "sticky top-0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          Stack,
           {
-            id,
-            "data-testid": testid,
-            ref: modalRef,
-            className: (0, import_clsx34.default)(
-              "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
-              computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
-              className,
-              !(className == null ? void 0 : className.includes("bg-")) && "bg-white",
-              sizeClass
-            ),
-            onClick: (e) => e.stopPropagation(),
+            horizontal: true,
+            horizontalMobile: true,
+            items: "center",
+            justify: "between",
+            backgroundColor: "background-primary-normal",
+            style: { borderTopRightRadius: 4, borderTopLeftRadius: 4 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                ModalHeader,
-                {
-                  id: id ? `${id}-header` : void 0,
-                  testid: testid ? `${testid}-header` : void 0,
-                  title,
-                  onClose: handleClose,
-                  hideCloseIcon,
-                  headerIcon,
-                  headerIconAlign,
-                  headerClassname,
-                  titleAs: TitleComponent
-                }
-              ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                ModalContent,
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                Checkbox,
                 {
-                  id: id ? `${id}-content` : void 0,
-                  testid: testid ? `${testid}-content` : void 0,
-                  fixedHeightScrolling: computedFixedHeightScrolling,
-                  children
+                  id: id ? `${id}-select-all-checkbox` : void 0,
+                  testid: testid ? `${testid}-select-all-checkbox` : void 0,
+                  checked: selectedRowIds.length === data.length,
+                  indeterminate: !!selectedRowIds.length && selectedRowIds.length !== data.length,
+                  onChange: handleRowSelectAll
                 }
-              ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                ModalButtons,
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                Stack,
                 {
-                  id: id ? `${id}-buttons` : void 0,
-                  testid: testid ? `${testid}-buttons` : void 0,
-                  onClose: handleClose,
-                  onContinue,
-                  customActions
+                  horizontal: true,
+                  horizontalMobile: true,
+                  items: "center",
+                  sizing: "component",
+                  padding: true,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
                 }
-              ) : null
+              ),
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColumnSelector, {})
             ]
           }
-        )
+        ) })
       }
-    ),
-    findDocumentRoot(bgRef.current)
-  );
-};
-Modal.displayName = "Modal";
-
-// src/components/PDFViewer/PDFElement.tsx
-var import_react31 = require("react");
-
-// src/components/Spinner.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
+    );
+}
 
-// src/components/PDFViewer/PDFPage.tsx
-var import_react30 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+var import_react35 = require("react");
 
-// src/components/PDFViewer/PDFElement.tsx
-var import_clsx35 = __toESM(require("clsx"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
+// src/components/MobileDataGrid/dataGridReducer.ts
+function dataGridReducer(state, action) {
+  var _a, _b, _c;
+  const { type, payload } = action;
+  let itemIndex = null;
+  if (action.type === "INSERT" && action.pos === "INDEX")
+    itemIndex = action.index;
+  if (action.type === "UPDATE")
+    itemIndex = (_a = action.index) != null ? _a : state.filter(({ id }) => !!id).findIndex(({ id }) => id === action.id);
+  switch (type) {
+    case "SET":
+      return [...payload];
+    case "UPDATE":
+      if (typeof itemIndex !== "number" || itemIndex < 0)
+        throw new Error("action.(id | index) must be provided.");
+      return [
+        ...state.slice(0, itemIndex),
+        __spreadProps(__spreadValues(__spreadValues({}, state[itemIndex]), payload), {
+          meta: __spreadValues(__spreadValues({}, (_b = state[itemIndex].meta) != null ? _b : {}), (_c = payload.meta) != null ? _c : {})
+        }),
+        ...state.slice(itemIndex + 1)
+      ];
+    default:
+      throw new Error("Action type not implemented.");
+  }
+}
 
-// src/components/PDFViewer/DownloadIcon.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function GridContextProvider(props) {
+  const {
+    initialColumns,
+    id,
+    testid,
+    children,
+    data,
+    numberOfColumnsToShow,
+    primaryKey,
+    getId,
+    onRowSelect
+  } = props;
+  const [columns, dispatch] = (0, import_react35.useReducer)(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react35.useState)([]);
+  const [currentRow, setCurrentRow] = (0, import_react35.useState)(null);
+  const resetColumnVisibility = (0, import_react35.useCallback)(() => {
+    const newColumns = columns.map((column) => {
+      var _a;
+      const initialColumn = initialColumns.find((c) => c.id === column.id);
+      return __spreadProps(__spreadValues({}, column), {
+        meta: __spreadProps(__spreadValues({}, column.meta), {
+          visible: (_a = initialColumn == null ? void 0 : initialColumn.meta) == null ? void 0 : _a.visible
+        })
+      });
+    });
+    dispatch({ type: "SET", payload: newColumns });
+  }, [columns, initialColumns]);
+  const handleRowSelect = (0, import_react35.useCallback)(
+    (item) => {
+      var _a;
+      const rowId = (_a = getId(item)) != null ? _a : "";
+      if (!rowId) return;
+      const nextSelected = selectedRowIds.includes(rowId) ? selectedRowIds.filter((id2) => id2 !== rowId) : [...selectedRowIds, rowId];
+      setSelectedRowIds(nextSelected);
+      if (onRowSelect) onRowSelect(item, nextSelected);
+    },
+    [getId, onRowSelect, selectedRowIds]
+  );
+  const handleRowSelectAll = (0, import_react35.useCallback)(() => {
+    setSelectedRowIds((prev) => {
+      if (prev.length === data.length) {
+        return [];
+      }
+      return data.map(getId).filter((id2) => id2 !== void 0);
+    });
+  }, [data, getId]);
+  const openRowDetail = (0, import_react35.useCallback)((row) => {
+    setCurrentRow(row);
+  }, []);
+  const closeRowDetail = (0, import_react35.useCallback)(() => {
+    setCurrentRow(null);
+  }, []);
+  const visibleColumns = (0, import_react35.useMemo)(() => {
+    const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
+    if (primaryKey) {
+      const pkColumn = columns.find((col) => col.id === String(primaryKey));
+      const otherColumns = columns.filter(
+        (col) => col.id !== String(primaryKey)
+      );
+      const orderedColumns = pkColumn ? [pkColumn, ...otherColumns] : [...otherColumns];
+      return orderedColumns.filter((x) => {
+        var _a;
+        return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
+      }).slice(0, effectiveLimit);
+    }
+    return columns.filter((x) => {
+      var _a;
+      return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
+    }).slice(0, effectiveLimit);
+  }, [columns, numberOfColumnsToShow, primaryKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    GridContext.Provider,
+    {
+      value: {
+        columns,
+        testid,
+        id,
+        data,
+        selectedRowIds,
+        visibleColumns,
+        numberOfColumnsToShow,
+        primaryKey,
+        dispatch,
+        getId,
+        resetColumnVisibility,
+        handleRowSelect,
+        handleRowSelectAll,
+        isRowDetailOpen: !!currentRow,
+        currentRow,
+        openRowDetail,
+        closeRowDetail
+      },
+      children
+    }
+  );
+}
 
-// src/components/PDFViewer/PDFNavigation.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+// src/components/Modal.tsx
+var import_clsx37 = __toESM(require("clsx"), 1);
+var import_react37 = require("react");
 
-// src/components/PDFViewer/index.tsx
+// src/components/ModalHeader.tsx
+var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
-
-// src/components/ListGroup.tsx
-var import_react33 = require("react");
-var import_clsx36 = __toESM(require("clsx"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
-
-// src/components/Pagination.tsx
-var import_react34 = require("react");
-var import_clsx37 = __toESM(require("clsx"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var Pagination = ({
-  totalPages,
-  currentPage,
-  onPageChange,
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  headerIconAlign,
+  onClose,
   id,
   testid,
-  className,
-  disabled
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
-  const goTo = (0, import_react34.useCallback)(
-    (page) => {
-      if (disabled) return;
-      onPageChange(page);
-    },
-    [onPageChange, disabled]
-  );
-  const handleKey = (e) => {
-    if (disabled) return;
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      goTo(currentPage - 1);
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      goTo(currentPage + 1);
-    }
-  };
-  const pageTokens = (0, import_react34.useMemo)(() => {
-    if (totalPages <= 5) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-    const pages = /* @__PURE__ */ new Set();
-    pages.add(1);
-    pages.add(totalPages);
-    if (currentPage <= 3) {
-      pages.add(2);
-      pages.add(3);
-      pages.add(4);
-    } else if (currentPage >= totalPages - 2) {
-      pages.add(totalPages - 1);
-      pages.add(totalPages - 2);
-      pages.add(totalPages - 3);
-    } else {
-      pages.add(currentPage - 1);
-      pages.add(currentPage);
-      pages.add(currentPage + 1);
-    }
-    const sorted = Array.from(pages).sort((a, b) => a - b);
-    const tokens = [];
-    for (let i = 0; i < sorted.length; i++) {
-      const value = sorted[i];
-      const prev = sorted[i - 1];
-      if (i > 0) {
-        if (value - prev === 2) {
-          tokens.push(prev + 1);
-        } else if (value - prev > 2) {
-          tokens.push("ellipsis");
-        }
-      }
-      tokens.push(value);
-    }
-    return tokens;
-  }, [totalPages, currentPage]);
-  if (totalPages <= 1) return null;
-  const buttonClass = (0, import_clsx37.default)(
-    "cursor-pointer disabled:cursor-default",
-    paddingUsingComponentGap,
-    "w-8 h-8",
-    "flex items-center justify-center",
-    "bg-transparent",
-    "box-content",
-    "hover:bg-background-grouped-secondary-normal",
-    "focus:bg-background-grouped-secondary-normal focus:outline-0",
-    "disabled:bg-transparent disabled:text-text-action-primary-disabled"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-    "nav",
+  const Title = TitleComponent || Heading2;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "div",
     {
       id,
       "data-testid": testid,
-      "aria-label": "Pagination",
-      onKeyDown: handleKey,
-      className: (0, import_clsx37.default)(
-        "flex items-center",
-        "border border-border-primary-normal",
-        "bg-background-grouped-primary-normal",
-        "rounded-sm",
-        className
+      className: (0, import_clsx33.default)(
+        "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
+        layoutPaddding,
+        layoutGroupGap,
+        headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          "button",
-          {
-            disabled: disabled || currentPage <= 1,
-            "aria-label": "Previous page",
-            onClick: () => goTo(currentPage - 1),
-            className: (0, import_clsx37.default)(buttonClass, "border-r-1 border-border-primary-normal"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "keyboard_arrow_left" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: (0, import_clsx37.default)("flex items-center"), children: pageTokens.map((token, index) => {
-          if (token === "ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              "li",
-              {
-                className: "w-8 h-8 select-none text-text-action-primary-disabled",
-                children: "\u2026"
-              },
-              `ellipsis-${index}`
-            );
-          }
-          const selected = token === currentPage;
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            "button",
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: (0, import_clsx33.default)("flex items-center flex-1", layoutGroupGap), children: [
+          headerIcon,
+          title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            Title,
             {
-              "aria-label": `Page ${token}`,
-              "aria-current": selected ? "page" : void 0,
-              disabled,
-              onClick: () => goTo(token),
-              className: (0, import_clsx37.default)(
-                buttonClass,
-                selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Subheader, { align: "center", weight: "bold", children: token })
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
             }
-          ) }, token);
-        }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          "button",
+          )
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          Button,
           {
-            disabled: disabled || currentPage >= totalPages,
-            "aria-label": "Next page",
-            onClick: () => goTo(currentPage + 1),
-            className: (0, import_clsx37.default)(buttonClass, "border-l-1 border-border-primary-normal"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "keyboard_arrow_right" })
+            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_runtime51.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
     }
   );
 };
-Pagination.displayName = "Pagination";
-
-// src/components/SkeletonParagraph.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
-
-// src/components/EmptyCartIcon.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
-
-// src/components/SearchResultImage/index.tsx
-var import_react35 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-
-// src/components/Alert.tsx
-var import_clsx38 = __toESM(require("clsx"), 1);
-var import_react36 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-
-// src/components/OrderCheckIcon.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
-
-// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-var import_react38 = require("react");
-
-// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
-var import_react37 = require("react");
-var GridContext = (0, import_react37.createContext)(null);
+ModalHeader.displayName = "ModalHeader";
 
-// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-function useGridContext() {
-  const ctx = (0, import_react38.useContext)(GridContext);
-  if (!ctx) {
-    throw new Error("useGridContext must be used within GridContextProvider");
-  }
-  return ctx;
+// src/components/ModalContent.tsx
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function ModalContent({
+  fixedHeightScrolling,
+  children,
+  id,
+  testid
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx34.default)(
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
 }
+ModalContent.displayName = "ModalContent";
 
-// src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
-function ColumnSelector() {
-  const context = useGridContext();
-  const ref = (0, import_react39.useRef)(null);
-  const [show, setShow] = (0, import_react39.useState)(false);
-  const {
-    columns,
-    id,
-    testid,
-    visibleColumns,
-    numberOfColumnsToShow,
-    primaryKey,
-    resetColumnVisibility,
-    dispatch
-  } = context;
-  const toggleColumnVisibility = (0, import_react39.useCallback)(
-    (index, visible) => {
-      dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
-    },
-    [dispatch]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+// src/components/ModalButtons.tsx
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions,
+  id,
+  testid
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
-      id: id ? `${id}-column-selector` : void 0,
+      id,
       "data-testid": testid,
-      className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
-      ref,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      className: (0, import_clsx35.default)(
+        "border-t border-neutral-300 flex justify-end",
+        layoutPaddding,
+        layoutGroupGap
+      ),
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Button,
           {
-            id: id ? `${id}-button` : void 0,
-            testid: testid ? `${testid}-button` : void 0,
-            onClick: () => setShow((prev) => !prev),
-            variant: "navigation",
-            iconOnly: true,
-            size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "tune" })
+            id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "close", size: 24 }),
+            onClick: onClose,
+            className: "max-sm:w-full",
+            children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-          Menu,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          Button,
           {
-            id: id ? `${id}-menu` : void 0,
-            testid: testid ? `${testid}-menu` : void 0,
-            positionTo: ref,
-            position: "bottom-right",
-            show,
-            setShow,
-            calculateMinMaxHeight: true,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                Button,
-                {
-                  id: id ? `${id}-reset-button` : void 0,
-                  testid: testid ? `${testid}-reset-button` : void 0,
-                  variant: "tertiary",
-                  onClick: () => {
-                    resetColumnVisibility();
-                    setShow(false);
-                  },
-                  children: "Reset to default"
-                }
-              ),
-              columns.filter((x) => {
-                var _a;
-                return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
-              }).map((column) => {
-                var _a, _b, _c;
-                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                  MenuOption,
-                  {
-                    testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                      Checkbox,
-                      {
-                        id: id ? `${id}-checkbox-${column.id}` : void 0,
-                        testid: testid ? `${testid}-checkbox-${column.id}` : void 0,
-                        label: (_a = column.header) == null ? void 0 : _a.toString(),
-                        checked: !!((_b = column.meta) == null ? void 0 : _b.visible) || column.id === String(primaryKey),
-                        disabled: typeof numberOfColumnsToShow !== "undefined" && // account for header+link occupying one slot
-                        visibleColumns.length >= numberOfColumnsToShow - 1 && ((_c = column.meta) == null ? void 0 : _c.visible) !== true || column.id === String(primaryKey),
-                        onChange: (e) => {
-                          toggleColumnVisibility(
-                            columns.findIndex(({ id: id2 }) => id2 === column.id),
-                            e.target.checked
-                          );
-                        }
-                      }
-                    )
-                  },
-                  id ? `${id}-option-${column.id}` : void 0
-                );
-              })
-            ]
+            id: id ? `${id}-continue-button` : void 0,
+            testid: testid ? `${testid}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: onContinue,
+            children: "Continue"
           }
         )
-      ]
+      ] })
+    }
+  );
+};
+ModalButtons.displayName = "ModalButtons";
+
+// src/components/ModalScrim.tsx
+var import_clsx36 = __toESM(require("clsx"), 1);
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var ModalScrim = ({
+  show = false,
+  size = "small",
+  children,
+  onClick,
+  ref,
+  id,
+  testid
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx36.default)(
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
+        !show && " pointer-events-none",
+        size === "small" && "p-4",
+        size === "screen" ? "desktop:p-0" : "desktop:p-4",
+        "inset-0 z-50"
+      ),
+      onMouseDown: onClick,
+      ref,
+      children
+    }
+  );
+};
+ModalScrim.displayName = "ModalScrim";
+
+// src/components/Modal.tsx
+var import_react_dom4 = require("react-dom");
+var import_react_use = require("react-use");
+
+// src/components/useMounted.tsx
+var import_react36 = require("react");
+var useMounted = () => {
+  const [isMounted, setIsMounted] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  return isMounted;
+};
+
+// src/components/Modal.tsx
+var import_jsx_runtime55 = 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"
+  },
+  screen: {
+    sizeClass: "w-screen h-screen max-w-screen !rounded-none"
+  }
+};
+var Modal = ({
+  id,
+  testid,
+  title,
+  open = false,
+  size = "small",
+  className,
+  children,
+  onClose,
+  onContinue,
+  closeOnBackdropClick = true,
+  showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  headerIconAlign,
+  fixedHeightScrolling = false,
+  customActions,
+  headerClassname,
+  customFooter,
+  noWrapper,
+  titleAs: TitleComponent
+}) => {
+  var _a;
+  const mounted = useMounted();
+  const modalRef = (0, import_react37.useRef)(null);
+  const bgRef = (0, import_react37.useRef)(null);
+  const wasOpen = (0, import_react_use.usePrevious)(open);
+  const isMobile = useMatchesMobile();
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
+  (0, import_react37.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, onClose, open, wasOpen]);
+  const handleKeyDown = (0, import_react37.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        if (onClose) {
+          e.preventDefault();
+          onClose();
+        }
+      }
+    },
+    [onClose]
+  );
+  const handleClose = (0, import_react37.useCallback)(() => {
+    if (onClose) {
+      onClose();
     }
+  }, [onClose]);
+  (0, import_react37.useEffect)(() => {
+    if (open) {
+      document.addEventListener("keyup", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, [open, handleKeyDown]);
+  (0, import_react37.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_react37.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]
   );
-}
-
-// src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
-function MobileDataGridHeader({
-  header: Header,
-  enableColumnSelector,
-  enableRowSelection
-}) {
-  var _a, _b;
-  const ctx = useGridContext();
-  const {
-    id,
-    testid,
-    selectedRowIds,
-    data,
-    primaryKey,
-    columns,
-    handleRowSelectAll
-  } = ctx;
-  if (typeof Header === "undefined" && !primaryKey) return null;
-  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Header, __spreadValues({}, ctx));
-  if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      "div",
+  if (!mounted) {
+    return null;
+  }
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      ModalScrim,
       {
-        id: id ? `${id}-header` : void 0,
-        "data-testid": testid ? `${testid}-header` : void 0,
-        className: "sticky top-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-          Stack,
+        id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
+        size,
+        ref: bgRef,
+        show: open,
+        onClick: backgroundClickHandler,
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+          "div",
           {
-            horizontal: true,
-            horizontalMobile: true,
-            items: "center",
-            justify: "between",
-            backgroundColor: "background-primary-normal",
-            style: { borderTopRightRadius: 4, borderTopLeftRadius: 4 },
+            id,
+            "data-testid": testid,
+            ref: modalRef,
+            className: (0, import_clsx37.default)(
+              "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+              computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              className,
+              !(className == null ? void 0 : className.includes("bg-")) && "bg-white",
+              sizeClass
+            ),
+            onClick: (e) => e.stopPropagation(),
             children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                Checkbox,
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                ModalHeader,
                 {
-                  id: id ? `${id}-select-all-checkbox` : void 0,
-                  testid: testid ? `${testid}-select-all-checkbox` : void 0,
-                  checked: selectedRowIds.length === data.length,
-                  indeterminate: !!selectedRowIds.length && selectedRowIds.length !== data.length,
-                  onChange: handleRowSelectAll
+                  id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
+                  title,
+                  onClose: handleClose,
+                  hideCloseIcon,
+                  headerIcon,
+                  headerIconAlign,
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                Stack,
+              ),
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                ModalContent,
                 {
-                  horizontal: true,
-                  horizontalMobile: true,
-                  items: "center",
-                  sizing: "component",
-                  padding: true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
+                  id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
+                  fixedHeightScrolling: computedFixedHeightScrolling,
+                  children
                 }
-              ),
-              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ColumnSelector, {})
+              ) : children,
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                ModalButtons,
+                {
+                  id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
+                  onClose: handleClose,
+                  onContinue,
+                  customActions
+                }
+              ) : null
             ]
           }
-        ) })
-      }
-    );
-}
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react40 = require("react");
-
-// src/components/MobileDataGrid/dataGridReducer.ts
-function dataGridReducer(state, action) {
-  var _a, _b, _c;
-  const { type, payload } = action;
-  let itemIndex = null;
-  if (action.type === "INSERT" && action.pos === "INDEX")
-    itemIndex = action.index;
-  if (action.type === "UPDATE")
-    itemIndex = (_a = action.index) != null ? _a : state.filter(({ id }) => !!id).findIndex(({ id }) => id === action.id);
-  switch (type) {
-    case "SET":
-      return [...payload];
-    case "UPDATE":
-      if (typeof itemIndex !== "number" || itemIndex < 0)
-        throw new Error("action.(id | index) must be provided.");
-      return [
-        ...state.slice(0, itemIndex),
-        __spreadProps(__spreadValues(__spreadValues({}, state[itemIndex]), payload), {
-          meta: __spreadValues(__spreadValues({}, (_b = state[itemIndex].meta) != null ? _b : {}), (_c = payload.meta) != null ? _c : {})
-        }),
-        ...state.slice(itemIndex + 1)
-      ];
-    default:
-      throw new Error("Action type not implemented.");
-  }
-}
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
-function GridContextProvider(props) {
-  const {
-    initialColumns,
-    id,
-    testid,
-    children,
-    data,
-    numberOfColumnsToShow,
-    primaryKey,
-    getId,
-    onRowSelect
-  } = props;
-  const [columns, dispatch] = (0, import_react40.useReducer)(dataGridReducer, initialColumns);
-  const [selectedRowIds, setSelectedRowIds] = (0, import_react40.useState)([]);
-  const [currentRow, setCurrentRow] = (0, import_react40.useState)(null);
-  const resetColumnVisibility = (0, import_react40.useCallback)(() => {
-    const newColumns = columns.map((column) => {
-      var _a;
-      const initialColumn = initialColumns.find((c) => c.id === column.id);
-      return __spreadProps(__spreadValues({}, column), {
-        meta: __spreadProps(__spreadValues({}, column.meta), {
-          visible: (_a = initialColumn == null ? void 0 : initialColumn.meta) == null ? void 0 : _a.visible
-        })
-      });
-    });
-    dispatch({ type: "SET", payload: newColumns });
-  }, [columns, initialColumns]);
-  const handleRowSelect = (0, import_react40.useCallback)(
-    (item) => {
-      var _a;
-      const rowId = (_a = getId(item)) != null ? _a : "";
-      if (!rowId) return;
-      const nextSelected = selectedRowIds.includes(rowId) ? selectedRowIds.filter((id2) => id2 !== rowId) : [...selectedRowIds, rowId];
-      setSelectedRowIds(nextSelected);
-      if (onRowSelect) onRowSelect(item, nextSelected);
-    },
-    [getId, onRowSelect, selectedRowIds]
-  );
-  const handleRowSelectAll = (0, import_react40.useCallback)(() => {
-    setSelectedRowIds((prev) => {
-      if (prev.length === data.length) {
-        return [];
+        )
       }
-      return data.map(getId).filter((id2) => id2 !== void 0);
-    });
-  }, [data, getId]);
-  const openRowDetail = (0, import_react40.useCallback)((row) => {
-    setCurrentRow(row);
-  }, []);
-  const closeRowDetail = (0, import_react40.useCallback)(() => {
-    setCurrentRow(null);
-  }, []);
-  const visibleColumns = (0, import_react40.useMemo)(() => {
-    const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
-    if (primaryKey) {
-      const pkColumn = columns.find((col) => col.id === String(primaryKey));
-      const otherColumns = columns.filter(
-        (col) => col.id !== String(primaryKey)
-      );
-      const orderedColumns = pkColumn ? [pkColumn, ...otherColumns] : [...otherColumns];
-      return orderedColumns.filter((x) => {
-        var _a;
-        return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
-      }).slice(0, effectiveLimit);
-    }
-    return columns.filter((x) => {
-      var _a;
-      return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
-    }).slice(0, effectiveLimit);
-  }, [columns, numberOfColumnsToShow, primaryKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-    GridContext.Provider,
-    {
-      value: {
-        columns,
-        testid,
-        id,
-        data,
-        selectedRowIds,
-        visibleColumns,
-        numberOfColumnsToShow,
-        primaryKey,
-        dispatch,
-        getId,
-        resetColumnVisibility,
-        handleRowSelect,
-        handleRowSelectAll,
-        isRowDetailOpen: !!currentRow,
-        currentRow,
-        openRowDetail,
-        closeRowDetail
-      },
-      children
-    }
+    ),
+    findDocumentRoot(bgRef.current)
   );
-}
+};
+Modal.displayName = "Modal";
 
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a, _b;
   const { column, data } = props;
@@ -6336,8 +6283,8 @@ function MobileDataGridColumn(props) {
       value = formatDate(value);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
       (_b = column.header) == null ? void 0 : _b.toString(),
       ":"
     ] }),
@@ -6347,28 +6294,28 @@ function MobileDataGridColumn(props) {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ModalContent2() {
   const context = useGridContext();
   const { columns, currentRow } = context;
   if (!currentRow) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
     var _a;
     return !((_a = x.id) == null ? void 0 : _a.startsWith("__"));
   }).map(
     (column, index) => {
       var _a, _b;
-      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
         "div",
         {
           className: "grid grid-cols-2 gap-2 items-center flex-1",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
               ":"
             ] }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               column.meta.mobileCell,
               {
                 column,
@@ -6379,7 +6326,7 @@ function ModalContent2() {
           ]
         },
         `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         MobileDataGridColumn,
         {
           column,
@@ -6392,7 +6339,7 @@ function ModalContent2() {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function RowDetailModalProvider() {
   var _a;
   const context = useGridContext();
@@ -6404,7 +6351,7 @@ function RowDetailModalProvider() {
     primaryKey,
     closeRowDetail
   } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Modal,
     {
       fixedHeightScrolling: true,
@@ -6413,7 +6360,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -6422,8 +6369,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -6431,25 +6378,25 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: "open_in_new", size: 24 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ModalContent2, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ModalContent2, {}) })
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_clsx40 = __toESM(require("clsx"), 1);
+var import_clsx39 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
-var import_clsx39 = __toESM(require("clsx"), 1);
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_clsx38 = __toESM(require("clsx"), 1);
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -6461,12 +6408,12 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
-      className: (0, import_clsx39.default)(
+      className: (0, import_clsx38.default)(
         "flex flex-col",
         "hover:bg-action-100 cursor-pointer list-none",
         selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
@@ -6476,9 +6423,9 @@ function MobileDataGridCard({
       ),
       onClick: () => openRowDetail(data),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Stack,
               {
                 sizing: "component",
@@ -6486,7 +6433,7 @@ function MobileDataGridCard({
                 width: "fit",
                 style: { paddingLeft: 0, paddingRight: 8 },
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -6497,17 +6444,17 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
                 style: { paddingInline: 0 },
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -6520,18 +6467,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
             var _a2, _b;
             return ((_a2 = x.meta) == null ? void 0 : _a2.visible) !== false && !((_b = x.id) == null ? void 0 : _b.startsWith("__"));
           }).map(
             (column, index) => {
               var _a2, _b;
-              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                 "div",
                 {
                   className: "grid grid-cols-2 gap-2 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -6543,7 +6490,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -6554,7 +6501,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -6565,14 +6512,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -6584,19 +6531,19 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
-      className: (0, import_clsx40.default)(
+      className: (0, import_clsx39.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
         "ul",
         {
           id,
           "data-testid": testid,
-          className: (0, import_clsx40.default)(
+          className: (0, import_clsx39.default)(
             "rounded absolute top-0 left-0 w-full flex-1",
             "divide-y divide-border-primary-normal",
             withBorder && "border border-border-primary-normal"
@@ -6604,7 +6551,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -6617,7 +6564,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Footer, __spreadValues({}, ctx)) })
           ]
         }
       )
@@ -6626,7 +6573,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -6648,7 +6595,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -6660,7 +6607,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           Stack,
           {
             height: "full",
@@ -6668,7 +6615,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -6676,7 +6623,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -6690,7 +6637,7 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(RowDetailModalProvider, {})
       ]
     }
   );