@equinor/eds-core-react 0.16.1-dev.12072021 → 0.18.0-dev.20220210

package/dist/esm/components/Radio/Radio.js

@@ -2,57 +2,79 @@ import { forwardRef, useMemo } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
 import { comfortable } from './Radio.tokens.js';
+import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 /* eslint camelcase: "off" */
-const Input = styled.input.attrs(({
-  type = 'radio'
-}) => ({
-  type
-})).withConfig({
+const Input = styled.input.attrs(_ref => {
+  let {
+    type = 'radio'
+  } = _ref;
+  return {
+    type
+  };
+}).withConfig({
   displayName: "Radio__Input",
   componentId: "sc-we59oz-0"
-})(["--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='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{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));
+})(["--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='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], _ref2 => {
+  let {
+    theme,
+    iconSize
+  } = _ref2;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, _ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled ? 'not-allowed' : 'pointer';
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return outlineTemplate(theme.states.focus.outline);
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return outlineTemplate(theme.states.focus.outline);
+});
 const StyledLabel = styled.label.withConfig({
   displayName: "Radio__StyledLabel",
   componentId: "sc-we59oz-1"
-})(["display:inline-flex;align-items:center;cursor:", ";"], ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer');
-const StyledPath = styled.path.attrs(({
-  icon
-}) => ({
-  fillRule: 'evenodd',
-  clipRule: 'evenodd',
-  d: icon.svgPathData
-})).withConfig({
+})(["display:inline-flex;align-items:center;cursor:", ";"], _ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+const StyledPath = styled.path.attrs(_ref7 => {
+  let {
+    icon
+  } = _ref7;
+  return {
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    d: icon.svgPathData
+  };
+}).withConfig({
   displayName: "Radio__StyledPath",
   componentId: "sc-we59oz-2"
 })([""]);
-const Svg = styled.svg.attrs(({
-  height,
-  width,
-  fill
-}) => ({
-  name: null,
-  xmlns: 'http://www.w3.org/2000/svg',
-  height,
-  width,
-  fill
-})).withConfig({
+const Svg = styled.svg.attrs(_ref8 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref8;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height,
+    width,
+    fill
+  };
+}).withConfig({
   displayName: "Radio__Svg",
   componentId: "sc-we59oz-3"
 })(["grid-area:input;pointer-events:none;"]);
@@ -63,19 +85,29 @@ const LabelText = styled.span.withConfig({
 const InputWrapper = styled.span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], ({
-  theme
-}) => spacingsTemplate(theme.spacings), ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  disabled
-}) => disabled ? 'transparent' : comfortable.states.hover.background);
-const Radio = /*#__PURE__*/forwardRef(function Radio({
-  label,
-  disabled = false,
-  className,
-  ...rest
-}, ref) {
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return spacingsTemplate(theme.spacings);
+}, _ref10 => {
+  let {
+    disabled
+  } = _ref10;
+  return disabled ? 'not-allowed' : 'pointer';
+}, _ref11 => {
+  let {
+    disabled
+  } = _ref11;
+  return disabled ? 'transparent' : comfortable.states.hover.background;
+});
+const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
+  let {
+    label,
+    disabled = false,
+    className,
+    ...rest
+  } = _ref12;
   const {
     density
   } = useEds();

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

@@ -1,9 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
+import { useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { useHideBodyScroll } from '../../hooks/useHideBodyScroll.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
 
 const {
   height,
@@ -18,28 +17,30 @@ const ScrimContent = styled.div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
 })(["width:auto;height:auto;"]);
-const Scrim = /*#__PURE__*/forwardRef(function Scrim({
-  children,
-  onClose,
-  isDismissable = false,
-  ...rest
-}, ref) {
+const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
+  let {
+    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,59 +1,79 @@
 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 { 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 { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, useCombinedRefs, setReactInputValue } from '@equinor/eds-utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
 import { Button } from '../Button/Button.js';
+import { useEds } from '../EdsProvider/eds.context.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",
+})(_ref => {
+  let {
+    disabled,
+    isFocused,
+    theme
+  } = _ref;
+  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), ({
-  disabled
-}) => disabled && css(["cursor:not-allowed;"]));
+})(_ref2 => {
+  let {
+    theme,
+    disabled
+  } = _ref2;
+  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, ({
-  isActive
-}) => isActive && css(["visibility:visible;"]));
-const Search = /*#__PURE__*/forwardRef(function Search({
-  onChange,
-  defaultValue = '',
-  value,
-  className = '',
-  disabled = false,
-  onBlur,
-  onFocus,
-  ...rest
-}, ref) {
+})(_ref3 => {
+  let {
+    theme,
+    isActive
+  } = _ref3;
+  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(_ref4, ref) {
+  let {
+    onChange,
+    defaultValue = '',
+    value,
+    className = '',
+    disabled = false,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref4;
+  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

@@ -6,30 +6,33 @@ import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import styled, { ThemeProvider } from 'styled-components';
 import { multiSelect } from '../Select.tokens.js';
 import { StyledListItem, Container, StyledInputWrapper, PaddedInput, StyledButton, StyledList } from '../commonStyles.js';
+import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../../utils/templates/index.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 import { Label } from '../../Label/Label.js';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "MultiSelect__PaddedStyledListItem",
   componentId: "sc-69ntfg-0"
-})(["display:flex;align-items:center;", ""], ({
-  theme
-}) => spacingsTemplate(theme.spacings));
-const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
-  items = [],
-  initialSelectedItems = [],
-  label,
-  meta,
-  className,
-  disabled = false,
-  readOnly = false,
-  selectedOptions,
-  handleSelectedItemsChange,
-  ...other
-}, ref) {
+})(["display:flex;align-items:center;", ""], _ref => {
+  let {
+    theme
+  } = _ref;
+  return spacingsTemplate(theme.spacings);
+});
+const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect(_ref2, ref) {
+  let {
+    items = [],
+    initialSelectedItems = [],
+    label,
+    meta,
+    className,
+    disabled = false,
+    readOnly = false,
+    selectedOptions,
+    handleSelectedItemsChange,
+    ...other
+  } = _ref2;
   const isControlled = selectedOptions ? true : false;
   const [inputValue, setInputValue] = useState('');
   const {
@@ -104,11 +107,13 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
           return changes;
       }
     },
-    onStateChange: ({
-      inputValue,
-      type,
-      selectedItem
-    }) => {
+    onStateChange: _ref3 => {
+      let {
+        inputValue,
+        type,
+        selectedItem
+      } = _ref3;
+
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
           setInputValue(inputValue);
@@ -117,8 +122,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 +140,11 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
     }
   };
 
+  const handleClear = () => {
+    reset();
+    setInputValue('');
+  };
+
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -157,7 +168,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/NativeSelect/NativeSelect.js

@@ -1,11 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { nativeselect } from './NativeSelect.tokens.js';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../../utils/templates/index.js';
-import { outlineTemplate } from '../../../utils/templates/focus.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 import { Label } from '../../Label/Label.js';
 
 const Container = styled.div.withConfig({
@@ -15,20 +13,24 @@ const Container = styled.div.withConfig({
 const StyledSelect = styled.select.withConfig({
   displayName: "NativeSelect__StyledSelect",
   componentId: "sc-1c1ogya-1"
-})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
-  theme
-}) => css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
-const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect({
-  label,
-  children,
-  className,
-  selectRef,
-  id,
-  meta,
-  disabled = false,
-  multiple = false,
-  ...other
-}, ref) {
+})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings));
+}, nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
+const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
+  let {
+    label,
+    children,
+    className,
+    selectRef,
+    id,
+    meta,
+    disabled = false,
+    multiple = false,
+    ...other
+  } = _ref2;
   const {
     density
   } = useEds();

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/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 = mergeDeepRight_1(select, {
+const multiSelect = mergeDeepRight(select, {
   spacings: {
     top: '0',
     bottom: '0',