@dmsi/wedgekit-react 0.0.414 → 0.0.417

package/dist/components/MobileDataGrid/index.cjs

@@ -496,6 +496,10 @@ var Stack = (_a) => {
     padding,
     paddingX,
     paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
     margin,
     marginX,
     marginY,
@@ -511,6 +515,10 @@ var Stack = (_a) => {
     height,
     maxHeight,
     borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
     backgroundColor,
     sizing = "none",
     overflowY = "inherit",
@@ -536,6 +544,10 @@ var Stack = (_a) => {
     "padding",
     "paddingX",
     "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
     "margin",
     "marginX",
     "marginY",
@@ -551,6 +563,10 @@ var Stack = (_a) => {
     "height",
     "maxHeight",
     "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
     "backgroundColor",
     "sizing",
     "overflowY",
@@ -586,6 +602,10 @@ var Stack = (_a) => {
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
+        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
+        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
+        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : void 0,
         backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
         flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
@@ -625,6 +645,22 @@ var Stack = (_a) => {
         paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
         paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
         paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
@@ -670,7 +706,7 @@ function Theme({
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react29 = require("react");
+var import_react35 = require("react");
 
 // src/components/DataGridCell.tsx
 var import_sortable = require("@dnd-kit/sortable");
@@ -4237,7 +4273,7 @@ var Tooltip = ({
       id,
       "data-testid": testid,
       ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
@@ -4303,12 +4339,11 @@ var import_jsx_runtime27 = require("react/jsx-runtime");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 
 // src/components/Grid.tsx
-var import_react21 = require("react");
 var import_clsx23 = __toESM(require("clsx"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -4344,7 +4379,7 @@ Spinner.displayName = "Spinner";
 var import_jsx_runtime31 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx24 = __toESM(require("clsx"), 1);
@@ -4389,423 +4424,116 @@ var import_clsx25 = require("clsx");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react25 = require("react");
+var import_react24 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_clsx26 = __toESM(require("clsx"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
 
-// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-var import_react28 = require("react");
+// src/components/SimpleTable.tsx
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
 
-// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
-var import_react27 = require("react");
-var GridContext = (0, import_react27.createContext)(null);
+// src/components/PDFViewer/index.tsx
+var import_react30 = require("react");
 
-// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-function useGridContext() {
-  const ctx = (0, import_react28.useContext)(GridContext);
-  if (!ctx) {
-    throw new Error("useGridContext must be used within GridContextProvider");
-  }
-  return ctx;
-}
+// src/components/Modal.tsx
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_react27 = require("react");
 
-// src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-function ColumnSelector() {
-  const context = useGridContext();
-  const ref = (0, import_react29.useRef)(null);
-  const [show, setShow] = (0, import_react29.useState)(false);
-  const {
-    columns,
-    id,
-    testid,
-    visibleColumns,
-    numberOfColumnsToShow,
-    primaryKey,
-    resetColumnVisibility,
-    dispatch
-  } = context;
-  const toggleColumnVisibility = (0, import_react29.useCallback)(
-    (index, visible) => {
-      dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
-    },
-    [dispatch]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+// src/components/ModalHeader.tsx
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  headerIconAlign,
+  onClose,
+  id,
+  testid,
+  headerClassname
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "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,
+      className: (0, import_clsx28.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_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx28.default)("flex items-center flex-1", layoutGroupGap), children: [
+          headerIcon,
+          title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Button,
           {
-            id: id ? `${id}-button` : void 0,
-            testid: testid ? `${testid}-button` : void 0,
-            onClick: () => setShow((prev) => !prev),
-            variant: "navigation",
+            id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             iconOnly: true,
-            size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "tune" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.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_runtime38.jsx)(
-                  MenuOption,
-                  {
-                    testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime38.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
-                );
-              })
-            ]
+            variant: "tertiary",
+            onClick: onClose,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
     }
   );
-}
+};
+ModalHeader.displayName = "ModalHeader";
 
-// src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-function MobileDataGridHeader({
-  header: Header,
-  enableColumnSelector,
-  enableRowSelection
+// src/components/ModalContent.tsx
+var import_clsx29 = __toESM(require("clsx"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function ModalContent({
+  fixedHeightScrolling,
+  children,
+  id,
+  testid
 }) {
-  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_runtime39.jsx)(Header, __spreadValues({}, ctx));
-  if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      "div",
-      {
-        id: id ? `${id}-header` : void 0,
-        "data-testid": testid ? `${testid}-header` : void 0,
-        className: "sticky top-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-          Stack,
-          {
-            horizontal: true,
-            horizontalMobile: true,
-            items: "center",
-            justify: "between",
-            backgroundColor: "background-primary-normal",
-            children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                Checkbox,
-                {
-                  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
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                Stack,
-                {
-                  horizontal: true,
-                  horizontalMobile: true,
-                  items: "center",
-                  sizing: "component",
-                  padding: true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime39.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() })
-                }
-              ),
-              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ColumnSelector, {})
-            ]
-          }
-        ) })
-      }
-    );
-}
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react30 = 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.");
-  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx29.default)(
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
 }
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-function GridContextProvider(props) {
-  const {
-    initialColumns,
-    id,
-    testid,
-    children,
-    data,
-    numberOfColumnsToShow,
-    primaryKey,
-    getId,
-    onRowSelect
-  } = props;
-  const [columns, dispatch] = (0, import_react30.useReducer)(dataGridReducer, initialColumns);
-  const [selectedRowIds, setSelectedRowIds] = (0, import_react30.useState)([]);
-  const [currentRow, setCurrentRow] = (0, import_react30.useState)(null);
-  const resetColumnVisibility = (0, import_react30.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_react30.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_react30.useCallback)(() => {
-    setSelectedRowIds((prev) => {
-      if (prev.length === data.length) {
-        return [];
-      }
-      return data.map(getId).filter((id2) => id2 !== void 0);
-    });
-  }, [data, getId]);
-  const openRowDetail = (0, import_react30.useCallback)((row) => {
-    setCurrentRow(row);
-  }, []);
-  const closeRowDetail = (0, import_react30.useCallback)(() => {
-    setCurrentRow(null);
-  }, []);
-  const visibleColumns = (0, import_react30.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_runtime40.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/Modal.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
-var import_react32 = require("react");
-
-// src/components/ModalHeader.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var ModalHeader = ({
-  title,
-  hideCloseIcon,
-  headerIcon,
-  headerIconAlign,
-  onClose,
-  id,
-  testid,
-  headerClassname
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx27.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_runtime41.jsxs)("div", { className: (0, import_clsx27.default)("flex items-center flex-1", layoutGroupGap), children: [
-          headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            Heading2,
-            {
-              id: id ? `${id}-title` : void 0,
-              testid: testid ? `${testid}-title` : void 0,
-              as: "p",
-              children: title
-            }
-          )
-        ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime41.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 }) })
-          }
-        )
-      ]
-    }
-  );
-};
-ModalHeader.displayName = "ModalHeader";
-
-// src/components/ModalContent.tsx
-var import_clsx28 = __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_clsx28.default)(
-        "flex-grow desktop:flex-grow-0",
-        layoutPaddding,
-        fixedHeightScrolling && "overflow-auto"
-      ),
-      children
-    }
-  );
-}
-ModalContent.displayName = "ModalContent";
+ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -4813,36 +4541,36 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx29.default)(
+      className: (0, import_clsx30.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)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.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 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.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 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -4855,8 +4583,8 @@ var ModalButtons = ({
 ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -4866,12 +4594,12 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx30.default)(
+      className: (0, import_clsx31.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",
@@ -4891,10 +4619,10 @@ var import_react_dom3 = require("react-dom");
 var import_react_use = require("react-use");
 
 // src/components/useMounted.tsx
-var import_react31 = require("react");
+var import_react26 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react31.useState)(false);
-  (0, import_react31.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -4902,7 +4630,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -4986,12 +4714,12 @@ var Modal = ({
 }) => {
   var _a;
   const mounted = useMounted();
-  const modalRef = (0, import_react32.useRef)(null);
-  const bgRef = (0, import_react32.useRef)(null);
+  const modalRef = (0, import_react27.useRef)(null);
+  const bgRef = (0, import_react27.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
   const isMobile = useMatchesMobile();
   const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -5011,7 +4739,7 @@ var Modal = ({
       bgFadeIn(bgRef.current);
     }
   }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react32.useCallback)(
+  const handleKeyDown = (0, import_react27.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -5022,12 +4750,12 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleClose = (0, import_react32.useCallback)(() => {
+  const handleClose = (0, import_react27.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -5035,7 +4763,7 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return;
     const scrollY = window.scrollY;
     const body = document.body;
@@ -5056,7 +4784,7 @@ var Modal = ({
     };
   }, [open]);
   const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react32.useCallback)(
+  const backgroundClickHandler = (0, import_react27.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
@@ -5074,7 +4802,7 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -5083,13 +4811,13 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "div",
           {
             id,
             "data-testid": testid,
             ref: modalRef,
-            className: (0, import_clsx31.default)(
+            className: (0, import_clsx32.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,
@@ -5098,7 +4826,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -5111,7 +4839,7 @@ var Modal = ({
                   headerClassname
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -5120,7 +4848,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -5140,81 +4868,568 @@ var Modal = ({
 };
 Modal.displayName = "Modal";
 
-// src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
+// src/components/PDFViewer/PDFElement.tsx
+var import_react_pdf2 = require("@mikecousins/react-pdf");
+var import_react29 = require("react");
+
+// src/components/PDFViewer/PDFPage.tsx
+var import_react_pdf = require("@mikecousins/react-pdf");
+var import_react28 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// src/components/PDFViewer/PDFElement.tsx
+var import_clsx33 = __toESM(require("clsx"), 1);
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// src/components/PDFViewer/DownloadIcon.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-function MobileDataGridColumn(props) {
-  var _a;
-  const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
-      (_a = column.header) == null ? void 0 : _a.toString(),
-      ":"
-    ] }),
-    " ",
-    column.id && data[column.id] ? data[column.id] : null
-  ] });
-}
 
-// src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
+// src/components/PDFViewer/PDFNavigation.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-function ModalContent2() {
-  const context = useGridContext();
-  const { columns, currentRow } = context;
-  if (!currentRow) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsxs)(
-        "div",
-        {
-          className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
-              (_b = column.header) == null ? void 0 : _b.toString(),
-              ":"
-            ] }),
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              column.meta.mobileCell,
-              {
-                column,
-                row: currentRow,
-                cellValue: currentRow == null ? void 0 : currentRow[column.id]
-              }
-            )
-          ]
-        },
-        `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        MobileDataGridColumn,
-        {
-          column,
-          data: currentRow
-        },
-        `${column.id}-${index}`
-      );
-    }
-  ) });
-}
 
-// src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
+// src/components/PDFViewer/index.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-function RowDetailModalProvider() {
-  var _a;
-  const context = useGridContext();
-  const {
-    id,
-    testid,
-    isRowDetailOpen,
-    currentRow,
-    primaryKey,
-    closeRowDetail
-  } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    Modal,
+
+// src/components/ListGroup.tsx
+var import_react31 = require("react");
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// src/components/Pagination.tsx
+var import_react32 = require("react");
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
+  id,
+  testid,
+  className,
+  disabled
+}) => {
+  const goTo = (0, import_react32.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_react32.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_clsx35.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_runtime50.jsxs)(
+    "nav",
+    {
+      id,
+      "data-testid": testid,
+      "aria-label": "Pagination",
+      onKeyDown: handleKey,
+      className: (0, import_clsx35.default)(
+        "flex items-center",
+        "border border-border-primary-normal",
+        "bg-background-grouped-primary-normal",
+        "rounded-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "button",
+          {
+            disabled: disabled || currentPage <= 1,
+            "aria-label": "Previous page",
+            onClick: () => goTo(currentPage - 1),
+            className: (0, import_clsx35.default)(buttonClass, "border-r-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { name: "keyboard_arrow_left" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: (0, import_clsx35.default)("flex items-center"), children: pageTokens.map((token, index) => {
+          if (token === "ellipsis") {
+            return /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "button",
+            {
+              "aria-label": `Page ${token}`,
+              "aria-current": selected ? "page" : void 0,
+              disabled,
+              onClick: () => goTo(token),
+              className: (0, import_clsx35.default)(
+                buttonClass,
+                selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Subheader, { align: "center", weight: "bold", children: token })
+            }
+          ) }, token);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "button",
+          {
+            disabled: disabled || currentPage >= totalPages,
+            "aria-label": "Next page",
+            onClick: () => goTo(currentPage + 1),
+            className: (0, import_clsx35.default)(buttonClass, "border-l-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { name: "keyboard_arrow_right" })
+          }
+        )
+      ]
+    }
+  );
+};
+Pagination.displayName = "Pagination";
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+var import_react34 = require("react");
+
+// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
+var import_react33 = require("react");
+var GridContext = (0, import_react33.createContext)(null);
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+function useGridContext() {
+  const ctx = (0, import_react34.useContext)(GridContext);
+  if (!ctx) {
+    throw new Error("useGridContext must be used within GridContextProvider");
+  }
+  return ctx;
+}
+
+// src/components/MobileDataGrid/ColumnSelector/index.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function ColumnSelector() {
+  const context = useGridContext();
+  const ref = (0, import_react35.useRef)(null);
+  const [show, setShow] = (0, import_react35.useState)(false);
+  const {
+    columns,
+    id,
+    testid,
+    visibleColumns,
+    numberOfColumnsToShow,
+    primaryKey,
+    resetColumnVisibility,
+    dispatch
+  } = context;
+  const toggleColumnVisibility = (0, import_react35.useCallback)(
+    (index, visible) => {
+      dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
+    },
+    [dispatch]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "div",
+    {
+      id: id ? `${id}-column-selector` : void 0,
+      "data-testid": testid,
+      className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(Icon, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.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_runtime51.jsx)(
+                  MenuOption,
+                  {
+                    testid: testid ? `${testid}-option-${column.id}` : void 0,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime51.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
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MobileDataGrid/MobileDataGridHeader.tsx
+var import_jsx_runtime52 = 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_runtime52.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "string" || primaryKey)
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "div",
+      {
+        id: id ? `${id}-header` : void 0,
+        "data-testid": testid ? `${testid}-header` : void 0,
+        className: "sticky top-0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          Stack,
+          {
+            horizontal: true,
+            horizontalMobile: true,
+            items: "center",
+            justify: "between",
+            backgroundColor: "background-primary-normal",
+            children: [
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                Checkbox,
+                {
+                  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
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                Stack,
+                {
+                  horizontal: true,
+                  horizontalMobile: true,
+                  items: "center",
+                  sizing: "component",
+                  padding: true,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime52.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() })
+                }
+              ),
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ColumnSelector, {})
+            ]
+          }
+        ) })
+      }
+    );
+}
+
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+var import_react36 = 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_runtime53 = require("react/jsx-runtime");
+function GridContextProvider(props) {
+  const {
+    initialColumns,
+    id,
+    testid,
+    children,
+    data,
+    numberOfColumnsToShow,
+    primaryKey,
+    getId,
+    onRowSelect
+  } = props;
+  const [columns, dispatch] = (0, import_react36.useReducer)(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react36.useState)([]);
+  const [currentRow, setCurrentRow] = (0, import_react36.useState)(null);
+  const resetColumnVisibility = (0, import_react36.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_react36.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_react36.useCallback)(() => {
+    setSelectedRowIds((prev) => {
+      if (prev.length === data.length) {
+        return [];
+      }
+      return data.map(getId).filter((id2) => id2 !== void 0);
+    });
+  }, [data, getId]);
+  const openRowDetail = (0, import_react36.useCallback)((row) => {
+    setCurrentRow(row);
+  }, []);
+  const closeRowDetail = (0, import_react36.useCallback)(() => {
+    setCurrentRow(null);
+  }, []);
+  const visibleColumns = (0, import_react36.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_runtime53.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/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function MobileDataGridColumn(props) {
+  var _a;
+  const { column, data } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+      (_a = column.header) == null ? void 0 : _a.toString(),
+      ":"
+    ] }),
+    " ",
+    column.id && data[column.id] ? data[column.id] : null
+  ] });
+}
+
+// src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function ModalContent2() {
+  const context = useGridContext();
+  const { columns, currentRow } = context;
+  if (!currentRow) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsxs)(
+        "div",
+        {
+          className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+              (_b = column.header) == null ? void 0 : _b.toString(),
+              ":"
+            ] }),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              column.meta.mobileCell,
+              {
+                column,
+                row: currentRow,
+                cellValue: currentRow == null ? void 0 : currentRow[column.id]
+              }
+            )
+          ]
+        },
+        `${column.id}-${index}`
+      ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        MobileDataGridColumn,
+        {
+          column,
+          data: currentRow
+        },
+        `${column.id}-${index}`
+      );
+    }
+  ) });
+}
+
+// src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function RowDetailModalProvider() {
+  var _a;
+  const context = useGridContext();
+  const {
+    id,
+    testid,
+    isRowDetailOpen,
+    currentRow,
+    primaryKey,
+    closeRowDetail
+  } = context;
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    Modal,
     {
       fixedHeightScrolling: true,
       open: isRowDetailOpen,
@@ -5222,7 +5437,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -5231,8 +5446,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -5240,25 +5455,25 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "open_in_new", size: 24 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ModalContent2, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalContent2, {}) })
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_clsx33 = __toESM(require("clsx"), 1);
+var import_clsx37 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
-var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"), 1);
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -5270,27 +5485,27 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
-      className: (0, import_clsx32.default)(
+      className: (0, import_clsx36.default)(
         "hover:bg-action-100 cursor-pointer list-none",
         selected ? "bg-action-100" : "bg-background-grouped-primary-normal"
       ),
       onClick: () => openRowDetail(data),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 width: "fit",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -5301,16 +5516,16 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -5323,18 +5538,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime49.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                 "div",
                 {
                   className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -5346,7 +5561,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -5357,7 +5572,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -5368,14 +5583,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "keyboard_arrow_down" }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -5387,19 +5602,19 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
-      className: (0, import_clsx33.default)(
+      className: (0, import_clsx37.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         "ul",
         {
           id,
           "data-testid": testid,
-          className: (0, import_clsx33.default)(
+          className: (0, import_clsx37.default)(
             "rounded absolute top-0 left-0 w-full flex-1",
             "divide-y divide-border-primary-normal",
             withBorder && "border border-border-primary-normal"
@@ -5407,7 +5622,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -5420,7 +5635,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Footer, __spreadValues({}, ctx)) })
           ]
         }
       )
@@ -5429,7 +5644,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -5451,7 +5666,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -5463,7 +5678,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           Stack,
           {
             height: "full",
@@ -5471,7 +5686,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -5479,7 +5694,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -5493,7 +5708,7 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RowDetailModalProvider, {})
       ]
     }
   );