@equinor/eds-core-react/dist/esm/components/Switch/SwitchSmall.js

The React implementation of the Equinor Design System

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';

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

export { SwitchSmall };