@equinor/apollo-components 3.1.8 → 3.2.0-beta.1

package/dist/index.js

@@ -1,10 +1,39 @@
 "use strict";
 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;
 };
@@ -21,6 +50,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
 ));
@@ -1013,7 +1046,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);
         }
       }
@@ -2337,6 +2374,7 @@ var src_exports = {};
 __export(src_exports, {
   AppShell: () => AppShell,
   AppSidebar: () => AppSidebar,
+  CheckboxCell: () => CheckboxCell,
   ChipsCell: () => ChipsCell,
   ColumnSelect: () => ColumnSelect,
   DataTable: () => DataTable,
@@ -2389,33 +2427,16 @@ var Wrapper = import_styled_components.default.div`
     max-width: 100%;
   }
 `;
-var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
-  children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.TopBar, {
-      sticky: false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.Icon, {
-            data: icon ?? import_eds_icons.apps
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-            children: title ?? "App Title"
-          })
-        ]
-      })
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-      className: "--content-wrapper",
-      children: [
-        sidebar,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-          className: "--content-outlet",
-          children
-        })
-      ]
-    })
-  ]
-});
+var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.TopBar, { sticky: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.Icon, { data: icon != null ? icon : import_eds_icons.apps }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title != null ? title : "App Title" })
+  ] }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "--content-wrapper", children: [
+    sidebar,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "--content-outlet", children })
+  ] })
+] });
 
 // src/AppShell/AppSidebar.tsx
 var import_eds_core_react2 = require("@equinor/eds-core-react");
@@ -2452,25 +2473,34 @@ var Wrapper2 = import_styled_components2.default.div`
 `;
 function AppSidebar() {
   const [collapsed, setCollapsed] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper2, {
-    collapsed,
-    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
-      className: "collapse-button-wrapper",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Button, {
-        className: "collapse-button",
-        variant: collapsed ? "ghost_icon" : "ghost",
-        onClick: () => setCollapsed(!collapsed),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, {
-            data: collapsed ? import_eds_icons2.last_page : import_eds_icons2.first_page
-          }),
-          !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
-            children: "Collapse"
-          })
-        ]
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper2, { collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "collapse-button-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_eds_core_react2.Button,
+    {
+      className: "collapse-button",
+      variant: collapsed ? "ghost_icon" : "ghost",
+      onClick: () => setCollapsed(!collapsed),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: collapsed ? import_eds_icons2.last_page : import_eds_icons2.first_page }),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Collapse" })
+      ]
+    }
+  ) }) });
+}
+
+// src/cells/CheckboxCell.tsx
+var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CheckboxCell(context) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_eds_core_react3.Checkbox,
+    {
+      enterKeyHint: "next",
+      "aria-label": "readonly",
+      readOnly: true,
+      checked: context.getValue(),
+      disabled: true
+    }
+  );
 }
 
 // src/cells/ChipsCell.tsx
@@ -2494,7 +2524,7 @@ function stopPropagation(handler) {
 }
 
 // src/cells/ChipsCell.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ChipsWrapper = import_styled_components3.default.div`
   display: flex;
   align-items: center;
@@ -2508,26 +2538,24 @@ var Chip = import_styled_components3.default.div`
   line-height: 22px;
   height: 22px;
   padding: 0 6px;
-  background-color: ${(props) => props.backgroundColor ?? import_eds_tokens2.tokens.colors.ui.background__medium.hex};
+  background-color: ${(props) => {
+  var _a;
+  return (_a = props.backgroundColor) != null ? _a : import_eds_tokens2.tokens.colors.ui.background__medium.hex;
+}};
   color: darkslategrey;
 `;
 var ChipsCell = (props) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChipsWrapper, {
-    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, {
-      backgroundColor: stringToHslColor(value),
-      children: value
-    }, value))
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChipsWrapper, { children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { backgroundColor: stringToHslColor(value), children: value }, value)) });
 };
 
 // src/cells/DynamicCell.tsx
-var import_eds_core_react4 = require("@equinor/eds-core-react");
+var import_eds_core_react5 = require("@equinor/eds-core-react");
 var import_react_table = require("@tanstack/react-table");
 var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/cells/StickyCell.tsx
-var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_eds_core_react4 = require("@equinor/eds-core-react");
 var import_styled_components4 = __toESM(require("styled-components"));
 var leftCellShadow = import_styled_components4.css`
   &:before {
@@ -2540,7 +2568,7 @@ var leftCellShadow = import_styled_components4.css`
     width: 1px;
   }
 `;
-var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
+var StickyCell = (0, import_styled_components4.default)(import_eds_core_react4.Table.Cell)`
   position: sticky;
   right: 0;
   top: 0;
