@equinor/eds-core-react 0.35.0 → 0.36.0

package/dist/esm/components/Card/CardActions.js

@@ -1,38 +1,37 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["children", "alignRight", "meta"];
-var spacings = primary.spacings;
-var StyledCardActions = styled.div.withConfig({
+const {
+  spacings
+} = primary;
+const StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], function (_ref) {
-  var $justifyContent = _ref.$justifyContent;
-  return $justifyContent;
-}, spacings.right, spacings.left, spacings.top, spacings.bottom);
-var CardActions = /*#__PURE__*/forwardRef(function CardActions(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$alignRight = _ref2.alignRight,
-    alignRight = _ref2$alignRight === void 0 ? false : _ref2$alignRight,
-    _ref2$meta = _ref2.meta,
-    meta = _ref2$meta === void 0 ? '' : _ref2$meta,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var $justifyContent = alignRight ? 'flex-end' : 'flex-start';
-  var props = _objectSpread({
-    ref: ref,
-    $justifyContent: $justifyContent
-  }, rest);
-  return /*#__PURE__*/jsxs(StyledCardActions, _objectSpread(_objectSpread({}, props), {}, {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], ({
+  $justifyContent
+}) => $justifyContent, spacings.right, spacings.left, spacings.top, spacings.bottom);
+const CardActions = /*#__PURE__*/forwardRef(function CardActions({
+  children,
+  alignRight = false,
+  meta = '',
+  ...rest
+}, ref) {
+  const $justifyContent = alignRight ? 'flex-end' : 'flex-start';
+  const props = {
+    ref,
+    $justifyContent,
+    ...rest
+  };
+  return /*#__PURE__*/jsxs(StyledCardActions, {
+    ...props,
     children: [children, meta !== '' && /*#__PURE__*/jsx(Typography, {
       variant: "caption",
       children: meta
     })]
-  }));
+  });
 });
 
 export { CardActions };

package/dist/esm/components/Card/CardContent.js

