@equinor/eds-core-react 0.35.1 → 0.36.1

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

@@ -1,30 +1,41 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
-var typography = tokens.typography,
-  colors = tokens.colors,
-  borderRadius = tokens.shape.corners.borderRadius,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  spacingSmall = _tokens$spacings$comf.small,
-  spacingMediumSmall = _tokens$spacings$comf.medium_small,
-  spacingMedium = _tokens$spacings$comf.medium,
-  spacingLarge = _tokens$spacings$comf.large,
-  x_large = _tokens$spacings$comf.x_large,
-  xxx_large = _tokens$spacings$comf.xxx_large,
-  boxShadow = tokens.elevation.temporary_nav;
-var selectTokens = {
+const {
+  typography,
+  colors,
+  shape: {
+    corners: {
+      borderRadius
+    }
+  },
+  spacings: {
+    comfortable: {
+      small: spacingSmall,
+      medium_small: spacingMediumSmall,
+      medium: spacingMedium,
+      large: spacingLarge,
+      x_large,
+      xxx_large
+    }
+  },
+  elevation: {
+    temporary_nav: boxShadow
+  }
+} = tokens;
+const selectTokens = {
   background: colors.ui.background__default.rgba,
-  boxShadow: boxShadow,
+  boxShadow,
   spacings: {
     top: '0',
     right: spacingLarge,
     bottom: '0',
     left: spacingLarge
   },
-  typography: _objectSpread(_objectSpread({}, typography.navigation.menu_title), {}, {
+  typography: {
+    ...typography.navigation.menu_title,
     color: colors.text.static_icons__default.rgba
-  }),
+  },
   border: {
     type: 'border',
     radius: borderRadius
@@ -77,6 +88,11 @@ var selectTokens = {
         top: spacingMedium,
         bottom: spacingMedium
       }
+    },
+    noOptions: {
+      typography: {
+        color: colors.text.static_icons__tertiary.rgba
+      }
     }
   },
   modes: {
@@ -108,7 +124,7 @@ var selectTokens = {
     }
   }
 };
-var multiSelect = mergeDeepRight(selectTokens, {
+const multiSelect = mergeDeepRight(selectTokens, {
   spacings: {
     top: '0',
     bottom: '0',

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

@@ -1,58 +1,61 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
-var _excluded = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "highlighted", "onClick", "aria-selected"];
-var StyledListItem = styled.li.withConfig({
+const StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    $highlighted = _ref.$highlighted,
-    $active = _ref.$active,
-    $isdisabled = _ref.$isdisabled;
-  var backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
+})(({
+  theme,
+  $highlighted,
+  $active,
+  $isdisabled
+}) => {
+  const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
   return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-var Label = styled.span.withConfig({
+const Label = styled.span.withConfig({
   displayName: "Option__Label",
   componentId: "sc-1ly11zu-1"
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    $multiline = _ref2.$multiline;
+})(({
+  theme,
+  $multiline
+}) => {
   return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
 });
 function AutocompleteOptionInner(props, ref) {
-  var value = props.value,
-    optionComponent = props.optionComponent,
-    multiple = props.multiple,
-    isSelected = props.isSelected,
-    isDisabled = props.isDisabled,
-    multiline = props.multiline,
-    highlighted = props.highlighted,
-    _onClick = props.onClick,
-    ariaSelected = props['aria-selected'],
-    other = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
+  const {
+    value,
+    optionComponent,
+    multiple,
+    isSelected,
+    indeterminate,
+    isDisabled,
+    multiline,
+    highlighted,
+    onClick,
+    'aria-selected': ariaSelected,
+    ...other
+  } = props;
+  return /*#__PURE__*/jsxs(StyledListItem, {
     ref: ref,
     $isdisabled: isDisabled ? 'true' : 'false',
     $highlighted: highlighted,
     "aria-hidden": isDisabled,
     $active: !multiple && isSelected ? 'true' : 'false',
-    onClick: function onClick(e) {
-      !isDisabled && _onClick(e);
+    onClick: e => {
+      !isDisabled && onClick(e);
     },
-    "aria-selected": multiple ? isSelected : ariaSelected
-  }, other), {}, {
+    "aria-selected": multiple ? isSelected : ariaSelected,
+    ...other,
     children: [multiple && /*#__PURE__*/jsx(Checkbox, {
       disabled: isDisabled,
       checked: isSelected,
+      indeterminate: indeterminate,
       value: value,
-      onChange: function onChange() {
+      onChange: () => {
         return null;
       }
     }), optionComponent ? /*#__PURE__*/jsx(Fragment, {
@@ -61,8 +64,8 @@ function AutocompleteOptionInner(props, ref) {
       $multiline: multiline,
       children: value
     })]
-  }));
+  });
 }
-var AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);
+const AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);
 
 export { AutocompleteOption };

package/dist/esm/components/Avatar/Avatar.js

@@ -1,45 +1,38 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { avatar } from './Avatar.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["src", "alt", "size", "disabled"];
-var StyledAvatar = styled.div.withConfig({
+const StyledAvatar = styled.div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
-})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), function (_ref) {
-  var $size = _ref.$size;
-  return css(["height:", "px;width:", "px;"], $size, $size);
-});
-var StyledImage = styled.img.withConfig({
+})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), ({
+  $size
+}) => css(["height:", "px;width:", "px;"], $size, $size));
+const StyledImage = styled.img.withConfig({
   displayName: "Avatar__StyledImage",
   componentId: "sc-r7n7on-1"
-})(["height:100%;text-align:center;color:transparent;", ";"], function (_ref2) {
-  var $disabled = _ref2.$disabled;
-  return $disabled && css(["opacity:", ";"], avatar.states.disabled.opacity);
-});
-var Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
-  var _ref3$src = _ref3.src,
-    src = _ref3$src === void 0 ? null : _ref3$src,
-    alt = _ref3.alt,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 24 : _ref3$size,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-    rest = _objectWithoutProperties(_ref3, _excluded);
-  return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({
+})(["height:100%;text-align:center;color:transparent;", ";"], ({
+  $disabled
+}) => $disabled && css(["opacity:", ";"], avatar.states.disabled.opacity));
+const Avatar = /*#__PURE__*/forwardRef(function Avatar({
+  src = null,
+  alt,
+  size = 24,
+  disabled = false,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(StyledAvatar, {
     $size: size,
-    ref: ref
-  }, rest), {}, {
+    ref: ref,
+    ...rest,
     children: /*#__PURE__*/jsx(StyledImage, {
       src: src,
       alt: alt,
       $disabled: disabled
     })
-  }));
+  });
 });
 Avatar.displayName = 'Avatar';
 

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

@@ -1,4 +1,4 @@
-var avatar = {
+const avatar = {
   border: {
     type: 'border',
     radius: '50%'

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

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
@@ -10,42 +8,43 @@ import { Divider } from '../Divider/Divider.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Paper } from '../Paper/Paper.js';
 
-var _excluded = ["children", "className", "elevation"];
-var Content = styled.div.withConfig({
+const Content = styled.div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    $hasIcon = _ref.$hasIcon;
+})(({
+  theme,
+  $hasIcon
+}) => {
   return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), $hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
 });
-var NonMarginDivider = styled(Divider).withConfig({
+const NonMarginDivider = styled(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
-var Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    _ref2$elevation = _ref2.elevation,
-    elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var childrenWhereBannerIcon = Children.map(children, function (child) {
+const Banner = /*#__PURE__*/forwardRef(function Banner({
+  children,
+  className,
+  elevation = 'none',
+  ...rest
+}, ref) {
+  const childrenWhereBannerIcon = Children.map(children, child => {
     return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
   });
-  var hasIcon = childrenWhereBannerIcon.some(function (bool) {
-    return bool;
-  });
-  var props = _objectSpread({
-    ref: ref
-  }, rest);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+  const hasIcon = childrenWhereBannerIcon.some(bool => bool);
+  const props = {
+    ref,
+    ...rest
+  };
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, enabled);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(Paper, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsxs(Paper, {
+      ...props,
       className: className,
       elevation: elevation,
       role: "alert",
@@ -55,7 +54,7 @@ var Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
       }), /*#__PURE__*/jsx(NonMarginDivider, {
         color: "light"
       })]
-    }))
+    })
   });
 });
 

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

@@ -1,21 +1,50 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var messageTypography = tokens.typography.paragraph.body_long,
-  medium = tokens.spacings.comfortable.medium,
-  _tokens$colors = tokens.colors,
-  _tokens$colors$infogr = _tokens$colors.infographic,
-  infoBackground = _tokens$colors$infogr.primary__moss_green_13.rgba,
-  warningBackground = _tokens$colors$infogr.primary__energy_red_13.rgba,
-  infoColor = _tokens$colors$infogr.primary__moss_green_100.rgba,
-  warningColor = _tokens$colors$infogr.primary__energy_red_100.rgba,
-  backgroundColor = _tokens$colors.ui.background__default.rgba,
-  _tokens$shape$circle = tokens.shape.circle,
-  minHeight = _tokens$shape$circle.minHeight,
-  minWidth = _tokens$shape$circle.minWidth,
-  borderRadius = _tokens$shape$circle.borderRadius;
-var enabled = {
-  typography: _objectSpread({}, messageTypography),
+/* eslint-disable camelcase */
+const {
+  typography: {
+    paragraph: {
+      body_long: messageTypography
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  },
+  colors: {
+    infographic: {
+      primary__moss_green_13: {
+        rgba: infoBackground
+      },
+      primary__energy_red_13: {
+        rgba: warningBackground
+      },
+      primary__moss_green_100: {
+        rgba: infoColor
+      },
+      primary__energy_red_100: {
+        rgba: warningColor
+      }
+    },
+    ui: {
+      background__default: {
+        rgba: backgroundColor
+      }
+    }
+  },
+  shape: {
+    circle: {
+      minHeight,
+      minWidth,
+      borderRadius
+    }
+  }
+} = tokens;
+const enabled = {
+  typography: {
+    ...messageTypography
+  },
   background: backgroundColor,
   spacings: {
     left: medium,
@@ -37,7 +66,7 @@ var enabled = {
     compact: {}
   }
 };
-var info = {
+const info = {
   entities: {
     icon: {
       background: infoBackground,
@@ -50,7 +79,7 @@ var info = {
     compact: {}
   }
 };
-var warning = {
+const warning = {
   entities: {
     icon: {
       background: warningBackground,

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

@@ -1,34 +1,33 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "placement"];
-var StyledBannerActions = styled.div.withConfig({
+const StyledBannerActions = styled.div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    $placement = _ref.$placement;
+})(({
+  theme,
+  $placement
+}) => {
   return css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, $placement === 'bottom' ? '1/-1' : 'auto', $placement === 'bottom' && {
     marginTop: theme.spacings.top,
     marginLeft: '0'
   });
 });
-var BannerActions = /*#__PURE__*/forwardRef(function BannerActions(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread({
-    ref: ref
-  }, rest);
-  return /*#__PURE__*/jsx(StyledBannerActions, _objectSpread(_objectSpread({
-    $placement: placement
-  }, props), {}, {
+const BannerActions = /*#__PURE__*/forwardRef(function BannerActions({
+  children,
+  placement = 'left',
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledBannerActions, {
+    $placement: placement,
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { BannerActions };

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

@@ -1,42 +1,43 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
-import { info as info$1, warning as warning$1 } from './Banner.tokens.js';
+import * as Banner_tokens from './Banner.tokens.js';
 import { Icon } from '../Icon/index.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "variant"];
-var info = info$1,
-  warning = warning$1;
-var StyledBannerIcon = styled.span.withConfig({
+const {
+  info,
+  warning
+} = Banner_tokens;
+const StyledBannerIcon = styled.span.withConfig({
   displayName: "BannerIcon__StyledBannerIcon",
   componentId: "sc-7ow3zc-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    $variant = _ref.$variant;
+})(({
+  theme,
+  $variant
+}) => {
   return css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), $variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
 });
-var BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'info' : _ref2$variant,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var childrenWithColor = Children.map(children, function (child) {
-    var color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
+const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({
+  children,
+  variant = 'info',
+  ...rest
+}, ref) {
+  const childrenWithColor = Children.map(children, child => {
+    const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
     return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, {
-      color: color
+      color
     }) || child;
   });
-  var props = _objectSpread({
-    ref: ref
-  }, rest);
-  return /*#__PURE__*/jsx(StyledBannerIcon, _objectSpread(_objectSpread({
-    $variant: variant
-  }, props), {}, {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledBannerIcon, {
+    $variant: variant,
+    ...props,
     children: childrenWithColor
-  }));
+  });
 });
 
 export { BannerIcon };

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

@@ -1,26 +1,25 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["children"];
-var StyledBannerMessage = styled(Typography).withConfig({
+const StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-var BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage(_ref, ref) {
-  var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var props = _objectSpread({
-    ref: ref
-  }, rest);
-  return /*#__PURE__*/jsx(StyledBannerMessage, _objectSpread(_objectSpread({
-    variant: "body_long"
-  }, props), {}, {
+const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledBannerMessage, {
+    variant: "body_long",
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { BannerMessage };

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

@@ -3,7 +3,7 @@ import { BannerIcon } from './BannerIcon.js';
 import { BannerMessage } from './BannerMessage.js';
 import { BannerActions } from './BannerActions.js';
 
-var Banner = Banner$1;
+const Banner = Banner$1;
 Banner.Icon = BannerIcon;
 Banner.Message = BannerMessage;
 Banner.Actions = BannerActions;