{"version":3,"sources":["../../../src/Switch/Switch.tsx"],"names":[".ssjivny",".s1dkwqi3",".s1awnjjx"],"mappings":"AAKMA;AAOAC;AAKAC","file":"../../../src/Switch/Switch.tsx","sourcesContent":["import React, { useState } from \"react\";\nimport { css, cx } from \"linaria\";\nimport { colors } from \"../utils\";\nimport AccessibleText from \"../AccessibleText/AccessibleText\";\n\nconst SwitchWrapper = css`\n  display: flex;\n  flex-direction: column;\n  line-height: 2rem;\n  position: relative;\n`;\n\nconst SwitchInput = css`\n  opacity: 0;\n  position: absolute;\n`;\n\nconst SwitchLabel = css`\n  content: \"\";\n  cursor: pointer;\n  width: 3.5rem;\n  height: 2rem;\n  display: inline-block;\n  background-color: ${colors[\"color-basic-400\"]};\n  border-radius: 1rem/50%;\n  position: relative;\n  transition: 0.2s background-color ease;\n  &.checked {\n    background-color: ${colors[\"color-primary\"]};\n  }\n  &.checked:after {\n    content: \"\";\n    left: calc(100% - 1.8rem);\n  }\n  &:after {\n    background-color: ${colors[\"color-basic-100\"]};\n    border-radius: 50%;\n    content: \"\";\n    display: block;\n    left: 0.2rem;\n    top: 0.2rem;\n    bottom: 0.2rem;\n    width: 1.6rem;\n    position: absolute;\n    transition: left 0.2s ease;\n  }\n`;\n\nexport type SwitchProps = {\n  title: string;\n  value?: boolean;\n  defaultValue?: boolean;\n};\n\nconst Switch: React.FC<SwitchProps> = ({ title, value, defaultValue }) => {\n  const [_value, _setValue] = useState(defaultValue ?? false);\n  return (\n    <div className={cx(SwitchWrapper)}>\n      <label className={cx(SwitchLabel, _value && \"checked\")}>\n        <input\n          title={title}\n          type={\"checkbox\"}\n          className={cx(SwitchInput)}\n          checked={value ?? _value}\n          onChange={(e) => {\n            _setValue(e.target.checked);\n          }}\n        />\n        <AccessibleText text={title} />\n      </label>\n    </div>\n  );\n};\n\nexport default Switch;\n"]}