@@ -2553,43 +2581,59 @@ var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
 `;
 
 // src/cells/DynamicCell.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
-var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
+var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.Table.Cell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
   const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
   if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledStickyCell, {
-      backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
-      "data-column": cell.column.id,
-      children: cellContent
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledCell, {
-    "data-column": cell.column.id,
-    backgroundColor: highlight ? "#d5eaf4" : void 0,
-    children: cellContent
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
-var import_eds_core_react5 = require("@equinor/eds-core-react");
+var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
+var import_eds_tokens3 = require("@equinor/eds-tokens");
 var import_react_table2 = require("@tanstack/react-table");
 var import_styled_components6 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components6.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  z-index: 5;
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var resizeCellStyle = import_styled_components6.css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    opacity: 0;
+    background: #aaa;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .resizer.isResizing {
+    background: ${import_eds_tokens3.tokens.colors.interactive.focus.hex};
+    opacity: 1;
+  }
+
+  &:hover .resizer {
+    opacity: 1;
+  }
+`;
+var StickyCell2 = (0, import_styled_components6.default)(StickyHeaderCell)`
+  ${resizeCellStyle}
 `;
-var HeaderCell = ({ header }) => {
+var Cell2 = (0, import_styled_components6.default)(import_eds_core_react6.Table.Cell)`
+  ${resizeCellStyle}
+`;
+var HeaderCell = ({ header, table }) => {
   var _a;
   const style = {
     width: header.column.getSize(),
@@ -2602,39 +2646,40 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StickyHeaderCell, {
-      ...cellProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderContent, {
-        header
-      })
-    }, header.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, { header, table }) }), header.id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Table.Cell, {
-    ...cellProps,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderContent, {
-      header
-    })
-  }, header.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Cell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, { header, table }) }), header.id);
 };
