npm - @equinor/eds-core-react - Versions diffs - 0.29.2-dev14022023 → 0.31.0 - Mend

@equinor/eds-core-react 0.29.2-dev14022023 → 0.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

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

@@ -286,6 +286,8 @@ var mergeWithKey = /*#__PURE__*/
 _curry3(function mergeWithKey(fn, l, r) {
   var result = {};
   var k;
+  l = l || {};
+  r = r || {};
   for (k in l) {
     if (_has(k, l)) {
       result[k] = _has(k, r) ? fn(k, l[k], r[k]) : l[k];
@@ -791,7 +793,7 @@ var useEds = function useEds() {
   return react.useContext(EdsContext);
 };
-var _excluded$1q = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+var _excluded$1s = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
     case 'ghost':
@@ -835,7 +837,7 @@ var ButtonBase = styled__default["default"].button.withConfig({
     disabled = states.disabled;
   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;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::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 === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
-var Button$1 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
+var Button$2 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'primary' : _ref2$color,
     _ref2$variant = _ref2.variant,
@@ -848,7 +850,7 @@ var Button$1 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
     tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
     _ref2$fullWidth = _ref2.fullWidth,
     fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-    other = _objectWithoutProperties__default["default"](_ref2, _excluded$1q);
+    other = _objectWithoutProperties__default["default"](_ref2, _excluded$1s);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -885,9 +887,9 @@ var group = {
   }
 };
-var _excluded$1p = ["children", "vertical"];
-var border$4 = group.border;
-var radius$1 = border$4.type === 'border' && border$4.radius;
+var _excluded$1r = ["children", "vertical"];
+var border$5 = group.border;
+var radius$1 = border$5.type === 'border' && border$5.radius;
 var ButtonGroupBase = styled__default["default"].div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"
@@ -898,7 +900,7 @@ var ButtonGroupBase = styled__default["default"].div.withConfig({
 var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
     vertical = _ref2.vertical,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1p);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1r);
   var props = _objectSpread__default["default"]({
     ref: ref,
     vertical: vertical
@@ -950,7 +952,7 @@ var tooltip = {
   }
 };
-var _excluded$1o = ["title", "placement", "children", "style", "enterDelay"];
+var _excluded$1q = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled__default["default"].div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
@@ -963,7 +965,7 @@ var TooltipArrow = styled__default["default"].svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-var Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
+var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   var title = _ref.title,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
@@ -971,7 +973,7 @@ var Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
     style = _ref.style,
     _ref$enterDelay = _ref.enterDelay,
     enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1o);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1q);
   var arrowRef = react.useRef(null);
   var _useState = react.useState(false),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -1075,13 +1077,13 @@ var Tooltip$1 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   });
 });
-var _excluded$1n = ["children", "multiple", "selectedIndexes", "onChange"];
+var _excluded$1p = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
   var children = _ref.children,
     multiple = _ref.multiple,
     selectedIndexes = _ref.selectedIndexes,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1n);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1p);
   var _useState = react.useState(selectedIndexes || []),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     pickedIndexes = _useState2[0],
@@ -1093,7 +1095,7 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
   }, [selectedIndexes]);
   function updateProps(child, isSelected, index) {
     var childElement = child;
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Button$1) {
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Button$2) {
       var buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
@@ -1118,7 +1120,7 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
   var updatedChildren = react.Children.map(children, function (child, index) {
     var isSelected = pickedIndexes.includes(index);
     var childElement = child;
-    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$1) {
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$2) {
       var updatedGrandChildren = react.Children.map(childElement.props.children, function (grandChild) {
         return updateProps(grandChild, isSelected, index);
       });
@@ -1134,11 +1136,11 @@ var ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref
   }));
 });
-var Button = Button$1;
-Button.Group = ButtonGroup;
-Button.Toggle = ToggleButton;
-Button.Group.displayName = 'Button.Group';
-Button.Toggle.displayName = 'Button.Toggle';
+var Button$1 = Button$2;
+Button$1.Group = ButtonGroup;
+Button$1.Toggle = ToggleButton;
+Button$1.Group.displayName = 'Button.Group';
+Button$1.Toggle.displayName = 'Button.Toggle';
 var typography$g = edsTokens.tokens.typography,
   colorsToken = edsTokens.tokens.colors,
@@ -1152,7 +1154,7 @@ var _colorsToken$interact = colorsToken.interactive,
   warning$5 = _colorsToken$interact.warning__resting.rgba,
   success$2 = _colorsToken$interact.success__resting.rgba,
   disabled = _colorsToken$interact.disabled__text.rgba,
-  focus$1 = _colorsToken$interact.focus.rgba;
+  focus$3 = _colorsToken$interact.focus.rgba;
 var colors$5 = {
   primary: primary$5,
   secondary: secondary,
@@ -1167,7 +1169,7 @@ var link = {
     focus: {
       outline: {
         width: focusOutlineWidth$8,
-        color: focus$1,
+        color: focus$3,
         style: 'dashed',
         type: 'outline',
         offset: '2px'
@@ -1176,7 +1178,7 @@ var link = {
   }
 };
-var _excluded$1m = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
+var _excluded$1o = ["variant", "children", "bold", "italic", "link", "group", "token", "as"];
 var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
@@ -1248,7 +1250,7 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
     group = _ref5.group,
     token = _ref5.token,
     providedAs = _ref5.as,
-    other = _objectWithoutProperties__default["default"](_ref5, _excluded$1m);
+    other = _objectWithoutProperties__default["default"](_ref5, _excluded$1o);
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
   var typography = findTypography(variantName, group);
@@ -1273,7 +1275,7 @@ var _tokens$typography$2 = edsTokens.tokens.typography,
   cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
   compactTypography$1 = _tokens$typography$2._modes.compact,
   _tokens$colors$i = edsTokens.tokens.colors,
-  typographyColor$1 = _tokens$colors$i.text.static_icons__default.rgba,
+  typographyColor$3 = _tokens$colors$i.text.static_icons__default.rgba,
   borderColor$4 = _tokens$colors$i.ui.background__medium.rgba,
   _tokens$colors$intera$g = _tokens$colors$i.interactive,
   backgroundColor$5 = _tokens$colors$intera$g.table__cell__fill_resting.rgba,
@@ -1306,7 +1308,7 @@ var tableCell = {
     right: "var(--eds_table__cell__padding_x, ".concat(medium$6, ")")
   },
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, cellTypography$1), {}, {
-    color: typographyColor$1,
+    color: typographyColor$3,
     fontSize: "var(--eds_table__font_size, ".concat(cellTypography$1.fontSize, ")")
   }),
   states: {
@@ -1348,7 +1350,7 @@ var tableCell = {
     compact: {
       height: 'var(--eds_table__cell__height_compact, 32px)',
       typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, compactTypography$1.table.cell_text), {}, {
-        color: typographyColor$1
+        color: typographyColor$3
       }),
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
@@ -1366,12 +1368,12 @@ var tableCell = {
   variants: {
     numeric: {
       typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, cellNumericTypography), {}, {
-        color: typographyColor$1
+        color: typographyColor$3
       }),
       modes: {
         compact: {
           typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, compactTypography$1.table.cell_numeric_monospaced), {}, {
-            color: typographyColor$1
+            color: typographyColor$3
           })
         }
       }
@@ -1387,14 +1389,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
-var _excluded$1l = ["children"];
+var _excluded$1n = ["children"];
 var TableBase$1 = styled__default["default"].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
 var Table$1 = /*#__PURE__*/react.forwardRef(function Table(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1l);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1n);
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: children
@@ -1408,14 +1410,14 @@ var initalState$2 = {
 };
 var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
-var _excluded$1k = ["children"];
+var _excluded$1m = ["children"];
 var TableBase = styled__default["default"].tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
 var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1k);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1m);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
@@ -1427,7 +1429,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
-var _excluded$1j = ["children", "variant"];
+var _excluded$1l = ["children", "variant"];
 var StyledTableCell$1 = styled__default["default"].td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1448,7 +1450,7 @@ var TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell(_ref2,
   var children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1j);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1l);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1467,7 +1469,7 @@ var _tokens$typography$1 = edsTokens.tokens.typography,
   cellTypography = _tokens$typography$1.table.cell_header,
   compactTypography = _tokens$typography$1._modes.compact,
   _tokens$colors$h = edsTokens.tokens.colors,
-  typographyColor = _tokens$colors$h.text.static_icons__default.rgba,
+  typographyColor$2 = _tokens$colors$h.text.static_icons__default.rgba,
   borderColor$3 = _tokens$colors$h.ui.background__medium.rgba,
   _tokens$colors$intera$f = _tokens$colors$h.interactive,
   backgroundColor$4 = _tokens$colors$intera$f.table__header__fill_resting.rgba,
@@ -1485,7 +1487,7 @@ var token$4 = {
     vertical: 'var(--eds_table__cell__vertical_align, inherit)'
   },
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, cellTypography), {}, {
-    color: typographyColor,
+    color: typographyColor$2,
     fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
   }),
   border: {
@@ -1553,7 +1555,7 @@ var token$4 = {
   }
 };
-var _excluded$1i = ["children", "sort"];
+var _excluded$1k = ["children", "sort"];
 var StyledTableCell = styled__default["default"].th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
@@ -1583,7 +1585,7 @@ var CellInner = styled__default["default"].div.withConfig({
 var TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell(_ref, ref) {
   var children = _ref.children,
     sort = _ref.sort,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1i);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1k);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1640,7 +1642,7 @@ var token$3 = {
   }
 };
-var _excluded$1h = ["children", "sticky"];
+var _excluded$1j = ["children", "sticky"];
 var StyledTableHead = styled__default["default"].thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1648,7 +1650,7 @@ var StyledTableHead = styled__default["default"].thead.withConfig({
 var Head = /*#__PURE__*/react.forwardRef(function Head(_ref, ref) {
   var children = _ref.children,
     sticky = _ref.sticky,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1h);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1j);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
@@ -1765,7 +1767,7 @@ var tokens$4 = /*#__PURE__*/Object.freeze({
   medium: medium$4
 });
-var _excluded$1g = ["color", "variant", "size"];
+var _excluded$1i = ["color", "variant", "size"];
 var divider = divider$1;
 var StyledDivider$3 = styled__default["default"].hr.withConfig({
   displayName: "Divider__StyledDivider",
@@ -1784,7 +1786,7 @@ var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
     variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? '1' : _ref2$size,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1g);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1i);
   var colorValue = color === 'medium' ? 'mediumColor' : color;
   var props = _objectSpread__default["default"]({
     backgroundColor: divider[colorValue].background,
@@ -1820,7 +1822,7 @@ var label = {
   }
 };
-var _excluded$1f = ["label", "meta", "disabled"];
+var _excluded$1h = ["label", "meta", "disabled"];
 var LabelBase = styled__default["default"].label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
@@ -1828,7 +1830,7 @@ var LabelBase = styled__default["default"].label.withConfig({
   var disabledText = _ref.disabledText;
   return disabledText ? label.states.disabled.typography.color : label.typography.color;
 });
-var Text$2 = styled__default["default"].span.withConfig({
+var Text$3 = styled__default["default"].span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
@@ -1838,7 +1840,7 @@ var Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
     meta = props.meta,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    other = _objectWithoutProperties__default["default"](props, _excluded$1f);
+    other = _objectWithoutProperties__default["default"](props, _excluded$1h);
   return (
     /*#__PURE__*/
     /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
@@ -1846,9 +1848,9 @@ var Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
       ref: ref,
       disabledText: disabled
     }, other), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(Text$2, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
         children: label
-      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$2, {
+      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$3, {
         children: meta
       })]
     }))
@@ -1881,8 +1883,8 @@ var helperText = {
   }
 };
-var _excluded$1e = ["text", "icon", "color"];
-var Container$5 = styled__default["default"].div.withConfig({
+var _excluded$1g = ["text", "icon", "color"];
+var Container$6 = styled__default["default"].div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-189ug61-0"
 })(function (_ref) {
@@ -1896,7 +1898,7 @@ var Container$5 = styled__default["default"].div.withConfig({
     color: color
   });
 });
