@equinor/eds-core-react 0.28.0 → 0.29.0

package/dist/eds-core-react.cjs.js

@@ -12,11 +12,12 @@ var edsUtils = require('@equinor/eds-utils');
 var jsxRuntime = require('react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react$1 = require('@floating-ui/react');
+var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
 var _extends = require('@babel/runtime/helpers/extends');
 var edsIcons = require('@equinor/eds-icons');
-var reactDomInteractions = require('@floating-ui/react-dom-interactions');
 var ReactDom = require('react-dom');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var downshift = require('downshift');
 var reactVirtual = require('@tanstack/react-virtual');
 
@@ -46,9 +47,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
 var buttonTypography = edsTokens.tokens.typography.navigation.button,
   _tokens$colors$intera$l = edsTokens.tokens.colors.interactive,
@@ -908,13 +910,178 @@ var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref)
   }));
 });
 
-var _excluded$1o = ["children", "multiple", "selectedIndexes", "onChange"];
+var _tokens$colors$j = edsTokens.tokens.colors,
+  white = _tokens$colors$j.text.static_icons__primary_white.rgba,
+  background$e = _tokens$colors$j.ui.background__overlay.rgba,
+  ui = edsTokens.tokens.typography.ui,
+  _tokens$spacings$comf$e = edsTokens.tokens.spacings.comfortable,
+  spacingXlarge = _tokens$spacings$comf$e.x_large,
+  spacingSmall$4 = _tokens$spacings$comf$e.small,
+  borderRadius$7 = edsTokens.tokens.shape.corners.borderRadius;
+var tooltip = {
+  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, ui.tooltip), {}, {
+    color: white
+  }),
+  background: background$e,
+  border: {
+    type: 'border',
+    radius: borderRadius$7
+  },
+  entities: {
+    tooltip: {
+      height: spacingXlarge
+    },
+    arrow: {
+      width: '6px',
+      height: spacingSmall$4,
+      spacings: {
+        bottom: '-6px',
+        top: '-6px',
+        left: '-6px',
+        right: '-6px'
+      }
+    }
+  },
+  spacings: {
+    left: spacingSmall$4,
+    right: spacingSmall$4,
+    top: spacingSmall$4,
+    bottom: spacingSmall$4
+  }
+};
+
+var _excluded$1o = ["title", "placement", "children", "style", "enterDelay"];
+var StyledTooltip = styled__default["default"].div.withConfig({
+  displayName: "Tooltip__StyledTooltip",
+  componentId: "sc-m2im2p-0"
+})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
+var ArrowWrapper$1 = styled__default["default"].div.withConfig({
+  displayName: "Tooltip__ArrowWrapper",
+  componentId: "sc-m2im2p-1"
+})(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
+var TooltipArrow = styled__default["default"].svg.withConfig({
+  displayName: "Tooltip__TooltipArrow",
+  componentId: "sc-m2im2p-2"
+})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
+var Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
+  var title = _ref.title,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    children = _ref.children,
+    style = _ref.style,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1o);
+  var arrowRef = react.useRef(null);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var shouldOpen = title !== '';
+  var _useFloating = react$1.useFloating({
+      placement: placement,
+      open: open,
+      onOpenChange: setOpen,
+      middleware: [react$1.offset(14), react$1.flip(), react$1.shift({
+        padding: 8
+      }), react$1.arrow({
+        element: arrowRef
+      })],
+      whileElementsMounted: react$1.autoUpdate
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    reference = _useFloating.reference,
+    floating = _useFloating.floating,
+    strategy = _useFloating.strategy,
+    context = _useFloating.context,
+    _useFloating$middlewa = _useFloating.middlewareData.arrow,
+    _useFloating$middlewa2 = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa,
+    arrowX = _useFloating$middlewa2.x,
+    arrowY = _useFloating$middlewa2.y,
+    finalPlacement = _useFloating.placement;
+  var anchorRef = react.useMemo(function () {
+    return edsUtils.mergeRefs(reference, children === null || children === void 0 ? void 0 : children.ref);
+  }, [reference, children === null || children === void 0 ? void 0 : children.ref]);
+  var tooltipRef = react.useMemo(function () {
+    return edsUtils.mergeRefs(floating, ref);
+  }, [floating, ref]);
+  var _useInteractions = react$1.useInteractions([react$1.useHover(context, {
+      delay: {
+        open: enterDelay
+      }
+    }), react$1.useFocus(context), react$1.useRole(context, {
+      role: 'tooltip'
+    }), react$1.useDismiss(context)]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  react.useEffect(function () {
+    var staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[finalPlacement.split('-')[0]];
+    var arrowTransform = 'none';
+    switch (staticSide) {
+      case 'right':
+        arrowTransform = 'rotateY(180deg)';
+        break;
+      case 'left':
+        arrowTransform = 'none';
+        break;
+      case 'top':
+        arrowTransform = 'rotate(90deg)';
+        break;
+      case 'bottom':
+        arrowTransform = 'rotate(-90deg)';
+        break;
+    }
+    if (arrowRef.current) {
+      var _Object$assign;
+      Object.assign(arrowRef.current.style, (_Object$assign = {
+        left: arrowX != null ? "".concat(arrowX, "px") : '',
+        top: arrowY != null ? "".concat(arrowY, "px") : '',
+        right: '',
+        bottom: ''
+      }, _defineProperty__default["default"](_Object$assign, staticSide, '-6px'), _defineProperty__default["default"](_Object$assign, "transform", arrowTransform), _Object$assign));
+    }
+  });
+  var updatedChildren = /*#__PURE__*/react.cloneElement(children, _objectSpread__default["default"]({}, getReferenceProps(_objectSpread__default["default"]({
+    ref: anchorRef
+  }, children.props))));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      id: "eds-tooltip-container",
+      children: shouldOpen && open && /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, rest), getFloatingProps({
+        ref: tooltipRef,
+        style: _objectSpread__default["default"](_objectSpread__default["default"]({}, style), {}, {
+          position: strategy,
+          top: y || 0,
+          left: x || 0
+        })
+      })), {}, {
+        children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
+          ref: arrowRef,
+          children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+            className: "arrowSvg",
+            children: /*#__PURE__*/jsxRuntime.jsx("path", {
+              d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+            })
+          })
+        })]
+      }))
+    }), updatedChildren]
+  });
+});
+
+var _excluded$1n = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
   var children = _ref.children,
     multiple = _ref.multiple,
     selectedIndexes = _ref.selectedIndexes,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1o);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1n);
   var _useState = react.useState(selectedIndexes || []),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     pickedIndexes = _useState2[0],
@@ -924,8 +1091,7 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
       setPickedIndexes(selectedIndexes);
     }
   }, [selectedIndexes]);
-  var updatedChildren = react.Children.map(children, function (child, index) {
-    var isSelected = pickedIndexes.includes(index);
+  function updateProps(child, isSelected, index) {
     var childElement = child;
     if ( /*#__PURE__*/react.isValidElement(child) && child.type === Button$1) {
       var buttonProps = {
@@ -948,6 +1114,18 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
       };
       return /*#__PURE__*/react.cloneElement(child, buttonProps);
     }
+  }
+  var updatedChildren = react.Children.map(children, function (child, index) {
+    var isSelected = pickedIndexes.includes(index);
+    var childElement = child;
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$1) {
+      var updatedGrandChildren = react.Children.map(childElement.props.children, function (grandChild) {
+        return updateProps(grandChild, isSelected, index);
+      });
+      return /*#__PURE__*/react.cloneElement(childElement, null, updatedGrandChildren[0]);
+    } else {
+      return updateProps(childElement, isSelected, index);
+    }
   });
   return /*#__PURE__*/jsxRuntime.jsx(ButtonGroup, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
@@ -998,7 +1176,7 @@ var link = {
   }
 };
 
-var _excluded$1n = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
+var _excluded$1m = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
 var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
@@ -1070,7 +1248,7 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
     group = _ref5.group,
     token = _ref5.token,
     providedAs = _ref5.as,
-    other = _objectWithoutProperties__default["default"](_ref5, _excluded$1n);
+    other = _objectWithoutProperties__default["default"](_ref5, _excluded$1m);
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
   var typography = findTypography(variantName, group);
@@ -1094,10 +1272,10 @@ var _tokens$typography$2 = edsTokens.tokens.typography,
   cellTypography$1 = _tokens$typography$ta.cell_text,
   cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
   compactTypography$1 = _tokens$typography$2._modes.compact,
-  _tokens$colors$j = edsTokens.tokens.colors,
-  typographyColor$1 = _tokens$colors$j.text.static_icons__default.rgba,
-  borderColor$4 = _tokens$colors$j.ui.background__medium.rgba,
-  _tokens$colors$intera$g = _tokens$colors$j.interactive,
+  _tokens$colors$i = edsTokens.tokens.colors,
+  typographyColor$1 = _tokens$colors$i.text.static_icons__default.rgba,
+  borderColor$4 = _tokens$colors$i.ui.background__medium.rgba,
+  _tokens$colors$intera$g = _tokens$colors$i.interactive,
   backgroundColor$5 = _tokens$colors$intera$g.table__cell__fill_resting.rgba,
   hoverBackgroundColor$3 = _tokens$colors$intera$g.table__cell__fill_hover.rgba,
   activeBackgroundColor$2 = _tokens$colors$intera$g.table__cell__fill_activated.rgba,
@@ -1209,14 +1387,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
 
-var _excluded$1m = ["children"];
+var _excluded$1l = ["children"];
 var TableBase$1 = styled__default["default"].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
 var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1m);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1l);
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: children
@@ -1230,14 +1408,14 @@ var initalState$2 = {
 };
 var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
 