-function HeaderContent({ header }) {
+var HeaderDiv = import_styled_components6.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 5;
+`;
+function HeaderContent({ header, table }) {
+  var _a;
   if (header.isPlaceholder)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HeaderDiv, {
-    children: [
-      (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, { children: [
+    (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
+    (_a = {
+      asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_up }),
+      desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down }),
+      none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down })
+    }[header.column.getIsSorted()]) != null ? _a : null,
+    table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
       {
-        asc: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, {
-          data: import_eds_icons3.arrow_drop_up
-        }),
-        desc: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, {
-          data: import_eds_icons3.arrow_drop_down
-        }),
-        none: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, {
-          data: import_eds_icons3.arrow_drop_down
-        })
-      }[header.column.getIsSorted()] ?? null
-    ]
-  });
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onClick: (e) => e.stopPropagation(),
+        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+        style: {
+          transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
+        }
+      }
+    )
+  ] });
 }
 function getSort({ column }) {
   if (!column.getCanSort())
@@ -2650,46 +2695,39 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_eds_tokens5 = require("@equinor/eds-tokens");
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
-var import_eds_core_react6 = require("@equinor/eds-core-react");
-var import_eds_tokens3 = require("@equinor/eds-tokens");
+var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_tokens4 = require("@equinor/eds-tokens");
 var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var truncateStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   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__ */ (0, import_jsx_runtime6.jsx)(HoverCapture, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
-        ...edsTypographyProps,
-        style: {
-          ...styleFromProps,
-          ...truncateStyle
-        }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HoverCapture, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_eds_core_react7.Typography,
+      __spreadProps(__spreadValues({}, edsTypographyProps), {
+        style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
       })
-    });
+    ) });
   if (truncate)
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
-      ...edsTypographyProps,
-      style: {
-        ...styleFromProps,
-        ...truncateStyle
-      }
-    });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
-    ...edsTypographyProps,
-    style: styleFromProps
-  });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_eds_core_react7.Typography,
+      __spreadProps(__spreadValues({}, edsTypographyProps), {
+        style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
+      })
+    );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, __spreadProps(__spreadValues({}, edsTypographyProps), { style: styleFromProps }));
 };
 var HoverCapture = import_styled_components7.default.div`
-  height: ${import_eds_tokens3.tokens.typography.table.cell_text.lineHeight};
+  height: ${import_eds_tokens4.tokens.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2715,7 +2753,7 @@ var HoverCapture = import_styled_components7.default.div`
 `;
 
 // src/cells/HierarchyCell.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
   height: 100%;
   display: flex;
@@ -2724,50 +2762,54 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
   ${({ depth }) => depth > 0 && import_styled_components8.css`
-      border-left: 3px solid ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+      border-left: 3px solid ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
     `}
 `;
 function HierarchyCell(cell, options = {}) {
-  var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CellWrapper, {
-    depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
-    expanded: cell.row.getIsExpanded(),
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {
-        className: "--divider"
-      }),
-      ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
-    ]
-  });
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    CellWrapper,
+    {
+      depth: (_b = (_a = options.getRowDepth) == null ? void 0 : _a.call(options)) != null ? _b : cell.row.depth,
+      expanded: cell.row.getIsExpanded(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "--divider" }),
+        (_d = (_c = options.getDisplayName) == null ? void 0 : _c.call(options)) != null ? _d : cell.getValue()
+      ]
+    }
+  );
 }
 
 // src/cells/PopoverCell.tsx
-var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_core_react8 = require("@equinor/eds-core-react");
 var import_react2 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function PopoverCell(props) {
+  var _a, _b;
   const [open, setOpen] = (0, import_react2.useState)(false);
   const anchorRef = (0, import_react2.useRef)(null);
   const handleClick = () => setOpen(!open);
   const handleClose = () => setOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", {
-    style: { position: "relative" },
-    ref: anchorRef,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TypographyCustom, {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, ref: anchorRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      TypographyCustom,
+      {
         onClick: stopPropagation(handleClick),
         style: { cursor: "pointer" },
         truncate: true,
-        children: String(props.value)
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover, {
+        children: String((_a = props.value) != null ? _a : "")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      import_eds_core_react8.Popover,
+      {
         id: props.id,
         open,
         "aria-controls": "expand cell",
@@ -2775,27 +2817,19 @@ function PopoverCell(props) {
         onClose: handleClose,
         placement: "bottom",
         children: [
-          props.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Title, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Header, {
-              children: props.title
-            })
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Content, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Typography, {
-              children: String(props.value)
-            })
-          })
+          props.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Header, { children: props.title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, { children: String((_b = props.value) != null ? _b : "") }) })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 
 // src/cells/SelectColumnDef.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_styled_components9 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CellWrapper2 = import_styled_components9.default.div`
   display: flex;
   align-items: center;
@@ -2808,50 +2842,52 @@ function SelectColumnDef(props) {
   return {
     id: "select",
     size: props.includeExpansionButton ? 96 : 48,
-    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellWrapper2, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Checkbox, {
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_eds_core_react9.Checkbox,
+      {
         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__ */ (0, import_jsx_runtime9.jsx)(CellWrapper2, {
-        paddingLeft,
-        rowDepth: row.depth,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, {
-          children: [
-            selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Radio, {
-              checked: row.getIsSelected(),
-              "aria-label": `Select row ${row.id}`,
-              onChange: stopPropagation(row.getToggleSelectedHandler())
-            }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Checkbox, {
-              checked: row.getIsSelected(),
-              indeterminate: row.getIsSomeSelected(),
-              "aria-label": `Select row ${row.id}`,
-              onChange: stopPropagation(row.getToggleSelectedHandler())
-            }),
-            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Button, {
-              variant: "ghost_icon",
-              color: "secondary",
-              "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
-              onClick: stopPropagation(row.getToggleExpandedHandler()),
-              style: { cursor: "pointer" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
-                data: row.getIsExpanded() ? import_eds_icons4.chevron_up : import_eds_icons4.chevron_down
-              })
-            })
-          ]
-        })
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, { paddingLeft, rowDepth: row.depth, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_eds_core_react9.Radio,
+          {
+            checked: row.getIsSelected(),
+            "aria-label": `Select row ${row.id}`,
+            onChange: stopPropagation(row.getToggleSelectedHandler())
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_eds_core_react9.Checkbox,
+          {
+            checked: row.getIsSelected(),
+            indeterminate: row.getIsSomeSelected(),
+            "aria-label": `Select row ${row.id}`,
+            onChange: stopPropagation(row.getToggleSelectedHandler())
+          }
+        ),
+        row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_eds_core_react9.Button,
+          {
+            variant: "ghost_icon",
+            color: "secondary",
+            "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
+            onClick: stopPropagation(row.getToggleExpandedHandler()),
+            style: { cursor: "pointer" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, { data: row.getIsExpanded() ? import_eds_icons4.chevron_up : import_eds_icons4.chevron_down })
+          }
+        )
+      ] }) });
     }
   };
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
+var import_eds_core_react10 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react3 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
@@ -2886,7 +2922,7 @@ function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ColumnSelectContent = import_styled_components10.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -2902,92 +2938,76 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const referenceElement = (0, import_react3.useRef)(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Tooltip, {
-        title: "Select columns",
-        placement: "left",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
-          "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__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
-            name: "view_column",
-            data: import_eds_icons5.view_column
-          })
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover, {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_eds_core_react10.Button,
+      {
+        "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__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "view_column", data: import_eds_icons5.view_column })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_eds_core_react10.Popover,
+      {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover.Header, {
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Popover.Title, {
-                children: "Column settings"
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Header, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Popover.Title, { children: "Column settings" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_eds_core_react10.Button,
+              {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
-                  name: "close",
-                  data: import_eds_icons5.close,
-                  size: 24
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover.Content, {
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColumnSelectContent, {
-                children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Checkbox, {
-                    checked: column.getIsVisible(),
-                    label: getColumnHeader(column),
-                    onChange: column.getToggleVisibilityHandler()
-                  }, column.id);
-                })
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Divider, {
-                variant: "small"
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
-                  color: "secondary",
-                  variant: "ghost",
-                  disabled: table.getIsAllColumnsVisible(),
-                  onClick: () => table.toggleAllColumnsVisible(true),
-                  children: "Reset to default"
-                })
-              })
-            ]
-          })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "close", data: import_eds_icons5.close, size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Content, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnSelectContent, { children: selectableColumns.map((column) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_eds_core_react10.Checkbox,
+                {
+                  checked: column.getIsVisible(),
+                  label: getColumnHeader(column),
+                  onChange: column.getToggleVisibilityHandler()
+                },
+                column.id
+              );
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Divider, { variant: "small" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_eds_core_react10.Button,
+              {
+                color: "secondary",
+                variant: "ghost",
+                disabled: table.getIsAllColumnsVisible(),
+                onClick: () => table.toggleAllColumnsVisible(true),
+                children: "Reset to default"
+              }
+            ) })
+          ] })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 
 // src/DataTable/components/TableHeader.tsx
