@equinor/apollo-components 3.2.0 → 3.3.0

package/dist/index.mjs

@@ -1,9 +1,38 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -16,6 +45,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -1007,7 +1040,11 @@ var require_arrayLikeKeys = __commonJS({
     function arrayLikeKeys(value, inherited) {
       var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
       for (var key in value) {
-        if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
+        if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
+        (key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
+        isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
+        isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
+        isIndex(key, length)))) {
           result.push(key);
         }
       }
@@ -2345,33 +2382,16 @@ var Wrapper = styled.div`
     max-width: 100%;
   }
 `;
-var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ jsxs(Wrapper, {
-  children: [
-    /* @__PURE__ */ jsx(TopBar, {
-      sticky: false,
-      children: /* @__PURE__ */ jsxs(TopBar.Header, {
-        children: [
-          /* @__PURE__ */ jsx(Icon, {
-            data: icon ?? apps
-          }),
-          /* @__PURE__ */ jsx("span", {
-            children: title ?? "App Title"
-          })
-        ]
-      })
-    }),
-    /* @__PURE__ */ jsxs("div", {
-      className: "--content-wrapper",
-      children: [
-        sidebar,
-        /* @__PURE__ */ jsx("div", {
-          className: "--content-outlet",
-          children
-        })
-      ]
-    })
-  ]
-});
+var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ jsxs(Wrapper, { children: [
+  /* @__PURE__ */ jsx(TopBar, { sticky: false, children: /* @__PURE__ */ jsxs(TopBar.Header, { children: [
+    /* @__PURE__ */ jsx(Icon, { data: icon != null ? icon : apps }),
+    /* @__PURE__ */ jsx("span", { children: title != null ? title : "App Title" })
+  ] }) }),
+  /* @__PURE__ */ jsxs("div", { className: "--content-wrapper", children: [
+    sidebar,
+    /* @__PURE__ */ jsx("div", { className: "--content-outlet", children })
+  ] })
+] });
 
 // src/AppShell/AppSidebar.tsx
 import { Button, Icon as Icon2 } from "@equinor/eds-core-react";
@@ -2408,38 +2428,34 @@ var Wrapper2 = styled2.div`
 `;
 function AppSidebar() {
   const [collapsed, setCollapsed] = useState(false);
-  return /* @__PURE__ */ jsx2(Wrapper2, {
-    collapsed,
-    children: /* @__PURE__ */ jsx2("div", {
-      className: "collapse-button-wrapper",
-      children: /* @__PURE__ */ jsxs2(Button, {
-        className: "collapse-button",
-        variant: collapsed ? "ghost_icon" : "ghost",
-        onClick: () => setCollapsed(!collapsed),
-        children: [
-          /* @__PURE__ */ jsx2(Icon2, {
-            data: collapsed ? last_page : first_page
-          }),
-          !collapsed && /* @__PURE__ */ jsx2("div", {
-            children: "Collapse"
-          })
-        ]
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx2(Wrapper2, { collapsed, children: /* @__PURE__ */ jsx2("div", { className: "collapse-button-wrapper", children: /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      className: "collapse-button",
+      variant: collapsed ? "ghost_icon" : "ghost",
+      onClick: () => setCollapsed(!collapsed),
+      children: [
+        /* @__PURE__ */ jsx2(Icon2, { data: collapsed ? last_page : first_page }),
+        !collapsed && /* @__PURE__ */ jsx2("div", { children: "Collapse" })
+      ]
+    }
+  ) }) });
 }
 
 // src/cells/CheckboxCell.tsx
 import { Checkbox } from "@equinor/eds-core-react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function CheckboxCell(context) {
-  return /* @__PURE__ */ jsx3(Checkbox, {
-    enterKeyHint: "next",
-    "aria-label": "readonly",
-    readOnly: true,
-    checked: context.getValue(),
-    disabled: true
-  });
+  return /* @__PURE__ */ jsx3(
+    Checkbox,
+    {
+      enterKeyHint: "next",
+      "aria-label": "readonly",
+      readOnly: true,
+      checked: context.getValue(),
+      disabled: true
+    }
+  );
 }
 
 // src/cells/ChipsCell.tsx
@@ -2477,17 +2493,15 @@ var Chip = styled3.div`
   line-height: 22px;
   height: 22px;
   padding: 0 6px;
-  background-color: ${(props) => props.backgroundColor ?? tokens2.colors.ui.background__medium.hex};
+  background-color: ${(props) => {
+  var _a;
+  return (_a = props.backgroundColor) != null ? _a : tokens2.colors.ui.background__medium.hex;
+}};
   color: darkslategrey;
 `;
 var ChipsCell = (props) => {
   var _a;
-  return /* @__PURE__ */ jsx4(ChipsWrapper, {
-    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx4(Chip, {
-      backgroundColor: stringToHslColor(value),
-      children: value
-    }, value))
-  });
+  return /* @__PURE__ */ jsx4(ChipsWrapper, { children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx4(Chip, { backgroundColor: stringToHslColor(value), children: value }, value)) });
 };
 
 // src/cells/DynamicCell.tsx
@@ -2533,17 +2547,9 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
   const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
   if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ jsx5(StyledStickyCell, {
-      backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
-      "data-column": cell.column.id,
-      children: cellContent
-    });
+    return /* @__PURE__ */ jsx5(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
   }
-  return /* @__PURE__ */ jsx5(StyledCell, {
-    "data-column": cell.column.id,
-    backgroundColor: highlight ? "#d5eaf4" : void 0,
-    children: cellContent
-  });
+  return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
@@ -2595,21 +2601,9 @@ var HeaderCell = ({ header, table }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ jsx6(StickyCell2, {
-      ...cellProps,
-      children: /* @__PURE__ */ jsx6(HeaderContent, {
-        header,
-        table
-      })
-    }, header.id);
+    return /* @__PURE__ */ jsx6(StickyCell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ jsx6(HeaderContent, { header, table }) }), header.id);
   }
