@equinor/eds-core-react 1.0.0-beta.1 → 1.0.0

package/dist/eds-core-react.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');
@@ -5,9 +6,9 @@ var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
 var edsUtils = require('@equinor/eds-utils');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var react$1 = require('@floating-ui/react');
 var edsIcons = require('@equinor/eds-icons');
-var ReactDom = require('react-dom');
 var downshift = require('downshift');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactAria = require('react-aria');
@@ -18,26 +19,7 @@ var utils = require('@react-aria/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
 
 const {
   typography: {
@@ -172,12 +154,8 @@ const button = {
   }
 };
 
-var _placeholder = {
-  '@@functional/placeholder': true
-};
-
 function _isPlaceholder(a) {
-  return a === _placeholder;
+  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
 }
 
 /**
@@ -291,7 +269,7 @@ function _isObject(x) {
  * @param {Object} l
  * @param {Object} r
  * @return {Object}
- * @see R.mergeDeepWithKey, R.merge, R.mergeWith
+ * @see R.mergeDeepWithKey, R.mergeWith
  * @example
  *
  *      let concatValues = (k, l, r) => k == 'values' ? R.concat(l, r) : r
@@ -371,7 +349,7 @@ var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj,
  * @param {Object} lObj
  * @param {Object} rObj
  * @return {Object}
- * @see R.merge, R.mergeDeepLeft, R.mergeDeepWith, R.mergeDeepWithKey
+ * @see R.mergeDeepLeft, R.mergeDeepWith, R.mergeDeepWithKey
  * @example
  *
  *      R.mergeDeepRight({ name: 'fred', age: 10, contact: { email: 'moo@example.com' }},
@@ -399,7 +377,7 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
  * @param {Object} l
  * @param {Object} r
  * @return {Object}
- * @see R.mergeDeepWith, R.merge, R.mergeWithKey
+ * @see R.mergeDeepWith, R.mergeWithKey
  * @example
  *
  *      R.mergeWith(R.concat,
@@ -883,7 +861,7 @@ const primary$6 = mergeDeepRight(primary$a, contained_icon);
 const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
 const danger$2 = mergeDeepRight(danger$6, contained_icon);
 
-const token$5 = {
+const token$6 = {
   primary: {
     contained: primary$a,
     outlined: primary$9,
@@ -928,17 +906,18 @@ const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth({
   });
 });
 
-const initalState$3 = {
+const initalState$2 = {
   /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
-const EdsContext = /*#__PURE__*/react.createContext(initalState$3);
+const EdsContext = /*#__PURE__*/react.createContext(initalState$2);
 const EdsProvider = ({
   children,
-  density
+  density,
+  rootElement
 }) => {
   const [state, setState] = react.useState({
-    ...initalState$3,
+    ...initalState$2,
     density: density || 'comfortable'
   });
   const setDensity = density => setState(prevState => ({
@@ -952,6 +931,7 @@ const EdsProvider = ({
   }, [density, state.density]);
   const value = {
     density: state.density,
+    rootElement,
     setDensity
   };
   return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
@@ -979,12 +959,12 @@ const getVariant$1 = (tokenSet, variant) => {
 const getToken$1 = (variant, color) => {
   switch (color) {
     case 'danger':
-      return getVariant$1(token$5.danger, variant);
+      return getVariant$1(token$6.danger, variant);
     case 'secondary':
-      return getVariant$1(token$5.secondary, variant);
+      return getVariant$1(token$6.secondary, variant);
     case 'primary':
     default:
-      return getVariant$1(token$5.primary, variant);
+      return getVariant$1(token$6.primary, variant);
   }
 };
 const Inner = styled__default.default.span.withConfig({
@@ -1008,6 +988,16 @@ const ButtonBase = styled__default.default.button.withConfig({
   } = states;
   return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, edsUtils.bordersTemplate(hover?.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
+const getElementType$1 = (disabled, customType, href) => {
+  if (disabled) return 'button';
+  if (customType) return customType;
+  if (href) return 'a';
+  return 'button';
+};
+const getButtonType = (href, customElementType) => {
+  if (href || customElementType) return undefined;
+  return 'button';
+};
 const Button$2 = /*#__PURE__*/react.forwardRef(function Button({
   color = 'primary',
   variant = 'contained',
@@ -1024,25 +1014,24 @@ const Button$2 = /*#__PURE__*/react.forwardRef(function Button({
   const token = edsUtils.useToken({
     density
   }, getToken$1(variant, color));
-  const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
-  const type = href || other.as ? undefined : 'button';
-  tabIndex = disabled ? -1 : tabIndex;
+  const as = getElementType$1(disabled, other.as, href);
+  const type = getButtonType(href, other.as);
+  const adjustedTabIndex = disabled ? -1 : tabIndex;
   const buttonProps = {
     ref,
-    as,
     href,
     type,
     disabled,
-    tabIndex,
-    ...other
+    tabIndex: adjustedTabIndex,
+    ...other,
+    as
   };
+  const Container = fullWidth ? InnerFullWidth : Inner;
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(ButtonBase, {
       ...buttonProps,
-      children: fullWidth ? /*#__PURE__*/jsxRuntime.jsx(InnerFullWidth, {
-        children: children
-      }) : /*#__PURE__*/jsxRuntime.jsx(Inner, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container, {
         children: children
       })
     })
@@ -1058,7 +1047,6 @@ const {
 } = edsTokens.tokens;
 const group = {
   border: {
-    type: 'border',
     radius: borderRadius$8
   }
 };
@@ -1066,7 +1054,7 @@ const group = {
 const {
   border: border$5
 } = group;
-const radius$1 = border$5.type === 'border' && border$5.radius;
+const radius$1 = border$5.radius;
 const ButtonGroupBase = styled__default.default.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"
@@ -1129,19 +1117,9 @@ const tooltip = {
     radius: borderRadius$7
   },
   entities: {
-    tooltip: {
-      height: spacingXlarge
-    },
     arrow: {
       width: '6px',
-      height: spacingSmall$4,
-      spacings: {
-        bottom: '-6px',
-        top: '-6px',
-        left: '-6px',
-        right: '-6px'
-      }
-    }
+      height: spacingSmall$4}
   },
   spacings: {
     left: spacingSmall$4,
@@ -1151,10 +1129,12 @@ const tooltip = {
   }
 };
 
-const StyledTooltip = styled__default.default.div.withConfig({
+const StyledTooltip = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).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);
+})(["inset:unset;border:0;overflow:visible;", " ", " ", " background:", ";white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}&::backdrop{background-color:transparent;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
 const ArrowWrapper$1 = styled__default.default.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
@@ -1169,11 +1149,16 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
   children,
   style,
   enterDelay = 100,
+  disabled = false,
+  portalContainer,
   ...rest
 }, ref) {
   const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const shouldOpen = title !== '';
+  const {
+    rootElement
+  } = useEds();
+  const shouldOpen = Boolean(title) && typeof document !== 'undefined';
   const {
     x,
     y,
@@ -1186,7 +1171,8 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
         y: arrowY
       } = {}
     },
-    placement: finalPlacement
+    placement: finalPlacement,
+    elements
   } = react$1.useFloating({
     placement,
     open,
@@ -1249,13 +1235,18 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
       ...children.props
     })
   });
-
-  //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(refs.domReference.current);
+  react.useEffect(() => {
+    if (!elements.floating) return;
+    if (elements.floating.isConnected && shouldOpen && open) {
+      elements.floating.showPopover();
+    }
+  }, [open, shouldOpen, elements.floating]);
   const TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
+    popover: "manual",
     ...rest,
     ...getFloatingProps({
       ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
       style: {
         ...style,
         position: strategy,
@@ -1274,12 +1265,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [inDialog ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: shouldOpen && open && TooltipEl
-    }) : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-      id: "eds-tooltip-container",
-      children: shouldOpen && open && TooltipEl
-    }), updatedChildren]
+    children: [shouldOpen && open && !disabled && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
   });
 });
 
@@ -1298,7 +1284,7 @@ const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton({
   }, [selectedIndexes]);
   function updateProps(child, isSelected, index) {
     const childElement = child;
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Button$2) {
+    if (/*#__PURE__*/react.isValidElement(child)) {
       const buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
@@ -1320,7 +1306,7 @@ const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton({
   const updatedChildren = react.Children.map(children, (child, index) => {
     const isSelected = pickedIndexes.includes(index);
     const childElement = child;
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$2) {
+    if (/*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$2) {
       const updatedGrandChildren = react.Children.map(childElement.props.children, grandChild => {
         return updateProps(grandChild, isSelected, index);
       });
@@ -1442,7 +1428,7 @@ const findColor = (inputColor = null) => typeof colors$5[inputColor] === 'undefi
 const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
 const StyledTypography$1 = styled__default.default.p.withConfig({
   displayName: "Typography__StyledTypography",
-  componentId: "sc-5ggzld-0"
+  componentId: "sc-179guof-0"
 })(["", " ", " ", " ", ""], ({
   $typography,
   $link
@@ -1455,7 +1441,7 @@ const StyledTypography$1 = styled__default.default.p.withConfig({
 }) => $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline)));
-const Typography$1 = /*#__PURE__*/react.forwardRef(function Typography({
+const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   variant = 'body_short',
   children,
   bold,
@@ -1491,99 +1477,6 @@ const Typography$1 = /*#__PURE__*/react.forwardRef(function Typography({
 
 // Typography.displayName = 'EdsTypography'
 
-const Typography = styled__default.default.p.withConfig({
-  displayName: "Typography",
-  componentId: "sc-xl9v17-0"
-})(["margin:0;", ""], ({
-  $type,
-  $size,
-  $lineHeight,
-  $fontWeight,
-  $letterSpacing,
-  $offset = 0,
-  $onGrid = true,
-  $color,
-  $lines
-}) => styled.css(["", " --_text-preset-color:", ";font-family:", ";font-size:", ";line-height:", ";font-weight:", ";letter-spacing:", ";color:var(--_text-preset-color,inherit);--_offset:calc(", " * 1em);--_grid-base:4px;@supports (height:round(up,10px,1px)){--_rest-top:", ";--_rest-bottom:", ";}--_trim-top:calc(((((1lh - 1cap) / 2) - var(--_offset)) * -1));--_trim-bottom:calc(((((1lh - 1cap) / 2) + var(--_offset)) * -1));&::before{margin-bottom:calc(var(--_trim-top) + var(--_rest-top,0cap));}&::after{margin-top:calc(var(--_trim-bottom) + var(--_rest-bottom,0cap));}&::before,&::after{display:table;content:'';}"], $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), $color, `var(--eds-typography-${$type}-font-family)`, `var(--eds-typography-${$type}-${$size}-font-size)`, `var(--eds-typography-${$type}-${$size}-lineheight-${$lineHeight})`, `var(--eds-typography-${$type}-${$size}-font-weight-${$fontWeight})`, `var(--eds-typography-${$type}-${$size}-tracking-${$letterSpacing})`, $offset, $onGrid ? 'calc(round(nearest, 1cap, var(--_grid-base)) - 1cap)' : 'calc((round(nearest, 1cap, var(--_grid-base)) - 1cap) / 2)', $onGrid ? '0cap' : 'calc((round(nearest, 1cap, var(--_grid-base)) - 1cap) / 2)'));
-
-const INTER_VERTICAL_OFFSET = 0.002;
-const BodyText = /*#__PURE__*/react.forwardRef(function BodyText({
-  size = 'lg',
-  lineHeight = 'default',
-  fontWeight = 'normal',
-  letterSpacing = 'normal',
-  as = 'p',
-  lines,
-  children,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
-    ref: ref,
-    as: as,
-    $type: 'ui-body',
-    $offset: INTER_VERTICAL_OFFSET,
-    $size: size,
-    $lineHeight: lineHeight,
-    $lines: lines,
-    $fontWeight: fontWeight,
-    $letterSpacing: letterSpacing,
-    ...rest,
-    children: children
-  });
-});
-
-const UIText = /*#__PURE__*/react.forwardRef(function UIText({
-  size = 'lg',
-  lineHeight = 'default',
-  fontWeight = 'normal',
-  letterSpacing = 'normal',
-  lines,
-  as = 'p',
-  onGrid = false,
-  children,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
-    ref: ref,
-    as: as,
-    $type: 'ui-body',
-    $size: size,
-    $lineHeight: lineHeight,
-    $lines: lines,
-    $fontWeight: fontWeight,
-    $letterSpacing: letterSpacing,
-    $onGrid: onGrid,
-    ...rest,
-    children: children
-  });
-});
-
-const EQUINOR_VERTICAL_OFFSET = 0.06;
-const Heading = /*#__PURE__*/react.forwardRef(function Heading({
-  size = 'lg',
-  lineHeight = 'default',
-  fontWeight = 'normal',
-  letterSpacing = 'normal',
-  lines,
-  as,
-  children,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
-    ref: ref,
-    $lineHeight: lineHeight,
-    $lines: lines,
-    $type: 'header',
-    $size: size,
-    $offset: EQUINOR_VERTICAL_OFFSET,
-    $fontWeight: fontWeight,
-    $letterSpacing: letterSpacing,
-    as: as,
-    ...rest,
-    children: children
-  });
-});
-
 const {
   typography: {
     table: {
@@ -1602,12 +1495,12 @@ const {
     },
     ui: {
       background__medium: {
-        rgba: borderColor$4
+        rgba: borderColor$5
       }
     },
     interactive: {
       table__cell__fill_resting: {
-        rgba: backgroundColor$5
+        rgba: backgroundColor$6
       },
       table__cell__fill_hover: {
         rgba: hoverBackgroundColor$3
@@ -1640,14 +1533,14 @@ const {
 } = edsTokens.tokens;
 const tableCell = {
   height: 'var(--eds_table__cell__height, 48px)',
-  background: backgroundColor$5,
+  background: backgroundColor$6,
   align: {
     vertical: 'var(--eds_table__cell__vertical_align, inherit)'
   },
   border: {
     type: 'bordergroup',
     bottom: {
-      color: borderColor$4,
+      color: borderColor$5,
       width: '1px',
       style: 'solid'
     }
@@ -1763,10 +1656,10 @@ const Table$1 = /*#__PURE__*/react.forwardRef(function Table({
 
 // Table.displayName = 'EdsTable'
 
-const initalState$2 = {
+const initialState = {
   variant: 'body'
 };
-const InnerContext = /*#__PURE__*/react.createContext(initalState$2);
+const InnerContext = /*#__PURE__*/react.createContext(initialState);
 
 const TableBase = styled__default.default.tbody.withConfig({
   displayName: "Body__TableBase",
@@ -1788,7 +1681,7 @@ const Body = /*#__PURE__*/react.forwardRef(function Body({
   });
 });
 
-const StyledTableCell$1 = styled__default.default.td.withConfig({
+const StyledTableCell$2 = styled__default.default.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
 })(({
@@ -1819,7 +1712,7 @@ const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell({
   }, applyVariant(variant, tableCell));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$1, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$2, {
       ...rest,
       ref: ref,
       children: children
@@ -1844,12 +1737,12 @@ const {
     },
     ui: {
       background__medium: {
-        rgba: borderColor$3
+        rgba: borderColor$4
       }
     },
     interactive: {
       table__header__fill_resting: {
-        rgba: backgroundColor$4
+        rgba: backgroundColor$5
       },
       table__header__fill_hover: {
         rgba: hoverBackgroundColor$2
@@ -1877,9 +1770,9 @@ const {
     }
   }
 } = edsTokens.tokens;
-const token$4 = {
+const token$5 = {
   height: 'var(--eds_table__cell__height, 48px)',
-  background: backgroundColor$4,
+  background: backgroundColor$5,
   align: {
     vertical: 'var(--eds_table__cell__vertical_align, inherit)'
   },
@@ -1893,7 +1786,7 @@ const token$4 = {
     bottom: {
       type: 'border',
       width: '2px',
-      color: borderColor$3,
+      color: borderColor$4,
       style: 'solid'
     }
   },
@@ -1955,13 +1848,14 @@ const token$4 = {
   }
 };
 
-const StyledTableCell = styled__default.default.th.withConfig({
+const StyledTableCell$1 = styled__default.default.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
 })(props => {
   const {
     theme,
-    $sticky
+    $sticky,
+    $density
   } = props;
   const {
     background,
@@ -1979,12 +1873,16 @@ const StyledTableCell = styled__default.default.th.withConfig({
   if (ariaSort && ariaSort !== 'none') {
     sortStylingActive = styled.css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? styled.css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
-  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
+
+  // Firefox specific workaround (bug in v142.0) - see issue #3910
+  // Hardcoded padding values compensate for Firefox's incorrect table cell height calculation
+  const firefoxFix = edsUtils.isFirefox() ? styled.css(["vertical-align:top;height:auto;min-height:", ";> div{padding:", " 0;}"], height, $density === 'compact' ? '7px' : '13px') : styled.css([""]);
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
 });
-const CellInner = styled__default.default.div.withConfig({
+const CellInner$1 = styled__default.default.div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
-})(["display:flex;align-items:center;"]);
+})(["display:flex;align-items:center;height:100%;"]);
 const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
   children,
   sort,
@@ -1996,16 +1894,64 @@ const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
   } = useEds();
   const token = edsUtils.useToken({
     density
-  }, token$4);
+  }, token$5);
   const props = {
     ref,
     $sticky: sticky,
+    $density: density,
     ...rest
   };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$1, {
       "aria-sort": sort,
+      ...props,
+      children: /*#__PURE__*/jsxRuntime.jsx(CellInner$1, {
+        children: children
+      })
+    })
+  });
+});
+
+const StyledTableCell = styled__default.default.th.withConfig({
+  displayName: "FooterCell__StyledTableCell",
+  componentId: "sc-1xq9z77-0"
+})(props => {
+  const {
+    theme,
+    $sticky
+  } = props;
+  const {
+    background,
+    height,
+    typography,
+    spacings
+  } = theme;
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), $sticky ? styled.css(["position:sticky;bottom:0;z-index:2;"]) : '');
+});
+const CellInner = styled__default.default.div.withConfig({
+  displayName: "FooterCell__CellInner",
+  componentId: "sc-1xq9z77-1"
+})(["display:flex;align-items:center;"]);
+const TableFooterCell = /*#__PURE__*/react.forwardRef(function TableFooterCell({
+  children,
+  sticky,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = edsUtils.useToken({
+    density
+  }, token$5);
+  const props = {
+    ref,
+    $sticky: sticky,
+    ...rest
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
       ...props,
       children: /*#__PURE__*/jsxRuntime.jsx(CellInner, {
         children: children
@@ -2029,6 +1975,12 @@ const Cell = /*#__PURE__*/react.forwardRef(function Cell({
             sticky: sticky,
             ...rest
           });
+        case 'foot':
+          return /*#__PURE__*/jsxRuntime.jsx(TableFooterCell, {
+            ref: ref,
+            sticky: sticky,
+            ...rest
+          });
         default:
         case 'body':
           return /*#__PURE__*/jsxRuntime.jsx(TableDataCell, {
@@ -2044,24 +1996,24 @@ const {
   colors: {
     ui: {
       background__medium: {
-        rgba: borderColor$2
+        rgba: borderColor$3
       }
     },
     interactive: {
       table__header__fill_resting: {
-        rgba: backgroundColor$3
+        rgba: backgroundColor$4
       }
     }
   }
 } = edsTokens.tokens;
-const token$3 = {
-  background: backgroundColor$3,
+const token$4 = {
+  background: backgroundColor$4,
   border: {
     type: 'bordergroup',
     bottom: {
       type: 'border',
       width: '2px',
-      color: borderColor$2,
+      color: borderColor$3,
       style: 'solid'
     }
   }
@@ -2070,7 +2022,7 @@ const token$3 = {
 const StyledTableHead = styled__default.default.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
-})(["", " background:", ";"], edsUtils.bordersTemplate(token$3.border), token$3.background);
+})(["", " background:", ";"], edsUtils.bordersTemplate(token$4.border), token$4.background);
 const Head = /*#__PURE__*/react.forwardRef(function Head({
   children,
   sticky,
@@ -2089,6 +2041,55 @@ const Head = /*#__PURE__*/react.forwardRef(function Head({
   });
 });
 
+const {
+  colors: {
+    ui: {
+      background__medium: {
+        rgba: borderColor$2
+      }
+    },
+    interactive: {
+      table__header__fill_resting: {
+        rgba: backgroundColor$3
+      }
+    }
+  }
+} = edsTokens.tokens;
+const token$3 = {
+  background: backgroundColor$3,
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      type: 'border',
+      width: '2px',
+      color: borderColor$2,
+      style: 'solid'
+    }
+  }
+};
+
+const StyledTableFoot = styled__default.default.tfoot.withConfig({
+  displayName: "Foot__StyledTableFoot",
+  componentId: "sc-3w9vih-0"
+})(["", " background:", ";"], edsUtils.bordersTemplate(token$3.border), token$3.background);
+const Foot = /*#__PURE__*/react.forwardRef(function Foot({
+  children,
+  sticky,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
+    value: {
+      variant: 'foot',
+      sticky
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableFoot, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+
 const {
   colors: {
     interactive: {
@@ -2154,11 +2155,13 @@ const Table = Table$1;
 Table.Body = Body;
 Table.Cell = Cell;
 Table.Head = Head;
+Table.Foot = Foot;
 Table.Row = Row;
 Table.Caption = Caption;
 Table.Body.displayName = 'Table.Body';
 Table.Cell.displayName = 'Table.Cell';
 Table.Head.displayName = 'Table.Head';
+Table.Foot.displayName = 'Table.Foot';
 Table.Row.displayName = 'Table.Row';
 Table.Caption.displayName = 'Table.Caption';
 
@@ -2263,10 +2266,7 @@ const label = {
   },
   spacings: {
     left: comfortable$5.small,
-    right: comfortable$5.small,
-    top: '6px',
-    bottom: '6px'
-  },
+    right: comfortable$5.small},
   states: {
     disabled: {
       typography: {
@@ -2286,27 +2286,23 @@ const Text$3 = styled__default.default.span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
-const Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
+const Label$2 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
   const {
     label = '',
     meta,
     disabled = false,
     ...other
   } = props;
-  return (
-    /*#__PURE__*/
-    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
-    jsxRuntime.jsxs(LabelBase, {
-      ref: ref,
-      $disabledText: disabled,
-      ...other,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
-        children: label
-      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$3, {
-        children: meta
-      })]
-    })
-  );
+  return /*#__PURE__*/ /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */jsxRuntime.jsxs(LabelBase, {
+    ref: ref,
+    $disabledText: disabled,
+    ...other,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
+      children: label
+    }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$3, {
+      children: meta
+    })]
+  });
 });
 
 // Label.displayName = 'eds-text-field-label'
@@ -2328,15 +2324,11 @@ const helperText = {
     comfortable: {
       left: comfortable$4.small,
       right: comfortable$4.small,
-      top: comfortable$4.small,
-      bottom: '6px'
-    },
+      top: comfortable$4.small},
     compact: {
       left: comfortable$4.small,
       right: comfortable$4.small,
-      top: comfortable$4.xx_small,
-      bottom: '6px'
-    }
+      top: comfortable$4.xx_small}
   }
 };
 
@@ -2560,7 +2552,7 @@ const HelperText$1 = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "InputWrapper__HelperText",
   componentId: "sc-v6o9z1-1"
 })(["margin-top:8px;margin-left:8px;"]);
-const Label$2 = styled__default.default(Label$3).withConfig({
+const Label$1 = styled__default.default(Label$2).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
@@ -2595,7 +2587,7 @@ const InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper({
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
       ...other,
       ref: ref,
-      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
+      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
         label,
         ...labelProps
       }), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText$1, {
@@ -3018,7 +3010,7 @@ const Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
   });
 });
 const TextField = /*#__PURE__*/react.forwardRef(function TextField({
-  id,
+  id: _id,
   label,
   meta,
   unit,
@@ -3036,6 +3028,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   inputRef,
   ...other
 }, ref) {
+  const id = edsUtils.useId(_id, 'input');
   const helperTextId = edsUtils.useId(null, 'helpertext');
   const hasRightAdornments = Boolean(unit || inputIcon);
   let fieldProps = {
@@ -3050,7 +3043,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
       })]
     }),
     rowsMax,
-    ref: inputRef || textareaRef,
+    ref: ref || inputRef || textareaRef,
     $multiline: multiline,
     ...other
   };
@@ -3061,7 +3054,6 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
     disabled
   };
   const containerProps = {
-    ref,
     className,
     style: {
       width: '100%',
@@ -3096,7 +3088,6 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
 });
 
 let _icons = {};
-let count = 0;
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 const add = icons => {
@@ -3106,11 +3097,7 @@ const add = icons => {
   };
 };
 const get = name => {
-  count += 1;
-  return {
-    icon: _icons[name],
-    count
-  };
+  return _icons[name];
 };
 
 const StyledSvg = styled__default.default.svg.attrs(({
@@ -3141,24 +3128,14 @@ const StyledPath$2 = styled__default.default.path.attrs(({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
 const findIcon = (name, data, size) => {
   // eslint-disable-next-line prefer-const
-  let {
-    icon,
-    count
-  } = data ? customIcon(data) : get(name);
+  const icon = data ?? get(name);
   if (size < 24) {
     // fallback to normal icon if small is not made yet
-    icon = icon.sizes?.small || icon;
+    return icon.sizes?.small || icon;
   }
-  return {
-    icon,
-    count
-  };
+  return icon;
 };
 const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   size,
@@ -3170,10 +3147,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   ...rest
 }, ref) {
   // eslint-disable-next-line prefer-const
-  const {
-    icon,
-    count
-  } = findIcon(name, data, size);
+  const icon = findIcon(name, data, size);
   if (typeof icon === 'undefined') {
     throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
   }
@@ -3194,9 +3168,8 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   };
 
   // Accessibility
-  let titleId = '';
+  const titleId = edsUtils.useId(null, `${icon.prefix}-${icon.name}`);
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`;
     svgProps = {
       ...svgProps,
       title,
@@ -3449,16 +3422,17 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem({
   ...props
 }, ref) {
   const [expanded, setExpanded] = react.useState(isExpanded);
-  const controlled = onExpandedChange != undefined;
+  const controlled = onExpandedChange !== undefined;
   const activeExpandedState = controlled ? isExpanded : expanded;
   const toggleExpanded = () => {
+    if (disabled) return;
     if (controlled) {
-      onExpandedChange(!isExpanded);
+      onExpandedChange?.(!isExpanded);
     } else {
       setExpanded(!expanded);
     }
   };
-  const Children = react.Children.map(children, (child, childIndex) => {
+  const processedChildren = react.Children.map(children, (child, childIndex) => {
     const headerId = `${accordionId}-header-${index + 1}`;
     const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
@@ -3484,7 +3458,7 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem({
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ...props,
     ref: ref,
-    children: Children
+    children: processedChildren
   });
 });
 
@@ -3669,7 +3643,7 @@ const AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader
         children: child
       });
     }
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderTitle) {
+    if (/*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderTitle) {
       return /*#__PURE__*/react.cloneElement(child, {
         isExpanded,
         disabled
@@ -3681,7 +3655,7 @@ const AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader
     return child;
   });
   const headerActions = react.Children.map(children, child => {
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderActions) {
+    if (/*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderActions) {
       return /*#__PURE__*/react.cloneElement(child, {
         isExpanded,
         disabled
@@ -4006,7 +3980,7 @@ const StyledTabList = styled__default.default.div.attrs(() => ({
 })).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;& ::-webkit-scrollbar{width:0;height:0;}}"], ({
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:none;& ::-webkit-scrollbar{width:0;height:0;}}"], ({
   $variant
 }) => variants$1[$variant], ({
   $scrollable
@@ -4023,7 +3997,7 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList({
     scrollable = false,
     tabsFocused
   } = react.useContext(TabsContext);
-  const currentTab = react.useRef();
+  const currentTab = react.useRef(0);
   const [arrowNavigating, setArrowNavigating] = react.useState(false);
   const selectedTabRef = react.useCallback(node => {
     if (node !== null && tabsFocused || node !== null && arrowNavigating) {
@@ -4032,20 +4006,24 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList({
     }
   }, [arrowNavigating, tabsFocused]);
   const Tabs = react.Children.map(children, (child, $index) => {
+    if (! /*#__PURE__*/react.isValidElement(child)) {
+      return null;
+    }
     const childProps = child.props;
     const controlledActive = childProps.value;
     const isActive = controlledActive ? controlledActive === activeTab : $index === activeTab;
-    const tabRef = isActive ? edsUtils.mergeRefs(child.ref, selectedTabRef) : child.ref;
+    const childRef = childProps?.ref || null;
+    const tabRef = isActive && childRef ? edsUtils.mergeRefs(childRef, selectedTabRef) : isActive ? selectedTabRef : childRef;
     if (isActive) currentTab.current = $index;
     return /*#__PURE__*/react.cloneElement(child, {
       id: `${tabsId}-tab-${$index + 1}`,
       'aria-controls': `${tabsId}-panel-${$index + 1}`,
       active: isActive,
       $index,
-      onClick: () => handleChange($index),
+      onClick: () => handleChange(controlledActive !== undefined ? controlledActive : $index),
       ref: tabRef
     });
-  });
+  }) ?? [];
   const focusableChildren = Tabs.filter(child => {
     const childProps = child.props;
     return !childProps.disabled;
@@ -4132,7 +4110,7 @@ const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels({
     tabsId
   } = react.useContext(TabsContext);
   const Panels = react.Children.map(children, (child, $index) => {
-    if (conditionalRender && activeTab !== $index) return null;
+    if (! /*#__PURE__*/react.isValidElement(child) || conditionalRender && activeTab !== $index) return null;
     return /*#__PURE__*/react.cloneElement(child, {
       id: `${tabsId}-panel-${$index + 1}`,
       'aria-labelledby': `${tabsId}-tab-${$index + 1}`,
@@ -4327,7 +4305,7 @@ const CardActions = /*#__PURE__*/react.forwardRef(function CardActions({
   };
   return /*#__PURE__*/jsxRuntime.jsxs(StyledCardActions, {
     ...props,
-    children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
+    children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography, {
       variant: "caption",
       children: meta
     })]
@@ -4860,6 +4838,7 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim({
   ...rest
 }, ref) {
   const scrimRef = react.useRef(null);
+  edsUtils.useHideBodyScroll(open);
   const combinedScrimRef = react.useMemo(() => edsUtils.mergeRefs(scrimRef, ref), [scrimRef, ref]);
   edsUtils.useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
@@ -4877,7 +4856,6 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim({
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
-    lockScroll: true,
     onMouseDown: handleMouseClose,
     ref: combinedScrimRef,
     ...rest,
@@ -5006,7 +4984,7 @@ const TocList = styled__default.default(List$1).withConfig({
   displayName: "TableOfContents__TocList",
   componentId: "sc-q23s6y-1"
 })(["margin:0;padding:0;"]);
-const TocLabel = styled__default.default(Typography$1).withConfig({
+const TocLabel = styled__default.default(Typography).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
 })(({
@@ -5130,7 +5108,7 @@ const StyledSideSheet = styled__default.default.div.withConfig({
 const Header$1 = styled__default.default.div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
-})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;}"]);
+})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;flex-shrink:0;}"]);
 const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet({
   variant = 'medium',
   width,
@@ -5148,7 +5126,7 @@ const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet({
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, {
     ...props,
     children: [(title || onClose) && /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
-      children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
+      children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
         variant: "h2",
         children: title
       }), onClose && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
@@ -5637,11 +5615,9 @@ const slider = {
           background: indicatorColor,
           states: {
             hover: {
-              background: primaryHover$1
-            },
+              },
             disabled: {
-              background: backgroundBorderDisabled
-            }
+              }
           }
         }
       },
@@ -5693,7 +5669,6 @@ const slider = {
         hover: {
           background: primaryHoverAlt$3,
           border: {
-            type: 'border',
             color: primaryHover$1
           }
         }
@@ -5718,7 +5693,6 @@ const slider = {
     disabled: {
       background: backgroundColorDisabled,
       border: {
-        type: 'border',
         color: backgroundColorMedium$1
       }
     }
@@ -5778,9 +5752,9 @@ const {
 } = slider;
 const track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
 const thumb = styled.css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], edsUtils.bordersTemplate(handle$1.border), handle$1.height, handle$1.width, handle$1.background);
-const thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.type === 'border' && handle$1.states.hover.border.color);
+const thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.color);
 const thumbHoverAndDisabled = styled.css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
-const thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.type === 'border' && _disabled.border.color);
+const thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.color);
 const StyledSliderInput = styled__default.default.input.attrs(() => ({
   type: 'range'
 })).withConfig({
@@ -5829,10 +5803,9 @@ const {
     output
   }
 } = slider;
-const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
-const fakeTrackBgHover = styled.css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
-});
+const encodedTrackColor = encodeURIComponent(track.background);
+const encodedHoverColor = encodeURIComponent(track.states.hover.background);
+const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], encodedTrackColor);
 const trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
 const RangeWrapper = styled__default.default.div.attrs(({
@@ -5853,13 +5826,14 @@ const RangeWrapper = styled__default.default.div.attrs(({
     '--max': $max,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");&::before,&::after{background:", ";}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $touchNavigation
 }) => $touchNavigation && styled.css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]), ({
   $labelBelow
@@ -5880,13 +5854,14 @@ const Wrapper = styled__default.default.div.attrs(({
     '--value': value,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::after{background:var(--background-hover);}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");&::after{background:", ";}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $labelBelow
 }) => $labelBelow && styled.css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
 const WrapperGroupLabel = styled__default.default.div.withConfig({
@@ -6264,20 +6239,30 @@ const snackbar = {
   }
 };
 
-const StyledSnackbar = styled__default.default(Paper).withConfig({
-  displayName: "Snackbar__StyledSnackbar",
+const PopoverDiv = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+  ,
+  displayName: "Snackbar__PopoverDiv",
   componentId: "sc-ac6no8-0"
 })(({
   theme,
   $placement
 }) => {
-  return styled.css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:1400;", " a,button{color:", ";}"], theme.background, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), theme.minHeight, {
+  return styled.css(["inset:unset;border:0;overflow:visible;position:fixed;padding:0;background-color:transparent;", " &::backdrop{background-color:transparent;}"], {
     top: $placement.includes('top') ? theme.spacings.top : $placement === 'left' || $placement === 'right' ? '50%' : undefined,
     bottom: $placement.includes('bottom') ? theme.spacings.bottom : undefined,
     right: $placement.includes('right') ? theme.spacings.right : undefined,
     left: $placement.includes('left') ? theme.spacings.left : $placement === 'top' || $placement === 'bottom' ? '50%' : undefined,
     transform: $placement === 'left' || $placement === 'right' ? 'translateY(-50%)' : $placement === 'top' || $placement === 'bottom' ? 'translateX(-50%)' : undefined
-  }, theme.entities.button.typography.color);
+  });
+});
+const StyledSnackbar = styled__default.default(Paper).withConfig({
+  displayName: "Snackbar__StyledSnackbar",
+  componentId: "sc-ac6no8-1"
+})(({
+  theme
+}) => {
+  return styled.css(["background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;a,button{color:", ";}"], theme.background, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), theme.minHeight, theme.entities.button.typography.color);
 });
 const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   open = false,
@@ -6288,7 +6273,7 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   ...rest
 }, ref) {
   const [visible, setVisible] = react.useState(open);
-  const timer = react.useRef();
+  const timer = react.useRef(null);
   react.useEffect(() => {
     setVisible(open);
     if (open) {
@@ -6300,10 +6285,10 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
       }, autoHideDuration);
     }
     return () => clearTimeout(timer.current);
-  }, [open, autoHideDuration, setVisible, onClose]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, autoHideDuration]);
   const props = {
     ref,
-    $placement: placement,
     ...rest
   };
   const {
@@ -6314,12 +6299,19 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   }, snackbar);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: visible && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
-      role: "alert",
-      elevation: "overlay",
-      ...props,
-      children: children
-    }), document.body)
+    children: visible && /*#__PURE__*/jsxRuntime.jsx(PopoverDiv, {
+      popover: "manual",
+      $placement: placement,
+      ref: el => {
+        el?.showPopover();
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
+        role: "alert",
+        elevation: "overlay",
+        ...props,
+        children: children
+      })
+    })
   });
 });
 
@@ -6422,19 +6414,25 @@ const PopoverPaper = styled__default.default(Paper).withConfig({
       paper
     }
   } = theme;
-  return styled.css(["", " background:", ";", " z-index:1400;&:focus-visible{", "}"], edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border), edsUtils.outlineTemplate(paper.states.focus.outline));
+  return styled.css(["position:relative;", " background:", ";", " &:focus-visible{", "}"], edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border), edsUtils.outlineTemplate(paper.states.focus.outline));
 });
+const StyledPopover$2 = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Popover__StyledPopover",
+  componentId: "sc-b7p1is-1"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
 const ArrowWrapper = styled__default.default.div.withConfig({
   displayName: "Popover__ArrowWrapper",
-  componentId: "sc-b7p1is-1"
+  componentId: "sc-b7p1is-2"
 })(({
   theme
 }) => {
-  return styled.css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
+  return styled.css(["position:absolute;width:", ";height:", ";"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
 const InnerWrapper = styled__default.default.div.withConfig({
   displayName: "Popover__InnerWrapper",
-  componentId: "sc-b7p1is-2"
+  componentId: "sc-b7p1is-3"
 })(({
   theme
 }) => {
@@ -6442,7 +6440,7 @@ const InnerWrapper = styled__default.default.div.withConfig({
 });
 const PopoverArrow = styled__default.default.svg.withConfig({
   displayName: "Popover__PopoverArrow",
-  componentId: "sc-b7p1is-3"
+  componentId: "sc-b7p1is-4"
 })(({
   theme
 }) => {
@@ -6459,6 +6457,9 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   trapFocus,
   ...rest
 }, ref) {
+  if (withinPortal) {
+    console.warn('Popover "withinPortal" prop has been deprecated. Popover now uses the native popover api');
+  }
   const arrowRef = react.useRef(null);
   const {
     x,
@@ -6466,6 +6467,7 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
     refs,
     strategy,
     context,
+    elements,
     middlewareData: {
       arrow: {
         x: arrowX,
@@ -6491,6 +6493,16 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   const {
     getFloatingProps
   } = react$1.useInteractions([react$1.useDismiss(context)]);
+  react.useEffect(() => {
+    if (!elements.floating) return;
+    if (open) {
+      if (elements.floating.isConnected) {
+        elements.floating.showPopover();
+      }
+    } else {
+      elements.floating.hidePopover();
+    }
+  }, [open, elements.floating]);
   react.useEffect(() => {
     if (arrowRef.current) {
       const staticSide = {
@@ -6526,7 +6538,6 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrowRef.current, arrowX, arrowY, finalPlacement]);
   const props = {
-    open,
     ...rest
   };
   const {
@@ -6535,14 +6546,10 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   const token = edsUtils.useToken({
     density
   }, popover);
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(anchorEl);
   const popover$1 = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
-      elevation: "overlay",
-      ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPopover$2, {
+      popover: "manual",
       ...getFloatingProps({
         ref: popoverRef,
         style: {
@@ -6552,35 +6559,30 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
           left: x || 0
         }
       }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
-        ref: arrowRef,
-        className: "arrow",
-        children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
-          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"
+      children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
+        elevation: "overlay",
+        ...props,
+        children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
+          ref: arrowRef,
+          className: "arrow",
+          children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
+            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"
+            })
           })
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(InnerWrapper, {
-        children: children
-      })]
+        }), /*#__PURE__*/jsxRuntime.jsx(InnerWrapper, {
+          children: children
+        })]
+      })
     })
   });
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: withinPortal && !inDialog ? /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-      id: "eds-popover-container",
-      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(react$1.FloatingFocusManager, {
-        context: context,
-        modal: true,
-        children: popover$1
-      }) : open && popover$1
-    })
+    children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+      context: context,
+      modal: true,
+      children: popover$1
+    }) : open && popover$1
   });
 });
 
@@ -6877,7 +6879,7 @@ const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner({
   });
 });
 
-const StyledBannerMessage = styled__default.default(Typography$1).withConfig({
+const StyledBannerMessage = styled__default.default(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
@@ -7383,11 +7385,11 @@ const ListItem$1 = styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
 })(["display:block;min-width:30px;"]);
-const Separator = styled__default.default(Typography$1).withConfig({
+const Separator = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
 })(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography$5.color, edsUtils.spacingsTemplate(spacings));
-const Collapsed = styled__default.default(Typography$1).withConfig({
+const Collapsed = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
@@ -7469,7 +7471,7 @@ const {
   states,
   typography: typography$4
 } = breadcrumbs;
-const StyledTypography = styled__default.default(Typography$1).withConfig({
+const StyledTypography = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography$4.color, ({
@@ -7490,7 +7492,7 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb({
     href,
     ref
   };
-  const showTooltip = maxWidth > 0 || forceTooltip;
+  const showTooltip = maxWidth !== undefined && maxWidth > 0 || forceTooltip === true;
   const isHrefDefined = href !== undefined;
   const forwardedAs = react.useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
   const crumb = /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
@@ -7504,7 +7506,12 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb({
   return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
     title: children,
     placement: "top",
-    children: crumb
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        display: 'inline-block'
+      },
+      children: crumb
+    })
   }) : crumb;
 });
 
@@ -7760,6 +7767,7 @@ const MenuItem$1 = /*#__PURE__*/react.forwardRef(function MenuItem({
   return /*#__PURE__*/jsxRuntime.jsx(Item, {
     ...props,
     $active: active,
+    type: "button",
     ref: edsUtils.mergeRefs(ref, el => {
       if (isFocused) {
         requestAnimationFrame(() => {
@@ -7771,9 +7779,9 @@ const MenuItem$1 = /*#__PURE__*/react.forwardRef(function MenuItem({
     onClick: e => {
       if (onClick) {
         onClick(e);
-        if (onClose !== null && closeMenuOnClick) {
-          onClose(e);
-        }
+      }
+      if (onClose !== null && closeMenuOnClick) {
+        onClose(e);
       }
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Content, {
@@ -7801,7 +7809,8 @@ const MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
         variant: "small"
       })
     }), title && /*#__PURE__*/jsxRuntime.jsx(Header, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
+      role: "group",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         group: "navigation",
         variant: "label",
         children: title
@@ -7817,11 +7826,11 @@ const List = styled__default.default.div.withConfig({
   componentId: "sc-104rzof-0"
 })(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], edsUtils.spacingsTemplate(menu.spacings));
 function isIndexable(item) {
-  if ( /*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem$1) return true;
+  if (/*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem$1) return true;
   return false;
 }
 function closeMenuOnClick(item) {
-  if ( /*#__PURE__*/react.isValidElement(item) && item.type === MenuItem$1 && item.props.closeMenuOnClick !== false) return true;
+  if (/*#__PURE__*/react.isValidElement(item) && item.type === MenuItem$1 && item.props.closeMenuOnClick !== false) return true;
   return false;
 }
 const MenuList = /*#__PURE__*/react.forwardRef(function MenuList({
@@ -7911,11 +7920,13 @@ const {
 const MenuPaper = styled__default.default(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], edsUtils.bordersTemplate(border$1), ({
-  open
-}) => styled.css({
-  display: open ? 'block' : 'none'
-}));
+})(["width:100%;min-width:fit-content;", ";"], edsUtils.bordersTemplate(border$1));
+const StyledPopover$1 = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Menu__StyledPopover",
+  componentId: "sc-1vlnqcj-1"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
 const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer({
   children,
   anchorEl,
@@ -8044,13 +8055,19 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
       return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, open]);
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (open) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [open, refs.floating]);
   const {
     getFloatingProps
   } = react$1.useInteractions([react$1.useDismiss(context, {
     escapeKey: false
   })]);
   const props = {
-    open,
     className
   };
   const menuProps = {
@@ -8059,14 +8076,10 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
     anchorEl,
     open
   };
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(anchorEl);
-  const menuElement = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
-      elevation: "raised",
-      ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPopover$1, {
+      popover: "manual",
       ...getFloatingProps({
         ref: popoverRef,
         style: {
@@ -8076,20 +8089,18 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
           left: x || 0
         }
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
-        children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, {
-          ...menuProps,
-          ref: ref
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
+        elevation: "raised",
+        ...props,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
+          children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, {
+            ...menuProps,
+            ref: ref
+          })
         })
       })
     })
   });
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: inDialog ? menuElement : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-      id: "eds-menu-container",
-      children: menuElement
-    })
-  });
 });
 
 const Menu = Menu$1;
@@ -8224,7 +8235,7 @@ const FlexContainer = styled__default.default.div.withConfig({
   displayName: "Pagination__FlexContainer",
   componentId: "sc-13cpp3o-4"
 })(["display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;"]);
-const Text$1 = styled__default.default(Typography$1).withConfig({
+const Text$1 = styled__default.default(Typography).withConfig({
   displayName: "Pagination__Text",
   componentId: "sc-13cpp3o-5"
 })(["white-space:nowrap;"]);
@@ -8405,9 +8416,9 @@ const Container$3 = styled__default.default.div.withConfig({
 const StyledSelect = styled__default.default.select.withConfig({
   displayName: "NativeSelect__StyledSelect",
   componentId: "sc-82vb16-1"
-})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, edsUtils.typographyTemplate(nativeselect.typography), ({
+})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:", " linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, edsUtils.typographyTemplate(nativeselect.typography), ({
   theme
-}) => styled.css(["height:", ";", ""], theme.minHeight, edsUtils.spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, edsUtils.outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
+}) => styled.css(["height:", ";", ""], theme.minHeight, edsUtils.spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, props => props.multiple ? `` : `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"),`, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, edsUtils.outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
 const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
   label,
   children,
@@ -8449,7 +8460,7 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
       ...containerProps,
-      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$3, {
+      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
         ...labelProps
       }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, {
         ...selectProps,
@@ -9246,7 +9257,7 @@ const StyledLabel = styled__default.default.label.withConfig({
 }) => $isDisabled ? 'not-allowed' : 'pointer', ({
   $size
 }) => $size === 'small' ? '12px' : '8px');
-const Label$1 = styled__default.default.span.withConfig({
+const Label = styled__default.default.span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
 })(({
@@ -9283,7 +9294,7 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch({
         disabled: disabled,
         ...rest,
         ref: ref
-      }), label && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
+      }), label && /*#__PURE__*/jsxRuntime.jsx(Label, {
         children: label
       })]
     }) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
@@ -9454,10 +9465,10 @@ const StyledListItem = styled__default.default.li.withConfig({
   $isdisabled
 }) => {
   const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
-  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
+  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-const Label = styled__default.default.span.withConfig({
-  displayName: "Option__Label",
+const AutocompleteOptionLabel = styled__default.default.span.withConfig({
+  displayName: "Option__AutocompleteOptionLabel",
   componentId: "sc-1ly11zu-1"
 })(({
   theme,
@@ -9500,7 +9511,7 @@ function AutocompleteOptionInner(props, ref) {
       }
     }), optionComponent ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: optionComponent
-    }) : /*#__PURE__*/jsxRuntime.jsx(Label, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
       children: value
     })]
@@ -9508,11 +9519,57 @@ function AutocompleteOptionInner(props, ref) {
 }
 const AutocompleteOption = /*#__PURE__*/react.forwardRef(AutocompleteOptionInner);
 
+const StyledAddItemIcon = styled__default.default(Icon$1).withConfig({
+  displayName: "AddNewOption__StyledAddItemIcon",
+  componentId: "sc-8xtrxx-0"
+})(({
+  multiple
+}) => {
+  return styled.css(["padding:", ";color:", ";"], multiple ? '0.75rem' : '0 0.75rem 0 0', edsTokens.tokens.colors.interactive.primary__resting.hex);
+});
+const StyledPlaceholder = styled__default.default.span.withConfig({
+  displayName: "AddNewOption__StyledPlaceholder",
+  componentId: "sc-8xtrxx-1"
+})(["color:", ";"], input$1.entities.placeholder.typography.color);
+function AddNewOptionInner(props, ref) {
+  const {
+    value,
+    multiline,
+    multiple,
+    highlighted,
+    onClick,
+    ...other
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
+    ref: ref,
+    $highlighted: highlighted,
+    onClick: e => {
+      onClick(e);
+    },
+    ...other,
+    "aria-label": `Add new option: ${value}`,
+    "aria-live": "polite",
+    "aria-selected": false,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledAddItemIcon, {
+      multiple: multiple,
+      data: edsIcons.add_box
+    }), /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
+      $multiline: multiline,
+      children: value ? value : /*#__PURE__*/jsxRuntime.jsx(StyledPlaceholder, {
+        children: "Type to add new options"
+      })
+    })]
+  });
+}
+const AddNewOption = /*#__PURE__*/react.forwardRef(AddNewOptionInner);
+
 const Container$2 = styled__default.default.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
 const AllSymbol = Symbol('Select all');
+const AddSymbol = Symbol('Add new');
+
 // MARK: styled components
 const StyledList = styled__default.default(List$1).withConfig({
   displayName: "Autocomplete__StyledList",
@@ -9558,7 +9615,7 @@ const findIndex = ({
   availableItems
 }) => {
   const nextItem = availableItems[index];
-  if (optionDisabled(nextItem)) {
+  if (optionDisabled(nextItem) && index >= 0 && index < availableItems.length) {
     const nextIndex = calc(index);
     return findIndex({
       calc,
@@ -9646,6 +9703,7 @@ const defaultOptionDisabled = () => false;
 function AutocompleteInner(props, ref) {
   const {
     options = [],
+    totalOptions,
     label,
     meta,
     className,
@@ -9655,13 +9713,14 @@ function AutocompleteInner(props, ref) {
     loading = false,
     hideClearButton = false,
     onOptionsChange,
+    onAddNewOption,
     onInputChange,
     selectedOptions: _selectedOptions,
     multiple,
-    itemCompare,
+    itemToKey: _itemToKey,
+    itemCompare: _itemCompare,
     allowSelectAll,
     initialSelectedOptions: _initialSelectedOptions = [],
-    disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
     autoWidth,
@@ -9675,20 +9734,32 @@ function AutocompleteInner(props, ref) {
     helperIcon,
     noOptionsText = 'No options',
     variant,
+    onClear,
     ...other
   } = props;
+  const itemCompare = react.useMemo(() => {
+    if (_itemCompare && _itemToKey) {
+      console.error('Error: Specifying both itemCompare and itemToKey. itemCompare is deprecated, while itemToKey should be used instead of it. Please only use one.');
+      return _itemCompare;
+    }
+    if (_itemToKey) {
+      return (o1, o2) => _itemToKey(o1) === _itemToKey(o2);
+    }
+    return _itemCompare;
+  }, [_itemCompare, _itemToKey]);
+  const itemToKey = react.useCallback(item => {
+    return _itemToKey ? _itemToKey(item) : item;
+  }, [_itemToKey]);
 
   // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
   const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
-  if (disablePortal) {
-    console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
-  }
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = react.useState(options);
   const [_availableItems, setAvailableItems] = react.useState(inputOptions);
   const [typedInputValue, setTypedInputValue] = react.useState('');
   const inputRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => inputRef.current);
   const showSelectAll = react.useMemo(() => {
     if (!multiple && allowSelectAll) {
       throw new Error(`allowSelectAll can only be used with multiple`);
@@ -9696,9 +9767,11 @@ function AutocompleteInner(props, ref) {
     return allowSelectAll && !typedInputValue;
   }, [allowSelectAll, multiple, typedInputValue]);
   const availableItems = react.useMemo(() => {
+    if (showSelectAll && onAddNewOption) return [AddSymbol, AllSymbol, ..._availableItems];
     if (showSelectAll) return [AllSymbol, ..._availableItems];
+    if (onAddNewOption) return [AddSymbol, ..._availableItems];
     return _availableItems;
-  }, [_availableItems, showSelectAll]);
+  }, [_availableItems, showSelectAll, onAddNewOption]);
 
   //issue 2304, update dataset when options are added dynamically
   react.useEffect(() => {
@@ -9720,6 +9793,7 @@ function AutocompleteInner(props, ref) {
   const tokens = token();
   let placeholderText = placeholder;
   let multipleSelectionProps = {
+    itemToKey,
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
   if (multiple) {
@@ -9727,7 +9801,7 @@ function AutocompleteInner(props, ref) {
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol || item !== AddSymbol);
           if (itemCompare) {
             selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
           }
@@ -9758,7 +9832,7 @@ function AutocompleteInner(props, ref) {
     return inputOptions.filter(x => !disabledItemsSet.has(x));
   }, [inputOptions, optionDisabled]);
   const allDisabled = enabledItems.length === 0;
-  const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(optionDisabled)), [selectedItems, optionDisabled]);
+  const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(x => x !== null && optionDisabled(x))), [selectedItems, optionDisabled]);
   const selectedEnabledItems = react.useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = react.useMemo(() => {
     if (!enabledItems || !selectedEnabledItems) return 'NONE';
@@ -9780,12 +9854,10 @@ function AutocompleteInner(props, ref) {
     if (item == null) {
       return '';
     }
-    if (typeof item === 'object') {
-      if (optionLabel) {
-        return optionLabel(item);
-      } else {
-        throw new Error('Missing label. When using objects for options make sure to define the `optionLabel` property');
-      }
+    if (optionLabel) {
+      return optionLabel(item);
+    } else if (typeof item === 'object') {
+      throw new Error('Missing label. When using objects for options make sure to define the `optionLabel` property');
     }
     if (typeof item === 'string') {
       return item;
@@ -9793,7 +9865,7 @@ function AutocompleteInner(props, ref) {
     try {
       // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item?.toString();
-    } catch (error) {
+    } catch {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
@@ -9820,8 +9892,10 @@ function AutocompleteInner(props, ref) {
     //can not pass readonly type to downshift so we cast it to regular T[]
     initialSelectedItem: initialSelectedOptions[0],
     isItemDisabled(item) {
+      if (item === AddSymbol) return !typedInputValue.trim();
       return optionDisabled(item);
     },
+    itemToKey,
     itemToString: getLabel,
     onInputValueChange: ({
       inputValue
@@ -9872,8 +9946,15 @@ function AutocompleteInner(props, ref) {
           if (selectedItem != null && !optionDisabled(selectedItem)) {
             if (selectedItem === AllSymbol) {
               toggleAllSelected();
+            } else if (selectedItem === AddSymbol && typedInputValue.trim()) {
+              onAddNewOption?.(typedInputValue);
             } else if (multiple) {
-              selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
+              const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
+              if (shouldRemove) {
+                removeSelectedItem(selectedItem);
+              } else {
+                addSelectedItem(selectedItem);
+              }
             } else {
               setSelectedItems([selectedItem]);
             }
@@ -9887,6 +9968,7 @@ function AutocompleteInner(props, ref) {
     comboBoxProps = {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
+        if (changes.selectedItem === AddSymbol) return;
         if (onOptionsChange) {
           let {
             selectedItem
@@ -9910,11 +9992,27 @@ function AutocompleteInner(props, ref) {
               ...changes,
               isOpen: !(disabled || readOnly)
             };
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case downshift.useCombobox.stateChangeTypes.ItemClick:
+            if (changes.selectedItem === AddSymbol) {
+              return {
+                ...changes,
+                inputValue: ''
+              };
+            }
+            return {
+              ...changes
+            };
           case downshift.useCombobox.stateChangeTypes.InputBlur:
             return {
               ...changes,
               inputValue: changes.selectedItem ? getLabel(changes.selectedItem) : ''
             };
+          case downshift.useCombobox.stateChangeTypes.InputChange:
+            setTypedInputValue(changes.inputValue);
+            return {
+              ...changes
+            };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
           case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
             if (readOnly) {
@@ -9949,6 +10047,11 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+            setSelectedItems([changes.selectedItem]);
+            return {
+              ...changes
+            };
           default:
             return changes;
         }
@@ -9963,7 +10066,9 @@ function AutocompleteInner(props, ref) {
   }
   // MARK: multiselect specific
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
+    const showPlaceholder = placeholderText && selectedItems.length === 0;
+    const optionCount = totalOptions || inputOptions.length;
+    placeholderText = showPlaceholder ? placeholderText : `${selectedItems.length}/${optionCount} selected`;
     comboBoxProps = {
       ...comboBoxProps,
       selectedItem: null,
@@ -10068,7 +10173,7 @@ function AutocompleteInner(props, ref) {
   } = react$1.useFloating({
     placement: 'bottom-start',
     middleware: [react$1.offset(4), react$1.flip({
-      boundary: document?.body
+      boundary: typeof document === 'undefined' ? undefined : document?.body
     }), react$1.size({
       apply({
         rects,
@@ -10094,12 +10199,13 @@ function AutocompleteInner(props, ref) {
   // MARK: popover toggle
   edsUtils.useIsomorphicLayoutEffect(() => {
     if (isOpen) {
-      refs.floating.current.showPopover();
+      refs.floating.current?.showPopover();
     } else {
-      refs.floating.current.hidePopover();
+      refs.floating.current?.hidePopover();
     }
   }, [isOpen, refs.floating]);
   const clear = () => {
+    if (onClear) onClear();
     resetCombobox();
     //dont clear items if they are selected and disabled
     setSelectedItems([...selectedDisabledItemsSet]);
@@ -10179,6 +10285,30 @@ function AutocompleteInner(props, ref) {
             })
           }, 'select-all');
         }
+        if (item === AddSymbol && onAddNewOption) {
+          const isDisabled = !typedInputValue.trim();
+          return /*#__PURE__*/jsxRuntime.jsx(AddNewOption, {
+            "data-index": 0,
+            "data-testid": 'add-item',
+            "aria-setsize": availableItems.length,
+            multiple: multiple,
+            highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+            multiline: multiline,
+            style: {
+              position: 'sticky',
+              top: 0,
+              zIndex: 99
+            },
+            ...getItemProps({
+              ...(multiline && {
+                ref: rowVirtualizer.measureElement
+              }),
+              item,
+              index: index
+            }),
+            value: typedInputValue.trim()
+          }, 'add-item');
+        }
         return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
           "data-index": index,
           "aria-setsize": availableItems.length,
@@ -10220,8 +10350,7 @@ function AutocompleteInner(props, ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
       className: className,
       style: style,
-      ref: ref,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$3, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, {
         ...getLabelProps(),
         label: label,
         meta: meta,
@@ -10415,9 +10544,13 @@ const initalState = {
 };
 const SideBarContext = /*#__PURE__*/react.createContext(initalState);
 const SideBarProvider = ({
-  children
+  children,
+  isOpen: isOpenProp = false
 }) => {
-  const [state, setState] = react.useState(initalState);
+  const [state, setState] = react.useState({
+    onToggle: null,
+    isOpen: isOpenProp
+  });
   const {
     isOpen,
     onToggle
@@ -10450,13 +10583,11 @@ const useSideBar = () => react.useContext(SideBarContext);
 
 const SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer({
   onToggle: onToggleCallback,
-  open = false,
   children,
   ...rest
 }, ref) {
   const {
     isOpen,
-    setIsOpen,
     onToggle,
     setOnToggle
   } = useSideBar();
@@ -10465,10 +10596,6 @@ const SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer
       setOnToggle(onToggleCallback);
     }
   }, [onToggle, onToggleCallback, setOnToggle]);
-  react.useEffect(() => {
-    setIsOpen(open);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
   return /*#__PURE__*/jsxRuntime.jsx(GridContainer, {
     ...rest,
     open: isOpen,
@@ -10506,6 +10633,7 @@ const SideBar$1 = /*#__PURE__*/react.forwardRef(({
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(SideBarProvider, {
+      isOpen: open,
       children: /*#__PURE__*/jsxRuntime.jsx(SideBarContainer, {
         ...props,
         ref: ref
@@ -10564,7 +10692,7 @@ const Container$1 = styled__default.default.a.withConfig({
   } = theme;
   return styled.css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;width:100%;padding:0;place-items:center;border:0;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;& > p{color:", ";}& > svg{fill:", ";}}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'transparent', minWidth, edsUtils.bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, menuDisabledText, menuDisabledText, edsUtils.outlineTemplate(focus.outline));
 });
-const ItemText$1 = styled__default.default(Typography$1).withConfig({
+const ItemText$1 = styled__default.default(Typography).withConfig({
   displayName: "SidebarLink__ItemText",
   componentId: "sc-gbehcj-1"
 })(({
@@ -10901,7 +11029,7 @@ const Panel = styled__default.default.div.withConfig({
   displayName: "SideBarAccordion__Panel",
   componentId: "sc-1ekwnbi-6"
 })(["width:100%;", ""], edsUtils.bordersTemplate(border));
-const ItemText = styled__default.default(Typography$1).withConfig({
+const ItemText = styled__default.default(Typography).withConfig({
   displayName: "SideBarAccordion__ItemText",
   componentId: "sc-1ekwnbi-7"
 })(({
@@ -11043,10 +11171,9 @@ const SideBarAccordion = /*#__PURE__*/react.forwardRef(function SideBarAccordion
       onClose: closeMenu,
       anchorEl: anchorEl,
       children: react.Children.map(children, child => {
-        const item = child;
         return /*#__PURE__*/jsxRuntime.jsx(Menu.Item, {
           ...child.props,
-          children: item.props.label
+          children: child.props.label
         });
       })
     })]
@@ -11089,7 +11216,7 @@ const TextWrapper = styled__default.default.div.withConfig({
   displayName: "SideBarAccordionItem__TextWrapper",
   componentId: "sc-1aeo1e1-1"
 })(["min-height:", ";grid-column:2;justify-self:start;display:flex;align-items:center;width:100%;"], minHeight);
-const Text = styled__default.default(Typography$1).withConfig({
+const Text = styled__default.default(Typography).withConfig({
   displayName: "SideBarAccordionItem__Text",
   componentId: "sc-1aeo1e1-2"
 })(({
@@ -11145,10 +11272,12 @@ SideBar.Button.displayName = 'SideBar.Button';
 SideBar.Accordion.displayName = 'SideBar.Accordion';
 SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
 
-const StyledCell = styled__default.default(Typography$1).withConfig({
+const StyledCell = styled__default.default(Typography).withConfig({
   displayName: "CalendarCell__StyledCell",
   componentId: "sc-y5ycmg-0"
-})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}&:focus{outline:2px dashed rgba(0,112,121,1);}", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}", " ", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+  $focused
+}) => $focused && `outline: 2px dashed rgba(0, 112, 121, 1);`, ({
   $selected
 }) => $selected && `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba};`, ({
   $hidden
@@ -11227,7 +11356,8 @@ function CalendarCell({
     isOutsideVisibleRange,
     isDisabled,
     isUnavailable,
-    formattedDate
+    formattedDate,
+    isFocused
   } = reactAria.useCalendarCell({
     date
   }, state, ref);
@@ -11275,11 +11405,21 @@ function CalendarCell({
       $highlight: isHighlight,
       $disabled: isDisabled || isUnavailable,
       $density: density,
+      $focused: isFocused,
       children: formattedDate
     })
   });
 }
 
+const TOTAL_VISIBLE_YEARS = 36;
+const RANGE_OFFSET = 30 / 2;
+const getPageYears = (selectedYear, yearPickerPage = 0) => {
+  const page = yearPickerPage * TOTAL_VISIBLE_YEARS;
+  return Array.from({
+    length: TOTAL_VISIBLE_YEARS
+  }, (_, i) => i + (selectedYear + page - RANGE_OFFSET));
+};
+
 // Disable no-autofocus - it's not the native autofocus attribute, but react-aria's autoFocus prop
 /* eslint-disable jsx-a11y/no-autofocus */
 const Grid = styled__default.default.div.withConfig({
@@ -11294,21 +11434,51 @@ const GridColumn = styled__default.default.button.withConfig({
 }) => $active ? `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba}` : '', edsTokens.tokens.colors.interactive.primary__resting.rgba);
 const GridFocusManager = ({
   year: selectedYear,
-  setFocusedYear
+  setFocusedYear,
+  yearPickerPage,
+  setYearPickerPage
 }) => {
   const focusManager = reactAria.useFocusManager();
-  const onKeyDown = e => {
+  const prevYear = react.useRef(null);
+  const navByKeyboard = react.useRef(false);
+  const years = getPageYears(selectedYear, yearPickerPage);
+  react.useEffect(() => {
+    if (prevYear.current === undefined) {
+      prevYear.current = yearPickerPage;
+      return;
+    }
+    if (!navByKeyboard.current) {
+      focusManager.focusFirst();
+      return;
+    }
+    navByKeyboard.current = false;
+    yearPickerPage > prevYear.current ? focusManager.focusFirst() : focusManager.focusLast();
+    prevYear.current = yearPickerPage;
+  }, [yearPickerPage, focusManager]);
+  const onKeyDown = year => e => {
     const target = e.currentTarget;
     const parent = target.parentElement;
+    const isFirstYear = years.at(0) === year;
+    const isLastYear = years.at(-1) === year;
     switch (e.key) {
       case 'ArrowRight':
         e.preventDefault();
+        if (isLastYear) {
+          navByKeyboard.current = true;
+          setYearPickerPage(page => page + 1);
+          break;
+        }
         focusManager.focusNext({
           wrap: true
         });
         break;
       case 'ArrowLeft':
         e.preventDefault();
+        if (isFirstYear) {
+          navByKeyboard.current = true;
+          setYearPickerPage(page => page - 1);
+          break;
+        }
         focusManager.focusPrevious({
           wrap: true
         });
@@ -11316,6 +11486,11 @@ const GridFocusManager = ({
       case 'ArrowDown':
         {
           e.preventDefault();
+          if (isLastYear) {
+            navByKeyboard.current = true;
+            setYearPickerPage(page => page + 1);
+            break;
+          }
           const selfIndex = Array.from(parent.children).indexOf(target);
           const focusElement = Array.from(parent.children).at(selfIndex + 5);
           focusManager.focusNext({
@@ -11326,6 +11501,11 @@ const GridFocusManager = ({
       case 'ArrowUp':
         {
           e.preventDefault();
+          if (isFirstYear) {
+            navByKeyboard.current = true;
+            setYearPickerPage(page => page - 1);
+            break;
+          }
           const selfIndex = Array.from(parent.children).indexOf(target);
           const focusElement = Array.from(parent.children).at(selfIndex - 5);
           focusManager.focusPrevious({
@@ -11335,12 +11515,9 @@ const GridFocusManager = ({
         }
     }
   };
-  const years = Array.from({
-    length: 36
-  }, (_, i) => i + (selectedYear - 30 / 2));
   return years.map(year => /*#__PURE__*/jsxRuntime.jsx(GridColumn, {
     $active: selectedYear === year,
-    onKeyDown: onKeyDown,
+    onKeyDown: onKeyDown(year),
     onClick: () => setFocusedYear(year),
     "aria-label": `Set year to ${year}`,
     tabIndex: 0,
@@ -11349,7 +11526,9 @@ const GridFocusManager = ({
 };
 const YearGrid = ({
   setFocusedYear,
-  year: selectedYear
+  year: selectedYear,
+  yearPickerPage,
+  setYearPickerPage
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx(Grid, {
     children: /*#__PURE__*/jsxRuntime.jsx(reactAria.FocusScope, {
@@ -11358,7 +11537,9 @@ const YearGrid = ({
       autoFocus: true,
       children: /*#__PURE__*/jsxRuntime.jsx(GridFocusManager, {
         year: selectedYear,
-        setFocusedYear: setFocusedYear
+        setFocusedYear: setFocusedYear,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     })
   });
@@ -11366,10 +11547,15 @@ const YearGrid = ({
 
 /* eslint-disable react/no-array-index-key */
 
+/**
+ * The grid laying out the cells for the calendars in {link Calendar} and {link RangeCalendar}
+ */
 function CalendarGrid({
   state,
   showYearPicker,
   setShowYearPicker,
+  yearPickerPage,
+  setYearPickerPage,
   ...props
 }) {
   const {
@@ -11394,7 +11580,9 @@ function CalendarGrid({
         year
       }));
       setShowYearPicker(false);
-    }
+    },
+    yearPickerPage: yearPickerPage,
+    setYearPickerPage: setYearPickerPage
   }) : /*#__PURE__*/jsxRuntime.jsxs("table", {
     ...gridProps,
     style: {
@@ -11455,15 +11643,20 @@ function CalendarHeader({
   previousMonthDisabled,
   nextMonthDisabled,
   showYearPicker,
-  setShowYearPicker
+  setShowYearPicker,
+  setYearPickerPage,
+  yearPickerPage
 }) {
+  const years = getPageYears(state.focusedDate.year, yearPickerPage);
+  const backButtonDisabled = showYearPicker && state.minValue ? years[0] < state.minValue.year : previousMonthDisabled;
+  const nextButtonDisabled = showYearPicker && state.maxValue ? years[years.length - 1] > state.maxValue.year : nextMonthDisabled;
   return /*#__PURE__*/jsxRuntime.jsx(HeaderWrapper, {
     children: /*#__PURE__*/jsxRuntime.jsxs(HeaderActions, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: 'ghost_icon',
         "aria-label": 'Previous month',
-        disabled: previousMonthDisabled || showYearPicker,
-        onClick: () => state.focusPreviousPage(),
+        disabled: backButtonDisabled,
+        onClick: () => showYearPicker ? setYearPickerPage(page => page - 1) : state.focusPreviousPage(),
         children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
           data: edsIcons.chevron_left
         })
@@ -11492,8 +11685,8 @@ function CalendarHeader({
         }
       }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: 'ghost_icon',
-        onClick: () => state.focusNextPage(),
-        disabled: nextMonthDisabled || showYearPicker,
+        onClick: () => showYearPicker ? setYearPickerPage(page => page + 1) : state.focusNextPage(),
+        disabled: nextButtonDisabled,
         "aria-label": 'Next month',
         children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
           data: edsIcons.chevron_right
@@ -11514,6 +11707,7 @@ const Calendar = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const [showYearPicker, setShowYearPicker] = react.useState(false);
+  const [yearPickerPage, setYearPickerPage] = react.useState(0);
   const {
     locale
   } = reactAria.useLocale();
@@ -11551,7 +11745,9 @@ const Calendar = /*#__PURE__*/react.forwardRef(({
         previousMonthDisabled: prevButtonProps.isDisabled,
         nextMonthDisabled: nextButtonProps.isDisabled,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
       className: "calendar",
@@ -11561,7 +11757,9 @@ const Calendar = /*#__PURE__*/react.forwardRef(({
       children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
         state: calendarState,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
       children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
@@ -11698,7 +11896,6 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
       onClose: () => setIsOpen(false),
       anchorEl: ref.current,
       placement: 'bottom-start',
-      withinPortal: true,
       children: calendar
     })]
   });
@@ -11796,12 +11993,9 @@ function DateSegment({
  * A field that wraps segments for inputting a date / date-time
  */
 const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
-  const {
-    locale
-  } = reactAria.useLocale();
   const state = datepicker.useDateFieldState({
     ...props,
-    locale,
+    locale: props.locale,
     createCalendar: date.createCalendar
   });
   const {
@@ -11814,7 +12008,8 @@ const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ...fieldProps,
     style: {
-      display: 'flex'
+      display: 'flex',
+      fontFamily: 'Equinor, Arial, sans-serif'
     },
     ref: ref,
     children: state.segments.map((segment, i) => /*#__PURE__*/jsxRuntime.jsx(DateSegment, {
@@ -11826,7 +12021,7 @@ const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
 DateFieldSegments.displayName = 'SingleDateField';
 
 /**
- * Datefield is the input field used in {@link DatePicker} to type in a single date.
+ * DateField is the input field used in {@link DatePicker} to type in a single date.
  * Encapsulates styling / functionality for typing a date
  */
 const DateField = /*#__PURE__*/react.forwardRef(function ({
@@ -11848,6 +12043,7 @@ const DateField = /*#__PURE__*/react.forwardRef(function ({
     children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...state,
       ...fieldProps,
+      locale: dateCreateProps.locale,
       ref: inputRef
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
       style: {
@@ -11893,7 +12089,10 @@ const Toggle = ({
   showClearButton,
   readonly
 }) => {
-  return readonly || disabled ? null : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      visibility: readonly || disabled ? 'hidden' : 'visible'
+    },
     children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
       disabled: disabled,
       variant: 'ghost_icon',
@@ -11933,6 +12132,18 @@ const getCalendarDate = (value, timezone, showTimeInput = false) => {
   return showTimeInput ? date.toCalendarDateTime(date.fromDate(value, timezone)) : date.toCalendarDate(date.fromDate(value, timezone));
 };
 
+const useGetLocale = locale => {
+  const {
+    locale: currentLocale
+  } = reactAria.useLocale();
+  // Priority:
+  // 1. Explicitly passed locale prop
+  // 2. Locale from I18nProvider
+  // 3. Fallback to browser's default
+  const browserLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
+  return locale ?? currentLocale ?? browserLocale;
+};
+
 const DatePicker = /*#__PURE__*/react.forwardRef(({
   onChange,
   label,
@@ -11943,6 +12154,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   Footer,
   Header,
   timezone,
+  locale: propLocale,
   defaultValue,
   showTimeInput,
   granularity,
@@ -12002,16 +12214,14 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     }
   }, [onChange, isOpen, showTimeInput, timezone]);
   const _value = getCalendarDate(value, timezone, showTimeInput) ?? innerValue;
-  const {
-    locale
-  } = reactAria.useLocale();
+  const locale = useGetLocale(propLocale);
   const dateCreateProps = {
     helperProps,
     variant,
     isDisabled,
     value: _value,
     hideTimeZone: true,
-    locale,
+    locale: locale,
     createCalendar: date.createCalendar,
     onChange: _onChange,
     minValue: _minValue,
@@ -12042,49 +12252,52 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   react.useEffect(() => {
     if (!defaultValue && !value) setInnerValue(null);
   }, [defaultValue, value]);
-  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
-    timezone: timezone,
-    formatOptions: formatOptions,
-    children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
-      ...props,
-      isOpen: isOpen,
-      readonly: fieldProps.isReadOnly,
-      pickerRef: pickerRef,
-      ref: ref,
-      setIsOpen: setIsOpen,
-      label: label,
-      calendar: /*#__PURE__*/jsxRuntime.jsx(Calendar, {
-        ref: pickerRef,
-        Footer: Footer,
-        Header: Header,
-        ...calendarProps
-      }),
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      color: pickerState.isInvalid ? 'warning' : variant,
-      helperProps: helperPropsInvalid ?? helperProps,
-      children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
-        fieldProps: fieldProps,
-        groupProps: groupProps,
-        dateCreateProps: dateCreateProps,
+  return /*#__PURE__*/jsxRuntime.jsx(reactAria.I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+      timezone: timezone,
+      formatOptions: formatOptions,
+      children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+        ...props,
+        isOpen: isOpen,
+        readonly: fieldProps.isReadOnly,
+        pickerRef: pickerRef,
         ref: ref,
-        onChange: _onChange,
-        rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
-          showClearButton: showClearButton,
-          setOpen: setIsOpen,
-          open: isOpen,
-          icon: edsIcons.calendar,
-          disabled: isDisabled,
-          readonly: isReadOnly,
-          reset: () => _onChange(null),
-          buttonProps: buttonProps,
-          valueString: pickerState.formatValue(locale, {
-            year: 'numeric',
-            month: 'short',
-            day: '2-digit'
-          })
+        setIsOpen: setIsOpen,
+        label: label,
+        calendar: /*#__PURE__*/jsxRuntime.jsx(Calendar, {
+          ref: pickerRef,
+          Footer: Footer,
+          Header: Header,
+          ...calendarProps
         }),
-        variant: variant
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        color: pickerState.isInvalid ? 'warning' : variant,
+        helperProps: helperPropsInvalid ?? helperProps,
+        children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
+          fieldProps: fieldProps,
+          groupProps: groupProps,
+          dateCreateProps: dateCreateProps,
+          ref: ref,
+          onChange: _onChange,
+          rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+            showClearButton: showClearButton,
+            setOpen: setIsOpen,
+            open: isOpen,
+            icon: edsIcons.calendar,
+            disabled: isDisabled,
+            readonly: isReadOnly,
+            reset: () => _onChange(null),
+            buttonProps: buttonProps,
+            valueString: pickerState.formatValue(locale, {
+              year: 'numeric',
+              month: 'short',
+              day: '2-digit'
+            })
+          }),
+          variant: variant
+        })
       })
     })
   });
@@ -12097,6 +12310,7 @@ const RangeCalendar = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const [showYearPicker, setShowYearPicker] = react.useState(false);
+  const [yearPickerPage, setYearPickerPage] = react.useState(0);
   const {
     locale
   } = reactAria.useLocale();
@@ -12127,13 +12341,17 @@ const RangeCalendar = /*#__PURE__*/react.forwardRef(({
         state: state,
         title: title,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        setYearPickerPage: setYearPickerPage,
+        yearPickerPage: yearPickerPage
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
       children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
         state: state,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
       children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
@@ -12167,8 +12385,9 @@ const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
     ...props.groupProps,
     children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...props.startFieldProps,
-      ref: fromRef
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
+      ref: fromRef,
+      locale: props.locale
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
       as: 'span',
       variant: 'text',
       group: 'input',
@@ -12178,7 +12397,8 @@ const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
       children: "\u2014"
     }), /*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...props.endFieldProps,
-      ref: toRef
+      ref: toRef,
+      locale: props.locale
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
       style: {
         flex: '1 1 auto'
@@ -12199,6 +12419,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   Header,
   timezone,
   defaultValue,
+  locale: propLocale,
   formatOptions,
   hideClearButton,
   disabled: isDisabled,
@@ -12224,9 +12445,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   const inputRef = react.useRef(null);
   const pickerRef = react.useRef(null);
   const ref = forwardedRef || inputRef;
-  const {
-    locale
-  } = reactAria.useLocale();
+  const locale = useGetLocale(propLocale);
   const {
     _minValue,
     _maxValue,
@@ -12292,46 +12511,51 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
     if (!defaultValue && !value) setInnerValue(null);
     if (!val?.from && !val?.to) setInnerValue(null);
   }, [defaultValue, value]);
-  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
-    timezone: timezone,
-    formatOptions: formatOptions,
-    children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
-      isOpen: isOpen,
-      color: state.isInvalid ? 'warning' : props.variant,
-      helperProps: helperProps ?? props.helperProps,
-      readonly: startFieldProps.isReadOnly,
-      ref: ref,
-      pickerRef: pickerRef,
-      setIsOpen: setIsOpen,
-      label: label,
-      calendar: /*#__PURE__*/jsxRuntime.jsx(RangeCalendar, {
-        ref: pickerRef,
-        maxValue: _maxValue,
-        minValue: _minValue,
-        isDateUnavailable: _isDateUnavailable,
-        Footer: Footer,
-        Header: Header,
-        ...calendarProps
-      }),
-      children: /*#__PURE__*/jsxRuntime.jsx(DateRangeField, {
-        startFieldProps: startFieldProps,
-        endFieldProps: endFieldProps,
-        groupProps: groupProps,
+  return /*#__PURE__*/jsxRuntime.jsx(reactAria.I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+      timezone: timezone,
+      formatOptions: formatOptions,
+      children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+        ...props,
+        isOpen: isOpen,
+        color: state.isInvalid ? 'warning' : props.variant,
+        helperProps: helperProps ?? props.helperProps,
+        readonly: startFieldProps.isReadOnly,
         ref: ref,
-        variant: props.variant,
-        disabled: isDisabled,
-        rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
-          showClearButton: showClearButton,
-          buttonProps: buttonProps,
+        pickerRef: pickerRef,
+        setIsOpen: setIsOpen,
+        label: label,
+        calendar: /*#__PURE__*/jsxRuntime.jsx(RangeCalendar, {
+          ref: pickerRef,
+          maxValue: _maxValue,
+          minValue: _minValue,
+          isDateUnavailable: _isDateUnavailable,
+          Footer: Footer,
+          Header: Header,
+          ...calendarProps
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(DateRangeField, {
+          startFieldProps: startFieldProps,
+          endFieldProps: endFieldProps,
+          groupProps: groupProps,
+          ref: ref,
+          variant: props.variant,
           disabled: isDisabled,
-          readonly: isReadOnly,
-          reset: () => {
-            _onChange(null);
-          },
-          setOpen: setIsOpen,
-          open: isOpen,
-          icon: edsIcons.calendar_date_range,
-          valueString: valueString
+          locale: locale,
+          rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+            showClearButton: showClearButton,
+            buttonProps: buttonProps,
+            disabled: isDisabled,
+            readonly: isReadOnly,
+            reset: () => {
+              _onChange(null);
+            },
+            setOpen: setIsOpen,
+            open: isOpen,
+            icon: edsIcons.calendar_date_range,
+            valueString: valueString
+          })
         })
       })
     })
@@ -12340,51 +12564,97 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
 DateRangePicker.displayName = 'DateRangePicker';
 
 exports.Accordion = Accordion;
+exports.AccordionHeader = AccordionHeader$1;
+exports.AccordionHeaderActions = AccordionHeaderActions;
+exports.AccordionHeaderTitle = AccordionHeaderTitle;
+exports.AccordionItem = AccordionItem;
+exports.AccordionPanel = AccordionPanel;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Banner = Banner;
-exports.BodyText = BodyText;
+exports.BannerActions = BannerActions;
+exports.BannerIcon = BannerIcon;
+exports.BannerMessage = BannerMessage;
+exports.Breadcrumb = Breadcrumb;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$1;
+exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
+exports.CardActions = CardActions;
+exports.CardContent = CardContent;
+exports.CardHeader = CardHeader;
+exports.CardHeaderTitle = CardHeaderTitle;
+exports.CardMedia = CardMedia;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.Dialog = Dialog;
+exports.DialogActions = DialogActions;
+exports.DialogContent = DialogContent;
+exports.DialogHeader = DialogHeader;
+exports.DialogTitle = DialogTitle;
 exports.Divider = Divider;
 exports.DotProgress = DotProgress;
 exports.EdsProvider = EdsProvider;
-exports.Heading = Heading;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
-exports.Label = Label$3;
+exports.Label = Label$2;
 exports.LinearProgress = LinearProgress;
 exports.List = List$1;
+exports.ListItem = ListItem$2;
 exports.Menu = Menu;
+exports.MenuItem = MenuItem$1;
+exports.MenuSection = MenuSection;
 exports.NativeSelect = NativeSelect;
 exports.Pagination = Pagination;
 exports.Paper = Paper;
 exports.Popover = Popover;
+exports.PopoverActions = PopoverActions;
+exports.PopoverContent = PopoverContent;
+exports.PopoverHeader = PopoverHeader;
+exports.PopoverTitle = PopoverTitle;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Scrim = Scrim;
 exports.Search = Search;
 exports.SideBar = SideBar;
+exports.SideBarAccordion = SideBarAccordion;
+exports.SideBarAccordionItem = SideBarAccordionItem;
+exports.SideBarButton = SideBarButton;
+exports.SideBarContent = SideBarContent;
+exports.SideBarFooter = SideBarFooter;
+exports.SideBarToggle = SideBarToggle;
 exports.SideSheet = SideSheet;
+exports.SidebarLink = SidebarLink;
 exports.Slider = Slider;
 exports.Snackbar = Snackbar;
+exports.SnackbarAction = SnackbarAction;
 exports.StarProgress = StarProgress;
 exports.Switch = Switch;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
 exports.Table = Table;
+exports.TableBody = Body;
+exports.TableCaption = Caption;
+exports.TableCell = Cell;
+exports.TableFoot = Foot;
+exports.TableHead = Head;
 exports.TableOfContents = TableOfContents;
+exports.TableOfContentsLinkItem = LinkItem;
+exports.TableRow = Row;
 exports.Tabs = Tabs;
 exports.TextField = TextField;
+exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip$2;
 exports.TopBar = TopBar;
-exports.Typography = Typography$1;
-exports.UIText = UIText;
+exports.TopbarActions = Actions;
+exports.TopbarCustomContent = CustomContent;
+exports.TopbarHeader = Header$2;
+exports.Typography = Typography;
 exports.useEds = useEds;
 exports.useSideBar = useSideBar;