@equinor/eds-core-react 0.20.1 → 0.20.3

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

@@ -3,9 +3,10 @@ import styled, { css } from 'styled-components';
 import { chevron_up, chevron_down } from '@equinor/eds-icons';
 import { Icon } from '../Icon/index.js';
 import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { AccordionHeaderActions } from './AccordionHeaderActions.js';
 import { accordion } from './Accordion.tokens.js';
-import { typographyTemplate, bordersTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
-import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const {
   entities: {
@@ -15,13 +16,37 @@ const {
 const StyledAccordionHeader = styled.div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["margin:0;padding:0;"]);
-const StyledAccordionHeaderButton = styled.button.attrs(_ref => {
+})(_ref => {
+  let {
+    theme,
+    disabled,
+    parentIndex
+  } = _ref;
+  const {
+    entities: {
+      header
+    },
+    border
+  } = theme;
+  return css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, bordersTemplate(border), parentIndex === 0 ? null : 'none', disabled ? css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : css({
+    color: header.typography.color,
+    cursor: 'pointer',
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header.states.hover.background
+      }
+    }
+  }));
+});
+const StyledAccordionHeaderButton = styled.button.attrs(_ref2 => {
   let {
     panelId,
     isExpanded,
     disabled
-  } = _ref;
+  } = _ref2;
   return {
     'aria-expanded': isExpanded,
     'aria-controls': panelId,
@@ -32,46 +57,39 @@ const StyledAccordionHeaderButton = styled.button.attrs(_ref => {
 }).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeaderButton",
   componentId: "sc-cu2e95-1"
-})(_ref2 => {
+})(_ref3 => {
   let {
     theme,
-    disabled,
-    parentIndex
-  } = _ref2;
+    disabled
+  } = _ref3;
   const {
     entities: {
       header,
       icon: iconToken
-    },
-    border
+    }
   } = theme;
-  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";width:100%;background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
+  return css(["", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border:0;background-color:transparent;margin:0;display:flex;align-items:center;flex-grow:1;", " > svg{color:", ";}"], typographyTemplate(header.typography), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
   }) : css({
     color: header.typography.color,
-    cursor: 'pointer',
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: header.states.hover.background
-      }
-    }
+    cursor: 'pointer'
   }), iconToken.typography.color);
 });
 const StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
-})(_ref3 => {
+})(_ref4 => {
   let {
     chevronPosition
-  } = _ref3;
+  } = _ref4;
   return chevronPosition === 'left' ? {
     marginRight: '32px'
   } : {
     marginLeft: '16px'
   };
 });
-const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4, ref) {
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, ref) {
   let {
     parentIndex,
     headerLevel,
@@ -83,7 +101,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
     toggleExpanded,
     disabled,
     ...props
-  } = _ref4;
+  } = _ref5;
 
   const handleClick = () => {
     if (!disabled) {
@@ -134,14 +152,27 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
       });
     }
 
+    if (child.type === AccordionHeaderActions) {
+      return;
+    }
+
     return child;
   });
+  const headerActions = Children.map(children, child => {
+    if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderActions) {
+      return /*#__PURE__*/cloneElement(child, {
+        isExpanded,
+        disabled
+      });
+    }
+  });
   const newChildren = [chevron, headerChildren];
-  return /*#__PURE__*/jsx(StyledAccordionHeader, {
+  return /*#__PURE__*/jsxs(StyledAccordionHeader, {
+    disabled: disabled,
+    parentIndex: parentIndex,
     as: headerLevel,
-    children: /*#__PURE__*/jsx(StyledAccordionHeaderButton, {
+    children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, {
       isExpanded: isExpanded,
-      parentIndex: parentIndex,
       disabled: disabled,
       panelId: panelId,
       onClick: handleClick,
@@ -149,8 +180,8 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
       ref: ref,
       ...props,
       children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
-    })
+    }), headerActions && headerActions]
   });
-}); // AccordionHeader.displayName = 'EdsAccordionHeader'
+});
 
 export { AccordionHeader };

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

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledAccordionHeaderActions = styled.span.withConfig({
+  displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
+  componentId: "sc-klu9el-0"
+})(_ref => {
+  var _header$states$active;
+
+  let {
+    theme,
+    isExpanded,
+    disabled
+  } = _ref;
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  return css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : css({
+    color: header.typography.color,
+    cursor: 'pointer'
+  }), isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+});
+const AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderActions(_ref2, ref) {
+  let {
+    isExpanded,
+    disabled,
+    children
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledAccordionHeaderActions, {
+    ref: ref,
+    isExpanded: isExpanded,
+    disabled: disabled,
+    children: children
+  });
+});
+
+export { AccordionHeaderActions };

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

@@ -6,14 +6,19 @@ const StyledAccordionHeaderTitle = styled.span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
 })(_ref => {
-  var _theme$entities$heade;
+  var _header$states$active;
 
   let {
     theme,
     isExpanded,
     disabled
   } = _ref;
-  return css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  return css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
   let {

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

@@ -2,16 +2,19 @@ import { Accordion as Accordion$1 } from './Accordion.js';
 import { AccordionItem } from './AccordionItem.js';
 import { AccordionHeader } from './AccordionHeader.js';
 import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { AccordionHeaderActions } from './AccordionHeaderActions.js';
 import { AccordionPanel } from './AccordionPanel.js';
 
 const Accordion = Accordion$1;
 Accordion.Item = AccordionItem;
 Accordion.Header = AccordionHeader;
 Accordion.HeaderTitle = AccordionHeaderTitle;
+Accordion.HeaderActions = AccordionHeaderActions;
 Accordion.Panel = AccordionPanel;
 Accordion.Item.displayName = 'Accordion.Item';
 Accordion.Header.displayName = 'Accordion.Header';
 Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
+Accordion.HeaderActions.displayName = 'Accordion.HeaderActions';
 Accordion.Panel.displayName = 'Accordion.Panel';
 
 export { Accordion };

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

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
@@ -38,7 +38,7 @@ const StyledList = styled(List).withConfig({
   let {
     theme
   } = _ref2;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:50;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return 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, bordersTemplate(theme.border));
 });
 const StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -149,7 +149,19 @@ function AutocompleteInner(props, ref) {
   const [containerEl, setContainerEl] = useState();
   const isMounted = useIsMounted();
   const isControlled = Boolean(selectedOptions);
-  const [availableItems, setAvailableItems] = useState(options);
+  const [inputOptions, setInputOptions] = useState(options);
+  useEffect(() => {
+    const availableHash = JSON.stringify(inputOptions);
+    const optionsHash = JSON.stringify(options);
+
+    if (availableHash !== optionsHash) {
+      setInputOptions(options);
+    }
+  }, [options, inputOptions]);
+  useEffect(() => {
+    setAvailableItems(inputOptions);
+  }, [inputOptions]);
+  const [availableItems, setAvailableItems] = useState(inputOptions);
   const disabledItems = useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
   const {
     density
@@ -159,18 +171,28 @@ function AutocompleteInner(props, ref) {
   }, multiple ? multiSelect : selectTokens);
   let placeholderText = placeholder;
   let multipleSelectionProps = {
-    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : [],
-    onSelectedItemsChange: changes => {
-      if (onOptionsChange) {
-        onOptionsChange(changes);
-      }
-    }
+    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
 
-  if (isControlled) {
+  if (multiple) {
     multipleSelectionProps = { ...multipleSelectionProps,
-      selectedItems: selectedOptions
+      onSelectedItemsChange: changes => {
+        if (onOptionsChange) {
+          const {
+            selectedItems
+          } = changes;
+          onOptionsChange({
+            selectedItems
+          });
+        }
+      }
     };
+
+    if (isControlled) {
+      multipleSelectionProps = { ...multipleSelectionProps,
+        selectedItems: selectedOptions
+      };
+    }
   }
 
   const {
@@ -224,9 +246,11 @@ function AutocompleteInner(props, ref) {
       let {
         selectedItem
       } = _ref8;
-
       // Show all options when single select is reopened with a selected item
-      if (availableItems.length === 1 && selectedItem === availableItems[0]) {
+      const availableHash = JSON.stringify(availableItems[0]);
+      const selectedsHash = JSON.stringify(selectedItem);
+
+      if (availableItems.length === 1 && selectedsHash === availableHash) {
         setAvailableItems(options);
       }
     },
@@ -289,7 +313,17 @@ function AutocompleteInner(props, ref) {
 
   if (isControlled && !multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0]
+      selectedItem: selectedOptions[0] || null,
+      onSelectedItemChange: changes => {
+        if (onOptionsChange) {
+          const {
+            selectedItem
+          } = changes;
+          onOptionsChange({
+            selectedItems: selectedItem ? [selectedItem] : []
+          });
+        }
+      }
     };
   }
 
@@ -361,8 +395,10 @@ function AutocompleteInner(props, ref) {
     reset: resetCombobox
   } = useCombobox(comboBoxProps);
   useEffect(() => {
-    if (anchorRef.current) {
+    if (anchorRef.current && isOpen) {
       setAnchorEl(anchorRef.current);
+    } else {
+      setAnchorEl(null);
     }
 
     if (isControlled) {
@@ -373,7 +409,16 @@ function AutocompleteInner(props, ref) {
       setAnchorEl(null);
       setContainerEl(null);
     };
-  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]);
+  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]); //"Turn on" popper on load to position menu correctly and then turn it off
+
+  useEffect(() => {
+    if (anchorRef.current) {
+      setAnchorEl(anchorRef.current);
+      setTimeout(() => {
+        setAnchorEl(null);
+      }, 1);
+    }
+  }, []);
   const {
     styles,
     attributes

package/dist/esm/components/Banner/Banner.js

@@ -1,19 +1,16 @@
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
+import { Paper } from '../Paper/Paper.js';
 import { enabled } from './Banner.tokens.js';
 import { Divider } from '../Divider/Divider.js';
 import { BannerIcon } from './BannerIcon.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-const StyledBanner = styled.div.withConfig({
-  displayName: "Banner__StyledBanner",
-  componentId: "sc-1ju451i-0"
-})([""]);
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",
-  componentId: "sc-1ju451i-1"
+  componentId: "sc-1ju451i-0"
 })(_ref => {
   let {
     theme,
@@ -23,12 +20,13 @@ const Content = styled.div.withConfig({
 });
 const NonMarginDivider = styled(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
-  componentId: "sc-1ju451i-2"
+  componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
 const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
   let {
     children,
     className,
+    elevation = 'none',
     ...rest
   } = _ref2;
   const childrenWhereBannerIcon = Children.map(children, child => {
@@ -47,8 +45,9 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
   }, enabled);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(StyledBanner, { ...props,
+    children: /*#__PURE__*/jsxs(Paper, { ...props,
       className: className,
+      elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsx(Content, {
         hasIcon: hasIcon,

package/dist/esm/components/Card/Card.js

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { Paper } from '../Paper/Paper.js';
 import * as Card_tokens from './Card.tokens.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
@@ -7,7 +8,7 @@ import { jsx } from 'react/jsx-runtime';
 const {
   primary
 } = Card_tokens;
-const StyledCard = styled.div.withConfig({
+const StyledCard = styled(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 => {
@@ -25,6 +26,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
   let {
     children,
     variant = 'default',
+    elevation = 'none',
     onClick,
     ...rest
   } = _ref3;
@@ -37,7 +39,9 @@ const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
     cursor,
     ...rest
   };
-  return /*#__PURE__*/jsx(StyledCard, { ...props,
+  return /*#__PURE__*/jsx(StyledCard, {
+    elevation: elevation,
+    ...props,
     onClick: onClick,
     children: children
   });

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

@@ -6,7 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 const StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
+})(["background:", ";box-shadow:", ";"], paper.background, _ref => {
   let {
     elevation
   } = _ref;

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

@@ -11,8 +11,6 @@ const {
   }
 } = tokens;
 const paper = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
   background
 };
 

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

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
+import { spacingsTemplate, typographyTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledTab = styled.button.attrs(_ref => {
@@ -29,7 +29,7 @@ const StyledTab = styled.button.attrs(_ref => {
       tab
     }
   } = theme;
-  return css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
+  return css(["appearance:none;box-sizing:border-box;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), typographyTemplate(tab.typography), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
 });
 const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsx(StyledTab, {

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

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { spacingsTemplate, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledTabPanel = styled.div.attrs(() => ({
@@ -18,7 +18,7 @@ const StyledTabPanel = styled.div.attrs(() => ({
       panel
     }
   } = theme;
-  return css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
+  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));
 });
 const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
   let { ...props

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

@@ -39,6 +39,12 @@ const {
     focused: {
       width: focusOutlineWidth
     }
+  },
+  typography: {
+    navigation: {
+      menu_tabs,
+      menu_title
+    }
   }
 } = tokens;
 const token = {
@@ -57,6 +63,8 @@ const token = {
             color: focusOutlineColor
           }
         }
+      },
+      typography: { ...menu_title
       }
     },
     tab: {
@@ -74,7 +82,8 @@ const token = {
       },
       typography: {
         color: defaultColor,
-        textAlign: 'center'
+        textAlign: 'center',
+        ...menu_tabs
       },
       border: {
         type: 'bordergroup',

package/dist/esm/components/TopBar/TopBar.js

@@ -1,11 +1,12 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
+import { Paper } from '../Paper/Paper.js';
 import { topbar } from './TopBar.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledTopBar = styled.header.withConfig({
+const StyledTopBar = styled(Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
 })(_ref => {
@@ -17,6 +18,7 @@ const StyledTopBar = styled.header.withConfig({
 const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
+    elevation = 'none',
     ...props
   } = _ref2;
   const {
@@ -25,10 +27,15 @@ const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
   const token = useToken({
     density
   }, topbar);
+  const rest = { ...props,
+    ref
+  };
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(StyledTopBar, { ...props,
-      ref: ref,
+    children: /*#__PURE__*/jsx(StyledTopBar, {
+      forwardedAs: 'header',
+      elevation: elevation,
+      ...rest,
       children: children
     })
   });

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export declare type AccordionHeaderActionsProps = {
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const AccordionHeaderActions: import("react").ForwardRefExoticComponent<{
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export { AccordionHeaderActions };

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

@@ -2,14 +2,16 @@ import { Accordion as BaseAccordion } from './Accordion';
 import { AccordionItem, AccordionItemProps } from './AccordionItem';
 import { AccordionHeader, AccordionHeaderProps } from './AccordionHeader';
 import { AccordionHeaderTitle, AccordionHeaderTitleProps } from './AccordionHeaderTitle';
+import { AccordionHeaderActions, AccordionHeaderActionsProps } from './AccordionHeaderActions';
 import { AccordionPanel, AccordionPanelProps } from './AccordionPanel';
 import type { AccordionProps } from './Accordion.types';
 declare type AccordionCompoundProps = typeof BaseAccordion & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     HeaderTitle: typeof AccordionHeaderTitle;
+    HeaderActions: typeof AccordionHeaderActions;
     Panel: typeof AccordionPanel;
 };
 declare const Accordion: AccordionCompoundProps;
 export { Accordion };
-export type { AccordionProps, AccordionPanelProps, AccordionHeaderProps, AccordionHeaderTitleProps, AccordionItemProps, };
+export type { AccordionProps, AccordionPanelProps, AccordionHeaderProps, AccordionHeaderTitleProps, AccordionHeaderActionsProps, AccordionItemProps, };

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { UseMultipleSelectionProps } from 'downshift';
-export declare type AutocompleteChanges<T> = UseMultipleSelectionProps<T>;
+export declare type AutocompleteChanges<T> = {
+    selectedItems: T[];
+};
 export declare type AutocompleteProps<T> = {
     /** List of options to choose from */
     options: T[];

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

@@ -1,7 +1,12 @@
 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 = {
+    elevation?: AvailableElevations;
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Banner: import("react").ForwardRefExoticComponent<{
+    elevation?: AvailableElevations;
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};