-var import_eds_core_react10 = require("@equinor/eds-core-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Head, {
-    sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
-      children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderCell, {
-        header
-      }, header.id))
-    }, headerGroup.id))
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Head, { sticky, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
 }
 
 // src/DataTable/DataTable.tsx
@@ -2996,44 +3016,33 @@ var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
-var import_eds_core_react14 = require("@equinor/eds-core-react");
+var import_eds_core_react15 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_eds_core_react12 = require("@equinor/eds-core-react");
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var PlaceholderTextWrapper = import_styled_components11.default.div`
   display: flex;
   justify-content: center;
 `;
 function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Cell, {
-      colSpan: 100,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlaceholderTextWrapper, {
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.DotProgress, {
-          color: "primary"
-        }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Typography, {
-          children: "No data available"
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, { colSpan: 100, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, { color: "primary" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, { children: "No data available" }) }) }) });
 }
 
 // src/DataTable/components/TableBody.tsx
-var import_eds_core_react12 = require("@equinor/eds-core-react");
+var import_eds_core_react13 = require("@equinor/eds-core-react");
 var import_styled_components12 = __toESM(require("styled-components"));
-var TableBody = (0, import_styled_components12.default)(import_eds_core_react12.Table.Body)`
+var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.Table.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
 `;
 
 // src/DataTable/components/TableRow.tsx
-var import_eds_core_react13 = require("@equinor/eds-core-react");
+var import_eds_core_react14 = require("@equinor/eds-core-react");
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function TableRow({
   row,
   rowConfig,
@@ -3043,32 +3052,39 @@ function TableRow({
 }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime14.jsx)(
+    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__ */ (0, import_jsx_runtime14.jsx)(
+          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 = (0, import_styled_components13.default)(import_eds_core_react13.Table.Row)`
+var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3081,7 +3097,7 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function BasicTable({
   table,
   rowConfig,
@@ -3091,54 +3107,43 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react14.Table, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Table.Caption, {
-        hidden: true,
-        children: tableCaption
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableHeader, {
-        sticky: stickyHeader,
-        table
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableRow, {
-          row,
-          rowConfig,
-          cellConfig
-        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PlaceholderRow, {
-          isLoading
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_eds_core_react15.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Table.Caption, { hidden: true, children: tableCaption }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableHeader, { sticky: stickyHeader, table }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableBody, { children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableRow, { row, rowConfig, cellConfig }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaceholderRow, { isLoading }) })
+  ] });
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react16 = require("@equinor/eds-core-react");
+var import_eds_core_react17 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
 var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
-var import_eds_core_react15 = require("@equinor/eds-core-react");
+var import_eds_core_react16 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
 var import_react4 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Wrapper3 = import_styled_components14.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components14.default)(import_eds_core_react15.Button)`
+var CloseButton = (0, import_styled_components14.default)(import_eds_core_react16.Button)`
   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] = (0, import_react4.useState)(initialValue);
   (0, import_react4.useEffect)(() => {
     setValue(initialValue);
@@ -3149,30 +3154,15 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Input, {
-      ...props,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrapper3, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_eds_core_react16.Input,
+    __spreadProps(__spreadValues({}, props), {
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Icon, {
-        name: icon.name,
-        data: icon,
-        size: 18
-      }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Tooltip, {
-        title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseButton, {
-          variant: "ghost_icon",
-          onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Icon, {
-            name: import_eds_icons6.close.name,
-            data: import_eds_icons6.close,
-            size: 18
-          })
-        })
-      }),
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, { name: icon.name, data: icon, size: 18 }),
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Tooltip, { title: "Clear input", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseButton, { variant: "ghost_icon", onClick: () => setValue(""), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, { name: import_eds_icons6.close.name, data: import_eds_icons6.close, size: 18 }) }) }),
       onChange: (event) => setValue(event.target.value)
     })
-  });
+  ) });
 }
 
 // src/DataTable/filters/functions.ts
@@ -3186,7 +3176,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TableBannerWrapper = import_styled_components15.default.div`
   display: flex;
   align-items: center;
@@ -3206,79 +3196,63 @@ function TableBanner({
   tableCaption,
   globalFilter
 }) {
-  var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TableBannerWrapper, {
-    className: "--table-caption",
-    padding: bannerConfig == null ? void 0 : bannerConfig.padding,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(FilterContainer, {
-        className: "--filter-container-left",
-        children: [
-          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Typography, {
-            variant: "h3",
-            as: "h2",
-            children: tableCaption
-          }),
-          (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
-        ]
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FilterContainer, {
-        className: "--filter-container-right",
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, {
-          children: [
-            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DebouncedInput, {
-              value: globalFilter.state,
-              icon: import_eds_icons7.search,
-              placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
-              onChange: (value) => globalFilter.onChange(String(value))
-            }),
-            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnSelect, {
-              table
-            }),
-            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", {
-              children: [
-                table.options.data.length.toLocaleString(),
-                " /",
-                " ",
-                bannerConfig.totalRowCount.toLocaleString(),
-                " rows"
-              ]
-            })
-          ]
-        })
-      })
-    ]
-  });
+  var _a, _b, _c, _d, _e;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FilterContainer, { className: "--filter-container-left", children: [
+      (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Typography, { 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__ */ (0, import_jsx_runtime17.jsx)(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      (_d = bannerConfig == null ? void 0 : bannerConfig.customActionsRight) == null ? void 0 : _d.call(bannerConfig, table),
+      (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        DebouncedInput,
+        {
+          value: globalFilter.state,
+          icon: import_eds_icons7.search,
+          placeholder: (_e = bannerConfig.globalFilterPlaceholder) != null ? _e : "Search all columns",
+          onChange: (value) => globalFilter.onChange(String(value))
+        }
+      ),
+      (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, { table }),
+      (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+        table.options.data.length.toLocaleString(),
+        " /",
+        " ",
+        bannerConfig.totalRowCount.toLocaleString(),
+        " rows"
+      ] })
+    ] }) })
+  ] });
 }
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react18 = require("@equinor/eds-core-react");
+var import_eds_core_react19 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
-var import_eds_core_react17 = require("@equinor/eds-core-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_eds_core_react18 = require("@equinor/eds-core-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Table.Row, {
-    style: { pointerEvents: "none" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Table.Cell, {
-      style: { height: `${props.height}px` }
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Row, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Cell, { style: { height: `${props.height}px` } }) });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function VirtualTable({
-  table,
-  rowConfig,
-  cellConfig,
-  containerRef,
-  ...props
-}) {
-  var _a, _b;
+var import_jsx_runtime19 = require("react/jsx-runtime");
+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 = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
@@ -3288,42 +3262,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__ */ (0, import_jsx_runtime18.jsxs)(import_eds_core_react18.Table, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Caption, {
-        hidden: true,
-        children: props.tableCaption
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHeader, {
-        sticky: props.stickyHeader,
-        table
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
-            height: paddingTop
-          }),
-          rows.length ? virtualRows.map((virtualRow) => {
-            const row = rows[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, {
-              row,
-              rowConfig,
-              cellConfig,
-              index: virtualRow.index,
-              measureElement: rowVirtualizer.measureElement
-            }, row.id);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaceholderRow, {
-            isLoading: props.isLoading
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(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__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, { hidden: true, children: props.tableCaption }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, { sticky: props.stickyHeader, table }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingTop }),
+      rows.length ? virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          TableRow,
+          {
+            row,
+            rowConfig,
+            cellConfig,
+            index: virtualRow.index,
+            measureElement: rowVirtualizer.measureElement
+          },
+          row.id
+        );
+      }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { isLoading: props.isLoading }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingBottom })
+    ] })
+  ] });
 }
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
@@ -3363,7 +3325,7 @@ function useForceRerender() {
 }
 
 // src/DataTable/DataTable.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function canUseContainStrict(height) {
   if (!height)
     return false;
@@ -3376,10 +3338,16 @@ function canUseContainStrict(height) {
   return true;
 }
 var DataTableWrapper = import_styled_components16.default.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;" : ""}
@@ -3389,41 +3357,44 @@ var DataTableWrapper = import_styled_components16.default.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] = (0, import_react7.useState)({});
   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] = (0, import_react7.useState)("");
   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] = (0, import_react7.useState)([]);
   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] = (0, import_react7.useState)({});
   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] = (0, import_react7.useState)({});
   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 = (0, import_react_table3.useReactTable)({
     columns: prependSelectColumn(columns, props.rowSelection),
@@ -3432,25 +3403,23 @@ 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__ */ (0, import_jsx_runtime19.jsx)(TypographyCustom, {
-          truncate: truncateMode === "hover",
-          enableShowAllOnHover: true,
-          children: cell.getValue()
-        });
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TypographyCustom, { truncate: truncateMode === "hover", enableShowAllOnHover: true, children: cell.getValue() });
       }
     },
+    enableColumnResizing: Boolean(props.columnResizing),
+    columnResizeMode: typeof props.columnResizing === "boolean" ? "onChange" : props.columnResizing,
     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((0, import_react_table3.getFilteredRowModel)()),
     getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
@@ -3458,7 +3427,7 @@ function DataTable(props) {
     getSortedRowModel: (0, import_react_table3.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,
@@ -3469,7 +3438,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 = (0, import_react7.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
@@ -3481,21 +3450,21 @@ function DataTable(props) {
     if (Boolean(tableContainerRef.current))
       forceRerender();
   }, [tableContainerRef.current === null]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(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__ */ (0, import_jsx_runtime19.jsx)(TableBanner, {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(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__ */ (0, import_jsx_runtime20.jsx)(
+      TableBanner,
+      {
         table,
         bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime20.jsx)(
+      "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) {
@@ -3505,29 +3474,35 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTable, {
-          containerRef: tableContainerRef,
-          tableCaption: props.tableCaption,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: props.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BasicTable, {
-          tableCaption: props.tableCaption,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: props.stickyHeader
-        })
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          VirtualTable,
+          {
+            containerRef: tableContainerRef,
+            tableCaption: props.tableCaption,
+            table,
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          BasicTable,
+          {
+            tableCaption: props.tableCaption,
+            table,
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
+          }
+        )
       })
-    ]
-  });
+    )
+  ] });
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
-var import_eds_core_react19 = require("@equinor/eds-core-react");
+var import_eds_core_react20 = require("@equinor/eds-core-react");
 var import_react_hook_form2 = require("react-hook-form");
 
 // src/form-meta/utils.tsx
@@ -3539,16 +3514,21 @@ var formMeta = {
   _hasRemoteChange: false
 };
 function useEditMode() {
+  var _a;
   const { watch } = (0, import_react_hook_form.useFormContext)();
-  return watch("_editMode") ?? false;
+  return (_a = watch("_editMode")) != null ? _a : false;
 }
 function useHasRemoteChange() {
+  var _a;
   const { watch } = (0, import_react_hook_form.useFormContext)();
-  return watch("_hasRemoteChange") ?? false;
+  return (_a = watch("_hasRemoteChange")) != null ? _a : false;
 }
 function useGetIsNew() {
   const { getValues } = (0, import_react_hook_form.useFormContext)();
-  return () => getValues("_isNew") ?? false;
+  return () => {
+    var _a;
+    return (_a = getValues("_isNew")) != null ? _a : false;
+  };
 }
 function useSetFormMeta() {
   const { setValue } = (0, import_react_hook_form.useFormContext)();
@@ -3561,42 +3541,46 @@ 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
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function EditableCheckboxCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_eds_core_react19.Checkbox, {
-      enterKeyHint: "next",
-      "aria-label": "readonly",
-      readOnly: true,
-      checked: context.getValue(),
-      disabled: true
-    });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_hook_form2.Controller, {
-    name: context.column.id,
-    render: ({ field: { value, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_eds_core_react19.Checkbox, {
-      enterKeyHint: "send",
-      "aria-label": "editable",
-      checked: value,
-      ...field
-    })
-  });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_eds_core_react20.Checkbox,
+      {
+        enterKeyHint: "next",
+        "aria-label": "readonly",
+        readOnly: true,
+        checked: context.getValue(),
+        disabled: true
+      }
+    );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_hook_form2.Controller,
+    {
+      name: context.column.id,
+      render: (_a) => {
+        var { field: _b } = _a, _c = _b, { value } = _c, field = __objRest(_c, ["value"]);
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, __spreadValues({ enterKeyHint: "send", "aria-label": "editable", checked: value }, field));
+      }
+    }
+  );
 }
 
 // src/form-cells/EditableDateCell.tsx
-var import_eds_core_react21 = require("@equinor/eds-core-react");
+var import_eds_core_react22 = require("@equinor/eds-core-react");
 var import_react8 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_styled_components17 = __toESM(require("styled-components"));
 
 // src/form-cells/utils.tsx
-var import_eds_core_react20 = require("@equinor/eds-core-react");
+var import_eds_core_react21 = require("@equinor/eds-core-react");
 var import_eds_icons8 = require("@equinor/eds-icons");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function getHelperTextProps({
   error,
   warning,
@@ -3606,19 +3590,13 @@ function getHelperTextProps({
     return {
       variant: "error",
       helperText: error.message,
-      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Icon, {
-        data: import_eds_icons8.error_filled,
-        size: 16
-      })
+      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.error_filled, size: 16 })
     };
   if (warning)
     return {
       variant: "warning",
       helperText: warning.message,
-      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Icon, {
-        data: import_eds_icons8.warning_filled,
-        size: 16
-      })
+      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.warning_filled, size: 16 })
     };
   return {
     helperText,
@@ -3633,32 +3611,45 @@ function stopPropagation2(handler) {
 }
 
 // src/form-cells/EditableDateCell.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function EditableDateCell(props) {
-  const { dateStringFormatter, ...context } = props;
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function EditableDateCell(_a) {
+  var _b = _a, {
+    dateStringFormatter,
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "dateStringFormatter",
+    "error"
+  ]);
   const rawValue = context.getValue();
   const editMode = useEditMode();
   const formattedValue = (0, import_react8.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__ */ (0, import_jsx_runtime22.jsx)(TypographyCustom, {
-      truncate: true,
-      children: formattedValue
-    });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_hook_form3.Controller, {
-    name: context.column.id,
-    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, { truncate: true, children: formattedValue });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react_hook_form3.Controller,
+    {
+      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__ */ (0, import_jsx_runtime23.jsx)(
+          InlineTextField,
+          __spreadValues(__spreadValues({
+            id: context.column.id,
+            type: "date",
+            autoComplete: "none",
+            value: value ? parseISODate(value) : "",
+            onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : "")
+          }, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })), field)
+        );
+      }
+    }
+  );
 }
 function parseISODate(dateString) {
   const date = new Date(dateString);
@@ -3666,7 +3657,7 @@ function parseISODate(dateString) {
   const dateWithoutOffset = new Date(date.getTime() - offset * 60 * 1e3);
   return dateWithoutOffset.toISOString().split("T")[0];
 }
-var InlineTextField = (0, import_styled_components17.default)(import_eds_core_react21.TextField)`
+var InlineTextField = (0, import_styled_components17.default)(import_eds_core_react22.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3690,69 +3681,135 @@ var InlineTextField = (0, import_styled_components17.default)(import_eds_core_re
 `;
 
 // src/form-cells/EditableDropdownSingleCell.tsx
-var import_eds_core_react22 = require("@equinor/eds-core-react");
+var import_eds_core_react24 = require("@equinor/eds-core-react");
 var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// src/form-cells/FormHelperText.tsx
+var import_eds_core_react23 = require("@equinor/eds-core-react");
+var import_eds_tokens6 = require("@equinor/eds-tokens");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var colors = {
+  error: import_eds_tokens6.tokens.colors.interactive.danger__text.hex,
+  warning: import_eds_tokens6.tokens.colors.interactive.warning__text.hex,
+  success: import_eds_tokens6.tokens.colors.interactive.success__text.hex
+};
+function HelperText({ helperText, variant, helperIcon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: helperText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { marginTop: "8px", marginLeft: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        marginTop: "8px",
+        color: variant ? colors[variant] : "inherit"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { flexShrink: 0 }, children: helperIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_eds_core_react23.Typography,
+          {
+            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
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function buildEmptyOption() {
   return { label: "", value: "" };
 }
-function EditableDropdownSingleCell(props) {
-  const { options, ...context } = props;
+function EditableDropdownSingleCell(_a) {
+  var _b = _a, {
+    options,
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "options",
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, {
-      truncate: true,
-      children: context.getValue()
-    });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_hook_form4.Controller, {
-    name: context.column.id,
-    render: ({ field: { value, onChange, ...field } }) => {
-      const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption();
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_eds_core_react22.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__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react_hook_form4.Controller,
+    {
+      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__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_eds_core_react24.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);
+              }
+            }, field)
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(HelperText, __spreadValues({}, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })))
+        ] });
+      }
     }
-  });
+  );
 }
 
 // src/form-cells/EditableNumberCell.tsx
-var import_eds_core_react23 = require("@equinor/eds-core-react");
+var import_eds_core_react25 = require("@equinor/eds-core-react");
 var import_react_hook_form5 = require("react-hook-form");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function EditableNumberCell(context) {
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function EditableNumberCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, {
-      truncate: true,
-      children: context.getValue()
-    });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_hook_form5.Controller, {
-    name: context.column.id,
-    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InlineTextField2, {
-        id: context.column.id,
-        type: "number",
-        autoComplete: "none",
-        onChange: (e) => onChange(e.target.valueAsNumber),
-        ...field,
-        ...getHelperTextProps({ error })
-      })
-    })
-  });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react_hook_form5.Controller,
+    {
+      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__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          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 = (0, import_styled_components18.default)(import_eds_core_react23.TextField)`
+var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react25.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3776,112 +3833,117 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
 `;
 
 // src/form-cells/EditableTextAreaCell.tsx
-var import_eds_core_react24 = require("@equinor/eds-core-react");
+var import_eds_core_react26 = require("@equinor/eds-core-react");
 var import_eds_icons9 = require("@equinor/eds-icons");
 var import_react9 = require("react");
 var import_react_hook_form6 = require("react-hook-form");
 var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function EditableTextAreaCell(props) {
-  const { title, ...context } = props;
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function EditableTextAreaCell(_a) {
+  var _b = _a, {
+    title,
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "title",
+    "error"
+  ]);
   const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
   const [open, setOpen] = (0, import_react9.useState)(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PopoverCell, {
-      id: name + "popover",
-      value: context.getValue(),
-      title
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverCell, { id: name + "popover", value: context.getValue(), title });
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_hook_form6.Controller, {
-    name,
-    render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            position: "relative"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledTextField, {
-              id: field.name,
-              onChange,
-              ref,
-              ...field,
-              ...getHelperTextProps({ error })
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, {
-              variant: "ghost_icon",
-              onClick: stopPropagation2(openDialog),
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Icon, {
-                data: import_eds_icons9.arrow_up,
-                size: 24,
-                style: { transform: "rotateZ(45deg)" }
-              })
-            })
-          ]
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_eds_core_react24.Dialog, {
-          open,
-          onClose: () => {
-            closeDialog();
-            onChange(textareaValue);
-          },
-          isDismissable: true,
-          style: { width: "min(50rem, calc(100vw - 4rem))" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Header, {
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Title, {
-                children: title
-              })
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Content, {
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.TextField, {
-                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__ */ (0, import_jsx_runtime25.jsxs)(import_eds_core_react24.Dialog.Actions, {
-              style: { display: "flex", gap: "1rem" },
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_hook_form6.Controller,
+    {
+      name,
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange, ref } = _d, field = __objRest(_d, ["onChange", "ref"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                position: "relative"
+              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Button, {
-                  onClick: () => {
-                    closeDialog();
-                    onChange(textareaValue);
-                  },
-                  children: "Submit"
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Button, {
-                  variant: "ghost",
-                  onClick: () => {
-                    closeDialog();
-                    setTextareaValue(context.getValue());
-                  },
-                  children: "Cancel"
-                })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  StyledTextField,
+                  __spreadValues(__spreadValues({
+                    id: field.name,
+                    onChange,
+                    ref
+                  }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Icon, { data: import_eds_icons9.arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
               ]
-            })
-          ]
-        })
-      ]
-    })
-  });
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_eds_core_react26.Dialog,
+            {
+              open,
+              onClose: () => {
+                closeDialog();
+                onChange(textareaValue);
+              },
+              isDismissable: true,
+              style: { width: "min(50rem, calc(100vw - 4rem))" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Dialog.Title, { children: title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_eds_core_react26.TextField,
+                  {
+                    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__ */ (0, import_jsx_runtime27.jsxs)(import_eds_core_react26.Dialog.Actions, { style: { display: "flex", gap: "1rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_eds_core_react26.Button,
+                    {
+                      onClick: () => {
+                        closeDialog();
+                        onChange(textareaValue);
+                      },
+                      children: "Submit"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_eds_core_react26.Button,
+                    {
+                      variant: "ghost",
+                      onClick: () => {
+                        closeDialog();
+                        setTextareaValue(context.getValue());
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] });
+      }
+    }
+  );
 }
-var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react24.TextField)`
+var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react26.TextField)`
   & input {
     padding-right: 40px;
     letter-spacing: 0;
@@ -3890,7 +3952,7 @@ var StyledTextField = (0, import_styled_components19.default)(import_eds_core_re
     text-overflow: ellipsis;
   }
 `;
-var IconButton = (0, import_styled_components19.default)(import_eds_core_react24.Button)`
+var IconButton = (0, import_styled_components19.default)(import_eds_core_react26.Button)`
   position: absolute;
   height: 32px;
   width: 32px;
@@ -3898,29 +3960,38 @@ var IconButton = (0, import_styled_components19.default)(import_eds_core_react24
 `;
 
 // src/form-cells/EditableTextFieldCell.tsx
-var import_eds_core_react25 = require("@equinor/eds-core-react");
+var import_eds_core_react27 = require("@equinor/eds-core-react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function EditableTextFieldCell(context) {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function EditableTextFieldCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TypographyCustom, {
-      truncate: true,
-      children: context.getValue()
-    });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_hook_form7.Controller, {
-    name: context.column.id,
-    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InlineTextField3, {
-      id: context.column.id,
-      autoComplete: "none",
-      value: String(value ?? ""),
-      ...field,
-      ...getHelperTextProps({ error })
-    })
-  });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react_hook_form7.Controller,
+    {
+      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__ */ (0, import_jsx_runtime28.jsx)(
+          InlineTextField3,
+          __spreadValues(__spreadValues({
+            id: context.column.id,
+            autoComplete: "none",
+            value: String(value != null ? value : "")
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
+        );
+      }
+    }
+  );
 }
-var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react25.TextField)`
+var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react27.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3946,6 +4017,7 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
 0 && (module.exports = {
   AppShell,
   AppSidebar,
+  CheckboxCell,
   ChipsCell,
   ColumnSelect,
   DataTable,