@equinor/eds-core-react 0.32.4 → 0.33.0

package/dist/eds-core-react.cjs

@@ -856,7 +856,7 @@ var useEds = function useEds() {
   return react.useContext(EdsContext);
 };
 
-var _excluded$1s = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+var _excluded$1t = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
     case 'ghost':
@@ -913,7 +913,7 @@ var Button$2 = /*#__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$1s);
+    other = _objectWithoutProperties__default.default(_ref2, _excluded$1t);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -950,23 +950,23 @@ var group = {
   }
 };
 
-var _excluded$1r = ["children", "vertical"];
+var _excluded$1s = ["children", "vertical"];
 var border$5 = group.border;
 var radius$1 = border$5.radius;
 var ButtonGroupBase = styled__default.default.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"
 })(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? styled.css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius$1, radius$1, radius$1, radius$1) : styled.css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius$1, radius$1, radius$1, radius$1);
+  var $vertical = _ref.$vertical;
+  return $vertical ? styled.css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius$1, radius$1, radius$1, radius$1) : styled.css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius$1, radius$1, radius$1, radius$1);
 });
 var ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
     vertical = _ref2.vertical,
-    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1r);
+    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1s);
   var props = _objectSpread__default.default({
     ref: ref,
-    vertical: vertical
+    $vertical: vertical
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupBase, _objectSpread__default.default(_objectSpread__default.default({
     role: "group"
@@ -1015,7 +1015,7 @@ var tooltip = {
   }
 };
 
-var _excluded$1q = ["title", "placement", "children", "style", "enterDelay"];
+var _excluded$1r = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled__default.default.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
@@ -1036,7 +1036,7 @@ var Tooltip$2 = /*#__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$1q);
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1r);
   var arrowRef = react.useRef(null);
   var _useState = react.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
@@ -1145,13 +1145,13 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   });
 });
 
-var _excluded$1p = ["children", "multiple", "selectedIndexes", "onChange"];
+var _excluded$1q = ["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$1p);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1q);
   var _useState = react.useState(selectedIndexes || []),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     pickedIndexes = _useState2[0],
@@ -1246,7 +1246,7 @@ var link = {
   }
 };
 
-var _excluded$1o = ["variant", "children", "bold", "italic", "link", "color", "group", "token", "as"];
+var _excluded$1p = ["variant", "children", "bold", "italic", "link", "lines", "color", "group", "token", "as"];
 var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
@@ -1276,6 +1276,9 @@ var findTypography = function findTypography(variantName, group) {
   }
   return typography$g[group][variantName];
 };
+
+//@TODO: fix typescript here
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 var findColor = function findColor() {
   var inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return typeof colors$5[inputColor] === 'undefined' ? inputColor : colors$5[inputColor];
@@ -1290,19 +1293,19 @@ var StyledTypography$1 = styled__default.default.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-179guof-0"
 })(["", " ", " ", " ", ""], function (_ref) {
-  var typography = _ref.typography,
+  var $typography = _ref.$typography,
     $link = _ref.$link;
-  return edsUtils.typographyTemplate(typography, $link);
+  return edsUtils.typographyTemplate($typography, $link);
 }, function (_ref2) {
   var $color = _ref2.$color;
   return styled.css({
     color: findColor($color)
   });
 }, function (_ref3) {
-  var lines = _ref3.lines;
+  var $lines = _ref3.$lines;
   return (
     //https://caniuse.com/#feat=css-line-clamp
-    lines > 0 && styled.css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines)
+    $lines > 0 && styled.css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], $lines)
   );
 }, function (_ref4) {
   var $link = _ref4.$link;
@@ -1315,11 +1318,12 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
     bold = _ref5.bold,
     italic = _ref5.italic,
     link = _ref5.link,
+    lines = _ref5.lines,
     color = _ref5.color,
     group = _ref5.group,
     token = _ref5.token,
     providedAs = _ref5.as,
-    other = _objectWithoutProperties__default.default(_ref5, _excluded$1o);
+    other = _objectWithoutProperties__default.default(_ref5, _excluded$1p);
   var as = providedAs ? providedAs : getElementType(variant, link);
   var variantName = toVariantName(variant, bold, italic, link);
   var typography = findTypography(variantName, group);
@@ -1328,8 +1332,9 @@ var Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
   }
   return /*#__PURE__*/jsxRuntime.jsx(StyledTypography$1, _objectSpread__default.default(_objectSpread__default.default({
     as: as,
-    typography: _objectSpread__default.default(_objectSpread__default.default({}, typography), token),
+    $typography: _objectSpread__default.default(_objectSpread__default.default({}, typography), token),
     $link: link,
+    $lines: lines,
     ref: ref,
     $color: color
   }, other), {}, {
@@ -1459,14 +1464,14 @@ var applyVariant = function applyVariant(variant, token) {
   }
 };
 
-var _excluded$1n = ["children"];
+var _excluded$1o = ["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$1n);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1o);
   return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     ref: ref,
     children: children
@@ -1480,14 +1485,14 @@ var initalState$2 = {
 };
 var InnerContext = /*#__PURE__*/react.createContext(initalState$2);
 
-var _excluded$1m = ["children"];
+var _excluded$1n = ["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$1m);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1n);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
@@ -1499,7 +1504,7 @@ var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
   });
 });
 
-var _excluded$1l = ["children", "variant"];
+var _excluded$1m = ["children", "variant"];
 var StyledTableCell$1 = styled__default.default.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
@@ -1520,7 +1525,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$1l);
+    rest = _objectWithoutProperties__default.default(_ref2, _excluded$1m);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
@@ -1625,13 +1630,13 @@ var token$4 = {
   }
 };
 
-var _excluded$1k = ["children", "sort"];
+var _excluded$1l = ["children", "sort", "sticky"];
 var StyledTableCell = styled__default.default.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
 })(function (props) {
   var theme = props.theme,
-    sticky = props.sticky;
+    $sticky = props.$sticky;
   var background = theme.background,
     height = theme.height,
     typography = theme.typography,
@@ -1646,7 +1651,7 @@ var StyledTableCell = styled__default.default.th.withConfig({
   if (ariaSort && ariaSort !== 'none') {
     sortStylingActive = styled.css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? styled.css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
-  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 var CellInner = styled__default.default.div.withConfig({
   displayName: "HeaderCell__CellInner",
@@ -1655,18 +1660,22 @@ 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$1k);
+    sticky = _ref.sticky,
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1l);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = edsUtils.useToken({
     density: density
   }, token$4);
+  var props = _objectSpread__default.default({
+    ref: ref,
+    $sticky: sticky
+  }, rest);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, _objectSpread__default.default(_objectSpread__default.default({
       "aria-sort": sort
-    }, rest), {}, {
-      ref: ref,
+    }, props), {}, {
       children: /*#__PURE__*/jsxRuntime.jsx(CellInner, {
         children: children
       })
@@ -1712,7 +1721,7 @@ var token$3 = {
   }
 };
 
-var _excluded$1j = ["children", "sticky"];
+var _excluded$1k = ["children", "sticky"];
 var StyledTableHead = styled__default.default.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
@@ -1720,7 +1729,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$1j);
+    props = _objectWithoutProperties__default.default(_ref, _excluded$1k);
   return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
@@ -1747,42 +1756,41 @@ var token$2 = {
   }
 };
 
+var _token$states$hover;
 var StyledRow = styled__default.default.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-12c5lns-0"
-})(function (_ref) {
-  var _token$states$active, _token$states$hover;
-  var active = _ref.active;
-  return {
-    background: active ? (_token$states$active = token$2.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: (_token$states$hover = token$2.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background
-      }
-    }
-  };
-});
+})(["background:", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], function (_ref) {
+  var _token$states$active;
+  var $active = _ref.$active;
+  return $active ? (_token$states$active = token$2.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null;
+}, (_token$states$hover = token$2.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background);
 var Row = /*#__PURE__*/react.forwardRef(function Row(_ref2, ref) {
   var props = _extends__default.default({}, (_objectDestructuringEmpty__default.default(_ref2), _ref2));
-  var children = props.children;
+  var children = props.children,
+    active = props.active;
   return /*#__PURE__*/jsxRuntime.jsx(StyledRow, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
+    $active: active,
     ref: ref,
     children: children
   }));
 });
 
