@equinor/eds-core-react 0.18.0-envis.2 → 0.19.0-dev.20220405

package/dist/esm/components/Slider/SliderInput.js

@@ -1,9 +1,8 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
+import { bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   entities: {
@@ -24,18 +23,19 @@ const StyledSliderInput = styled.input.attrs(() => ({
   displayName: "SliderInput__StyledSliderInput",
   componentId: "sc-17orw4f-0"
 })(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track, track);
-const SliderInput = /*#__PURE__*/forwardRef(function SliderInput({
-  value,
-  min,
-  max,
-  id,
-  step,
-  onChange,
-  onMouseUp,
-  onKeyUp,
-  disabled,
-  ...restProps
-}, ref) {
+const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref, ref) {
+  let {
+    value,
+    min,
+    max,
+    id,
+    step,
+    onChange,
+    onMouseUp,
+    onKeyUp,
+    disabled,
+    ...restProps
+  } = _ref;
   return /*#__PURE__*/jsx(StyledSliderInput, { ...restProps,
     value: value,
     ref: ref,

package/dist/esm/components/Snackbar/Snackbar.js

@@ -2,21 +2,20 @@ import { forwardRef, useState, useRef, useEffect } from 'react';
 import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { snackbar } from './Snackbar.tokens.js';
+import { spacingsTemplate, bordersTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledSnackbar = styled(Paper).withConfig({
   displayName: "Snackbar__StyledSnackbar",
   componentId: "sc-ac6no8-0"
-})(({
-  theme,
-  placement
-}) => {
-  return css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:300;", " a,button{color:", ";}"], theme.background, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), theme.minHeight, {
+})(_ref => {
+  let {
+    theme,
+    placement
+  } = _ref;
+  return css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:1400;", " a,button{color:", ";}"], theme.background, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), theme.minHeight, {
     top: placement.includes('top') ? theme.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
     bottom: placement.includes('bottom') ? theme.spacings.bottom : undefined,
     right: placement.includes('right') ? theme.spacings.right : undefined,
@@ -24,20 +23,17 @@ const StyledSnackbar = styled(Paper).withConfig({
     transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
   }, theme.entities.button.typography.color);
 });
-const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
-  open = false,
-  autoHideDuration = 7000,
-  onClose,
-  placement = 'bottom',
-  children,
-  ...rest
-}, ref) {
+const Snackbar = /*#__PURE__*/forwardRef(function Snackbar(_ref2, ref) {
+  let {
+    open = false,
+    autoHideDuration = 7000,
+    onClose,
+    placement = 'bottom',
+    children,
+    ...rest
+  } = _ref2;
   const [visible, setVisible] = useState(open);
   const timer = useRef();
-  const {
-    setTimeout,
-    clearTimeout
-  } = window;
   useEffect(() => {
     setVisible(open);
     timer.current = setTimeout(() => {
@@ -48,7 +44,7 @@ const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
       }
     }, autoHideDuration);
     return () => clearTimeout(timer.current);
-  }, [open, autoHideDuration, setVisible, onClose, clearTimeout, setTimeout]);
+  }, [open, autoHideDuration, setVisible, onClose]);
   const props = {
     ref,
     placement,

package/dist/esm/components/Snackbar/SnackbarAction.js

@@ -5,15 +5,17 @@ import { jsx } from 'react/jsx-runtime';
 const StyledSnackbarAction = styled.div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
   componentId: "sc-1v5mjvd-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   return css(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], theme.entities.actions.spacings.left, theme.entities.actions.spacings.top, theme.entities.actions.spacings.bottom);
 });
-const SnackbarAction = /*#__PURE__*/forwardRef(function SnackbarAction({
-  children,
-  ...rest
-}, ref) {
+const SnackbarAction = /*#__PURE__*/forwardRef(function SnackbarAction(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref
   };

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

@@ -3,30 +3,36 @@ import styled, { css, ThemeProvider } from 'styled-components';
 import { SwitchSmall } from './SwitchSmall.js';
 import { SwitchDefault } from './SwitchDefault.js';
 import { comfortable } from './Switch.tokens.js';
+import { typographyTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledLabel = styled.label.withConfig({
   displayName: "Switch__StyledLabel",
   componentId: "sc-sdaahx-0"
-})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], ({
-  isDisabled
-}) => isDisabled ? 'not-allowed' : 'pointer');
+})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], _ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return isDisabled ? 'not-allowed' : 'pointer';
+});
 const Label = styled.span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
-})(({
-  theme
-}) => css(["", " margin-left:", ";"], typographyTemplate(theme.typography), theme.entities.label.spacings.left));
-const Switch = /*#__PURE__*/forwardRef(function Switch({
-  size = 'default',
-  disabled,
-  label,
-  className,
-  ...rest
-}, ref) {
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return css(["", " margin-left:", ";"], typographyTemplate(theme.typography), theme.entities.label.spacings.left);
+});
+const Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
+  let {
+    size = 'default',
+    disabled,
+    label,
+    className,
+    ...rest
+  } = _ref3;
   const {
     density
   } = useEds(); // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)

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

@@ -1,31 +1,38 @@
 import styled, { css } from 'styled-components';
-import { outlineTemplate } from '../../utils/templates/focus.js';
+import { outlineTemplate } from '@equinor/eds-utils';
 
 const BaseInputWrapper = styled.span.withConfig({
   displayName: "Switchstyles__BaseInputWrapper",
   componentId: "sc-x39lde-0"
-})(({
-  theme: {
-    clickbound,
-    width,
-    height
-  }
-}) => {
+})(_ref => {
   var _clickbound$offset, _clickbound$offset2;
 
+  let {
+    theme: {
+      clickbound,
+      width,
+      height
+    }
+  } = _ref;
   return css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;pointer-events:none;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, 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);
 });
-const BaseInput = styled.input.attrs(({
-  type = 'checkbox'
-}) => ({
-  type
-})).withConfig({
+const BaseInput = styled.input.attrs(_ref2 => {
+  let {
+    type = 'checkbox'
+  } = _ref2;
+  return {
+    type
+  };
+}).withConfig({
   displayName: "Switchstyles__BaseInput",
   componentId: "sc-x39lde-1"
-})(({
-  disabled,
-  theme
-}) => css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline), outlineTemplate(theme.states.focus.outline)));
+})(_ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline), outlineTemplate(theme.states.focus.outline));
+});
 const GridWrapper = styled.span.withConfig({
   displayName: "Switchstyles__GridWrapper",
   componentId: "sc-x39lde-2"

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

@@ -57,6 +57,11 @@ const {
         icon_button: compactIconButton
       }
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const comfortable = {
@@ -148,7 +153,7 @@ const comfortable = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         type: 'outline',
         style: 'dashed',
         color: focusOutlineColor

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

@@ -1,48 +1,58 @@
 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';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const Input = styled(BaseInput).withConfig({
   displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
-})(({
-  disabled,
-  theme
-}) => css(["&: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:", ";}"], 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));
+})(_ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
+  return css(["&: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:", ";}"], 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"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      track
+})(_ref2 => {
+  let {
+    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
-}));
+  } = _ref2;
+  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
+  });
+});
 const Handle = styled.span.withConfig({
   displayName: "SwitchDefault__Handle",
   componentId: "sc-16ym5pn-2"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      handle
+})(_ref3 => {
+  let {
+    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,
-  ...rest
-}, ref) {
+  } = _ref3;
+  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);
+});
+const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
+  let {
+    disabled,
+    ...rest
+  } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,

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

@@ -1,48 +1,58 @@
 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';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const Input = styled(BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
-})(({
-  disabled,
-  theme: {
-    states,
-    entities: {
-      handle,
-      track
+})(_ref => {
+  let {
+    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));
+  } = _ref;
+  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);
+});
 const Track = styled.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      track
+})(_ref2 => {
+  let {
+    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));
+  } = _ref2;
+  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);
+});
 const Handle = styled.span.withConfig({
   displayName: "SwitchSmall__Handle",
   componentId: "sc-1a99mis-2"
-})(({
-  theme: {
-    entities: {
-      handle
+})(_ref3 => {
+  let {
+    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,
-  ...rest
-}, ref) {
+  } = _ref3;
+  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);
+});
+const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
+  let {
+    disabled,
+    ...rest
+  } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,

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

@@ -7,10 +7,11 @@ const TableBase = styled.tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-const Body = /*#__PURE__*/forwardRef(function Body({
-  children,
-  ...props
-}, ref) {
+const Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'body'

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

@@ -5,11 +5,14 @@ import { jsx } from 'react/jsx-runtime';
 const StyledCaption = styled.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
-})(({
-  captionSide = 'top'
-}) => ({
-  captionSide
-}));
+})(_ref => {
+  let {
+    captionSide = 'top'
+  } = _ref;
+  return {
+    captionSide
+  };
+});
 const Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
   return /*#__PURE__*/jsx(StyledCaption, { ...props,
     ref: ref

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

@@ -4,13 +4,16 @@ import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
-const Cell = /*#__PURE__*/forwardRef(function Cell({ ...rest
-}, ref) {
+const Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
+  let { ...rest
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Consumer, {
-    children: ({
-      variant,
-      sticky
-    }) => {
+    children: _ref2 => {
+      let {
+        variant,
+        sticky
+      } = _ref2;
+
       switch (variant) {
         case 'head':
           return /*#__PURE__*/jsx(TableHeaderCell, {

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

@@ -1,21 +1,20 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { applyVariant, tableCell } from './DataCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 
 const StyledTableCell = styled.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
-})(({
-  theme,
-  color
-}) => {
+})(_ref => {
   var _theme$validation$err;
 
+  let {
+    theme,
+    color
+  } = _ref;
   const {
     height,
     typography,
@@ -27,11 +26,12 @@ const StyledTableCell = styled.td.withConfig({
   const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
-  children,
-  variant = 'text',
-  ...rest
-}, ref) {
+const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell(_ref2, ref) {
+  let {
+    children,
+    variant = 'text',
+    ...rest
+  } = _ref2;
   const {
     density
   } = useEds();

package/dist/esm/components/Table/DataCell/DataCell.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: {
@@ -151,7 +151,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight_1(token, token.variants.numeric);
+      return mergeDeepRight(token, token.variants.numeric);
 
     default:
       return token;

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

@@ -1,19 +1,20 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { token } from './Head.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { InnerContext } from '../Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 
 const StyledTableHead = styled.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
 })(["", " background:", ";"], bordersTemplate(token.border), token.background);
-const Head = /*#__PURE__*/forwardRef(function Head({
-  children,
-  sticky,
-  ...props
-}, ref) {
+const Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
+  let {
+    children,
+    sticky,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'head',

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

@@ -1,11 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { token } from './HeaderCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 
 const StyledTableCell = styled.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
@@ -40,11 +38,12 @@ const CellInner = styled.div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
-const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell({
-  children,
-  sort,
-  ...rest
-}, ref) {
+const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
+  let {
+    children,
+    sort,
+    ...rest
+  } = _ref;
   const {
     density
   } = useEds();