@@ -1,24 +1,24 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var spacings = primary.spacings;
-var StyledCardContent = styled.div.withConfig({
+const {
+  spacings
+} = primary;
+const StyledCardContent = styled.div.withConfig({
   displayName: "CardContent__StyledCardContent",
   componentId: "sc-esm4ym-0"
 })(["display:grid;padding:0 ", " 0 ", ";&:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.bottom);
-var CardContent = /*#__PURE__*/forwardRef(function CardContent(_ref, ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(StyledCardContent, _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+const CardContent = /*#__PURE__*/forwardRef(function CardContent({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledCardContent, {
+    ref: ref,
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { CardContent };

package/dist/esm/components/Card/CardHeader.js

@@ -1,25 +1,27 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var spacings = primary.spacings;
-var StyledCardHeader = styled.div.withConfig({
+const {
+  spacings
+} = primary;
+const StyledCardHeader = styled.div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
-var CardHeader = /*#__PURE__*/forwardRef(function CardHeader(_ref, ref) {
-  var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  return /*#__PURE__*/jsx(StyledCardHeader, _objectSpread(_objectSpread({}, props), {}, {
+const CardHeader = /*#__PURE__*/forwardRef(function CardHeader({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledCardHeader, {
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { CardHeader };

package/dist/esm/components/Card/CardHeaderTitle.js

@@ -1,23 +1,23 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var StyledCardHeaderTitle = styled.div.withConfig({
+const StyledCardHeaderTitle = styled.div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
-var CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle(_ref, ref) {
-  var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  return /*#__PURE__*/jsx(StyledCardHeaderTitle, _objectSpread(_objectSpread({}, props), {}, {
+const CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledCardHeaderTitle, {
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { CardHeaderTitle };

package/dist/esm/components/Card/CardMedia.js

@@ -1,32 +1,32 @@
-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 { primary } from './Card.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "fullWidth"];
-var spacings = primary.spacings,
-  border = primary.border;
-var StyledCardMedia = styled.div.withConfig({
+const {
+  spacings,
+  border
+} = primary;
+const StyledCardMedia = styled.div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:auto;", ""], function (_ref) {
-  var $fullWidth = _ref.$fullWidth;
-  return $fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left);
-});
-var CardMedia = /*#__PURE__*/forwardRef(function CardMedia(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$fullWidth = _ref2.fullWidth,
-    fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+})(["display:flex;width:auto;", ""], ({
+  $fullWidth
+}) => $fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left));
+const CardMedia = /*#__PURE__*/forwardRef(function CardMedia({
+  children,
+  fullWidth = false,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref,
     $fullWidth: fullWidth
-  });
-  return /*#__PURE__*/jsx(StyledCardMedia, _objectSpread(_objectSpread({}, props), {}, {
+  };
+  return /*#__PURE__*/jsx(StyledCardMedia, {
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { CardMedia };

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

@@ -5,7 +5,7 @@ import { CardMedia } from './CardMedia.js';
 import { CardHeader } from './CardHeader.js';
 import { CardHeaderTitle } from './CardHeaderTitle.js';
 
-var Card = Card$1;
+const Card = Card$1;
 Card.Actions = CardActions;
 Card.Content = CardContent;
 Card.Header = CardHeader;

package/dist/esm/components/Checkbox/Checkbox.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 { checkbox } from './Checkbox.tokens.js';
@@ -7,44 +5,45 @@ import { typographyTemplate } from '@equinor/eds-utils';
 import { CheckboxInput } from './Input.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["label", "disabled", "indeterminate", "className", "style"];
-var StyledLabel = styled.label.withConfig({
+/* eslint camelcase: "off" */
+const StyledLabel = styled.label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
-})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref) {
-  var $disabled = _ref.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-});
-var LabelText = styled.span.withConfig({
+})(["display:inline-flex;align-items:center;cursor:", ";"], ({
+  $disabled
+}) => $disabled ? 'not-allowed' : 'pointer');
+const LabelText = styled.span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
 })(["", ";"], typographyTemplate(checkbox.typography));
-var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
-  var label = _ref2.label,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    indeterminate = _ref2.indeterminate,
-    className = _ref2.className,
-    style = _ref2.style,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
+  label,
+  disabled = false,
+  indeterminate,
+  className,
+  style,
+  ...rest
+}, ref) {
   return label ? /*#__PURE__*/jsxs(StyledLabel, {
     $disabled: disabled,
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(CheckboxInput, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/jsx(CheckboxInput, {
+      ...rest,
       disabled: disabled,
       ref: ref,
       indeterminate: indeterminate
-    })), /*#__PURE__*/jsx(LabelText, {
+    }), /*#__PURE__*/jsx(LabelText, {
       children: label
     })]
-  }) : /*#__PURE__*/jsx(CheckboxInput, _objectSpread(_objectSpread({}, rest), {}, {
+  }) : /*#__PURE__*/jsx(CheckboxInput, {
+    ...rest,
     className: className,
     style: style,
     disabled: disabled,
     ref: ref,
     indeterminate: indeterminate
-  }));
+  });
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/esm/components/Checkbox/Checkbox.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 checkbox = {
+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 checkbox = {
   background: primaryColor,
   typography: labelTypography,
   width: xx_large,

package/dist/esm/components/Checkbox/Input.js

@@ -1,6 +1,3 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
@@ -9,101 +6,95 @@ import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils'
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["disabled", "indeterminate", "style", "className"];
-var StyledPath = styled.path.attrs(function (_ref) {
-  var $icon = _ref.$icon;
-  return {
-    fillRule: 'evenodd',
-    clipRule: 'evenodd',
-    d: $icon.svgPathData
-  };
-}).withConfig({
+/* eslint camelcase: "off" */
+const StyledPath = styled.path.attrs(({
+  $icon
+}) => ({
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: $icon.svgPathData
+})).withConfig({
   displayName: "Input__StyledPath",
   componentId: "sc-rqj7qf-0"
 })([""]);
-var Input = styled.input.attrs(function (_ref2) {
-  var _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? 'checkbox' : _ref2$type;
-  return {
-    type: type
-  };
-}).withConfig({
+const Input = styled.input.attrs(({
+  type = 'checkbox'
+}) => ({
+  type
+})).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["--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='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
-  var theme = _ref3.theme,
-    $iconSize = _ref3.$iconSize;
-  return parseFloat(theme.clickbound.height) / $iconSize;
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return outlineTemplate(theme.states.focus.outline);
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return outlineTemplate(theme.states.focus.outline);
-});
-var Svg = styled.svg.attrs(function (_ref7) {
-  var height = _ref7.height,
-    width = _ref7.width,
-    fill = _ref7.fill;
-  return {
-    name: null,
-    xmlns: 'http://www.w3.org/2000/svg',
-    height: height,
-    width: width,
-    fill: fill
-  };
-}).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='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{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 Svg = styled.svg.attrs(({
+  height,
+  width,
+  fill
+}) => ({
+  name: null,
+  xmlns: 'http://www.w3.org/2000/svg',
+  height,
+  width,
+  fill
+})).withConfig({
   displayName: "Input__Svg",
   componentId: "sc-rqj7qf-2"
 })(["grid-area:input;pointer-events:none;"]);
-var InputWrapper = styled.span.withConfig({
+const InputWrapper = styled.span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;", " &::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 (_ref8) {
-  var theme = _ref8.theme;
-  return spacingsTemplate(theme.spacings);
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.width;
-}, function (_ref10) {
-  var disabled = _ref10.disabled;
-  return disabled ? 'transparent' : checkbox.states.hover.background;
-});
-var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref) {
-  var _ref11$disabled = _ref11.disabled,
-    disabled = _ref11$disabled === void 0 ? false : _ref11$disabled,
-    indeterminate = _ref11.indeterminate,
-    style = _ref11.style,
-    className = _ref11.className,
-    rest = _objectWithoutProperties(_ref11, _excluded);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;", " &::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), ({
+  theme
+}) => theme.width, ({
+  disabled
+}) => disabled ? 'transparent' : checkbox.states.hover.background);
+const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
+  disabled = false,
+  indeterminate,
+  style,
+  className,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, checkbox);
-  var iconSize = 24;
-  var fill = disabled ? checkbox.states.disabled.background : checkbox.background;
-  var inputWrapperProps = {
-    disabled: disabled,
-    style: style,
-    className: className
+  const iconSize = 24;
+  const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
+  const inputWrapperProps = {
+    disabled,
+    style,
+    className
+  };
+  const inputProps = {
+    ref,
+    disabled,
+    ['data-indeterminate']: indeterminate,
+    ...rest
   };
-  var inputProps = _objectSpread(_defineProperty({
-    ref: ref,
-    disabled: disabled
-  }, 'data-indeterminate', indeterminate), rest);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({}, inputWrapperProps), {}, {
-      children: [/*#__PURE__*/jsx(Input, _objectSpread({
-        $iconSize: iconSize
-      }, inputProps)), indeterminate ? /*#__PURE__*/jsx(Svg, {
+    children: /*#__PURE__*/jsxs(InputWrapper, {
+      ...inputWrapperProps,
+      children: [/*#__PURE__*/jsx(Input, {
+        $iconSize: iconSize,
+        ...inputProps
+      }), indeterminate ? /*#__PURE__*/jsx(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, {
@@ -113,7 +104,7 @@ var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref)
       }) : /*#__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, {
@@ -124,7 +115,7 @@ var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref)
           name: "not-checked"
         })]
       })]
-    }))
+    })
   });
 });