@equinor/eds-core-react 0.35.1 → 0.36.1

package/dist/esm/components/Progress/Dots/DotProgress.js

@@ -1,38 +1,35 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { keyframes } from 'styled-components';
 import * as DotProgress_tokens from './DotProgress.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["color", "size"];
-var opacity = keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
-var Svg = styled.svg.withConfig({
+const opacity = keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
+const Svg = styled.svg.withConfig({
   displayName: "DotProgress__Svg",
   componentId: "sc-1s6o2q7-0"
-})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], function (_ref) {
-  var color = _ref.color;
-  return color;
-}, opacity, opacity, opacity);
-var getColor = function getColor(color) {
+})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], ({
+  color
+}) => color, opacity, opacity, opacity);
+const getColor = color => {
   if (DotProgress_tokens[color]) {
     return DotProgress_tokens[color].background;
   }
   return color;
 };
-var DotProgress = /*#__PURE__*/forwardRef(function DotProgress(_ref2, ref) {
-  var _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 32 : _ref2$size,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
+const DotProgress = /*#__PURE__*/forwardRef(function DotProgress({
+  color = 'neutral',
+  size = 32,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
     color: getColor(color),
-    ref: ref
-  });
-  var height = size / 4;
-  var width = size;
-  return /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({}, props), {}, {
+    ref
+  };
+  const height = size / 4;
+  const width = size;
+  return /*#__PURE__*/jsxs(Svg, {
+    ...props,
     role: "progressbar",
     viewBox: "0 0 16 4",
     height: height,
@@ -51,7 +48,7 @@ var DotProgress = /*#__PURE__*/forwardRef(function DotProgress(_ref2, ref) {
       cy: 2,
       r: 2
     })]
-  }));
+  });
 });
 
 export { DotProgress };

package/dist/esm/components/Progress/Dots/DotProgress.tokens.js

@@ -1,17 +1,29 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  primary100 = _tokens$colors.infographic.primary__moss_green_100.rgba,
-  _tokens$colors$intera = _tokens$colors.interactive,
-  icon_on_interactive_colors = _tokens$colors$intera.icon_on_interactive_colors.rgba,
-  danger_resting = _tokens$colors$intera.danger__resting.rgba;
-var primary = {
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_100: {
+        rgba: primary100
+      }
+    },
+    interactive: {
+      icon_on_interactive_colors: {
+        rgba: icon_on_interactive_colors
+      },
+      danger__resting: {
+        rgba: danger_resting
+      }
+    }
+  }
+} = tokens;
+const primary = {
   background: primary100
 };
