@equinor/eds-core-react 0.35.0 → 0.36.0

package/dist/esm/components/Switch/SwitchDefault.js

@@ -1,56 +1,58 @@
-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 { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["disabled", "className", "style"];
-var Input = styled(BaseInput).withConfig({
+const Input = styled(BaseInput).withConfig({
   displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
-})(function (_ref) {
-  var disabled = _ref.disabled,
-    theme = _ref.theme;
-  return css(["width:", ";aspect-ratio:1/1;&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], theme.clickbound.height, disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
-});
-var Track = styled.span.withConfig({
+})(({
+  disabled,
+  theme
+}) => css(["width:", ";aspect-ratio:1/1;&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], theme.clickbound.height, disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background));
+const Track = styled.span.withConfig({
   displayName: "SwitchDefault__Track",
   componentId: "sc-16ym5pn-1"
-})(function (_ref2) {
-  var $isDisabled = _ref2.$isDisabled,
-    _ref2$theme = _ref2.theme,
-    states = _ref2$theme.states,
-    track = _ref2$theme.entities.track;
-  return css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, $isDisabled && {
-    backgroundColor: states.disabled.background
-  });
-});
-var Handle = styled.span.withConfig({
+})(({
+  $isDisabled,
+  theme: {
+    states,
+    entities: {
+      track
+    }
+  }
+}) => css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, $isDisabled && {
+  backgroundColor: states.disabled.background
+}));
+const Handle = styled.span.withConfig({
   displayName: "SwitchDefault__Handle",
   componentId: "sc-16ym5pn-2"
-})(function (_ref3) {
-  var $isDisabled = _ref3.$isDisabled,
-    _ref3$theme = _ref3.theme,
-    states = _ref3$theme.states,
-    handle = _ref3$theme.entities.handle;
-  return css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, $isDisabled && {
-    backgroundColor: states.disabled.background
-  }, handle.boxShadow, handle.width, handle.height);
-});
-var SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
-  var disabled = _ref4.disabled,
-    className = _ref4.className,
-    style = _ref4.style,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+})(({
+  $isDisabled,
+  theme: {
+    states,
+    entities: {
+      handle
+    }
+  }
+}) => css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, $isDisabled && {
+  backgroundColor: states.disabled.background
+}, handle.boxShadow, handle.width, handle.height));
+const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault({
+  disabled,
+  className,
+  style,
+  ...rest
+}, ref) {
   return /*#__PURE__*/jsxs(GridWrapper, {
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/jsx(Input, {
+      ...rest,
       ref: ref,
       disabled: disabled
-    })), /*#__PURE__*/jsxs(BaseInputWrapper, {
+    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsx(Track, {
         $isDisabled: disabled
       }), /*#__PURE__*/jsx(Handle, {

package/dist/esm/components/Switch/SwitchSmall.js

@@ -1,53 +1,58 @@
-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 { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
 import { outlineTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["disabled", "className", "style"];
-var Input = styled(BaseInput).withConfig({
+const Input = styled(BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
-})(function (_ref) {
-  var disabled = _ref.disabled,
-    _ref$theme = _ref.theme,
-    states = _ref$theme.states,
-    _ref$theme$entities = _ref$theme.entities,
-    handle = _ref$theme$entities.handle,
-    track = _ref$theme$entities.track;
-  return css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background);
-});
-var Track = styled.span.withConfig({
+})(({
+  disabled,
+  theme: {
+    states,
+    entities: {
+      handle,
+      track
+    }
+  }
+}) => css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
+const Track = styled.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
-})(function (_ref2) {
-  var $isDisabled = _ref2.$isDisabled,
-    _ref2$theme = _ref2.theme,
-    states = _ref2$theme.states,
-    track = _ref2$theme.entities.track;
-  return css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, $isDisabled ? states.disabled.background : track.states.disabled.background);
-});
-var Handle = styled.span.withConfig({
+})(({
+  $isDisabled,
+  theme: {
+    states,
+    entities: {
+      track
+    }
+  }
+}) => css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, $isDisabled ? states.disabled.background : track.states.disabled.background));
+const Handle = styled.span.withConfig({
   displayName: "SwitchSmall__Handle",
   componentId: "sc-1a99mis-2"
-})(function (_ref3) {
-  var handle = _ref3.theme.entities.handle;
-  return css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height);
-});
-var SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
-  var disabled = _ref4.disabled,
-    className = _ref4.className,
-    style = _ref4.style,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+})(({
+  theme: {
+    entities: {
+      handle
+    }
+  }
+}) => css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height));
+const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall({
+  disabled,
+  className,
+  style,
+  ...rest
+}, ref) {
   return /*#__PURE__*/jsxs(GridWrapper, {
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/jsx(Input, {
+      ...rest,
       ref: ref,
       disabled: disabled
-    })), /*#__PURE__*/jsxs(BaseInputWrapper, {
+    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsx(Track, {
         $isDisabled: disabled
       }), /*#__PURE__*/jsx(Handle, {})]

package/dist/esm/components/Table/Body.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 { InnerContext } from './Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var TableBase = styled.tbody.withConfig({
+const TableBase = styled.tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-var Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
+const Body = /*#__PURE__*/forwardRef(function Body({
+  children,
+  ...props
+}, ref) {
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
     },
-    children: /*#__PURE__*/jsx(TableBase, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(TableBase, {
+      ...props,
       ref: ref,
       children: children
-    }))
+    })
   });
 });
 

package/dist/esm/components/Table/Caption.js

@@ -1,26 +1,24 @@
-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 = ["captionSide"];
-var StyledCaption = styled.caption.withConfig({
+const StyledCaption = styled.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
-})(function (_ref) {
-  var $captionSide = _ref.$captionSide;
+})(({
+  $captionSide
+}) => {
   return css(["caption-side:", ";"], $captionSide);
 });
-var Caption = /*#__PURE__*/forwardRef(function Caption(_ref2, ref) {
-  var _ref2$captionSide = _ref2.captionSide,
-    captionSide = _ref2$captionSide === void 0 ? 'top' : _ref2$captionSide,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/jsx(StyledCaption, _objectSpread(_objectSpread({
-    $captionSide: captionSide
-  }, props), {}, {
+const Caption = /*#__PURE__*/forwardRef(function Caption({
+  captionSide = 'top',
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledCaption, {
+    $captionSide: captionSide,
+    ...props,
     ref: ref
-  }));
+  });
 });
 
 export { Caption };

package/dist/esm/components/Table/Cell.js

@@ -1,29 +1,30 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import { InnerContext } from './Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
-var Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
-  var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+const Cell = /*#__PURE__*/forwardRef(function Cell({
+  ...rest
+}, ref) {
   return /*#__PURE__*/jsx(InnerContext.Consumer, {
-    children: function children(_ref2) {
-      var variant = _ref2.variant,
-        sticky = _ref2.sticky;
+    children: ({
+      variant,
+      sticky
+    }) => {
       switch (variant) {
         case 'head':
-          return /*#__PURE__*/jsx(TableHeaderCell, _objectSpread({
+          return /*#__PURE__*/jsx(TableHeaderCell, {
             ref: ref,
-            sticky: sticky
-          }, rest));
+            sticky: sticky,
+            ...rest
+          });
         default:
         case 'body':
-          return /*#__PURE__*/jsx(TableDataCell, _objectSpread({
-            ref: ref
-          }, rest));
+          return /*#__PURE__*/jsx(TableDataCell, {
+            ref: ref,
+            ...rest
+          });
       }
     }
   });

package/dist/esm/components/Table/DataCell/DataCell.js

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
@@ -7,39 +5,42 @@ import { applyVariant, tableCell } from './DataCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
 
-var _excluded = ["children", "variant"];
-var StyledTableCell = styled.td.withConfig({
+const StyledTableCell = styled.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
-})(function (_ref) {
-  var _theme$validation$err;
-  var theme = _ref.theme,
-    color = _ref.color;
-  var height = theme.height,
-    typography = theme.typography,
-    spacings = theme.spacings,
-    border = theme.border,
-    align = theme.align;
-  var backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
-  var base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+})(({
+  theme,
+  color
+}) => {
+  const {
+    height,
+    typography,
+    spacings,
+    border,
+    align
+  } = theme;
+  const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
+  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-var TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
+  children,
+  variant = 'text',
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, applyVariant(variant, tableCell));
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(StyledTableCell, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/jsx(StyledTableCell, {
+      ...rest,
       ref: ref,
       children: children
-    }))
+    })
   });
 });
 

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -1,26 +1,61 @@
-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 _tokens$typography = tokens.typography,
-  _tokens$typography$ta = _tokens$typography.table,
-  cellTypography = _tokens$typography$ta.cell_text,
-  cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
-  compactTypography = _tokens$typography._modes.compact,
-  _tokens$colors = tokens.colors,
-  typographyColor = _tokens$colors.text.static_icons__default.rgba,
-  borderColor = _tokens$colors.ui.background__medium.rgba,
-  _tokens$colors$intera = _tokens$colors.interactive,
-  backgroundColor = _tokens$colors$intera.table__cell__fill_resting.rgba,
-  hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
-  activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba,
-  errorColor = _tokens$colors$intera.danger__highlight.rgba,
-  primaryRestingColor = _tokens$colors$intera.primary__resting.rgba,
-  disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
-  disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
-  focusColor = _tokens$colors$intera.focus.rgba,
-  medium = tokens.spacings.comfortable.medium;
-var tableCell = {
+const {
+  typography: {
+    table: {
+      cell_text: cellTypography,
+      cell_numeric_monospaced: cellNumericTypography
+    },
+    _modes: {
+      compact: compactTypography
+    }
+  },
+  colors: {
+    text: {
+      static_icons__default: {
+        rgba: typographyColor
+      }
+    },
+    ui: {
+      background__medium: {
+        rgba: borderColor
+      }
+    },
+    interactive: {
+      table__cell__fill_resting: {
+        rgba: backgroundColor
+      },
+      table__cell__fill_hover: {
+        rgba: hoverBackgroundColor
+      },
+      table__cell__fill_activated: {
+        rgba: activeBackgroundColor
+      },
+      danger__highlight: {
+        rgba: errorColor
+      },
+      primary__resting: {
+        rgba: primaryRestingColor
+      },
+      disabled__text: {
+        rgba: disabledTextColor
+      },
+      disabled__border: {
+        rgba: disabledBorderColor
+      },
+      focus: {
+        rgba: focusColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  }
+} = tokens;
+const tableCell = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
   align: {
@@ -37,19 +72,21 @@ var tableCell = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
+    left: `var(--eds_table__cell__padding_x, ${medium})`,
+    right: `var(--eds_table__cell__padding_x, ${medium})`
   },
-  typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
+  typography: {
+    ...cellTypography,
     color: typographyColor,
-    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
-  }),
+    fontSize: `var(--eds_table__font_size, ${cellTypography.fontSize})`
+  },
   states: {
     active: {
       background: activeBackgroundColor,
-      typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
+      typography: {
+        ...cellTypography,
         color: primaryRestingColor
-      }),
+      },
       border: {
         bottom: {
           color: primaryRestingColor
@@ -57,9 +94,10 @@ var tableCell = {
       }
     },
     disabled: {
-      typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
+      typography: {
+        ...cellTypography,
         color: disabledTextColor
-      }),
+      },
       border: {
         type: 'bordergroup',
         bottom: {
@@ -82,14 +120,15 @@ var tableCell = {
   modes: {
     compact: {
       height: 'var(--eds_table__cell__height_compact, 32px)',
-      typography: _objectSpread(_objectSpread({}, compactTypography.table.cell_text), {}, {
+      typography: {
+        ...compactTypography.table.cell_text,
         color: typographyColor
-      }),
+      },
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
+        left: `var(--eds_table__cell__padding_x_compact, ${medium})`,
+        right: `var(--eds_table__cell__padding_x_compact, ${medium})`
       }
     }
   },
@@ -100,20 +139,22 @@ var tableCell = {
   },
   variants: {
     numeric: {
-      typography: _objectSpread(_objectSpread({}, cellNumericTypography), {}, {
+      typography: {
+        ...cellNumericTypography,
         color: typographyColor
-      }),
+      },
       modes: {
         compact: {
-          typography: _objectSpread(_objectSpread({}, compactTypography.table.cell_numeric_monospaced), {}, {
+          typography: {
+            ...compactTypography.table.cell_numeric_monospaced,
             color: typographyColor
-          })
+          }
         }
       }
     }
   }
 };
-var applyVariant = function applyVariant(variant, token) {
+const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
       return mergeDeepRight(token, token.variants.numeric);

package/dist/esm/components/Table/Head/Head.js

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { token } from './Head.tokens.js';
@@ -7,24 +5,25 @@ import { bordersTemplate } from '@equinor/eds-utils';
 import { InnerContext } from '../Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "sticky"];
-var StyledTableHead = styled.thead.withConfig({
+const StyledTableHead = styled.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
 })(["", " background:", ";"], bordersTemplate(token.border), token.background);
-var Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
-  var children = _ref.children,
-    sticky = _ref.sticky,
-    props = _objectWithoutProperties(_ref, _excluded);
+const Head = /*#__PURE__*/forwardRef(function Head({
+  children,
+  sticky,
+  ...props
+}, ref) {
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
-      sticky: sticky
+      sticky
     },
-    children: /*#__PURE__*/jsx(StyledTableHead, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(StyledTableHead, {
+      ...props,
       ref: ref,
       children: children
-    }))
+    })
   });
 });
 

package/dist/esm/components/Table/Head/Head.tokens.js

@@ -1,9 +1,20 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  borderColor = _tokens$colors.ui.background__medium.rgba,
-  backgroundColor = _tokens$colors.interactive.table__header__fill_resting.rgba;
-var token = {
+const {
+  colors: {
+    ui: {
+      background__medium: {
+        rgba: borderColor
+      }
+    },
+    interactive: {
+      table__header__fill_resting: {
+        rgba: backgroundColor
+      }
+    }
+  }
+} = tokens;
+const token = {
   background: backgroundColor,
   border: {
     type: 'bordergroup',