@dmsi/wedgekit-react 0.0.410 → 0.0.412

package/dist/components/MobileDataGrid/index.cjs

@@ -670,7 +670,7 @@ function Theme({
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react34 = require("react");
+var import_react29 = require("react");
 
 // src/components/DataGridCell.tsx
 var import_sortable = require("@dnd-kit/sortable");
@@ -4403,149 +4403,460 @@ var import_react26 = require("react");
 var import_clsx26 = __toESM(require("clsx"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
 
-// src/components/PDFViewer/index.tsx
-var import_react31 = require("react");
-
-// src/components/Modal.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
 var import_react28 = require("react");
 
-// src/components/ModalHeader.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
+// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
+var import_react27 = require("react");
+var GridContext = (0, import_react27.createContext)(null);
+
+// 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/MobileDataGrid/ColumnSelector/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var ModalHeader = ({
-  title,
-  hideCloseIcon,
-  headerIcon,
-  headerIconAlign,
-  onClose,
-  id,
-  testid,
-  headerClassname
-}) => {
+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)(
     "div",
     {
-      id,
+      id: id ? `${id}-column-selector` : void 0,
       "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
-      ),
+      className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
+      ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: (0, import_clsx27.default)("flex items-center flex-1", layoutGroupGap), children: [
-          headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            Heading2,
-            {
-              id: id ? `${id}-title` : void 0,
-              testid: testid ? `${testid}-title` : void 0,
-              as: "p",
-              children: title
-            }
-          )
-        ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Button,
           {
-            id: id ? `${id}-close-button` : void 0,
-            testid: testid ? `${testid}-close-button` : void 0,
+            id: id ? `${id}-button` : void 0,
+            testid: testid ? `${testid}-button` : void 0,
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
             iconOnly: true,
-            variant: "tertiary",
-            onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "close", size: 24 }) })
+            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
+                );
+              })
+            ]
           }
         )
       ]
     }
   );
-};
-ModalHeader.displayName = "ModalHeader";
+}
 
-// src/components/ModalContent.tsx
-var import_clsx28 = __toESM(require("clsx"), 1);
+// src/components/MobileDataGrid/MobileDataGridHeader.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-function ModalContent({
-  fixedHeightScrolling,
-  children,
-  id,
-  testid
+function MobileDataGridHeader({
+  header: Header,
+  enableColumnSelector,
+  enableRowSelection
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.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";
-
-// src/components/ModalButtons.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var ModalButtons = ({
-  onClose,
-  onContinue,
-  customActions,
-  id,
-  testid
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx29.default)(
-        "border-t border-neutral-300 flex justify-end",
-        layoutPaddding,
-        layoutGroupGap
-      ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          Button,
-          {
-            id: id ? `${id}-close-button` : void 0,
-            testid: testid ? `${testid}-close-button` : void 0,
-            variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "close", size: 24 }),
-            onClick: onClose,
-            className: "max-sm:w-full",
-            children: "Close"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          Button,
+  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,
           {
-            id: id ? `${id}-continue-button` : void 0,
-            testid: testid ? `${testid}-continue-button` : void 0,
-            variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "check", size: 24 }),
-            className: "max-sm:w-full",
-            onClick: onContinue,
-            children: "Continue"
+            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, {})
+            ]
           }
-        )
-      ] })
-    }
-  );
-};
-ModalButtons.displayName = "ModalButtons";
+        ) })
+      }
+    );
+}
 
-// src/components/ModalScrim.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+// 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.");
+  }
+}
+
+// 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";
+
+// src/components/ModalButtons.tsx
+var import_clsx29 = __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)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx29.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)(
+          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"
+          }
+        )
+      ] })
+    }
+  );
+};
+ModalButtons.displayName = "ModalButtons";
+
+// src/components/ModalScrim.tsx
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -4555,7 +4866,7 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       id,
@@ -4580,10 +4891,10 @@ var import_react_dom3 = require("react-dom");
 var import_react_use = require("react-use");
 
 // src/components/useMounted.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -4591,7 +4902,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -4675,12 +4986,12 @@ var Modal = ({
 }) => {
   var _a;
   const mounted = useMounted();
-  const modalRef = (0, import_react28.useRef)(null);
-  const bgRef = (0, import_react28.useRef)(null);
+  const modalRef = (0, import_react32.useRef)(null);
+  const bgRef = (0, import_react32.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
   const isMobile = useMatchesMobile();
   const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -4700,7 +5011,7 @@ var Modal = ({
       bgFadeIn(bgRef.current);
     }
   }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react28.useCallback)(
+  const handleKeyDown = (0, import_react32.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -4711,12 +5022,12 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleClose = (0, import_react28.useCallback)(() => {
+  const handleClose = (0, import_react32.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -4724,7 +5035,7 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!open) return;
     const scrollY = window.scrollY;
     const body = document.body;
@@ -4745,7 +5056,7 @@ var Modal = ({
     };
   }, [open]);
   const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react28.useCallback)(
+  const backgroundClickHandler = (0, import_react32.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
@@ -4763,7 +5074,7 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -4772,7 +5083,7 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "div",
           {
             id,
@@ -4787,7 +5098,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -4800,7 +5111,7 @@ var Modal = ({
                   headerClassname
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -4809,7 +5120,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -4829,349 +5140,13 @@ var Modal = ({
 };
 Modal.displayName = "Modal";
 
-// src/components/PDFViewer/PDFElement.tsx
-var import_react_pdf2 = require("@mikecousins/react-pdf");
-var import_react30 = require("react");
-
-// src/components/PDFViewer/PDFPage.tsx
-var import_react_pdf = require("@mikecousins/react-pdf");
-var import_react29 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-
-// src/components/PDFViewer/PDFElement.tsx
-var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
-
-// src/components/PDFViewer/DownloadIcon.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-
-// src/components/PDFViewer/PDFNavigation.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-
-// src/components/PDFViewer/index.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}-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_runtime48.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_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
-                );
-              })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// 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}-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,
-          {
-            horizontal: true,
-            horizontalMobile: true,
-            items: "center",
-            justify: "between",
-            backgroundColor: "background-primary-normal",
-            children: [
-              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}-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_runtime49.jsx)(
-                Stack,
-                {
-                  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() })
-                }
-              ),
-              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColumnSelector, {})
-            ]
-          }
-        ) })
-      }
-    );
-}
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react35 = 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_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/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a;
   const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+  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(),
       ":"
     ] }),
@@ -5181,28 +5156,28 @@ function MobileDataGridColumn(props) {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+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_runtime52.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+  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_runtime52.jsxs)(
+      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_runtime52.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", 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_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               column.meta.mobileCell,
               {
                 column,
@@ -5213,7 +5188,7 @@ function ModalContent2() {
           ]
         },
         `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         MobileDataGridColumn,
         {
           column,
@@ -5226,7 +5201,7 @@ function ModalContent2() {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function RowDetailModalProvider() {
   var _a;
   const context = useGridContext();
@@ -5238,7 +5213,7 @@ function RowDetailModalProvider() {
     primaryKey,
     closeRowDetail
   } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     Modal,
     {
       fixedHeightScrolling: true,
@@ -5247,7 +5222,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -5256,8 +5231,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            /* @__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)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -5265,25 +5240,25 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                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 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalContent2, {}) })
+      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, {}) })
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_clsx34 = __toESM(require("clsx"), 1);
+var import_clsx33 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
-var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -5295,27 +5270,27 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
-      className: (0, import_clsx33.default)(
+      className: (0, import_clsx32.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_runtime54.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__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)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 width: "fit",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -5326,16 +5301,16 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -5348,18 +5323,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime54.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                 "div",
                 {
                   className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -5371,7 +5346,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -5382,7 +5357,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -5393,14 +5368,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+        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" }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -5412,19 +5387,19 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
-      className: (0, import_clsx34.default)(
+      className: (0, import_clsx33.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "ul",
         {
           id,
           "data-testid": testid,
-          className: (0, import_clsx34.default)(
+          className: (0, import_clsx33.default)(
             "rounded absolute top-0 left-0 w-full flex-1",
             "divide-y divide-border-primary-normal",
             withBorder && "border border-border-primary-normal"
@@ -5432,7 +5407,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -5445,7 +5420,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!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)) })
           ]
         }
       )
@@ -5454,7 +5429,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -5476,7 +5451,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -5488,7 +5463,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           Stack,
           {
             height: "full",
@@ -5496,7 +5471,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -5504,7 +5479,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -5518,7 +5493,7 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RowDetailModalProvider, {})
       ]
     }
   );