-var _excluded$1l = ["children"];
+var _excluded$1k = ["children"];
 var TableBase = styled__default["default"].tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
 var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1l);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1k);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
@@ -1249,7 +1427,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
 
-var _excluded$1k = ["children", "variant"];
+var _excluded$1j = ["children", "variant"];
 var StyledTableCell$1 = styled__default["default"].td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1270,7 +1448,7 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
   var children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1k);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1j);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1288,10 +1466,10 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
 var _tokens$typography$1 = edsTokens.tokens.typography,
   cellTypography = _tokens$typography$1.table.cell_header,
   compactTypography = _tokens$typography$1._modes.compact,
-  _tokens$colors$i = edsTokens.tokens.colors,
-  typographyColor = _tokens$colors$i.text.static_icons__default.rgba,
-  borderColor$3 = _tokens$colors$i.ui.background__medium.rgba,
-  _tokens$colors$intera$f = _tokens$colors$i.interactive,
+  _tokens$colors$h = edsTokens.tokens.colors,
+  typographyColor = _tokens$colors$h.text.static_icons__default.rgba,
+  borderColor$3 = _tokens$colors$h.ui.background__medium.rgba,
+  _tokens$colors$intera$f = _tokens$colors$h.interactive,
   backgroundColor$4 = _tokens$colors$intera$f.table__header__fill_resting.rgba,
   hoverBackgroundColor$2 = _tokens$colors$intera$f.table__header__fill_hover.rgba,
   activeBackgroundColor$1 = _tokens$colors$intera$f.table__header__fill_activated.rgba,
@@ -1375,7 +1553,7 @@ var token$4 = {
   }
 };
 
-var _excluded$1j = ["children", "sort"];
+var _excluded$1i = ["children", "sort"];
 var StyledTableCell = styled__default["default"].th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
@@ -1405,7 +1583,7 @@ var CellInner = styled__default["default"].div.withConfig({
 var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_ref, ref) {
   var children = _ref.children,
     sort = _ref.sort,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1j);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1i);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1425,7 +1603,7 @@ var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_re
 });
 
 var Cell = /*#__PURE__*/react.forwardRef(function Cell(_ref, ref) {
-  var rest = _extends__default["default"]({}, _ref);
+  var rest = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Consumer, {
     children: function children(_ref2) {
       var variant = _ref2.variant,
@@ -1446,9 +1624,9 @@ var Cell = /*#__PURE__*/react.forwardRef(function Cell(_ref, ref) {
   });
 });
 
-var _tokens$colors$h = edsTokens.tokens.colors,
-  borderColor$2 = _tokens$colors$h.ui.background__medium.rgba,
-  backgroundColor$3 = _tokens$colors$h.interactive.table__header__fill_resting.rgba;
+var _tokens$colors$g = edsTokens.tokens.colors,
+  borderColor$2 = _tokens$colors$g.ui.background__medium.rgba,
+  backgroundColor$3 = _tokens$colors$g.interactive.table__header__fill_resting.rgba;
 var token$3 = {
   background: backgroundColor$3,
   border: {
@@ -1462,7 +1640,7 @@ var token$3 = {
   }
 };
 
-var _excluded$1i = ["children", "sticky"];
+var _excluded$1h = ["children", "sticky"];
 var StyledTableHead = styled__default["default"].thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1470,7 +1648,7 @@ var StyledTableHead = styled__default["default"].thead.withConfig({
 var Head = /*#__PURE__*/react.forwardRef(function Head(_ref, ref) {
   var children = _ref.children,
     sticky = _ref.sticky,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1i);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1h);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
@@ -1513,7 +1691,7 @@ var StyledRow = styled__default["default"].tr.withConfig({
   };
 });
 var Row = /*#__PURE__*/react.forwardRef(function Row(_ref2, ref) {
-  var props = _extends__default["default"]({}, _ref2);
+  var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref2), _ref2));
   var children = props.children;
   return /*#__PURE__*/jsxRuntime.jsx(StyledRow, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
@@ -1553,9 +1731,9 @@ var _tokens$colors$ui$6 = edsTokens.tokens.colors.ui,
   lighter = _tokens$colors$ui$6.background__default.rgba,
   light = _tokens$colors$ui$6.background__light.rgba,
   mediumColor = _tokens$colors$ui$6.background__medium.rgba,
-  _tokens$spacings$comf$e = edsTokens.tokens.spacings.comfortable,
-  spacingSmall$4 = _tokens$spacings$comf$e.small,
-  spacingMedium$8 = _tokens$spacings$comf$e.medium;
+  _tokens$spacings$comf$d = edsTokens.tokens.spacings.comfortable,
+  spacingSmall$3 = _tokens$spacings$comf$d.small,
+  spacingMedium$8 = _tokens$spacings$comf$d.medium;
 var divider$1 = {
   lighter: {
     background: lighter
@@ -1569,8 +1747,8 @@ var divider$1 = {
 };
 var small$7 = {
   spacings: {
-    top: spacingSmall$4,
-    bottom: spacingSmall$4
+    top: spacingSmall$3,
+    bottom: spacingSmall$3
   }
 };
 var medium$4 = {
@@ -1587,7 +1765,7 @@ var tokens$4 = /*#__PURE__*/Object.freeze({
   medium: medium$4
 });
 
-var _excluded$1h = ["color", "variant", "size"];
+var _excluded$1g = ["color", "variant", "size"];
 var divider = divider$1;
 var StyledDivider$3 = styled__default["default"].hr.withConfig({
   displayName: "Divider__StyledDivider",
@@ -1606,7 +1784,7 @@ var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
     variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? '1' : _ref2$size,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1h);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1g);
   var colorValue = color === 'medium' ? 'mediumColor' : color;
   var props = _objectSpread__default["default"]({
     backgroundColor: divider[colorValue].background,
@@ -1642,7 +1820,7 @@ var label = {
   }
 };
 
-var _excluded$1g = ["label", "meta", "disabled"];
+var _excluded$1f = ["label", "meta", "disabled"];
 var LabelBase = styled__default["default"].label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
@@ -1660,7 +1838,7 @@ var Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
     meta = props.meta,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    other = _objectWithoutProperties__default["default"](props, _excluded$1g);
+    other = _objectWithoutProperties__default["default"](props, _excluded$1f);
   return (
     /*#__PURE__*/
     /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
@@ -1703,7 +1881,7 @@ var helperText = {
   }
 };
 
-var _excluded$1f = ["text", "icon", "color"];
+var _excluded$1e = ["text", "icon", "color"];
 var Container$5 = styled__default["default"].div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-189ug61-0"
@@ -1727,7 +1905,7 @@ var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelper
     icon = _ref2.icon,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? helperText.typography.color : _ref2$color,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1f);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1e);
   if (!text) {
     return null;
   }
@@ -1741,12 +1919,12 @@ var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelper
   }));
 });
 
-var _tokens$colors$g = edsTokens.tokens.colors,
-  background$e = _tokens$colors$g.ui.background__light.rgba,
-  _tokens$colors$text$2 = _tokens$colors$g.text,
+var _tokens$colors$f = edsTokens.tokens.colors,
+  background$d = _tokens$colors$f.ui.background__light.rgba,
+  _tokens$colors$text$2 = _tokens$colors$f.text,
   static_icons__default$1 = _tokens$colors$text$2.static_icons__default,
   static_icons__tertiary$1 = _tokens$colors$text$2.static_icons__tertiary,
-  _tokens$colors$intera$d = _tokens$colors$g.interactive,
+  _tokens$colors$intera$d = _tokens$colors$f.interactive,
   disabled__text$1 = _tokens$colors$intera$d.disabled__text,
   primary__resting$2 = _tokens$colors$intera$d.primary__resting,
   danger__resting$1 = _tokens$colors$intera$d.danger__resting,
@@ -1755,14 +1933,14 @@ var _tokens$colors$g = edsTokens.tokens.colors,
   warning__hover$1 = _tokens$colors$intera$d.warning__hover,
   success__resting$1 = _tokens$colors$intera$d.success__resting,
   success__hover$1 = _tokens$colors$intera$d.success__hover,
-  _tokens$spacings$comf$d = edsTokens.tokens.spacings.comfortable,
-  small$6 = _tokens$spacings$comf$d.small,
-  x_small$5 = _tokens$spacings$comf$d.x_small,
+  _tokens$spacings$comf$c = edsTokens.tokens.spacings.comfortable,
+  small$6 = _tokens$spacings$comf$c.small,
+  x_small$5 = _tokens$spacings$comf$c.x_small,
   typography$d = edsTokens.tokens.typography,
   shape$2 = edsTokens.tokens.shape;
 var input$2 = {
   minHeight: shape$2.straight.minHeight,
-  background: background$e,
+  background: background$d,
   spacings: {
     left: small$6,
     right: small$6,
@@ -1900,7 +2078,7 @@ var inputToken$1 = {
   success: success$1
 };
 
-var _excluded$1e = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
+var _excluded$1d = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
 var Container$4 = styled__default["default"].div.withConfig({
   displayName: "InputWrapper__Container",
   componentId: "sc-v6o9z1-0"
@@ -1923,7 +2101,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
     _ref$helperProps = _ref.helperProps,
     helperProps = _ref$helperProps === void 0 ? {} : _ref$helperProps,
     helperIcon = _ref.helperIcon,
-    other = _objectWithoutProperties__default["default"](_ref, _excluded$1e);
+    other = _objectWithoutProperties__default["default"](_ref, _excluded$1d);
   var _useEds = useEds(),
     density = _useEds.density;
   var actualVariant = color || 'input';
@@ -1952,12 +2130,12 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
   });
 });
 
-var _tokens$colors$f = edsTokens.tokens.colors,
-  background$d = _tokens$colors$f.ui.background__light.rgba,
-  _tokens$colors$text$1 = _tokens$colors$f.text,
+var _tokens$colors$e = edsTokens.tokens.colors,
+  background$c = _tokens$colors$e.ui.background__light.rgba,
+  _tokens$colors$text$1 = _tokens$colors$e.text,
   static_icons__default = _tokens$colors$text$1.static_icons__default,
   static_icons__tertiary = _tokens$colors$text$1.static_icons__tertiary,
-  _tokens$colors$intera$c = _tokens$colors$f.interactive,
+  _tokens$colors$intera$c = _tokens$colors$e.interactive,
   disabled__text = _tokens$colors$intera$c.disabled__text,
   primary__resting$1 = _tokens$colors$intera$c.primary__resting,
   danger__resting = _tokens$colors$intera$c.danger__resting,
@@ -1966,15 +2144,15 @@ var _tokens$colors$f = edsTokens.tokens.colors,
   warning__hover = _tokens$colors$intera$c.warning__hover,
   success__resting = _tokens$colors$intera$c.success__resting,
   success__hover = _tokens$colors$intera$c.success__hover,
-  _tokens$spacings$comf$c = edsTokens.tokens.spacings.comfortable,
-  small$5 = _tokens$spacings$comf$c.small,
-  x_small$4 = _tokens$spacings$comf$c.x_small,
+  _tokens$spacings$comf$b = edsTokens.tokens.spacings.comfortable,
+  small$5 = _tokens$spacings$comf$b.small,
+  x_small$4 = _tokens$spacings$comf$b.x_small,
   typography$c = edsTokens.tokens.typography,
   shape$1 = edsTokens.tokens.shape;
 var input$1 = {
   height: shape$1.straight.minHeight,
   width: '100%',
-  background: background$d,
+  background: background$c,
   spacings: {
     left: small$5,
     right: small$5,
@@ -2145,7 +2323,7 @@ var tokens$3 = /*#__PURE__*/Object.freeze({
   inputToken: inputToken
 });
 
-var _excluded$1d = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
+var _excluded$1c = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
 var Container$3 = styled__default["default"].div.withConfig({
   displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
@@ -2156,7 +2334,7 @@ var Container$3 = styled__default["default"].div.withConfig({
     readOnly = _ref.readOnly;
   var states = token.states,
     entities = token.entities;
-  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:", ";", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
+  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));
@@ -2206,7 +2384,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
     rightAdornmentsProps = _ref6.rightAdornmentsProps,
     leftAdornmentsWidth = _ref6.leftAdornmentsWidth,
     rightAdornmentsWidth = _ref6.rightAdornmentsWidth,
-    other = _objectWithoutProperties__default["default"](_ref6, _excluded$1d);
+    other = _objectWithoutProperties__default["default"](_ref6, _excluded$1c);
   var inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
   var _useEds = useEds(),
     density = _useEds.density;
@@ -2272,7 +2450,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
   );
 });
 
-var _excluded$1c = ["variant", "disabled", "type", "rowsMax"];
+var _excluded$1b = ["variant", "disabled", "type", "rowsMax"];
 var input = input$1;
 var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
   var variant = _ref.variant,
@@ -2281,7 +2459,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     rowsMax = _ref.rowsMax,
-    other = _objectWithoutProperties__default["default"](_ref, _excluded$1c);
+    other = _objectWithoutProperties__default["default"](_ref, _excluded$1b);
   var inputVariant = tokens$3[variant] ? tokens$3[variant] : input$1;
   var _useState = react.useState(null),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -2326,7 +2504,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
   }, inputProps));
 });
 