+var _excluded$1j = ["captionSide"];
 var StyledCaption = styled__default.default.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
 })(function (_ref) {
-  var _ref$captionSide = _ref.captionSide,
-    captionSide = _ref$captionSide === void 0 ? 'top' : _ref$captionSide;
-  return {
-    captionSide: captionSide
-  };
-});
-var Caption = /*#__PURE__*/react.forwardRef(function Caption(props, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledCaption, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
+  var $captionSide = _ref.$captionSide;
+  return styled.css(["caption-side:", ";"], $captionSide);
+});
+var Caption = /*#__PURE__*/react.forwardRef(function Caption(_ref2, ref) {
+  var _ref2$captionSide = _ref2.captionSide,
+    captionSide = _ref2$captionSide === void 0 ? 'top' : _ref2$captionSide,
+    props = _objectWithoutProperties__default.default(_ref2, _excluded$1j);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCaption, _objectSpread__default.default(_objectSpread__default.default({
+    $captionSide: captionSide
+  }, props), {}, {
     ref: ref
   }));
 });
@@ -1830,7 +1838,7 @@ var medium$4 = {
   }
 };
 
-var tokens$4 = /*#__PURE__*/Object.freeze({
+var tokens$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   divider: divider$1,
   medium: medium$4,
@@ -1843,11 +1851,11 @@ var StyledDivider$3 = styled__default.default.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(function (_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    marginTop = _ref.marginTop,
-    marginBottom = _ref.marginBottom,
-    dividerHeight = _ref.dividerHeight;
-  return styled.css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
+  var $backgroundColor = _ref.$backgroundColor,
+    $marginTop = _ref.$marginTop,
+    $marginBottom = _ref.$marginBottom,
+    $dividerHeight = _ref.$dividerHeight;
+  return styled.css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], $backgroundColor, $marginTop, $marginBottom, $dividerHeight, $dividerHeight);
 });
 var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
   var _ref2$color = _ref2.color,
@@ -1859,10 +1867,10 @@ var Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$1i);
   var colorValue = color === 'medium' ? 'mediumColor' : color;
   var props = _objectSpread__default.default({
-    backgroundColor: divider[colorValue].background,
-    marginTop: tokens$4[variant].spacings.top,
-    marginBottom: tokens$4[variant].spacings.bottom,
-    dividerHeight: parseInt(size)
+    $backgroundColor: divider[colorValue].background,
+    $marginTop: tokens$3[variant].spacings.top,
+    $marginBottom: tokens$3[variant].spacings.bottom,
+    $dividerHeight: parseInt(size)
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsx(StyledDivider$3, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     ref: ref
@@ -1897,8 +1905,8 @@ var LabelBase = styled__default.default.label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
 })(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], edsUtils.typographyTemplate(label.typography), label.spacings.left, label.spacings.right, function (_ref) {
-  var disabledText = _ref.disabledText;
-  return disabledText ? label.states.disabled.typography.color : label.typography.color;
+  var $disabledText = _ref.$disabledText;
+  return $disabledText ? label.states.disabled.typography.color : label.typography.color;
 });
 var Text$3 = styled__default.default.span.withConfig({
   displayName: "Label__Text",
@@ -1916,7 +1924,7 @@ var Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
     /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
     jsxRuntime.jsxs(LabelBase, _objectSpread__default.default(_objectSpread__default.default({
       ref: ref,
-      disabledText: disabled
+      $disabledText: disabled
     }, other), {}, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
         children: label
@@ -2163,6 +2171,8 @@ var Label$2 = styled__default.default(Label$3).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
+/* @TODO fix no-unused-prop-types disabled & readOnly */
+
 /** InputWrapper is a internal skeleton component for structuring input elements  */
 var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, ref) {
   var children = _ref.children,
@@ -2386,27 +2396,18 @@ var inputToken = {
   success: success
 };
 
-var tokens$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  error: error$3,
-  input: input$1,
-  inputToken: inputToken,
-  success: success,
-  warning: warning$3
-});
-
 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) {
   var _entities$adornment, _entities$adornment$s;
-  var token = _ref.token,
+  var $token = _ref.$token,
     disabled = _ref.disabled,
     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;", "}", " ", " & > 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({
+  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;", "}", " ", " & > 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
   }));
@@ -2415,31 +2416,31 @@ var StyledInput = styled__default.default.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-1"
 })(function (_ref2) {
-  var token = _ref2.token,
-    paddingLeft = _ref2.paddingLeft,
-    paddingRight = _ref2.paddingRight;
-  return styled.css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], edsUtils.spacingsTemplate(token.spacings), edsUtils.typographyMixin(token.typography), paddingLeft, paddingRight, token.entities.placeholder.typography.color);
+  var $token = _ref2.$token,
+    $paddingLeft = _ref2.$paddingLeft,
+    $paddingRight = _ref2.$paddingRight;
+  return styled.css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], edsUtils.spacingsTemplate($token.spacings), edsUtils.typographyMixin($token.typography), $paddingLeft, $paddingRight, $token.entities.placeholder.typography.color);
 });
 var Adornments = styled__default.default.div.withConfig({
   displayName: "Input__Adornments",
   componentId: "sc-1ykv024-2"
 })(function (_ref3) {
-  var token = _ref3.token;
-  return styled.css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], token.spacings.top, token.spacings.bottom, edsUtils.typographyMixin(token.entities.adornment.typography));
+  var $token = _ref3.$token;
+  return styled.css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], $token.spacings.top, $token.spacings.bottom, edsUtils.typographyMixin($token.entities.adornment.typography));
 });
 var LeftAdornments = styled__default.default(Adornments).withConfig({
   displayName: "Input__LeftAdornments",
   componentId: "sc-1ykv024-3"
 })(function (_ref4) {
-  var token = _ref4.token;
-  return styled.css(["left:0;padding-left:", ";"], token.entities.adornment.spacings.left);
+  var $token = _ref4.$token;
+  return styled.css(["left:0;padding-left:", ";"], $token.entities.adornment.spacings.left);
 });
 var RightAdornments = styled__default.default(Adornments).withConfig({
   displayName: "Input__RightAdornments",
   componentId: "sc-1ykv024-4"
 })(function (_ref5) {
-  var token = _ref5.token;
-  return styled.css(["right:0;padding-right:", ";"], token.entities.adornment.spacings.right);
+  var $token = _ref5.$token;
+  return styled.css(["right:0;padding-right:", ";"], $token.entities.adornment.spacings.right);
 });
 var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
   var variant = _ref6.variant,
@@ -2486,7 +2487,7 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
     type: type,
     disabled: disabled,
     readOnly: readOnly,
-    token: token,
+    $token: token,
     style: {
       resize: 'none'
     }
@@ -2496,15 +2497,15 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
     readOnly: readOnly,
     className: className,
     style: style,
-    token: token
+    $token: token
   };
   var _leftAdornmentProps = _objectSpread__default.default(_objectSpread__default.default({}, leftAdornmentsProps), {}, {
     ref: setLeftAdornmentsRef,
-    token: token
+    $token: token
   });
   var _rightAdornmentProps = _objectSpread__default.default(_objectSpread__default.default({}, rightAdornmentsProps), {}, {
     ref: setRightAdornmentsRef,
-    token: token
+    $token: token
   });
   return (
     /*#__PURE__*/
@@ -2513,8 +2514,8 @@ var Input$4 = /*#__PURE__*/react.forwardRef(function Input(_ref6, ref) {
       children: [leftAdornments ? /*#__PURE__*/jsxRuntime.jsx(LeftAdornments, _objectSpread__default.default(_objectSpread__default.default({}, _leftAdornmentProps), {}, {
         children: leftAdornments
       })) : null, /*#__PURE__*/jsxRuntime.jsx(StyledInput, _objectSpread__default.default({
-        paddingLeft: token.spacings.left,
-        paddingRight: token.spacings.right
+        $paddingLeft: token.spacings.left,
+        $paddingRight: token.spacings.right
       }, inputProps)), rightAdornments ? /*#__PURE__*/jsxRuntime.jsx(RightAdornments, _objectSpread__default.default(_objectSpread__default.default({}, _rightAdornmentProps), {}, {
         children: rightAdornments
       })) : null]
@@ -2532,7 +2533,6 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
     type = _ref$type === void 0 ? 'text' : _ref$type,
     rowsMax = _ref.rowsMax,
     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),
     textareaEl = _useState2[0],
@@ -2557,9 +2557,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
     ref: combinedRef,
     type: type,
     disabled: disabled,
-    variant: variant,
-    token: inputVariant,
-    density: density
+    variant: variant
   }, other);
   var adornmentsToTop = {
     style: {
@@ -2579,7 +2577,7 @@ var Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref, ref) {
 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({
+  return props.$multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, _objectSpread__default.default({
     ref: ref
   }, props)) : /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default.default({
     ref: ref
@@ -2618,7 +2616,7 @@ var TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     }),
     rowsMax: rowsMax,
     ref: inputRef || textareaRef,
-    multiline: multiline
+    $multiline: multiline
   }, other);
   var helperProps = {
     id: null,
@@ -2672,33 +2670,32 @@ var get = function get(name) {
 };
 
 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)") : '';
-};
-var StyledSvg = styled__default.default.svg.attrs(function (_ref2) {
-  var height = _ref2.height,
-    width = _ref2.width,
-    fill = _ref2.fill;
+var StyledSvg = styled__default.default.svg.attrs(function (_ref) {
+  var $height = _ref.$height,
+    $width = _ref.$width,
+    fill = _ref.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height: "".concat(height, "px"),
-    width: "".concat(width, "px"),
+    height: "".concat($height, "px"),
+    width: "".concat($width, "px"),
     fill: fill
   };
 }).withConfig({
   displayName: "Icon__StyledSvg",
   componentId: "sc-6evbi1-0"
-})(["", ""], transform);
+})(["transform:", ";"], function (_ref2) {
+  var $rotation = _ref2.$rotation;
+  return $rotation ? "rotate(".concat($rotation, "deg)") : 'none';
+});
 var StyledPath$2 = styled__default.default.path.attrs(function (_ref3) {
   var $height = _ref3.$height,
-    size = _ref3.size;
+    $size = _ref3.$size;
   return {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / $height !== 1 ? "scale(".concat(size / $height, ")") : null
+    transform: $size / $height !== 1 ? "scale(".concat($size / $height, ")") : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -2741,21 +2738,21 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
   if (typeof icon === 'undefined') {
     throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
-  var height = size ? size : parseInt(icon.width);
-  var width = size ? size : parseInt(icon.height);
+  var $height = size ? size : parseInt(icon.width);
+  var $width = size ? size : parseInt(icon.height);
   var svgProps = {
-    height: height,
-    width: width,
+    $height: $height,
+    $width: $width,
     fill: color,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
-    rotation: rotation,
+    viewBox: "0 0 ".concat($width, " ").concat($height),
+    $rotation: rotation,
     name: name,
     'aria-hidden': true
   };
   var pathProps = {
     d: icon.svgPathData,
-    $height: icon.height ? icon.height : size,
-    size: size || icon.height
+    $height: icon.height ? parseInt(icon.height) : size,
+    $size: size || parseInt(icon.height)
   };
 
   // Accessibility
@@ -3006,10 +3003,10 @@ var StyledAccordionHeaderTitle = styled__default.default.span.withConfig({
 })(function (_ref) {
   var _header$states$active;
   var theme = _ref.theme,
-    isExpanded = _ref.isExpanded,
-    disabled = _ref.disabled;
+    $isExpanded = _ref.$isExpanded,
+    $disabled = _ref.$disabled;
   var header = theme.entities.header;
-  return styled.css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+  return styled.css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], $isExpanded && !$disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeaderTitle(_ref2, ref) {
   var isExpanded = _ref2.isExpanded,
@@ -3018,8 +3015,8 @@ var AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeade
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$16);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, _objectSpread__default.default(_objectSpread__default.default({
     ref: ref,
-    isExpanded: isExpanded,
-    disabled: disabled
+    $isExpanded: isExpanded,
+    $disabled: disabled
   }, rest), {}, {
     children: children
   }));
@@ -3032,7 +3029,7 @@ var StyledAccordionHeaderActions = styled__default.default.span.withConfig({
 })(function (_ref) {
   var _header$states$active;
   var theme = _ref.theme,
-    isExpanded = _ref.isExpanded,
+    $isExpanded = _ref.$isExpanded,
     disabled = _ref.disabled;
   var header = theme.entities.header;
   return styled.css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? styled.css({
@@ -3041,7 +3038,7 @@ var StyledAccordionHeaderActions = styled__default.default.span.withConfig({
   }) : styled.css({
     color: header.typography.color,
     cursor: 'pointer'
-  }), isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+  }), $isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHeaderActions(_ref2, ref) {
   var isExpanded = _ref2.isExpanded,
@@ -3050,7 +3047,7 @@ var AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHea
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$15);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, _objectSpread__default.default(_objectSpread__default.default({
     ref: ref,
-    isExpanded: isExpanded,
+    $isExpanded: isExpanded,
     disabled: disabled
   }, rest), {}, {
     children: children
@@ -3065,30 +3062,19 @@ var StyledAccordionHeader = styled__default.default.div.withConfig({
 })(function (_ref) {
   var theme = _ref.theme,
     disabled = _ref.disabled,
-    parentIndex = _ref.parentIndex;
+    $parentIndex = _ref.$parentIndex;
   var header = theme.entities.header,
     border = theme.border;
-  return styled.css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, edsUtils.bordersTemplate(border), parentIndex === 0 ? null : 'none', disabled ? styled.css({
-    color: header.states.disabled.typography.color,
-    cursor: 'not-allowed'
-  }) : styled.css({
-    color: header.typography.color,
-    cursor: 'pointer',
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: header.states.hover.background
-      }
-    }
-  }));
+  return styled.css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, edsUtils.bordersTemplate(border), $parentIndex === 0 ? null : 'none', disabled ? styled.css(["color:", ";cursor:not-allowed;"], header.states.disabled.typography.color) : styled.css(["color:", ";cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], header.typography.color, header.states.hover.background));
 });
 var StyledAccordionHeaderButton = styled__default.default.button.attrs(function (_ref2) {
-  var panelId = _ref2.panelId,
-    isExpanded = _ref2.isExpanded,
+  var $panelId = _ref2.$panelId,
+    $isExpanded = _ref2.$isExpanded,
     disabled = _ref2.disabled;
   return {
-    'aria-expanded': isExpanded,
-    'aria-controls': panelId,
-    'aria-disabled': isExpanded && disabled,
+    'aria-expanded': $isExpanded,
+    'aria-controls': $panelId,
+    'aria-disabled': $isExpanded && disabled,
     tabIndex: disabled ? -1 : 0,
     disabled: disabled
   };
@@ -3113,8 +3099,8 @@ var StyledIcon$1 = styled__default.default(Icon$1).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
 })(function (_ref4) {
-  var chevronPosition = _ref4.chevronPosition;
-  return styled.css(["flex-shrink:0;", ""], chevronPosition === 'left' ? styled.css({
+  var $chevronPosition = _ref4.$chevronPosition;
+  return styled.css(["flex-shrink:0;", ""], $chevronPosition === 'left' ? styled.css({
     marginRight: '32px'
   }) : styled.css({
     marginLeft: '16px'
@@ -3158,7 +3144,7 @@ var AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
   var chevron = /*#__PURE__*/jsxRuntime.jsx(StyledIcon$1, {
     data: isExpanded ? edsIcons.chevron_up : edsIcons.chevron_down,
     size: 24,
-    chevronPosition: chevronPosition,
+    $chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
   }, "".concat(id, "-icon"));
   var headerChildren = react.Children.map(children, function (child) {
@@ -3191,14 +3177,14 @@ var AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
   var newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsxRuntime.jsxs(StyledAccordionHeader, {
     disabled: disabled,
-    parentIndex: parentIndex,
+    $parentIndex: parentIndex,
     as: headerLevel,
     className: className,
     style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderButton, _objectSpread__default.default(_objectSpread__default.default({
-      isExpanded: isExpanded,
+      $isExpanded: isExpanded,
       disabled: disabled,
-      panelId: panelId,
+      $panelId: panelId,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: ref,
@@ -3211,10 +3197,10 @@ var AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
 
 var _excluded$13 = ["id", "headerId", "hidden", "children"];
 var StyledAccordionPanel = styled__default.default.div.attrs(function (_ref) {
-  var headerId = _ref.headerId;
+  var $headerId = _ref.$headerId;
   return {
     role: 'region',
-    'aria-labelledby': headerId
+    'aria-labelledby': $headerId
   };
 }).withConfig({
   displayName: "AccordionPanel__StyledAccordionPanel",
@@ -3234,7 +3220,7 @@ var AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel(_ref3
     children = _ref3.children,
     props = _objectWithoutProperties__default.default(_ref3, _excluded$13);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionPanel, _objectSpread__default.default(_objectSpread__default.default({
-    headerId: headerId,
+    $headerId: headerId,
     id: id,
     hidden: hidden
   }, props), {}, {
@@ -3486,11 +3472,11 @@ var StyledTabList = styled__default.default.div.attrs(function () {
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
 })(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;& ::-webkit-scrollbar{width:0;height:0;}}"], function (_ref) {
-  var variant = _ref.variant;
-  return variants$1[variant];
+  var $variant = _ref.$variant;
+  return variants$1[$variant];
 }, function (_ref2) {
-  var scrollable = _ref2.scrollable;
-  return scrollable ? 'auto' : 'hidden';
+  var $scrollable = _ref2.$scrollable;
+  return $scrollable ? 'auto' : 'hidden';
 });
 var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   var _ref3$children = _ref3.children,
@@ -3505,7 +3491,7 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
     _useContext$scrollabl = _useContext.scrollable,
     scrollable = _useContext$scrollabl === void 0 ? false : _useContext$scrollabl,
     tabsFocused = _useContext.tabsFocused;
-  var currentTab = react.useRef(activeTab);
+  var currentTab = react.useRef();
   var _useState = react.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     arrowNavigating = _useState2[0],
@@ -3516,18 +3502,19 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
       node.focus();
     }
   }, [arrowNavigating, tabsFocused]);
-  react.useEffect(function () {
-    currentTab.current = activeTab;
-  }, [activeTab]);
-  var Tabs = react.Children.map(children, function (child, index) {
-    var tabRef = index === activeTab ? edsUtils.mergeRefs(child.ref, selectedTabRef) : child.ref;
+  var Tabs = react.Children.map(children, function (child, $index) {
+    var childProps = child.props;
+    var controlledActive = childProps.value;
+    var isActive = controlledActive ? controlledActive === activeTab : $index === activeTab;
+    var tabRef = isActive ? edsUtils.mergeRefs(child.ref, selectedTabRef) : child.ref;
+    if (isActive) currentTab.current = $index;
     return /*#__PURE__*/react.cloneElement(child, {
-      id: "".concat(tabsId, "-tab-").concat(index + 1),
-      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
-      active: index === activeTab,
-      index: index,
+      id: "".concat(tabsId, "-tab-").concat($index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat($index + 1),
+      active: isActive,
+      $index: $index,
       onClick: function onClick() {
-        return handleChange(index);
+        return handleChange($index);
       },
       ref: tabRef
     });
@@ -3537,7 +3524,7 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
     return !childProps.disabled;
   }).map(function (child) {
     var childProps = child.props;
-    return childProps.index;
+    return childProps.$index;
   });
   var firstFocusableChild = focusableChildren[0];
   var lastFocusableChild = focusableChildren[focusableChildren.length - 1];
@@ -3562,24 +3549,25 @@ var TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
     onKeyDown: handleKeyPress,
     ref: ref
   }, props), {}, {
-    variant: variant,
-    scrollable: scrollable,
+    $variant: variant,
+    $scrollable: scrollable,
     children: Tabs
   }));
 });
 
-var _excluded$10 = ["active"];
+var _excluded$10 = ["active", "value"];
 var StyledTab = styled__default.default.button.attrs(function (_ref) {
   var _ref$$active = _ref.$active,
     $active = _ref$$active === void 0 ? false : _ref$$active,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    $value = _ref.$value;
   return {
     type: 'button',
     role: 'tab',
     'aria-selected': $active,
     'aria-disabled': disabled,
-    tabIndex: $active ? '0' : '-1'
+    tabIndex: $value ? 0 : $active ? 0 : -1
   };
 }).withConfig({
   displayName: "Tab__StyledTab",
@@ -3593,25 +3581,29 @@ var StyledTab = styled__default.default.button.attrs(function (_ref) {
 });
 var Tab = /*#__PURE__*/react.forwardRef(function Tab(_ref3, ref) {
   var active = _ref3.active,
+    value = _ref3.value,
     rest = _objectWithoutProperties__default.default(_ref3, _excluded$10);
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, _objectSpread__default.default({
     ref: ref,
-    $active: active
+    $active: active,
+    $value: value
   }, rest));
 });
 
-var _excluded$$ = ["children"];
+var _excluded$$ = ["children", "conditionalRender"];
 var TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(_ref, ref) {
   var children = _ref.children,
+    conditionalRender = _ref.conditionalRender,
     props = _objectWithoutProperties__default.default(_ref, _excluded$$);
   var _useContext = react.useContext(TabsContext),
     activeTab = _useContext.activeTab,
     tabsId = _useContext.tabsId;
-  var Panels = react.Children.map(children, function (child, index) {
-    if (activeTab !== index) return null;
+  var Panels = react.Children.map(children, function (child, $index) {
+    if (conditionalRender && activeTab !== $index) return null;
     return /*#__PURE__*/react.cloneElement(child, {
-      id: "".concat(tabsId, "-panel-").concat(index + 1),
-      'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1)
+      id: "".concat(tabsId, "-panel-").concat($index + 1),
+      'aria-labelledby': "".concat(tabsId, "-tab-").concat($index + 1),
+      hidden: activeTab !== $index
     });
   });
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread__default.default(_objectSpread__default.default({
@@ -3669,7 +3661,8 @@ var StyledPaper = styled__default.default.div.withConfig({
 });
 var Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
   var _elevationToken$eleva;
-  var elevation$1 = _ref2.elevation,
+  var _ref2$elevation = _ref2.elevation,
+    elevation$1 = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
     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'
@@ -3723,8 +3716,8 @@ var StyledCard = styled__default.default(Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
 })(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], function (_ref) {
-  var background = _ref.background;
-  return background;
+  var $background = _ref.$background;
+  return $background;
 }, edsUtils.bordersTemplate(primary$3.border));
 var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
   var children = _ref2.children,
@@ -3737,7 +3730,7 @@ var Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
   var token = tokens$2[cardVariant];
   var props = _objectSpread__default.default({
     ref: ref,
-    background: token.background
+    $background: token.background
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsx(StyledCard, _objectSpread__default.default(_objectSpread__default.default({
     elevation: elevation
@@ -3752,8 +3745,8 @@ var StyledCardActions = styled__default.default.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
 })(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], function (_ref) {
-  var justifyContent = _ref.justifyContent;
-  return justifyContent;
+  var $justifyContent = _ref.$justifyContent;
+  return $justifyContent;
 }, spacings$6.right, spacings$6.left, spacings$6.top, spacings$6.bottom);
 var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref) {
   var children = _ref2.children,
@@ -3762,10 +3755,10 @@ var CardActions = /*#__PURE__*/react.forwardRef(function CardActions(_ref2, ref)
     _ref2$meta = _ref2.meta,
     meta = _ref2$meta === void 0 ? '' : _ref2$meta,
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$Y);
-  var justifyContent = alignRight ? 'flex-end' : 'flex-start';
+  var $justifyContent = alignRight ? 'flex-end' : 'flex-start';
   var props = _objectSpread__default.default({
     ref: ref,
-    justifyContent: justifyContent
+    $justifyContent: $justifyContent
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsxs(StyledCardActions, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -3798,8 +3791,8 @@ 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$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 $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$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,
@@ -3808,7 +3801,7 @@ var CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia(_ref2, ref) {
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$W);
   var props = _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
     ref: ref,
-    fullWidth: fullWidth
+    $fullWidth: fullWidth
   });
   return /*#__PURE__*/jsxRuntime.jsx(StyledCardMedia, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
     children: children
@@ -3892,8 +3885,8 @@ var StyledTopBar = styled__default.default(Paper).withConfig({
   componentId: "sc-1yj236q-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    sticky = _ref.sticky;
-  return styled.css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, edsUtils.bordersTemplate(theme.border), edsUtils.spacingsTemplate(theme.spacings), edsUtils.typographyTemplate(theme.typography), sticky && styled.css(["position:sticky;top:0;z-index:1100;"]));
+    $sticky = _ref.$sticky;
+  return styled.css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, edsUtils.bordersTemplate(theme.border), edsUtils.spacingsTemplate(theme.spacings), edsUtils.typographyTemplate(theme.typography), $sticky && styled.css(["position:sticky;top:0;z-index:1100;"]));
 });
 var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   var children = _ref2.children,
@@ -3915,7 +3908,7 @@ var TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, _objectSpread__default.default(_objectSpread__default.default({
       forwardedAs: 'header',
       elevation: elevation,
-      sticky: sticky
+      $sticky: sticky
     }, rest), {}, {
       children: children
     }))
@@ -4035,7 +4028,8 @@ var dialog = {
 var _excluded$P = ["children", "open", "onClose", "isDismissable", "dialogRef"];
 var StyledDialog = styled__default.default(Paper).attrs({
   'aria-labelledby': 'eds-dialog-title',
-  'aria-describedby': 'eds-dialog-customcontent'
+  'aria-describedby': 'eds-dialog-customcontent',
+  elevation: 'above_scrim'
 }).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
@@ -4096,9 +4090,7 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref3, ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledNativeDialog, {
       ref: combinedDialogRef,
       onMouseDown: handleDismiss,
-      children: open && /*#__PURE__*/jsxRuntime.jsx(StyledDialog, _objectSpread__default.default(_objectSpread__default.default({
-        elevation: "above_scrim"
-      }, props), {}, {
+      children: open && /*#__PURE__*/jsxRuntime.jsx(StyledDialog, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
         ref: ref,
         children: children
       }))
@@ -4157,8 +4149,8 @@ var StyledDialogContent = styled__default.default.div.withConfig({
   componentId: "sc-1tze18k-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    scrollable = _ref.scrollable;
-  return styled.css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, edsUtils.typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, scrollable && styled.css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+    $scrollable = _ref.$scrollable;
+  return styled.css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, edsUtils.typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, $scrollable && styled.css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
 });
 var StyledDivider$2 = styled__default.default(Divider).withConfig({
   displayName: "DialogContent__StyledDivider",
@@ -4170,7 +4162,7 @@ var DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent(_ref2,
     scrollable = _ref2$scrollable === void 0 ? false : _ref2$scrollable,
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$M);
   var props = _objectSpread__default.default({
-    scrollable: scrollable,
+    $scrollable: scrollable,
     ref: ref
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -4362,8 +4354,8 @@ var StyledTableOfContents = styled__default.default.nav.withConfig({
   componentId: "sc-q23s6y-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    sticky = _ref.sticky;
-  return styled.css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, sticky && styled.css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
+    $sticky = _ref.$sticky;
+  return styled.css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, $sticky && styled.css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
 });
 var TocList = styled__default.default(List$1).withConfig({
   displayName: "TableOfContents__TocList",
@@ -4392,8 +4384,7 @@ var TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents(_
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(StyledTableOfContents, _objectSpread__default.default(_objectSpread__default.default({
       ref: ref,
-      label: label,
-      sticky: sticky
+      $sticky: sticky
     }, rest), {}, {
       children: [/*#__PURE__*/jsxRuntime.jsx(TocLabel, {
         variant: "overline",
@@ -4627,16 +4618,16 @@ var Icon = styled__default.default(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
 })(["cursor:pointer;padding:1px;", " &:hover{", ";}", ""], edsUtils.bordersTemplate(enabled$2.entities.icon.border), function (_ref) {
-  var variant = _ref.variant;
-  switch (variant) {
+  var $variant = _ref.$variant;
+  switch ($variant) {
     case 'error':
       return styled.css(["background:", ";svg{fill:", ";}"], error$1.entities.icon.background, error$1.entities.icon.typography.color);
     default:
       return styled.css(["background:", ";svg{fill:", ";}"], enabled$2.entities.icon.states.hover.background, enabled$2.states.hover.typography.color);
   }
 }, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]);
+  var $disabled = _ref2.$disabled;
+  return $disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]);
 });
 
 var _excluded$G = ["children", "onDelete", "disabled", "onClick", "variant"];
@@ -4649,21 +4640,21 @@ var background$4 = enabled$1.background,
   border$2 = enabled$1.border,
   states$2 = enabled$1.states;
 var StyledChips = styled__default.default.div.attrs(function (_ref) {
-  var clickable = _ref.clickable,
-    deletable = _ref.deletable;
+  var $clickable = _ref.$clickable,
+    $deletable = _ref.$deletable;
   return {
-    tabIndex: clickable || deletable ? 0 : null,
-    role: clickable ? 'button' : null
+    tabIndex: $clickable || $deletable ? 0 : null,
+    role: $clickable ? 'button' : null
   };
 }).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:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.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;color:", ";svg{fill:", ";}}}"], states$2.hover.typography.color, states$2.hover.typography.color);
+  var $clickable = _ref2.$clickable;
+  return $clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states$2.hover.typography.color, states$2.hover.typography.color);
 }, function (_ref3) {
-  var variant = _ref3.variant;
-  switch (variant) {
+  var $variant = _ref3.$variant;
+  switch ($variant) {
     case 'active':
       return styled.css(["background:", ";"], states$2.active.background);
     case 'error':
@@ -4672,14 +4663,14 @@ var StyledChips = styled__default.default.div.attrs(function (_ref) {
       return '';
   }
 }, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$4, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
+  var $disabled = _ref4.$disabled;
+  return $disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$4, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color);
 }, function (_ref5) {
-  var deletable = _ref5.deletable;
-  return deletable && styled.css(["padding-right:4px;"]);
+  var $deletable = _ref5.$deletable;
+  return $deletable && styled.css(["padding-right:4px;"]);
 }, function (_ref6) {
-  var onlyChild = _ref6.onlyChild;
-  return onlyChild ? styled.css(["padding-left:8px;"]) : '';
+  var $onlyChild = _ref6.$onlyChild;
+  return $onlyChild ? styled.css(["padding-left:8px;"]) : '';
 });
 var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
   var children = _ref7.children,
@@ -4697,11 +4688,11 @@ var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
   var onlyChild = typeof children === 'string';
   var chipProps = _objectSpread__default.default(_objectSpread__default.default({}, other), {}, {
     ref: ref,
-    disabled: disabled,
-    deletable: deletable,
-    clickable: clickable,
-    onlyChild: onlyChild,
-    variant: variant
+    $disabled: disabled,
+    $deletable: deletable,
+    $clickable: clickable,
+    $onlyChild: onlyChild,
+    $variant: variant
   });
   var handleKeyPress = function handleKeyPress(event) {
     var _ref8 = event,
@@ -4736,12 +4727,12 @@ var Chip = /*#__PURE__*/react.forwardRef(function Chip(_ref7, ref) {
     onClick: function onClick(event) {
       return clickable && handleClick(event);
     },
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyPress,
     children: [resizedChildren, onDelete && /*#__PURE__*/jsxRuntime.jsx(Icon, {
       name: "close",
       title: "close",
-      disabled: disabled,
-      variant: variant,
+      $disabled: disabled,
+      $variant: variant,
       onClick: onDeleteClick,
       size: 16
     })]
@@ -4767,15 +4758,15 @@ var StyledAvatar = styled__default.default.div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
 })(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], edsUtils.bordersTemplate(avatar.border), function (_ref) {
-  var size = _ref.size;
-  return styled.css(["height:", "px;width:", "px;"], size, size);
+  var $size = _ref.$size;
+  return styled.css(["height:", "px;width:", "px;"], $size, $size);
 });
 var StyledImage = styled__default.default.img.withConfig({
   displayName: "Avatar__StyledImage",
   componentId: "sc-r7n7on-1"
 })(["height:100%;text-align:center;color:transparent;", ";"], function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity);
+  var $disabled = _ref2.$disabled;
+  return $disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity);
 });
 var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
   var _ref3$src = _ref3.src,
@@ -4787,14 +4778,13 @@ var Avatar = /*#__PURE__*/react.forwardRef(function Avatar(_ref3, ref) {
     disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
     rest = _objectWithoutProperties__default.default(_ref3, _excluded$F);
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread__default.default(_objectSpread__default.default({
-    size: size,
-    disabled: disabled,
+    $size: size,
     ref: ref
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledImage, {
       src: src,
       alt: alt,
-      disabled: disabled
+      $disabled: disabled
     })
   }));
 });
@@ -4820,10 +4810,12 @@ var Search = /*#__PURE__*/react.forwardRef(function Search(_ref, ref) {
     showClear = _useState2[0],
     setShowClear = _useState2[1];
   react.useEffect(function () {
-    if (rest.value) {
+    if (rest.disabled) {
+      setShowClear(false);
+    } else if (rest.value) {
       setShowClear(Boolean(rest.value));
     }
-  }, [rest.value]);
+  }, [rest.value, rest.disabled]);
   var clearInputValue = function clearInputValue() {
     var input = inputRef.current;
     var clearedValue = '';
@@ -5076,17 +5068,17 @@ var wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;
 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,
+    $valA = _ref.$valA,
+    $valB = _ref.$valB,
+    $disabled = _ref.$disabled,
     style = _ref.style;
   return {
     style: _objectSpread__default.default({
-      '--a': valA,
-      '--b': valB,
+      '--a': $valA,
+      '--b': $valB,
       '--min': $min,
       '--max': $max,
-      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+      '--background': $disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
     }, style)
   };
 }).withConfig({
@@ -5272,11 +5264,11 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
       ref: ref,
       role: "group",
       "aria-labelledby": getAriaLabelledby(),
-      valA: sliderValue[0],
-      valB: sliderValue[1],
+      $valA: sliderValue[0],
+      $valB: sliderValue[1],
       $max: max,
       $min: min,
-      disabled: disabled,
+      $disabled: disabled,
       onMouseMove: findClosestRange,
       onMouseDown: handleDragging,
       onMouseUp: handleDragging,
@@ -5457,13 +5449,13 @@ var StyledSnackbar = styled__default.default(Paper).withConfig({
   componentId: "sc-ac6no8-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    placement = _ref.placement;
+    $placement = _ref.$placement;
   return styled.css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:1400;", " a,button{color:", ";}"], theme.background, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), theme.minHeight, {
-    top: placement.includes('top') ? theme.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
-    bottom: placement.includes('bottom') ? theme.spacings.bottom : undefined,
-    right: placement.includes('right') ? theme.spacings.right : undefined,
-    left: placement.includes('left') ? theme.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
-    transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
+    top: $placement.includes('top') ? theme.spacings.top : $placement === 'left' || $placement === 'right' ? '50%' : undefined,
+    bottom: $placement.includes('bottom') ? theme.spacings.bottom : undefined,
+    right: $placement.includes('right') ? theme.spacings.right : undefined,
+    left: $placement.includes('left') ? theme.spacings.left : $placement === 'top' || $placement === 'bottom' ? '50%' : undefined,
+    transform: $placement === 'left' || $placement === 'right' ? 'translateY(-50%)' : $placement === 'top' || $placement === 'bottom' ? 'translateX(-50%)' : undefined
   }, theme.entities.button.typography.color);
 });
 var Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar(_ref2, ref) {
@@ -5495,7 +5487,7 @@ var Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar(_ref2, ref) {
   }, [open, autoHideDuration, setVisible, onClose]);
   var props = _objectSpread__default.default({
     ref: ref,
-    placement: placement
+    $placement: placement
   }, rest);
   var _useEds = useEds(),
     density = _useEds.density;
@@ -5901,8 +5893,8 @@ var StyledBannerIcon = styled__default.default.span.withConfig({
   componentId: "sc-7ow3zc-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    variant = _ref.variant;
-  return styled.css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], edsUtils.bordersTemplate(theme.entities.icon.border), variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
+    $variant = _ref.$variant;
+  return styled.css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], edsUtils.bordersTemplate(theme.entities.icon.border), $variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
 });
 var BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref) {
   var children = _ref2.children,
@@ -5919,7 +5911,7 @@ var BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref) {
     ref: ref
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsx(StyledBannerIcon, _objectSpread__default.default(_objectSpread__default.default({
-    variant: variant
+    $variant: variant
   }, props), {}, {
     children: childrenWithColor
   }));
@@ -5931,8 +5923,8 @@ var Content$1 = styled__default.default.div.withConfig({
   componentId: "sc-1ju451i-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    hasIcon = _ref.hasIcon;
-  return styled.css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], edsUtils.spacingsTemplate(theme.spacings), hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
+    $hasIcon = _ref.$hasIcon;
+  return styled.css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], edsUtils.spacingsTemplate(theme.spacings), $hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
 });
 var NonMarginDivider = styled__default.default(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
@@ -5965,7 +5957,7 @@ var Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
       elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
-        hasIcon: hasIcon,
+        $hasIcon: hasIcon,
         children: children
       }), /*#__PURE__*/jsxRuntime.jsx(NonMarginDivider, {
         color: "light"
@@ -5998,8 +5990,8 @@ var StyledBannerActions = styled__default.default.div.withConfig({
   componentId: "sc-1o38ds2-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    placement = _ref.placement;
-  return styled.css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, placement === 'bottom' ? '1/-1' : 'auto', placement === 'bottom' && {
+    $placement = _ref.$placement;
+  return styled.css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, $placement === 'bottom' ? '1/-1' : 'auto', $placement === 'bottom' && {
     marginTop: theme.spacings.top,
     marginLeft: '0'
   });
@@ -6013,7 +6005,7 @@ var BannerActions = /*#__PURE__*/react.forwardRef(function BannerActions(_ref2,
     ref: ref
   }, rest);
   return /*#__PURE__*/jsxRuntime.jsx(StyledBannerActions, _objectSpread__default.default(_objectSpread__default.default({
-    placement: placement
+    $placement: placement
   }, props), {}, {
     children: children
   }));
@@ -6145,8 +6137,8 @@ var Svg$4 = styled__default.default.svg.withConfig({
   displayName: "CircularProgress__Svg",
   componentId: "sc-hib054-0"
 })(["display:inline-block;", ";"], function (_ref) {
-  var variant = _ref.variant;
-  return variant === 'indeterminate' ? styled.css(["animation:", " 1.4s linear infinite;"], indeterminate$1) : styled.css(["transform:rotate(-90deg);"]);
+  var $variant = _ref.$variant;
+  return $variant === 'indeterminate' ? styled.css(["animation:", " 1.4s linear infinite;"], indeterminate$1) : styled.css(["transform:rotate(-90deg);"]);
 });
 var SrOnlyOutput = styled__default.default.output.withConfig({
   displayName: "CircularProgress__SrOnlyOutput",
@@ -6188,7 +6180,7 @@ var CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress(_
   var trackStyle = {};
   var props = _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
     ref: ref,
-    variant: variant
+    $variant: variant
   });
   var token = getToken(color);
   var _useState = react.useState(0),
@@ -6265,9 +6257,9 @@ var Svg$3 = styled__default.default.svg.withConfig({
   displayName: "StarProgress__Svg",
   componentId: "sc-c0byj9-0"
 })(["fill:", ";", ""], token.background, function (_ref) {
-  var variant = _ref.variant,
-    progress = _ref.progress;
-  return variant === 'indeterminate' ? styled.css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : styled.css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused');
+  var $variant = _ref.$variant,
+    $progress = _ref.$progress;
+  return $variant === 'indeterminate' ? styled.css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : styled.css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, $progress > 90 ? 'running' : 'paused', $progress > 80 ? 'running' : 'paused', $progress > 60 ? 'running' : 'paused', $progress > 40 ? 'running' : 'paused', $progress > 20 ? 'running' : 'paused', $progress <= 20 ? 'running' : 'paused');
 });
 var StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress(_ref2, ref) {
   var _ref2$variant = _ref2.variant,
@@ -6282,8 +6274,8 @@ var StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress(_ref2, re
   var width = size;
   var props = _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
     ref: ref,
-    variant: variant,
-    progress: progress
+    $variant: variant,
+    $progress: progress
   });
   if (variant === 'determinate') {
     if (value !== undefined) {
@@ -6422,18 +6414,18 @@ var spacings = breadcrumbs.spacings,
 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;flex-wrap:", ";"], function (_ref) {
+})(["list-style:none;display:flex;gap:0.45em 0;align-items:center;padding:0;margin:0;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;min-width:30px;"]);
+})(["display:block;min-width:30px;"]);
 var Separator = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
-})(["color:", ";", ""], typography$5.color, edsUtils.spacingsTemplate(spacings));
+})(["color:", ";", " display:block;line-height:1;"], typography$5.color, edsUtils.spacingsTemplate(spacings));
 var Collapsed = styled__default.default(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
@@ -6473,7 +6465,7 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref2, re
           role: "button",
           variant: "body_short",
           onClick: handleExpandClick,
-          onKeyPress: handleExpandClick,
+          onKeyDown: handleExpandClick,
           tabIndex: 0,
           children: "\u2026"
         })
@@ -6520,7 +6512,7 @@ var states = breadcrumbs.states,
 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:", ";width:100%;", ""], 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:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography$4.color, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return styled.css({
     maxWidth: $maxWidth
@@ -7137,15 +7129,15 @@ var pagination = {
   }
 };
 
-var _excluded$h = ["page", "selected", "onClick"];
+var _excluded$h = ["$page", "selected", "onClick"];
 var PaginationItem = /*#__PURE__*/react.forwardRef(function PaginationItem(_ref, ref) {
-  var page = _ref.page,
+  var $page = _ref.$page,
     selected = _ref.selected,
     onClick = _ref.onClick,
     rest = _objectWithoutProperties__default.default(_ref, _excluded$h);
   var props = _objectSpread__default.default({
     ref: ref,
-    page: page,
+    $page: $page,
     selected: selected
   }, rest);
   var background = selected ? pagination.entities.item.states.active.background : null;
@@ -7156,7 +7148,7 @@ var PaginationItem = /*#__PURE__*/react.forwardRef(function PaginationItem(_ref,
     variant: "ghost_icon",
     onClick: onClick ? onClick : undefined
   }, props), {}, {
-    children: page
+    children: $page
   }));
 });
 
@@ -7210,8 +7202,8 @@ var Navigation = styled__default.default.nav.withConfig({
   displayName: "Pagination__Navigation",
   componentId: "sc-13cpp3o-0"
 })(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], function (_ref) {
-  var withItemIndicator = _ref.withItemIndicator;
-  return withItemIndicator ? pagination.spacings.left : 0;
+  var $withItemIndicator = _ref.$withItemIndicator;
+  return $withItemIndicator ? pagination.spacings.left : 0;
 });
 var OrderedList = styled__default.default.ol.withConfig({
   displayName: "Pagination__OrderedList",
@@ -7275,7 +7267,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
   }, [itemsPerPage]);
   var props = _objectSpread__default.default({
     ref: ref,
-    withItemIndicator: withItemIndicator
+    $withItemIndicator: withItemIndicator
   }, rest);
   var pagination = /*#__PURE__*/jsxRuntime.jsx(Navigation, _objectSpread__default.default(_objectSpread__default.default({
     "aria-label": "pagination"
@@ -7304,7 +7296,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
           children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, {
             "aria-label": getAriaLabel(page, activePage),
             "aria-current": activePage,
-            page: page,
+            $page: page,
             selected: page === activePage,
             onClick: function onClick(event) {
               onPageChange(event, page);
@@ -7530,11 +7522,11 @@ var checkbox = {
 
 var _excluded$e = ["disabled", "indeterminate", "style", "className"];
 var StyledPath$1 = styled__default.default.path.attrs(function (_ref) {
-  var icon = _ref.icon;
+  var $icon = _ref.$icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    d: icon.svgPathData
+    d: $icon.svgPathData
   };
 }).withConfig({
   displayName: "Input__StyledPath",
@@ -7551,8 +7543,8 @@ var Input$3 = styled__default.default.input.attrs(function (_ref2) {
   componentId: "sc-rqj7qf-1"
 })(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
   var theme = _ref3.theme,
-    iconSize = _ref3.iconSize;
-  return parseFloat(theme.clickbound.height) / iconSize;
+    $iconSize = _ref3.$iconSize;
+  return parseFloat(theme.clickbound.height) / $iconSize;
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   return disabled ? 'not-allowed' : 'pointer';
@@ -7581,7 +7573,7 @@ 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;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) {
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;", " &::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) {
@@ -7618,7 +7610,7 @@ var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref11,
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(InputWrapper$1, _objectSpread__default.default(_objectSpread__default.default({}, inputWrapperProps), {}, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Input$3, _objectSpread__default.default({
-        iconSize: iconSize
+        $iconSize: iconSize
       }, inputProps)), indeterminate ? /*#__PURE__*/jsxRuntime.jsx(Svg$1, {
         width: iconSize,
         height: iconSize,
@@ -7626,7 +7618,7 @@ var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref11,
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
-          icon: edsIcons.checkbox_indeterminate,
+          $icon: edsIcons.checkbox_indeterminate,
           name: "indeterminate"
         })
       }) : /*#__PURE__*/jsxRuntime.jsxs(Svg$1, {
@@ -7636,10 +7628,10 @@ var CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref11,
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
-          icon: edsIcons.checkbox,
+          $icon: edsIcons.checkbox,
           name: "checked"
         }), /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
-          icon: edsIcons.checkbox_outline,
+          $icon: edsIcons.checkbox_outline,
           name: "not-checked"
         })]
       })]
@@ -7652,8 +7644,8 @@ var StyledLabel$2 = styled__default.default.label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
 })(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
+  var $disabled = _ref.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 });
 var LabelText$1 = styled__default.default.span.withConfig({
   displayName: "Checkbox__LabelText",
@@ -7668,7 +7660,7 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox(_ref2, ref) {
     style = _ref2.style,
     rest = _objectWithoutProperties__default.default(_ref2, _excluded$d);
   return label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$2, {
-    disabled: disabled,
+    $disabled: disabled,
     className: className,
     style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxInput, _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
@@ -7772,8 +7764,8 @@ var Input$2 = styled__default.default.input.attrs(function (_ref) {
   componentId: "sc-we59oz-0"
 })(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], function (_ref2) {
   var theme = _ref2.theme,
-    iconSize = _ref2.iconSize;
-  return parseFloat(theme.clickbound.height) / iconSize;
+    $iconSize = _ref2.$iconSize;
+  return parseFloat(theme.clickbound.height) / $iconSize;
 }, function (_ref3) {
   var disabled = _ref3.disabled;
   return disabled ? 'not-allowed' : 'pointer';
@@ -7788,15 +7780,15 @@ var StyledLabel$1 = styled__default.default.label.withConfig({
   displayName: "Radio__StyledLabel",
   componentId: "sc-we59oz-1"
 })(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref6) {
-  var disabled = _ref6.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 });
 var StyledPath = styled__default.default.path.attrs(function (_ref7) {
-  var icon = _ref7.icon;
+  var $icon = _ref7.$icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    d: icon.svgPathData
+    d: $icon.svgPathData
   };
 }).withConfig({
   displayName: "Radio__StyledPath",
@@ -7824,7 +7816,7 @@ 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;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) {
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;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) {
@@ -7859,10 +7851,10 @@ var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref13, ref) {
       fill: fill,
       "aria-hidden": true,
       children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath, {
-        icon: edsIcons.radio_button_selected,
+        $icon: edsIcons.radio_button_selected,
         name: "selected"
       }), /*#__PURE__*/jsxRuntime.jsx(StyledPath, {
-        icon: edsIcons.radio_button_unselected,
+        $icon: edsIcons.radio_button_unselected,
         name: "unselected"
       })]
     });
@@ -7870,7 +7862,7 @@ var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref13, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$1, {
-      disabled: disabled,
+      $disabled: disabled,
       className: className,
       style: style,
       children: [/*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
@@ -7878,7 +7870,7 @@ var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref13, ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
           ref: ref,
           disabled: disabled,
-          iconSize: iconSize
+          $iconSize: iconSize
         })), renderSVG]
       }), /*#__PURE__*/jsxRuntime.jsx(LabelText, {
         children: label
@@ -7890,7 +7882,7 @@ var Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref13, ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
         ref: ref,
         disabled: disabled,
-        iconSize: iconSize
+        $iconSize: iconSize
       })), renderSVG]
     })
   });
@@ -7923,7 +7915,7 @@ var BaseInput = styled__default.default.input.attrs(function (_ref2) {
 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;place-items:center;"]);
+})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;isolation:isolate;"]);
 
 var _excluded$b = ["disabled", "className", "style"];
 var Input$1 = styled__default.default(BaseInput).withConfig({
@@ -7942,11 +7934,11 @@ var Track$1 = styled__default.default.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
 })(function (_ref2) {
-  var isDisabled = _ref2.isDisabled,
+  var $isDisabled = _ref2.$isDisabled,
     _ref2$theme = _ref2.theme,
     states = _ref2$theme.states,
     track = _ref2$theme.entities.track;
-  return styled.css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background);
+  return styled.css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, $isDisabled ? states.disabled.background : track.states.disabled.background);
 });
 var Handle$1 = styled__default.default.span.withConfig({
   displayName: "SwitchSmall__Handle",
@@ -7968,7 +7960,7 @@ var SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall(_ref4, ref)
       disabled: disabled
     })), /*#__PURE__*/jsxRuntime.jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Track$1, {
-        isDisabled: disabled
+        $isDisabled: disabled
       }), /*#__PURE__*/jsxRuntime.jsx(Handle$1, {})]
     })]
   });
@@ -7988,11 +7980,11 @@ var Track = styled__default.default.span.withConfig({
   displayName: "SwitchDefault__Track",
   componentId: "sc-16ym5pn-1"
 })(function (_ref2) {
-  var isDisabled = _ref2.isDisabled,
+  var $isDisabled = _ref2.$isDisabled,
     _ref2$theme = _ref2.theme,
     states = _ref2$theme.states,
     track = _ref2$theme.entities.track;
-  return styled.css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], edsUtils.bordersTemplate(track.border), track.width, track.height, track.background, isDisabled && {
+  return styled.css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], edsUtils.bordersTemplate(track.border), track.width, track.height, track.background, $isDisabled && {
     backgroundColor: states.disabled.background
   });
 });
@@ -8000,11 +7992,11 @@ var Handle = styled__default.default.span.withConfig({
   displayName: "SwitchDefault__Handle",
   componentId: "sc-16ym5pn-2"
 })(function (_ref3) {
-  var isDisabled = _ref3.isDisabled,
+  var $isDisabled = _ref3.$isDisabled,
     _ref3$theme = _ref3.theme,
     states = _ref3$theme.states,
     handle = _ref3$theme.entities.handle;
-  return styled.css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
+  return styled.css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, $isDisabled && {
     backgroundColor: states.disabled.background
   }, handle.boxShadow, handle.width, handle.height);
 });
@@ -8021,9 +8013,9 @@ var SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault(_ref4,
       disabled: disabled
     })), /*#__PURE__*/jsxRuntime.jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Track, {
-        isDisabled: disabled
+        $isDisabled: disabled
       }), /*#__PURE__*/jsxRuntime.jsx(Handle, {
-        isDisabled: disabled
+        $isDisabled: disabled
       })]
     })]
   });
@@ -8152,11 +8144,11 @@ 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;gap:", ";"], function (_ref) {
-  var isDisabled = _ref.isDisabled;
-  return isDisabled ? 'not-allowed' : 'pointer';
+  var $isDisabled = _ref.$isDisabled;
+  return $isDisabled ? 'not-allowed' : 'pointer';
 }, function (_ref2) {
-  var size = _ref2.size;
-  return size === 'small' ? '12px' : '8px';
+  var $size = _ref2.$size;
+  return $size === 'small' ? '12px' : '8px';
 });
 var Label$1 = styled__default.default.span.withConfig({
   displayName: "Switch__Label",
@@ -8183,8 +8175,8 @@ var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref4, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel, {
-      size: size,
-      isDisabled: disabled,
+      $size: size,
+      $isDisabled: disabled,
       className: className,
       style: style,
       children: [size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, _objectSpread__default.default(_objectSpread__default.default({
@@ -8322,25 +8314,25 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   }
 });
 
-var _excluded$8 = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
+var _excluded$8 = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "highlighted", "onClick", "aria-selected"];
 var StyledListItem = styled__default.default.li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    highlighted = _ref.highlighted,
-    active = _ref.active,
-    isdisabled = _ref.isdisabled;
-  var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
-  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
+    $highlighted = _ref.$highlighted,
+    $active = _ref.$active,
+    $isdisabled = _ref.$isdisabled;
+  var backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
+  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
 var Label = styled__default.default.span.withConfig({
   displayName: "Option__Label",
   componentId: "sc-1ly11zu-1"
 })(function (_ref2) {
   var theme = _ref2.theme,
-    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');
+    $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');
 });
 function AutocompleteOptionInner(props, ref) {
   var value = props.value,
@@ -8349,19 +8341,18 @@ function AutocompleteOptionInner(props, ref) {
     isSelected = props.isSelected,
     isDisabled = props.isDisabled,
     multiline = props.multiline,
+    highlighted = props.highlighted,
     _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',
+    $isdisabled: isDisabled ? 'true' : 'false',
+    $highlighted: highlighted,
     "aria-hidden": isDisabled,
-    active: !multiple && isSelected ? 'true' : 'false',
+    $active: !multiple && isSelected ? 'true' : 'false',
     onClick: function onClick(e) {
-      //timeout: workaround for "Maximum update depth exceeded" error that happens when touch input
-      setTimeout(function () {
-        !isDisabled && _onClick(e);
-      }, 0);
+      !isDisabled && _onClick(e);
     },
     "aria-selected": multiple ? isSelected : ariaSelected
   }, other), {}, {
@@ -8375,7 +8366,7 @@ function AutocompleteOptionInner(props, ref) {
     }), optionComponent ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: optionComponent
     }) : /*#__PURE__*/jsxRuntime.jsx(Label, {
-      multiline: multiline,
+      $multiline: multiline,
       children: value
     })]
   }));