-var Text$1 = styled__default["default"].p.withConfig({
+var Text$2 = styled__default["default"].p.withConfig({
   displayName: "HelperText__Text",
   componentId: "sc-189ug61-1"
 })(["margin:0;", ";"], edsUtils.typographyMixin(helperText.typography));
@@ -1905,15 +1907,15 @@ var TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelper
     icon = _ref2.icon,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? helperText.typography.color : _ref2$color,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1e);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$1g);
   if (!text) {
     return null;
   }
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, _objectSpread__default["default"](_objectSpread__default["default"]({}, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$6, _objectSpread__default["default"](_objectSpread__default["default"]({}, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     color: color,
     ref: ref
   })), {}, {
-    children: [icon, /*#__PURE__*/jsxRuntime.jsx(Text$1, {
+    children: [icon, /*#__PURE__*/jsxRuntime.jsx(Text$2, {
       children: text
     })]
   }));
@@ -2078,8 +2080,8 @@ var inputToken$1 = {
   success: success$1
 };
-var _excluded$1d = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
-var Container$4 = styled__default["default"].div.withConfig({
+var _excluded$1f = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
+var Container$5 = styled__default["default"].div.withConfig({
   displayName: "InputWrapper__Container",
   componentId: "sc-v6o9z1-0"
 })([""]);
@@ -2101,7 +2103,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
     _ref$helperProps = _ref.helperProps,
     helperProps = _ref$helperProps === void 0 ? {} : _ref$helperProps,
     helperIcon = _ref.helperIcon,
-    other = _objectWithoutProperties__default["default"](_ref, _excluded$1d);
+    other = _objectWithoutProperties__default["default"](_ref, _excluded$1f);
   var _useEds = useEds(),
     density = _useEds.density;
   var actualVariant = color || 'input';
@@ -2117,7 +2119,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
   var hasLabel = Boolean(label || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.label));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$5, _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
       ref: ref,
       children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"]({}, _objectSpread__default["default"]({
         label: label
@@ -2323,8 +2325,8 @@ var tokens$3 = /*#__PURE__*/Object.freeze({
   inputToken: inputToken
 });
-var _excluded$1c = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
-var Container$3 = styled__default["default"].div.withConfig({
+var _excluded$1e = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
+var Container$4 = styled__default["default"].div.withConfig({
   displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
 })(function (_ref) {
@@ -2334,7 +2336,7 @@ var Container$3 = styled__default["default"].div.withConfig({
     readOnly = _ref.readOnly;
   var states = token.states,
     entities = token.entities;
-  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
+  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));
@@ -2384,7 +2386,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
     rightAdornmentsProps = _ref6.rightAdornmentsProps,
     leftAdornmentsWidth = _ref6.leftAdornmentsWidth,
     rightAdornmentsWidth = _ref6.rightAdornmentsWidth,
-    other = _objectWithoutProperties__default["default"](_ref6, _excluded$1c);
+    other = _objectWithoutProperties__default["default"](_ref6, _excluded$1e);
   var inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
   var _useEds = useEds(),
     density = _useEds.density;
@@ -2437,7 +2439,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
   return (
     /*#__PURE__*/
     // Not using <ThemeProvider> because of cascading styling messing with adornments
-    jsxRuntime.jsxs(Container$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
+    jsxRuntime.jsxs(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
       children: [leftAdornments ? /*#__PURE__*/jsxRuntime.jsx(LeftAdornments, _objectSpread__default["default"](_objectSpread__default["default"]({}, _leftAdornmentProps), {}, {
         children: leftAdornments
       })) : null, /*#__PURE__*/jsxRuntime.jsx(StyledInput, _objectSpread__default["default"]({
@@ -2450,7 +2452,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
   );
 });
-var _excluded$1b = ["variant", "disabled", "type", "rowsMax"];
+var _excluded$1d = ["variant", "disabled", "type", "rowsMax"];
 var input = input$1;
 var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
   var variant = _ref.variant,
@@ -2459,7 +2461,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     rowsMax = _ref.rowsMax,
-    other = _objectWithoutProperties__default["default"](_ref, _excluded$1b);
+    other = _objectWithoutProperties__default["default"](_ref, _excluded$1d);
   var inputVariant = tokens$3[variant] ? tokens$3[variant] : input$1;
   var _useState = react.useState(null),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -2504,7 +2506,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
   }, inputProps));
 });
-var _excluded$1a = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
+var _excluded$1c = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 /** Proxy component for working around typescript and element type switching */
 var Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
   return props.multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, _objectSpread__default["default"]({
@@ -2531,7 +2533,7 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     rowsMax = _ref.rowsMax,
     textareaRef = _ref.textareaRef,
     inputRef = _ref.inputRef,
-    other = _objectWithoutProperties__default["default"](_ref, _excluded$1a);
+    other = _objectWithoutProperties__default["default"](_ref, _excluded$1c);
   var helperTextId = edsUtils.useId(null, 'helpertext');
   var fieldProps = _objectSpread__default["default"]({
     'aria-invalid': variant === 'error' || undefined,
@@ -2599,7 +2601,7 @@ var get = function get(name) {
   };
 };
-var _excluded$19 = ["size", "color", "name", "rotation", "title", "data"];
+var _excluded$1b = ["size", "color", "name", "rotation", "title", "data"];
 var transform = function transform(_ref) {
   var rotation = _ref.rotation;
   return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
@@ -2661,7 +2663,7 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
     rotation = _ref5.rotation,
     title = _ref5.title,
     data = _ref5.data,
-    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$19);
+    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$1b);
   // eslint-disable-next-line prefer-const
   var _findIcon = findIcon(name, data, size),
     icon = _findIcon.icon,
@@ -2718,7 +2720,7 @@ var list = {
   typography: paragraph$1.body_short
 };
-var _excluded$18 = ["children", "variant"];
+var _excluded$1a = ["children", "variant"];
 var typography$b = list.typography;
 var StyledList$1 = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
@@ -2731,7 +2733,7 @@ var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   var children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'bullet' : _ref2$variant,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$18);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$1a);
   var as = variant === 'numbered' ? 'ol' : 'ul';
   return /*#__PURE__*/jsxRuntime.jsx(StyledList$1, _objectSpread__default["default"](_objectSpread__default["default"]({
     as: as,
@@ -2741,10 +2743,10 @@ var List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   }));
 });
-var _excluded$17 = ["children"];
+var _excluded$19 = ["children"];
 var ListItem$2 = /*#__PURE__*/react.forwardRef(function ListItem(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$17);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$19);
   return /*#__PURE__*/jsxRuntime.jsx("li", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: children
@@ -2839,7 +2841,7 @@ var accordion = {
   }
 };
-var _excluded$16 = ["headerLevel", "chevronPosition", "children", "id"];
+var _excluded$18 = ["headerLevel", "chevronPosition", "children", "id"];
 var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   var _ref$headerLevel = _ref.headerLevel,
     headerLevel = _ref$headerLevel === void 0 ? 'h2' : _ref$headerLevel,
@@ -2847,7 +2849,7 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
     chevronPosition = _ref$chevronPosition === void 0 ? 'left' : _ref$chevronPosition,
     children = _ref.children,
     id = _ref.id,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$16);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$18);
   var accordionId = edsUtils.useId(id, 'accordion');
   var _useEds = useEds(),
     density = _useEds.density;
@@ -2872,29 +2874,37 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   });
 });
-var _excluded$15 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var _excluded$17 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "onExpandedChange", "children", "disabled"];
 var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, ref) {
   var headerLevel = _ref.headerLevel,
     chevronPosition = _ref.chevronPosition,
     _ref$index = _ref.index,
     index = _ref$index === void 0 ? 0 : _ref$index,
     accordionId = _ref.accordionId,
-    isExpanded = _ref.isExpanded,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    onExpandedChange = _ref.onExpandedChange,
     children = _ref.children,
     disabled = _ref.disabled,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$15);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$17);
   var _useState = react.useState(isExpanded),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     expanded = _useState2[0],
     setExpanded = _useState2[1];
+  var controlled = onExpandedChange != undefined;
+  var activeExpandedState = controlled ? isExpanded : expanded;
   var toggleExpanded = function toggleExpanded() {
-    setExpanded(!expanded);
+    if (controlled) {
+      onExpandedChange(!isExpanded);
+    } else {
+      setExpanded(!expanded);
+    }
   };
   var Children = react.Children.map(children, function (child, childIndex) {
     var headerId = "".concat(accordionId, "-header-").concat(index + 1);
     var panelId = "".concat(accordionId, "-panel-").concat(index + 1);
     return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
-      isExpanded: expanded,
+      isExpanded: activeExpandedState,
       toggleExpanded: toggleExpanded,
       id: headerId,
       panelId: panelId,
@@ -2903,21 +2913,23 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
       parentIndex: index,
       disabled: disabled
     }) : /*#__PURE__*/react.cloneElement(child, {
-      hidden: !expanded,
+      hidden: !activeExpandedState,
       id: panelId,
       headerId: headerId
     });
   });
   react.useEffect(function () {
-    setExpanded(isExpanded);
-  }, [isExpanded]);
+    if (!controlled) {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded, controlled]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: Children
   }));
 });
-var _excluded$14 = ["isExpanded", "disabled", "children"];
+var _excluded$16 = ["isExpanded", "disabled", "children"];
 var StyledAccordionHeaderTitle = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
@@ -2933,7 +2945,7 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
   var isExpanded = _ref2.isExpanded,
     disabled = _ref2.disabled,
     children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$14);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$16);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
     isExpanded: isExpanded,
@@ -2943,7 +2955,7 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
   }));
 });
-var _excluded$13 = ["isExpanded", "disabled", "children"];
+var _excluded$15 = ["isExpanded", "disabled", "children"];
 var StyledAccordionHeaderActions = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
   componentId: "sc-klu9el-0"
@@ -2965,7 +2977,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
   var isExpanded = _ref2.isExpanded,
     disabled = _ref2.disabled,
     children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$13);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$15);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
     isExpanded: isExpanded,
@@ -2975,7 +2987,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
   }));
 });
-var _excluded$12 = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
+var _excluded$14 = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
 var chevronToken = accordion.entities.chevron;
 var StyledAccordionHeader = styled__default["default"].div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
@@ -3038,7 +3050,7 @@ var StyledIcon$1 = styled__default["default"](Icon$1).withConfig({
     marginLeft: '16px'
   }));
 });
-var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_ref5, ref) {
+var AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader(_ref5, ref) {
   var parentIndex = _ref5.parentIndex,
     headerLevel = _ref5.headerLevel,
     chevronPosition = _ref5.chevronPosition,
@@ -3051,7 +3063,7 @@ var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_re
     disabled = _ref5.disabled,
     className = _ref5.className,
     style = _ref5.style,
-    props = _objectWithoutProperties__default["default"](_ref5, _excluded$12);
+    props = _objectWithoutProperties__default["default"](_ref5, _excluded$14);
   var handleClick = function handleClick(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -3127,7 +3139,7 @@ var AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_re
   });
 });
-var _excluded$11 = ["id", "headerId", "hidden", "children"];
+var _excluded$13 = ["id", "headerId", "hidden", "children"];
 var StyledAccordionPanel = styled__default["default"].div.attrs(function (_ref) {
   var headerId = _ref.headerId;
   return {
@@ -3150,7 +3162,7 @@ var AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel(_ref3
     headerId = _ref3.headerId,
     hidden = _ref3.hidden,
     children = _ref3.children,
-    props = _objectWithoutProperties__default["default"](_ref3, _excluded$11);
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded$13);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionPanel, _objectSpread__default["default"](_objectSpread__default["default"]({
     headerId: headerId,
     id: id,
@@ -3163,7 +3175,7 @@ var AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel(_ref3
 var Accordion = Accordion$1;
 Accordion.Item = AccordionItem;
-Accordion.Header = AccordionHeader;
+Accordion.Header = AccordionHeader$1;
 Accordion.HeaderTitle = AccordionHeaderTitle;
 Accordion.HeaderActions = AccordionHeaderActions;
 Accordion.Panel = AccordionPanel;
@@ -3293,7 +3305,7 @@ var token$1 = {
   }
 };
-var _excluded$10 = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
+var _excluded$12 = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
 var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   var _ref$activeTab = _ref.activeTab,
     activeTab = _ref$activeTab === void 0 ? 0 : _ref$activeTab,
@@ -3308,7 +3320,7 @@ var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
     _ref$scrollable = _ref.scrollable,
     scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
     id = _ref.id,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$10);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$12);
   var tabsId = edsUtils.useId(id, 'tabs');
   var tabsRef = react.useRef(null);
   var combinedTabsRef = react.useMemo(function () {
@@ -3391,7 +3403,7 @@ var Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   });
 });
-var _excluded$$ = ["children"];
+var _excluded$11 = ["children"];
 var variants$1 = {
   fullWidth: 'minmax(1%, 360px)',
   minWidth: 'max-content'
@@ -3413,7 +3425,7 @@ var StyledTabList = styled__default["default"].div.attrs(function () {
 var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   var _ref3$children = _ref3.children,
     children = _ref3$children === void 0 ? [] : _ref3$children,
-    props = _objectWithoutProperties__default["default"](_ref3, _excluded$$);
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded$11);
   var _useContext = react.useContext(TabsContext),
     activeTab = _useContext.activeTab,
     handleChange = _useContext.handleChange,
@@ -3486,7 +3498,7 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   }));
 });
-var _excluded$_ = ["active"];
+var _excluded$10 = ["active"];
 var StyledTab = styled__default["default"].button.attrs(function (_ref) {
   var _ref$$active = _ref.$active,
     $active = _ref$$active === void 0 ? false : _ref$$active,
@@ -3511,17 +3523,17 @@ var StyledTab = styled__default["default"].button.attrs(function (_ref) {
 });
 var Tab = /*#__PURE__*/react.forwardRef(function Tab(_ref3, ref) {
   var active = _ref3.active,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$_);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$10);
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, _objectSpread__default["default"]({
     ref: ref,
     $active: active
   }, rest));
 });
-var _excluded$Z = ["children"];
+var _excluded$$ = ["children"];
 var TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$Z);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$$);
   var _useContext = react.useContext(TabsContext),
     activeTab = _useContext.activeTab,
     tabsId = _useContext.tabsId;
@@ -3577,7 +3589,7 @@ var paper = {
   background: background$b
 };
-var _excluded$Y = ["elevation"];
+var _excluded$_ = ["elevation"];
 var StyledPaper = styled__default["default"].div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
@@ -3588,7 +3600,7 @@ var StyledPaper = styled__default["default"].div.withConfig({
 var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
   var _elevationToken$eleva;
   var elevation$1 = _ref2.elevation,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Y);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$_);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     $elevation: (_elevationToken$eleva = elevation[elevation$1]) !== null && _elevationToken$eleva !== void 0 ? _elevationToken$eleva : 'none'
   });
@@ -3635,7 +3647,7 @@ var tokens$2 = /*#__PURE__*/Object.freeze({
   warning: warning$2
 });
-var _excluded$X = ["children", "variant", "elevation"];
+var _excluded$Z = ["children", "variant", "elevation"];
 var primary$3 = primary$4;
 var StyledCard = styled__default["default"](Paper).withConfig({
   displayName: "Card__StyledCard",
@@ -3650,7 +3662,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
     variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
     _ref2$elevation = _ref2.elevation,
     elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$X);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Z);
   var cardVariant = variant === 'default' ? 'primary' : variant;
   var token = tokens$2[cardVariant];
   var props = _objectSpread__default["default"]({
@@ -3664,7 +3676,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
   }));
 });
-var _excluded$W = ["children", "alignRight", "meta"];
+var _excluded$Y = ["children", "alignRight", "meta"];
 var spacings$6 = primary$4.spacings;
 var StyledCardActions = styled__default["default"].div.withConfig({
   displayName: "CardActions__StyledCardActions",
@@ -3679,7 +3691,7 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
     alignRight = _ref2$alignRight === void 0 ? false : _ref2$alignRight,
     _ref2$meta = _ref2.meta,
     meta = _ref2$meta === void 0 ? '' : _ref2$meta,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$W);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$Y);
   var justifyContent = alignRight ? 'flex-end' : 'flex-start';
   var props = _objectSpread__default["default"]({
     ref: ref,
@@ -3693,7 +3705,7 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
   }));
 });
-var _excluded$V = ["children"];
+var _excluded$X = ["children"];
 var spacings$5 = primary$4.spacings;
 var StyledCardContent = styled__default["default"].div.withConfig({
   displayName: "CardContent__StyledCardContent",
@@ -3701,7 +3713,7 @@ var StyledCardContent = styled__default["default"].div.withConfig({
 })(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.bottom);
 var CardContent = /*#__PURE__*/react.forwardRef(function CardContent(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$V);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$X);
   return /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3709,21 +3721,21 @@ var CardContent = /*#__PURE__*/react.forwardRef(function CardContent(_ref, ref)
   }));
 });
-var _excluded$U = ["children", "fullWidth"];
+var _excluded$W = ["children", "fullWidth"];
 var spacings$4 = primary$4.spacings,
-  border$3 = primary$4.border;
+  border$4 = primary$4.border;
 var StyledCardMedia = styled__default["default"].div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
 })(["display:flex;width:auto;", ""], function (_ref) {
   var fullWidth = _ref.fullWidth;
-  return fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$3.type === 'border' && border$3.radius, border$3.type === 'border' && border$3.radius, border$3.type === 'border' && border$3.radius, border$3.type === 'border' && border$3.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$4.right, spacings$4.left, spacings$4.top, spacings$4.right, spacings$4.left, spacings$4.right, spacings$4.bottom, spacings$4.left);
+  return fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$4.type === 'border' && border$4.radius, border$4.type === 'border' && border$4.radius, border$4.type === 'border' && border$4.radius, border$4.type === 'border' && border$4.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$4.right, spacings$4.left, spacings$4.top, spacings$4.right, spacings$4.left, spacings$4.right, spacings$4.bottom, spacings$4.left);
 });
 var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
   var children = _ref2.children,
     _ref2$fullWidth = _ref2.fullWidth,
     fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$U);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$W);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref,
     fullWidth: fullWidth
@@ -3733,7 +3745,7 @@ var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
   }));
 });
-var _excluded$T = ["children"];
+var _excluded$V = ["children"];
 var spacings$3 = primary$4.spacings;
 var StyledCardHeader = styled__default["default"].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
@@ -3741,7 +3753,7 @@ var StyledCardHeader = styled__default["default"].div.withConfig({
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
 var CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$T);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$V);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -3750,14 +3762,14 @@ var CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader(_ref, ref) {
   }));
 });
-var _excluded$S = ["children"];
+var _excluded$U = ["children"];
 var StyledCardHeaderTitle = styled__default["default"].div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
 var CardHeaderTitle = /*#__PURE__*/react.forwardRef(function CardHeaderTitle(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$S);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$U);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -3804,7 +3816,7 @@ var topbar = {
   }
 };
-var _excluded$R = ["children", "elevation", "sticky"];
+var _excluded$T = ["children", "elevation", "sticky"];
 var StyledTopBar = styled__default["default"](Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
@@ -3819,7 +3831,7 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
     elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
     _ref2$sticky = _ref2.sticky,
     sticky = _ref2$sticky === void 0 ? true : _ref2$sticky,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$R);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$T);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -3842,14 +3854,14 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
 // TopBar.displayName = 'eds-topbar'
-var _excluded$Q = ["children"];
+var _excluded$S = ["children"];
 var StyledActions = styled__default["default"].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
 var Actions = /*#__PURE__*/react.forwardRef(function Actions(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$Q);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$S);
   return /*#__PURE__*/jsxRuntime.jsx(StyledActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3859,14 +3871,14 @@ var Actions = /*#__PURE__*/react.forwardRef(function Actions(_ref, ref) {
 // Actions.displayName = 'eds-topbar-actions'
-var _excluded$P = ["children"];
+var _excluded$R = ["children"];
 var StyledHeader = styled__default["default"].div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:12px;align-items:center;"]);
 var Header$2 = /*#__PURE__*/react.forwardRef(function Header(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$P);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$R);
   return /*#__PURE__*/jsxRuntime.jsx(StyledHeader, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3876,14 +3888,14 @@ var Header$2 = /*#__PURE__*/react.forwardRef(function Header(_ref, ref) {
 // Header.displayName = 'eds-topbar-header'
-var _excluded$O = ["children"];
+var _excluded$Q = ["children"];
 var StyledCustomContent = styled__default["default"].div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
 var CustomContent = /*#__PURE__*/react.forwardRef(function CustomContent(_ref, ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$O);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$Q);
   return /*#__PURE__*/jsxRuntime.jsx(StyledCustomContent, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -3906,7 +3918,7 @@ var scrim = {
   background: background$9
 };
-var _excluded$N = ["children", "onClose", "open", "isDismissable"];
+var _excluded$P = ["children", "onClose", "open", "isDismissable"];
 var background$8 = scrim.background;
 var StyledScrim = styled__default["default"](react$1.FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
@@ -3922,7 +3934,7 @@ var Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
     open = _ref.open,
     _ref$isDismissable = _ref.isDismissable,
     isDismissable = _ref$isDismissable === void 0 ? false : _ref$isDismissable,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$N);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$P);
   var scrimRef = react.useRef(null);
   var combinedScrimRef = react.useMemo(function () {
     return edsUtils.mergeRefs(scrimRef, ref);
@@ -3997,7 +4009,7 @@ var dialog = {
   }
 };
-var _excluded$M = ["children", "open", "onClose", "isDismissable"];
+var _excluded$O = ["children", "open", "onClose", "isDismissable"];
 var StyledDialog = styled__default["default"](Paper).attrs({
   tabIndex: 0,
   role: 'dialog',
@@ -4017,7 +4029,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
     onClose = _ref2.onClose,
     _ref2$isDismissable = _ref2.isDismissable,
     isDismissable = _ref2$isDismissable === void 0 ? false : _ref2$isDismissable,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$M);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$O);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -4061,7 +4073,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
 // Dialog.displayName = 'EdsDialog'
-var _excluded$L = ["children"];
+var _excluded$N = ["children"];
 var StyledDialogActions = styled__default["default"].div.withConfig({
   displayName: "DialogActions__StyledDialogActions",
   componentId: "sc-16ydtxd-0"
@@ -4072,7 +4084,7 @@ var StyledDialogActions = styled__default["default"].div.withConfig({
 });
 var DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions(_ref2, ref) {
   var children = _ref2.children,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$L);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$N);
   return /*#__PURE__*/jsxRuntime.jsx(StyledDialogActions, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref
   }, props), {}, {
@@ -4082,7 +4094,7 @@ var DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions(_ref2,
 // Actions.displayName = 'EdsDialogActions'
-var _excluded$K = ["children"];
+var _excluded$M = ["children"];
 var StyledDialogTitle = styled__default["default"].div.withConfig({
   displayName: "DialogTitle__StyledDialogTitle",
   componentId: "sc-1t3jljt-0"
@@ -4093,7 +4105,7 @@ var StyledDialogTitle = styled__default["default"].div.withConfig({
 });
 var DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$K);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$M);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledDialogTitle, _objectSpread__default["default"](_objectSpread__default["default"]({
       id: "eds-dialog-title",
@@ -4104,7 +4116,7 @@ var DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle(_ref2, ref)
   });
 });
-var _excluded$J = ["children", "scrollable"];
+var _excluded$L = ["children", "scrollable"];
 var StyledDialogContent = styled__default["default"].div.withConfig({
   displayName: "DialogContent__StyledDialogContent",
   componentId: "sc-1tze18k-0"
@@ -4121,7 +4133,7 @@ var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2,
   var children = _ref2.children,
     _ref2$scrollable = _ref2.scrollable,
     scrollable = _ref2$scrollable === void 0 ? false : _ref2$scrollable,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$J);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$L);
   var props = _objectSpread__default["default"]({
     scrollable: scrollable,
     ref: ref
@@ -4138,13 +4150,13 @@ var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2,
   });
 });
-var _excluded$I = ["children"];
+var _excluded$K = ["children"];
 var StyledDialogHeader = styled__default["default"].div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",
   componentId: "sc-mbwcos-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return styled.css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
+  return styled.css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
 });
 var StyledDivider$1 = styled__default["default"](Divider).withConfig({
   displayName: "DialogHeader__StyledDivider",
@@ -4152,7 +4164,7 @@ var StyledDivider$1 = styled__default["default"](Divider).withConfig({
 })(["margin-bottom:0;"]);
 var DialogHeader = /*#__PURE__*/react.forwardRef(function DialogHeader(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$I);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$K);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -4187,7 +4199,7 @@ var _tokens$colors$b = edsTokens.tokens.colors,
   borderRadius$4 = edsTokens.tokens.shape.corners.borderRadius,
   _tokens$spacings$comf$a = edsTokens.tokens.spacings.comfortable,
   small$4 = _tokens$spacings$comf$a.small,
-  x_large$1 = _tokens$spacings$comf$a.x_large,
+  x_large$3 = _tokens$spacings$comf$a.x_large,
   xxx_large$1 = _tokens$spacings$comf$a.xxx_large,
   typography$9 = edsTokens.tokens.typography;
 var tableOfContents = {
@@ -4196,7 +4208,7 @@ var tableOfContents = {
   }),
   spacings: {
     top: xxx_large$1,
-    bottom: x_large$1
+    bottom: x_large$3
   },
   entities: {
     icon: {
@@ -4222,8 +4234,8 @@ var tableOfContents = {
     },
     sticky: {
       spacings: {
-        top: x_large$1,
-        right: x_large$1
+        top: x_large$3,
+        right: x_large$3
       }
     }
   },
@@ -4257,7 +4269,7 @@ var tableOfContents = {
   }
 };
-var _excluded$H = ["children", "sticky", "label"];
+var _excluded$J = ["children", "sticky", "label"];
 var StyledTableOfContents = styled__default["default"].nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
@@ -4283,7 +4295,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
     sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
     _ref3$label = _ref3.label,
     label = _ref3$label === void 0 ? '' : _ref3$label,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$H);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$J);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -4306,7 +4318,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
   });
 });
-var _excluded$G = ["children"];
+var _excluded$I = ["children"];
 var StyledLinkItem = styled__default["default"].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
@@ -4316,7 +4328,7 @@ var StyledLinkItem = styled__default["default"].li.withConfig({
 });
 var LinkItem = /*#__PURE__*/react.forwardRef(function LinkItem(_ref2, ref) {
   var children = _ref2.children,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$G);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded$I);
   return /*#__PURE__*/jsxRuntime.jsx(StyledLinkItem, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: children
@@ -4359,10 +4371,10 @@ var variants = {
   xlarge: '640px'
 };
-var _excluded$F = ["variant", "width", "title", "children", "open", "onClose"];
+var _excluded$H = ["variant", "width", "title", "children", "open", "onClose"];
 var background$5 = comfortable$2.background,
   spacings$2 = comfortable$2.spacings,
-  border$2 = comfortable$2.border,
+  border$3 = comfortable$2.border,
   typography$8 = comfortable$2.typography;
 var StyledSideSheet = styled__default["default"].div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
@@ -4370,7 +4382,7 @@ var StyledSideSheet = styled__default["default"].div.withConfig({
 })(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$5, function (_ref) {
   var width = _ref.width;
   return width;
-}, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$8));
+}, edsUtils.bordersTemplate(border$3), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$8));
 var Header$1 = styled__default["default"].div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
@@ -4385,7 +4397,7 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
     _ref2$open = _ref2.open,
     open = _ref2$open === void 0 ? true : _ref2$open,
     onClose = _ref2.onClose,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$F);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$H);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref,
     width: width || variants[variant]
@@ -4397,7 +4409,7 @@ var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         variant: "h2",
         children: title
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+      }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: "ghost_icon",
         onClick: onClose,
         title: "Close",
@@ -4540,14 +4552,14 @@ var Icon = styled__default["default"](Icon$1).withConfig({
   return disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]);
 });
-var _excluded$E = ["children", "onDelete", "disabled", "onClick", "variant"];
+var _excluded$G = ["children", "onDelete", "disabled", "onClick", "variant"];
 var enabled$1 = enabled$3,
   error = error$2;
 var background$4 = enabled$1.background,
   height = enabled$1.height,
   typography$7 = enabled$1.typography,
   spacings$1 = enabled$1.spacings,