-var _excluded$1b = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
+var _excluded$1a = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 /** Proxy component for working around typescript and element type switching */
 var Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
   return props.multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, _objectSpread__default["default"]({
@@ -2353,7 +2531,7 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     rowsMax = _ref.rowsMax,
     textareaRef = _ref.textareaRef,
     inputRef = _ref.inputRef,
-    other = _objectWithoutProperties__default["default"](_ref, _excluded$1b);
+    other = _objectWithoutProperties__default["default"](_ref, _excluded$1a);
   var helperTextId = edsUtils.useId(null, 'helpertext');
   var fieldProps = _objectSpread__default["default"]({
     'aria-invalid': variant === 'error' || undefined,
@@ -2421,7 +2599,7 @@ var get = function get(name) {
   };
 };
 
-var _excluded$1a = ["size", "color", "name", "rotation", "title", "data"];
+var _excluded$19 = ["size", "color", "name", "rotation", "title", "data"];
 var transform = function transform(_ref) {
   var rotation = _ref.rotation;
   return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
@@ -2483,7 +2661,7 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
     rotation = _ref5.rotation,
     title = _ref5.title,
     data = _ref5.data,
-    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$1a);
+    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$19);
   // eslint-disable-next-line prefer-const
   var _findIcon = findIcon(name, data, size),
     icon = _findIcon.icon,
@@ -2540,7 +2718,7 @@ var list = {
   typography: paragraph$1.body_short
 };
 
-var _excluded$19 = ["children", "variant"];
+var _excluded$18 = ["children", "variant"];
 var typography$b = list.typography;
 var StyledList$1 = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
@@ -2553,7 +2731,7 @@ var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   var children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'bullet' : _ref2$variant,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$19);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$18);
   var as = variant === 'numbered' ? 'ol' : 'ul';
   return /*#__PURE__*/jsxRuntime.jsx(StyledList$1, _objectSpread__default["default"](_objectSpread__default["default"]({
     as: as,
@@ -2563,10 +2741,10 @@ var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   }));
 });
 
-var _excluded$18 = ["children"];
+var _excluded$17 = ["children"];
 var ListItem$2 = /*#__PURE__*/react.forwardRef(function ListItem(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$18);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$17);
   return /*#__PURE__*/jsxRuntime.jsx("li", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: children
@@ -2578,17 +2756,17 @@ List$1.Item = ListItem$2;
 List$1.Item.displayName = 'List.Item';
 
 var typography$a = edsTokens.tokens.typography.ui.accordion_header,
-  _tokens$colors$e = edsTokens.tokens.colors,
-  _tokens$colors$ui$5 = _tokens$colors$e.ui,
+  _tokens$colors$d = edsTokens.tokens.colors,
+  _tokens$colors$ui$5 = _tokens$colors$d.ui,
   backgroundDefault = _tokens$colors$ui$5.background__default.rgba,
   borderColor$1 = _tokens$colors$ui$5.background__medium.rgba,
   backgroundHover = _tokens$colors$ui$5.background__light.rgba,
-  _tokens$colors$intera$b = _tokens$colors$e.interactive,
+  _tokens$colors$intera$b = _tokens$colors$d.interactive,
   activatedColor = _tokens$colors$intera$b.primary__resting.rgba,
   disabledIconColor$1 = _tokens$colors$intera$b.disabled__fill.rgba,
   disabledColor$2 = _tokens$colors$intera$b.disabled__text.rgba,
   focusOutlineColor$7 = _tokens$colors$intera$b.focus.rgba,
-  defaultIconColor = _tokens$colors$e.text.static_icons__default.rgba,
+  defaultIconColor = _tokens$colors$d.text.static_icons__default.rgba,
   mediumSpacing = edsTokens.tokens.spacings.comfortable.medium,
   focusOutlineWidth$7 = edsTokens.tokens.interactions.focused.width,
   text = edsTokens.tokens.typography.input.text;
@@ -2661,7 +2839,7 @@ var accordion = {
   }
 };
 
-var _excluded$17 = ["headerLevel", "chevronPosition", "children", "id"];
+var _excluded$16 = ["headerLevel", "chevronPosition", "children", "id"];
 var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   var _ref$headerLevel = _ref.headerLevel,
     headerLevel = _ref$headerLevel === void 0 ? 'h2' : _ref$headerLevel,
@@ -2669,7 +2847,7 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
     chevronPosition = _ref$chevronPosition === void 0 ? 'left' : _ref$chevronPosition,
     children = _ref.children,
     id = _ref.id,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$17);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$16);
   var accordionId = edsUtils.useId(id, 'accordion');
   var _useEds = useEds(),
     density = _useEds.density;
@@ -2694,7 +2872,7 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   });
 });
 
-var _excluded$16 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var _excluded$15 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
 var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, ref) {
   var headerLevel = _ref.headerLevel,
     chevronPosition = _ref.chevronPosition,
@@ -2704,7 +2882,7 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
     isExpanded = _ref.isExpanded,
     children = _ref.children,
     disabled = _ref.disabled,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$16);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$15);
   var _useState = react.useState(isExpanded),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     expanded = _useState2[0],
@@ -2739,7 +2917,7 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
   }));
 });
 
-var _excluded$15 = ["isExpanded", "disabled", "children"];
+var _excluded$14 = ["isExpanded", "disabled", "children"];
 var StyledAccordionHeaderTitle = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
@@ -2755,7 +2933,7 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
   var isExpanded = _ref2.isExpanded,
     disabled = _ref2.disabled,
     children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$15);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$14);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
     isExpanded: isExpanded,
@@ -2765,7 +2943,7 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
   }));
 });
 
-var _excluded$14 = ["isExpanded", "disabled", "children"];
+var _excluded$13 = ["isExpanded", "disabled", "children"];
 var StyledAccordionHeaderActions = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
   componentId: "sc-klu9el-0"
@@ -2787,7 +2965,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
   var isExpanded = _ref2.isExpanded,
     disabled = _ref2.disabled,
     children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$14);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$13);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
     isExpanded: isExpanded,
@@ -2797,7 +2975,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
   }));
 });
 
-var _excluded$13 = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
+var _excluded$12 = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
 var chevronToken = accordion.entities.chevron;
 var StyledAccordionHeader = styled__default["default"].div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