@@ -8586,6 +8577,7 @@ function AutocompleteInner(props, ref) {
       return item;
     }
     try {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item === null || item === void 0 ? void 0 : item.toString();
     } catch (error) {
       throw new Error('Unable to find label, make sure your are using options as documented');
@@ -8866,12 +8858,9 @@ function AutocompleteInner(props, ref) {
       })]
     }))
   }));
-  var inputProps = getInputProps(
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  getDropdownProps({
+  var inputProps = getInputProps(getDropdownProps({
     preventKeyAction: multiple ? isOpen : undefined,
     disabled: disabled,
-    ref: refs.setReference,
     onChange: function onChange(e) {
       var _e$currentTarget;
       return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
@@ -8889,6 +8878,7 @@ function AutocompleteInner(props, ref) {
         meta: meta,
         disabled: disabled
       })), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+        ref: refs.setReference,
         children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({}, inputProps), {}, {
           placeholder: placeholderText,
           readOnly: readOnly,
@@ -9297,6 +9287,7 @@ var SideBarToggle = /*#__PURE__*/react.forwardRef(function SideBarToggle(_ref2,
         onClick: function onClick() {
           return setIsOpen(!isOpen);
         },
+        "aria-label": isOpen ? 'Collapse' : 'Expand',
         children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
           size: 24,
           data: isOpen ? edsIcons.collapse : edsIcons.expand,