-  return /* @__PURE__ */ jsx6(Cell2, {
-    ...cellProps,
-    children: /* @__PURE__ */ jsx6(HeaderContent, {
-      header,
-      table
-    })
-  }, header.id);
+  return /* @__PURE__ */ jsx6(Cell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ jsx6(HeaderContent, { header, table }) }), header.id);
 };
 var HeaderDiv = styled6.div`
   display: flex;
@@ -2618,23 +2612,19 @@ var HeaderDiv = styled6.div`
   z-index: 5;
 `;
 function HeaderContent({ header, table }) {
+  var _a;
   if (header.isPlaceholder)
     return null;
-  return /* @__PURE__ */ jsxs3(HeaderDiv, {
-    children: [
-      flexRender2(header.column.columnDef.header, header.getContext()),
+  return /* @__PURE__ */ jsxs3(HeaderDiv, { children: [
+    flexRender2(header.column.columnDef.header, header.getContext()),
+    (_a = {
+      asc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_up }),
+      desc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down }),
+      none: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down })
+    }[header.column.getIsSorted()]) != null ? _a : null,
+    table.options.enableColumnResizing && /* @__PURE__ */ jsx6(
+      "div",
       {
-        asc: /* @__PURE__ */ jsx6(Icon3, {
-          data: arrow_drop_up
-        }),
-        desc: /* @__PURE__ */ jsx6(Icon3, {
-          data: arrow_drop_down
-        }),
-        none: /* @__PURE__ */ jsx6(Icon3, {
-          data: arrow_drop_down
-        })
-      }[header.column.getIsSorted()] ?? null,
-      table.options.enableColumnResizing && /* @__PURE__ */ jsx6("div", {
         onMouseDown: header.getResizeHandler(),
         onTouchStart: header.getResizeHandler(),
         onClick: (e) => e.stopPropagation(),
@@ -2642,9 +2632,9 @@ function HeaderContent({ header, table }) {
         style: {
           transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
         }
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 function getSort({ column }) {
   if (!column.getCanSort())
@@ -2676,29 +2666,22 @@ var truncateStyle = {
   textOverflow: "ellipsis"
 };
 var TypographyCustom = (props) => {
-  const { truncate, enableShowAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
+  const _a = props, { truncate, enableShowAllOnHover, style: styleFromProps } = _a, edsTypographyProps = __objRest(_a, ["truncate", "enableShowAllOnHover", "style"]);
   if (enableShowAllOnHover)
-    return /* @__PURE__ */ jsx7(HoverCapture, {
-      children: /* @__PURE__ */ jsx7(EdsTypography, {
-        ...edsTypographyProps,
-        style: {
-          ...styleFromProps,
-          ...truncateStyle
-        }
+    return /* @__PURE__ */ jsx7(HoverCapture, { children: /* @__PURE__ */ jsx7(
+      EdsTypography,
+      __spreadProps(__spreadValues({}, edsTypographyProps), {
+        style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
       })
-    });
+    ) });
   if (truncate)
-    return /* @__PURE__ */ jsx7(EdsTypography, {
-      ...edsTypographyProps,
-      style: {
-        ...styleFromProps,
-        ...truncateStyle
-      }
-    });
-  return /* @__PURE__ */ jsx7(EdsTypography, {
-    ...edsTypographyProps,
-    style: styleFromProps
-  });
+    return /* @__PURE__ */ jsx7(
+      EdsTypography,
+      __spreadProps(__spreadValues({}, edsTypographyProps), {
+        style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
+      })
+    );
+  return /* @__PURE__ */ jsx7(EdsTypography, __spreadProps(__spreadValues({}, edsTypographyProps), { style: styleFromProps }));
 };
 var HoverCapture = styled7.div`
   height: ${tokens4.typography.table.cell_text.lineHeight};