@@ -2873,7 +3051,7 @@ var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_re
     disabled = _ref5.disabled,
     className = _ref5.className,
     style = _ref5.style,
-    props = _objectWithoutProperties__default["default"](_ref5, _excluded$13);
+    props = _objectWithoutProperties__default["default"](_ref5, _excluded$12);
   var handleClick = function handleClick(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -2949,7 +3127,7 @@ var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_re
   });
 });
 
-var _excluded$12 = ["id", "headerId", "hidden", "children"];
+var _excluded$11 = ["id", "headerId", "hidden", "children"];
 var StyledAccordionPanel = styled__default["default"].div.attrs(function (_ref) {
   var headerId = _ref.headerId;
   return {
@@ -2965,14 +3143,14 @@ var StyledAccordionPanel = styled__default["default"].div.attrs(function (_ref)
     header = _theme$entities.header,
     panel = _theme$entities.panel,
     border = theme.border;
-  return styled.css(["", " ", " ", " background:", ";min-height:96px;box-sizing:border-box;"], edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), header.background);
+  return styled.css(["", " border-top:0;", " ", " background:", ";min-height:96px;box-sizing:border-box;"], edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), header.background);
 });
 var AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel(_ref3, ref) {
   var id = _ref3.id,
     headerId = _ref3.headerId,
     hidden = _ref3.hidden,
     children = _ref3.children,
-    props = _objectWithoutProperties__default["default"](_ref3, _excluded$12);
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded$11);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionPanel, _objectSpread__default["default"](_objectSpread__default["default"]({
     headerId: headerId,
     id: id,
@@ -3008,10 +3186,10 @@ var TabsContext = /*#__PURE__*/react.createContext({
 var TabsProvider = TabsContext.Provider;
 TabsContext.Consumer;
 
-var _tokens$colors$d = edsTokens.tokens.colors,
-  defaultColor = _tokens$colors$d.text.static_icons__tertiary.rgba,
-  defaultBorderColor = _tokens$colors$d.ui.background__medium.rgba,
-  _tokens$colors$intera$a = _tokens$colors$d.interactive,
+var _tokens$colors$c = edsTokens.tokens.colors,
+  defaultColor = _tokens$colors$c.text.static_icons__tertiary.rgba,
+  defaultBorderColor = _tokens$colors$c.ui.background__medium.rgba,
+  _tokens$colors$intera$a = _tokens$colors$c.interactive,
   focusOutlineColor$6 = _tokens$colors$intera$a.focus.rgba,
   hoverBackgroundColor = _tokens$colors$intera$a.primary__hover_alt.rgba,
   activeColor$2 = _tokens$colors$intera$a.primary__resting.rgba,
@@ -3115,7 +3293,7 @@ var token$1 = {
   }
 };
 
-var _excluded$11 = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
+var _excluded$10 = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
 var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   var _ref$activeTab = _ref.activeTab,
     activeTab = _ref$activeTab === void 0 ? 0 : _ref$activeTab,
@@ -3130,7 +3308,7 @@ var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
     _ref$scrollable = _ref.scrollable,
     scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
     id = _ref.id,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$11);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$10);
   var tabsId = edsUtils.useId(id, 'tabs');
   var tabsRef = react.useRef(null);
   var combinedTabsRef = react.useMemo(function () {
@@ -3213,7 +3391,7 @@ var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   });
 });
 
-var _excluded$10 = ["children"];
+var _excluded$$ = ["children"];
 var variants$1 = {
   fullWidth: 'minmax(1%, 360px)',
   minWidth: 'max-content'
@@ -3235,7 +3413,7 @@ var StyledTabList = styled__default["default"].div.attrs(function () {
 var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   var _ref3$children = _ref3.children,
     children = _ref3$children === void 0 ? [] : _ref3$children,
-    props = _objectWithoutProperties__default["default"](_ref3, _excluded$10);
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded$$);
   var _useContext = react.useContext(TabsContext),
     activeTab = _useContext.activeTab,
     handleChange = _useContext.handleChange,
@@ -3308,7 +3486,7 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   }));
 });
 
-var _excluded$$ = ["active"];
+var _excluded$_ = ["active"];
 var StyledTab = styled__default["default"].button.attrs(function (_ref) {
   var _ref$$active = _ref.$active,
     $active = _ref$$active === void 0 ? false : _ref$$active,
@@ -3333,17 +3511,17 @@ var StyledTab = styled__default["default"].button.attrs(function (_ref) {
 });
 var Tab = /*#__PURE__*/react.forwardRef(function Tab(_ref3, ref) {
   var active = _ref3.active,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$$);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$_);
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, _objectSpread__default["default"]({
     ref: ref,
     $active: active
   }, rest));
 });
 
-var _excluded$_ = ["children"];
+var _excluded$Z = ["children"];
 var TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$_);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$Z);
   var _useContext = react.useContext(TabsContext),
     activeTab = _useContext.activeTab,
     tabsId = _useContext.tabsId;
@@ -3375,7 +3553,7 @@ var StyledTabPanel = styled__default["default"].div.attrs(function () {
   return styled.css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
 });
 var TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(_ref2, ref) {
-  var props = _extends__default["default"]({}, _ref2);
+  var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref2), _ref2));
   return /*#__PURE__*/jsxRuntime.jsx(StyledTabPanel, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3394,24 +3572,25 @@ Tabs.Panel.displayName = 'Tabs.Panel';
 Tabs.List.displayName = 'Tabs.List';
 
 var elevation = edsTokens.tokens.elevation,
-  background$c = edsTokens.tokens.colors.ui.background__default.rgba;
+  background$b = edsTokens.tokens.colors.ui.background__default.rgba;
 var paper = {
-  background: background$c
+  background: background$b
 };
 
-var _excluded$Z = ["elevation"];
+var _excluded$Y = ["elevation"];
 var StyledPaper = styled__default["default"].div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
 })(["background:", ";box-shadow:", ";"], paper.background, function (_ref) {
-  var elevation = _ref.elevation;
-  return elevation;
+  var $elevation = _ref.$elevation;
+  return $elevation;
 });
 var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
+  var _elevationToken$eleva;
   var elevation$1 = _ref2.elevation,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Z);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Y);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
-    elevation: elevation[elevation$1] || 'none'
+    $elevation: (_elevationToken$eleva = elevation[elevation$1]) !== null && _elevationToken$eleva !== void 0 ? _elevationToken$eleva : 'none'
   });
   return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref
@@ -3419,17 +3598,17 @@ var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
 });
 
 var _tokens$colors$ui$4 = edsTokens.tokens.colors.ui,
-  background$b = _tokens$colors$ui$4.background__default.rgba,
+  background$a = _tokens$colors$ui$4.background__default.rgba,
   backgroundInfo = _tokens$colors$ui$4.background__info.rgba,
   backgroundWarning = _tokens$colors$ui$4.background__warning.rgba,
   backgroundDanger = _tokens$colors$ui$4.background__danger.rgba,
   spacingMedium$6 = edsTokens.tokens.spacings.comfortable.medium,
-  borderRadius$7 = edsTokens.tokens.shape.corners.borderRadius;
+  borderRadius$6 = edsTokens.tokens.shape.corners.borderRadius;
 var primary$4 = {
-  background: background$b,
+  background: background$a,
   border: {
     type: 'border',
-    radius: borderRadius$7
+    radius: borderRadius$6
   },
   spacings: {
     left: spacingMedium$6,
@@ -3456,7 +3635,7 @@ var tokens$2 = /*#__PURE__*/Object.freeze({
   warning: warning$2
 });
 
-var _excluded$Y = ["children", "variant", "elevation"];
+var _excluded$X = ["children", "variant", "elevation"];
 var primary$3 = primary$4;
 var StyledCard = styled__default["default"](Paper).withConfig({
   displayName: "Card__StyledCard",
@@ -3471,7 +3650,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
     variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
     _ref2$elevation = _ref2.elevation,
     elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Y);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$X);
   var cardVariant = variant === 'default' ? 'primary' : variant;
   var token = tokens$2[cardVariant];
   var props = _objectSpread__default["default"]({
@@ -3485,7 +3664,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
   }));
 });
 
-var _excluded$X = ["children", "alignRight", "meta"];
+var _excluded$W = ["children", "alignRight", "meta"];
 var spacings$6 = primary$4.spacings;
 var StyledCardActions = styled__default["default"].div.withConfig({
   displayName: "CardActions__StyledCardActions",
@@ -3500,7 +3679,7 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
     alignRight = _ref2$alignRight === void 0 ? false : _ref2$alignRight,
     _ref2$meta = _ref2.meta,
     meta = _ref2$meta === void 0 ? '' : _ref2$meta,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$X);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$W);
   var justifyContent = alignRight ? 'flex-end' : 'flex-start';
   var props = _objectSpread__default["default"]({
     ref: ref,
@@ -3514,7 +3693,7 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
   }));
 });
 
-var _excluded$W = ["children"];
+var _excluded$V = ["children"];
 var spacings$5 = primary$4.spacings;
 var StyledCardContent = styled__default["default"].div.withConfig({
   displayName: "CardContent__StyledCardContent",
@@ -3522,7 +3701,7 @@ var StyledCardContent = styled__default["default"].div.withConfig({
 })(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.bottom);
 var CardContent = /*#__PURE__*/react.forwardRef(function CardContent(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$W);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$V);
   return /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3530,7 +3709,7 @@ var CardContent = /*#__PURE__*/react.forwardRef(function CardContent(_ref, ref)
   }));
 });
 
