@equinor/eds-core-react 0.26.0 → 0.28.0-dev12052022

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

@@ -2,32 +2,37 @@ 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 { List } from '../List/index.js';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
 var _excluded = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
-var StyledListItem = styled(List.Item).withConfig({
+var 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;
+    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;
-  return css(["display:flex;align-items:center;margin:0;list-style:none;background-color:", ";user-select:none;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
+  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;word-break:break-word;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref2, ref) {
-  var value = _ref2.value,
-      multiple = _ref2.multiple,
-      isSelected = _ref2.isSelected,
-      isDisabled = _ref2.isDisabled,
-      _onClick = _ref2.onClick,
-      ariaSelected = _ref2['aria-selected'],
-      other = _objectWithoutProperties(_ref2, _excluded);
-
+var Label = styled.span.withConfig({
+  displayName: "Option__Label",
+  componentId: "sc-1ly11zu-1"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return css(["", ""], spacingsTemplate(theme.entities.label.spacings));
+});
+var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref3, ref) {
+  var value = _ref3.value,
+    multiple = _ref3.multiple,
+    isSelected = _ref3.isSelected,
+    isDisabled = _ref3.isDisabled,
+    _onClick = _ref3.onClick,
+    ariaSelected = _ref3['aria-selected'],
+    other = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
     ref: ref,
     isdisabled: isDisabled ? 'true' : 'false',
@@ -45,7 +50,7 @@ var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_re
       onChange: function onChange() {
         return null;
       }
-    }), /*#__PURE__*/jsx("span", {
+    }), /*#__PURE__*/jsx(Label, {
       children: value
     })]
   }));

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

@@ -23,14 +23,13 @@ var StyledImage = styled.img.withConfig({
 });
 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);
-
+    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({
     size: size,
     disabled: disabled,

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

@@ -16,7 +16,7 @@ var Content = styled.div.withConfig({
   componentId: "sc-1ju451i-0"
 })(function (_ref) {
   var theme = _ref.theme,
-      hasIcon = _ref.hasIcon;
+    hasIcon = _ref.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({
@@ -25,25 +25,21 @@ var NonMarginDivider = styled(Divider).withConfig({
 })(["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);
-
+    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) {
     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;
-
+    density = _useEds.density;
   var token = useToken({
     density: density
   }, enabled);

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

@@ -2,18 +2,18 @@ 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;
+  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),
   background: backgroundColor,

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

@@ -10,7 +10,7 @@ var StyledBannerActions = styled.div.withConfig({
   componentId: "sc-1o38ds2-0"
 })(function (_ref) {
   var theme = _ref.theme,
-      placement = _ref.placement;
+    placement = _ref.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'
@@ -18,14 +18,12 @@ var StyledBannerActions = styled.div.withConfig({
 });
 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);
-
+    _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), {}, {

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

@@ -9,32 +9,29 @@ import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "variant"];
 var info = info$1,
-    warning = warning$1;
+  warning = warning$1;
 var StyledBannerIcon = styled.span.withConfig({
   displayName: "BannerIcon__StyledBannerIcon",
   componentId: "sc-7ow3zc-0"
 })(function (_ref) {
   var theme = _ref.theme,
-      variant = _ref.variant;
+    variant = _ref.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);
-
+    _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;
     return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, {
       color: color
     }) || child;
   });
-
   var props = _objectSpread({
     ref: ref
   }, rest);
-
   return /*#__PURE__*/jsx(StyledBannerIcon, _objectSpread(_objectSpread({
     variant: variant
   }, props), {}, {

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

@@ -12,12 +12,10 @@ var StyledBannerMessage = styled(Typography).withConfig({
 })([""]);
 var BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage(_ref, ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   var props = _objectSpread({
     ref: ref
   }, rest);
-
   return /*#__PURE__*/jsx(StyledBannerMessage, _objectSpread(_objectSpread({
     variant: "body_long"
   }, props), {}, {

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

@@ -9,7 +9,7 @@ import { Typography } from '../Typography/Typography.js';
 
 var _excluded = ["children", "maxWidth", "href", "as"];
 var states = breadcrumbs.states,
-    typography = breadcrumbs.typography;
+  typography = breadcrumbs.typography;
 var StyledTypography = styled(Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
@@ -21,22 +21,19 @@ var StyledTypography = styled(Typography).withConfig({
 });
 var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
   var children = _ref2.children,
-      maxWidth = _ref2.maxWidth,
-      href = _ref2.href,
-      as = _ref2.as,
-      other = _objectWithoutProperties(_ref2, _excluded);
-
+    maxWidth = _ref2.maxWidth,
+    href = _ref2.href,
+    as = _ref2.as,
+    other = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, other), {}, {
     href: href,
     ref: ref
   });
-
   var showTooltip = maxWidth > 0;
   var isHrefDefined = href !== undefined;
   var forwardedAs = useMemo(function () {
     return as ? as : isHrefDefined ? 'a' : 'span';
   }, [as, isHrefDefined]);
-
   var crumb = /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
     link: isHrefDefined,
     forwardedAs: forwardedAs,
@@ -45,7 +42,6 @@ var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
   }, props), {}, {
     children: children
   }));
-
   return showTooltip ? /*#__PURE__*/jsx(Tooltip, {
     title: children,
     placement: "top",

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

@@ -10,8 +10,8 @@ import { Typography } from '../Typography/Typography.js';
 
 var _excluded = ["children", "collapse"];
 var spacings = breadcrumbs.spacings,
-    typography = breadcrumbs.typography,
-    states = breadcrumbs.states;
+  typography = breadcrumbs.typography,
+  states = breadcrumbs.states;
 var OrderedList = styled.ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
@@ -30,33 +30,27 @@ var Collapsed = styled(Typography).withConfig({
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states.hover.typography.color, typography.color);
 var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
   var children = _ref.children,
-      collapse = _ref.collapse,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    collapse = _ref.collapse,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref
   });
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
   var collapsedCrumbs = function collapsedCrumbs(allCrumbs) {
     var handleExpandClick = function handleExpandClick(e) {
       setExpanded(true);
       var _ref2 = e,
-          key = _ref2.key;
-
+        key = _ref2.key;
       if (key === 'Enter') {
         setExpanded(true);
       }
     };
-
     if (allCrumbs.length < 3) {
       return allCrumbs;
     }
-
     return [allCrumbs[0], /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Collapsed, {
@@ -77,7 +71,6 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
       })]
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
   };
-
   var allCrumbs = Children.toArray(children).map(function (child, index) {
     return (
       /*#__PURE__*/
@@ -101,6 +94,8 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
   }));
-}); // Breadcrumbs.displayName = 'eds-breadcrumbs'
+});
+
+// Breadcrumbs.displayName = 'eds-breadcrumbs'
 
 export { Breadcrumbs };

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

@@ -1,9 +1,9 @@
 import { tokens } from '@equinor/eds-tokens';
 
 var _tokens$colors = tokens.colors,
-    enabledColor = _tokens$colors.text.static_icons__tertiary.rgba,
-    hoverColor = _tokens$colors.interactive.primary__resting.rgba,
-    spacingMedium = tokens.spacings.comfortable.medium;
+  enabledColor = _tokens$colors.text.static_icons__tertiary.rgba,
+  hoverColor = _tokens$colors.interactive.primary__resting.rgba,
+  spacingMedium = tokens.spacings.comfortable.medium;
 var breadcrumbs = {
   spacings: {
     left: spacingMedium,

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

@@ -9,41 +9,32 @@ import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
 var _excluded = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
-
 var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
     case 'ghost':
       return tokenSet.ghost;
-
     case 'ghost_icon':
       return tokenSet.ghost_icon;
-
     case 'outlined':
       return tokenSet.outlined;
-
     case 'contained_icon':
       return tokenSet.contained_icon;
-
     case 'contained':
     default:
       return tokenSet.contained;
   }
 };
-
 var getToken = function getToken(variant, color) {
   switch (color) {
     case 'danger':
       return getVariant(token.danger, variant);
-
     case 'secondary':
       return getVariant(token.secondary, variant);
-
     case 'primary':
     default:
       return getVariant(token.primary, variant);
   }
 };
-
 var Inner = styled.span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
@@ -53,40 +44,36 @@ var ButtonBase = styled.button.withConfig({
   componentId: "sc-1hs0myn-1"
 })(function (_ref) {
   var _clickbound$offset, _clickbound$offset2, _hover$typography;
-
   var theme = _ref.theme;
   var states = theme.states,
-      clickbound = theme.clickbound;
+    clickbound = theme.clickbound;
   var focus = states.focus,
-      hover = states.hover,
-      disabled = states.disabled;
+    hover = states.hover,
+    disabled = states.disabled;
   return css(["box-sizing:border-box;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,&[aria-disabled='true']{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);
 });
 var Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,
-      color = _ref2$color === void 0 ? 'primary' : _ref2$color,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'contained' : _ref2$variant,
-      children = _ref2.children,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      href = _ref2.href,
-      _ref2$tabIndex = _ref2.tabIndex,
-      tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
-      _ref2$fullWidth = _ref2.fullWidth,
-      fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-      other = _objectWithoutProperties(_ref2, _excluded);
-
+    color = _ref2$color === void 0 ? 'primary' : _ref2$color,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'contained' : _ref2$variant,
+    children = _ref2.children,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    href = _ref2.href,
+    _ref2$tabIndex = _ref2.tabIndex,
+    tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
+    _ref2$fullWidth = _ref2.fullWidth,
+    fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
+    other = _objectWithoutProperties(_ref2, _excluded);
   var _useEds = useEds(),
-      density = _useEds.density;
-
+    density = _useEds.density;
   var token = useToken({
     density: density
   }, getToken(variant, color));
   var as = href && !disabled ? 'a' : other.as ? other.as : 'button';
   var type = href || other.as ? undefined : 'button';
   tabIndex = disabled ? -1 : tabIndex;
-
   var buttonProps = _objectSpread({
     ref: ref,
     as: as,
@@ -95,7 +82,6 @@ var Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
     disabled: disabled,
     tabIndex: tabIndex
   }, other);
-
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, buttonProps), {}, {

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

@@ -17,14 +17,12 @@ var ButtonGroupBase = styled.div.withConfig({
 });
 var ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
-      vertical = _ref2.vertical,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
+    vertical = _ref2.vertical,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread({
     ref: ref,
     vertical: vertical
   }, rest);
-
   return /*#__PURE__*/jsx(ButtonGroupBase, _objectSpread(_objectSpread({
     role: "group"
   }, props), {}, {

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

@@ -10,16 +10,14 @@ import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 var _excluded = ["children", "multiple", "selectedIndexes", "onChange"];
 var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
   var children = _ref.children,
-      multiple = _ref.multiple,
-      selectedIndexes = _ref.selectedIndexes,
-      onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    multiple = _ref.multiple,
+    selectedIndexes = _ref.selectedIndexes,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(selectedIndexes || []),
-      _useState2 = _slicedToArray(_useState, 2),
-      pickedIndexes = _useState2[0],
-      setPickedIndexes = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    pickedIndexes = _useState2[0],
+    setPickedIndexes = _useState2[1];
   useEffect(function () {
     if (Array.isArray(selectedIndexes)) {
       setPickedIndexes(selectedIndexes);
@@ -28,25 +26,20 @@ var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
   var updatedChildren = Children.map(children, function (child, index) {
     var isSelected = pickedIndexes.includes(index);
     var childElement = child;
-
     if ( /*#__PURE__*/isValidElement(child) && child.type === Button) {
       var buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
         onClick: function onClick(e) {
           var _childElement$props, _childElement$props$o;
-
           (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
           var updatedSelection = [index];
-
           if (multiple) {
             updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(function (i) {
               return i !== index;
             }) : [].concat(_toConsumableArray(pickedIndexes), [index]);
           }
-
           setPickedIndexes(updatedSelection);
-
           if (onChange) {
             onChange(updatedSelection);
           }

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

@@ -2,20 +2,20 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
 var buttonTypography = tokens.typography.navigation.button,
-    _tokens$colors$intera = tokens.colors.interactive,
-    disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
-    disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
-    disabledColor = _tokens$colors$intera.disabled__fill.rgba,
-    medium = tokens.spacings.comfortable.medium,
-    _tokens$shape = tokens.shape,
-    _tokens$shape$button = _tokens$shape.button,
-    buttonHeight = _tokens$shape$button.minHeight,
-    buttonBorderRadius = _tokens$shape$button.borderRadius,
-    compactButtonHeight = _tokens$shape._modes.compact.button.minHeight,
-    outline = tokens.interactions.focused,
-    _tokens$clickbounds = tokens.clickbounds,
-    clicboundHeight = _tokens$clickbounds.default__base,
-    compactClickboundHeight = _tokens$clickbounds.compact__standard;
+  _tokens$colors$intera = tokens.colors.interactive,
+  disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
+  disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
+  disabledColor = _tokens$colors$intera.disabled__fill.rgba,
+  medium = tokens.spacings.comfortable.medium,
+  _tokens$shape = tokens.shape,
+  _tokens$shape$button = _tokens$shape.button,
+  buttonHeight = _tokens$shape$button.minHeight,
+  buttonBorderRadius = _tokens$shape$button.borderRadius,
+  compactButtonHeight = _tokens$shape._modes.compact.button.minHeight,
+  outline = tokens.interactions.focused,
+  _tokens$clickbounds = tokens.clickbounds,
+  clicboundHeight = _tokens$clickbounds.default__base,
+  compactClickboundHeight = _tokens$clickbounds.compact__standard;
 var button = {
   background: 'transparent',
   height: "var(--eds_button__height, ".concat(buttonHeight, ")"),

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

@@ -3,15 +3,15 @@ import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors = tokens.colors,
-    primaryWhite = _tokens$colors.text.static_icons__primary_white.rgba,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    primaryColor = _tokens$colors$intera.primary__resting.rgba,
-    primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
-    secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
-    secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
-    dangerColor = _tokens$colors$intera.danger__resting.rgba,
-    dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
-    buttonBorderRadius = tokens.shape.button.borderRadius;
+  primaryWhite = _tokens$colors.text.static_icons__primary_white.rgba,
+  _tokens$colors$intera = _tokens$colors.interactive,
+  primaryColor = _tokens$colors$intera.primary__resting.rgba,
+  primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
+  secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
+  secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
+  dangerColor = _tokens$colors$intera.danger__resting.rgba,
+  dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
+  buttonBorderRadius = tokens.shape.button.borderRadius;
 var primary = mergeDeepRight(button, {
   background: primaryColor,
   typography: {

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

@@ -3,9 +3,9 @@ import { primary as primary$1, secondary as secondary$1, danger as danger$1 } fr
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$clickbounds = tokens.clickbounds,
-    clicboundHeight = _tokens$clickbounds.default__base,
-    compactClickboundHeight = _tokens$clickbounds.compact__standard,
-    shape = tokens.shape;
+  clicboundHeight = _tokens$clickbounds.default__base,
+  compactClickboundHeight = _tokens$clickbounds.compact__standard,
+  shape = tokens.shape;
 var contained_icon = {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,

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

@@ -3,15 +3,15 @@ import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors$intera = tokens.colors.interactive,
-    primaryColor = _tokens$colors$intera.primary__resting.rgba,
-    primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
-    primaryHoverAltColor = _tokens$colors$intera.primary__hover_alt.rgba,
-    secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
-    secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
-    secondaryHoverAltColor = _tokens$colors$intera.secondary__highlight.rgba,
-    dangerColor = _tokens$colors$intera.danger__resting.rgba,
-    dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
-    dangerHoverAltColor = _tokens$colors$intera.danger__highlight.rgba;
+  primaryColor = _tokens$colors$intera.primary__resting.rgba,
+  primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
+  primaryHoverAltColor = _tokens$colors$intera.primary__hover_alt.rgba,
+  secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
+  secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
+  secondaryHoverAltColor = _tokens$colors$intera.secondary__highlight.rgba,
+  dangerColor = _tokens$colors$intera.danger__resting.rgba,
+  dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
+  dangerHoverAltColor = _tokens$colors$intera.danger__highlight.rgba;
 var primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor