@equinor/eds-core-react 0.20.2 → 0.20.5-dev.20220701

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

@@ -75,8 +75,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 +100,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 +154,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 +419,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight(button, {
+const primary$a = mergeDeepRight(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -437,7 +437,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 +451,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 +504,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight(button, {
+const primary$9 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$7
   },
@@ -533,7 +533,7 @@ const primary$8 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight(primary$8, {
+const secondary$4 = mergeDeepRight(primary$9, {
   typography: {
     color: secondaryColor$2
   },
@@ -552,7 +552,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 +605,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -624,7 +624,7 @@ const primary$7 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$2 = mergeDeepRight(primary$7, {
+const secondary$3 = mergeDeepRight(primary$8, {
   typography: {
     color: secondaryColor$1
   },
@@ -637,7 +637,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 +681,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 +707,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 +735,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 +760,7 @@ const secondary$1 = mergeDeepRight(primary$6, {
     }
   }
 });
-const danger$2 = mergeDeepRight(primary$6, {
+const danger$3 = mergeDeepRight(primary$7, {
   typography: {
     color: dangerColor
   },
@@ -774,24 +774,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 +914,9 @@ const getVariant = (tokenSet, variant) => {
     case 'outlined':
       return tokenSet.outlined;
 
+    case 'contained_icon':
+      return tokenSet.contained_icon;
+
     case 'contained':
     default:
       return tokenSet.contained;
@@ -2720,6 +2777,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     inputIcon,
     helperIcon,
     rowsMax,
+    style,
     ...other
   } = _ref;
   const helperTextId = edsUtils.useId(null, 'helpertext');
@@ -2746,7 +2804,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
   const containerProps = {
     ref,
     className,
-    style: other.style
+    style
   };
   const labelProps = {
     htmlFor: id,
@@ -2860,7 +2918,7 @@ const findIcon = (name, data, size) => {
 
 const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   let {
-    size = 24,
+    size,
     color = 'currentColor',
     name,
     rotation,
@@ -3518,6 +3576,12 @@ const {
     focused: {
       width: focusOutlineWidth$5
     }
+  },
+  typography: {
+    navigation: {
+      menu_tabs,
+      menu_title
+    }
   }
 } = edsTokens.tokens;
 const token$1 = {
@@ -3536,6 +3600,8 @@ const token$1 = {
             color: focusOutlineColor$5
           }
         }
+      },
+      typography: { ...menu_title
       }
     },
     tab: {
@@ -3553,7 +3619,8 @@ const token$1 = {
       },
       typography: {
         color: defaultColor,
-        textAlign: 'center'
+        textAlign: 'center',
+        ...menu_tabs
       },
       border: {
         type: 'bordergroup',
@@ -3830,7 +3897,7 @@ const StyledTab = styled__default["default"].button.attrs(_ref => {
       tab
     }
   } = theme;
-  return styled.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, edsUtils.spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), active && edsUtils.bordersTemplate(tab.states.active.border));
+  return styled.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, edsUtils.spacingsTemplate(tab.spacings), edsUtils.typographyTemplate(tab.typography), active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), active && edsUtils.bordersTemplate(tab.states.active.border));
 });
 const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, {
@@ -3875,7 +3942,7 @@ const StyledTabPanel = styled__default["default"].div.attrs(() => ({
       panel
     }
   } = theme;
-  return styled.css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
+  return styled.css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
 });
 const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(_ref2, ref) {
   let { ...props
@@ -3898,10 +3965,46 @@ Tabs.Panel.displayName = 'Tabs.Panel';
 Tabs.List.displayName = 'Tabs.List';
 
 const {
+  elevation,
   colors: {
     ui: {
       background__default: {
         rgba: background$c
+      }
+    }
+  }
+} = edsTokens.tokens;
+const paper = {
+  background: background$c
+};
+
+const StyledPaper = styled__default["default"].div.withConfig({
+  displayName: "Paper__StyledPaper",
+  componentId: "sc-6ncnv9-0"
+})(["background:", ";box-shadow:", ";"], paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    elevation: elevation[elevation$1] || 'none'
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
+    ref: ref
+  });
+});
+
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background$b
       },
       background__info: {
         rgba: backgroundInfo
@@ -3926,7 +4029,7 @@ const {
   }
 } = edsTokens.tokens;
 const primary$4 = {
-  background: background$c,
+  background: background$b,
   border: {
     type: 'border',
     radius: borderRadius$8
@@ -3959,7 +4062,7 @@ var tokens$4 = /*#__PURE__*/Object.freeze({
 const {
   primary: primary$3
 } = tokens$4;
-const StyledCard = styled__default["default"].div.withConfig({
+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 => {
@@ -3977,6 +4080,7 @@ const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
   let {
     children,
     variant = 'default',
+    elevation = 'none',
     onClick,
     ...rest
   } = _ref3;
@@ -3989,7 +4093,9 @@ const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
     cursor,
     ...rest
   };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, { ...props,
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, {
+    elevation: elevation,
+    ...props,
     onClick: onClick,
     children: children
   });
@@ -4156,7 +4262,7 @@ const topbar = {
   }
 };
 
-const StyledTopBar = styled__default["default"].header.withConfig({
+const StyledTopBar = styled__default["default"](Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
 })(_ref => {
@@ -4168,6 +4274,7 @@ const StyledTopBar = styled__default["default"].header.withConfig({
 const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
+    elevation = 'none',
     ...props
   } = _ref2;
   const {
@@ -4176,10 +4283,15 @@ const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   const token = edsUtils.useToken({
     density
   }, topbar);
+  const rest = { ...props,
+    ref
+  };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, { ...props,
-      ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, {
+      forwardedAs: 'header',
+      elevation: elevation,
+      ...rest,
       children: children
     })
   });
@@ -4241,44 +4353,6 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
-const {
-  elevation,
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background$b
-      }
-    }
-  }
-} = edsTokens.tokens;
-const paper = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
-  background: background$b
-};
-
-const StyledPaper = styled__default["default"].div.withConfig({
-  displayName: "Paper__StyledPaper",
-  componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
-  let {
-    elevation
-  } = _ref;
-  return elevation;
-});
-const Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
-  let {
-    elevation: elevation$1,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
-    elevation: elevation[elevation$1] || 'none'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
-    ref: ref
-  });
-});
-
 const {
   colors: {
     ui: {
@@ -6827,13 +6901,9 @@ const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref)
   });
 });
 
-const StyledBanner = styled__default["default"].div.withConfig({
-  displayName: "Banner__StyledBanner",
-  componentId: "sc-1ju451i-0"
-})([""]);
 const Content$1 = styled__default["default"].div.withConfig({
   displayName: "Banner__Content",
-  componentId: "sc-1ju451i-1"
+  componentId: "sc-1ju451i-0"
 })(_ref => {
   let {
     theme,
@@ -6843,12 +6913,13 @@ const Content$1 = styled__default["default"].div.withConfig({
 });
 const NonMarginDivider = styled__default["default"](Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
-  componentId: "sc-1ju451i-2"
+  componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
 const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   let {
     children,
     className,
+    elevation = 'none',
     ...rest
   } = _ref2;
   const childrenWhereBannerIcon = react.Children.map(children, child => {
@@ -6867,8 +6938,9 @@ const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   }, enabled);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(StyledBanner, { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Paper, { ...props,
       className: className,
+      elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
         hasIcon: hasIcon,
@@ -10238,10 +10310,12 @@ 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]) {
-        setAvailableItems(options);
+      const availableHash = JSON.stringify(availableItems[0]);
+      const selectedsHash = JSON.stringify(selectedItem);
+
+      if (availableItems.length === 1 && selectedsHash === availableHash) {
+        setAvailableItems(inputOptions);
       }
     },
     onStateChange: _ref9 => {
@@ -10301,20 +10375,25 @@ function AutocompleteInner(props, ref) {
     }
   };
 
-  if (isControlled && !multiple) {
+  if (!multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0] || null,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
           const {
             selectedItem
           } = changes;
           onOptionsChange({
-            selectedItems: [selectedItem]
+            selectedItems: selectedItem ? [selectedItem] : []
           });
         }
       }
     };
+
+    if (isControlled) {
+      comboBoxProps = { ...comboBoxProps,
+        selectedItem: selectedOptions[0] || null
+      };
+    }
   }
 
   if (multiple) {

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

@@ -246,10 +246,12 @@ 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]) {
-        setAvailableItems(options);
+      const availableHash = JSON.stringify(availableItems[0]);
+      const selectedsHash = JSON.stringify(selectedItem);
+
+      if (availableItems.length === 1 && selectedsHash === availableHash) {
+        setAvailableItems(inputOptions);
       }
     },
     onStateChange: _ref9 => {
@@ -309,20 +311,25 @@ function AutocompleteInner(props, ref) {
     }
   };
 
-  if (isControlled && !multiple) {
+  if (!multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0] || null,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
           const {
             selectedItem
           } = changes;
           onOptionsChange({
-            selectedItems: [selectedItem]
+            selectedItems: selectedItem ? [selectedItem] : []
           });
         }
       }
     };
+
+    if (isControlled) {
+      comboBoxProps = { ...comboBoxProps,
+        selectedItem: selectedOptions[0] || null
+      };
+    }
   }
 
   if (multiple) {

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/Button/Button.js

@@ -17,6 +17,9 @@ const getVariant = (tokenSet, variant) => {
     case 'outlined':
       return tokenSet.outlined;
 
+    case 'contained_icon':
+      return tokenSet.contained_icon;
+
     case 'contained':
     default:
       return tokenSet.contained;

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -0,0 +1,56 @@
+import { tokens } from '@equinor/eds-tokens';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
+
+const {
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape
+} = tokens;
+const contained_icon = {
+  height: shape.icon_button.minHeight,
+  width: shape.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._modes.compact.icon_button.minHeight,
+      width: shape._modes.compact.icon_button.minWidth,
+      clickbound: {
+        width: compactClickboundHeight,
+        offset: {
+          top: '0',
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+        }
+      }
+    }
+  }
+};
+const primary = mergeDeepRight(primary$1, contained_icon);
+const secondary = mergeDeepRight(secondary$1, contained_icon);
+const danger = mergeDeepRight(danger$1, contained_icon);
+
+export { danger, primary, secondary };

package/dist/esm/components/Button/tokens/index.js

@@ -2,25 +2,29 @@ import { primary, secondary, danger } from './contained.js';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './outlined.js';
 import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.js';
 import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
+import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.js';
 
 const token = {
   primary: {
     contained: primary,
     outlined: primary$1,
     ghost: primary$2,
-    ghost_icon: primary$3
+    ghost_icon: primary$3,
+    contained_icon: primary$4
   },
   secondary: {
     contained: secondary,
     outlined: secondary$1,
     ghost: secondary$2,
-    ghost_icon: secondary$3
+    ghost_icon: secondary$3,
+    contained_icon: secondary$4
   },
   danger: {
     contained: danger,
     outlined: danger$1,
     ghost: danger$2,
-    ghost_icon: danger$3
+    ghost_icon: danger$3,
+    contained_icon: danger$4
   }
 };
 

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/Icon/Icon.js

@@ -70,7 +70,7 @@ const findIcon = (name, data, size) => {
 
 const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
   let {
-    size = 24,
+    size,
     color = 'currentColor',
     name,
     rotation,

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/TextField/TextField.js

@@ -29,6 +29,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     inputIcon,
     helperIcon,
     rowsMax,
+    style,
     ...other
   } = _ref;
   const helperTextId = useId(null, 'helpertext');
@@ -55,7 +56,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   const containerProps = {
     ref,
     className,
-    style: other.style
+    style
   };
   const labelProps = {
     htmlFor: id,

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/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 {};

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

@@ -1,9 +1,11 @@
 import { ElementType, ButtonHTMLAttributes } from 'react';
+declare type Colors = 'primary' | 'secondary' | 'danger';
+declare type Variants = 'contained' | 'contained_icon' | 'outlined' | 'ghost' | 'ghost_icon';
 export declare type ButtonProps = {
     /**  Specifies color */
-    color?: 'primary' | 'secondary' | 'danger';
+    color?: Colors;
     /** Specifies which variant to use */
-    variant?: 'contained' | 'outlined' | 'ghost' | 'ghost_icon';
+    variant?: Variants;
     /**
      * URL link destination
      * If defined, an 'a' element is used as root instead of 'button'
@@ -22,9 +24,9 @@ export declare type ButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: import("react").ForwardRefExoticComponent<{
     /**  Specifies color */
-    color?: 'primary' | 'secondary' | 'danger';
+    color?: Colors;
     /** Specifies which variant to use */
-    variant?: 'contained' | 'outlined' | 'ghost' | 'ghost_icon';
+    variant?: Variants;
     /**
      * URL link destination
      * If defined, an 'a' element is used as root instead of 'button'
@@ -41,3 +43,4 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     /** FullWidth (stretched) button  */
     fullWidth?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -6,6 +6,7 @@ export declare type ButtonToken = ComponentToken & {
 };
 export declare type ButtonTokenSet = {
     contained: ButtonToken;
+    contained_icon: ButtonToken;
     outlined: ButtonToken;
     ghost: ButtonToken;
     ghost_icon: ButtonToken;

package/dist/types/components/Button/tokens/contained_icon.d.ts

@@ -0,0 +1,4 @@
+import { ButtonToken } from '../Button.types';
+export declare const primary: ButtonToken;
+export declare const secondary: Partial<ButtonToken>;
+export declare const danger: Partial<ButtonToken>;

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

@@ -1,9 +1,16 @@
 import { HTMLAttributes } from 'react';
+import type { Elevations } from '@equinor/eds-tokens';
+declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>;
 export declare type CardProps = {
     /** Variant */
     variant?: 'default' | 'info' | 'warning' | 'danger';
+    /** Elevation */
+    elevation?: AvailableElevations;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Card: import("react").ForwardRefExoticComponent<{
     /** Variant */
     variant?: 'default' | 'info' | 'warning' | 'danger';
+    /** Elevation */
+    elevation?: AvailableElevations;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/Select/commonStyles.d.ts

@@ -21,7 +21,7 @@ export declare const StyledList: import("styled-components").StyledComponent<imp
 export declare const StyledListItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../List").ListItemProps & import("react").RefAttributes<HTMLLIElement>>, import("styled-components").DefaultTheme, StyledListItemType, never>;
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     color?: "primary" | "secondary" | "danger";
-    variant?: "contained" | "outlined" | "ghost" | "ghost_icon";
+    variant?: "contained" | "contained_icon" | "outlined" | "ghost" | "ghost_icon";
     href?: string;
     disabled?: boolean;
     as?: import("react").ElementType<any>;

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

@@ -1,3 +1,10 @@
 import { HTMLAttributes } from 'react';
-export declare type TopbarProps = HTMLAttributes<HTMLElement>;
-export declare const TopBar: import("react").ForwardRefExoticComponent<TopbarProps & import("react").RefAttributes<HTMLElement>>;
+import type { Elevations } from '@equinor/eds-tokens';
+declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised'>;
+export declare type TopbarProps = {
+    elevation?: AvailableElevations;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const TopBar: import("react").ForwardRefExoticComponent<{
+    elevation?: AvailableElevations;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.20.2",
+  "version": "0.20.5-dev.20220701",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -86,13 +86,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@equinor/eds-icons": "0.11.0",
+    "@equinor/eds-icons": "0.12.0",
     "@equinor/eds-tokens": "0.7.1",
-    "@equinor/eds-utils": "0.2.2",
+    "@equinor/eds-utils": "0.2.3",
     "@popperjs/core": "2.9.2",
     "downshift": "^6.1.7",
-    "react-fast-compare": "3.2.0",
-    "react-popper": "2.2.5"
+    "react-fast-compare": "3.2.0"
   },
   "engines": {
     "pnpm": ">=4",
@@ -100,13 +99,13 @@
   },
   "browserslist": "defaults, not IE 11",
   "scripts": {
-    "build": "rollup -c && tsc -p tsconfig.json",
+    "build": "rollup -c && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.test.json && jest",
     "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
     "storybook": "start-storybook -p 9000 --ci",
     "build:storybook": "build-storybook -o storybook-build",
-    "types": "tsc"
+    "types": "tsc -p tsconfig.build.json"
   },
   "module": "dist/esm/index.js"
 }