-var _excluded$V = ["children", "fullWidth"];
+var _excluded$U = ["children", "fullWidth"];
 var spacings$4 = primary$4.spacings,
   border$3 = primary$4.border;
 var StyledCardMedia = styled__default["default"].div.withConfig({
@@ -3544,7 +3723,7 @@ var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
   var children = _ref2.children,
     _ref2$fullWidth = _ref2.fullWidth,
     fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$V);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$U);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref,
     fullWidth: fullWidth
@@ -3554,7 +3733,7 @@ var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
   }));
 });
 
-var _excluded$U = ["children"];
+var _excluded$T = ["children"];
 var spacings$3 = primary$4.spacings;
 var StyledCardHeader = styled__default["default"].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
@@ -3562,7 +3741,7 @@ var StyledCardHeader = styled__default["default"].div.withConfig({
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
 var CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$U);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$T);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -3571,14 +3750,14 @@ var CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   }));
 });
 
-var _excluded$T = ["children"];
+var _excluded$S = ["children"];
 var StyledCardHeaderTitle = styled__default["default"].div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
 var CardHeaderTitle = /*#__PURE__*/react.forwardRef(function CardHeaderTitle(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$T);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$S);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -3625,7 +3804,7 @@ var topbar = {
   }
 };
 
-var _excluded$S = ["children", "elevation", "sticky"];
+var _excluded$R = ["children", "elevation", "sticky"];
 var StyledTopBar = styled__default["default"](Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
@@ -3640,7 +3819,7 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
     elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
     _ref2$sticky = _ref2.sticky,
     sticky = _ref2$sticky === void 0 ? true : _ref2$sticky,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$S);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$R);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -3663,14 +3842,14 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
 
 // TopBar.displayName = 'eds-topbar'
 
-var _excluded$R = ["children"];
+var _excluded$Q = ["children"];
 var StyledActions = styled__default["default"].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
 var Actions = /*#__PURE__*/react.forwardRef(function Actions(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$R);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$Q);
   return /*#__PURE__*/jsxRuntime.jsx(StyledActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3680,14 +3859,14 @@ var Actions = /*#__PURE__*/react.forwardRef(function Actions(_ref, ref) {
 
 // Actions.displayName = 'eds-topbar-actions'
 
-var _excluded$Q = ["children"];
+var _excluded$P = ["children"];
 var StyledHeader = styled__default["default"].div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:12px;align-items:center;"]);
 var Header$2 = /*#__PURE__*/react.forwardRef(function Header(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$Q);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$P);
   return /*#__PURE__*/jsxRuntime.jsx(StyledHeader, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3697,14 +3876,14 @@ var Header$2 = /*#__PURE__*/react.forwardRef(function Header(_ref, ref) {
 
 // Header.displayName = 'eds-topbar-header'
 
-var _excluded$P = ["children"];
+var _excluded$O = ["children"];
 var StyledCustomContent = styled__default["default"].div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
 var CustomContent = /*#__PURE__*/react.forwardRef(function CustomContent(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$P);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$O);
   return /*#__PURE__*/jsxRuntime.jsx(StyledCustomContent, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3722,17 +3901,17 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
-var background$a = edsTokens.tokens.colors.ui.background__scrim.rgba;
+var background$9 = edsTokens.tokens.colors.ui.background__scrim.rgba;
 var scrim = {
-  background: background$a
+  background: background$9
 };
 
-var _excluded$O = ["children", "onClose", "open", "isDismissable"];
-var background$9 = scrim.background;
-var StyledScrim = styled__default["default"](reactDomInteractions.FloatingOverlay).withConfig({
+var _excluded$N = ["children", "onClose", "open", "isDismissable"];
+var background$8 = scrim.background;
+var StyledScrim = styled__default["default"](react$1.FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$9);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$8);
 var ScrimContent = styled__default["default"].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -3743,7 +3922,7 @@ var Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
     open = _ref.open,
     _ref$isDismissable = _ref.isDismissable,
     isDismissable = _ref$isDismissable === void 0 ? false : _ref$isDismissable,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$O);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$N);
   var scrimRef = react.useRef(null);
   var combinedScrimRef = react.useMemo(function () {
     return edsUtils.mergeRefs(scrimRef, ref);
@@ -3778,15 +3957,15 @@ var spacingMedium$5 = edsTokens.tokens.spacings.comfortable.medium,
   _tokens$typography = edsTokens.tokens.typography,
   accordion_header = _tokens$typography.ui.accordion_header,
   body_long = _tokens$typography.paragraph.body_long,
-  background$8 = edsTokens.tokens.colors.ui.background__default.rgba,
-  borderRadius$6 = edsTokens.tokens.shape.corners.borderRadius;
+  background$7 = edsTokens.tokens.colors.ui.background__default.rgba,
+  borderRadius$5 = edsTokens.tokens.shape.corners.borderRadius;
 var dialog = {
   width: '252px',
-  background: background$8,
+  background: background$7,
   typography: accordion_header,
   border: {
     type: 'border',
-    radius: borderRadius$6
+    radius: borderRadius$5
   },
   spacings: {
     bottom: spacingMedium$5
@@ -3818,7 +3997,7 @@ var dialog = {
   }
 };
 
-var _excluded$N = ["children", "open", "onClose", "isDismissable"];
+var _excluded$M = ["children", "open", "onClose", "isDismissable"];
 var StyledDialog = styled__default["default"](Paper).attrs({
   tabIndex: 0,
   role: 'dialog',
@@ -3830,7 +4009,7 @@ var StyledDialog = styled__default["default"](Paper).attrs({
   componentId: "sc-1mewo3f-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return styled.css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", " ", " grid-gap:", ";"], theme.width, theme.background, edsUtils.typographyTemplate(theme.typography), edsUtils.bordersTemplate(theme.border), theme.spacings.bottom);
+  return styled.css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";overflow:hidden;"], theme.width, theme.background, edsUtils.typographyTemplate(theme.typography), edsUtils.bordersTemplate(theme.border), theme.spacings.bottom);
 });
 var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
   var children = _ref2.children,
@@ -3838,13 +4017,13 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
     onClose = _ref2.onClose,
     _ref2$isDismissable = _ref2.isDismissable,
     isDismissable = _ref2$isDismissable === void 0 ? false : _ref2$isDismissable,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$N);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$M);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
     density: density
   }, dialog);
-  var _useFloating = reactDomInteractions.useFloating(),
+  var _useFloating = react$1.useFloating(),
     floating = _useFloating.floating,
     context = _useFloating.context;
   var handleDismiss = function handleDismiss() {
@@ -3856,7 +4035,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
   var rest = _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     open: open
   });
-  return /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
     id: "eds-dialog-container",
     children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
       theme: token,
@@ -3864,7 +4043,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
         open: true,
         isDismissable: isDismissable,
         onClose: handleDismiss,
-        children: /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
           context: context,
           modal: true,
           returnFocus: true,
@@ -3882,7 +4061,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
 
 // Dialog.displayName = 'EdsDialog'
 
-var _excluded$M = ["children"];
+var _excluded$L = ["children"];
 var StyledDialogActions = styled__default["default"].div.withConfig({
   displayName: "DialogActions__StyledDialogActions",
   componentId: "sc-16ydtxd-0"
@@ -3893,7 +4072,7 @@ var StyledDialogActions = styled__default["default"].div.withConfig({
 });
 var DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions(_ref2, ref) {
   var children = _ref2.children,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$M);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$L);
   return /*#__PURE__*/jsxRuntime.jsx(StyledDialogActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3903,7 +4082,7 @@ var DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions(_ref2,
 
 // Actions.displayName = 'EdsDialogActions'
 
-var _excluded$L = ["children"];
+var _excluded$K = ["children"];
 var StyledDialogTitle = styled__default["default"].div.withConfig({
   displayName: "DialogTitle__StyledDialogTitle",
   componentId: "sc-1t3jljt-0"
@@ -3914,7 +4093,7 @@ var StyledDialogTitle = styled__default["default"].div.withConfig({
 });
 var DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$L);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$K);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledDialogTitle, _objectSpread__default["default"](_objectSpread__default["default"]({
       id: "eds-dialog-title",
@@ -3925,24 +4104,24 @@ var DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle(_ref2, ref)
   });
 });
 
-var _excluded$K = ["children", "scrollable"];
+var _excluded$J = ["children", "scrollable"];
 var StyledDialogContent = styled__default["default"].div.withConfig({
   displayName: "DialogContent__StyledDialogContent",
   componentId: "sc-1tze18k-0"
 })(function (_ref) {
   var theme = _ref.theme,
     scrollable = _ref.scrollable;
-  return styled.css(["", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], edsUtils.typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, scrollable && styled.css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+  return styled.css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, edsUtils.typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, scrollable && styled.css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
 });
 var StyledDivider$2 = styled__default["default"](Divider).withConfig({
   displayName: "DialogContent__StyledDivider",
   componentId: "sc-1tze18k-1"
-})(["width:100%;margin-bottom:0;"]);
+})(["width:100%;margin:0;"]);
 var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2, ref) {
   var children = _ref2.children,
     _ref2$scrollable = _ref2.scrollable,
     scrollable = _ref2$scrollable === void 0 ? false : _ref2$scrollable,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$K);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$J);
   var props = _objectSpread__default["default"]({
     scrollable: scrollable,
     ref: ref
@@ -3959,7 +4138,7 @@ var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2,
   });
 });
 
-var _excluded$J = ["children"];
+var _excluded$I = ["children"];
 var StyledDialogHeader = styled__default["default"].div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",
   componentId: "sc-mbwcos-0"
@@ -3973,7 +4152,7 @@ var StyledDivider$1 = styled__default["default"](Divider).withConfig({
 })(["margin-bottom:0;"]);
 var DialogHeader = /*#__PURE__*/react.forwardRef(function DialogHeader(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$J);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$I);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -3998,18 +4177,18 @@ Dialog.Title.displayName = 'Dialog.Title';
 Dialog.Content.displayName = 'Dialog.Content';
 Dialog.Header.displayName = 'Dialog.Header';
 