-  border$1 = enabled$1.border,
+  border$2 = enabled$1.border,
   states$2 = enabled$1.states;
 var StyledChips = styled__default["default"].div.attrs(function (_ref) {
   var clickable = _ref.clickable,
@@ -4559,7 +4571,7 @@ var StyledChips = styled__default["default"].div.attrs(function (_ref) {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$1), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), function (_ref2) {
   var clickable = _ref2.clickable;
   return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
 }, function (_ref3) {
@@ -4590,7 +4602,7 @@ var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
     onClick = _ref7.onClick,
     _ref7$variant = _ref7.variant,
     variant = _ref7$variant === void 0 ? 'default' : _ref7$variant,
-    other = _objectWithoutProperties__default["default"](_ref7, _excluded$E);
+    other = _objectWithoutProperties__default["default"](_ref7, _excluded$G);
   var handleDelete = disabled ? undefined : onDelete;
   var handleClick = disabled ? undefined : onClick;
   var deletable = handleDelete !== undefined;
@@ -4663,7 +4675,7 @@ var avatar = {
   }
 };
-var _excluded$D = ["src", "alt", "size", "disabled"];
+var _excluded$F = ["src", "alt", "size", "disabled"];
 var StyledAvatar = styled__default["default"].div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
@@ -4686,7 +4698,7 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
     size = _ref3$size === void 0 ? 24 : _ref3$size,
     _ref3$disabled = _ref3.disabled,
     disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$D);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$F);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread__default["default"](_objectSpread__default["default"]({
     size: size,
     disabled: disabled,
@@ -4701,12 +4713,12 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
 });
 Avatar.displayName = 'Avatar';
-var _excluded$C = ["onChange", "style", "className"];
+var _excluded$E = ["onChange", "style", "className"];
 var SearchInput = styled__default["default"](Input$4).withConfig({
   displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-0"
 })(["input{&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}}"]);
-var InsideButton = styled__default["default"](Button).withConfig({
+var InsideButton = styled__default["default"](Button$1).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-1"
 })(["height:24px;width:24px;"]);
@@ -4714,7 +4726,7 @@ var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
   var _onChange = _ref.onChange,
     style = _ref.style,
     className = _ref.className,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$C);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$E);
   var inputRef = react.useRef(null);
   var _useState = react.useState(Boolean(rest.defaultValue)),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -4900,23 +4912,22 @@ var _tokens$entities$2 = slider.entities,
 var StyledOutput = styled__default["default"].output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], function (_ref) {
-  var value = _ref.value;
-  return value;
-}, edsUtils.typographyTemplate(output.typography), slider.background, track$2.spacings.top);
-var Output = /*#__PURE__*/react.forwardRef(function Output(_ref2, ref) {
-  var children = _ref2.children,
-    value = _ref2.value,
-    htmlFor = _ref2.htmlFor;
+})(["--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], edsUtils.typographyTemplate(output.typography), slider.background, track$2.spacings.top);
+var Output = /*#__PURE__*/react.forwardRef(function Output(_ref, ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    htmlFor = _ref.htmlFor;
   return /*#__PURE__*/jsxRuntime.jsx(StyledOutput, {
     ref: ref,
-    value: value,
+    style: {
+      '--val': value
+    },
     htmlFor: htmlFor,
     children: children
   });
 });
-var _excluded$B = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
+var _excluded$D = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
 var handle$1 = slider.entities.handle,
   _disabled = slider.states.disabled;
 var track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
@@ -4942,7 +4953,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
     _onMouseUp = _ref.onMouseUp,
     _onKeyUp = _ref.onKeyUp,
     disabled = _ref.disabled,
-    restProps = _objectWithoutProperties__default["default"](_ref, _excluded$B);
+    restProps = _objectWithoutProperties__default["default"](_ref, _excluded$D);
   return /*#__PURE__*/jsxRuntime.jsx(StyledSliderInput, _objectSpread__default["default"](_objectSpread__default["default"]({}, restProps), {}, {
     value: value,
     ref: ref,
@@ -4964,7 +4975,7 @@ var SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput(_ref, ref)
 });
 SliderInput.displayName = 'SliderInput';
-var _excluded$A = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
+var _excluded$C = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
 var _tokens$entities$1 = slider.entities,
   track = _tokens$entities$1.track,
   handle = _tokens$entities$1.handle,
@@ -4975,41 +4986,44 @@ var fakeTrackBgHover = styled.css({
 });
 var trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 var wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
-var RangeWrapper = styled__default["default"].div.withConfig({
+var RangeWrapper = styled__default["default"].div.attrs(function (_ref) {
+  var $min = _ref.$min,
+    $max = _ref.$max,
+    valA = _ref.valA,
+    valB = _ref.valB,
+    disabled = _ref.disabled,
+    style = _ref.style;
+  return {
+    style: _objectSpread__default["default"]({
+      '--a': valA,
+      '--b': valB,
+      '--min': $min,
+      '--max': $max,
+      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+    }, style)
+  };
+}).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " 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));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], function (_ref) {
-  var valA = _ref.valA;
-  return valA;
-}, function (_ref2) {
-  var valB = _ref2.valB;
-  return valB;
-}, function (_ref3) {
-  var min = _ref3.min;
-  return min;
-}, function (_ref4) {
-  var max = _ref4.max;
-  return max;
-}, wrapperGrid, fakeTrackBg, trackFill, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
-}, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-var Wrapper = styled__default["default"].div.withConfig({
+})(["--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));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+var Wrapper = styled__default["default"].div.attrs(function (_ref2) {
+  var $min = _ref2.$min,
+    $max = _ref2.$max,
+    value = _ref2.value,
+    disabled = _ref2.disabled,
+    style = _ref2.style;
+  return {
+    style: _objectSpread__default["default"]({
+      '--min': $min,
+      '--max': $max,
+      '--value': value,
+      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+    }, style)
+  };
+}).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], function (_ref6) {
-  var min = _ref6.min;
-  return min;
-}, function (_ref7) {
-  var max = _ref7.max;
-  return max;
-}, function (_ref8) {
-  var value = _ref8.value;
-  return value;
-}, wrapperGrid, fakeTrackBg, trackFill, function (_ref9) {
-  var disabled = _ref9.disabled;
-  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
-}, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+})(["--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;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover, track.entities.indicator.states.hover.background);
 var WrapperGroupLabel = styled__default["default"].div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -5022,26 +5036,26 @@ var SrOnlyLabel = styled__default["default"].label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
-  var _ref10$min = _ref10.min,
-    min = _ref10$min === void 0 ? 0 : _ref10$min,
-    _ref10$max = _ref10.max,
-    max = _ref10$max === void 0 ? 100 : _ref10$max,
-    _ref10$value = _ref10.value,
-    value = _ref10$value === void 0 ? [40, 60] : _ref10$value,
-    outputFunction = _ref10.outputFunction,
-    onChange = _ref10.onChange,
-    onChangeCommitted = _ref10.onChangeCommitted,
-    _ref10$minMaxDots = _ref10.minMaxDots,
-    minMaxDots = _ref10$minMaxDots === void 0 ? true : _ref10$minMaxDots,
-    _ref10$minMaxValues = _ref10.minMaxValues,
-    minMaxValues = _ref10$minMaxValues === void 0 ? true : _ref10$minMaxValues,
-    _ref10$step = _ref10.step,
-    step = _ref10$step === void 0 ? 1 : _ref10$step,
-    disabled = _ref10.disabled,
-    ariaLabelledby = _ref10.ariaLabelledby,
-    ariaLabelledbyNative = _ref10['aria-labelledby'],
-    rest = _objectWithoutProperties__default["default"](_ref10, _excluded$A);
+var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
+  var _ref3$min = _ref3.min,
+    min = _ref3$min === void 0 ? 0 : _ref3$min,
+    _ref3$max = _ref3.max,
+    max = _ref3$max === void 0 ? 100 : _ref3$max,
+    _ref3$value = _ref3.value,
+    value = _ref3$value === void 0 ? [40, 60] : _ref3$value,
+    outputFunction = _ref3.outputFunction,
+    onChange = _ref3.onChange,
+    onChangeCommitted = _ref3.onChangeCommitted,
+    _ref3$minMaxDots = _ref3.minMaxDots,
+    minMaxDots = _ref3$minMaxDots === void 0 ? true : _ref3$minMaxDots,
+    _ref3$minMaxValues = _ref3.minMaxValues,
+    minMaxValues = _ref3$minMaxValues === void 0 ? true : _ref3$minMaxValues,
+    _ref3$step = _ref3.step,
+    step = _ref3$step === void 0 ? 1 : _ref3$step,
+    disabled = _ref3.disabled,
+    ariaLabelledby = _ref3.ariaLabelledby,
+    ariaLabelledbyNative = _ref3['aria-labelledby'],
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$C);
   var isRangeSlider = Array.isArray(value);
   var parsedValue = isRangeSlider ? value : [value];
   var _useState = react.useState(parsedValue),
@@ -5052,6 +5066,10 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     sliderValue = _useState4[0],
     setSliderValue = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    mousePressed = _useState6[0],
+    setMousePressed = _useState6[1];
   react.useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
@@ -5072,6 +5090,18 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     if (isRangeSlider) {
       var _newValue = sliderValue.slice();
       _newValue[valueArrIdx] = changedValue;
+      //Prevent min/max values from crossing eachother
+      if (valueArrIdx === 0 && _newValue[0] >= _newValue[1]) {
+        var _maxRange$current;
+        _newValue[0] = _newValue[1];
+        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 ? void 0 : _maxRange$current.focus();
+      }
+      if (valueArrIdx === 1 && _newValue[1] <= _newValue[0]) {
+        var _minRange$current;
+        _newValue[1] = _newValue[0];
+        (_minRange$current = minRange.current) === null || _minRange$current === void 0 ? void 0 : _minRange$current.focus();
+      }
       setSliderValue(_newValue);
       if (onChange) {
         // Callback for provided onChange func
@@ -5100,18 +5130,18 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   };
   var findClosestRange = function findClosestRange(event) {
     var target = event.target;
-    if (target.type === 'output') {
+    if (target.type === 'output' || mousePressed) {
       return;
     }
     var bounds = target.getBoundingClientRect();
     var x = event.clientX - bounds.left;
     var inputWidth = minRange.current.offsetWidth;
-    var minValue = minRange.current.value;
-    var maxValue = maxRange.current.value;
+    var minValue = parseFloat(minRange.current.value);
+    var maxValue = parseFloat(maxRange.current.value);
     var diff = max - min;
     var normX = x / inputWidth * diff + min;
-    var maxX = Math.abs(normX - parseFloat(maxValue));
-    var minX = Math.abs(normX - parseFloat(minValue));
+    var maxX = Math.abs(normX - maxValue);
+    var minX = Math.abs(normX - minValue);
     if (minX > maxX) {
       minRange.current.style.zIndex = '10';
       maxRange.current.style.zIndex = '20';
@@ -5119,6 +5149,22 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       minRange.current.style.zIndex = '20';
       maxRange.current.style.zIndex = '10';
     }
+    //special cases where both thumbs are all the way to the left or right
+    if (minValue === maxValue && minValue === min) {
+      minRange.current.style.zIndex = '10';
+      maxRange.current.style.zIndex = '20';
+    }
+    if (minValue === maxValue && maxValue === max) {
+      minRange.current.style.zIndex = '20';
+      maxRange.current.style.zIndex = '10';
+    }
+  };
+  var handleDragging = function handleDragging(e) {
+    if (e.type === 'mousedown') {
+      setMousePressed(true);
+    } else {
+      setMousePressed(false);
+    }
   };
   var inputIdA = edsUtils.useId(null, 'inputA');
   var inputIdB = edsUtils.useId(null, 'inputB');
@@ -5141,10 +5187,12 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       "aria-labelledby": getAriaLabelledby(),
       valA: sliderValue[0],
       valB: sliderValue[1],
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       disabled: disabled,
       onMouseMove: findClosestRange,
+      onMouseDown: handleDragging,
+      onMouseUp: handleDragging,
       children: [minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -5210,8 +5258,8 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       })]
     })) : /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
       ref: ref,
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       value: sliderValue[0],
       disabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(SliderInput, {
@@ -5251,7 +5299,7 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   });
 });
-var _excluded$z = ["children"];
+var _excluded$B = ["children"];
 var StyledSnackbarAction = styled__default["default"].div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
   componentId: "sc-1v5mjvd-0"
@@ -5261,7 +5309,7 @@ var StyledSnackbarAction = styled__default["default"].div.withConfig({
 });
 var SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$z);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$B);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -5316,7 +5364,7 @@ var snackbar = {
   }
 };
-var _excluded$y = ["open", "autoHideDuration", "onClose", "placement", "children"];
+var _excluded$A = ["open", "autoHideDuration", "onClose", "placement", "children"];
 var StyledSnackbar = styled__default["default"](Paper).withConfig({
   displayName: "Snackbar__StyledSnackbar",
   componentId: "sc-ac6no8-0"
@@ -5340,7 +5388,7 @@ var Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar(_ref2, ref) {
     _ref2$placement = _ref2.placement,
     placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
     children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$y);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$A);
   var _useState = react.useState(open),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     visible = _useState2[0],
@@ -5440,7 +5488,7 @@ var popover = {
   }
 };
-var _excluded$x = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
+var _excluded$z = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
 var PopoverPaper = styled__default["default"](Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
@@ -5480,7 +5528,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
     onClose = _ref5.onClose,
     withinPortal = _ref5.withinPortal,
     trapFocus = _ref5.trapFocus,
-    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$x);
+    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$z);
   var arrowRef = react.useRef(null);
   var _useFloating = react$1.useFloating({
       placement: placement,
@@ -5597,7 +5645,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   });
 });
-var _excluded$w = ["children"];
+var _excluded$y = ["children"];
 var StyledPopoverTitle = styled__default["default"].div.withConfig({
   displayName: "PopoverTitle__StyledPopoverTitle",
   componentId: "sc-1ben8su-0"
@@ -5607,7 +5655,7 @@ var StyledPopoverTitle = styled__default["default"].div.withConfig({
 });
 var PopoverTitle = /*#__PURE__*/react.forwardRef(function PopoverTitle(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$w);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$y);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -5616,7 +5664,7 @@ var PopoverTitle = /*#__PURE__*/react.forwardRef(function PopoverTitle(_ref2, re
   }));
 });
-var _excluded$v = ["children"];
+var _excluded$x = ["children"];
 var ContentWrapper = styled__default["default"].div.withConfig({
   displayName: "PopoverContent__ContentWrapper",
   componentId: "sc-vwww9h-0"
@@ -5626,7 +5674,7 @@ var ContentWrapper = styled__default["default"].div.withConfig({
 });
 var PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$v);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$x);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -5637,7 +5685,7 @@ var PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent(_ref2
 // PopoverContent.displayName = 'eds-popover-content'
-var _excluded$u = ["children"];
+var _excluded$w = ["children"];
 var StyledPopoverHeader = styled__default["default"].div.withConfig({
   displayName: "PopoverHeader__StyledPopoverHeader",
   componentId: "sc-ibcx7p-0"
@@ -5651,7 +5699,7 @@ var StyledDivider = styled__default["default"](Divider).withConfig({
 })(["margin-bottom:0;"]);
 var PopoverHeader = /*#__PURE__*/react.forwardRef(function PopoverHeader(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$u);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$w);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -5664,7 +5712,7 @@ var PopoverHeader = /*#__PURE__*/react.forwardRef(function PopoverHeader(_ref2,
   }));
 });
-var _excluded$t = ["children"];
+var _excluded$v = ["children"];
 var StyledPopoverActions = styled__default["default"].div.withConfig({
   displayName: "PopoverActions__StyledPopoverActions",
   componentId: "sc-1dkrhw6-0"
@@ -5674,7 +5722,7 @@ var StyledPopoverActions = styled__default["default"].div.withConfig({
 });
 var PopoverActions = /*#__PURE__*/react.forwardRef(function PopoverActions(_ref2, ref) {
   var children = _ref2.children,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$t);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$v);
   var props = _objectSpread__default["default"]({
     ref: ref
   }, rest);
@@ -5703,8 +5751,8 @@ var messageTypography = edsTokens.tokens.typography.paragraph.body_long,
   warningColor = _tokens$colors$infogr$2.primary__energy_red_100.rgba,
   backgroundColor = _tokens$colors$6.ui.background__default.rgba,
   _tokens$shape$circle = edsTokens.tokens.shape.circle,
-  minHeight = _tokens$shape$circle.minHeight,
-  minWidth = _tokens$shape$circle.minWidth,
+  minHeight$2 = _tokens$shape$circle.minHeight,
+  minWidth$2 = _tokens$shape$circle.minWidth,
   borderRadius$1 = _tokens$shape$circle.borderRadius;
 var enabled = {
   typography: _objectSpread__default["default"]({}, messageTypography),
@@ -5717,8 +5765,8 @@ var enabled = {
   },
   entities: {
     icon: {
-      height: minHeight,
-      width: minWidth,
+      height: minHeight$2,
+      width: minWidth$2,
       border: {
         type: 'border',
         radius: borderRadius$1
@@ -5756,7 +5804,7 @@ var warning$1 = {
   }
 };
-var _excluded$s = ["children", "variant"];
+var _excluded$u = ["children", "variant"];
 var info = info$1,
   warning = warning$1;
 var StyledBannerIcon = styled__default["default"].span.withConfig({
@@ -5771,7 +5819,7 @@ var BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref) {
   var children = _ref2.children,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'info' : _ref2$variant,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$s);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$u);
   var childrenWithColor = react.Children.map(children, function (child) {
     var color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
     return /*#__PURE__*/react.isValidElement(child) && child.type === Icon$1 && /*#__PURE__*/react.cloneElement(child, {
@@ -5788,7 +5836,7 @@ var BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref) {
   }));
 });
-var _excluded$r = ["children", "className", "elevation"];
+var _excluded$t = ["children", "className", "elevation"];
 var Content$1 = styled__default["default"].div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-0"
@@ -5806,7 +5854,7 @@ var Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
     className = _ref2.className,
     _ref2$elevation = _ref2.elevation,
     elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$r);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$t);
   var childrenWhereBannerIcon = react.Children.map(children, function (child) {
     return /*#__PURE__*/react.isValidElement(child) && child.type === BannerIcon;
   });
@@ -5837,14 +5885,14 @@ var Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   });
 });
-var _excluded$q = ["children"];
+var _excluded$s = ["children"];
 var StyledBannerMessage = styled__default["default"](Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
 var BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$q);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$s);
   var props = _objectSpread__default["default"]({
     ref: ref
   }, rest);
@@ -5855,7 +5903,7 @@ var BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage(_ref, r
   }));
 });
-var _excluded$p = ["children", "placement"];
+var _excluded$r = ["children", "placement"];
 var StyledBannerActions = styled__default["default"].div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
@@ -5871,7 +5919,7 @@ var BannerActions = /*#__PURE__*/react.forwardRef(function BannerActions(_ref2,
   var children = _ref2.children,
     _ref2$placement = _ref2.placement,
     placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$p);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$r);
   var props = _objectSpread__default["default"]({
     ref: ref
   }, rest);
@@ -5902,7 +5950,7 @@ var primary$2 = {
   }
 };
-var _excluded$o = ["variant", "value"];
+var _excluded$q = ["variant", "value"];
 var indeterminate$2 = styled.keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
 var Track$2 = styled__default["default"].div.withConfig({
   displayName: "LinearProgress__Track",
@@ -5925,7 +5973,7 @@ var LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_ref,
     variant = _ref$variant === void 0 ? 'indeterminate' : _ref$variant,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? null : _ref$value,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$o);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$q);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -6002,7 +6050,7 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
   neutral: neutral$1
 });
-var _excluded$n = ["variant", "value", "size", "color"];
+var _excluded$p = ["variant", "value", "size", "color"];
 var indeterminate$1 = styled.keyframes(["100%{transform:rotate(360deg);}"]);
 var Svg$4 = styled__default["default"].svg.withConfig({
   displayName: "CircularProgress__Svg",
@@ -6045,7 +6093,7 @@ var CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress(_
     size = _ref2$size === void 0 ? 48 : _ref2$size,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'primary' : _ref2$color,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$n);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$p);
   var thickness = 4;
   var progress = Math.round(value);
   var trackStyle = {};
@@ -6121,7 +6169,7 @@ var token = {
   background: logoFillPositive
 };
-var _excluded$m = ["variant", "value", "size"];
+var _excluded$o = ["variant", "value", "size"];
 var indeterminate = styled.keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
 var determinate = styled.keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
 var Svg$3 = styled__default["default"].svg.withConfig({
@@ -6139,7 +6187,7 @@ var StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress(_ref2, re
     value = _ref2$value === void 0 ? null : _ref2$value,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 48 : _ref2$size,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$m);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$o);
   var progress = Math.round(value);
   var height = size * 1.2;
   var width = size;
@@ -6201,7 +6249,7 @@ var tokens = /*#__PURE__*/Object.freeze({
   tertiary: tertiary
 });
-var _excluded$l = ["color", "size"];
+var _excluded$n = ["color", "size"];
 var opacity = styled.keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
 var Svg$2 = styled__default["default"].svg.withConfig({
   displayName: "DotProgress__Svg",
@@ -6221,7 +6269,7 @@ var DotProgress = /*#__PURE__*/react.forwardRef(function DotProgress(_ref2, ref)
     color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 32 : _ref2$size,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$l);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$n);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     color: getColor(color),
     ref: ref
@@ -6278,18 +6326,21 @@ var breadcrumbs = {
   }
 };
-var _excluded$k = ["children", "collapse"];
+var _excluded$m = ["children", "collapse", "wrap"];
 var spacings = breadcrumbs.spacings,
   typography$5 = breadcrumbs.typography,
   states$1 = breadcrumbs.states;
 var OrderedList$1 = styled__default["default"].ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
-})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
+})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;flex-wrap:", ";"], function (_ref) {
+  var $wrap = _ref.$wrap;
+  return $wrap ? 'wrap' : 'nowrap';
+});
 var ListItem$1 = styled__default["default"].li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
-})(["display:inline-block;"]);
+})(["display:inline-block;min-width:30px;"]);
 var Separator = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
@@ -6298,10 +6349,12 @@ var 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);
-var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref) {
-  var children = _ref.children,
-    collapse = _ref.collapse,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$k);
+var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref2, ref) {
+  var children = _ref2.children,
+    collapse = _ref2.collapse,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$m);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -6312,8 +6365,8 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
   var collapsedCrumbs = function collapsedCrumbs(allCrumbs) {
     var handleExpandClick = function handleExpandClick(e) {
       setExpanded(true);
-      var _ref2 = e,
-        key = _ref2.key;
+      var _ref3 = e,
+        key = _ref3.key;
       if (key === 'Enter') {
         setExpanded(true);
       }
@@ -6323,6 +6376,9 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
     }
     return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
+        style: {
+          minWidth: 'unset'
+        },
         children: /*#__PURE__*/jsxRuntime.jsx(Collapsed, {
           link: true,
           role: "button",
@@ -6361,6 +6417,7 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
   return /*#__PURE__*/jsxRuntime.jsx("nav", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
+      $wrap: wrap,
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
   }));
@@ -6368,13 +6425,13 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
 // Breadcrumbs.displayName = 'eds-breadcrumbs'
-var _excluded$j = ["children", "maxWidth", "href", "as"];
+var _excluded$l = ["children", "maxWidth", "forceTooltip", "href", "as"];
 var states = breadcrumbs.states,
   typography$4 = breadcrumbs.typography;
 var 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:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$4.color, function (_ref) {
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography$4.color, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return styled.css({
     maxWidth: $maxWidth
@@ -6383,14 +6440,15 @@ var StyledTypography = styled__default["default"](Typography).withConfig({
 var Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
   var children = _ref2.children,
     maxWidth = _ref2.maxWidth,
+    forceTooltip = _ref2.forceTooltip,
     href = _ref2.href,
     as = _ref2.as,
-    other = _objectWithoutProperties__default["default"](_ref2, _excluded$j);
+    other = _objectWithoutProperties__default["default"](_ref2, _excluded$l);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
     href: href,
     ref: ref
   });
-  var showTooltip = maxWidth > 0;
+  var showTooltip = maxWidth > 0 || forceTooltip;
   var isHrefDefined = href !== undefined;
   var forwardedAs = react.useMemo(function () {
     return as ? as : isHrefDefined ? 'a' : 'span';
@@ -6403,7 +6461,7 @@ var Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
   }, props), {}, {
     children: children
   }));
-  return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+  return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
     title: children,
     placement: "top",
     children: crumb
@@ -6570,25 +6628,25 @@ var menu = {
   }
 };
-var _excluded$i = ["children", "disabled", "index", "onClick", "closeMenuOnClick"];
+var _excluded$k = ["children", "disabled", "index", "as", "onClick", "closeMenuOnClick"];
 var typography$2 = menu.typography,
   _tokens$entities = menu.entities,
   _tokens$entities$item = _tokens$entities.item.states,
   activeToken = _tokens$entities$item.active,
-  focus = _tokens$entities$item.focus,
+  focus$2 = _tokens$entities$item.focus,
   hover = _tokens$entities$item.hover,
   disabledToken = _tokens$entities$item.disabled,
   icon = _tokens$entities.icon;
 var Item = styled__default["default"].button.attrs(function (_ref) {
-  var isFocused = _ref.isFocused;
+  var $isFocused = _ref.$isFocused;
   return {
     role: 'menuitem',
-    tabIndex: isFocused ? -1 : 0
+    tabIndex: $isFocused ? -1 : 0
   };
 }).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], edsUtils.typographyTemplate(typography$2), function (_ref2) {
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;text-decoration:none;", " ", " ", " ", ""], edsUtils.typographyTemplate(typography$2), function (_ref2) {
   var theme = _ref2.theme;
   return edsUtils.spacingsTemplate(theme.entities.item.spacings);
 }, function (_ref3) {
@@ -6596,21 +6654,23 @@ var Item = styled__default["default"].button.attrs(function (_ref) {
   return active && styled.css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, edsUtils.outlineTemplate(focus.outline));
+  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, edsUtils.outlineTemplate(focus$2.outline));
 });
 var Content = styled__default["default"].div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-var MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
+var MenuItem$1 = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
   var children = _ref5.children,
     disabled = _ref5.disabled,
     _ref5$index = _ref5.index,
     index = _ref5$index === void 0 ? 0 : _ref5$index,
+    _ref5$as = _ref5.as,
+    as = _ref5$as === void 0 ? 'button' : _ref5$as,
     _onClick = _ref5.onClick,
     _ref5$closeMenuOnClic = _ref5.closeMenuOnClick,
     closeMenuOnClick = _ref5$closeMenuOnClic === void 0 ? true : _ref5$closeMenuOnClic,
-    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$i);
+    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$k);
   var _useMenu = useMenu(),
     focusedIndex = _useMenu.focusedIndex,
     setFocusedIndex = _useMenu.setFocusedIndex,
@@ -6622,8 +6682,9 @@ var MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
   };
   var isFocused = index === focusedIndex;
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
+    as: as,
     disabled: disabled,
-    isFocused: isFocused
+    $isFocused: isFocused
   });
   return /*#__PURE__*/jsxRuntime.jsx(Item, _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: edsUtils.mergeRefs(ref, function (el) {
@@ -6649,7 +6710,7 @@ var MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
     })
   }));
 });
-MenuItem.displayName = 'MenuItem';
+MenuItem$1.displayName = 'MenuItem';
 var Header = styled__default["default"].div.attrs(function () {
   return {
@@ -6680,23 +6741,23 @@ var MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
 // MenuSection.displayName = 'EdsMenuSection'
-var _excluded$h = ["addCloseMenuOnClickIndex", "children"];
+var _excluded$j = ["addCloseMenuOnClickIndex", "children"];
 var List = styled__default["default"].div.withConfig({
   displayName: "MenuList__List",
   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) 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 && item.props.closeMenuOnClick !== false) return true;
+  if ( /*#__PURE__*/react.isValidElement(item) && item.type === MenuItem$1 && item.props.closeMenuOnClick !== false) return true;
   return false;
 }
 var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
   var addCloseMenuOnClickIndex = _ref.addCloseMenuOnClickIndex,
     children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$h);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$j);
   var _useMenu = useMenu(),
     focusedIndex = _useMenu.focusedIndex,
     setFocusedIndex = _useMenu.setFocusedIndex,
@@ -6774,13 +6835,13 @@ var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
 // MenuList.displayName = 'EdsMenuList'
-var _excluded$g = ["children", "anchorEl", "onClose", "open"],
-  _excluded2$1 = ["anchorEl", "open", "placement", "onClose", "style", "className"];
-var border = menu.border;
+var _excluded$i = ["children", "anchorEl", "onClose", "open"],
+  _excluded2$1 = ["anchorEl", "open", "placement", "matchAnchorWidth", "onClose", "style", "className"];
+var border$1 = menu.border;
 var 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), function (_ref) {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], edsUtils.bordersTemplate(border$1), function (_ref) {
   var open = _ref.open;
   return styled.css({
     display: open ? 'block' : 'none'
@@ -6791,7 +6852,7 @@ var MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2,
     anchorEl = _ref2.anchorEl,
     onCloseCallback = _ref2.onClose,
     open = _ref2.open,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$g);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$i);
   var _useMenu = useMenu(),
     setOnClose = _useMenu.setOnClose,
     onClose = _useMenu.onClose,
@@ -6864,6 +6925,8 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
     open = _ref3.open,
     _ref3$placement = _ref3.placement,
     placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
+    _ref3$matchAnchorWidt = _ref3.matchAnchorWidth,
+    matchAnchorWidth = _ref3$matchAnchorWidt === void 0 ? false : _ref3$matchAnchorWidt,
     onClose = _ref3.onClose,
     style = _ref3.style,
     className = _ref3.className,
@@ -6873,13 +6936,25 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
   var token = edsUtils.useToken({
     density: density
   }, menu);
+  var floatingMiddleware = [react$1.offset(4), react$1.flip(), react$1.shift({
+    padding: 8
+  })];
+  if (matchAnchorWidth) {
+    floatingMiddleware = [].concat(_toConsumableArray__default["default"](floatingMiddleware), [react$1.size({
+      apply: function apply(_ref4) {
+        var rects = _ref4.rects,
+          elements = _ref4.elements;
+        Object.assign(elements.floating.style, {
+          width: "".concat(rects.reference.width, "px")
+        });
+      }
+    })]);
+  }
   var _useFloating = react$1.useFloating({
       placement: placement,
       open: open,
       onOpenChange: onClose,
-      middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
-        padding: 8
-      })]
+      middleware: floatingMiddleware
     }),
     x = _useFloating.x,
     y = _useFloating.y,
@@ -6940,7 +7015,7 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
 });
 var Menu = Menu$1;
-Menu.Item = MenuItem;
+Menu.Item = MenuItem$1;
 Menu.Section = MenuSection;
 Menu.Item.displayName = 'Menu.Item';
 Menu.Section.displayName = 'Menu.Section';
@@ -6969,19 +7044,19 @@ var pagination = {
   }
 };
-var _excluded$f = ["page", "selected", "onClick"];
+var _excluded$h = ["page", "selected", "onClick"];
 var PaginationItem = /*#__PURE__*/react.forwardRef(function PaginationItem(_ref, ref) {
   var page = _ref.page,
     selected = _ref.selected,
     onClick = _ref.onClick,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$f);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$h);
   var props = _objectSpread__default["default"]({
     ref: ref,
     page: page,
     selected: selected
   }, rest);
   var background = selected ? pagination.entities.item.states.active.background : null;
-  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread__default["default"](_objectSpread__default["default"]({
+  return /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread__default["default"](_objectSpread__default["default"]({
     style: {
       background: background
     },
@@ -7031,7 +7106,7 @@ function PaginationControl(pages, activePage) {
   return range(1, pages);
 }
-var _excluded$e = ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"];
+var _excluded$g = ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"];
 var icons = {
   chevron_left: edsIcons.chevron_left,
   chevron_right: edsIcons.chevron_right,
@@ -7061,7 +7136,7 @@ var 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;"]);
-var Text = styled__default["default"](Typography).withConfig({
+var Text$1 = styled__default["default"](Typography).withConfig({
   displayName: "Pagination__Text",
   componentId: "sc-13cpp3o-5"
 })(["white-space:nowrap;"]);
@@ -7076,7 +7151,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
     _ref2$itemsPerPage = _ref2.itemsPerPage,
     itemsPerPage = _ref2$itemsPerPage === void 0 ? 10 : _ref2$itemsPerPage,
     onChange = _ref2.onChange,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$e);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$g);
   var pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
   var columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >
@@ -7117,7 +7192,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
         gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
           variant: "ghost_icon",
           onClick: activePage > 1 ? function (event) {
             onPageChange(event, activePage - 1);
@@ -7151,7 +7226,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
           })
         }, "ellipsis-".concat(index));
       }) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
           variant: "ghost_icon",
           onClick: activePage < pages ? function (event) {
             onPageChange(event, activePage + 1);
@@ -7166,7 +7241,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
     })
   }));
   return withItemIndicator ? /*#__PURE__*/jsxRuntime.jsxs(FlexContainer, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Text, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Text$1, {
       children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
     }), pagination]
   }) : pagination;
@@ -7230,8 +7305,8 @@ var nativeselect = {
   }
 };
-var _excluded$d = ["label", "children", "className", "style", "selectRef", "id", "meta", "disabled", "multiple"];
-var Container$2 = styled__default["default"].div.withConfig({
+var _excluded$f = ["label", "children", "className", "style", "selectRef", "id", "meta", "disabled", "multiple"];
+var Container$3 = styled__default["default"].div.withConfig({
   displayName: "NativeSelect__Container",
   componentId: "sc-1c1ogya-0"
 })(["min-width:100px;width:100%;"]);
@@ -7254,7 +7329,7 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     _ref2$multiple = _ref2.multiple,
     multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
-    other = _objectWithoutProperties__default["default"](_ref2, _excluded$d);
+    other = _objectWithoutProperties__default["default"](_ref2, _excluded$f);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -7274,12 +7349,13 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
   var labelProps = {
     htmlFor: id,
     label: label,
-    meta: meta
+    meta: meta,
+    disabled: disabled
   };
   var showLabel = label || meta;
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
       children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$3, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread__default["default"](_objectSpread__default["default"]({}, selectProps), {}, {
         children: children
       }))]
@@ -7296,6 +7372,8 @@ var _tokens$colors$intera$3 = edsTokens.tokens.colors.interactive,
   _tokens$spacings$comf$3 = edsTokens.tokens.spacings.comfortable,
   medium_small$2 = _tokens$spacings$comf$3.medium_small,
   x_small$1 = _tokens$spacings$comf$3.x_small,
+  x_large$2 = _tokens$spacings$comf$3.x_large,
+  xx_large$1 = _tokens$spacings$comf$3.xx_large,
   _tokens$clickbounds$1 = edsTokens.tokens.clickbounds,
   clicboundSize$1 = _tokens$clickbounds$1.default__base,
   compactClickboundSize$1 = _tokens$clickbounds$1.compact__standard,
@@ -7303,6 +7381,7 @@ var _tokens$colors$intera$3 = edsTokens.tokens.colors.interactive,
 var checkbox = {
   background: primaryColor$1,
   typography: labelTypography$2,
+  width: xx_large$1,
   spacings: {
     bottom: medium_small$2,
     top: medium_small$2,
@@ -7331,6 +7410,7 @@ var checkbox = {
   },
   modes: {
     compact: {
+      width: x_large$2,
       spacings: {
         bottom: x_small$1,
         top: x_small$1,
@@ -7355,7 +7435,7 @@ var checkbox = {
   }
 };
-var _excluded$c = ["disabled", "indeterminate", "style", "className"];
+var _excluded$e = ["disabled", "indeterminate", "style", "className"];
 var StyledPath$1 = styled__default["default"].path.attrs(function (_ref) {
   var icon = _ref.icon;
   return {
@@ -7408,20 +7488,23 @@ var Svg$1 = styled__default["default"].svg.attrs(function (_ref7) {
 var InputWrapper$1 = styled__default["default"].span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref8) {
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;", " &::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref8) {
   var theme = _ref8.theme;
   return edsUtils.spacingsTemplate(theme.spacings);
 }, function (_ref9) {
-  var disabled = _ref9.disabled;
+  var theme = _ref9.theme;
+  return theme.width;
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'transparent' : checkbox.states.hover.background;
 });
-var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref10, ref) {
-  var _ref10$disabled = _ref10.disabled,
-    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
-    indeterminate = _ref10.indeterminate,
-    style = _ref10.style,
-    className = _ref10.className,
-    rest = _objectWithoutProperties__default["default"](_ref10, _excluded$c);
+var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref11, ref) {
+  var _ref11$disabled = _ref11.disabled,
+    disabled = _ref11$disabled === void 0 ? false : _ref11$disabled,
+    indeterminate = _ref11.indeterminate,
+    style = _ref11.style,
+    className = _ref11.className,
+    rest = _objectWithoutProperties__default["default"](_ref11, _excluded$e);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -7471,7 +7554,7 @@ var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref10,
   });
 });
-var _excluded$b = ["label", "disabled", "indeterminate", "className", "style"];
+var _excluded$d = ["label", "disabled", "indeterminate", "className", "style"];
 var StyledLabel$2 = styled__default["default"].label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
@@ -7490,7 +7573,7 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox(_ref2, ref) {
     indeterminate = _ref2.indeterminate,
     className = _ref2.className,
     style = _ref2.style,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$b);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$d);
   return label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$2, {
     disabled: disabled,
     className: className,
@@ -7521,6 +7604,8 @@ var _tokens$colors$intera$2 = edsTokens.tokens.colors.interactive,
   _tokens$spacings$comf$2 = edsTokens.tokens.spacings.comfortable,
   medium_small$1 = _tokens$spacings$comf$2.medium_small,
   x_small = _tokens$spacings$comf$2.x_small,
+  x_large$1 = _tokens$spacings$comf$2.x_large,
+  xx_large = _tokens$spacings$comf$2.xx_large,
   _tokens$clickbounds = edsTokens.tokens.clickbounds,
   clicboundSize = _tokens$clickbounds.default__base,
   compactClickboundSize = _tokens$clickbounds.compact__standard,
@@ -7528,6 +7613,7 @@ var _tokens$colors$intera$2 = edsTokens.tokens.colors.interactive,
 var comfortable$1 = {
   background: primaryColor,
   typography: labelTypography$1,
+  width: xx_large,
   spacings: {
     bottom: medium_small$1,
     top: medium_small$1,
@@ -7556,6 +7642,7 @@ var comfortable$1 = {
   },
   modes: {
     compact: {
+      width: x_large$1,
       spacings: {
         bottom: x_small,
         top: x_small,
@@ -7580,7 +7667,7 @@ var comfortable$1 = {
   }
 };
-var _excluded$a = ["label", "disabled", "className", "style"];
+var _excluded$c = ["label", "disabled", "className", "style"];
 var Input$2 = styled__default["default"].input.attrs(function (_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'radio' : _ref$type;
@@ -7644,23 +7731,26 @@ var LabelText = styled__default["default"].span.withConfig({
 var InputWrapper = styled__default["default"].span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref9) {
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;cursor:", ";&::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref9) {
   var theme = _ref9.theme;
   return edsUtils.spacingsTemplate(theme.spacings);
 }, function (_ref10) {
   var disabled = _ref10.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 }, function (_ref11) {
-  var disabled = _ref11.disabled;
+  var theme = _ref11.theme;
+  return theme.width;
+}, function (_ref12) {
+  var disabled = _ref12.disabled;
   return disabled ? 'transparent' : comfortable$1.states.hover.background;
 });
-var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
-  var label = _ref12.label,
-    _ref12$disabled = _ref12.disabled,
-    disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
-    className = _ref12.className,
-    style = _ref12.style,
-    rest = _objectWithoutProperties__default["default"](_ref12, _excluded$a);
+var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref13, ref) {
+  var label = _ref13.label,
+    _ref13$disabled = _ref13.disabled,
+    disabled = _ref13$disabled === void 0 ? false : _ref13$disabled,
+    className = _ref13.className,
+    style = _ref13.style,
+    rest = _objectWithoutProperties__default["default"](_ref13, _excluded$c);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -7718,12 +7808,10 @@ var BaseInputWrapper = styled__default["default"].span.withConfig({
   displayName: "Switchstyles__BaseInputWrapper",
   componentId: "sc-x39lde-0"
 })(function (_ref) {
-  var _clickbound$offset, _clickbound$offset2;
   var _ref$theme = _ref.theme,
-    clickbound = _ref$theme.clickbound,
     width = _ref$theme.width,
     height = _ref$theme.height;
-  return styled.css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;pointer-events:none;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
+  return styled.css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;"], width, height);
 });
 var BaseInput = styled__default["default"].input.attrs(function (_ref2) {
   var _ref2$type = _ref2.type,
@@ -7737,14 +7825,14 @@ var BaseInput = styled__default["default"].input.attrs(function (_ref2) {
 })(function (_ref3) {
   var disabled = _ref3.disabled,
     theme = _ref3.theme;
-  return styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', edsUtils.outlineTemplate(theme.states.focus.outline), edsUtils.outlineTemplate(theme.states.focus.outline));
+  return styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;position:relative;z-index:1;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', edsUtils.outlineTemplate(theme.states.focus.outline), edsUtils.outlineTemplate(theme.states.focus.outline));
 });
 var GridWrapper = styled__default["default"].span.withConfig({
   displayName: "Switchstyles__GridWrapper",
   componentId: "sc-x39lde-2"
-})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;"]);
+})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;"]);
-var _excluded$9 = ["disabled", "className", "style"];
+var _excluded$b = ["disabled", "className", "style"];
 var Input$1 = styled__default["default"](BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
@@ -7778,7 +7866,7 @@ var SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall(_ref4, ref)
   var disabled = _ref4.disabled,
     className = _ref4.className,
     style = _ref4.style,
-    rest = _objectWithoutProperties__default["default"](_ref4, _excluded$9);
+    rest = _objectWithoutProperties__default["default"](_ref4, _excluded$b);
   return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
     className: className,
     style: style,
@@ -7794,14 +7882,14 @@ var SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall(_ref4, ref)
 });
 SwitchSmall.displayName = 'SwitchSmall';
-var _excluded$8 = ["disabled", "className", "style"];
+var _excluded$a = ["disabled", "className", "style"];
 var Input = styled__default["default"](BaseInput).withConfig({
   displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
 })(function (_ref) {
   var disabled = _ref.disabled,
     theme = _ref.theme;
-  return styled.css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
+  return styled.css(["width:", ";aspect-ratio:1/1;&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], theme.clickbound.height, disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
 });
 var Track = styled__default["default"].span.withConfig({
   displayName: "SwitchDefault__Track",
@@ -7831,7 +7919,7 @@ var SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault(_ref4,
   var disabled = _ref4.disabled,
     className = _ref4.className,
     style = _ref4.style,
-    rest = _objectWithoutProperties__default["default"](_ref4, _excluded$8);
+    rest = _objectWithoutProperties__default["default"](_ref4, _excluded$a);
   return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
     className: className,
     style: style,
@@ -7874,11 +7962,7 @@ var comfortable = {
   width: circle.minWidth,
   clickbound: {
     height: clickbounds.default__base,
-    width: clickbounds.default__base,
-    offset: {
-      top: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2, "px"),
-      left: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2, "px")
-    }
+    width: clickbounds.default__base
   },
   entities: {
     label: {
@@ -7924,11 +8008,7 @@ var comfortable = {
       width: compactIconButton.minWidth,
       clickbound: {
         height: clickbounds.compact__standard,
-        width: clickbounds.compact__standard,
-        offset: {
-          top: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2, "px"),
-          left: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2, "px")
-        }
+        width: clickbounds.compact__standard
       },
       entities: {
         track: {
@@ -7974,29 +8054,32 @@ var comfortable = {
   }
 };
-var _excluded$7 = ["size", "disabled", "label", "className", "style"];
+var _excluded$9 = ["size", "disabled", "label", "className", "style"];
 var StyledLabel = styled__default["default"].label.withConfig({
   displayName: "Switch__StyledLabel",
   componentId: "sc-sdaahx-0"
-})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], function (_ref) {
+})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;gap:", ";"], function (_ref) {
   var isDisabled = _ref.isDisabled;
   return isDisabled ? 'not-allowed' : 'pointer';
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size === 'small' ? '12px' : '8px';
 });
 var Label$1 = styled__default["default"].span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
-})(function (_ref2) {
-  var theme = _ref2.theme;
-  return styled.css(["", " margin-left:", ";"], edsUtils.typographyTemplate(theme.typography), theme.entities.label.spacings.left);
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return styled.css(["", ";"], edsUtils.typographyTemplate(theme.typography));
 });
-var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
-  var _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'default' : _ref3$size,
-    disabled = _ref3.disabled,
-    label = _ref3.label,
-    className = _ref3.className,
-    style = _ref3.style,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$7);
+var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref4, ref) {
+  var _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'default' : _ref4$size,
+    disabled = _ref4.disabled,
+    label = _ref4.label,
+    className = _ref4.className,
+    style = _ref4.style,
+    rest = _objectWithoutProperties__default["default"](_ref4, _excluded$9);
   var _useEds = useEds(),
     density = _useEds.density;
   // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
@@ -8007,6 +8090,7 @@ var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel, {
+      size: size,
       isDisabled: disabled,
       className: className,
       style: style,
@@ -8145,7 +8229,7 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   }
 });
-var _excluded$6 = ["value", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
+var _excluded$8 = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
 var StyledListItem = styled__default["default"].li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
@@ -8165,15 +8249,16 @@ var Label = styled__default["default"].span.withConfig({
     multiline = _ref2.multiline;
   return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], edsUtils.spacingsTemplate(theme.entities.label.spacings), multiline ? 'normal' : 'nowrap', multiline ? 'initial' : 'hidden');
 });
-var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOption(_ref3, ref) {
-  var value = _ref3.value,
-    multiple = _ref3.multiple,
-    isSelected = _ref3.isSelected,
-    isDisabled = _ref3.isDisabled,
-    multiline = _ref3.multiline,
-    _onClick = _ref3.onClick,
-    ariaSelected = _ref3['aria-selected'],
-    other = _objectWithoutProperties__default["default"](_ref3, _excluded$6);
+function AutocompleteOptionInner(props, ref) {
+  var value = props.value,
+    optionComponent = props.optionComponent,
+    multiple = props.multiple,
+    isSelected = props.isSelected,
+    isDisabled = props.isDisabled,
+    multiline = props.multiline,
+    _onClick = props.onClick,
+    ariaSelected = props['aria-selected'],
+    other = _objectWithoutProperties__default["default"](props, _excluded$8);
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
     isdisabled: isDisabled ? 'true' : 'false',
@@ -8191,15 +8276,18 @@ var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOpti
       onChange: function onChange() {
         return null;
       }
-    }), /*#__PURE__*/jsxRuntime.jsx(Label, {
+    }), optionComponent ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: optionComponent
+    }) : /*#__PURE__*/jsxRuntime.jsx(Label, {
       multiline: multiline,
       children: value
     })]
   }));
-});
+}
+var AutocompleteOption = /*#__PURE__*/react.forwardRef(AutocompleteOptionInner);
-var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
-var Container$1 = styled__default["default"].div.withConfig({
+var _excluded$7 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "loading", "hideClearButton", "onOptionsChange", "onInputChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline", "dropdownHeight", "optionComponent"];
+var Container$2 = styled__default["default"].div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
@@ -8208,9 +8296,9 @@ var StyledList = styled__default["default"](List$1).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   var theme = _ref.theme;
-  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
-var StyledButton = styled__default["default"](Button).withConfig({
+var StyledButton = styled__default["default"](Button$1).withConfig({
   displayName: "Autocomplete__StyledButton",
   componentId: "sc-yvif0e-2"
 })(function (_ref2) {
@@ -8287,9 +8375,12 @@ function AutocompleteInner(props, ref) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$readOnly = props.readOnly,
     readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
     _props$hideClearButto = props.hideClearButton,
     hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
     onOptionsChange = props.onOptionsChange,
+    onInputChange = props.onInputChange,
     selectedOptions = props.selectedOptions,
     multiple = props.multiple,
     _props$initialSelecte = props.initialSelectedOptions,
@@ -8307,7 +8398,10 @@ function AutocompleteInner(props, ref) {
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
     _props$multiline = props.multiline,
     multiline = _props$multiline === void 0 ? false : _props$multiline,
-    other = _objectWithoutProperties__default["default"](props, _excluded$5);
+    _props$dropdownHeight = props.dropdownHeight,
+    dropdownHeight = _props$dropdownHeight === void 0 ? 300 : _props$dropdownHeight,
+    optionComponent = props.optionComponent,
+    other = _objectWithoutProperties__default["default"](props, _excluded$7);
   var isControlled = Boolean(selectedOptions);
   var _useState = react.useState(options),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -8410,6 +8504,7 @@ function AutocompleteInner(props, ref) {
     itemToString: getLabel,
     onInputValueChange: function onInputValueChange(_ref6) {
       var inputValue = _ref6.inputValue;
+      onInputChange && onInputChange(inputValue);
       setAvailableItems(options.filter(function (item) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
@@ -8613,7 +8708,10 @@ function AutocompleteInner(props, ref) {
   })), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, _objectSpread__default["default"](_objectSpread__default["default"]({}, getMenuProps({
       'aria-multiselectable': multiple ? 'true' : null,
-      ref: scrollContainer
+      ref: scrollContainer,
+      style: {
+        maxHeight: "".concat(dropdownHeight, "px")
+      }
     }, {
       suppressRefError: true
     })), {}, {
@@ -8639,7 +8737,8 @@ function AutocompleteInner(props, ref) {
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
           isDisabled: isDisabled,
-          multiline: multiline
+          multiline: multiline,
+          optionComponent: optionComponent === null || optionComponent === void 0 ? void 0 : optionComponent(item, isSelected)
         }, getItemProps(_objectSpread__default["default"](_objectSpread__default["default"]({}, multiline && {
           ref: rowVirtualizer.measureElement
         }), {}, {
@@ -8657,7 +8756,7 @@ function AutocompleteInner(props, ref) {
   }));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
       className: className,
       style: style,
       ref: ref,
@@ -8665,7 +8764,7 @@ function AutocompleteInner(props, ref) {
         label: label,
         meta: meta,
         disabled: disabled
-      })), /*#__PURE__*/jsxRuntime.jsx(Container$1, {
+      })), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
         children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, getInputProps(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         getDropdownProps({
@@ -8681,9 +8780,11 @@ function AutocompleteInner(props, ref) {
           readOnly: readOnly,
           onFocus: openSelect,
           onClick: openSelect,
-          rightAdornmentsWidth: 24 * 2 + 8 + 8,
+          rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
           rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+            children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
+              size: 16
+            }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
               variant: "ghost_icon",
               disabled: disabled || readOnly,
               "aria-label": 'clear options',
@@ -8707,6 +8808,7 @@ function AutocompleteInner(props, ref) {
           })
         }, other))
       }), disablePortal ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+        id: "eds-autocomplete-container",
         children: optionsList
       })]
     })
@@ -8723,8 +8825,8 @@ var _tokens$colors = edsTokens.tokens.colors,
   focusColor = _tokens$colors$intera.focus.rgba,
   primary__resting = _tokens$colors$intera.primary__resting.rgba,
   menuActive = _tokens$colors$intera.primary__selected_highlight.rgba,
-  menuDisabledBackground = _tokens$colors$intera.disabled__fill.rgba,
-  menuDisabledText = _tokens$colors$intera.disabled__text.rgba,
+  menuDisabledBackground$1 = _tokens$colors$intera.disabled__fill.rgba,
+  menuDisabledText$1 = _tokens$colors$intera.disabled__text.rgba,
   _tokens$colors$text = _tokens$colors.text,
   expandTextColor = _tokens$colors$text.static_icons__default.rgba,
   primaryWhite$1 = _tokens$colors$text.static_icons__primary_white.rgba,
@@ -8797,9 +8899,9 @@ var sidebar = {
           }
         },
         disabled: {
-          background: menuDisabledBackground,
+          background: menuDisabledBackground$1,
           typography: {
-            color: menuDisabledText
+            color: menuDisabledText$1
           }
         }
       }
@@ -8864,14 +8966,14 @@ var useSideBar = function useSideBar() {
   return react.useContext(SideBarContext);
 };
-var _excluded$4 = ["onToggle", "open", "children"],
+var _excluded$6 = ["onToggle", "open", "children"],
   _excluded2 = ["onToggle", "open", "children"];
 var SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer(_ref, ref) {
   var onToggleCallback = _ref.onToggle,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$6);
   var _useSideBar = useSideBar(),
     isOpen = _useSideBar.isOpen,
     setIsOpen = _useSideBar.setIsOpen,
@@ -8898,7 +9000,7 @@ var GridContainer = styled__default["default"].div.withConfig({
 })(function (_ref2) {
   var theme = _ref2.theme,
     open = _ref2.open;
-  return styled.css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:hidden;width:", ";min-width:", ";"], edsUtils.bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth);
+  return styled.css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:auto;width:", ";min-width:", ";"], edsUtils.bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth);
 });
 var SideBar$1 = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
   var onToggle = _ref3.onToggle,
@@ -8927,11 +9029,11 @@ var SideBar$1 = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
 });
 SideBar$1.displayName = 'SideBar';
-var _excluded$3 = ["icon", "label", "active", "onClick", "as"];
-var _tokens$entities$side = sidebar.entities.sidebarItem,
-  itemTextColor = _tokens$entities$side.typography.color,
-  iconActive = _tokens$entities$side.states.active.typography.color;
-var Container = styled__default["default"].a.withConfig({
+var _excluded$5 = ["icon", "label", "active", "onClick", "as"];
+var _tokens$entities$side$2 = sidebar.entities.sidebarItem,
+  itemTextColor = _tokens$entities$side$2.typography.color,
+  iconActive = _tokens$entities$side$2.states.active.typography.color;
+var Container$1 = styled__default["default"].a.withConfig({
   displayName: "SidebarLink__Container",
   componentId: "sc-gbehcj-0"
 })(function (_ref) {
@@ -8948,9 +9050,9 @@ var Container = styled__default["default"].a.withConfig({
     _theme$entities$sideb3 = _theme$entities$sideb2.disabled,
     menuDisabledBackground = _theme$entities$sideb3.background,
     menuDisabledText = _theme$entities$sideb3.typography.color;
-  return styled.css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;place-items:center;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'none', minWidth, edsUtils.bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, edsUtils.outlineTemplate(focus.outline));
+  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));
 });
-var ItemText = styled__default["default"](Typography).withConfig({
+var ItemText$1 = styled__default["default"](Typography).withConfig({
   displayName: "SidebarLink__ItemText",
   componentId: "sc-gbehcj-1"
 })(function (_ref2) {
@@ -8961,7 +9063,7 @@ var ItemText = styled__default["default"](Typography).withConfig({
     itemActiveTextColor = _theme$entities$sideb4.states.active.typography.color;
   return styled.css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $active ? itemActiveTextColor : itemTextColor);
 });
-var Tooltip = styled__default["default"](Tooltip$1).withConfig({
+var Tooltip$1 = styled__default["default"](Tooltip$2).withConfig({
   displayName: "SidebarLink__Tooltip",
   componentId: "sc-gbehcj-2"
 })(["text-transform:capitalize;"]);
@@ -8972,14 +9074,14 @@ var SidebarLink = /*#__PURE__*/react.forwardRef(function SidebarLink(_ref3, ref)
     onClick = _ref3.onClick,
     _ref3$as = _ref3.as,
     as = _ref3$as === void 0 ? 'a' : _ref3$as,
-    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$3);
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$5);
   var _useSideBar = useSideBar(),
     isOpen = _useSideBar.isOpen;
   var getIconColor = function getIconColor() {
     return active ? iconActive : itemTextColor;
   };
   if (isOpen) {
-    return /*#__PURE__*/jsxRuntime.jsxs(Container, _objectSpread__default["default"](_objectSpread__default["default"]({
+    return /*#__PURE__*/jsxRuntime.jsxs(Container$1, _objectSpread__default["default"](_objectSpread__default["default"]({
       as: as,
       tabIndex: 0,
       $active: active,
@@ -8989,7 +9091,7 @@ var SidebarLink = /*#__PURE__*/react.forwardRef(function SidebarLink(_ref3, ref)
       children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
         data: icon,
         color: getIconColor()
-      }), /*#__PURE__*/jsxRuntime.jsx(ItemText, {
+      }), /*#__PURE__*/jsxRuntime.jsx(ItemText$1, {
         variant: "cell_text",
         group: "table",
         $active: active,
@@ -8997,10 +9099,10 @@ var SidebarLink = /*#__PURE__*/react.forwardRef(function SidebarLink(_ref3, ref)
       })]
     }));
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
     title: label,
     placement: "right",
-    children: /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread__default["default"](_objectSpread__default["default"]({
+    children: /*#__PURE__*/jsxRuntime.jsx(Container$1, _objectSpread__default["default"](_objectSpread__default["default"]({
       tabIndex: 0,
       as: as,
       $active: active,
@@ -9016,7 +9118,7 @@ var SidebarLink = /*#__PURE__*/react.forwardRef(function SidebarLink(_ref3, ref)
 });
 SidebarLink.displayName = 'SidebarLink';
-var _excluded$2 = ["children"];
+var _excluded$4 = ["children"];
 var StyledSideBarContent = styled__default["default"].div.withConfig({
   displayName: "SideBarContent__StyledSideBarContent",
   componentId: "sc-kq9ra8-0"
@@ -9025,7 +9127,7 @@ var StyledSideBarContent = styled__default["default"].div.withConfig({
 });
 var SideBarContent = /*#__PURE__*/react.forwardRef(function SideBarContent(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$2);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$4);
   var props = _objectSpread__default["default"]({
     ref: ref
   }, rest);
@@ -9034,7 +9136,7 @@ var SideBarContent = /*#__PURE__*/react.forwardRef(function SideBarContent(_ref,
   }));
 });
-var _excluded$1 = ["children"];
+var _excluded$3 = ["children"];
 var StyledSideBarFooter = styled__default["default"].div.withConfig({
   displayName: "SideBarFooter__StyledSideBarFooter",
   componentId: "sc-1hsu72u-0"
@@ -9043,7 +9145,7 @@ var StyledSideBarFooter = styled__default["default"].div.withConfig({
 });
 var SideBarFooter = /*#__PURE__*/react.forwardRef(function SideBarFooter(_ref, ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$3);
   var props = _objectSpread__default["default"]({
     ref: ref
   }, rest);
@@ -9075,10 +9177,10 @@ var SideBarToggle = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2,
   return /*#__PURE__*/jsxRuntime.jsx(ToggleContainer, _objectSpread__default["default"](_objectSpread__default["default"]({
     open: isOpen
   }, props), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
       title: isOpen ? 'Collapse' : 'Expand',
       placement: "right",
-      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: "ghost_icon",
         onClick: function onClick() {
           return setIsOpen(!isOpen);
@@ -9093,7 +9195,7 @@ var SideBarToggle = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2,
   }));
 });
-var _excluded = ["label", "icon", "style", "className"];
+var _excluded$2 = ["label", "icon", "style", "className"];
 var primaryWhite = sidebar.entities.actionButton.typography.color;
 var MenuButtonContainer = styled__default["default"].div.withConfig({
   displayName: "SideBarButton__MenuButtonContainer",
@@ -9108,7 +9210,7 @@ var MenuButtonContainer = styled__default["default"].div.withConfig({
     bottom = _theme$entities$actio.bottom;
   return styled.css(["display:", ";grid-template-columns:", " 1fr ", ";justify-content:center;align-items:center;margin-block-start:", ";margin-block-end:", ";box-sizing:border-box;"], open ? 'grid' : 'flex', left, right, top, bottom);
 });
-var ExtendedButton = styled__default["default"](Button).withConfig({
+var ExtendedButton = styled__default["default"](Button$1).withConfig({
   displayName: "SideBarButton__ExtendedButton",
   componentId: "sc-15xlkyo-1"
 })(function () {
@@ -9119,7 +9221,7 @@ var SideBarButton = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2,
     icon = _ref2.icon,
     style = _ref2.style,
     className = _ref2.className,
-    rest = _objectWithoutProperties__default["default"](_ref2, _excluded);
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -9144,13 +9246,13 @@ var SideBarButton = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2,
       }))
     }));
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
     title: label,
     placement: "right",
     children: /*#__PURE__*/jsxRuntime.jsx(MenuButtonContainer, _objectSpread__default["default"](_objectSpread__default["default"]({
       open: isOpen
     }, styleProps), {}, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread__default["default"](_objectSpread__default["default"]({
+      children: /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread__default["default"](_objectSpread__default["default"]({
         variant: "contained_icon"
       }, props), {}, {
         children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
@@ -9162,24 +9264,300 @@ var SideBarButton = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2,
   });
 });
+var _excluded$1 = ["icon", "label", "isExpanded", "id", "active", "toggleExpand", "onClick", "children", "disabled"];
+var minWidth$1 = sidebar.minWidth,
+  _tokens$entities$side$1 = sidebar.entities.sidebarItem,
+  minHeight$1 = _tokens$entities$side$1.minHeight,
+  border = _tokens$entities$side$1.border,
+  typographyColor$1 = _tokens$entities$side$1.typography.color,
+  _tokens$entities$side2$1 = _tokens$entities$side$1.states,
+  _tokens$entities$side3$1 = _tokens$entities$side2$1.active,
+  menuActiveBackground$1 = _tokens$entities$side3$1.background,
+  typographyActiveColor$1 = _tokens$entities$side3$1.typography.color,
+  menuHoverBackground$1 = _tokens$entities$side2$1.hover.background,
+  focus$1 = _tokens$entities$side2$1.focus,
+  _tokens$entities$side4 = _tokens$entities$side2$1.disabled,
+  menuDisabledBackground = _tokens$entities$side4.background,
+  menuDisabledText = _tokens$entities$side4.typography.color;
+var MenuItem = styled__default["default"].div.withConfig({
+  displayName: "SideBarAccordion__MenuItem",
+  componentId: "sc-1ekwnbi-0"
+})(function (_ref) {
+  var $isExpanded = _ref.$isExpanded;
+  return styled.css(["display:grid;grid-template-columns:1fr;place-items:center;text-decoration:none;min-height:", ";", ";&:hover{cursor:pointer;background-color:", ";}&:focus-visible{", ";}"], minHeight$1, !$isExpanded && edsUtils.bordersTemplate(border), !$isExpanded ? menuHoverBackground$1 : 'none', edsUtils.outlineTemplate(focus$1.outline));
+});
+var AccordionHeader = styled__default["default"].h2.withConfig({
+  displayName: "SideBarAccordion__AccordionHeader",
+  componentId: "sc-1ekwnbi-1"
+})(function (_ref2) {
+  var $active = _ref2.$active;
+  return styled.css(["margin:0;width:100%;min-height:", ";background-color:", ";&:hover{cursor:pointer;background-color:", ";}"], minHeight$1, $active ? menuActiveBackground$1 : 'none', $active ? menuActiveBackground$1 : menuHoverBackground$1);
+});
+var Button = styled__default["default"].button.withConfig({
+  displayName: "SideBarAccordion__Button",
+  componentId: "sc-1ekwnbi-2"
+})(function (_ref3) {
+  var $active = _ref3.$active;
+  return styled.css(["width:100%;min-height:", ";padding:0;border:none;background-color:", ";cursor:pointer;display:grid;place-items:center;&:focus-visible{", ";}&:disabled{background-color:", ";cursor:auto;}"], minHeight$1, $active ? menuActiveBackground$1 : 'transparent', edsUtils.outlineTemplate(focus$1.outline), menuDisabledBackground);
+});
+var OpenSidebarButton = styled__default["default"](Button).withConfig({
+  displayName: "SideBarAccordion__OpenSidebarButton",
+  componentId: "sc-1ekwnbi-3"
+})(["grid-template-columns:", " 1fr 48px;"], minWidth$1);
+var ClosedSidebarButton = styled__default["default"](Button).withConfig({
+  displayName: "SideBarAccordion__ClosedSidebarButton",
+  componentId: "sc-1ekwnbi-4"
+})(["grid-template-columns:", ";position:relative;overflow:hidden;"], minWidth$1);
+var AccordionIcon = styled__default["default"](Icon$1).withConfig({
+  displayName: "SideBarAccordion__AccordionIcon",
+  componentId: "sc-1ekwnbi-5"
+})(["position:absolute;bottom:-10px;right:-10px;transform:rotate(-45deg);"]);
+var Panel = styled__default["default"].div.withConfig({
+  displayName: "SideBarAccordion__Panel",
+  componentId: "sc-1ekwnbi-6"
+})(["width:100%;", ""], edsUtils.bordersTemplate(border));
+var ItemText = styled__default["default"](Typography).withConfig({
+  displayName: "SideBarAccordion__ItemText",
+  componentId: "sc-1ekwnbi-7"
+})(function (_ref4) {
+  var $textColor = _ref4.$textColor;
+  return styled.css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $textColor);
+});
+var Tooltip = styled__default["default"](Tooltip$2).withConfig({
+  displayName: "SideBarAccordion__Tooltip",
+  componentId: "sc-1ekwnbi-8"
+})(["text-transform:capitalize;"]);
+var SideBarAccordion = /*#__PURE__*/react.forwardRef(function SideBarAccordion(_ref5, ref) {
+  var icon = _ref5.icon,
+    label = _ref5.label,
+    isExpanded = _ref5.isExpanded,
+    id = _ref5.id,
+    active = _ref5.active,
+    toggleExpand = _ref5.toggleExpand,
+    onClick = _ref5.onClick,
+    children = _ref5.children,
+    disabled = _ref5.disabled,
+    rest = _objectWithoutProperties__default["default"](_ref5, _excluded$1);
+  var accordionId = edsUtils.useId(id, 'accordion');
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    menuIsOpen = _useState2[0],
+    setMenuIsOpen = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    accordionIsOpen = _useState4[0],
+    setAccordionIsOpen = _useState4[1];
+  var _useState5 = react.useState(null),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    anchorEl = _useState6[0],
+    setAnchorEl = _useState6[1];
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen;
+  var showPanel = toggleExpand !== undefined ? isExpanded : accordionIsOpen;
+  var showAsActive = react.useMemo(function () {
+    // Active-state is controlled
+    if (active !== undefined) {
+      return active;
+    }
+    var hasActiveChild = false;
+    react.Children.forEach(children, function (child) {
+      var item = child;
+      if (item.props.active) {
+        hasActiveChild = true;
+      }
+    });
+    // When Sidebar is expanded, we only show accordion header as active if the accordion is closed, to avoid showing two active items at the same time.
+    return isOpen ? !showPanel && hasActiveChild : hasActiveChild;
+  }, [active, children, showPanel, isOpen]);
+  var combinedRefs = react.useMemo(function () {
+    return edsUtils.mergeRefs(setAnchorEl, ref);
+  }, [ref]);
+  var closeMenu = function closeMenu() {
+    setMenuIsOpen(false);
+  };
+  var onClickWhenSidePanelExpanded = function onClickWhenSidePanelExpanded() {
+    if (toggleExpand === undefined) {
+      setAccordionIsOpen(!accordionIsOpen);
+    } else {
+      toggleExpand();
+    }
+    onClick && onClick();
+  };
+  var onClickWhenSidePanelClosed = function onClickWhenSidePanelClosed() {
+    setMenuIsOpen(!menuIsOpen);
+    onClick && onClick();
+  };
+  var getTextColor = function getTextColor() {
+    if (showAsActive) {
+      return typographyActiveColor$1;
+    } else if (disabled) {
+      return menuDisabledText;
+    }
+    return typographyColor$1;
+  };
+  if (isOpen) {
+    return /*#__PURE__*/jsxRuntime.jsxs(MenuItem, {
+      $isExpanded: showPanel,
+      children: [/*#__PURE__*/jsxRuntime.jsx(AccordionHeader, {
+        $active: showAsActive,
+        children: /*#__PURE__*/jsxRuntime.jsxs(OpenSidebarButton, _objectSpread__default["default"](_objectSpread__default["default"]({
+          ref: ref,
+          id: "header_".concat(accordionId),
+          "aria-expanded": showPanel,
+          "aria-controls": "panel_".concat(accordionId),
+          onClick: onClickWhenSidePanelExpanded,
+          disabled: disabled
+        }, rest), {}, {
+          children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: icon,
+            color: getTextColor()
+          }), /*#__PURE__*/jsxRuntime.jsx(ItemText, {
+            variant: "cell_text",
+            group: "table",
+            $textColor: getTextColor(),
+            children: label
+          }), /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: showPanel ? edsIcons.chevron_up : edsIcons.chevron_down,
+            size: 24,
+            color: getTextColor()
+          })]
+        }))
+      }), showPanel && /*#__PURE__*/jsxRuntime.jsx(Panel, {
+        id: "panel_".concat(accordionId),
+        role: "region",
+        "aria-labelledby": "header_".concat(accordionId),
+        children: children
+      })]
+    });
+  }
+  var tooltip = menuIsOpen ? '' : label;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+      title: tooltip,
+      placement: "right",
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuItem, {
+        $isExpanded: showPanel,
+        children: /*#__PURE__*/jsxRuntime.jsx(AccordionHeader, {
+          $active: showAsActive,
+          children: /*#__PURE__*/jsxRuntime.jsxs(ClosedSidebarButton, _objectSpread__default["default"](_objectSpread__default["default"]({
+            ref: combinedRefs,
+            id: "anchor-default",
+            "aria-haspopup": "true",
+            "aria-expanded": menuIsOpen,
+            "aria-controls": "menu-default",
+            onClick: onClickWhenSidePanelClosed,
+            disabled: disabled
+          }, rest), {}, {
+            children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+              data: icon,
+              color: getTextColor()
+            }), /*#__PURE__*/jsxRuntime.jsx(AccordionIcon, {
+              data: edsIcons.arrow_drop_down,
+              size: 24,
+              color: getTextColor()
+            })]
+          }))
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Menu, {
+      open: menuIsOpen,
+      placement: 'right-start',
+      onClose: closeMenu,
+      anchorEl: anchorEl,
+      children: react.Children.map(children, function (child) {
+        var item = child;
+        return /*#__PURE__*/jsxRuntime.jsx(Menu.Item, _objectSpread__default["default"](_objectSpread__default["default"]({}, child.props), {}, {
+          children: item.props.label
+        }));
+      })
+    })]
+  });
+});
+SideBarAccordion.displayName = 'SidebarAccordion';
+var _excluded = ["label", "active", "onClick", "as"];
+var minWidth = sidebar.minWidth,
+  _tokens$entities$side = sidebar.entities.sidebarItem,
+  minHeight = _tokens$entities$side.minHeight,
+  typographyColor = _tokens$entities$side.typography.color,
+  _tokens$entities$side2 = _tokens$entities$side.states,
+  _tokens$entities$side3 = _tokens$entities$side2.active,
+  menuActiveBackground = _tokens$entities$side3.background,
+  typographyActiveColor = _tokens$entities$side3.typography.color,
+  focus = _tokens$entities$side2.focus,
+  menuHoverBackground = _tokens$entities$side2.hover.background;
+var Container = styled__default["default"].a.withConfig({
+  displayName: "SideBarAccordionItem__Container",
+  componentId: "sc-1aeo1e1-0"
+})(function (_ref) {
+  var $active = _ref.$active;
+  return styled.css(["display:grid;grid-template-columns:", " 1fr;justify-items:stretch;background-color:", ";cursor:pointer;text-decoration:none;border:0;width:100%;padding:0;&:hover{background-color:", ";}&:focus-visible{", ";}"], minWidth, $active ? menuActiveBackground : 'transparent', $active ? menuActiveBackground : menuHoverBackground, edsUtils.outlineTemplate(focus.outline));
+});
+var 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);
+var Text = styled__default["default"](Typography).withConfig({
+  displayName: "SideBarAccordionItem__Text",
+  componentId: "sc-1aeo1e1-2"
+})(function (_ref2) {
+  var $active = _ref2.$active;
+  return styled.css(["color:", ";width:100%;&::first-letter{text-transform:capitalize;}"], $active ? typographyActiveColor : typographyColor);
+});
+var SideBarAccordionItem = /*#__PURE__*/react.forwardRef(function SidebarLink(_ref3, ref) {
+  var label = _ref3.label,
+    active = _ref3.active,
+    onClick = _ref3.onClick,
+    _ref3$as = _ref3.as,
+    as = _ref3$as === void 0 ? 'a' : _ref3$as,
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded);
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen;
+  if (isOpen) {
+    return /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread__default["default"](_objectSpread__default["default"]({
+      as: as,
+      tabIndex: 0,
+      $active: active,
+      onClick: onClick,
+      ref: ref
+    }, rest), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(TextWrapper, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Text, {
+          variant: "cell_text",
+          group: "table",
+          $active: active,
+          children: label
+        })
+      })
+    }));
+  }
+  return null;
+});
+SideBarAccordionItem.displayName = 'SideBarAccordionItem';
 var SideBar = SideBar$1;
 SideBar.Link = SidebarLink;
 SideBar.Content = SideBarContent;
 SideBar.Footer = SideBarFooter;
 SideBar.Toggle = SideBarToggle;
 SideBar.Button = SideBarButton;
+SideBar.Accordion = SideBarAccordion;
+SideBar.AccordionItem = SideBarAccordionItem;
 SideBar.Link.displayName = 'SideBar.Link';
 SideBar.Content.displayName = 'SideBar.Content';
 SideBar.Footer.displayName = 'SideBar.Footer';
 SideBar.Toggle.displayName = 'SideBar.Toggle';
 SideBar.Button.displayName = 'SideBar.Button';
+SideBar.Accordion.displayName = 'SideBar.Accordion';
+SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
 exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Banner = Banner;
 exports.Breadcrumbs = Breadcrumbs;
-exports.Button = Button;
+exports.Button = Button$1;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
@@ -9213,7 +9591,7 @@ exports.Table = Table;
 exports.TableOfContents = TableOfContents;
 exports.Tabs = Tabs;
 exports.TextField = TextField;
-exports.Tooltip = Tooltip$1;
+exports.Tooltip = Tooltip$2;
 exports.TopBar = TopBar;
 exports.Typography = Typography;
 exports.useEds = useEds;