@@ -2747,17 +2730,18 @@ var CellWrapper = styled8(TypographyCustom)`
     `}
 `;
 function HierarchyCell(cell, options = {}) {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs4(CellWrapper, {
-    depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
-    expanded: cell.row.getIsExpanded(),
-    children: [
-      /* @__PURE__ */ jsx8("span", {
-        className: "--divider"
-      }),
-      ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
-    ]
-  });
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ jsxs4(
+    CellWrapper,
+    {
+      depth: (_b = (_a = options.getRowDepth) == null ? void 0 : _a.call(options)) != null ? _b : cell.row.depth,
+      expanded: cell.row.getIsExpanded(),
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "--divider" }),
+        (_d = (_c = options.getDisplayName) == null ? void 0 : _c.call(options)) != null ? _d : cell.getValue()
+      ]
+    }
+  );
 }
 
 // src/cells/PopoverCell.tsx
@@ -2765,21 +2749,24 @@ import { Popover, Typography } from "@equinor/eds-core-react";
 import { useRef, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function PopoverCell(props) {
+  var _a, _b;
   const [open, setOpen] = useState2(false);
   const anchorRef = useRef(null);
   const handleClick = () => setOpen(!open);
   const handleClose = () => setOpen(false);
-  return /* @__PURE__ */ jsxs5("div", {
-    style: { position: "relative" },
-    ref: anchorRef,
-    children: [
-      /* @__PURE__ */ jsx9(TypographyCustom, {
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, ref: anchorRef, children: [
+    /* @__PURE__ */ jsx9(
+      TypographyCustom,
+      {
         onClick: stopPropagation(handleClick),
         style: { cursor: "pointer" },
         truncate: true,
-        children: String(props.value)
-      }),
-      /* @__PURE__ */ jsxs5(Popover, {
+        children: String((_a = props.value) != null ? _a : "")
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      Popover,
+      {
         id: props.id,
         open,
         "aria-controls": "expand cell",
@@ -2787,20 +2774,12 @@ function PopoverCell(props) {
         onClose: handleClose,
         placement: "bottom",
         children: [
-          props.title && /* @__PURE__ */ jsx9(Popover.Title, {
-            children: /* @__PURE__ */ jsx9(Popover.Header, {
-              children: props.title
-            })
-          }),
-          /* @__PURE__ */ jsx9(Popover.Content, {
-            children: /* @__PURE__ */ jsx9(Typography, {
-              children: String(props.value)
-            })
-          })
+          props.title && /* @__PURE__ */ jsx9(Popover.Title, { children: /* @__PURE__ */ jsx9(Popover.Header, { children: props.title }) }),
+          /* @__PURE__ */ jsx9(Popover.Content, { children: /* @__PURE__ */ jsx9(Typography, { children: String((_b = props.value) != null ? _b : "") }) })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 
 // src/cells/SelectColumnDef.tsx
@@ -2820,44 +2799,46 @@ function SelectColumnDef(props) {
   return {
     id: "select",
     size: props.includeExpansionButton ? 96 : 48,
-    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx10(CellWrapper2, {
-      children: /* @__PURE__ */ jsx10(Checkbox2, {
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx10(CellWrapper2, { children: /* @__PURE__ */ jsx10(
+      Checkbox2,
+      {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
         onChange: table.getIsSomeRowsSelected() ? () => table.toggleAllRowsSelected(false) : table.getToggleAllRowsSelectedHandler()
-      })
-    }) : null,
+      }
+    ) }) : null,
     cell: ({ table, row }) => {
       const paddingLeft = "0px";
-      return /* @__PURE__ */ jsx10(CellWrapper2, {
-        paddingLeft,
-        rowDepth: row.depth,
-        children: /* @__PURE__ */ jsxs6(Fragment, {
-          children: [
-            selectionMode === "single" ? /* @__PURE__ */ jsx10(Radio, {
-              checked: row.getIsSelected(),
-              "aria-label": `Select row ${row.id}`,
-              onChange: stopPropagation(row.getToggleSelectedHandler())
-            }) : /* @__PURE__ */ jsx10(Checkbox2, {
-              checked: row.getIsSelected(),
-              indeterminate: row.getIsSomeSelected(),
-              "aria-label": `Select row ${row.id}`,
-              onChange: stopPropagation(row.getToggleSelectedHandler())
-            }),
-            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx10(Button2, {
-              variant: "ghost_icon",
-              color: "secondary",
-              "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
-              onClick: stopPropagation(row.getToggleExpandedHandler()),
-              style: { cursor: "pointer" },
-              children: /* @__PURE__ */ jsx10(Icon4, {
-                data: row.getIsExpanded() ? chevron_up : chevron_down
-              })
-            })
-          ]
-        })
-      });
+      return /* @__PURE__ */ jsx10(CellWrapper2, { paddingLeft, rowDepth: row.depth, children: /* @__PURE__ */ jsxs6(Fragment, { children: [
+        selectionMode === "single" ? /* @__PURE__ */ jsx10(
+          Radio,
+          {
+            checked: row.getIsSelected(),
+            "aria-label": `Select row ${row.id}`,
+            onChange: stopPropagation(row.getToggleSelectedHandler())
+          }
+        ) : /* @__PURE__ */ jsx10(
+          Checkbox2,
+          {
+            checked: row.getIsSelected(),
+            indeterminate: row.getIsSomeSelected(),
+            "aria-label": `Select row ${row.id}`,
+            onChange: stopPropagation(row.getToggleSelectedHandler())
+          }
+        ),
+        row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx10(
+          Button2,
+          {
+            variant: "ghost_icon",
+            color: "secondary",
+            "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
+            onClick: stopPropagation(row.getToggleExpandedHandler()),
+            style: { cursor: "pointer" },
+            children: /* @__PURE__ */ jsx10(Icon4, { data: row.getIsExpanded() ? chevron_up : chevron_down })
+          }
+        )
+      ] }) });
     }
   };
 }
@@ -2914,93 +2895,76 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = useState3(false);
   const referenceElement = useRef2(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ jsxs7(Fragment2, {
-    children: [
-      /* @__PURE__ */ jsx11(Tooltip, {
-        title: "Select columns",
-        placement: "left",
-        children: /* @__PURE__ */ jsx11(Button3, {
-          "aria-haspopup": true,
-          id: "column-select-anchor",
-          "aria-controls": "column-select-popover",
-          "aria-expanded": isOpen,
-          ref: referenceElement,
-          variant: "ghost_icon",
-          onClick: () => setIsOpen(true),
-          children: /* @__PURE__ */ jsx11(Icon5, {
-            name: "view_column",
-            data: view_column
-          })
-        })
-      }),
-      /* @__PURE__ */ jsxs7(Popover2, {
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx11(Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ jsx11(
+      Button3,
+      {
+        "aria-haspopup": true,
+        id: "column-select-anchor",
+        "aria-controls": "column-select-popover",
+        "aria-expanded": isOpen,
+        ref: referenceElement,
+        variant: "ghost_icon",
+        onClick: () => setIsOpen(true),
+        children: /* @__PURE__ */ jsx11(Icon5, { name: "view_column", data: view_column })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs7(
+      Popover2,
+      {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ jsxs7(Popover2.Header, {
-            children: [
-              /* @__PURE__ */ jsx11(Popover2.Title, {
-                children: "Column settings"
-              }),
-              /* @__PURE__ */ jsx11(Button3, {
+          /* @__PURE__ */ jsxs7(Popover2.Header, { children: [
+            /* @__PURE__ */ jsx11(Popover2.Title, { children: "Column settings" }),
+            /* @__PURE__ */ jsx11(
+              Button3,
+              {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx11(Icon5, {
-                  name: "close",
-                  data: close,
-                  size: 24
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs7(Popover2.Content, {
-            children: [
-              /* @__PURE__ */ jsx11(ColumnSelectContent, {
-                children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx11(Checkbox3, {
-                    checked: column.getIsVisible(),
-                    label: getColumnHeader(column),
-                    onChange: column.getToggleVisibilityHandler()
-                  }, column.id);
-                })
-              }),
-              /* @__PURE__ */ jsx11(Divider, {
-                variant: "small"
-              }),
-              /* @__PURE__ */ jsx11(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx11(Button3, {
-                  color: "secondary",
-                  variant: "ghost",
-                  disabled: table.getIsAllColumnsVisible(),
-                  onClick: () => table.toggleAllColumnsVisible(true),
-                  children: "Reset to default"
-                })
-              })
-            ]
-          })
+                children: /* @__PURE__ */ jsx11(Icon5, { name: "close", data: close, size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7(Popover2.Content, { children: [
+            /* @__PURE__ */ jsx11(ColumnSelectContent, { children: selectableColumns.map((column) => {
+              return /* @__PURE__ */ jsx11(
+                Checkbox3,
+                {
+                  checked: column.getIsVisible(),
+                  label: getColumnHeader(column),
+                  onChange: column.getToggleVisibilityHandler()
+                },
+                column.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx11(Divider, { variant: "small" }),
+            /* @__PURE__ */ jsx11(ActionsWrapper, { children: /* @__PURE__ */ jsx11(
+              Button3,
+              {
+                color: "secondary",
+                variant: "ghost",
+                disabled: table.getIsAllColumnsVisible(),
+                onClick: () => table.toggleAllColumnsVisible(true),
+                children: "Reset to default"
+              }
+            ) })
+          ] })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 
 // src/DataTable/components/TableHeader.tsx
 import { Table as Table4 } from "@equinor/eds-core-react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ jsx12(Table4.Head, {
-    sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, {
-      children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, {
-        header,
-        table
-      }, header.id))
-    }, headerGroup.id))
-  });
+  return /* @__PURE__ */ jsx12(Table4.Head, { sticky, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
 }
 
 // src/DataTable/DataTable.tsx
@@ -3026,18 +2990,7 @@ var PlaceholderTextWrapper = styled11.div`
   justify-content: center;
 `;
 function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ jsx13(Table5.Row, {
-    children: /* @__PURE__ */ jsx13(Table5.Cell, {
-      colSpan: 100,
-      children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, {
-        children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, {
-          color: "primary"
-        }) : /* @__PURE__ */ jsx13(Typography2, {
-          children: "No data available"
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx13(Table5.Row, { children: /* @__PURE__ */ jsx13(Table5.Cell, { colSpan: 100, children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, { color: "primary" }) : /* @__PURE__ */ jsx13(Typography2, { children: "No data available" }) }) }) });
 }
 
 // src/DataTable/components/TableBody.tsx
@@ -3062,29 +3015,36 @@ function TableRow({
 }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ jsx14(StyledTableRow, {
-    active: row.getIsSelected(),
-    "data-index": index,
-    ref: measureElement,
-    style: {
-      cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
-      backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
-    },
-    onClick: () => {
-      var _a2;
-      return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row);
-    },
-    onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
-    onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
-    children: row.getVisibleCells().map((cell) => {
-      var _a2;
-      return /* @__PURE__ */ jsx14(DynamicCell, {
-        cell,
-        getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
-        highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
-      }, cell.id);
-    })
-  });
+  const tableRowContent = /* @__PURE__ */ jsx14(
+    StyledTableRow,
+    {
+      active: row.getIsSelected(),
+      "data-index": index,
+      ref: measureElement,
+      style: {
+        cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
+        backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
+      },
+      onClick: () => {
+        var _a2;
+        return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row);
+      },
+      onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
+      onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
+      children: row.getVisibleCells().map((cell) => {
+        var _a2;
+        return /* @__PURE__ */ jsx14(
+          DynamicCell,
+          {
+            cell,
+            getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
+            highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
+          },
+          cell.id
+        );
+      })
+    }
+  );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
 var StyledTableRow = styled13(Table7.Row)`
@@ -3110,27 +3070,11 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs8(EdsTable2, {
-    children: [
-      /* @__PURE__ */ jsx15(EdsTable2.Caption, {
-        hidden: true,
-        children: tableCaption
-      }),
-      /* @__PURE__ */ jsx15(TableHeader, {
-        sticky: stickyHeader,
-        table
-      }),
-      /* @__PURE__ */ jsx15(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx15(TableRow, {
-          row,
-          rowConfig,
-          cellConfig
-        }, row.id)) : /* @__PURE__ */ jsx15(PlaceholderRow, {
-          isLoading
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs8(EdsTable2, { children: [
+    /* @__PURE__ */ jsx15(EdsTable2.Caption, { hidden: true, children: tableCaption }),
+    /* @__PURE__ */ jsx15(TableHeader, { sticky: stickyHeader, table }),
+    /* @__PURE__ */ jsx15(TableBody, { children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx15(TableRow, { row, rowConfig, cellConfig }, row.id)) : /* @__PURE__ */ jsx15(PlaceholderRow, { isLoading }) })
+  ] });
 }
 
 // src/DataTable/components/DataTableHeader.tsx
@@ -3151,13 +3095,18 @@ var CloseButton = styled14(Button4)`
   width: 24px;
   height: 24px;
 `;
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  icon,
-  debounce = 500,
-  ...props
-}) {
+function DebouncedInput(_a) {
+  var _b = _a, {
+    value: initialValue,
+    onChange,
+    icon,
+    debounce = 500
+  } = _b, props = __objRest(_b, [
+    "value",
+    "onChange",
+    "icon",
+    "debounce"
+  ]);
   const [value, setValue] = useState4(initialValue);
   useEffect(() => {
     setValue(initialValue);
@@ -3168,30 +3117,15 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx16(Wrapper3, {
-    children: /* @__PURE__ */ jsx16(Input, {
-      ...props,
+  return /* @__PURE__ */ jsx16(Wrapper3, { children: /* @__PURE__ */ jsx16(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx16(Icon6, {
-        name: icon.name,
-        data: icon,
-        size: 18
-      }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx16(Tooltip2, {
-        title: "Clear input",
-        children: /* @__PURE__ */ jsx16(CloseButton, {
-          variant: "ghost_icon",
-          onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx16(Icon6, {
-            name: close2.name,
-            data: close2,
-            size: 18
-          })
-        })
-      }),
+      leftAdornments: icon && /* @__PURE__ */ jsx16(Icon6, { name: icon.name, data: icon, size: 18 }),
+      rightAdornments: !!value && /* @__PURE__ */ jsx16(Tooltip2, { title: "Clear input", children: /* @__PURE__ */ jsx16(CloseButton, { variant: "ghost_icon", onClick: () => setValue(""), children: /* @__PURE__ */ jsx16(Icon6, { name: close2.name, data: close2, size: 18 }) }) }),
       onChange: (event) => setValue(event.target.value)
     })
-  });
+  ) });
 }
 
 // src/DataTable/filters/functions.ts
@@ -3225,49 +3159,33 @@ function TableBanner({
   tableCaption,
   globalFilter
 }) {
-  var _a;
-  return /* @__PURE__ */ jsxs9(TableBannerWrapper, {
-    className: "--table-caption",
-    padding: bannerConfig == null ? void 0 : bannerConfig.padding,
-    children: [
-      /* @__PURE__ */ jsxs9(FilterContainer, {
-        className: "--filter-container-left",
-        children: [
-          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, {
-            variant: "h3",
-            as: "h2",
-            children: tableCaption
-          }),
-          (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
-        ]
-      }),
-      /* @__PURE__ */ jsx17(FilterContainer, {
-        className: "--filter-container-right",
-        children: /* @__PURE__ */ jsxs9(Fragment3, {
-          children: [
-            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx17(DebouncedInput, {
-              value: globalFilter.state,
-              icon: search,
-              placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
-              onChange: (value) => globalFilter.onChange(String(value))
-            }),
-            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, {
-              table
-            }),
-            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", {
-              children: [
-                table.options.data.length.toLocaleString(),
-                " /",
-                " ",
-                bannerConfig.totalRowCount.toLocaleString(),
-                " rows"
-              ]
-            })
-          ]
-        })
-      })
-    ]
-  });
+  var _a, _b, _c, _d, _e;
+  return /* @__PURE__ */ jsxs9(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
+    /* @__PURE__ */ jsxs9(FilterContainer, { className: "--filter-container-left", children: [
+      (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, { variant: "h3", as: "h2", children: tableCaption }),
+      (_c = (_a = bannerConfig == null ? void 0 : bannerConfig.customActionsLeft) == null ? void 0 : _a.call(bannerConfig, table)) != null ? _c : (_b = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _b.call(bannerConfig, table)
+    ] }),
+    /* @__PURE__ */ jsx17(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      (_d = bannerConfig == null ? void 0 : bannerConfig.customActionsRight) == null ? void 0 : _d.call(bannerConfig, table),
+      (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx17(
+        DebouncedInput,
+        {
+          value: globalFilter.state,
+          icon: search,
+          placeholder: (_e = bannerConfig.globalFilterPlaceholder) != null ? _e : "Search all columns",
+          onChange: (value) => globalFilter.onChange(String(value))
+        }
+      ),
+      (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, { table }),
+      (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", { children: [
+        table.options.data.length.toLocaleString(),
+        " /",
+        " ",
+        bannerConfig.totalRowCount.toLocaleString(),
+        " rows"
+      ] })
+    ] }) })
+  ] });
 }
 
 // src/DataTable/components/VirtualTable.tsx
@@ -3280,24 +3198,24 @@ import { jsx as jsx18 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx18(Table8.Row, {
-    style: { pointerEvents: "none" },
-    children: /* @__PURE__ */ jsx18(Table8.Cell, {
-      style: { height: `${props.height}px` }
-    })
-  });
+  return /* @__PURE__ */ jsx18(Table8.Row, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx18(Table8.Cell, { style: { height: `${props.height}px` } }) });
 };
 
 // src/DataTable/components/VirtualTable.tsx
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
-function VirtualTable({
-  table,
-  rowConfig,
-  cellConfig,
-  containerRef,
-  ...props
-}) {
-  var _a, _b;
+function VirtualTable(_a) {
+  var _b = _a, {
+    table,
+    rowConfig,
+    cellConfig,
+    containerRef
+  } = _b, props = __objRest(_b, [
+    "table",
+    "rowConfig",
+    "cellConfig",
+    "containerRef"
+  ]);
+  var _a2, _b2;
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
@@ -3307,42 +3225,30 @@ function VirtualTable({
     overscan: 20
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
-  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(Table9, {
-    children: [
-      /* @__PURE__ */ jsx19(Table9.Caption, {
-        hidden: true,
-        children: props.tableCaption
-      }),
-      /* @__PURE__ */ jsx19(TableHeader, {
-        sticky: props.stickyHeader,
-        table
-      }),
-      /* @__PURE__ */ jsxs10(TableBody, {
-        children: [
-          /* @__PURE__ */ jsx19(PaddingRow, {
-            height: paddingTop
-          }),
-          rows.length ? virtualRows.map((virtualRow) => {
-            const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx19(TableRow, {
-              row,
-              rowConfig,
-              cellConfig,
-              index: virtualRow.index,
-              measureElement: rowVirtualizer.measureElement
-            }, row.id);
-          }) : /* @__PURE__ */ jsx19(PlaceholderRow, {
-            isLoading: props.isLoading
-          }),
-          /* @__PURE__ */ jsx19(PaddingRow, {
-            height: paddingBottom
-          })
-        ]
-      })
-    ]
-  });
+  const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
+  return /* @__PURE__ */ jsxs10(Table9, { children: [
+    /* @__PURE__ */ jsx19(Table9.Caption, { hidden: true, children: props.tableCaption }),
+    /* @__PURE__ */ jsx19(TableHeader, { sticky: props.stickyHeader, table }),
+    /* @__PURE__ */ jsxs10(TableBody, { children: [
+      /* @__PURE__ */ jsx19(PaddingRow, { height: paddingTop }),
+      rows.length ? virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return /* @__PURE__ */ jsx19(
+          TableRow,
+          {
+            row,
+            rowConfig,
+            cellConfig,
+            index: virtualRow.index,
+            measureElement: rowVirtualizer.measureElement
+          },
+          row.id
+        );
+      }) : /* @__PURE__ */ jsx19(PlaceholderRow, { isLoading: props.isLoading }),
+      /* @__PURE__ */ jsx19(PaddingRow, { height: paddingBottom })
+    ] })
+  ] });
 }
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
@@ -3395,10 +3301,16 @@ function canUseContainStrict(height) {
   return true;
 }
 var DataTableWrapper = styled16.div`
-  width: ${(props) => props.width ?? "100%"};
+  width: ${(props) => {
+  var _a;
+  return (_a = props.width) != null ? _a : "100%";
+}};
 
   .--table-container {
-    height: ${(props) => props.height ?? "100%"};
+    height: ${(props) => {
+  var _a;
+  return (_a = props.height) != null ? _a : "100%";
+}};
     width: '100%';
     overflow: auto;
     ${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
@@ -3408,41 +3320,44 @@ var DataTableWrapper = styled16.div`
 
       // The following attribute is important for fixed column width
       // CHANGE THIS WITH CAUTION
-      table-layout: ${(props) => props.tableLayout ?? "auto"};
+      table-layout: ${(props) => {
+  var _a;
+  return (_a = props.tableLayout) != null ? _a : "auto";
+}};
     }
   }
 `;
 function DataTable(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
   const [internalColumnVisibility, setInternalColumnVisibility] = useState6({});
   const [columnVisibility, setColumnVisibility] = [
-    ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
-    ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
+    (_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
+    (_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
   ];
   const [internalGlobalFilterState, setInternalGlobalFilterState] = useState6("");
   const [globalFilterState, setGlobalFilterState] = [
-    ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
-    ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
+    (_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
+    (_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
   ];
-  const shouldEnableGlobalFilter = ((_e = props.bannerConfig) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
+  const shouldEnableGlobalFilter = ((_i = props.bannerConfig) == null ? void 0 : _i.enableGlobalFilterInput) || Boolean(props.globalFilter);
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
   const [internalSortingState, setInternalSortingState] = useState6([]);
   const [sortingState, setSortingState] = [
-    ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
-    ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
+    (_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
+    (_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
   ];
   const [internalRowSelectionState, setInternalRowSelectionState] = useState6({});
   const [rowSelectionState, setRowSelectionState] = [
-    ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
-    ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
+    (_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
+    (_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
   ];
   const [internalExpandedState, setInternalExpandedState] = useState6({});
   const [expandedState, setExpandedState] = [
-    ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
-    ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
+    (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
+    (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
   const table = useReactTable({
     columns: prependSelectColumn(columns, props.rowSelection),
@@ -3451,18 +3366,14 @@ function DataTable(props) {
     state: {
       expanded: expandedState,
       globalFilter: enableGlobalFilter(globalFilterState),
-      sorting: ((_l = props.sorting) == null ? void 0 : _l.enableSorting) ? ((_m = props.sorting) == null ? void 0 : _m.state) ?? sortingState : void 0,
+      sorting: ((_v = props.sorting) == null ? void 0 : _v.enableSorting) ? (_x = (_w = props.sorting) == null ? void 0 : _w.state) != null ? _x : sortingState : void 0,
       rowSelection: rowSelectionState,
       columnVisibility
     },
     defaultColumn: {
       cell: ({ cell }) => {
         const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
-        return /* @__PURE__ */ jsx20(TypographyCustom, {
-          truncate: truncateMode === "hover",
-          enableShowAllOnHover: true,
-          children: cell.getValue()
-        });
+        return /* @__PURE__ */ jsx20(TypographyCustom, { truncate: truncateMode === "hover", enableShowAllOnHover: true, children: cell.getValue() });
       }
     },
     enableColumnResizing: Boolean(props.columnResizing),
@@ -3470,8 +3381,8 @@ function DataTable(props) {
     enableSorting: sorting == null ? void 0 : sorting.enableSorting,
     manualSorting: sorting == null ? void 0 : sorting.manualSorting,
     enableExpanding: Boolean(props.expansion),
-    enableMultiRowSelection: ((_n = props.rowSelection) == null ? void 0 : _n.mode) === "multiple",
-    enableSubRowSelection: ((_o = props.rowSelection) == null ? void 0 : _o.mode) !== "single",
+    enableMultiRowSelection: ((_y = props.rowSelection) == null ? void 0 : _y.mode) === "multiple",
+    enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
     filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
     getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
     getCoreRowModel: getCoreRowModel(),
@@ -3479,7 +3390,7 @@ function DataTable(props) {
     getSortedRowModel: getSortedRowModel(),
     onExpandedChange: setExpandedState,
     onRowSelectionChange: setRowSelectionState,
-    onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (sorting == null ? void 0 : sorting.onChange) ?? setSortingState : void 0,
+    onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (_A = sorting == null ? void 0 : sorting.onChange) != null ? _A : setSortingState : void 0,
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
     getSubRows: props == null ? void 0 : props.getSubRows,
@@ -3490,7 +3401,7 @@ function DataTable(props) {
     if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
-  }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
+  }, [table, (_B = props.expansion) == null ? void 0 : _B.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
   const tableContainerRef = useRef3(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
@@ -3502,21 +3413,21 @@ function DataTable(props) {
     if (Boolean(tableContainerRef.current))
       forceRerender();
   }, [tableContainerRef.current === null]);
-  return /* @__PURE__ */ jsxs11(DataTableWrapper, {
-    height: props == null ? void 0 : props.height,
-    width: props == null ? void 0 : props.width,
-    tableLayout: props == null ? void 0 : props.tableLayout,
-    children: [
-      props.bannerConfig && /* @__PURE__ */ jsx20(TableBanner, {
+  return /* @__PURE__ */ jsxs11(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
+    props.bannerConfig && /* @__PURE__ */ jsx20(
+      TableBanner,
+      {
         table,
         bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
-      }),
-      /* @__PURE__ */ jsx20("div", {
-        ...props.tableContainerProps,
-        className: "--table-container " + (((_q = props.tableContainerProps) == null ? void 0 : _q.className) ?? ""),
-        onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      "div",
+      __spreadProps(__spreadValues({}, props.tableContainerProps), {
+        className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
+        onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
         ref: (node) => {
           var _a2;
           if (node) {
@@ -3526,25 +3437,31 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(VirtualTable, {
-          containerRef: tableContainerRef,
-          tableCaption: props.tableCaption,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: props.stickyHeader
-        }) : /* @__PURE__ */ jsx20(BasicTable, {
-          tableCaption: props.tableCaption,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: props.stickyHeader
-        })
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
+          VirtualTable,
+          {
+            containerRef: tableContainerRef,
+            tableCaption: props.tableCaption,
+            table,
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
+          }
+        ) : /* @__PURE__ */ jsx20(
+          BasicTable,
+          {
+            tableCaption: props.tableCaption,
+            table,
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
+          }
+        )
       })
-    ]
-  });
+    )
+  ] });
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
@@ -3560,16 +3477,21 @@ var formMeta = {
   _hasRemoteChange: false
 };
 function useEditMode() {
+  var _a;
   const { watch } = useFormContext();
-  return watch("_editMode") ?? false;
+  return (_a = watch("_editMode")) != null ? _a : false;
 }
 function useHasRemoteChange() {
+  var _a;
   const { watch } = useFormContext();
-  return watch("_hasRemoteChange") ?? false;
+  return (_a = watch("_hasRemoteChange")) != null ? _a : false;
 }
 function useGetIsNew() {
   const { getValues } = useFormContext();
-  return () => getValues("_isNew") ?? false;
+  return () => {
+    var _a;
+    return (_a = getValues("_isNew")) != null ? _a : false;
+  };
 }
 function useSetFormMeta() {
   const { setValue } = useFormContext();
@@ -3582,30 +3504,51 @@ function removeFormMeta(withFormMeta) {
   return (0, import_omit.default)(withFormMeta, Object.keys(formMeta));
 }
 function addFormMeta(withoutFormMeta) {
-  return { ...formMeta, ...withoutFormMeta };
+  return __spreadValues(__spreadValues({}, formMeta), withoutFormMeta);
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-function EditableCheckboxCell(context) {
+function EditableCheckboxCell(_a) {
+  var _b = _a, {
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "onChange"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx21(Checkbox4, {
-      enterKeyHint: "next",
-      "aria-label": "readonly",
-      readOnly: true,
-      checked: context.getValue(),
-      disabled: true
-    });
-  return /* @__PURE__ */ jsx21(Controller, {
-    name: context.column.id,
-    render: ({ field: { value, ...field } }) => /* @__PURE__ */ jsx21(Checkbox4, {
-      enterKeyHint: "send",
-      "aria-label": "editable",
-      checked: value,
-      ...field
-    })
-  });
+    return /* @__PURE__ */ jsx21(
+      Checkbox4,
+      {
+        enterKeyHint: "next",
+        "aria-label": "readonly",
+        readOnly: true,
+        checked: context.getValue(),
+        disabled: true
+      }
+    );
+  return /* @__PURE__ */ jsx21(
+    Controller,
+    {
+      name: context.column.id,
+      render: (_a2) => {
+        var { field: _b2 } = _a2, _c = _b2, { value, onChange } = _c, field = __objRest(_c, ["value", "onChange"]);
+        return /* @__PURE__ */ jsx21(
+          Checkbox4,
+          __spreadProps(__spreadValues({
+            enterKeyHint: "send",
+            "aria-label": "editable",
+            checked: value
+          }, field), {
+            onChange: (e) => {
+              onChange(e);
+              onChangeFromProps == null ? void 0 : onChangeFromProps(e.target.checked);
+            }
+          })
+        );
+      }
+    }
+  );
 }
 
 // src/form-cells/EditableDateCell.tsx
@@ -3627,19 +3570,13 @@ function getHelperTextProps({
     return {
       variant: "error",
       helperText: error.message,
-      helperIcon: /* @__PURE__ */ jsx22(Icon7, {
-        data: error_filled,
-        size: 16
-      })
+      helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: error_filled, size: 16 })
     };
   if (warning)
     return {
       variant: "warning",
       helperText: warning.message,
-      helperIcon: /* @__PURE__ */ jsx22(Icon7, {
-        data: warning_filled,
-        size: 16
-      })
+      helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: warning_filled, size: 16 })
     };
   return {
     helperText,
@@ -3655,31 +3592,50 @@ function stopPropagation2(handler) {
 
 // src/form-cells/EditableDateCell.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
-function EditableDateCell(props) {
-  const { dateStringFormatter, ...context } = props;
+function EditableDateCell(_a) {
+  var _b = _a, {
+    dateStringFormatter,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "dateStringFormatter",
+    "error",
+    "onChange"
+  ]);
   const rawValue = context.getValue();
   const editMode = useEditMode();
   const formattedValue = useMemo(
-    () => (dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) ?? rawValue,
+    () => {
+      var _a2;
+      return (_a2 = dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) != null ? _a2 : rawValue;
+    },
     [rawValue, dateStringFormatter]
   );
   if (!editMode)
-    return /* @__PURE__ */ jsx23(TypographyCustom, {
-      truncate: true,
-      children: formattedValue
-    });
-  return /* @__PURE__ */ jsx23(Controller2, {
-    name: context.column.id,
-    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx23(InlineTextField, {
-      id: context.column.id,
-      type: "date",
-      autoComplete: "none",
-      value: value ? parseISODate(value) : "",
-      onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : ""),
-      ...getHelperTextProps({ error }),
-      ...field
-    })
-  });
+    return /* @__PURE__ */ jsx23(TypographyCustom, { truncate: true, children: formattedValue });
+  return /* @__PURE__ */ jsx23(
+    Controller2,
+    {
+      name: context.column.id,
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsx23(
+          InlineTextField,
+          __spreadValues(__spreadValues({
+            id: context.column.id,
+            type: "date",
+            autoComplete: "none",
+            value: value ? parseISODate(value) : "",
+            onChange: (e) => {
+              const newDateString = e.target.value ? parseISODate(e.target.value) : "";
+              onChange(newDateString);
+              onChangeFromProps == null ? void 0 : onChangeFromProps(newDateString);
+            }
+          }, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })), field)
+        );
+      }
+    }
+  );
 }
 function parseISODate(dateString) {
   const date = new Date(dateString);
@@ -3713,65 +3669,134 @@ var InlineTextField = styled17(TextField)`
 // src/form-cells/EditableDropdownSingleCell.tsx
 import { Autocomplete } from "@equinor/eds-core-react";
 import { Controller as Controller3 } from "react-hook-form";
-import { jsx as jsx24 } from "react/jsx-runtime";
+
+// src/form-cells/FormHelperText.tsx
+import { Typography as Typography4 } from "@equinor/eds-core-react";
+import { tokens as tokens6 } from "@equinor/eds-tokens";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var colors = {
+  error: tokens6.colors.interactive.danger__text.hex,
+  warning: tokens6.colors.interactive.warning__text.hex,
+  success: tokens6.colors.interactive.success__text.hex
+};
+function HelperText({ helperText, variant, helperIcon }) {
+  return /* @__PURE__ */ jsx24(Fragment4, { children: helperText && /* @__PURE__ */ jsx24("div", { style: { marginTop: "8px", marginLeft: "8px" }, children: /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        marginTop: "8px",
+        color: variant ? colors[variant] : "inherit"
+      },
+      children: [
+        /* @__PURE__ */ jsx24("span", { style: { flexShrink: 0 }, children: helperIcon }),
+        /* @__PURE__ */ jsx24(
+          Typography4,
+          {
+            style: {
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              lineHeight: "1.333em",
+              letterSpacing: "0.013em",
+              textAlign: "left",
+              margin: "0 0 0 8px",
+              color: "inherit"
+            },
+            children: helperText
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/form-cells/EditableDropdownSingleCell.tsx
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildEmptyOption() {
   return { label: "", value: "" };
 }
-function EditableDropdownSingleCell(props) {
-  const { options, ...context } = props;
+function EditableDropdownSingleCell(_a) {
+  var _b = _a, {
+    options,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "options",
+    "error",
+    "onChange"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx24(TypographyCustom, {
-      truncate: true,
-      children: context.getValue()
-    });
-  return /* @__PURE__ */ jsx24(Controller3, {
-    name: context.column.id,
-    render: ({ field: { value, onChange, ...field } }) => {
-      const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption();
-      return /* @__PURE__ */ jsx24(Autocomplete, {
-        label: "",
-        selectedOptions: selectedOption && [selectedOption],
-        options,
-        optionLabel: (option) => (option == null ? void 0 : option.label) ?? "",
-        "aria-required": true,
-        hideClearButton: true,
-        "aria-autocomplete": "none",
-        onOptionsChange: (changes) => {
-          const [change] = changes.selectedItems;
-          onChange(change == null ? void 0 : change.value);
-        },
-        ...field
-      });
+    return /* @__PURE__ */ jsx25(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ jsx25(
+    Controller3,
+    {
+      name: context.column.id,
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]), { fieldState: { error } } = _b2;
+        var _a3;
+        const selectedOption = (_a3 = options.find((option) => option.value === value)) != null ? _a3 : buildEmptyOption();
+        return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+          /* @__PURE__ */ jsx25(
+            Autocomplete,
+            __spreadValues({
+              label: "",
+              selectedOptions: selectedOption && [selectedOption],
+              options,
+              optionLabel: (option) => {
+                var _a4;
+                return (_a4 = option == null ? void 0 : option.label) != null ? _a4 : "";
+              },
+              "aria-required": true,
+              hideClearButton: true,
+              "aria-autocomplete": "none",
+              onOptionsChange: (changes) => {
+                const [change] = changes.selectedItems;
+                onChange(change == null ? void 0 : change.value);
+                onChangeFromProps == null ? void 0 : onChangeFromProps(change);
+              }
+            }, field)
+          ),
+          /* @__PURE__ */ jsx25(HelperText, __spreadValues({}, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })))
+        ] });
+      }
     }
-  });
+  );
 }
 
 // src/form-cells/EditableNumberCell.tsx
 import { TextField as TextField2 } from "@equinor/eds-core-react";
 import { Controller as Controller4 } from "react-hook-form";
 import styled18 from "styled-components";
-import { Fragment as Fragment4, jsx as jsx25 } from "react/jsx-runtime";
-function EditableNumberCell(context) {
+import { Fragment as Fragment6, jsx as jsx26 } from "react/jsx-runtime";
+function EditableNumberCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx25(TypographyCustom, {
-      truncate: true,
-      children: context.getValue()
-    });
-  return /* @__PURE__ */ jsx25(Controller4, {
-    name: context.column.id,
-    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx25(Fragment4, {
-      children: /* @__PURE__ */ jsx25(InlineTextField2, {
-        id: context.column.id,
-        type: "number",
-        autoComplete: "none",
-        onChange: (e) => onChange(e.target.valueAsNumber),
-        ...field,
-        ...getHelperTextProps({ error })
-      })
-    })
-  });
+    return /* @__PURE__ */ jsx26(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ jsx26(
+    Controller4,
+    {
+      name: context.column.id,
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsx26(Fragment6, { children: /* @__PURE__ */ jsx26(
+          InlineTextField2,
+          __spreadValues(__spreadValues({
+            id: context.column.id,
+            type: "number",
+            autoComplete: "none",
+            onChange: (e) => onChange(e.target.valueAsNumber)
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
+        ) });
+      }
+    }
+  );
 }
 var InlineTextField2 = styled18(TextField2)`
   /* 
@@ -3802,105 +3827,114 @@ import { arrow_up } from "@equinor/eds-icons";
 import { useState as useState7 } from "react";
 import { Controller as Controller5 } from "react-hook-form";
 import styled19 from "styled-components";
-import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-function EditableTextAreaCell(props) {
-  const { title, ...context } = props;
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+function EditableTextAreaCell(_a) {
+  var _b = _a, {
+    title,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "title",
+    "error",
+    "onChange"
+  ]);
   const [textareaValue, setTextareaValue] = useState7(context.getValue());
   const [open, setOpen] = useState7(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)
-    return /* @__PURE__ */ jsx26(PopoverCell, {
-      id: name + "popover",
-      value: context.getValue(),
-      title
-    });
+    return /* @__PURE__ */ jsx27(PopoverCell, { id: name + "popover", value: context.getValue(), title });
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
-  return /* @__PURE__ */ jsx26(Controller5, {
-    name,
-    render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsxs12(Fragment5, {
-      children: [
-        /* @__PURE__ */ jsxs12("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            position: "relative"
-          },
-          children: [
-            /* @__PURE__ */ jsx26(StyledTextField, {
-              id: field.name,
-              onChange,
-              ref,
-              ...field,
-              ...getHelperTextProps({ error })
-            }),
-            /* @__PURE__ */ jsx26(IconButton, {
-              variant: "ghost_icon",
-              onClick: stopPropagation2(openDialog),
-              children: /* @__PURE__ */ jsx26(Icon8, {
-                data: arrow_up,
-                size: 24,
-                style: { transform: "rotateZ(45deg)" }
-              })
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs12(EDS, {
-          open,
-          onClose: () => {
-            closeDialog();
-            onChange(textareaValue);
-          },
-          isDismissable: true,
-          style: { width: "min(50rem, calc(100vw - 4rem))" },
-          children: [
-            /* @__PURE__ */ jsx26(EDS.Header, {
-              children: /* @__PURE__ */ jsx26(EDS.Title, {
-                children: title
-              })
-            }),
-            /* @__PURE__ */ jsx26(EDS.Content, {
-              children: /* @__PURE__ */ jsx26(TextField3, {
-                style: {
-                  maxWidth: "100%",
-                  marginTop: "1rem"
-                },
-                id: field.name + "modal",
-                multiline: true,
-                rows: 8,
-                name: field.name + "modal",
-                value: textareaValue,
-                onChange: (e) => {
-                  setTextareaValue(e.target.value);
-                }
-              })
-            }),
-            /* @__PURE__ */ jsxs12(EDS.Actions, {
-              style: { display: "flex", gap: "1rem" },
+  return /* @__PURE__ */ jsx27(
+    Controller5,
+    {
+      name,
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange, ref } = _d, field = __objRest(_d, ["onChange", "ref"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+          /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                position: "relative"
+              },
               children: [
-                /* @__PURE__ */ jsx26(Button5, {
-                  onClick: () => {
-                    closeDialog();
-                    onChange(textareaValue);
-                  },
-                  children: "Submit"
-                }),
-                /* @__PURE__ */ jsx26(Button5, {
-                  variant: "ghost",
-                  onClick: () => {
-                    closeDialog();
-                    setTextareaValue(context.getValue());
-                  },
-                  children: "Cancel"
-                })
+                /* @__PURE__ */ jsx27(
+                  StyledTextField,
+                  __spreadValues(__spreadValues({
+                    id: field.name,
+                    onChange,
+                    ref
+                  }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
+                ),
+                /* @__PURE__ */ jsx27(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ jsx27(Icon8, { data: arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
               ]
-            })
-          ]
-        })
-      ]
-    })
-  });
+            }
+          ),
+          /* @__PURE__ */ jsxs14(
+            EDS,
+            {
+              open,
+              onClose: () => {
+                closeDialog();
+                onChange(textareaValue);
+                onChangeFromProps == null ? void 0 : onChangeFromProps(textareaValue);
+              },
+              isDismissable: true,
+              style: { width: "min(50rem, calc(100vw - 4rem))" },
+              children: [
+                /* @__PURE__ */ jsx27(EDS.Header, { children: /* @__PURE__ */ jsx27(EDS.Title, { children: title }) }),
+                /* @__PURE__ */ jsx27(EDS.Content, { children: /* @__PURE__ */ jsx27(
+                  TextField3,
+                  {
+                    style: {
+                      maxWidth: "100%",
+                      marginTop: "1rem"
+                    },
+                    id: field.name + "modal",
+                    multiline: true,
+                    rows: 8,
+                    name: field.name + "modal",
+                    value: textareaValue,
+                    onChange: (e) => {
+                      setTextareaValue(e.target.value);
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs14(EDS.Actions, { style: { display: "flex", gap: "1rem" }, children: [
+                  /* @__PURE__ */ jsx27(
+                    Button5,
+                    {
+                      onClick: () => {
+                        closeDialog();
+                        onChange(textareaValue);
+                        onChangeFromProps == null ? void 0 : onChangeFromProps(textareaValue);
+                      },
+                      children: "Submit"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx27(
+                    Button5,
+                    {
+                      variant: "ghost",
+                      onClick: () => {
+                        closeDialog();
+                        setTextareaValue(context.getValue());
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] });
+      }
+    }
+  );
 }
 var StyledTextField = styled19(TextField3)`
   & input {
@@ -3922,24 +3956,33 @@ var IconButton = styled19(Button5)`
 import { TextField as TextField4 } from "@equinor/eds-core-react";
 import { Controller as Controller6 } from "react-hook-form";
 import styled20 from "styled-components";
-import { jsx as jsx27 } from "react/jsx-runtime";
-function EditableTextFieldCell(context) {
+import { jsx as jsx28 } from "react/jsx-runtime";
+function EditableTextFieldCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx27(TypographyCustom, {
-      truncate: true,
-      children: context.getValue()
-    });
-  return /* @__PURE__ */ jsx27(Controller6, {
-    name: context.column.id,
-    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx27(InlineTextField3, {
-      id: context.column.id,
-      autoComplete: "none",
-      value: String(value ?? ""),
-      ...field,
-      ...getHelperTextProps({ error })
-    })
-  });
+    return /* @__PURE__ */ jsx28(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ jsx28(
+    Controller6,
+    {
+      name: context.column.id,
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsx28(
+          InlineTextField3,
+          __spreadValues(__spreadValues({
+            id: context.column.id,
+            autoComplete: "none",
+            value: String(value != null ? value : "")
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
+        );
+      }
+    }
+  );
 }
 var InlineTextField3 = styled20(TextField4)`
   /*