-var _tokens$colors$c = edsTokens.tokens.colors,
-  _tokens$colors$intera$9 = _tokens$colors$c.interactive,
+var _tokens$colors$b = edsTokens.tokens.colors,
+  _tokens$colors$intera$9 = _tokens$colors$b.interactive,
   primaryColor$3 = _tokens$colors$intera$9.primary__resting.rgba,
   primaryHoverAlt$5 = _tokens$colors$intera$9.primary__hover_alt.rgba,
   primaryHover$3 = _tokens$colors$intera$9.primary__hover.rgba,
   focusColor$2 = _tokens$colors$intera$9.focus.rgba,
-  labelColor = _tokens$colors$c.text.static_icons__tertiary.rgba,
-  borderRadius$5 = edsTokens.tokens.shape.corners.borderRadius,
-  _tokens$spacings$comf$b = edsTokens.tokens.spacings.comfortable,
-  small$4 = _tokens$spacings$comf$b.small,
-  x_large$1 = _tokens$spacings$comf$b.x_large,
-  xxx_large$1 = _tokens$spacings$comf$b.xxx_large,
+  labelColor = _tokens$colors$b.text.static_icons__tertiary.rgba,
+  borderRadius$4 = edsTokens.tokens.shape.corners.borderRadius,
+  _tokens$spacings$comf$a = edsTokens.tokens.spacings.comfortable,
+  small$4 = _tokens$spacings$comf$a.small,
+  x_large$1 = _tokens$spacings$comf$a.x_large,
+  xxx_large$1 = _tokens$spacings$comf$a.xxx_large,
   typography$9 = edsTokens.tokens.typography;
 var tableOfContents = {
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$9.navigation.button), {}, {
@@ -4061,7 +4240,7 @@ var tableOfContents = {
     hover: {
       background: primaryHoverAlt$5,
       border: {
-        radius: borderRadius$5
+        radius: borderRadius$4
       },
       entities: {
         icon: {
@@ -4078,7 +4257,7 @@ var tableOfContents = {
   }
 };
 
-var _excluded$I = ["children", "sticky", "label"];
+var _excluded$H = ["children", "sticky", "label"];
 var StyledTableOfContents = styled__default["default"].nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
@@ -4104,7 +4283,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
     sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
     _ref3$label = _ref3.label,
     label = _ref3$label === void 0 ? '' : _ref3$label,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$I);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$H);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -4127,7 +4306,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
   });
 });
 
-var _excluded$H = ["children"];
+var _excluded$G = ["children"];
 var StyledLinkItem = styled__default["default"].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
@@ -4137,7 +4316,7 @@ var StyledLinkItem = styled__default["default"].li.withConfig({
 });
 var LinkItem = /*#__PURE__*/react.forwardRef(function LinkItem(_ref2, ref) {
   var children = _ref2.children,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$H);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$G);
   return /*#__PURE__*/jsxRuntime.jsx(StyledLinkItem, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: children
@@ -4149,14 +4328,14 @@ TableOfContents.LinkItem = LinkItem;
 TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
 
 var _tokens$colors$ui$3 = edsTokens.tokens.colors.ui,
-  background$7 = _tokens$colors$ui$3.background__default.rgba,
+  background$6 = _tokens$colors$ui$3.background__default.rgba,
   borderColor = _tokens$colors$ui$3.background__light.rgba,
-  _tokens$spacings$comf$a = edsTokens.tokens.spacings.comfortable,
-  spacingXXS = _tokens$spacings$comf$a.xx_small,
-  spacingMedium$4 = _tokens$spacings$comf$a.medium,
+  _tokens$spacings$comf$9 = edsTokens.tokens.spacings.comfortable,
+  spacingXXS = _tokens$spacings$comf$9.xx_small,
+  spacingMedium$4 = _tokens$spacings$comf$9.medium,
   body_short = edsTokens.tokens.typography.paragraph.body_short;
 var comfortable$2 = {
-  background: background$7,
+  background: background$6,
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
@@ -4180,15 +4359,15 @@ var variants = {
   xlarge: '640px'
 };
 
-var _excluded$G = ["variant", "width", "title", "children", "open", "onClose"];
-var background$6 = comfortable$2.background,
+var _excluded$F = ["variant", "width", "title", "children", "open", "onClose"];
+var background$5 = comfortable$2.background,
   spacings$2 = comfortable$2.spacings,
   border$2 = comfortable$2.border,
   typography$8 = comfortable$2.typography;
 var StyledSideSheet = styled__default["default"].div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$6, function (_ref) {
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$5, function (_ref) {
   var width = _ref.width;
   return width;
 }, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$8));
@@ -4206,7 +4385,7 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
     _ref2$open = _ref2.open,
     open = _ref2$open === void 0 ? true : _ref2$open,
     onClose = _ref2.onClose,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$G);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$F);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref,
     width: width || variants[variant]
@@ -4232,16 +4411,16 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   }));
 });
 
-var _tokens$spacings$comf$9 = edsTokens.tokens.spacings.comfortable,
-  x_small$3 = _tokens$spacings$comf$9.x_small,
-  small$3 = _tokens$spacings$comf$9.small,
-  medium$3 = _tokens$spacings$comf$9.medium,
+var _tokens$spacings$comf$8 = edsTokens.tokens.spacings.comfortable,
+  x_small$3 = _tokens$spacings$comf$8.x_small,
+  small$3 = _tokens$spacings$comf$8.small,
+  medium$3 = _tokens$spacings$comf$8.medium,
   chipTypography = edsTokens.tokens.typography.ui.chip__badge,
-  _tokens$colors$b = edsTokens.tokens.colors,
-  _tokens$colors$ui$2 = _tokens$colors$b.ui,
+  _tokens$colors$a = edsTokens.tokens.colors,
+  _tokens$colors$ui$2 = _tokens$colors$a.ui,
   backgroundColorDefault$1 = _tokens$colors$ui$2.background__default.rgba,
   backgroundColor$2 = _tokens$colors$ui$2.background__light.rgba,
-  _tokens$colors$intera$8 = _tokens$colors$b.interactive,
+  _tokens$colors$intera$8 = _tokens$colors$a.interactive,
   primaryColor$2 = _tokens$colors$intera$8.primary__resting.rgba,
   primaryHoverAlt$4 = _tokens$colors$intera$8.primary__hover_alt.rgba,
   primaryHover$2 = _tokens$colors$intera$8.primary__hover.rgba,
@@ -4251,13 +4430,13 @@ var _tokens$spacings$comf$9 = edsTokens.tokens.spacings.comfortable,
   errorColor = _tokens$colors$intera$8.danger__resting.rgba,
   errorColorHover = _tokens$colors$intera$8.danger__hover.rgba,
   errorBackgroundHover = _tokens$colors$intera$8.danger__highlight.rgba,
-  borderRadius$4 = edsTokens.tokens.shape.rounded.borderRadius,
+  borderRadius$3 = edsTokens.tokens.shape.rounded.borderRadius,
   focusOutlineWidth$5 = edsTokens.tokens.interactions.focused.width;
 var enabled$3 = {
   background: backgroundColor$2,
   height: '22px',
   border: {
-    radius: borderRadius$4,
+    radius: borderRadius$3,
     color: 'transparent',
     type: 'border',
     width: '1px',
@@ -4299,7 +4478,7 @@ var enabled$3 = {
       height: medium$3,
       width: medium$3,
       border: {
-        radius: borderRadius$4,
+        radius: borderRadius$3,
         type: 'border',
         width: 0
       },
@@ -4318,7 +4497,7 @@ var error$2 = {
     color: errorColor,
     width: '1px',
     style: 'solid',
-    radius: borderRadius$4
+    radius: borderRadius$3
   },
   typography: {
     color: errorColor
@@ -4361,10 +4540,10 @@ var Icon = styled__default["default"](Icon$1).withConfig({
   return disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]);
 });
 
-var _excluded$F = ["children", "onDelete", "disabled", "onClick", "variant"];
+var _excluded$E = ["children", "onDelete", "disabled", "onClick", "variant"];
 var enabled$1 = enabled$3,
   error = error$2;
-var background$5 = enabled$1.background,
+var background$4 = enabled$1.background,
   height = enabled$1.height,
   typography$7 = enabled$1.typography,
   spacings$1 = enabled$1.spacings,
@@ -4380,7 +4559,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$5, height, typography$7.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), function (_ref2) {
   var clickable = _ref2.clickable;
   return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
 }, function (_ref3) {
@@ -4395,7 +4574,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
   }
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$5, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
+  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$4, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
 }, function (_ref5) {
   var deletable = _ref5.deletable;
   return deletable && styled.css(["padding-right:4px;"]);
@@ -4411,7 +4590,7 @@ var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
     onClick = _ref7.onClick,
     _ref7$variant = _ref7.variant,
     variant = _ref7$variant === void 0 ? 'default' : _ref7$variant,
-    other = _objectWithoutProperties__default["default"](_ref7, _excluded$F);
+    other = _objectWithoutProperties__default["default"](_ref7, _excluded$E);
   var handleDelete = disabled ? undefined : onDelete;
   var handleClick = disabled ? undefined : onClick;
   var deletable = handleDelete !== undefined;
@@ -4484,7 +4663,7 @@ var avatar = {
   }
 };
 
-var _excluded$E = ["src", "alt", "size", "disabled"];
+var _excluded$D = ["src", "alt", "size", "disabled"];
 var StyledAvatar = styled__default["default"].div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
@@ -4507,7 +4686,7 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
     size = _ref3$size === void 0 ? 24 : _ref3$size,
     _ref3$disabled = _ref3.disabled,
     disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$E);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$D);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread__default["default"](_objectSpread__default["default"]({
     size: size,
     disabled: disabled,
@@ -4522,7 +4701,7 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$D = ["onChange", "style", "className"];
+var _excluded$C = ["onChange", "style", "className"];
 var SearchInput = styled__default["default"](Input$4).withConfig({
   displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-0"
@@ -4535,7 +4714,7 @@ var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
   var _onChange = _ref.onChange,
     style = _ref.style,
     className = _ref.className,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$D);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$C);
   var inputRef = react.useRef(null);
   var _useState = react.useState(Boolean(rest.defaultValue)),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -4595,19 +4774,19 @@ var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
   });
 });
 
-var _tokens$colors$a = edsTokens.tokens.colors,
-  _tokens$colors$ui$1 = _tokens$colors$a.ui,
+var _tokens$colors$9 = edsTokens.tokens.colors,
+  _tokens$colors$ui$1 = _tokens$colors$9.ui,
   backgroundColor$1 = _tokens$colors$ui$1.background__light.rgba,
   backgroundColorDefault = _tokens$colors$ui$1.background__default.rgba,
   backgroundColorMedium$1 = _tokens$colors$ui$1.background__medium.rgba,
-  _tokens$colors$intera$7 = _tokens$colors$a.interactive,
+  _tokens$colors$intera$7 = _tokens$colors$9.interactive,
   indicatorColor = _tokens$colors$intera$7.primary__resting.rgba,
   primaryHoverAlt$3 = _tokens$colors$intera$7.primary__hover_alt.rgba,
   primaryHover$1 = _tokens$colors$intera$7.primary__hover.rgba,
   focusOutlineColor$4 = _tokens$colors$intera$7.focus.rgba,
   backgroundColorDisabled = _tokens$colors$intera$7.disabled__fill.rgba,
   backgroundBorderDisabled = _tokens$colors$intera$7.disabled__border.rgba,
-  textColor$1 = _tokens$colors$a.text.static_icons__tertiary.rgba,
+  textColor$1 = _tokens$colors$9.text.static_icons__tertiary.rgba,
   paragraph = edsTokens.tokens.typography.paragraph,
   focusOutlineWidth$4 = edsTokens.tokens.interactions.focused.width;
 var slider = {
@@ -4737,7 +4916,7 @@ var Output = /*#__PURE__*/react.forwardRef(function Output(_ref2, ref) {
   });
 });
 
-var _excluded$C = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
+var _excluded$B = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
 var handle$1 = slider.entities.handle,
   _disabled = slider.states.disabled;
 var track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
@@ -4763,7 +4942,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
     _onMouseUp = _ref.onMouseUp,
     _onKeyUp = _ref.onKeyUp,
     disabled = _ref.disabled,
-    restProps = _objectWithoutProperties__default["default"](_ref, _excluded$C);
+    restProps = _objectWithoutProperties__default["default"](_ref, _excluded$B);
   return /*#__PURE__*/jsxRuntime.jsx(StyledSliderInput, _objectSpread__default["default"](_objectSpread__default["default"]({}, restProps), {}, {
     value: value,
     ref: ref,
@@ -4785,7 +4964,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
 });
 SliderInput.displayName = 'SliderInput';
 
-var _excluded$B = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
+var _excluded$A = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
 var _tokens$entities$1 = slider.entities,
   track = _tokens$entities$1.track,
   handle = _tokens$entities$1.handle,
@@ -4862,7 +5041,7 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     disabled = _ref10.disabled,
     ariaLabelledby = _ref10.ariaLabelledby,
     ariaLabelledbyNative = _ref10['aria-labelledby'],
-    rest = _objectWithoutProperties__default["default"](_ref10, _excluded$B);
+    rest = _objectWithoutProperties__default["default"](_ref10, _excluded$A);
   var isRangeSlider = Array.isArray(value);
   var parsedValue = isRangeSlider ? value : [value];
   var _useState = react.useState(parsedValue),
@@ -5072,171 +5251,6 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   });
 });
 
-var _tokens$colors$9 = edsTokens.tokens.colors,
-  white = _tokens$colors$9.text.static_icons__primary_white.rgba,
-  background$4 = _tokens$colors$9.ui.background__overlay.rgba,
-  ui = edsTokens.tokens.typography.ui,
-  _tokens$spacings$comf$8 = edsTokens.tokens.spacings.comfortable,
-  spacingXlarge = _tokens$spacings$comf$8.x_large,
-  spacingSmall$3 = _tokens$spacings$comf$8.small,
-  borderRadius$3 = edsTokens.tokens.shape.corners.borderRadius;
-var tooltip = {
-  typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, ui.tooltip), {}, {
-    color: white
-  }),
-  background: background$4,
-  border: {
-    type: 'border',
-    radius: borderRadius$3
-  },
-  entities: {
-    tooltip: {
-      height: spacingXlarge
-    },
-    arrow: {
-      width: '6px',
-      height: spacingSmall$3,
-      spacings: {
-        bottom: '-6px',
-        top: '-6px',
-        left: '-6px',
-        right: '-6px'
-      }
-    }
-  },
-  spacings: {
-    left: spacingSmall$3,
-    right: spacingSmall$3,
-    top: spacingSmall$3,
-    bottom: spacingSmall$3
-  }
-};
-
-var _excluded$A = ["title", "placement", "children", "style", "enterDelay"];
-var StyledTooltip = styled__default["default"].div.withConfig({
-  displayName: "Tooltip__StyledTooltip",
-  componentId: "sc-m2im2p-0"
-})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
-var ArrowWrapper$1 = styled__default["default"].div.withConfig({
-  displayName: "Tooltip__ArrowWrapper",
-  componentId: "sc-m2im2p-1"
-})(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
-var TooltipArrow = styled__default["default"].svg.withConfig({
-  displayName: "Tooltip__TooltipArrow",
-  componentId: "sc-m2im2p-2"
-})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-var Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
-  var title = _ref.title,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-    children = _ref.children,
-    style = _ref.style,
-    _ref$enterDelay = _ref.enterDelay,
-    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$A);
-  var arrowRef = react.useRef(null);
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var shouldOpen = title !== '';
-  var _useFloating = reactDomInteractions.useFloating({
-      placement: placement,
-      open: open,
-      onOpenChange: setOpen,
-      middleware: [reactDomInteractions.offset(14), reactDomInteractions.flip(), reactDomInteractions.shift({
-        padding: 8
-      }), reactDomInteractions.arrow({
-        element: arrowRef
-      })],
-      whileElementsMounted: reactDomInteractions.autoUpdate
-    }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    reference = _useFloating.reference,
-    floating = _useFloating.floating,
-    strategy = _useFloating.strategy,
-    context = _useFloating.context,
-    _useFloating$middlewa = _useFloating.middlewareData.arrow;
-  _useFloating$middlewa = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa;
-  var arrowX = _useFloating$middlewa.x,
-    arrowY = _useFloating$middlewa.y,
-    finalPlacement = _useFloating.placement;
-  var anchorRef = react.useMemo(function () {
-    return edsUtils.mergeRefs(reference, children === null || children === void 0 ? void 0 : children.ref);
-  }, [reference, children === null || children === void 0 ? void 0 : children.ref]);
-  var tooltipRef = react.useMemo(function () {
-    return edsUtils.mergeRefs(floating, ref);
-  }, [floating, ref]);
-  var _useInteractions = reactDomInteractions.useInteractions([reactDomInteractions.useHover(context, {
-      delay: {
-        open: enterDelay
-      }
-    }), reactDomInteractions.useFocus(context), reactDomInteractions.useRole(context, {
-      role: 'tooltip'
-    }), reactDomInteractions.useDismiss(context)]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  react.useEffect(function () {
-    var staticSide = {
-      top: 'bottom',
-      right: 'left',
-      bottom: 'top',
-      left: 'right'
-    }[finalPlacement.split('-')[0]];
-    var arrowTransform = 'none';
-    switch (staticSide) {
-      case 'right':
-        arrowTransform = 'rotateY(180deg)';
-        break;
-      case 'left':
-        arrowTransform = 'none';
-        break;
-      case 'top':
-        arrowTransform = 'rotate(90deg)';
-        break;
-      case 'bottom':
-        arrowTransform = 'rotate(-90deg)';
-        break;
-    }
-    if (arrowRef.current) {
-      var _Object$assign;
-      Object.assign(arrowRef.current.style, (_Object$assign = {
-        left: arrowX != null ? "".concat(arrowX, "px") : '',
-        top: arrowY != null ? "".concat(arrowY, "px") : '',
-        right: '',
-        bottom: ''
-      }, _defineProperty__default["default"](_Object$assign, staticSide, '-6px'), _defineProperty__default["default"](_Object$assign, "transform", arrowTransform), _Object$assign));
-    }
-  });
-  var updatedChildren = /*#__PURE__*/react.cloneElement(children, _objectSpread__default["default"]({}, getReferenceProps(_objectSpread__default["default"]({
-    ref: anchorRef
-  }, children.props))));
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
-      id: "eds-tooltip-container",
-      children: shouldOpen && open && /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, rest), getFloatingProps({
-        ref: tooltipRef,
-        style: _objectSpread__default["default"](_objectSpread__default["default"]({}, style), {}, {
-          position: strategy,
-          top: y || 0,
-          left: x || 0
-        })
-      })), {}, {
-        children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
-          ref: arrowRef,
-          children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
-            className: "arrowSvg",
-            children: /*#__PURE__*/jsxRuntime.jsx("path", {
-              d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
-            })
-          })
-        })]
-      }))
-    }), updatedChildren]
-  });
-});
-
 var _excluded$z = ["children"];
 var StyledSnackbarAction = styled__default["default"].div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
