@equinor/eds-core-react 0.16.0 → 0.18.0-envis.1

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

@@ -67,6 +67,9 @@ const dialog = {
     actions: {
       minHeight: '48px'
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 

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

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { dialog } from './Dialog.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
@@ -8,13 +7,20 @@ import { typographyTemplate, spacingsTemplate } from '../../utils/templates/inde
 const StyledTitle = styled.div.withConfig({
   displayName: "Title__StyledTitle",
   componentId: "sc-i4qfl5-0"
-})(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(dialog.entities.title.typography), dialog.entities.title.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   children
-}) => !children && css(["min-height:initial;height:'8px';"]));
+}) => {
+  return css(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && css(["min-height:initial;height:'8px';"]));
+});
 const StyledDivider = styled(Divider).withConfig({
   displayName: "Title__StyledDivider",
   componentId: "sc-i4qfl5-1"
-})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
+})(({
+  theme
+}) => {
+  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
+});
 const Title = /*#__PURE__*/forwardRef(function Title({
   children,
   ...rest

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

@@ -41,7 +41,7 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
-  });
+  }, [onClose, onCloseCallback, setOnClose]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -72,6 +72,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   ...rest
 }, ref) {
   const [containerEl, setContainerEl] = useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const isMounted = useIsMounted();
   const {
     density
@@ -79,10 +80,14 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   const token = useToken({
     density
   }, menu);
+  useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, containerEl, null, placement, 4);
+  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
   const props = {
     open,
     style: { ...styles.popper,

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo } from 'react';
 import styled from 'styled-components';
 import { menu } from './Menu.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -12,7 +12,7 @@ const Header = styled.div.attrs(() => ({
   displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
-const MenuSection = /*#__PURE__*/React.memo(function MenuSection(props) {
+const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
   const {
     children,
     title,

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

@@ -1,9 +1,9 @@
-import { forwardRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useState, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
 import { Icon } from '../Icon/index.js';
 import { close } from '@equinor/eds-icons';
 import { popover } from './Popover.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
 import { useOutsideClick } from '../../hooks/useOutsideClick.js';
 import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
@@ -12,27 +12,44 @@ import { typographyTemplate, spacingsTemplate } from '../../utils/templates/inde
 import { bordersTemplate } from '../../utils/templates/borders.js';
 import { Button } from '../Button/Button.js';
 import { usePopper } from '../../hooks/usePopper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
 
 const PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
-})(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], ({
+})(({
+  theme,
   open
-}) => css({
-  visibility: open ? null : 'hidden'
-}), typographyTemplate(popover.typography), spacingsTemplate(popover.spacings), popover.spacings.bottom, popover.background, popover.maxHeight, popover.maxWidth, popover.minHeight, bordersTemplate(popover.border), popover.entities.arrow.width, popover.entities.arrow.height, popover.entities.arrow.spacings.bottom, popover.entities.arrow.spacings.top, popover.entities.arrow.spacings.right, popover.entities.arrow.spacings.left);
+}) => {
+  return css(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+    visibility: open ? null : 'hidden'
+  }, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.spacings.bottom, theme.background, theme.maxHeight, theme.maxWidth, theme.minHeight, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
+});
 const StyledCloseButton = styled(Button).withConfig({
   displayName: "Popover__StyledCloseButton",
   componentId: "sc-b7p1is-1"
-})(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], popover.entities.closeButton.spacings.top, popover.spacings.right, popover.entities.closeButton.height, popover.entities.closeButton.width, popover.entities.closeButton.height);
+})(({
+  theme
+}) => {
+  return css(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], theme.entities.closeButton.spacings.top, theme.spacings.right, theme.entities.closeButton.height, theme.entities.closeButton.width, theme.entities.closeButton.height);
+});
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
   componentId: "sc-b7p1is-2"
-})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], popover.entities.arrow.width, popover.entities.arrow.height);
+})(({
+  theme
+}) => {
+  return css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
+});
 const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
-})(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], popover.entities.arrow.width, popover.entities.arrow.height, popover.background);
+})(({
+  theme
+}) => {
+  return css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
+});
 const Popover = /*#__PURE__*/forwardRef(function Popover({
   children,
   placement = 'bottom',
@@ -42,6 +59,7 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   ...rest
 }, ref) {
   const [popperEl, setPopperEl] = useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const [arrowRef, setArrowRef] = useState(null);
   const popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, e => {
@@ -54,42 +72,55 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
       onClose();
     }
   });
+  useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, popperEl, arrowRef, placement);
+  } = usePopper(storedAnchorEl, popperEl, arrowRef, placement);
   const props = {
     open,
     ...rest,
     ...attributes.popper
   };
-  return /*#__PURE__*/jsxs(PopoverPaper, {
-    ref: popoverRef,
-    elevation: "overlay",
-    style: styles.popper,
-    "data-testid": "popover",
-    ...props,
-    children: [/*#__PURE__*/jsx(ArrowWrapper, {
-      ref: setArrowRef,
-      style: styles.arrow,
-      className: "arrow",
-      children: /*#__PURE__*/jsx(PopoverArrow, {
-        className: "arrowSvg",
-        children: /*#__PURE__*/jsx("path", {
-          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, popover);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(PopoverPaper, {
+      ref: popoverRef,
+      elevation: "overlay",
+      style: styles.popper,
+      "data-testid": "popover",
+      ...props,
+      children: [/*#__PURE__*/jsx(ArrowWrapper, {
+        ref: setArrowRef,
+        style: styles.arrow,
+        className: "arrow",
+        children: /*#__PURE__*/jsx(PopoverArrow, {
+          className: "arrowSvg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+          })
+        })
+      }), children, /*#__PURE__*/jsx(StyledCloseButton, {
+        onClick: onClose,
+        variant: "ghost_icon",
+        "data-testid": "popover-close",
+        "aria-label": "Close popover",
+        children: /*#__PURE__*/jsx(Icon, {
+          name: "close",
+          data: close,
+          size: 24
         })
-      })
-    }), children, /*#__PURE__*/jsx(StyledCloseButton, {
-      onClick: onClose,
-      variant: "ghost_icon",
-      "data-testid": "popover-close",
-      "aria-label": "Close popover",
-      children: /*#__PURE__*/jsx(Icon, {
-        name: "close",
-        data: close,
-        size: 24
-      })
-    })]
+      })]
+    })
   });
 });
 

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

@@ -67,6 +67,9 @@ const popover = {
   border: {
     type: 'border',
     radius: borderRadius
+  },
+  modes: {
+    compact: {}
   }
 };
 

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

