{
  "version": 3,
  "sources": ["../javascripts/styled-components/components/Switch/index.tsx", "../javascripts/styled-components/components/Switch/wrapper.tsx"],
  "sourcesContent": ["import React from 'react';\n\nimport { Checkbox, Toggle, Wrapper } from './wrapper';\n\ntype SwitchProps = React.DetailedHTMLProps<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  id: string;\n  label?: string;\n};\n\nconst Switch = ({ label, ...props }: SwitchProps) => {\n  const { id } = props;\n\n  return (\n    <Wrapper aria-label={label}>\n      <Checkbox\n        {...(props as React.DetailedHTMLProps<\n          React.InputHTMLAttributes<HTMLInputElement>,\n          HTMLInputElement\n        >)}\n      />\n      <Toggle htmlFor={id} />\n    </Wrapper>\n  );\n};\n\nexport default Switch;\n", "import React from 'react';\nimport styled from 'styled-components';\n\nimport { size } from '../../layout/helpers';\n\nconst toggleHeight = size(3);\nconst toggleWidth = size(6); // toggleHeight * 2\nconst thumbSpacing = size(0.25);\nconst thumbSpacingX = size(0.5); // thumbSpacing * 2\nconst thumbTransitionDiration = '120ms';\n\nconst toggleBorderRadius = `calc(${toggleHeight} / 2);`;\n\nexport const Wrapper = styled((props: any) => <div {...props} />).attrs(({ checked }) => ({\n  role: 'checkbox',\n  'aria-checked': checked,\n})).withConfig({ componentId: 'sc-15an643-0' })``;\n\nexport const Toggle = styled.label.withConfig({ componentId: 'sc-15an643-1' })`\n    position: relative;\n    display: block;\n    width: ${toggleWidth};\n    height: ${toggleHeight};\n    border-radius: ${toggleBorderRadius};\n    background-color: var(--c-input-border);\n    user-select: none;\n    cursor: pointer;\n\n    // Thumb\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: calc(${toggleHeight} - ${thumbSpacingX});\n        height: calc(${toggleHeight} - ${thumbSpacingX});\n        margin: ${thumbSpacing};\n        border-radius: 50%;\n        background-color: var(--c-bg-main);\n        transition: transform ${thumbTransitionDiration} ease;\n        z-index: 2;\n    }\n\n    // Active background\n    &::after {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border-radius: ${toggleBorderRadius};\n        background-color: var(--c-input-accent-bg);\n        opacity: 0;\n        transition: opacity ${thumbTransitionDiration} ease;\n        z-index: 1;\n    }\n`;\n\nexport const Checkbox = styled((props: any) => (\n  <input {...props} className={`${props.checked ? 'checked' : undefined} ${props.className}`} />\n)).attrs(({ checked }) => ({\n  checked,\n  type: 'checkbox',\n})).withConfig({ componentId: 'sc-15an643-2' })`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n\n    &:checked,\n    &.checked {\n        & ~ ${Toggle} {\n            &::before {\n                transform: translateX(100%) translateX(${thumbSpacingX});\n            }\n\n            &::after {\n                opacity: 1;\n            }\n        }\n    }\n`;\n"],
  "mappings": "uGAAA,IAAAA,EAAkB,SCAlB,IAAAC,EAAkB,SAKlB,IAAMC,EAAeC,EAAK,CAAC,EACrBC,EAAcD,EAAK,CAAC,EACpBE,EAAeF,EAAK,GAAI,EACxBG,EAAgBH,EAAK,EAAG,EACxBI,EAA0B,QAE1BC,EAAqB,QAAQN,CAAY,SAElCO,EAAUC,EAAQC,GAAe,EAAAC,QAAA,cAAC,OAAK,GAAGD,EAAO,CAAE,EAAE,MAAM,CAAC,CAAE,QAAAE,CAAQ,KAAO,CACxF,KAAM,WACN,eAAgBA,CAClB,EAAE,EAAE,WAAW,CAAE,YAAa,cAAe,CAAC,IAEjCC,EAASJ,EAAO,MAAM,WAAW,CAAE,YAAa,cAAe,CAAC;AAAA;AAAA;AAAA,aAGhEN,CAAW;AAAA,cACVF,CAAY;AAAA,qBACLM,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUjBN,CAAY,MAAMI,CAAa;AAAA,uBAC9BJ,CAAY,MAAMI,CAAa;AAAA,kBACpCD,CAAY;AAAA;AAAA;AAAA,gCAGEE,CAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAS9BC,CAAkB;AAAA;AAAA;AAAA,8BAGbD,CAAuB;AAAA;AAAA;AAAA,EAKxCQ,EAAWL,EAAQC,GAC9B,EAAAC,QAAA,cAAC,SAAO,GAAGD,EAAO,UAAW,GAAGA,EAAM,QAAU,UAAY,MAAS,IAAIA,EAAM,SAAS,GAAI,CAC7F,EAAE,MAAM,CAAC,CAAE,QAAAE,CAAQ,KAAO,CACzB,QAAAA,EACA,KAAM,UACR,EAAE,EAAE,WAAW,CAAE,YAAa,cAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAahCC,CAAM;AAAA;AAAA,yDAEqCR,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ED/DtE,IAAMU,EAAS,CAAC,CAAE,MAAAC,EAAO,GAAGC,CAAM,IAAmB,CACnD,GAAM,CAAE,GAAAC,CAAG,EAAID,EAEf,OACE,EAAAE,QAAA,cAACC,EAAA,CAAQ,aAAYJ,GACnB,EAAAG,QAAA,cAACE,EAAA,CACE,GAAIJ,EAIP,EACA,EAAAE,QAAA,cAACG,EAAA,CAAO,QAASJ,EAAI,CACvB,CAEJ,EAEOK,EAAQR",
  "names": ["import_react", "import_react", "toggleHeight", "size", "toggleWidth", "thumbSpacing", "thumbSpacingX", "thumbTransitionDiration", "toggleBorderRadius", "Wrapper", "dt", "props", "React", "checked", "Toggle", "Checkbox", "Switch", "label", "props", "id", "React", "Wrapper", "Checkbox", "Toggle", "Switch_default"]
}