@@ -5468,16 +5482,16 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
     trapFocus = _ref5.trapFocus,
     rest = _objectWithoutProperties__default["default"](_ref5, _excluded$x);
   var arrowRef = react.useRef(null);
-  var _useFloating = reactDomInteractions.useFloating({
+  var _useFloating = react$1.useFloating({
       placement: placement,
       open: open,
       onOpenChange: onClose,
-      middleware: [reactDomInteractions.offset(14), reactDomInteractions.flip(), reactDomInteractions.shift({
+      middleware: [react$1.offset(14), react$1.flip(), react$1.shift({
         padding: 8
-      }), reactDomInteractions.arrow({
+      }), react$1.arrow({
         element: arrowRef
       })],
-      whileElementsMounted: reactDomInteractions.autoUpdate
+      whileElementsMounted: react$1.autoUpdate
     }),
     x = _useFloating.x,
     y = _useFloating.y,
@@ -5485,10 +5499,10 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
     floating = _useFloating.floating,
     strategy = _useFloating.strategy,
     context = _useFloating.context,
-    _useFloating$middlewa = _useFloating.middlewareData.arrow;
-  _useFloating$middlewa = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa;
-  var arrowX = _useFloating$middlewa.x,
-    arrowY = _useFloating$middlewa.y,
+    _useFloating$middlewa = _useFloating.middlewareData.arrow,
+    _useFloating$middlewa2 = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa,
+    arrowX = _useFloating$middlewa2.x,
+    arrowY = _useFloating$middlewa2.y,
     finalPlacement = _useFloating.placement;
   react.useEffect(function () {
     reference(anchorEl);
@@ -5496,7 +5510,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   var popoverRef = react.useMemo(function () {
     return edsUtils.mergeRefs(floating, ref);
   }, [floating, ref]);
-  var _useInteractions = reactDomInteractions.useInteractions([reactDomInteractions.useDismiss(context)]),
+  var _useInteractions = react$1.useInteractions([react$1.useDismiss(context)]),
     getFloatingProps = _useInteractions.getFloatingProps;
   react.useEffect(function () {
     if (arrowRef.current) {
@@ -5566,15 +5580,15 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
     }))
   });
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: withinPortal ? /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+    children: withinPortal ? /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       id: "eds-popover-container",
-      children: open && trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+      children: open && trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         modal: true,
         children: popover$1
       }) : open && popover$1
     }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+      children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         modal: true,
         children: popover$1
@@ -6556,7 +6570,7 @@ var menu = {
   }
 };
 
-var _excluded$i = ["children", "disabled", "index", "onClick"];
+var _excluded$i = ["children", "disabled", "index", "onClick", "closeMenuOnClick"];
 var typography$2 = menu.typography,
   _tokens$entities = menu.entities,
   _tokens$entities$item = _tokens$entities.item.states,
@@ -6594,6 +6608,8 @@ var MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
     _ref5$index = _ref5.index,
     index = _ref5$index === void 0 ? 0 : _ref5$index,
     _onClick = _ref5.onClick,
+    _ref5$closeMenuOnClic = _ref5.closeMenuOnClick,
+    closeMenuOnClick = _ref5$closeMenuOnClic === void 0 ? true : _ref5$closeMenuOnClic,
     rest = _objectWithoutProperties__default["default"](_ref5, _excluded$i);
   var _useMenu = useMenu(),
     focusedIndex = _useMenu.focusedIndex,
@@ -6623,7 +6639,7 @@ var MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
     onClick: function onClick(e) {
       if (_onClick) {
         _onClick(e);
-        if (onClose !== null) {
+        if (onClose !== null && closeMenuOnClick) {
           onClose(e);
         }
       }
@@ -6664,7 +6680,7 @@ var MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
 
 // MenuSection.displayName = 'EdsMenuSection'
 
-var _excluded$h = ["children"];
+var _excluded$h = ["addCloseMenuOnClickIndex", "children"];
 var List = styled__default["default"].div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
@@ -6673,8 +6689,13 @@ function isIndexable(item) {
   if ( /*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
   return false;
 }
+function closeMenuOnClick(item) {
+  if ( /*#__PURE__*/react.isValidElement(item) && item.type === MenuItem && item.props.closeMenuOnClick !== false) return true;
+  return false;
+}
 var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
-  var children = _ref.children,
+  var addCloseMenuOnClickIndex = _ref.addCloseMenuOnClickIndex,
+    children = _ref.children,
     rest = _objectWithoutProperties__default["default"](_ref, _excluded$h);
   var _useMenu = useMenu(),
     focusedIndex = _useMenu.focusedIndex,
@@ -6703,12 +6724,15 @@ var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
       } else {
         index++;
         if (isIndexable(child)) focusableIndexs.push(index);
+        if (closeMenuOnClick(child)) {
+          addCloseMenuOnClickIndex(index);
+        }
         return /*#__PURE__*/react.cloneElement(child, {
           index: index
         });
       }
     });
-  }, [children, focusableIndexs, index]);
+  }, [children, focusableIndexs, index, addCloseMenuOnClickIndex]);
   var firstFocusIndex = focusableIndexs[0];
   var lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   react.useEffect(function () {
@@ -6771,7 +6795,11 @@ var MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2,
   var _useMenu = useMenu(),
     setOnClose = _useMenu.setOnClose,
     onClose = _useMenu.onClose,
-    setInitialFocus = _useMenu.setInitialFocus;
+    setInitialFocus = _useMenu.setInitialFocus,
+    focusedIndex = _useMenu.focusedIndex;
+  var closeMenuOnClickIndexes = react.useMemo(function () {
+    return [];
+  }, []);
   react.useEffect(function () {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
@@ -6811,7 +6839,7 @@ var MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2,
     }
   });
   edsUtils.useGlobalKeyPress('Enter', function () {
-    if (open && onClose !== null) {
+    if (open && onClose !== null && closeMenuOnClickIndexes.includes(focusedIndex)) {
       setTimeout(function () {
         if (window.document.contains(anchorEl)) {
           anchorEl.focus();
@@ -6819,7 +6847,14 @@ var MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2,
       }, 0);
     }
   });
-  return /*#__PURE__*/jsxRuntime.jsx(MenuList, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+  var addCloseMenuOnClickIndex = function addCloseMenuOnClickIndex(index) {
+    if (closeMenuOnClickIndexes.indexOf(index) < 0) {
+      closeMenuOnClickIndexes.push(index);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(MenuList, _objectSpread__default["default"](_objectSpread__default["default"]({
+    addCloseMenuOnClickIndex: addCloseMenuOnClickIndex
+  }, rest), {}, {
     ref: ref,
     children: children
   }));
@@ -6838,11 +6873,11 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
   var token = edsUtils.useToken({
     density: density
   }, menu);
-  var _useFloating = reactDomInteractions.useFloating({
+  var _useFloating = react$1.useFloating({
       placement: placement,
       open: open,
       onOpenChange: onClose,
-      middleware: [reactDomInteractions.offset(4), reactDomInteractions.flip(), reactDomInteractions.shift({
+      middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
         padding: 8
       })]
     }),
@@ -6860,12 +6895,12 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
   var popoverRef = react.useMemo(function () {
     return edsUtils.mergeRefs(floating, ref);
   }, [floating, ref]);
-  react.useEffect(function () {
+  edsUtils.useIsomorphicLayoutEffect(function () {
     if (refs.reference.current && refs.floating.current && open) {
-      return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
+      return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, open]);
-  var _useInteractions = reactDomInteractions.useInteractions([reactDomInteractions.useDismiss(context, {
+  var _useInteractions = react$1.useInteractions([react$1.useDismiss(context, {
       escapeKey: false
     })]),
     getFloatingProps = _useInteractions.getFloatingProps;
@@ -6879,7 +6914,7 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
     open: open
   });
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       id: "eds-menu-container",
       children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
         theme: token,
@@ -8529,11 +8564,11 @@ function AutocompleteInner(props, ref) {
       openMenu();
     }
   };
-  var _useFloating = reactDomInteractions.useFloating({
+  var _useFloating = react$1.useFloating({
       placement: 'bottom-start',
-      middleware: [reactDomInteractions.offset(4), reactDomInteractions.flip(), reactDomInteractions.shift({
+      middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
         padding: 8
-      }), reactDomInteractions.size({
+      }), react$1.size({
         apply: function apply(_ref10) {
           var rects = _ref10.rects,
             availableHeight = _ref10.availableHeight,
@@ -8554,14 +8589,14 @@ function AutocompleteInner(props, ref) {
     reference = _useFloating.reference,
     floating = _useFloating.floating,
     strategy = _useFloating.strategy;
-  var _useInteractions = reactDomInteractions.useInteractions([]),
+  var _useInteractions = react$1.useInteractions([]),
     getFloatingProps = _useInteractions.getFloatingProps;
   react.useEffect(function () {
     reference(anchorRef.current);
   }, [anchorRef, reference]);
   react.useEffect(function () {
     if (refs.reference.current && refs.floating.current && isOpen) {
-      return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
+      return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
   var clear = function clear() {
@@ -8677,7 +8712,7 @@ function AutocompleteInner(props, ref) {
             }))]
           })
         }, other))
-      }), disablePortal ? optionsList : /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+      }), disablePortal ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
       })]
@@ -9037,7 +9072,7 @@ var ToggleContainer = styled__default["default"].div.withConfig({
   return styled.css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
 });
 var SideBarToggle = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2, ref) {
-  var rest = _extends__default["default"]({}, _ref2);
+  var rest = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref2), _ref2));
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });