@equinor/eds-core-react 0.17.0 → 0.18.0-dev.20220210

package/dist/esm/components/Select/SingleSelect/SingleSelect.js

@@ -3,32 +3,35 @@ import { useCombobox } from 'downshift';
 import styled, { ThemeProvider } from 'styled-components';
 import { Icon } from '../../Icon/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
+import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { select } from '../Select.tokens.js';
 import { StyledListItem, Container, StyledInputWrapper, PaddedInput, StyledButton, StyledList } from '../commonStyles.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../../utils/templates/index.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 import { Label } from '../../Label/Label.js';
 
 const PaddedStyledListItem = styled(StyledListItem).withConfig({
   displayName: "SingleSelect__PaddedStyledListItem",
   componentId: "sc-rh1yw2-0"
-})(["", ""], ({
-  theme
-}) => spacingsTemplate(theme.spacings));
-const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect({
-  items = [],
-  label,
-  meta,
-  className,
-  disabled = false,
-  readOnly = false,
-  initialSelectedItem,
-  selectedOption,
-  handleSelectedItemChange,
-  ...other
-}, ref) {
+})(["", ""], _ref => {
+  let {
+    theme
+  } = _ref;
+  return spacingsTemplate(theme.spacings);
+});
+const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect(_ref2, ref) {
+  let {
+    items = [],
+    label,
+    meta,
+    className,
+    disabled = false,
+    readOnly = false,
+    initialSelectedItem,
+    selectedOption,
+    handleSelectedItemChange,
+    ...other
+  } = _ref2;
   const [inputItems, setInputItems] = useState(items);
   const isControlled = selectedOption !== undefined ? true : false;
   const {
@@ -43,14 +46,17 @@ const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect({
   let comboboxProps = {
     items: inputItems,
     onSelectedItemChange: handleSelectedItemChange,
-    onInputValueChange: ({
-      inputValue
-    }) => {
+    onInputValueChange: _ref3 => {
+      let {
+        inputValue
+      } = _ref3;
       setInputItems(items.filter(item => item.toLowerCase().includes(inputValue.toLowerCase())));
     },
-    onIsOpenChange: ({
-      selectedItem
-    }) => {
+    onIsOpenChange: _ref4 => {
+      let {
+        selectedItem
+      } = _ref4;
+
       if (inputItems.length === 1 && selectedItem === inputItems[0]) {
         setInputItems(items);
       }

package/dist/esm/components/Select/commonStyles.js

@@ -1,9 +1,8 @@
 import { List } from '../List/index.js';
 import styled, { css } from 'styled-components';
 import { select } from './Select.tokens.js';
+import { bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { Input } from '../Input/Input.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { Button } from '../Button/Button.js';
 
 const {
@@ -26,24 +25,26 @@ const StyledList = styled(List).withConfig({
 const StyledListItem = styled(List.Item).withConfig({
   displayName: "commonStyles__StyledListItem",
   componentId: "sc-v98ajk-3"
-})(({
-  theme,
-  highlighted,
-  active
-}) => {
+})(_ref => {
+  let {
+    theme,
+    highlighted,
+    active
+  } = _ref;
   const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
   return css(["margin:0;list-style:none;background-color:", ";", ";cursor:", ";"], backgroundColor, typographyTemplate(theme.typography), highlighted === 'true' ? 'pointer' : 'default');
 });
 const StyledButton = styled(Button).withConfig({
   displayName: "commonStyles__StyledButton",
   componentId: "sc-v98ajk-4"
-})(({
-  theme: {
-    entities: {
-      button
+})(_ref2 => {
+  let {
+    theme: {
+      entities: {
+        button
+      }
     }
-  }
-}) => {
+  } = _ref2;
   return css(["position:absolute;right:", ";height:", ";width:", ";top:", ";color:", ";"], button.spacings.right, button.height, button.height, button.spacings.top, button.typography.color);
 });
 const StyledInputWrapper = styled.div.withConfig({

package/dist/esm/components/SideSheet/SideSheet.js

@@ -1,12 +1,11 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { clear } from '@equinor/eds-icons';
+import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { Icon } from '../Icon/index.js';
 import { comfortable, variants } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from '../Button/Button.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Typography } from '../Typography/Typography.js';
 
 const {
@@ -17,21 +16,25 @@ const {
 const StyledSideSheet = styled.div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background, ({
-  width
-}) => width, bordersTemplate(border), spacingsTemplate(spacings));
+})(["height:100%;position:absolute;z-index:200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background, _ref => {
+  let {
+    width
+  } = _ref;
+  return width;
+}, bordersTemplate(border), spacingsTemplate(spacings));
 const Header = styled.div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
 })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
-const SideSheet = /*#__PURE__*/forwardRef(function SideSheet({
-  variant = 'medium',
-  title = '',
-  children,
-  open = true,
-  onClose,
-  ...rest
-}, ref) {
+const SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
+  let {
+    variant = 'medium',
+    title = '',
+    children,
+    open = true,
+    onClose,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref,
     width: variants[variant]

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   entities: {
@@ -14,9 +14,10 @@ const StyledMinMax = styled.span.withConfig({
   displayName: "MinMax__StyledMinMax",
   componentId: "sc-lxmlid-0"
 })(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], typographyTemplate(output.typography), track.spacings.top);
-const MinMax = /*#__PURE__*/forwardRef(function MinMax({
-  children
-}, ref) {
+const MinMax = /*#__PURE__*/forwardRef(function MinMax(_ref, ref) {
+  let {
+    children
+  } = _ref;
   return /*#__PURE__*/jsx(StyledMinMax, {
     ref: ref,
     children: children

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   entities: {
@@ -13,14 +13,18 @@ const {
 const StyledOutput = styled.output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], ({
-  value
-}) => value, typographyTemplate(output.typography), slider.background, track.spacings.top);
-const Output = /*#__PURE__*/forwardRef(function Output({
-  children,
-  value,
-  htmlFor
-}, ref) {
+})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], _ref => {
+  let {
+    value
+  } = _ref;
+  return value;
+}, typographyTemplate(output.typography), slider.background, track.spacings.top);
+const Output = /*#__PURE__*/forwardRef(function Output(_ref2, ref) {
+  let {
+    children,
+    value,
+    htmlFor
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledOutput, {
     ref: ref,
     value: value,

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

@@ -4,8 +4,8 @@ import { slider } from './Slider.tokens.js';
 import { MinMax } from './MinMax.js';
 import { Output } from './Output.js';
 import { SliderInput } from './SliderInput.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const {
   entities: {
@@ -23,29 +23,56 @@ const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-
 const RangeWrapper = styled.div.withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], ({
-  valA
-}) => valA, ({
-  valB
-}) => valB, ({
-  min
-}) => min, ({
-  max
-}) => max, wrapperGrid, fakeTrackBg, trackFill, ({
-  disabled
-}) => disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], _ref => {
+  let {
+    valA
+  } = _ref;
+  return valA;
+}, _ref2 => {
+  let {
+    valB
+  } = _ref2;
+  return valB;
+}, _ref3 => {
+  let {
+    min
+  } = _ref3;
+  return min;
+}, _ref4 => {
+  let {
+    max
+  } = _ref4;
+  return max;
+}, wrapperGrid, fakeTrackBg, trackFill, _ref5 => {
+  let {
+    disabled
+  } = _ref5;
+  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
+}, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
 const Wrapper = styled.div.withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], ({
-  min
-}) => min, ({
-  max
-}) => max, ({
-  value
-}) => value, wrapperGrid, fakeTrackBg, trackFill, ({
-  disabled
-}) => disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], _ref6 => {
+  let {
+    min
+  } = _ref6;
+  return min;
+}, _ref7 => {
+  let {
+    max
+  } = _ref7;
+  return max;
+}, _ref8 => {
+  let {
+    value
+  } = _ref8;
+  return value;
+}, wrapperGrid, fakeTrackBg, trackFill, _ref9 => {
+  let {
+    disabled
+  } = _ref9;
+  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
+}, fakeTrackBgHover, track.entities.indicator.states.hover.background);
 const WrapperGroupLabel = styled.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -58,20 +85,21 @@ const SrOnlyLabel = styled.label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-const Slider = /*#__PURE__*/forwardRef(function Slider({
-  min = 0,
-  max = 100,
-  value = [40, 60],
-  outputFunction,
-  onChange,
-  onChangeCommitted,
-  minMaxDots = true,
-  minMaxValues = true,
-  step = 1,
-  disabled,
-  ariaLabelledby,
-  ...rest
-}, ref) {
+const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
+  let {
+    min = 0,
+    max = 100,
+    value = [40, 60],
+    outputFunction,
+    onChange,
+    onChangeCommitted,
+    minMaxDots = true,
+    minMaxValues = true,
+    step = 1,
+    disabled,
+    ariaLabelledby,
+    ...rest
+  } = _ref10;
   const isRangeSlider = Array.isArray(value);
   const [sliderValue, setSliderValue] = useState(isRangeSlider ? value : [value]);
   const minRange = useRef(null);

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,20 +2,19 @@ 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
-}) => {
+})(_ref => {
+  let {
+    theme,
+    placement
+  } = _ref;
   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, {
     top: placement.includes('top') ? theme.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
     bottom: placement.includes('bottom') ? theme.spacings.bottom : undefined,
@@ -24,14 +23,15 @@ 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 {

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"