@@ -1,17 +1,24 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { popover } from './Popover.tokens.js';
+import styled, { css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 
 const StyledPopoverTitle = styled.div.withConfig({
   displayName: "PopoverTitle__StyledPopoverTitle",
   componentId: "sc-1ben8su-0"
-})(["margin-right:", ";max-width:calc(", " - ", ");overflow:hidden;margin-top:-", ";"], popover.entities.closeButton.width, popover.maxWidth, popover.entities.closeButton.width, popover.entities.title.spacings.top);
+})(({
+  theme
+}) => {
+  return css(["margin-right:", ";max-width:calc(", " - ", ");overflow:hidden;margin-top:-", ";"], theme.entities.closeButton.width, theme.maxWidth, theme.entities.closeButton.width, theme.entities.title.spacings.top);
+});
 const StyledDivider = styled(Divider).withConfig({
   displayName: "PopoverTitle__StyledDivider",
   componentId: "sc-1ben8su-1"
-})(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], popover.spacings.left, popover.spacings.right, popover.maxWidth);
+})(({
+  theme
+}) => {
+  return css(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], theme.spacings.left, theme.spacings.right, theme.maxWidth);
+});
 const PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle({
   children,
   ...rest

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

@@ -21,25 +21,26 @@ const ScrimContent = styled.div.withConfig({
 const Scrim = /*#__PURE__*/forwardRef(function Scrim({
   children,
   onClose,
+  open,
   isDismissable = false,
   ...rest
 }, ref) {
   const props = { ...rest,
+    open,
     isDismissable,
     ref
   };
-  const overflowState = document.body.style.overflow;
-  useHideBodyScroll(overflowState);
-  useGlobalKeyPress('Escape', e => {
-    if (isDismissable && onClose) {
-      onClose(e, false);
+  useHideBodyScroll(open);
+  useGlobalKeyPress('Escape', () => {
+    if (isDismissable && onClose && open) {
+      onClose();
     }
   });
 
   const handleMouseClose = event => {
     if (event) {
-      if (event.type === 'click' && isDismissable) {
-        onClose && onClose(event, false);
+      if (event.type === 'click' && isDismissable && open) {
+        onClose && onClose();
       }
     }
   };
@@ -49,6 +50,10 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim({
     event.stopPropagation();
   };
 
+  if (!open) {
+    return null;
+  }
+
   return /*#__PURE__*/jsx(StyledScrim, {
     onClick: handleMouseClose,
     ...props,

package/dist/esm/components/Search/Search.js

@@ -1,49 +1,63 @@
 import { forwardRef, useRef, useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
 import { search as search$1, close } from '@equinor/eds-icons';
 import { search } from './Search.tokens.js';
 import { Icon } from '../Icon/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
 import { setReactInputValue } from '../../utils/setReactInputValue.js';
 import { bordersTemplate } from '../../utils/templates/borders.js';
 import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+import { Input } from '../Input/Input.js';
 import { Button } from '../Button/Button.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
 
-const {
-  height,
-  spacings,
-  background,
-  typography,
-  border,
-  clickbound,
-  entities: {
-    icon,
-    placeholder,
-    button
-  },
-  states
-} = search;
 const Container = styled.span.withConfig({
   displayName: "Search__Container",
   componentId: "sc-v8l23u-0"
-})(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), ({
-  isFocused
-}) => isFocused && css(["", ""], bordersTemplate(states.focus.border)), placeholder.typography.color, ({
-  disabled
-}) => disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
-const Input = styled.input.withConfig({
-  displayName: "Search__Input",
+})(({
+  disabled,
+  isFocused,
+  theme
+}) => {
+  const {
+    height,
+    spacings,
+    background,
+    border,
+    clickbound,
+    entities: {
+      icon,
+      placeholder
+    },
+    states
+  } = theme;
+  return css(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), isFocused && bordersTemplate(states.focus.border), placeholder.typography.color, disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
+});
+const SearchInput = styled(Input).withConfig({
+  displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-1"
-})(["min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;border:none;appearance:none;box-sizing:border-box;background:transparent;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], typographyTemplate(typography), ({
+})(({
+  theme,
   disabled
-}) => disabled && css(["cursor:not-allowed;"]));
+}) => {
+  return css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], theme.height, typographyTemplate(theme.typography), disabled && css(["cursor:not-allowed;"]));
+});
 const InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, ({
+})(({
+  theme,
   isActive
-}) => isActive && css(["visibility:visible;"]));
+}) => {
+  const {
+    entities: {
+      button
+    }
+  } = theme;
+  return css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && css(["visibility:visible;"]));
+});
 const Search = /*#__PURE__*/forwardRef(function Search({
   onChange,
   defaultValue = '',
@@ -54,6 +68,12 @@ const Search = /*#__PURE__*/forwardRef(function Search({
   onFocus,
   ...rest
 }, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, search);
   const isControlled = typeof value !== 'undefined';
   const isActive = isControlled && value !== '' || defaultValue !== '';
   const inputRef = useRef(null);
@@ -161,21 +181,24 @@ const Search = /*#__PURE__*/forwardRef(function Search({
       }
     }
   };
-  return /*#__PURE__*/jsxs(Container, { ...containerProps,
-    children: [/*#__PURE__*/jsx(Icon, {
-      data: search$1,
-      "aria-hidden": true,
-      size: size
-    }), /*#__PURE__*/jsx(Input, { ...inputProps
-    }), /*#__PURE__*/jsx(InsideButton, { ...clearButtonProps,
-      "aria-label": 'clear search',
-      title: "clear",
-      variant: "ghost_icon",
-      children: /*#__PURE__*/jsx(Icon, {
-        data: close,
-        size: 16
-      })
-    })]
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(Container, { ...containerProps,
+      children: [/*#__PURE__*/jsx(Icon, {
+        data: search$1,
+        "aria-hidden": true,
+        size: size
+      }), /*#__PURE__*/jsx(SearchInput, { ...inputProps
+      }), /*#__PURE__*/jsx(InsideButton, { ...clearButtonProps,
+        "aria-label": 'clear search',
+        title: "clear",
+        variant: "ghost_icon",
+        children: /*#__PURE__*/jsx(Icon, {
+          data: close,
+          size: 16
+        })
+      })]
+    })
   });
 }); // Search.displayName = 'eds-search'
 

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

@@ -30,7 +30,8 @@ const {
     input: {
       text: typography
     }
-  }
+  },
+  shape
 } = tokens;
 const search = {
   background,
@@ -44,9 +45,7 @@ const search = {
   },
   spacings: {
     left: small,
-    right: small,
-    top: '6px',
-    bottom: '6px'
+    right: small
   },
   border: {
     type: 'border',
@@ -97,6 +96,11 @@ const search = {
         right: small
       }
     }
+  },
+  modes: {
+    compact: {
+      height: shape._modes.compact.straight.minHeight
+    }
   }
 };
 

package/dist/esm/components/Select/MultiSelect/MultiSelect.js

@@ -117,8 +117,9 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
         case useCombobox.stateChangeTypes.InputBlur:
+          setInputValue('');
+
           if (selectedItem) {
-            setInputValue('');
             selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
           }
 
@@ -134,6 +135,11 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
     }
   };
 
+  const handleClear = () => {
+    reset();
+    setInputValue('');
+  };
+
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -157,7 +163,7 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
           title: "clear",
-          onClick: reset,
+          onClick: handleClear,
           style: {
             right: 32
           },

package/dist/esm/components/Select/Select.tokens.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';
 
 const {
   typography,
@@ -55,6 +55,9 @@ const select = {
         left: spacingSmall,
         right: spacingSmall,
         top: '6px'
+      },
+      typography: {
+        color: colors.text.static_icons__tertiary.rgba
       }
     }
   },
@@ -78,7 +81,7 @@ const select = {
     }
   }
 };
-const multiSelect = R.mergeDeepRight(select, {
+const multiSelect = mergeDeepRight_1(select, {
   spacings: {
     top: '0',
     bottom: '0',

package/dist/esm/components/Select/commonStyles.js

@@ -44,7 +44,7 @@ const StyledButton = styled(Button).withConfig({
     }
   }
 }) => {
-  return css(["position:absolute;right:", ";height:", ";width:", ";top:", ";"], button.spacings.right, button.height, button.height, button.spacings.top);
+  return css(["position:absolute;right:", ";height:", ";width:", ";top:", ";color:", ";"], button.spacings.right, button.height, button.height, button.spacings.top, button.typography.color);
 });
 const StyledInputWrapper = styled.div.withConfig({
   displayName: "commonStyles__StyledInputWrapper",