@equinor/eds-core-react 0.20.3 → 0.21.0-dev.20220905

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

@@ -9,6 +9,7 @@ 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 downshift = require('downshift');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -75,8 +76,8 @@ const {
     focused: outline
   },
   clickbounds: {
-    default__base: clicboundHeight$1,
-    compact__standard: compactClickboundHeight$1
+    default__base: clicboundHeight$2,
+    compact__standard: compactClickboundHeight$2
   }
 } = edsTokens.tokens;
 const button = {
@@ -100,10 +101,10 @@ const button = {
     right: "var(--eds_button__padding_x, ".concat(medium$6, ")")
   },
   clickbound: {
-    height: clicboundHeight$1,
+    height: clicboundHeight$2,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight$1) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: "".concat((parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1, "px"),
       left: '0'
     }
   },
@@ -154,10 +155,10 @@ const button = {
         bottom: 'var(--eds_button__padding_y_compact, 0)'
       },
       clickbound: {
-        height: compactClickboundHeight$1,
+        height: compactClickboundHeight$2,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight$1) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: "".concat((parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
           left: '0'
         }
       }
@@ -419,7 +420,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight(button, {
+const primary$a = mergeDeepRight(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -437,7 +438,7 @@ const primary$9 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight(primary$9, {
+const secondary$5 = mergeDeepRight(primary$a, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -451,7 +452,7 @@ const secondary$4 = mergeDeepRight(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight(primary$9, {
+const danger$6 = mergeDeepRight(primary$a, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -504,7 +505,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight(button, {
+const primary$9 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$7
   },
@@ -533,7 +534,7 @@ const primary$8 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight(primary$8, {
+const secondary$4 = mergeDeepRight(primary$9, {
   typography: {
     color: secondaryColor$2
   },
@@ -552,7 +553,7 @@ const secondary$3 = mergeDeepRight(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight(primary$8, {
+const danger$5 = mergeDeepRight(primary$9, {
   typography: {
     color: dangerColor$2
   },
@@ -605,7 +606,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -624,7 +625,7 @@ const primary$7 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$2 = mergeDeepRight(primary$7, {
+const secondary$3 = mergeDeepRight(primary$8, {
   typography: {
     color: secondaryColor$1
   },
@@ -637,7 +638,7 @@ const secondary$2 = mergeDeepRight(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight(primary$7, {
+const danger$4 = mergeDeepRight(primary$8, {
   typography: {
     color: dangerColor$1
   },
@@ -681,19 +682,19 @@ const {
     }
   },
   clickbounds: {
-    default__base: clicboundHeight,
-    compact__standard: compactClickboundHeight
+    default__base: clicboundHeight$1,
+    compact__standard: compactClickboundHeight$1
   },
-  shape: shape$3,
+  shape: shape$4,
   interactions: {
     focused: {
       width: focusOutlineWidth$8
     }
   }
 } = edsTokens.tokens;
-const primary$6 = mergeDeepRight(button, {
-  height: shape$3.icon_button.minHeight,
-  width: shape$3.icon_button.minWidth,
+const primary$7 = mergeDeepRight(button, {
+  height: shape$4.icon_button.minHeight,
+  width: shape$4.icon_button.minWidth,
   typography: {
     color: primaryColor$5
   },
@@ -707,10 +708,10 @@ const primary$6 = mergeDeepRight(button, {
     right: '0'
   },
   clickbound: {
-    width: clicboundHeight,
+    width: clicboundHeight$1,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2, "px")
+      left: "".concat((parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2, "px")
     }
   },
   states: {
@@ -735,19 +736,19 @@ const primary$6 = mergeDeepRight(button, {
   },
   modes: {
     compact: {
-      height: shape$3._modes.compact.icon_button.minHeight,
-      width: shape$3._modes.compact.icon_button.minWidth,
+      height: shape$4._modes.compact.icon_button.minHeight,
+      width: shape$4._modes.compact.icon_button.minWidth,
       clickbound: {
-        width: compactClickboundHeight,
+        width: compactClickboundHeight$1,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: "".concat((parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2, "px")
         }
       }
     }
   }
 });
-const secondary$1 = mergeDeepRight(primary$6, {
+const secondary$2 = mergeDeepRight(primary$7, {
   typography: {
     color: secondaryColor
   },
@@ -760,7 +761,7 @@ const secondary$1 = mergeDeepRight(primary$6, {
     }
   }
 });
-const danger$2 = mergeDeepRight(primary$6, {
+const danger$3 = mergeDeepRight(primary$7, {
   typography: {
     color: dangerColor
   },
@@ -774,24 +775,78 @@ const danger$2 = mergeDeepRight(primary$6, {
   }
 });
 
+const {
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape: shape$3
+} = edsTokens.tokens;
+const contained_icon = {
+  height: shape$3.icon_button.minHeight,
+  width: shape$3.icon_button.minWidth,
+  border: {
+    width: '0px',
+    radius: '50%'
+  },
+  spacings: {
+    left: '0',
+    right: '0'
+  },
+  clickbound: {
+    width: clicboundHeight,
+    offset: {
+      top: '0',
+      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+    }
+  },
+  states: {
+    hover: {
+      border: {
+        width: '0px',
+        radius: '50%'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: shape$3._modes.compact.icon_button.minHeight,
+      width: shape$3._modes.compact.icon_button.minWidth,
+      clickbound: {
+        width: compactClickboundHeight,
+        offset: {
+          top: '0',
+          left: "".concat((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 token$5 = {
   primary: {
-    contained: primary$9,
-    outlined: primary$8,
-    ghost: primary$7,
-    ghost_icon: primary$6
+    contained: primary$a,
+    outlined: primary$9,
+    ghost: primary$8,
+    ghost_icon: primary$7,
+    contained_icon: primary$6
   },
   secondary: {
-    contained: secondary$4,
-    outlined: secondary$3,
-    ghost: secondary$2,
-    ghost_icon: secondary$1
+    contained: secondary$5,
+    outlined: secondary$4,
+    ghost: secondary$3,
+    ghost_icon: secondary$2,
+    contained_icon: secondary$1
   },
   danger: {
-    contained: danger$5,
-    outlined: danger$4,
-    ghost: danger$3,
-    ghost_icon: danger$2
+    contained: danger$6,
+    outlined: danger$5,
+    ghost: danger$4,
+    ghost_icon: danger$3,
+    contained_icon: danger$2
   }
 };
 
@@ -860,6 +915,9 @@ const getVariant = (tokenSet, variant) => {
     case 'outlined':
       return tokenSet.outlined;
 
+    case 'contained_icon':
+      return tokenSet.contained_icon;
+
     case 'contained':
     default:
       return tokenSet.contained;
@@ -902,9 +960,9 @@ const ButtonBase = styled__default["default"].button.withConfig({
     hover,
     disabled
   } = states;
-  return styled.css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, edsUtils.bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
-const Button = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
+const Button$1 = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
   let {
     color = 'primary',
     variant = 'contained',
@@ -946,7 +1004,56 @@ const Button = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
 });
 
 const {
-  typography: typography$h,
+  shape: {
+    corners: {
+      borderRadius: borderRadius$9
+    }
+  }
+} = edsTokens.tokens;
+const group = {
+  border: {
+    type: 'border',
+    radius: borderRadius$9
+  }
+};
+
+const {
+  border: border$4
+} = group;
+const radius$1 = border$4.type === 'border' && border$4.radius;
+const 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;}}}", ""], _ref => {
+  let {
+    vertical
+  } = _ref;
+  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);
+});
+const ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, ref) {
+  let {
+    children,
+    vertical,
+    ...rest
+  } = _ref2;
+  const props = {
+    ref,
+    vertical,
+    ...rest
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupBase, {
+    role: "group",
+    ...props,
+    children: children
+  });
+});
+
+const Button = Button$1;
+Button.Group = ButtonGroup;
+Button.Group.displayName = 'Button.Group';
+
+const {
+  typography: typography$i,
   colors: colorsToken,
   interactions: {
     focused: {
@@ -957,7 +1064,7 @@ const {
 const {
   heading,
   paragraph: paragraph$2
-} = typography$h;
+} = typography$i;
 const {
   interactive: {
     primary__resting: {
@@ -1039,7 +1146,7 @@ const findTypography = (variantName, group) => {
     return quickVariants[variantName];
   }
 
-  return typography$h[group][variantName];
+  return typography$i[group][variantName];
 };
 
 const findColor = function () {
@@ -1850,7 +1957,7 @@ const {
       x_small: x_small$5
     }
   },
-  typography: typography$g,
+  typography: typography$h,
   shape: shape$2
 } = edsTokens.tokens;
 const input$2 = {
@@ -1862,7 +1969,7 @@ const input$2 = {
     top: '6px',
     bottom: '6px'
   },
-  typography: { ...typography$g.input.text,
+  typography: { ...typography$h.input.text,
     color: static_icons__default.rgba
   },
   entities: {
@@ -2151,7 +2258,7 @@ const InputIcon = /*#__PURE__*/react.forwardRef(function InputIcon(_ref2, ref) {
 
 const {
   colors: colors$6,
-  typography: typography$f,
+  typography: typography$g,
   spacings: {
     comfortable: {
       small: small$5,
@@ -2189,7 +2296,7 @@ const textfield$1 = {
   },
   entities: {
     unit: {
-      typography: { ...typography$f.input.label,
+      typography: { ...typography$g.input.label,
         color: colors$6.text.static_icons__tertiary.hex
       },
       states: {
@@ -2348,8 +2455,9 @@ const Textarea = /*#__PURE__*/react.forwardRef(function Textarea(_ref2, ref) {
   const padding = parseInt(top) + parseInt(bottom);
   const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
   edsUtils.useAutoResize(textareaEl, rowsMax ? maxHeight : null);
+  const combinedRef = react.useMemo(() => edsUtils.mergeRefs(ref, setTextareaEl), [setTextareaEl, ref]);
   const inputProps = {
-    ref: edsUtils.useCombinedRefs(ref, setTextareaEl),
+    ref: combinedRef,
     type,
     disabled,
     variant,
@@ -2512,11 +2620,11 @@ const {
   spacings: {
     comfortable: comfortable$5
   },
-  typography: typography$e
+  typography: typography$f
 } = edsTokens.tokens;
 const label = {
   background: colors$5.ui.background__light.rgba,
-  typography: { ...typography$e.input.label,
+  typography: { ...typography$f.input.label,
     color: colors$5.text.static_icons__tertiary.rgba
   },
   spacings: {
@@ -2576,11 +2684,11 @@ const {
   spacings: {
     comfortable: comfortable$4
   },
-  typography: typography$d
+  typography: typography$e
 } = edsTokens.tokens;
 const helperText = {
   background: colors$4.ui.background__light.hex,
-  typography: typography$d.input.helper,
+  typography: typography$e.input.helper,
   spacings: {
     comfortable: {
       left: comfortable$4.small,
@@ -2720,6 +2828,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     inputIcon,
     helperIcon,
     rowsMax,
+    style,
     ...other
   } = _ref;
   const helperTextId = edsUtils.useId(null, 'helpertext');
@@ -2746,7 +2855,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
   const containerProps = {
     ref,
     className,
-    style: other.style
+    style
   };
   const labelProps = {
     htmlFor: id,
@@ -2860,7 +2969,7 @@ const findIcon = (name, data, size) => {
 
 const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   let {
-    size = 24,
+    size,
     color = 'currentColor',
     name,
     rotation,
@@ -2933,7 +3042,7 @@ const list = {
 };
 
 const {
-  typography: typography$c
+  typography: typography$d
 } = list;
 const StyledList$2 = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
@@ -2943,7 +3052,7 @@ const StyledList$2 = styled__default["default"].ul.withConfig({
     as
   } = _ref;
   return as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '';
-}, edsUtils.typographyTemplate(typography$c));
+}, edsUtils.typographyTemplate(typography$d));
 const List$2 = /*#__PURE__*/react.forwardRef(function List(_ref2, ref) {
   let {
     children,
@@ -2977,7 +3086,7 @@ List$1.Item.displayName = 'List.Item';
 const {
   typography: {
     ui: {
-      accordion_header: typography$b
+      accordion_header: typography$c
     }
   },
   colors: {
@@ -3021,6 +3130,11 @@ const {
     focused: {
       width: focusOutlineWidth$6
     }
+  },
+  typography: {
+    input: {
+      text
+    }
   }
 } = edsTokens.tokens;
 const accordion = {
@@ -3042,7 +3156,7 @@ const accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography$b,
+      typography: typography$c,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -3058,12 +3172,12 @@ const accordion = {
           }
         },
         disabled: {
-          typography: { ...typography$b,
+          typography: { ...typography$c,
             color: disabledColor$2
           }
         },
         active: {
-          typography: { ...typography$b,
+          typography: { ...typography$c,
             color: activatedColor
           }
         },
@@ -3078,6 +3192,8 @@ const accordion = {
         left: mediumSpacing,
         right: mediumSpacing,
         top: mediumSpacing
+      },
+      typography: { ...text
       }
     },
     icon: {
@@ -3190,12 +3306,14 @@ const AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHea
   let {
     isExpanded,
     disabled,
-    children
+    children,
+    ...rest
   } = _ref2;
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, {
     ref: ref,
     isExpanded: isExpanded,
     disabled: disabled,
+    ...rest,
     children: children
   });
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
@@ -3228,12 +3346,14 @@ const AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionH
   let {
     isExpanded,
     disabled,
-    children
+    children,
+    ...rest
   } = _ref2;
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, {
     ref: ref,
     isExpanded: isExpanded,
     disabled: disabled,
+    ...rest,
     children: children
   });
 });
@@ -3330,6 +3450,8 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
     children,
     toggleExpanded,
     disabled,
+    className,
+    style,
     ...props
   } = _ref5;
 
@@ -3401,6 +3523,8 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
     disabled: disabled,
     parentIndex: parentIndex,
     as: headerLevel,
+    className: className,
+    style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderButton, {
       isExpanded: isExpanded,
       disabled: disabled,
@@ -3436,7 +3560,7 @@ const StyledAccordionPanel = styled__default["default"].div.attrs(_ref => {
     },
     border
   } = theme;
-  return styled.css(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(panel.spacings), header.background);
+  return styled.css(["", " ", " ", " background:", ";min-height:96px;box-sizing:border-box;"], edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), header.background);
 });
 const AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel(_ref3, ref) {
   let {
@@ -3634,7 +3758,7 @@ const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs(_ref, ref) {
   } = _ref;
   const tabsId = edsUtils.useId(id, 'tabs');
   const tabsRef = react.useRef(null);
-  const combinedTabsRef = edsUtils.useCombinedRefs(tabsRef, ref);
+  const combinedTabsRef = react.useMemo(() => edsUtils.mergeRefs(tabsRef, ref), [tabsRef, ref]);
   const [tabsFocused, setTabsFocused] = react.useState(false);
   const [listenerAttached, setListenerAttached] = react.useState(false);
   let blurTimer;
@@ -3759,8 +3883,7 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
     currentTab.current = activeTab;
   }, [activeTab]);
   const Tabs = react.Children.map(children, (child, index) => {
-    const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
-    edsUtils.useCombinedRefs(child.ref, selectedTabRef) : child.ref;
+    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),
@@ -4007,38 +4130,29 @@ const {
 const 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;cursor:", ";", ";"], _ref => {
+})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], _ref => {
   let {
     background
   } = _ref;
   return background;
-}, _ref2 => {
-  let {
-    cursor
-  } = _ref2;
-  return cursor;
 }, edsUtils.bordersTemplate(primary$3.border));
-const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
+const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref2, ref) {
   let {
     children,
     variant = 'default',
     elevation = 'none',
-    onClick,
     ...rest
-  } = _ref3;
-  const cursor = onClick ? 'pointer' : 'default';
+  } = _ref2;
   const cardVariant = variant === 'default' ? 'primary' : variant;
   const token = tokens$4[cardVariant];
   const props = {
     ref,
     background: token.background,
-    cursor,
     ...rest
   };
   return /*#__PURE__*/jsxRuntime.jsx(StyledCard, {
     elevation: elevation,
     ...props,
-    onClick: onClick,
     children: children
   });
 });
@@ -4186,8 +4300,8 @@ const topbar = {
   background: colors$3.ui.background__default.rgba,
   typography: navigation.menu_title,
   spacings: {
-    left: comfortable$3.xx_large,
-    right: comfortable$3.xx_large,
+    left: comfortable$3.large,
+    right: comfortable$3.large,
     top: comfortable$3.small,
     bottom: comfortable$3.small
   },
@@ -4332,7 +4446,7 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
     ...rest
   } = _ref;
   const scrimRef = react.useRef(null);
-  const combinedScrimRef = edsUtils.useCombinedRefs(scrimRef, ref);
+  const combinedScrimRef = react.useMemo(() => edsUtils.mergeRefs(scrimRef, ref), [scrimRef, ref]);
   const props = { ...rest,
     open,
     isDismissable
@@ -4650,10 +4764,10 @@ const {
       xxx_large
     }
   },
-  typography: typography$a
+  typography: typography$b
 } = edsTokens.tokens;
 const tableOfContents = {
-  typography: { ...typography$a.navigation.button,
+  typography: { ...typography$b.navigation.button,
     color: labelColor
   },
   spacings: {
@@ -4669,7 +4783,7 @@ const tableOfContents = {
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: { ...typography$a.navigation.button,
+      typography: { ...typography$b.navigation.button,
         color: primaryColor$4
       },
       spacings: {
@@ -4709,7 +4823,7 @@ const tableOfContents = {
           background: primaryHover$3
         }
       },
-      typography: { ...typography$a.navigation.button,
+      typography: { ...typography$b.navigation.button,
         color: primaryHover$3
       }
     }
@@ -4812,6 +4926,11 @@ const {
       xx_small: spacingXXS,
       medium: spacingMedium$5
     }
+  },
+  typography: {
+    paragraph: {
+      body_short
+    }
   }
 } = edsTokens.tokens;
 const comfortable$2 = {
@@ -4829,6 +4948,8 @@ const comfortable$2 = {
       width: spacingXXS,
       style: 'solid'
     }
+  },
+  typography: { ...body_short
   }
 };
 const variants = {
@@ -4841,17 +4962,18 @@ const variants = {
 const {
   background: background$6,
   spacings: spacings$2,
-  border: border$2
+  border: border$2,
+  typography: typography$a
 } = comfortable$2;
 const StyledSideSheet = styled__default["default"].div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background$6, _ref => {
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$6, _ref => {
   let {
     width
   } = _ref;
   return width;
-}, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2));
+}, edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$a));
 const Header$1 = styled__default["default"].div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
@@ -4859,6 +4981,7 @@ const Header$1 = styled__default["default"].div.withConfig({
 const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   let {
     variant = 'medium',
+    width,
     title = '',
     children,
     open = true,
@@ -4867,7 +4990,7 @@ const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
   } = _ref2;
   const props = { ...rest,
     ref,
-    width: variants[variant]
+    width: width || variants[variant]
   }; // Controller must set open={false} when pressing the close button
 
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, { ...props,
@@ -5418,6 +5541,7 @@ const Search = /*#__PURE__*/react.forwardRef(function Search(_ref4, ref) {
     defaultValue = '',
     value,
     className = '',
+    style,
     disabled = false,
     onBlur,
     onFocus,
@@ -5493,14 +5617,16 @@ const Search = /*#__PURE__*/react.forwardRef(function Search(_ref4, ref) {
   const containerProps = {
     isFocused,
     className,
+    style,
     disabled,
     role: 'search',
     'aria-label': rest['aria-label'],
     onClick: handleOnClick
   };
+  const combinedRef = react.useMemo(() => edsUtils.mergeRefs(inputRef, ref), [inputRef, ref]);
   const inputProps = applyControllingProps({ ...rest,
     disabled,
-    ref: edsUtils.useCombinedRefs(inputRef, ref),
+    ref: combinedRef,
     type: 'search',
     role: 'searchbox',
     'aria-label': 'search input',
@@ -6161,11 +6287,11 @@ const tooltip = {
 const StyledTooltip = styled__default["default"].div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
-})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background, tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.entities.arrow.spacings.bottom, tooltip.entities.arrow.spacings.top, tooltip.entities.arrow.spacings.right, tooltip.entities.arrow.spacings.left);
+})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
 const ArrowWrapper$1 = styled__default["default"].div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
-})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
+})(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
 const TooltipArrow = styled__default["default"].svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
@@ -6175,96 +6301,115 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
     title,
     placement = 'bottom',
     children,
-    enterDelay = 100,
-    id,
     style,
+    enterDelay = 100,
     ...rest
   } = _ref;
-  const isMounted = edsUtils.useIsMounted();
-  const [popperEl, setPopperEl] = react.useState(null);
-  const [arrowRef, setArrowRef] = react.useState(null);
+  const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const openTimer = react.useRef();
-  const tooltipRef = edsUtils.useCombinedRefs(setPopperEl, ref);
-  const anchorRef = react.useRef();
-  const combinedChilddRef = edsUtils.useCombinedRefs(anchorRef, children === null || children === void 0 ? void 0 : children.ref);
-  const tooltipId = edsUtils.useId(id, 'tooltip');
-  const containerId = 'eds-tooltip-container';
-  const shouldOpen = isMounted && title !== '';
-  react.useEffect(() => {
-    if (document.getElementById(containerId) === null) {
-      const tooltipContainerElement = document.createElement('div');
-      tooltipContainerElement.id = containerId;
-      document.body.appendChild(tooltipContainerElement);
-    }
-
-    return () => {
-      clearTimeout(openTimer.current);
-    };
-  }, []);
-
-  const openTooltip = () => {
-    if (shouldOpen) {
-      clearTimeout(openTimer.current);
-      openTimer.current = setTimeout(() => {
-        setOpen(true);
-      }, enterDelay);
-    }
-  };
-
-  const closeTooltip = () => {
-    clearTimeout(openTimer.current);
-    setOpen(false);
-  };
-
-  edsUtils.useGlobalKeyPress('Escape', () => closeTooltip());
+  const shouldOpen = title !== '';
   const {
-    styles,
-    attributes
-  } = edsUtils.usePopper({
-    anchorEl: anchorRef.current,
-    popperEl,
-    arrowRef,
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement
+  } = reactDomInteractions.useFloating({
     placement,
-    offset: 14
-  });
-  const props = {
     open,
-    style: { ...styles.popper,
-      ...style
-    },
-    ...rest,
-    ...attributes.popper
-  };
-  const childProps = children.props;
-  const updatedChildren = /*#__PURE__*/react.cloneElement(children, {
-    ref: combinedChilddRef,
-    'aria-describedby': open ? tooltipId : null,
-    onMouseOver: edsUtils.joinHandlers(openTooltip, childProps.onMouseOver),
-    onMouseLeave: edsUtils.joinHandlers(closeTooltip, childProps.onMouseLeave),
-    onPointerEnter: edsUtils.joinHandlers(openTooltip, childProps.onPointerEnter),
-    onPointerLeave: edsUtils.joinHandlers(closeTooltip, childProps.onPointerLeave),
-    onBlur: edsUtils.joinHandlers(closeTooltip, childProps.onBlur),
-    onFocus: edsUtils.joinHandlers(openTooltip, childProps.onFocus)
+    onOpenChange: setOpen,
+    middleware: [reactDomInteractions.offset(14), reactDomInteractions.flip(), reactDomInteractions.shift({
+      padding: 8
+    }), reactDomInteractions.arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: reactDomInteractions.autoUpdate
+  });
+  const anchorRef = react.useMemo(() => edsUtils.mergeRefs(reference, children === null || children === void 0 ? void 0 : children.ref), [reference, children === null || children === void 0 ? void 0 : children.ref]);
+  const tooltipRef = react.useMemo(() => edsUtils.mergeRefs(floating, ref), [floating, ref]);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = reactDomInteractions.useInteractions([reactDomInteractions.useHover(context, {
+    delay: {
+      open: enterDelay
+    }
+  }), reactDomInteractions.useFocus(context), reactDomInteractions.useRole(context, {
+    role: 'tooltip'
+  }), reactDomInteractions.useDismiss(context)]);
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[finalPlacement.split('-')[0]];
+  let arrowTransform = 'none';
+
+  switch (staticSide) {
+    case 'right':
+      arrowTransform = 'rotateY(180deg)';
+      break;
+
+    case 'left':
+      arrowTransform = 'none';
+      break;
+
+    case 'top':
+      arrowTransform = 'rotate(90deg)';
+      break;
+
+    case 'bottom':
+      arrowTransform = 'rotate(-90deg)';
+      break;
+  }
+
+  if (arrowRef.current) {
+    Object.assign(arrowRef.current.style, {
+      left: arrowX != null ? "".concat(arrowX, "px") : '',
+      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      right: '',
+      bottom: '',
+      [staticSide]: '-6px',
+      transform: arrowTransform
+    });
+  }
+
+  const updatedChildren = /*#__PURE__*/react.cloneElement(children, { ...getReferenceProps({
+      ref: anchorRef,
+      ...children.props
+    })
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [shouldOpen && open && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
-      id: tooltipId,
-      role: "tooltip",
-      ref: tooltipRef,
-      ...props,
-      children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
-        ref: setArrowRef,
-        style: styles.arrow,
-        className: "arrow",
-        children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
-          className: "arrowSvg",
-          children: /*#__PURE__*/jsxRuntime.jsx("path", {
-            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+      id: "eds-tooltip-container",
+      children: shouldOpen && open && /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, { ...rest,
+        ...getFloatingProps({
+          ref: tooltipRef,
+          style: { ...style,
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : 0,
+            left: x !== null && x !== void 0 ? x : 0
+          }
+        }),
+        children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
+          ref: arrowRef,
+          children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+            className: "arrowSvg",
+            children: /*#__PURE__*/jsxRuntime.jsx("path", {
+              d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+            })
           })
-        })
-      })]
-    }), document.getElementById(containerId)), updatedChildren]
+        })]
+      })
+    }), updatedChildren]
   });
 });
 
@@ -6498,9 +6643,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;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+  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), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
+  }, edsUtils.typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, edsUtils.bordersTemplate(theme.border));
 });
 const ArrowWrapper = styled__default["default"].div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -6509,7 +6654,7 @@ const ArrowWrapper = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref2;
-  return styled.css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
+  return styled.css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
 const InnerWrapper = styled__default["default"].div.withConfig({
   displayName: "Popover__InnerWrapper",
@@ -6534,41 +6679,90 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
     children,
     placement = 'bottom',
     anchorEl,
+    style,
     open,
     onClose,
     ...rest
   } = _ref5;
-  const [popperEl, setPopperEl] = react.useState(null);
-  const [storedAnchorEl, setStoredAnchorEl] = react.useState(null);
-  const [arrowRef, setArrowRef] = react.useState(null);
-  const popoverRef = edsUtils.useCombinedRefs(ref, setPopperEl);
-  edsUtils.useOutsideClick(popperEl, e => {
-    if (open && onClose && anchorEl && !anchorEl.contains(e.target)) {
-      onClose();
-    }
-  });
-  edsUtils.useGlobalKeyPress('Escape', () => {
-    if (onClose && open) {
-      onClose();
-    }
+  const arrowRef = react.useRef(null);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    refs,
+    update,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement
+  } = reactDomInteractions.useFloating({
+    placement,
+    open,
+    onOpenChange: onClose,
+    middleware: [reactDomInteractions.offset(14), reactDomInteractions.flip(), reactDomInteractions.shift({
+      padding: 8
+    }), reactDomInteractions.arrow({
+      element: arrowRef
+    })]
   });
+  react.useLayoutEffect(() => {
+    reference(anchorEl);
+  }, [anchorEl, reference]);
+  const popoverRef = react.useMemo(() => edsUtils.mergeRefs(floating, ref), [floating, ref]);
   react.useEffect(() => {
-    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
-    return () => setStoredAnchorEl(null);
-  }, [anchorEl, open]);
+    if (refs.reference.current && refs.floating.current && open) {
+      return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, open]);
   const {
-    styles,
-    attributes
-  } = edsUtils.usePopper({
-    anchorEl: storedAnchorEl,
-    popperEl,
-    arrowRef,
-    placement
-  });
+    getFloatingProps
+  } = reactDomInteractions.useInteractions([reactDomInteractions.useDismiss(context)]);
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[finalPlacement.split('-')[0]];
+  let arrowTransform = 'none';
+
+  switch (staticSide) {
+    case 'right':
+      arrowTransform = 'rotateY(180deg)';
+      break;
+
+    case 'left':
+      arrowTransform = 'none';
+      break;
+
+    case 'top':
+      arrowTransform = 'rotate(90deg)';
+      break;
+
+    case 'bottom':
+      arrowTransform = 'rotate(-90deg)';
+      break;
+  }
+
+  if (arrowRef.current) {
+    Object.assign(arrowRef.current.style, {
+      left: arrowX != null ? "".concat(arrowX, "px") : '',
+      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      right: '',
+      bottom: '',
+      [staticSide]: '-6px',
+      transform: arrowTransform
+    });
+  }
+
   const props = {
     open,
-    ...rest,
-    ...attributes.popper
+    ...rest
   };
   const {
     density
@@ -6579,13 +6773,18 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
-      ref: popoverRef,
       elevation: "overlay",
-      style: styles.popper,
       ...props,
+      ...getFloatingProps({
+        ref: popoverRef,
+        style: { ...style,
+          position: strategy,
+          top: y !== null && y !== void 0 ? y : 0,
+          left: x !== null && x !== void 0 ? x : 0
+        }
+      }),
       children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
-        ref: setArrowRef,
-        style: styles.arrow,
+        ref: arrowRef,
         className: "arrow",
         children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
           className: "arrowSvg",
@@ -7523,6 +7722,7 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref)
     children,
     maxWidth,
     href,
+    as,
     ...other
   } = _ref2;
   const props = { ...other,
@@ -7532,10 +7732,11 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref)
   };
   const showTooltip = maxWidth > 0;
   const isHrefDefined = href !== undefined;
+  const forwardedAs = react.useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
 
   const crumb = /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
     link: isHrefDefined,
-    forwardedAs: isHrefDefined ? null : 'span',
+    forwardedAs: forwardedAs,
     variant: "body_short",
     ...props,
     children: children
@@ -7808,7 +8009,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(_ref5, ref) {
     isFocused
   };
   return /*#__PURE__*/jsxRuntime.jsx(Item, { ...props,
-    ref: edsUtils.useCombinedRefs(ref, el => {
+    ref: edsUtils.mergeRefs(ref, el => {
       if (isFocused) {
         requestAnimationFrame(() => {
           if (el !== null) el.focus();
@@ -7972,7 +8173,6 @@ const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2
     anchorEl,
     onClose: onCloseCallback,
     open,
-    containerEl,
     ...rest
   } = _ref2;
   const {
@@ -8016,11 +8216,6 @@ const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2
       if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [anchorEl]);
-  edsUtils.useOutsideClick(containerEl, e => {
-    if (open && onClose !== null && !anchorEl.contains(e.target)) {
-      onClose();
-    }
-  });
   edsUtils.useGlobalKeyPress('Escape', () => {
     if (open && onClose !== null) {
       onClose();
@@ -8045,60 +8240,82 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
   let {
     anchorEl,
     open,
-    placement = 'auto',
+    placement = 'bottom',
+    onClose,
     style,
     className,
     ...rest
   } = _ref3;
-  const [containerEl, setContainerEl] = react.useState(null);
-  const [storedAnchorEl, setStoredAnchorEl] = react.useState(null);
-  const isMounted = edsUtils.useIsMounted();
   const {
     density
   } = useEds();
   const token = edsUtils.useToken({
     density
   }, menu);
-  react.useEffect(() => {
-    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
-    return () => setStoredAnchorEl(null);
-  }, [anchorEl, open]);
   const {
-    styles,
-    attributes
-  } = edsUtils.usePopper({
-    anchorEl: storedAnchorEl,
-    popperEl: containerEl,
+    x,
+    y,
+    reference,
+    floating,
+    refs,
+    update,
+    strategy,
+    context
+  } = reactDomInteractions.useFloating({
     placement,
-    offset: 4
+    open,
+    onOpenChange: onClose,
+    middleware: [reactDomInteractions.offset(4), reactDomInteractions.flip(), reactDomInteractions.shift({
+      padding: 8
+    })]
   });
+  react.useLayoutEffect(() => {
+    reference(anchorEl);
+  }, [anchorEl, reference]);
+  const popoverRef = react.useMemo(() => edsUtils.mergeRefs(floating, ref), [floating, ref]);
+  react.useEffect(() => {
+    if (refs.reference.current && refs.floating.current && open) {
+      return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, open]);
+  const {
+    getFloatingProps
+  } = reactDomInteractions.useInteractions([reactDomInteractions.useDismiss(context, {
+    escapeKey: false
+  })]);
   const props = {
     open,
-    style: { ...styles.popper,
-      ...style
-    },
-    className,
-    ...attributes.popper
+    className
   };
   const menuProps = { ...rest,
+    onClose,
     anchorEl,
-    open,
-    containerEl
+    open
   };
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: isMounted && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
-      theme: token,
-      children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
-        elevation: "raised",
-        ref: setContainerEl,
-        ...props,
-        children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
-          children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, { ...menuProps,
-            ref: ref
+    children: /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+      id: "eds-menu-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+        theme: token,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
+          elevation: "raised",
+          ...props,
+          ...getFloatingProps({
+            ref: popoverRef,
+            style: { ...style,
+              position: strategy,
+              top: y !== null && y !== void 0 ? y : 0,
+              left: x !== null && x !== void 0 ? x : 0
+            }
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
+            children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, { ...menuProps,
+              ref: ref
+            })
           })
         })
       })
-    }), document.body)
+    })
   });
 });
 
@@ -8441,6 +8658,7 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2,
     label,
     children,
     className,
+    style,
     selectRef,
     id,
     meta,
@@ -8456,7 +8674,8 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2,
   }, nativeselect);
   const containerProps = {
     ref,
-    className
+    className,
+    style
   };
   const selectProps = {
     ref: selectRef,
@@ -8940,6 +9159,8 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
   let {
     disabled = false,
     indeterminate,
+    style,
+    className,
     ...rest
   } = _ref10;
   const {
@@ -8951,7 +9172,9 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
   const iconSize = 24;
   const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
   const inputWrapperProps = {
-    disabled
+    disabled,
+    style,
+    className
   };
   const inputProps = {
     ref,
@@ -9215,11 +9438,13 @@ const Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox(_ref2, ref) {
     disabled = false,
     indeterminate,
     className,
+    style,
     ...rest
   } = _ref2;
   return label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$2, {
     disabled: disabled,
     className: className,
+    style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxInput, { ...rest,
       disabled: disabled,
       ref: ref,
@@ -9228,6 +9453,8 @@ const Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox(_ref2, ref) {
       children: label
     })]
   }) : /*#__PURE__*/jsxRuntime.jsx(CheckboxInput, { ...rest,
+    className: className,
+    style: style,
     disabled: disabled,
     ref: ref,
     indeterminate: indeterminate
@@ -9428,6 +9655,7 @@ const Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
     label,
     disabled = false,
     className,
+    style,
     ...rest
   } = _ref12;
   const {
@@ -9459,6 +9687,7 @@ const Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
     children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$1, {
       disabled: disabled,
       className: className,
+      style: style,
       children: [/*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
         disabled: disabled,
         children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, { ...rest,
@@ -9471,6 +9700,8 @@ const Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
       })]
     }) : /*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
       disabled: disabled,
+      className: className,
+      style: style,
       children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, { ...rest,
         ref: ref,
         disabled: disabled,
@@ -9565,9 +9796,13 @@ const Handle$1 = styled__default["default"].span.withConfig({
 const SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall(_ref4, ref) {
   let {
     disabled,
+    className,
+    style,
     ...rest
   } = _ref4;
   return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
+    className: className,
+    style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx(Input$1, { ...rest,
       ref: ref,
       disabled: disabled
@@ -9627,9 +9862,13 @@ const Handle = styled__default["default"].span.withConfig({
 const SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault(_ref4, ref) {
   let {
     disabled,
+    className,
+    style,
     ...rest
   } = _ref4;
   return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
+    className: className,
+    style: style,
     children: [/*#__PURE__*/jsxRuntime.jsx(Input, { ...rest,
       ref: ref,
       disabled: disabled
@@ -9838,6 +10077,7 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
     disabled,
     label,
     className,
+    style,
     ...rest
   } = _ref3;
   const {
@@ -9853,6 +10093,7 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
     children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel, {
       isDisabled: disabled,
       className: className,
+      style: style,
       children: [size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
         disabled: disabled,
         ...rest,
@@ -9866,10 +10107,14 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
       })]
     }) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
       disabled: disabled,
+      className: className,
+      style: style,
       ...rest,
       ref: ref
     }) : /*#__PURE__*/jsxRuntime.jsx(SwitchDefault, {
       disabled: disabled,
+      className: className,
+      style: style,
       ...rest,
       ref: ref
     })
@@ -10044,7 +10289,7 @@ const StyledList = styled__default["default"](List$1).withConfig({
   let {
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:1400;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
 const StyledButton = styled__default["default"](Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -10136,8 +10381,10 @@ function AutocompleteInner(props, ref) {
     label,
     meta,
     className,
+    style,
     disabled = false,
     readOnly = false,
+    hideClearButton = false,
     onOptionsChange,
     selectedOptions,
     multiple,
@@ -10150,10 +10397,7 @@ function AutocompleteInner(props, ref) {
     optionLabel,
     ...other
   } = props;
-  const anchorRef = react.useRef();
-  const [anchorEl, setAnchorEl] = react.useState();
-  const [containerEl, setContainerEl] = react.useState();
-  const isMounted = edsUtils.useIsMounted();
+  const anchorRef = react.useRef(null);
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = react.useState(options);
   react.useEffect(() => {
@@ -10317,9 +10561,8 @@ function AutocompleteInner(props, ref) {
     }
   };
 
-  if (isControlled && !multiple) {
+  if (!multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0] || null,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
           const {
@@ -10331,6 +10574,12 @@ function AutocompleteInner(props, ref) {
         }
       }
     };
+
+    if (isControlled) {
+      comboBoxProps = { ...comboBoxProps,
+        selectedItem: selectedOptions[0] || null
+      };
+    }
   }
 
   if (multiple) {
@@ -10401,40 +10650,10 @@ function AutocompleteInner(props, ref) {
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
   react.useEffect(() => {
-    if (anchorRef.current && isOpen) {
-      setAnchorEl(anchorRef.current);
-    } else {
-      setAnchorEl(null);
-    }
-
     if (isControlled) {
       setSelectedItems(selectedOptions);
     }
-
-    return () => {
-      setAnchorEl(null);
-      setContainerEl(null);
-    };
-  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]); //"Turn on" popper on load to position menu correctly and then turn it off
-
-  react.useEffect(() => {
-    if (anchorRef.current) {
-      setAnchorEl(anchorRef.current);
-      setTimeout(() => {
-        setAnchorEl(null);
-      }, 1);
-    }
-  }, []);
-  const {
-    styles,
-    attributes
-  } = edsUtils.usePopper({
-    anchorEl,
-    popperEl: containerEl,
-    placement: 'bottom-start',
-    offset: 4,
-    autoWidth
-  });
+  }, [isControlled, selectedOptions, setSelectedItems]);
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -10442,38 +10661,85 @@ function AutocompleteInner(props, ref) {
     }
   };
 
+  const {
+    x,
+    y,
+    refs,
+    update,
+    reference,
+    floating,
+    strategy
+  } = reactDomInteractions.useFloating({
+    placement: 'bottom-start',
+    middleware: [reactDomInteractions.offset(4), reactDomInteractions.flip(), reactDomInteractions.shift({
+      padding: 8
+    }), reactDomInteractions.size({
+      apply(_ref10) {
+        let {
+          rects,
+          availableHeight,
+          elements
+        } = _ref10;
+        const anchorWidth = "".concat(rects.reference.width, "px");
+        Object.assign(elements.floating.style, {
+          width: "".concat(autoWidth ? anchorWidth : 'auto'),
+          maxHeight: "".concat(availableHeight, "px")
+        });
+      },
+
+      padding: 10
+    })]
+  });
+  const {
+    getFloatingProps
+  } = reactDomInteractions.useInteractions([]);
+  react.useLayoutEffect(() => {
+    reference(anchorRef.current);
+  }, [anchorRef, reference]);
+  react.useLayoutEffect(() => {
+    if (refs.reference.current && refs.floating.current && isOpen) {
+      return reactDomInteractions.autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, isOpen]);
+
   const clear = () => {
     resetCombobox();
     resetSelection();
   };
 
-  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly;
+  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
   const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
 
-  const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps({
-      ref: setContainerEl,
-      style: styles.popper,
-      'aria-multiselectable': multiple ? 'true' : null,
-      ...attributes.popper
-    }, {
-      suppressRefError: true
+  const optionsList = /*#__PURE__*/jsxRuntime.jsx("div", { ...getFloatingProps({
+      ref: floating,
+      style: {
+        position: strategy,
+        top: y !== null && y !== void 0 ? y : 0,
+        left: x !== null && x !== void 0 ? x : 0
+      }
     }),
-    children: !isOpen ? null : availableItems.map((item, index) => {
-      const label = getLabel(item);
-      const isDisabled = optionDisabled(item);
-      const isSelected = selectedItemsLabels.includes(label);
-      return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
-        value: label,
-        multiple: multiple,
-        highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
-        isSelected: isSelected,
-        isDisabled: isDisabled,
-        ...getItemProps({
-          item,
-          index,
-          disabled
-        })
-      }, label);
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps({
+        'aria-multiselectable': multiple ? 'true' : null
+      }, {
+        suppressRefError: true
+      }),
+      children: !isOpen ? null : availableItems.map((item, index) => {
+        const label = getLabel(item);
+        const isDisabled = optionDisabled(item);
+        const isSelected = selectedItemsLabels.includes(label);
+        return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
+          value: label,
+          multiple: multiple,
+          highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+          isSelected: isSelected,
+          isDisabled: isDisabled,
+          ...getItemProps({
+            item,
+            index,
+            disabled
+          })
+        }, label);
+      })
     })
   });
 
@@ -10481,6 +10747,7 @@ function AutocompleteInner(props, ref) {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
       className: className,
+      style: style,
       ref: ref,
       children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, { ...getLabelProps(),
         label: label,
@@ -10491,7 +10758,7 @@ function AutocompleteInner(props, ref) {
           getDropdownProps({
             preventKeyAction: multiple ? isOpen : undefined,
             disabled,
-            ref: anchorRef
+            ref: refs.reference
           })),
           placeholder: placeholderText,
           readOnly: readOnly,
@@ -10522,7 +10789,10 @@ function AutocompleteInner(props, ref) {
             data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
           })
         })]
-      }), disablePortal ? optionsList : !isMounted ? null : /*#__PURE__*/ReactDom.createPortal(optionsList, document.body)]
+      }), disablePortal ? optionsList : /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+        id: "eds-autocomplete-container",
+        children: optionsList
+      })]
     })
   });
 }