@dmsi/wedgekit-react 0.0.561 → 0.0.563

package/dist/components/MobileDataGrid/index.cjs

@@ -721,7 +721,7 @@ function Theme({
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/DataGridCell.tsx
 var import_sortable = require("@dnd-kit/sortable");
@@ -5635,12 +5635,21 @@ var import_jsx_runtime47 = require("react/jsx-runtime");
 // src/components/OrderCheckIcon.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 
+// src/components/EditingContext.tsx
+var import_react32 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var EditingContext = (0, import_react32.createContext)({
+  data: [],
+  setData: () => {
+  }
+});
+
 // src/components/AccessCard.tsx
 var import_clsx34 = __toESM(require("clsx"), 1);
 
 // src/components/Radio.tsx
 var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Radio = (_a) => {
   var _b = _a, {
     className,
@@ -5675,7 +5684,7 @@ var Radio = (_a) => {
   const readonlyClassName = (0, import_clsx33.default)(
     readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "label",
     {
       htmlFor: radioId,
@@ -5687,8 +5696,8 @@ var Radio = (_a) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "input",
             __spreadValues({
               id: radioId,
@@ -5700,7 +5709,7 @@ var Radio = (_a) => {
               readOnly
             }, props)
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "div",
             {
               className: (0, import_clsx33.default)(
@@ -5711,7 +5720,7 @@ var Radio = (_a) => {
                 disabledClassName,
                 readonlyClassName
               ),
-              children: checked && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              children: checked && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 RadioIcon,
                 {
                   className: (0, import_clsx33.default)(
@@ -5726,14 +5735,14 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
       ]
     }
   );
 };
 Radio.displayName = "Radio";
 var RadioIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "svg",
     {
       className,
@@ -5743,7 +5752,7 @@ var RadioIcon = ({ className }) => {
       viewBox: "0 0 24 24",
       fill: "none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "rect",
           {
             x: "1",
@@ -5755,7 +5764,7 @@ var RadioIcon = ({ className }) => {
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
       ]
     }
   );
@@ -5763,23 +5772,23 @@ var RadioIcon = ({ className }) => {
 RadioIcon.displayName = "RadioIcon";
 
 // src/components/AccessCard.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 
 // src/components/AccessCardGroup.tsx
 var import_clsx35 = __toESM(require("clsx"), 1);
-var import_react32 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
-var import_react33 = require("react");
-var GridContext = (0, import_react33.createContext)(null);
+var import_react34 = require("react");
+var GridContext = (0, import_react34.createContext)(null);
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
 function useGridContext() {
-  const ctx = (0, import_react34.useContext)(GridContext);
+  const ctx = (0, import_react35.useContext)(GridContext);
   if (!ctx) {
     throw new Error("useGridContext must be used within GridContextProvider");
   }
@@ -5787,11 +5796,11 @@ function useGridContext() {
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = 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 ref = (0, import_react36.useRef)(null);
+  const [show, setShow] = (0, import_react36.useState)(false);
   const {
     columns,
     id,
@@ -5802,13 +5811,13 @@ function ColumnSelector() {
     resetColumnVisibility,
     dispatch
   } = context;
-  const toggleColumnVisibility = (0, import_react35.useCallback)(
+  const toggleColumnVisibility = (0, import_react36.useCallback)(
     (index, visible) => {
       dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       id: id ? `${id}-column-selector` : void 0,
@@ -5816,7 +5825,7 @@ function ColumnSelector() {
       className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -5825,10 +5834,10 @@ function ColumnSelector() {
             variant: "navigation",
             iconOnly: true,
             size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -5839,7 +5848,7 @@ function ColumnSelector() {
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -5857,11 +5866,11 @@ function ColumnSelector() {
                 return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
               }).map((column) => {
                 var _a, _b, _c;
-                return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   MenuOption,
                   {
                     testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       Checkbox,
                       {
                         id: id ? `${id}-checkbox-${column.id}` : void 0,
@@ -5891,7 +5900,7 @@ function ColumnSelector() {
 }
 
 // src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function MobileDataGridHeader({
   header: Header,
   enableColumnSelector,
@@ -5909,15 +5918,15 @@ function MobileDataGridHeader({
     handleRowSelectAll
   } = ctx;
   if (typeof Header === "undefined" && !primaryKey) return null;
-  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Header, __spreadValues({}, ctx));
   if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "div",
       {
         id: id ? `${id}-header` : void 0,
         "data-testid": testid ? `${testid}-header` : void 0,
         className: "sticky top-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           Stack,
           {
             horizontal: true,
@@ -5927,7 +5936,7 @@ function MobileDataGridHeader({
             backgroundColor: "background-primary-normal",
             style: { borderTopRightRadius: 4, borderTopLeftRadius: 4 },
             children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 Checkbox,
                 {
                   id: id ? `${id}-select-all-checkbox` : void 0,
@@ -5937,7 +5946,7 @@ function MobileDataGridHeader({
                   onChange: handleRowSelectAll
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 Stack,
                 {
                   horizontal: true,
@@ -5945,10 +5954,10 @@ function MobileDataGridHeader({
                   items: "center",
                   sizing: "component",
                   padding: true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.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() })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime53.jsx)(ColumnSelector, {})
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColumnSelector, {})
             ]
           }
         ) })
@@ -5957,7 +5966,7 @@ function MobileDataGridHeader({
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/MobileDataGrid/dataGridReducer.ts
 function dataGridReducer(state, action) {
@@ -5987,7 +5996,7 @@ function dataGridReducer(state, action) {
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function GridContextProvider(props) {
   const {
     initialColumns,
@@ -6000,10 +6009,10 @@ function GridContextProvider(props) {
     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 [columns, dispatch] = (0, import_react37.useReducer)(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react37.useState)([]);
+  const [currentRow, setCurrentRow] = (0, import_react37.useState)(null);
+  const resetColumnVisibility = (0, import_react37.useCallback)(() => {
     const newColumns = columns.map((column) => {
       var _a;
       const initialColumn = initialColumns.find((c) => c.id === column.id);
@@ -6015,7 +6024,7 @@ function GridContextProvider(props) {
     });
     dispatch({ type: "SET", payload: newColumns });
   }, [columns, initialColumns]);
-  const handleRowSelect = (0, import_react36.useCallback)(
+  const handleRowSelect = (0, import_react37.useCallback)(
     (item) => {
       var _a;
       const rowId = (_a = getId(item)) != null ? _a : "";
@@ -6026,7 +6035,7 @@ function GridContextProvider(props) {
     },
     [getId, onRowSelect, selectedRowIds]
   );
-  const handleRowSelectAll = (0, import_react36.useCallback)(() => {
+  const handleRowSelectAll = (0, import_react37.useCallback)(() => {
     setSelectedRowIds((prev) => {
       if (prev.length === data.length) {
         return [];
@@ -6034,13 +6043,13 @@ function GridContextProvider(props) {
       return data.map(getId).filter((id2) => id2 !== void 0);
     });
   }, [data, getId]);
-  const openRowDetail = (0, import_react36.useCallback)((row) => {
+  const openRowDetail = (0, import_react37.useCallback)((row) => {
     setCurrentRow(row);
   }, []);
-  const closeRowDetail = (0, import_react36.useCallback)(() => {
+  const closeRowDetail = (0, import_react37.useCallback)(() => {
     setCurrentRow(null);
   }, []);
-  const visibleColumns = (0, import_react36.useMemo)(() => {
+  const visibleColumns = (0, import_react37.useMemo)(() => {
     const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
     if (primaryKey) {
       const pkColumn = columns.find((col) => col.id === String(primaryKey));
@@ -6058,7 +6067,7 @@ function GridContextProvider(props) {
       return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
     }).slice(0, effectiveLimit);
   }, [columns, numberOfColumnsToShow, primaryKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     GridContext.Provider,
     {
       value: {
@@ -6087,11 +6096,11 @@ function GridContextProvider(props) {
 
 // src/components/Modal.tsx
 var import_clsx40 = __toESM(require("clsx"), 1);
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/ModalHeader.tsx
 var import_clsx36 = __toESM(require("clsx"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
   hideCloseIcon,
@@ -6104,7 +6113,7 @@ var ModalHeader = ({
   titleAs: TitleComponent
 }) => {
   const Title = TitleComponent || Heading2;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       id,
@@ -6119,9 +6128,9 @@ var ModalHeader = ({
         headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: (0, import_clsx36.default)("flex items-center flex-1", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: (0, import_clsx36.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          title && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Title,
             {
               id: id ? `${id}-title` : void 0,
@@ -6131,7 +6140,7 @@ var ModalHeader = ({
             }
           )
         ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -6139,7 +6148,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
@@ -6150,14 +6159,14 @@ ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
 var import_clsx37 = __toESM(require("clsx"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
   id,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       id,
@@ -6175,7 +6184,7 @@ ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
 var import_clsx38 = __toESM(require("clsx"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -6183,7 +6192,7 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       id,
@@ -6193,26 +6202,26 @@ var ModalButtons = ({
         layoutPaddding,
         layoutGroupGap
       ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
             testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "close", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
             testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "check", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -6226,7 +6235,7 @@ ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
 var import_clsx39 = __toESM(require("clsx"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -6236,7 +6245,7 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       id,
@@ -6261,10 +6270,10 @@ var import_react_dom4 = require("react-dom");
 var import_react_use = require("react-use");
 
 // src/components/useMounted.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react37.useState)(false);
-  (0, import_react37.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -6272,7 +6281,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -6357,12 +6366,12 @@ var Modal = ({
 }) => {
   var _a;
   const mounted = useMounted();
-  const modalRef = (0, import_react38.useRef)(null);
-  const bgRef = (0, import_react38.useRef)(null);
+  const modalRef = (0, import_react39.useRef)(null);
+  const bgRef = (0, import_react39.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
   const isMobile = useMatchesMobile();
   const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -6382,7 +6391,7 @@ var Modal = ({
       bgFadeIn(bgRef.current);
     }
   }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react38.useCallback)(
+  const handleKeyDown = (0, import_react39.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -6393,12 +6402,12 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleClose = (0, import_react38.useCallback)(() => {
+  const handleClose = (0, import_react39.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -6406,7 +6415,7 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!open) return;
     const scrollY = window.scrollY;
     const body = document.body;
@@ -6427,7 +6436,7 @@ var Modal = ({
     };
   }, [open]);
   const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react38.useCallback)(
+  const backgroundClickHandler = (0, import_react39.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
@@ -6445,7 +6454,7 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -6454,7 +6463,7 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "div",
           {
             id,
@@ -6469,7 +6478,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -6483,7 +6492,7 @@ var Modal = ({
                   titleAs: TitleComponent
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -6492,7 +6501,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -6513,7 +6522,7 @@ var Modal = ({
 Modal.displayName = "Modal";
 
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a, _b;
   const { column, data } = props;
@@ -6524,8 +6533,8 @@ function MobileDataGridColumn(props) {
       value = formatDate(value);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
       (_b = column.header) == null ? void 0 : _b.toString(),
       ":"
     ] }),
@@ -6535,28 +6544,28 @@ function MobileDataGridColumn(props) {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function ModalContent2() {
   const context = useGridContext();
   const { columns, currentRow } = context;
   if (!currentRow) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime61.jsxs)(
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
         "div",
         {
           className: "grid grid-cols-2 gap-2 items-center flex-1",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
               ":"
             ] }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               column.meta.mobileCell,
               {
                 column,
@@ -6567,7 +6576,7 @@ function ModalContent2() {
           ]
         },
         `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         MobileDataGridColumn,
         {
           column,
@@ -6580,7 +6589,7 @@ function ModalContent2() {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function RowDetailModalProvider() {
   var _a;
   const context = useGridContext();
@@ -6592,7 +6601,7 @@ function RowDetailModalProvider() {
     primaryKey,
     closeRowDetail
   } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Modal,
     {
       fixedHeightScrolling: true,
@@ -6601,7 +6610,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -6610,8 +6619,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -6619,15 +6628,15 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "open_in_new", size: 24 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ModalContent2, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ModalContent2, {}) })
     }
   );
 }
@@ -6637,7 +6646,7 @@ var import_clsx42 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
 var import_clsx41 = __toESM(require("clsx"), 1);
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -6649,7 +6658,7 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
@@ -6664,9 +6673,9 @@ function MobileDataGridCard({
       ),
       onClick: () => openRowDetail(data),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               Stack,
               {
                 sizing: "component",
@@ -6674,7 +6683,7 @@ function MobileDataGridCard({
                 width: "fit",
                 style: { paddingLeft: 0, paddingRight: 8 },
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -6685,17 +6694,17 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
                 style: { paddingInline: 0 },
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -6708,18 +6717,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime64.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_runtime63.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
                 "div",
                 {
                   className: "grid grid-cols-2 gap-2 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -6731,7 +6740,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -6742,7 +6751,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -6753,14 +6762,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -6772,14 +6781,14 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "div",
     {
       className: (0, import_clsx42.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
         "ul",
         {
           id,
@@ -6792,7 +6801,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -6805,7 +6814,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Footer, __spreadValues({}, ctx)) })
           ]
         }
       )
@@ -6814,7 +6823,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -6836,7 +6845,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -6848,7 +6857,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
           Stack,
           {
             height: "full",
@@ -6856,7 +6865,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -6864,7 +6873,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -6878,7 +6887,7 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RowDetailModalProvider, {})
       ]
     }
   );