@equinor/eds-core-react 0.15.0-dev.20211116v2 → 0.16.1-dev.12072021

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

@@ -30,7 +30,7 @@ const StyledAccordionHeader = styled.div.attrs(({
 })).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(accordion.border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), ({
+})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(accordion.border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), ({
   parentIndex
 }) => parentIndex === 0 ? null : 'none', header.background, header.height, ({
   disabled
@@ -99,7 +99,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, `${id}-icon`);
+  }, "".concat(id, "-icon"));
 
   const headerChildren = Children.map(children, child => {
     if (typeof child === 'string') {

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

@@ -18,8 +18,8 @@ const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
   };
 
   const Children$1 = Children.map(children, (child, childIndex) => {
-    const headerId = `${accordionId}-header-${index + 1}`;
-    const panelId = `${accordionId}-panel-${index + 1}`;
+    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
+    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
       isExpanded: expanded,
       toggleExpanded,

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

@@ -86,7 +86,7 @@ const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs({
         children: "/"
       })
     })]
-  }, `breadcrumb-${index}`));
+  }, "breadcrumb-".concat(index)));
   return /*#__PURE__*/jsx("nav", { ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {

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

@@ -61,7 +61,7 @@ const ButtonBase = styled.button.withConfig({
     hover,
     disabled
   } = states;
-  return css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
 const Button = /*#__PURE__*/forwardRef(function Button({
   color = 'primary',

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

@@ -66,7 +66,7 @@ const button = {
     height: clicboundHeight,
     width: '100%',
     offset: {
-      top: `${(parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1}px`,
+      top: "".concat((parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1, "px"),
       left: '0'
     }
   },
@@ -116,7 +116,7 @@ const button = {
         height: compactClickboundHeight,
         width: '100%',
         offset: {
-          top: `${(parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1}px`,
+          top: "".concat((parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
           left: '0'
         }
       }

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

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import * as R from 'ramda';
+import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   colors: {
@@ -36,7 +36,7 @@ const {
     }
   }
 } = tokens;
-const primary = R.mergeDeepRight(button, {
+const primary = mergeDeepRight_1(button, {
   background: primaryColor,
   typography: {
     color: primaryWhite
@@ -54,7 +54,7 @@ const primary = R.mergeDeepRight(button, {
     }
   }
 });
-const secondary = R.mergeDeepRight(primary, {
+const secondary = mergeDeepRight_1(primary, {
   background: secondaryColor,
   border: {
     color: secondaryColor
@@ -68,7 +68,7 @@ const secondary = R.mergeDeepRight(primary, {
     }
   }
 });
-const danger = R.mergeDeepRight(primary, {
+const danger = mergeDeepRight_1(primary, {
   background: dangerColor,
   border: {
     color: dangerColor

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import * as R from 'ramda';
+import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -35,7 +35,7 @@ const {
     }
   }
 } = tokens;
-const primary = R.mergeDeepRight(button, {
+const primary = mergeDeepRight_1(button, {
   typography: {
     color: primaryColor
   },
@@ -54,7 +54,7 @@ const primary = R.mergeDeepRight(button, {
     }
   }
 });
-const secondary = R.mergeDeepRight(primary, {
+const secondary = mergeDeepRight_1(primary, {
   typography: {
     color: secondaryColor
   },
@@ -67,7 +67,7 @@ const secondary = R.mergeDeepRight(primary, {
     }
   }
 });
-const danger = R.mergeDeepRight(primary, {
+const danger = mergeDeepRight_1(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import * as R from 'ramda';
+import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -37,7 +37,7 @@ const {
   },
   shape
 } = tokens;
-const primary = R.mergeDeepRight(button, {
+const primary = mergeDeepRight_1(button, {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,
   typography: {
@@ -56,7 +56,7 @@ const primary = R.mergeDeepRight(button, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`
+      left: "".concat((parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2, "px")
     }
   },
   states: {
@@ -87,13 +87,13 @@ const primary = R.mergeDeepRight(button, {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
         }
       }
     }
   }
 });
-const secondary = R.mergeDeepRight(primary, {
+const secondary = mergeDeepRight_1(primary, {
   typography: {
     color: secondaryColor
   },
@@ -106,7 +106,7 @@ const secondary = R.mergeDeepRight(primary, {
     }
   }
 });
-const danger = R.mergeDeepRight(primary, {
+const danger = mergeDeepRight_1(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import * as R from 'ramda';
+import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -40,7 +40,7 @@ const {
     }
   }
 } = tokens;
-const primary = R.mergeDeepRight(button, {
+const primary = mergeDeepRight_1(button, {
   typography: {
     color: primaryColor
   },
@@ -69,7 +69,7 @@ const primary = R.mergeDeepRight(button, {
     }
   }
 });
-const secondary = R.mergeDeepRight(primary, {
+const secondary = mergeDeepRight_1(primary, {
   typography: {
     color: secondaryColor
   },
@@ -88,7 +88,7 @@ const secondary = R.mergeDeepRight(primary, {
     }
   }
 });
-const danger = R.mergeDeepRight(primary, {
+const danger = mergeDeepRight_1(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import * as Card_tokens from './Card.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 
 const {
   primary
@@ -11,11 +10,11 @@ const {
 const StyledCard = styled.div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";", ""], ({
+})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], ({
   background
 }) => background, ({
   cursor
-}) => cursor, bordersTemplate(primary.border), spacingsTemplate(primary.spacings));
+}) => cursor, bordersTemplate(primary.border));
 const Card = /*#__PURE__*/forwardRef(function Card({
   children,
   variant = 'default',

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

@@ -1,14 +1,18 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { primary } from './Card.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
+const {
+  spacings
+} = primary;
 const StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";"], ({
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], ({
   justifyContent
-}) => justifyContent);
+}) => justifyContent, spacings.right, spacings.left, spacings.top, spacings.bottom);
 const CardActions = /*#__PURE__*/forwardRef(function CardActions({
   children,
   alignRight = false,

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

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { primary } from './Card.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  spacings
+} = primary;
+const StyledCardContent = styled.div.withConfig({
+  displayName: "CardContent__StyledCardContent",
+  componentId: "sc-esm4ym-0"
+})(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.bottom);
+const CardContent = /*#__PURE__*/forwardRef(function CardContent({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledCardContent, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+
+export { CardContent };

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

@@ -9,7 +9,7 @@ const {
 const StyledCardHeader = styled.div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;>:not(:first-child){margin-left:", ";}"], spacings.left);
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
 const CardHeader = /*#__PURE__*/forwardRef(function CardHeader({
   children,
   ...rest

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

@@ -10,9 +10,9 @@ const {
 const StyledCardMedia = styled.div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:100%;&:last-child{margin-bottom:8px;}", ""], ({
+})(["display:flex;width:auto;", ""], ({
   fullWidth
-}) => fullWidth ? css(["> *{width:calc(100% + ", " + ", ");margin-left:-", ";margin-right:-", ";}&:first-child{margin-top:-", ";img{border-top-right-radius:", ";border-top-left-radius:", ";}}"], spacings.left, spacings.right, spacings.left, spacings.right, spacings.top, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["> *{width:100%;}"]));
+}) => fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left));
 const CardMedia = /*#__PURE__*/forwardRef(function CardMedia({
   children,
   fullWidth = false,

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

@@ -1,15 +1,18 @@
 import { Card as Card$1 } from './Card.js';
 import { CardActions } from './CardActions.js';
+import { CardContent } from './CardContent.js';
 import { CardMedia } from './CardMedia.js';
 import { CardHeader } from './CardHeader.js';
 import { CardHeaderTitle } from './CardHeaderTitle.js';
 
 const Card = Card$1;
 Card.Actions = CardActions;
+Card.Content = CardContent;
 Card.Header = CardHeader;
 Card.Media = CardMedia;
 Card.HeaderTitle = CardHeaderTitle;
 Card.Actions.displayName = 'Card.Actions';
+Card.Content.displayName = 'Card.Content';
 Card.Header.displayName = 'Card.Header';
 Card.Media.displayName = 'Card.Media';
 Card.HeaderTitle.displayName = 'Card.HeaderTitle';

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

@@ -26,13 +26,15 @@ const Input = styled.input.attrs(({
 })).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
   theme,
   iconSize
 }) => parseFloat(theme.clickbound.height) / iconSize, ({
   disabled
 }) => disabled ? 'not-allowed' : 'pointer', ({
   theme
+}) => outlineTemplate(theme.states.focus.outline), ({
+  theme
 }) => outlineTemplate(theme.states.focus.outline));
 const Svg = styled.svg.attrs(({
   height,
@@ -87,7 +89,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
       }), indeterminate ? /*#__PURE__*/jsx(Svg, {
         width: iconSize,
         height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsx(StyledPath, {
@@ -97,7 +99,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
       }) : /*#__PURE__*/jsxs(Svg, {
         width: iconSize,
         height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsx(StyledPath, {

package/dist/esm/components/Chip/Chip.js

@@ -28,7 +28,7 @@ const StyledChips = styled.div.attrs(({
 })).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), ({
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), ({
   clickable
 }) => clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
   variant

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

@@ -25,12 +25,12 @@ const dividerHeight = 1;
 
 const reduceByValue = subtractValue => valueWithUnit => {
   const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
-  return `${parseInt(valueAndUnit[0]) - subtractValue}` + valueAndUnit[1];
+  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
 };
 
 const reduceValueByDividerHeight = reduceByValue(dividerHeight);
 const baseDivider = {
-  height: `${dividerHeight}px`
+  height: "".concat(dividerHeight, "px")
 };
 const divider = {
   lighter: {

package/dist/esm/components/Icon/Icon.js

@@ -10,7 +10,7 @@ const customIcon = icon => ({
 
 const transform = ({
   rotation
-}) => rotation ? `transform: rotate(${rotation}deg)` : '';
+}) => rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
 
 const StyledSvg = styled.svg.attrs(({
   height,
@@ -19,8 +19,8 @@ const StyledSvg = styled.svg.attrs(({
 }) => ({
   name: null,
   xmlns: 'http://www.w3.org/2000/svg',
-  height: `${height}px`,
-  width: `${width}px`,
+  height: "".concat(height, "px"),
+  width: "".concat(width, "px"),
   fill
 })).withConfig({
   displayName: "Icon__StyledSvg",
@@ -33,7 +33,7 @@ const StyledPath = styled.path.attrs(({
   size: null,
   fillRule: 'evenodd',
   clipRule: 'evenodd',
-  transform: size / height !== 1 ? `scale(${size / height})` : null
+  transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
 })).withConfig({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
@@ -54,14 +54,14 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
   } = data ? customIcon(data) : get(name);
 
   if (typeof icon === 'undefined') {
-    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
+    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
 
   let svgProps = {
     height: size,
     width: size,
     fill: color,
-    viewBox: `0 0 ${size} ${size}`,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
     className,
     rotation,
     name,
@@ -77,7 +77,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
   let titleId = '';
 
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`;
+    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
     svgProps = { ...svgProps,
       title,
       role: 'img',

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

@@ -1,5 +1,5 @@
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
-import { mergeDeepRight } from 'ramda';
+import mergeDeepRight_1 from '../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   colors: {
@@ -93,7 +93,7 @@ const input = {
     }
   }
 };
-const error = mergeDeepRight(input, {
+const error = mergeDeepRight_1(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -116,7 +116,7 @@ const error = mergeDeepRight(input, {
     }
   }
 });
-const warning = mergeDeepRight(input, {
+const warning = mergeDeepRight_1(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -139,7 +139,7 @@ const warning = mergeDeepRight(input, {
     }
   }
 });
-const success = mergeDeepRight(input, {
+const success = mergeDeepRight_1(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {

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

@@ -22,8 +22,13 @@ const MenuProvider = ({
   };
 
   const setOnClose = onClose => {
+    const onCloseHelper = () => {
+      onClose();
+      setFocusedIndex(-1);
+    };
+
     setState(prevState => ({ ...prevState,
-      onClose
+      onClose: onCloseHelper
     }));
   };
 

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

@@ -50,6 +50,12 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
   useGlobalKeyPress('Escape', () => {
     if (open && onClose !== null) {
       onClose();
+      anchorEl.focus();
+    }
+  });
+  useGlobalKeyPress('Enter', () => {
+    if (open && onClose !== null) {
+      if (window.document.contains(anchorEl)) anchorEl.focus();
     }
   });
   return /*#__PURE__*/jsx(MenuList, { ...rest,

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

@@ -21,21 +21,21 @@ const {
     icon
   }
 } = menu;
-const ListItem = styled.li.attrs(({
+const Item = styled.button.attrs(({
   isFocused
 }) => ({
   role: 'menuitem',
   tabIndex: isFocused ? -1 : 0
 })).withConfig({
-  displayName: "MenuItem__ListItem",
+  displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), ({
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), ({
   theme
 }) => spacingsTemplate(theme.entities.item.spacings), ({
   active
 }) => active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
   disabled
-}) => disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{", "}"], hover.background, outlineTemplate(focus.outline)));
+}) => disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline)));
 const Content = styled.div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
@@ -64,7 +64,7 @@ const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem({
     disabled,
     isFocused
   };
-  return /*#__PURE__*/jsx(ListItem, { ...props,
+  return /*#__PURE__*/jsx(Item, { ...props,
     ref: useCombinedRefs(ref, el => {
       if (el !== null && isFocused) {
         el.focus();
@@ -72,7 +72,7 @@ const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem({
     }),
     onFocus: () => toggleFocus(index),
     onClick: e => {
-      if (!disabled && onClick) {
+      if (onClick) {
         onClick(e);
 
         if (onClose !== null) {

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

@@ -7,10 +7,10 @@ import { menu } from './Menu.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { spacingsTemplate } from '../../utils/templates/index.js';
 
-const List = styled.ul.withConfig({
+const List = styled.div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
-})(["position:relative;list-style:none;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
+})(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
 
 function isIndexable(item) {
   if ( /*#__PURE__*/isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;

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

@@ -6,10 +6,10 @@ import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Divider } from '../Divider/Divider.js';
 import { Typography } from '../Typography/Typography.js';
 
-const ListItem = styled.li.attrs(() => ({
+const Header = styled.div.attrs(() => ({
   tabIndex: 0
 })).withConfig({
-  displayName: "MenuSection__ListItem",
+  displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
 const MenuSection = /*#__PURE__*/React.memo(function MenuSection(props) {
@@ -19,11 +19,11 @@ const MenuSection = /*#__PURE__*/React.memo(function MenuSection(props) {
     index
   } = props;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [index !== 0 && /*#__PURE__*/jsx("li", {
+    children: [index !== 0 && /*#__PURE__*/jsx("div", {
       children: /*#__PURE__*/jsx(Divider, {
         variant: "small"
       })
-    }), title && /*#__PURE__*/jsx(ListItem, {
+    }), title && /*#__PURE__*/jsx(Header, {
       children: /*#__PURE__*/jsx(Typography, {
         group: "navigation",
         variant: "label",