-var neutral = {
+const neutral = {
   background: icon_on_interactive_colors
 };
-var tertiary = {
+const tertiary = {
   background: danger_resting
 };
 

package/dist/esm/components/Progress/Linear/LinearProgress.js

@@ -1,56 +1,49 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { primary } from './LinearProgress.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["variant", "value"];
-var indeterminate = keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
-var Track = styled.div.withConfig({
+const indeterminate = keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
+const Track = styled.div.withConfig({
   displayName: "LinearProgress__Track",
   componentId: "sc-5orxpi-0"
 })(["position:relative;overflow:hidden;height:4px;background-color:", ";width:100%;border-radius:50px;"], primary.background);
-var ProgressBar = styled.div.withConfig({
+const ProgressBar = styled.div.withConfig({
   displayName: "LinearProgress__ProgressBar",
   componentId: "sc-5orxpi-1"
 })(["transition:transform 0.4s linear;background-color:", ";width:100%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;"], primary.entities.progress.background);
-var IndeterminateProgressBar = styled.div.withConfig({
+const IndeterminateProgressBar = styled.div.withConfig({
   displayName: "LinearProgress__IndeterminateProgressBar",
   componentId: "sc-5orxpi-2"
 })(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary.entities.progress.background, indeterminate);
-var SrOnlyOutput = styled.output.withConfig({
+const SrOnlyOutput = styled.output.withConfig({
   displayName: "LinearProgress__SrOnlyOutput",
   componentId: "sc-5orxpi-3"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'indeterminate' : _ref$variant,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? null : _ref$value,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    srProgress = _useState2[0],
-    setSrProgress = _useState2[1];
-  var barStyle;
+const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress({
+  variant = 'indeterminate',
+  value = null,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  const [srProgress, setSrProgress] = useState(0);
+  let barStyle;
   if (variant === 'determinate') {
     if (value !== undefined) {
       props['aria-valuenow'] = Math.round(value);
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
-      var transform = value - 100;
-      barStyle = "translateX(".concat(transform, "%)");
+      const transform = value - 100;
+      barStyle = `translateX(${transform}%)`;
     }
   }
-  var transformStyle = {
+  const transformStyle = {
     transform: barStyle
   };
-  useEffect(function () {
+  useEffect(() => {
     if (variant === 'indeterminate') return;
     if (value >= 25 && value < 50) {
       setSrProgress(25);
@@ -62,16 +55,17 @@ var LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress(_ref, ref)
       setSrProgress(100);
     }
   }, [value, variant]);
-  var getProgressFormatted = function getProgressFormatted() {
-    return "Loading ".concat(srProgress, "%");
+  const getProgressFormatted = () => {
+    return `Loading ${srProgress}%`;
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Track, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx(Track, {
+      ...props,
       role: "progressbar",
       children: variant === 'indeterminate' ? /*#__PURE__*/jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsx(ProgressBar, {
         style: transformStyle
       })
-    })), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
+    }), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
       children: getProgressFormatted()
     })]
   });

package/dist/esm/components/Progress/Linear/LinearProgress.tokens.js

@@ -1,9 +1,18 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors$infogr = tokens.colors.infographic,
-  primary13 = _tokens$colors$infogr.primary__moss_green_13.rgba,
-  primary100 = _tokens$colors$infogr.primary__moss_green_100.rgba;
-var primary = {
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_13: {
+        rgba: primary13
+      },
+      primary__moss_green_100: {
+        rgba: primary100
+      }
+    }
+  }
+} = tokens;
+const primary = {
   background: primary13,
   entities: {
     progress: {

package/dist/esm/components/Progress/Star/StarProgress.js

@@ -1,37 +1,32 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { token } from './StarProgress.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["variant", "value", "size"];
-var indeterminate = keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
-var determinate = keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
-var Svg = styled.svg.withConfig({
+const indeterminate = keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
+const determinate = keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
+const Svg = styled.svg.withConfig({
   displayName: "StarProgress__Svg",
   componentId: "sc-c0byj9-0"
-})(["fill:", ";", ""], token.background, function (_ref) {
-  var $variant = _ref.$variant,
-    $progress = _ref.$progress;
-  return $variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, $progress > 90 ? 'running' : 'paused', $progress > 80 ? 'running' : 'paused', $progress > 60 ? 'running' : 'paused', $progress > 40 ? 'running' : 'paused', $progress > 20 ? 'running' : 'paused', $progress <= 20 ? 'running' : 'paused');
-});
-var StarProgress = /*#__PURE__*/forwardRef(function StarProgress(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'indeterminate' : _ref2$variant,
-    _ref2$value = _ref2.value,
-    value = _ref2$value === void 0 ? null : _ref2$value,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 48 : _ref2$size,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var progress = Math.round(value);
-  var height = size * 1.2;
-  var width = size;
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+})(["fill:", ";", ""], token.background, ({
+  $variant,
+  $progress
+}) => $variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, $progress > 90 ? 'running' : 'paused', $progress > 80 ? 'running' : 'paused', $progress > 60 ? 'running' : 'paused', $progress > 40 ? 'running' : 'paused', $progress > 20 ? 'running' : 'paused', $progress <= 20 ? 'running' : 'paused'));
+const StarProgress = /*#__PURE__*/forwardRef(function StarProgress({
+  variant = 'indeterminate',
+  value = null,
+  size = 48,
+  ...rest
+}, ref) {
+  const progress = Math.round(value);
+  const height = size * 1.2;
+  const width = size;
+  const props = {
+    ...rest,
+    ref,
     $variant: variant,
     $progress: progress
-  });
+  };
   if (variant === 'determinate') {
     if (value !== undefined) {
       props['aria-valuenow'] = progress;
@@ -39,7 +34,8 @@ var StarProgress = /*#__PURE__*/forwardRef(function StarProgress(_ref2, ref) {
       props['aria-valuemax'] = 100;
     }
   }
-  return /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(Svg, {
+    ...props,
     role: "progressbar",
     width: width,
     height: height,
@@ -60,7 +56,7 @@ var StarProgress = /*#__PURE__*/forwardRef(function StarProgress(_ref2, ref) {
     }), /*#__PURE__*/jsx("path", {
       d: "M39.6262 1.07261V11.7603V19.3368C39.627 19.7178 39.4265 20.0709 39.0988 20.2644L31.4145 24.8195L23.3545 29.5964C22.6385 30.0192 21.7339 29.5029 21.7339 28.6717V10.3259C21.7339 9.94495 21.9356 9.5927 22.2641 9.39955L38.008 0.149533C38.7232 -0.270381 39.6241 0.24385 39.6262 1.07261Z"
     })]
-  }));
+  });
 });
 
 export { StarProgress };

package/dist/esm/components/Progress/Star/StarProgress.tokens.js

@@ -1,7 +1,15 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var logoFillPositive = tokens.colors.logo.fill_positive.rgba;
-var token = {
+const {
+  colors: {
+    logo: {
+      fill_positive: {
+        rgba: logoFillPositive
+      }
+    }
+  }
+} = tokens;
+const token = {
   background: logoFillPositive
 };
 

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

@@ -3,7 +3,7 @@ import { CircularProgress } from './Circular/CircularProgress.js';
 import { StarProgress } from './Star/StarProgress.js';
 import { DotProgress } from './Dots/DotProgress.js';
 
-var Progress = {
+const Progress = {
   Linear: LinearProgress,
   Circular: CircularProgress,
   Star: StarProgress,

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

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
@@ -8,102 +6,90 @@ import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["label", "disabled", "className", "style"];
-var Input = styled.input.attrs(function (_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'radio' : _ref$type;
-  return {
-    type: type
-  };
-}).withConfig({
+/* eslint camelcase: "off" */
+const Input = styled.input.attrs(({
+  type = 'radio'
+}) => ({
+  type
+})).withConfig({
   displayName: "Radio__Input",
   componentId: "sc-we59oz-0"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], function (_ref2) {
-  var theme = _ref2.theme,
-    $iconSize = _ref2.$iconSize;
-  return parseFloat(theme.clickbound.height) / $iconSize;
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return outlineTemplate(theme.states.focus.outline);
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return outlineTemplate(theme.states.focus.outline);
-});
-var StyledLabel = styled.label.withConfig({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
+  theme,
+  $iconSize
+}) => parseFloat(theme.clickbound.height) / $iconSize, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  theme
+}) => outlineTemplate(theme.states.focus.outline), ({
+  theme
+}) => outlineTemplate(theme.states.focus.outline));
+const StyledLabel = styled.label.withConfig({
   displayName: "Radio__StyledLabel",
   componentId: "sc-we59oz-1"
-})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref6) {
-  var $disabled = _ref6.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-});
-var StyledPath = styled.path.attrs(function (_ref7) {
-  var $icon = _ref7.$icon;
-  return {
-    fillRule: 'evenodd',
-    clipRule: 'evenodd',
-    d: $icon.svgPathData
-  };
-}).withConfig({
+})(["display:inline-flex;align-items:center;cursor:", ";"], ({
+  $disabled
+}) => $disabled ? 'not-allowed' : 'pointer');
+const StyledPath = styled.path.attrs(({
+  $icon
+}) => ({
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: $icon.svgPathData
+})).withConfig({
   displayName: "Radio__StyledPath",
   componentId: "sc-we59oz-2"
 })([""]);
-var Svg = styled.svg.attrs(function (_ref8) {
-  var height = _ref8.height,
-    width = _ref8.width,
-    fill = _ref8.fill;
-  return {
-    name: null,
-    xmlns: 'http://www.w3.org/2000/svg',
-    height: height,
-    width: width,
-    fill: fill
-  };
-}).withConfig({
+const Svg = styled.svg.attrs(({
+  height,
+  width,
+  fill
+}) => ({
+  name: null,
+  xmlns: 'http://www.w3.org/2000/svg',
+  height,
+  width,
+  fill
+})).withConfig({
   displayName: "Radio__Svg",
   componentId: "sc-we59oz-3"
 })(["grid-area:input;pointer-events:none;"]);
-var LabelText = styled.span.withConfig({
+const LabelText = styled.span.withConfig({
   displayName: "Radio__LabelText",
   componentId: "sc-we59oz-4"
 })(["", ""], typographyTemplate(comfortable.typography));
-var InputWrapper = styled.span.withConfig({
+const InputWrapper = styled.span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;cursor:", ";&::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref9) {
-  var theme = _ref9.theme;
-  return spacingsTemplate(theme.spacings);
-}, function (_ref10) {
-  var disabled = _ref10.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.width;
-}, function (_ref12) {
-  var disabled = _ref12.disabled;
-  return disabled ? 'transparent' : comfortable.states.hover.background;
-});
-var Radio = /*#__PURE__*/forwardRef(function Radio(_ref13, ref) {
-  var label = _ref13.label,
-    _ref13$disabled = _ref13.disabled,
-    disabled = _ref13$disabled === void 0 ? false : _ref13$disabled,
-    className = _ref13.className,
-    style = _ref13.style,
-    rest = _objectWithoutProperties(_ref13, _excluded);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;cursor:", ";&::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], ({
+  theme
+}) => spacingsTemplate(theme.spacings), ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  theme
+}) => theme.width, ({
+  disabled
+}) => disabled ? 'transparent' : comfortable.states.hover.background);
+const Radio = /*#__PURE__*/forwardRef(function Radio({
+  label,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, comfortable);
-  var iconSize = 24;
-  var fill = disabled ? comfortable.states.disabled.background : comfortable.background;
-  var renderSVG = useMemo(function () {
+  const iconSize = 24;
+  const fill = disabled ? comfortable.states.disabled.background : comfortable.background;
+  const renderSVG = useMemo(() => {
     return /*#__PURE__*/jsxs(Svg, {
       width: iconSize,
       height: iconSize,
-      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      viewBox: `0 0 ${iconSize} ${iconSize}`,
       fill: fill,
       "aria-hidden": true,
       children: [/*#__PURE__*/jsx(StyledPath, {
@@ -123,11 +109,12 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref13, ref) {
       style: style,
       children: [/*#__PURE__*/jsxs(InputWrapper, {
         disabled: disabled,
-        children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
+        children: [/*#__PURE__*/jsx(Input, {
+          ...rest,
           ref: ref,
           disabled: disabled,
           $iconSize: iconSize
-        })), renderSVG]
+        }), renderSVG]
       }), /*#__PURE__*/jsx(LabelText, {
         children: label
       })]
@@ -135,11 +122,12 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref13, ref) {
       disabled: disabled,
       className: className,
       style: style,
-      children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
+      children: [/*#__PURE__*/jsx(Input, {
+        ...rest,
         ref: ref,
         disabled: disabled,
         $iconSize: iconSize
-      })), renderSVG]
+      }), renderSVG]
     })
   });
 });

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

@@ -1,21 +1,46 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors$intera = tokens.colors.interactive,
-  primaryColor = _tokens$colors$intera.primary__resting.rgba,
-  primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
-  focusOutlineColor = _tokens$colors$intera.focus.rgba,
-  disabledText = _tokens$colors$intera.disabled__text.rgba,
-  labelTypography = tokens.typography.navigation.menu_title,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  medium_small = _tokens$spacings$comf.medium_small,
-  x_small = _tokens$spacings$comf.x_small,
-  x_large = _tokens$spacings$comf.x_large,
-  xx_large = _tokens$spacings$comf.xx_large,
-  _tokens$clickbounds = tokens.clickbounds,
-  clicboundSize = _tokens$clickbounds.default__base,
-  compactClickboundSize = _tokens$clickbounds.compact__standard,
-  focusOutlineWidth = tokens.interactions.focused.width;
-var comfortable = {
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      disabled__text: {
+        rgba: disabledText
+      }
+    }
+  },
+  typography: {
+    navigation: {
+      menu_title: labelTypography
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium_small,
+      x_small,
+      x_large,
+      xx_large
+    }
+  },
+  clickbounds: {
+    default__base: clicboundSize,
+    compact__standard: compactClickboundSize
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
+} = tokens;
+const comfortable = {
   background: primaryColor,
   typography: labelTypography,
   width: xx_large,