@equinor/eds-core-react 0.21.0 → 0.23.0-dev.20221003

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

@@ -8,8 +8,8 @@ var edsTokens = require('@equinor/eds-tokens');
 var edsUtils = require('@equinor/eds-utils');
 var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
-var ReactDom = require('react-dom');
 var reactDomInteractions = require('@floating-ui/react-dom-interactions');
+var ReactDom = require('react-dom');
 var downshift = require('downshift');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -82,29 +82,29 @@ const {
 } = edsTokens.tokens;
 const button = {
   background: 'transparent',
-  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
+  height: `var(--eds_button__height, ${buttonHeight})`,
   typography: { ...buttonTypography,
     textAlign: 'center',
-    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
+    fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
   },
   border: {
     type: 'border',
-    width: "var(--eds_button__border_width, 1px)",
+    width: `var(--eds_button__border_width, 1px)`,
     color: 'transparent',
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$2, ")"),
+    radius: `var(--eds_button__radius, ${buttonBorderRadius$2})`,
     style: 'solid'
   },
   spacings: {
     top: 'var(--eds_button__padding_y, 0)',
     bottom: 'var(--eds_button__padding_y, 0)',
-    left: "var(--eds_button__padding_x, ".concat(medium$6, ")"),
-    right: "var(--eds_button__padding_x, ".concat(medium$6, ")")
+    left: `var(--eds_button__padding_x, ${medium$6})`,
+    right: `var(--eds_button__padding_x, ${medium$6})`
   },
   clickbound: {
     height: clicboundHeight$2,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: `${(parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1}px`,
       left: '0'
     }
   },
@@ -120,7 +120,7 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$2, ")"),
+        radius: `var(--eds_button__radius, ${buttonBorderRadius$2})`,
         style: 'solid'
       }
     },
@@ -149,7 +149,7 @@ const button = {
   },
   modes: {
     compact: {
-      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
+      height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
       spacings: {
         top: 'var(--eds_button__padding_y_compact, 0)',
         bottom: 'var(--eds_button__padding_y_compact, 0)'
@@ -158,7 +158,7 @@ const button = {
         height: compactClickboundHeight$2,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: `${(parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1}px`,
           left: '0'
         }
       }
@@ -386,6 +386,8 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
   }, lObj, rObj);
 });
 
+var mergeDeepRight$1 = mergeDeepRight;
+
 const {
   colors: {
     text: {
@@ -420,7 +422,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$a = mergeDeepRight(button, {
+const primary$a = mergeDeepRight$1(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -430,7 +432,7 @@ const primary$a = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor$8,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$1, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius$1})`
   },
   states: {
     hover: {
@@ -438,7 +440,7 @@ const primary$a = mergeDeepRight(button, {
     }
   }
 });
-const secondary$5 = mergeDeepRight(primary$a, {
+const secondary$5 = mergeDeepRight$1(primary$a, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -452,7 +454,7 @@ const secondary$5 = mergeDeepRight(primary$a, {
     }
   }
 });
-const danger$6 = mergeDeepRight(primary$a, {
+const danger$6 = mergeDeepRight$1(primary$a, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -505,7 +507,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight(button, {
+const primary$9 = mergeDeepRight$1(button, {
   typography: {
     color: primaryColor$7
   },
@@ -514,7 +516,7 @@ const primary$9 = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor$7,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {
@@ -534,7 +536,7 @@ const primary$9 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight(primary$9, {
+const secondary$4 = mergeDeepRight$1(primary$9, {
   typography: {
     color: secondaryColor$2
   },
@@ -553,7 +555,7 @@ const secondary$4 = mergeDeepRight(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight(primary$9, {
+const danger$5 = mergeDeepRight$1(primary$9, {
   typography: {
     color: dangerColor$2
   },
@@ -606,7 +608,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight(button, {
+const primary$8 = mergeDeepRight$1(button, {
   typography: {
     color: primaryColor$6
   },
@@ -625,7 +627,7 @@ const primary$8 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight(primary$8, {
+const secondary$3 = mergeDeepRight$1(primary$8, {
   typography: {
     color: secondaryColor$1
   },
@@ -638,7 +640,7 @@ const secondary$3 = mergeDeepRight(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight(primary$8, {
+const danger$4 = mergeDeepRight$1(primary$8, {
   typography: {
     color: dangerColor$1
   },
@@ -692,7 +694,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight(button, {
+const primary$7 = mergeDeepRight$1(button, {
   height: shape$4.icon_button.minHeight,
   width: shape$4.icon_button.minWidth,
   typography: {
@@ -711,7 +713,7 @@ const primary$7 = mergeDeepRight(button, {
     width: clicboundHeight$1,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2, "px")
+      left: `${(parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2}px`
     }
   },
   states: {
@@ -730,7 +732,7 @@ const primary$7 = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: "-".concat(parseInt(focusOutlineWidth$8), "px")
+        offset: `-${parseInt(focusOutlineWidth$8)}px`
       }
     }
   },
@@ -742,13 +744,13 @@ const primary$7 = mergeDeepRight(button, {
         width: compactClickboundHeight$1,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }
   }
 });
-const secondary$2 = mergeDeepRight(primary$7, {
+const secondary$2 = mergeDeepRight$1(primary$7, {
   typography: {
     color: secondaryColor
   },
@@ -761,7 +763,7 @@ const secondary$2 = mergeDeepRight(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight(primary$7, {
+const danger$3 = mergeDeepRight$1(primary$7, {
   typography: {
     color: dangerColor
   },
@@ -797,7 +799,7 @@ const contained_icon = {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`
     }
   },
   states: {
@@ -816,15 +818,15 @@ const contained_icon = {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }
   }
 };
-const primary$6 = mergeDeepRight(primary$a, contained_icon);
-const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
-const danger$2 = mergeDeepRight(danger$6, contained_icon);
+const primary$6 = mergeDeepRight$1(primary$a, contained_icon);
+const secondary$1 = mergeDeepRight$1(secondary$5, contained_icon);
+const danger$2 = mergeDeepRight$1(danger$6, contained_icon);
 
 const token$5 = {
   primary: {
@@ -873,16 +875,17 @@ const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth(_re
 });
 
 const initalState$3 = {
+  /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/react.createContext(initalState$3);
 const EdsProvider = _ref => {
   let {
     children,
-    density = 'comfortable'
+    density
   } = _ref;
   const [state, setState] = react.useState({ ...initalState$3,
-    density
+    density: density || 'comfortable'
   });
 
   const setDensity = density => setState(prevState => ({ ...prevState,
@@ -895,7 +898,8 @@ const EdsProvider = _ref => {
     }
   }, [density, state.density]);
   const value = {
-    density: state.density
+    density: state.density,
+    setDensity
   };
   return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
     value: value,
@@ -1048,9 +1052,60 @@ const ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, re
   });
 });
 
+const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
+  let {
+    children,
+    multiple,
+    selectedIndexes,
+    onChange,
+    ...props
+  } = _ref;
+  const [pickedIndexes, setPickedIndexes] = react.useState(selectedIndexes || []);
+  react.useEffect(() => {
+    if (Array.isArray(selectedIndexes)) {
+      setPickedIndexes(selectedIndexes);
+    }
+  }, [selectedIndexes]);
+  const updatedChildren = react.Children.map(children, (child, index) => {
+    const isSelected = pickedIndexes.includes(index);
+    const childElement = child;
+
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Button$1) {
+      const buttonProps = {
+        'aria-pressed': isSelected ? true : undefined,
+        variant: isSelected ? 'contained' : 'outlined',
+        onClick: e => {
+          var _childElement$props, _childElement$props$o;
+
+          (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+          let updatedSelection = [index];
+
+          if (multiple) {
+            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
+          }
+
+          setPickedIndexes(updatedSelection);
+
+          if (onChange) {
+            onChange(updatedSelection);
+          }
+        }
+      };
+      return /*#__PURE__*/react.cloneElement(child, buttonProps);
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonGroup, {
+    ref: ref,
+    ...props,
+    children: updatedChildren
+  });
+});
+
 const Button = Button$1;
 Button.Group = ButtonGroup;
+Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';
+Button.Toggle.displayName = 'Button.Toggle';
 
 const {
   typography: typography$i,
@@ -1158,7 +1213,7 @@ const toVariantName = function (variant) {
   let bold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   let italic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let link = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  return "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : '');
+  return `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
 };
 
 const StyledTypography$1 = styled__default["default"].p.withConfig({
@@ -1207,7 +1262,7 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref)
   const typography = findTypography(variantName, group);
 
   if (typeof typography === 'undefined') {
-    throw new Error("Typography variant not found for variant \"".concat(variantName, "\" (\"").concat(variant, "\") & group \"").concat(group || '', "\""));
+    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledTypography$1, {
@@ -1293,12 +1348,12 @@ const tableCell = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")")
+    left: `var(--eds_table__cell__padding_x, ${medium$5})`,
+    right: `var(--eds_table__cell__padding_x, ${medium$5})`
   },
   typography: { ...cellTypography$1,
     color: typographyColor$1,
-    fontSize: "var(--eds_table__font_size, ".concat(cellTypography$1.fontSize, ")")
+    fontSize: `var(--eds_table__font_size, ${cellTypography$1.fontSize})`
   },
   states: {
     active: {
@@ -1344,8 +1399,8 @@ const tableCell = {
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")")
+        left: `var(--eds_table__cell__padding_x_compact, ${medium$5})`,
+        right: `var(--eds_table__cell__padding_x_compact, ${medium$5})`
       }
     }
   },
@@ -1372,7 +1427,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight(token, token.variants.numeric);
+      return mergeDeepRight$1(token, token.variants.numeric);
 
     default:
       return token;
@@ -1519,7 +1574,7 @@ const token$4 = {
   },
   typography: { ...cellTypography,
     color: typographyColor,
-    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
+    fontSize: `var(--eds_table__font_size, ${cellTypography.fontSize})`
   },
   border: {
     type: 'bordergroup',
@@ -1533,8 +1588,8 @@ const token$4 = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")")
+    left: `var(--eds_table__cell__padding_x, ${medium$4})`,
+    right: `var(--eds_table__cell__padding_x, ${medium$4})`
   },
   states: {
     active: {
@@ -1579,8 +1634,8 @@ const token$4 = {
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")")
+        left: `var(--eds_table__cell__padding_x_compact, ${medium$4})`,
+        right: `var(--eds_table__cell__padding_x_compact, ${medium$4})`
       }
     }
   }
@@ -1825,17 +1880,6 @@ const {
     }
   }
 } = edsTokens.tokens;
-const dividerHeight = 1;
-
-const reduceByValue = subtractValue => valueWithUnit => {
-  const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
-  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
-};
-
-const reduceValueByDividerHeight = reduceByValue(dividerHeight);
-const baseDivider$1 = {
-  height: "".concat(dividerHeight, "px")
-};
 const divider$1 = {
   lighter: {
     background: lighter
@@ -1847,47 +1891,54 @@ const divider$1 = {
     background: mediumColor
   }
 };
-const small$7 = { ...baseDivider$1,
+const small$7 = {
   spacings: {
     top: spacingSmall$5,
-    bottom: reduceValueByDividerHeight(spacingSmall$5)
+    bottom: spacingSmall$5
   }
 };
-const medium$3 = { ...baseDivider$1,
+const medium$3 = {
   spacings: {
     top: spacingMedium$9,
-    bottom: reduceValueByDividerHeight(spacingMedium$9)
+    bottom: spacingMedium$9
   }
 };
 
 var tokens$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  baseDivider: baseDivider$1,
   divider: divider$1,
   small: small$7,
   medium: medium$3
 });
 
 const {
-  divider,
-  baseDivider
+  divider
 } = tokens$7;
 const StyledDivider$3 = styled__default["default"].hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
-})(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref, ref) {
+})(_ref => {
+  let {
+    backgroundColor,
+    marginTop,
+    marginBottom,
+    dividerHeight
+  } = _ref;
+  return styled.css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
+});
+const Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
   let {
     color = 'medium',
     variant = 'medium',
+    size = '1',
     ...rest
-  } = _ref;
+  } = _ref2;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,
     marginTop: tokens$7[variant].spacings.top,
     marginBottom: tokens$7[variant].spacings.bottom,
-    dividerHeight: baseDivider.height,
+    dividerHeight: parseInt(size),
     ...rest
   };
   return /*#__PURE__*/jsxRuntime.jsx(StyledDivider$3, { ...props,
@@ -2021,7 +2072,7 @@ const input$2 = {
     }
   }
 };
-const error$4 = mergeDeepRight(input$2, {
+const error$4 = mergeDeepRight$1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2044,7 +2095,7 @@ const error$4 = mergeDeepRight(input$2, {
     }
   }
 });
-const warning$4 = mergeDeepRight(input$2, {
+const warning$4 = mergeDeepRight$1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2067,7 +2118,7 @@ const warning$4 = mergeDeepRight(input$2, {
     }
   }
 });
-const success$1 = mergeDeepRight(input$2, {
+const success$1 = mergeDeepRight$1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2397,7 +2448,7 @@ const Variation$2 = _ref => {
   } = _ref;
 
   if (!variant) {
-    return "";
+    return ``;
   }
 
   const {
@@ -2483,10 +2534,10 @@ const Variation$1 = _ref => {
   } = _ref;
 
   if (!variant) {
-    return "";
+    return ``;
   }
 
-  return styled.css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && edsUtils.outlineTemplate(token.states.focus.outline));
+  return styled.css(["box-shadow:", ";", ""], isFocused ? `none` : variant === 'default' ? `inset 0 -1px 0 0 ${((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)}` : `0 0 0 1px ${((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)}`, isFocused && edsUtils.outlineTemplate(token.states.focus.outline));
 };
 
 const StrippedInput = styled__default["default"](Input$4).withConfig({
@@ -2733,7 +2784,7 @@ const Variation = _ref => {
   } = _ref;
 
   if (!variant) {
-    return "";
+    return ``;
   }
 
   const {
@@ -2906,7 +2957,7 @@ const transform = _ref => {
   let {
     rotation
   } = _ref;
-  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+  return rotation ? `transform: rotate(${rotation}deg)` : '';
 };
 
 const StyledSvg = styled__default["default"].svg.attrs(_ref2 => {
@@ -2918,8 +2969,8 @@ const StyledSvg = styled__default["default"].svg.attrs(_ref2 => {
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height: "".concat(height, "px"),
-    width: "".concat(width, "px"),
+    height: `${height}px`,
+    width: `${width}px`,
     fill
   };
 }).withConfig({
@@ -2935,7 +2986,7 @@ const StyledPath$2 = styled__default["default"].path.attrs(_ref3 => {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+    transform: size / height !== 1 ? `scale(${size / height})` : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -2984,7 +3035,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   } = findIcon(name, data, size);
 
   if (typeof icon === 'undefined') {
-    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
+    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
   }
 
   const height = size ? size : parseInt(icon.width);
@@ -2993,7 +3044,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
     height,
     width,
     fill: color,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
+    viewBox: `0 0 ${width} ${height}`,
     rotation,
     name,
     'aria-hidden': true
@@ -3007,7 +3058,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   let titleId = '';
 
   if (title) {
-    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
+    titleId = `${icon.prefix}-${icon.name}-${count}`;
     svgProps = { ...svgProps,
       title,
       role: 'img',
@@ -3258,8 +3309,8 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref,
   };
 
   const Children = react.Children.map(children, (child, childIndex) => {
-    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
-    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    const headerId = `${accordionId}-header-${index + 1}`;
+    const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
       isExpanded: expanded,
       toggleExpanded,
@@ -3486,7 +3537,7 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, "".concat(id, "-icon"));
+  }, `${id}-icon`);
 
   const headerChildren = react.Children.map(children, child => {
     if (typeof child === 'string') {
@@ -3712,7 +3763,7 @@ const token$1 = {
           outline: {
             type: 'outline',
             width: focusOutlineWidth$5,
-            offset: "-".concat(parseInt(focusOutlineWidth$5), "px"),
+            offset: `-${parseInt(focusOutlineWidth$5)}px`,
             style: 'dashed',
             color: focusOutlineColor$5
           }
@@ -3885,8 +3936,8 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   const Tabs = react.Children.map(children, (child, index) => {
     const tabRef = index === activeTab ? edsUtils.mergeRefs(child.ref, selectedTabRef) : child.ref;
     return /*#__PURE__*/react.cloneElement(child, {
-      id: "".concat(tabsId, "-tab-").concat(index + 1),
-      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
+      id: `${tabsId}-tab-${index + 1}`,
+      'aria-controls': `${tabsId}-panel-${index + 1}`,
       active: index === activeTab,
       index,
       onClick: () => handleChange(index),
@@ -3981,8 +4032,8 @@ const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(_ref, ref) {
     tabsId
   } = react.useContext(TabsContext);
   const Panels = react.Children.map(children, (child, index) => /*#__PURE__*/react.cloneElement(child, {
-    id: "".concat(tabsId, "-panel-").concat(index + 1),
-    'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1),
+    id: `${tabsId}-panel-${index + 1}`,
+    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
     hidden: activeTab !== index
   }));
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -4323,14 +4374,16 @@ const StyledTopBar = styled__default["default"](Paper).withConfig({
   componentId: "sc-1yj236q-0"
 })(_ref => {
   let {
-    theme
+    theme,
+    sticky
   } = _ref;
-  return styled.css(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:1100;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));
+  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;"]));
 });
 const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
     elevation = 'none',
+    sticky = true,
     ...props
   } = _ref2;
   const {
@@ -4347,6 +4400,7 @@ const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, {
       forwardedAs: 'header',
       elevation: elevation,
+      sticky: sticky,
       ...rest,
       children: children
     })
@@ -4419,20 +4473,16 @@ const {
   }
 } = edsTokens.tokens;
 const scrim = {
-  width: '100%',
-  height: '100%',
   background: background$a
 };
 
 const {
-  height: height$1,
-  width,
   background: background$9
 } = scrim;
-const StyledScrim = styled__default["default"].div.withConfig({
+const StyledScrim = styled__default["default"](reactDomInteractions.FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["width:", ";height:", ";background:", ";position:fixed;z-index:1300;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height$1, background$9);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$9);
 const ScrimContent = styled__default["default"].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -4447,11 +4497,6 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
   } = _ref;
   const scrimRef = react.useRef(null);
   const combinedScrimRef = react.useMemo(() => edsUtils.mergeRefs(scrimRef, ref), [scrimRef, ref]);
-  const props = { ...rest,
-    open,
-    isDismissable
-  };
-  edsUtils.useHideBodyScroll(open);
   edsUtils.useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
       onClose();
@@ -4471,9 +4516,10 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
+    lockScroll: true,
     onClick: handleMouseClose,
     ref: combinedScrimRef,
-    ...props,
+    ...rest,
     children: /*#__PURE__*/jsxRuntime.jsx(ScrimContent, {
       children: children
     })
@@ -4568,39 +4614,46 @@ const Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
     isDismissable = false,
     ...props
   } = _ref2;
-  const rest = { ...props,
-    open,
-    ref
-  };
   const {
     density
   } = useEds();
   const token = edsUtils.useToken({
     density
   }, dialog);
+  const {
+    floating,
+    context
+  } = reactDomInteractions.useFloating();
 
   const handleDismiss = () => {
     onClose && onClose();
   };
 
-  if (!open) {
-    return null;
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+  const dialogRef = react.useMemo(() => edsUtils.mergeRefs(floating, ref), [floating, ref]);
+  const rest = { ...props,
+    open
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+    id: "eds-dialog-container",
+    children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
       theme: token,
-      children: /*#__PURE__*/jsxRuntime.jsx(Scrim, {
+      children: open && /*#__PURE__*/jsxRuntime.jsx(Scrim, {
         open: true,
         isDismissable: isDismissable,
         onClose: handleDismiss,
-        children: /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
-          elevation: "above_scrim",
-          ...rest,
-          children: children
+        children: /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+          context: context,
+          modal: true,
+          returnFocus: true,
+          children: /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
+            elevation: "above_scrim",
+            ...rest,
+            ref: dialogRef,
+            children: children
+          })
         })
       })
-    }), document.body)
+    })
   });
 }); // Dialog.displayName = 'EdsDialog'
 
@@ -5932,7 +5985,7 @@ const {
 } = slider;
 const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
 const fakeTrackBgHover = styled.css({
-  backgroundImage: "url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='".concat(track.states.hover.background, "' width='100%' height='4' rx='2' /></svg>\")")
+  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
 });
 const trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
@@ -6109,9 +6162,9 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
 
   if (rest['id']) {
     const overrideId = rest['id'];
-    inputIdA = "".concat(overrideId, "-thumb-a");
-    inputIdB = "".concat(overrideId, "-thumb-b");
-    inputId = "".concat(overrideId, "-thumb");
+    inputIdA = `${overrideId}-thumb-a`;
+    inputIdB = `${overrideId}-thumb-b`;
+    inputId = `${overrideId}-thumb`;
   }
 
   const getAriaLabelledby = react.useCallback(() => {
@@ -6373,8 +6426,8 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
 
   if (arrowRef.current) {
     Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
       [staticSide]: '-6px',
@@ -6395,8 +6448,8 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
           ref: tooltipRef,
           style: { ...style,
             position: strategy,
-            top: y !== null && y !== void 0 ? y : 0,
-            left: x !== null && x !== void 0 ? x : 0
+            top: y || 0,
+            left: x || 0
           }
         }),
         children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
@@ -6643,9 +6696,9 @@ const PopoverPaper = styled__default["default"](Paper).withConfig({
     theme,
     open
   } = _ref;
-  return styled.css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;overflow:auto;"], {
-    visibility: open ? null : 'hidden'
-  }, edsUtils.typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["", " ", " background:", ";", " z-index:1400;"], {
+    display: open ? 'block' : 'none'
+  }, edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border));
 });
 const ArrowWrapper = styled__default["default"].div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -6663,7 +6716,7 @@ const InnerWrapper = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref3;
-  return styled.css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+  return styled.css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
 });
 const PopoverArrow = styled__default["default"].svg.withConfig({
   displayName: "Popover__PopoverArrow",
@@ -6751,8 +6804,8 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
 
   if (arrowRef.current) {
     Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
       [staticSide]: '-6px',
@@ -6779,8 +6832,8 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
         ref: popoverRef,
         style: { ...style,
           position: strategy,
-          top: y !== null && y !== void 0 ? y : 0,
-          left: x !== null && x !== void 0 ? x : 0
+          top: y || 0,
+          left: x || 0
         }
       }),
       children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
@@ -6828,7 +6881,7 @@ const ContentWrapper = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref;
-  return styled.css(["overflow:hidden;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return styled.css(["padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent(_ref2, ref) {
   let {
@@ -6880,7 +6933,7 @@ const StyledPopoverActions = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref;
-  return styled.css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return styled.css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverActions = /*#__PURE__*/react.forwardRef(function PopoverActions(_ref2, ref) {
   let {
@@ -7207,7 +7260,7 @@ const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_re
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
       const transform = value - 100;
-      barStyle = "translateX(".concat(transform, "%)");
+      barStyle = `translateX(${transform}%)`;
     }
   }
 
@@ -7229,7 +7282,7 @@ const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_re
   }, [value, variant]);
 
   const getProgressFormatted = () => {
-    return "Loading ".concat(srProgress, "%");
+    return `Loading ${srProgress}%`;
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7348,7 +7401,7 @@ const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress
 
   if (variant === 'determinate') {
     trackStyle.stroke = circumference.toFixed(3);
-    trackStyle.strokeDashoffset = "".concat(((100 - progress) / 100 * circumference).toFixed(3), "px");
+    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
     props['aria-valuenow'] = progress;
 
     if (value !== undefined) {
@@ -7373,7 +7426,7 @@ const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress
   }, [progress, variant]);
 
   const getProgressFormatted = () => {
-    return "Loading ".concat(srProgress, "%");
+    return `Loading ${srProgress}%`;
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7693,7 +7746,7 @@ const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, r
         children: "/"
       })
     })]
-  }, "breadcrumb-".concat(index)));
+  }, `breadcrumb-${index}`));
   return /*#__PURE__*/jsxRuntime.jsx("nav", { ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
@@ -8159,12 +8212,12 @@ const {
 const MenuPaper = styled__default["default"](Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ""], edsUtils.bordersTemplate(border), _ref => {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], edsUtils.bordersTemplate(border), _ref => {
   let {
     open
   } = _ref;
   return styled.css({
-    visibility: open ? null : 'hidden'
+    display: open ? 'block' : 'none'
   });
 });
 const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2, ref) {
@@ -8304,8 +8357,8 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
             ref: popoverRef,
             style: { ...style,
               position: strategy,
-              top: y !== null && y !== void 0 ? y : 0,
-              left: x !== null && x !== void 0 ? x : 0
+              top: y || 0,
+              left: x || 0
             }
           }),
           children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
@@ -8469,7 +8522,7 @@ const Text = styled__default["default"](Typography).withConfig({
 })(["white-space:nowrap;"]);
 
 function getAriaLabel(page, selected) {
-  return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
+  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
 }
 
 const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
@@ -8521,7 +8574,7 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
     ...props,
     children: /*#__PURE__*/jsxRuntime.jsxs(OrderedList, {
       style: {
-        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
+        gridTemplateColumns: `repeat(${columns}, 48px)`
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -8539,7 +8592,7 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
       jsxRuntime.jsx(ListItem, {
-        children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, { ...page,
+        children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, {
           "aria-label": getAriaLabel(page, activePage),
           "aria-current": activePage,
           page: page,
@@ -8548,13 +8601,13 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
             onPageChange(event, page);
           }
         })
-      }, "list-item ".concat(index)) : /*#__PURE__*/jsxRuntime.jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      }, `list-item ${index}`) : /*#__PURE__*/jsxRuntime.jsx(ListItem // eslint-disable-next-line react/no-array-index-key
       , {
         children: /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
           name: "more_horizontal",
           "aria-label": "Ellipsis of pages"
         })
-      }, "ellipsis-".concat(index))) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
+      }, `ellipsis-${index}`)) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
           variant: "ghost_icon",
           onClick: activePage < pages ? event => {
@@ -8572,7 +8625,12 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
 
   return withItemIndicator ? /*#__PURE__*/jsxRuntime.jsxs(FlexContainer, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Text, {
-      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
+      children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
+              ${' - '}
+              ${currentItemLast}
+              ${' of '}
+              ${totalItems}
+              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
     }), pagination]
   }) : pagination;
 });
@@ -8781,7 +8839,7 @@ const select = {
     }
   }
 };
-const multiSelect$1 = mergeDeepRight(select, {
+const multiSelect$1 = mergeDeepRight$1(select, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -8979,7 +9037,7 @@ const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2,
             disabled: disabled
           }),
           children: item
-        }, "".concat(item)))
+        }, `${item}`))
       })]
     })
   });
@@ -9191,7 +9249,7 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
       }), indeterminate ? /*#__PURE__*/jsxRuntime.jsx(Svg$1, {
         width: iconSize,
         height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
@@ -9201,7 +9259,7 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
       }) : /*#__PURE__*/jsxRuntime.jsxs(Svg$1, {
         width: iconSize,
         height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
@@ -9339,7 +9397,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
       }
     }
   });
-  const placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
+  const placeholderText = items.length > 0 ? `${selectedItems.length}/${items.length} selected` : '';
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -9412,7 +9470,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
           }), /*#__PURE__*/jsxRuntime.jsx("span", {
             children: item
           })]
-        }, "".concat(item)))
+        }, `${item}`))
       })]
     })
   });
@@ -9670,7 +9728,7 @@ const Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
     return /*#__PURE__*/jsxRuntime.jsxs(Svg, {
       width: iconSize,
       height: iconSize,
-      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      viewBox: `0 0 ${iconSize} ${iconSize}`,
       fill: fill,
       "aria-hidden": true,
       children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath, {
@@ -9955,8 +10013,8 @@ const comfortable = {
     height: clickbounds.default__base,
     width: clickbounds.default__base,
     offset: {
-      top: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2, "px"),
-      left: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2, "px")
+      top: `${(parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2}px`,
+      left: `${(parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2}px`
     }
   },
   entities: {
@@ -10005,8 +10063,8 @@ const comfortable = {
         height: clickbounds.compact__standard,
         width: clickbounds.compact__standard,
         offset: {
-          top: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2, "px"),
-          left: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2, "px")
+          top: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2}px`,
+          left: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2}px`
         }
       },
       entities: {
@@ -10204,7 +10262,7 @@ const selectTokens = {
     }
   }
 };
-const multiSelect = mergeDeepRight(selectTokens, {
+const multiSelect = mergeDeepRight$1(selectTokens, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -10583,7 +10641,7 @@ function AutocompleteInner(props, ref) {
   }
 
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
     comboBoxProps = { ...comboBoxProps,
       selectedItem: null,
       stateReducer: (state, actionAndChanges) => {
@@ -10680,10 +10738,10 @@ function AutocompleteInner(props, ref) {
           availableHeight,
           elements
         } = _ref10;
-        const anchorWidth = "".concat(rects.reference.width, "px");
+        const anchorWidth = `${rects.reference.width}px`;
         Object.assign(elements.floating.style, {
-          width: "".concat(autoWidth ? anchorWidth : 'auto'),
-          maxHeight: "".concat(availableHeight, "px")
+          width: `${autoWidth ? anchorWidth : 'auto'}`,
+          maxHeight: `${availableHeight}px`
         });
       },
 
@@ -10714,8 +10772,9 @@ function AutocompleteInner(props, ref) {
       ref: floating,
       style: {
         position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0
+        top: y || 0,
+        left: x || 0,
+        zIndex: 1400
       }
     }),
     children: /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps({