@equinor/eds-core-react 0.28.0 → 0.29.1-DEV03022023

package/dist/esm/components/Accordion/AccordionPanel.js

@@ -21,7 +21,7 @@ var StyledAccordionPanel = styled.div.attrs(function (_ref) {
     header = _theme$entities.header,
     panel = _theme$entities.panel,
     border = theme.border;
-  return css(["", " ", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), typographyTemplate(panel.typography), header.background);
+  return css(["", " border-top:0;", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), typographyTemplate(panel.typography), header.background);
 });
 var AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel(_ref3, ref) {
   var id = _ref3.id,

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -13,7 +13,7 @@ import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
-import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react-dom-interactions';
+import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -4,8 +4,8 @@ import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Typography } from '../Typography/Typography.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 
 var _excluded = ["children", "maxWidth", "href", "as"];
 var states = breadcrumbs.states,

package/dist/esm/components/Button/ToggleButton/ToggleButton.js

@@ -5,6 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { Button } from '../Button.js';
 import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 
 var _excluded = ["children", "multiple", "selectedIndexes", "onChange"];
@@ -23,8 +24,7 @@ var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
       setPickedIndexes(selectedIndexes);
     }
   }, [selectedIndexes]);
-  var updatedChildren = Children.map(children, function (child, index) {
-    var isSelected = pickedIndexes.includes(index);
+  function updateProps(child, isSelected, index) {
     var childElement = child;
     if ( /*#__PURE__*/isValidElement(child) && child.type === Button) {
       var buttonProps = {
@@ -47,6 +47,18 @@ var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
       };
       return /*#__PURE__*/cloneElement(child, buttonProps);
     }
+  }
+  var updatedChildren = Children.map(children, function (child, index) {
+    var isSelected = pickedIndexes.includes(index);
+    var childElement = child;
+    if ( /*#__PURE__*/isValidElement(child) && child.type === Tooltip) {
+      var updatedGrandChildren = Children.map(childElement.props.children, function (grandChild) {
+        return updateProps(grandChild, isSelected, index);
+      });
+      return /*#__PURE__*/cloneElement(childElement, null, updatedGrandChildren[0]);
+    } else {
+      return updateProps(childElement, isSelected, index);
+    }
   });
   return /*#__PURE__*/jsx(ButtonGroup, _objectSpread(_objectSpread({
     ref: ref

package/dist/esm/components/Dialog/Dialog.js

@@ -4,7 +4,7 @@ import { forwardRef, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, useToken, mergeRefs } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
-import { useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { jsx } from 'react/jsx-runtime';
 import { Scrim } from '../Scrim/Scrim.js';
 import { Paper } from '../Paper/Paper.js';
@@ -22,7 +22,7 @@ var StyledDialog = styled(Paper).attrs({
   componentId: "sc-1mewo3f-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", " ", " grid-gap:", ";"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
+  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";overflow:hidden;"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
 });
 var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
   var children = _ref2.children,

package/dist/esm/components/Dialog/DialogContent.js

@@ -13,12 +13,12 @@ var StyledDialogContent = styled.div.withConfig({
 })(function (_ref) {
   var theme = _ref.theme,
     scrollable = _ref.scrollable;
-  return css(["", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+  return css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, scrollable && css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
 });
 var StyledDivider = styled(Divider).withConfig({
   displayName: "DialogContent__StyledDivider",
   componentId: "sc-1tze18k-1"
-})(["width:100%;margin-bottom:0;"]);
+})(["width:100%;margin:0;"]);
 var DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
   var children = _ref2.children,
     _ref2$scrollable = _ref2.scrollable,

package/dist/esm/components/Input/Input.js

@@ -19,7 +19,7 @@ var Container = styled.div.withConfig({
     readOnly = _ref.readOnly;
   var states = token.states,
     entities = token.entities;
-  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:", ";", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));

package/dist/esm/components/Menu/Menu.js

@@ -4,9 +4,9 @@ import { forwardRef, useEffect, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
-import { bordersTemplate, useToken, mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
+import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
-import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react-dom-interactions';
+import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
@@ -32,7 +32,11 @@ var MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
   var _useMenu = useMenu(),
     setOnClose = _useMenu.setOnClose,
     onClose = _useMenu.onClose,
-    setInitialFocus = _useMenu.setInitialFocus;
+    setInitialFocus = _useMenu.setInitialFocus,
+    focusedIndex = _useMenu.focusedIndex;
+  var closeMenuOnClickIndexes = useMemo(function () {
+    return [];
+  }, []);
   useEffect(function () {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
@@ -72,7 +76,7 @@ var MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
     }
   });
   useGlobalKeyPress('Enter', function () {
-    if (open && onClose !== null) {
+    if (open && onClose !== null && closeMenuOnClickIndexes.includes(focusedIndex)) {
       setTimeout(function () {
         if (window.document.contains(anchorEl)) {
           anchorEl.focus();
@@ -80,7 +84,14 @@ var MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
       }, 0);
     }
   });
-  return /*#__PURE__*/jsx(MenuList, _objectSpread(_objectSpread({}, rest), {}, {
+  var addCloseMenuOnClickIndex = function addCloseMenuOnClickIndex(index) {
+    if (closeMenuOnClickIndexes.indexOf(index) < 0) {
+      closeMenuOnClickIndexes.push(index);
+    }
+  };
+  return /*#__PURE__*/jsx(MenuList, _objectSpread(_objectSpread({
+    addCloseMenuOnClickIndex: addCloseMenuOnClickIndex
+  }, rest), {}, {
     ref: ref,
     children: children
   }));
@@ -121,7 +132,7 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
   var popoverRef = useMemo(function () {
     return mergeRefs(floating, ref);
   }, [floating, ref]);
-  useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (refs.reference.current && refs.floating.current && open) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }

package/dist/esm/components/Menu/MenuItem.js

@@ -7,7 +7,7 @@ import { typographyTemplate, spacingsTemplate, outlineTemplate, mergeRefs } from
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "disabled", "index", "onClick"];
+var _excluded = ["children", "disabled", "index", "onClick", "closeMenuOnClick"];
 var typography = menu.typography,
   _tokens$entities = menu.entities,
   _tokens$entities$item = _tokens$entities.item.states,
@@ -45,6 +45,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     _ref5$index = _ref5.index,
     index = _ref5$index === void 0 ? 0 : _ref5$index,
     _onClick = _ref5.onClick,
+    _ref5$closeMenuOnClic = _ref5.closeMenuOnClick,
+    closeMenuOnClick = _ref5$closeMenuOnClic === void 0 ? true : _ref5$closeMenuOnClic,
     rest = _objectWithoutProperties(_ref5, _excluded);
   var _useMenu = useMenu(),
     focusedIndex = _useMenu.focusedIndex,
@@ -74,7 +76,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     onClick: function onClick(e) {
       if (_onClick) {
         _onClick(e);
-        if (onClose !== null) {
+        if (onClose !== null && closeMenuOnClick) {
           onClose(e);
         }
       }

package/dist/esm/components/Menu/MenuList.js

@@ -9,7 +9,7 @@ import { menu } from './Menu.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
+var _excluded = ["addCloseMenuOnClickIndex", "children"];
 var List = styled.div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
@@ -18,8 +18,13 @@ function isIndexable(item) {
   if ( /*#__PURE__*/isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
   return false;
 }
+function closeMenuOnClick(item) {
+  if ( /*#__PURE__*/isValidElement(item) && item.type === MenuItem && item.props.closeMenuOnClick !== false) return true;
+  return false;
+}
 var MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
-  var children = _ref.children,
+  var addCloseMenuOnClickIndex = _ref.addCloseMenuOnClickIndex,
+    children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useMenu = useMenu(),
     focusedIndex = _useMenu.focusedIndex,
@@ -48,12 +53,15 @@ var MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
       } else {
         index++;
         if (isIndexable(child)) focusableIndexs.push(index);
+        if (closeMenuOnClick(child)) {
+          addCloseMenuOnClickIndex(index);
+        }
         return /*#__PURE__*/cloneElement(child, {
           index: index
         });
       }
     });
-  }, [children, focusableIndexs, index]);
+  }, [children, focusableIndexs, index, addCloseMenuOnClickIndex]);
   var firstFocusIndex = focusableIndexs[0];
   var lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   useEffect(function () {

package/dist/esm/components/Paper/Paper.js

@@ -10,14 +10,15 @@ var StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
 })(["background:", ";box-shadow:", ";"], paper.background, function (_ref) {
-  var elevation = _ref.elevation;
-  return elevation;
+  var $elevation = _ref.$elevation;
+  return $elevation;
 });
 var Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
+  var _elevationToken$eleva;
   var elevation$1 = _ref2.elevation,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
-    elevation: elevation[elevation$1] || 'none'
+    $elevation: (_elevationToken$eleva = elevation[elevation$1]) !== null && _elevationToken$eleva !== void 0 ? _elevationToken$eleva : 'none'
   });
   return /*#__PURE__*/jsx(StyledPaper, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref

package/dist/esm/components/Popover/Popover.js

@@ -5,7 +5,7 @@ import { forwardRef, useRef, useEffect, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
-import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
@@ -69,10 +69,10 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
     floating = _useFloating.floating,
     strategy = _useFloating.strategy,
     context = _useFloating.context,
-    _useFloating$middlewa = _useFloating.middlewareData.arrow;
-  _useFloating$middlewa = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa;
-  var arrowX = _useFloating$middlewa.x,
-    arrowY = _useFloating$middlewa.y,
+    _useFloating$middlewa = _useFloating.middlewareData.arrow,
+    _useFloating$middlewa2 = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa,
+    arrowX = _useFloating$middlewa2.x,
+    arrowY = _useFloating$middlewa2.y,
     finalPlacement = _useFloating.placement;
   useEffect(function () {
     reference(anchorEl);

package/dist/esm/components/Scrim/Scrim.js

@@ -4,7 +4,7 @@ import { forwardRef, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
 import { mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
-import { FloatingOverlay } from '@floating-ui/react-dom-interactions';
+import { FloatingOverlay } from '@floating-ui/react';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "onClose", "open", "isDismissable"];

package/dist/esm/components/SideBar/SideBarToggle.js

@@ -1,4 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import { Button } from '../Button/index.js';
@@ -23,7 +24,7 @@ var ToggleContainer = styled.div.withConfig({
   return css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
 });
 var SideBarToggle = /*#__PURE__*/forwardRef(function SideBarToggle(_ref2, ref) {
-  var rest = _extends({}, _ref2);
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref
   });

package/dist/esm/components/Table/Cell.js

@@ -1,4 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import { InnerContext } from './Inner.context.js';
@@ -7,7 +8,7 @@ import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
 var Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
-  var rest = _extends({}, _ref);
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(InnerContext.Consumer, {
     children: function children(_ref2) {
       var variant = _ref2.variant,

package/dist/esm/components/Table/Row/Row.js

@@ -1,4 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
@@ -21,7 +22,7 @@ var StyledRow = styled.tr.withConfig({
   };
 });
 var Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
-  var props = _extends({}, _ref2);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var children = props.children;
   return /*#__PURE__*/jsx(StyledRow, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,

package/dist/esm/components/Tabs/TabPanel.js

@@ -1,4 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
@@ -19,7 +20,7 @@ var StyledTabPanel = styled.div.attrs(function () {
   return css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), typographyTemplate(panel.typography), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
 });
 var TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
-  var props = _extends({}, _ref2);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return /*#__PURE__*/jsx(StyledTabPanel, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {

package/dist/esm/components/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from '
 import styled from 'styled-components';
 import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
-import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss, FloatingPortal } from '@floating-ui/react-dom-interactions';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss, FloatingPortal } from '@floating-ui/react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["title", "placement", "children", "style", "enterDelay"];
@@ -54,10 +54,10 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
     floating = _useFloating.floating,
     strategy = _useFloating.strategy,
     context = _useFloating.context,
-    _useFloating$middlewa = _useFloating.middlewareData.arrow;
-  _useFloating$middlewa = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa;
-  var arrowX = _useFloating$middlewa.x,
-    arrowY = _useFloating$middlewa.y,
+    _useFloating$middlewa = _useFloating.middlewareData.arrow,
+    _useFloating$middlewa2 = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa,
+    arrowX = _useFloating$middlewa2.x,
+    arrowY = _useFloating$middlewa2.y,
     finalPlacement = _useFloating.placement;
   var anchorRef = useMemo(function () {
     return mergeRefs(reference, children === null || children === void 0 ? void 0 : children.ref);

package/dist/types/components/Accordion/Accordion.tokens.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentToken } from '@equinor/eds-tokens';
-declare type AccordionToken = ComponentToken & {
+type AccordionToken = ComponentToken & {
     entities: {
         chevron: ComponentToken;
         header: ComponentToken;

package/dist/types/components/Accordion/Accordion.types.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionProps = {
+export type AccordionProps = {
     /** The header level, i.e. h1, h2, h3 etc. */
     headerLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /** Which side the chevron should be on  */

package/dist/types/components/Accordion/AccordionHeader.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { AccordionProps } from './Accordion.types';
-export declare type AccordionHeaderProps = {
+export type AccordionHeaderProps = {
     /** The id of the button that toggles expansion */
     id?: string;
     /**  Is AccordionItem expanded */

package/dist/types/components/Accordion/AccordionHeaderActions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare type AccordionHeaderActionsProps = {
+export type AccordionHeaderActionsProps = {
     /**  Is AccordionItem expanded */
     isExpanded?: boolean;
     /** Accordion item is disabled */

package/dist/types/components/Accordion/AccordionHeaderTitle.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare type AccordionHeaderTitleProps = {
+export type AccordionHeaderTitleProps = {
     /**  Is AccordionItem expanded */
     isExpanded?: boolean;
     /** Accordion item is disabled */

package/dist/types/components/Accordion/AccordionItem.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { AccordionProps } from './Accordion.types';
-export declare type AccordionItemProps = {
+export type AccordionItemProps = {
     index?: number;
     accordionId?: string;
     /** Is AccordionItem expanded */

package/dist/types/components/Accordion/AccordionPanel.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare type AccordionPanelProps = {
+export type AccordionPanelProps = {
     /** The ID of the element that controls the panel */
     headerId?: string;
     /** The ID of the panel */

package/dist/types/components/Accordion/index.d.ts

@@ -5,7 +5,7 @@ import { AccordionHeaderTitle, AccordionHeaderTitleProps } from './AccordionHead
 import { AccordionHeaderActions, AccordionHeaderActionsProps } from './AccordionHeaderActions';
 import { AccordionPanel, AccordionPanelProps } from './AccordionPanel';
 import type { AccordionProps } from './Accordion.types';
-declare type AccordionCompoundProps = typeof BaseAccordion & {
+type AccordionCompoundProps = typeof BaseAccordion & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     HeaderTitle: typeof AccordionHeaderTitle;

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
-export declare type AutocompleteChanges<T> = {
+export type AutocompleteChanges<T> = {
     selectedItems: T[];
 };
-export declare type AutocompleteProps<T> = {
-    /** List of options to choose from */
+export type AutocompleteProps<T> = {
+    /** List of options in dropdown */
     options: T[];
     /** Label for the select element */
     label: string;
@@ -18,8 +18,8 @@ export declare type AutocompleteProps<T> = {
     /** Hide clear button even when items are selected */
     hideClearButton?: boolean;
     /** If this prop is used, the select will become a controlled component. Use an empty
-     * array [] if there will be no initial selected items
-     * Note that this prop replaces the need for ```initialSelectedItems```
+     * array [] if there will be no initial selected items.
+     * Note that this prop replaces the need for ```initialSelectedOptions```
      * The items that should be selected. */
     selectedOptions?: T[];
     /** Callback for the selected item change
@@ -34,20 +34,20 @@ export declare type AutocompleteProps<T> = {
     disablePortal?: boolean;
     /** Disable option */
     optionDisabled?: (option: T) => boolean;
-    /** Filter function for options */
+    /** Custom filter function for options */
     optionsFilter?: (option: T, inputValue: string) => boolean;
-    /** If `true` the width of the dropdown will adjust accordingly to width of the input */
+    /** If `true` the width of the dropdown will adjust to the width of the input */
     autoWidth?: boolean;
     /** Descriptive text for whats selected or about to be selected */
     placeholder?: string;
-    /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
+    /** Toggle if input is cleared when an option is selected when `multiple` is `true`*/
     clearSearchOnChange?: boolean;
     /** Will wrap overflowing text at the expence of some performance overhead to calculate item heigths. Mostly relevant in combination with autoWidth */
     multiline?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element;
 export declare const Autocomplete: <T>(props: {
-    /** List of options to choose from */
+    /** List of options in dropdown */
     options: T[];
     /** Label for the select element */
     label: string;
@@ -62,8 +62,8 @@ export declare const Autocomplete: <T>(props: {
     /** Hide clear button even when items are selected */
     hideClearButton?: boolean;
     /** If this prop is used, the select will become a controlled component. Use an empty
-     * array [] if there will be no initial selected items
-     * Note that this prop replaces the need for ```initialSelectedItems```
+     * array [] if there will be no initial selected items.
+     * Note that this prop replaces the need for ```initialSelectedOptions```
      * The items that should be selected. */
     selectedOptions?: T[];
     /** Callback for the selected item change
@@ -78,13 +78,13 @@ export declare const Autocomplete: <T>(props: {
     disablePortal?: boolean;
     /** Disable option */
     optionDisabled?: (option: T) => boolean;
-    /** Filter function for options */
+    /** Custom filter function for options */
     optionsFilter?: (option: T, inputValue: string) => boolean;
-    /** If `true` the width of the dropdown will adjust accordingly to width of the input */
+    /** If `true` the width of the dropdown will adjust to the width of the input */
     autoWidth?: boolean;
     /** Descriptive text for whats selected or about to be selected */
     placeholder?: string;
-    /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
+    /** Toggle if input is cleared when an option is selected when `multiple` is `true`*/
     clearSearchOnChange?: boolean;
     /** Will wrap overflowing text at the expence of some performance overhead to calculate item heigths. Mostly relevant in combination with autoWidth */
     multiline?: boolean;

package/dist/types/components/Autocomplete/Option.d.ts

@@ -1,5 +1,5 @@
 import { LiHTMLAttributes } from 'react';
-export declare type AutocompleteOptionProps = {
+export type AutocompleteOptionProps = {
     value: string;
     multiple: boolean;
     highlighted: string;

package/dist/types/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare type AvatarProps = {
+export type AvatarProps = {
     alt: string;
     /** Image source
      @default null */

package/dist/types/components/Avatar/Avatar.tokens.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentToken } from '@equinor/eds-tokens';
-declare type AvatarToken = ComponentToken & {
+type AvatarToken = ComponentToken & {
     states: {
         disabled: {
             opacity: string;

package/dist/types/components/Banner/Banner.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import type { Elevations } from '@equinor/eds-tokens';
-declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>;
-export declare type BannerProps = {
+type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>;
+export type BannerProps = {
     elevation?: AvailableElevations;
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;

package/dist/types/components/Banner/Banner.tokens.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentToken } from '@equinor/eds-tokens';
-export declare type BannerToken = ComponentToken & {
+export type BannerToken = ComponentToken & {
     entities: {
         icon: ComponentToken;
     };

package/dist/types/components/Banner/BannerActions.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-declare type BannerActionsPlacement = 'bottom' | 'left';
-export declare type BannerActionsProps = {
+type BannerActionsPlacement = 'bottom' | 'left';
+export type BannerActionsProps = {
     children: ReactNode;
     placement?: BannerActionsPlacement;
 } & HTMLAttributes<HTMLDivElement>;

package/dist/types/components/Banner/BannerIcon.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-declare type BannerIconVariant = 'info' | 'warning';
-export declare type BannerIconProps = {
+type BannerIconVariant = 'info' | 'warning';
+export type BannerIconProps = {
     /** Which icon background and fill color to use. Info = green, warning = red */
     variant?: BannerIconVariant;
     /** @ignore */

package/dist/types/components/Banner/BannerMessage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TypographyProps } from '../Typography/Typography';
-export declare type BannerMessageProps = {
+export type BannerMessageProps = {
     /** Text content */
     children: string;
 } & Omit<TypographyProps, 'children'>;

package/dist/types/components/Banner/index.d.ts

@@ -2,7 +2,7 @@ import { Banner as BaseBanner, BannerProps } from './Banner';
 import { BannerIcon, BannerIconProps } from './BannerIcon';
 import { BannerMessage, BannerMessageProps } from './BannerMessage';
 import { BannerActions, BannerActionsProps } from './BannerActions';
-declare type BannerCompoundProps = typeof BaseBanner & {
+type BannerCompoundProps = typeof BaseBanner & {
     Icon: typeof BannerIcon;
     Message: typeof BannerMessage;
     Actions: typeof BannerActions;