{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { backgroundColor, darken, ellipsis, em, half, lighten, math, position, primaryColor, sameBorder, size, textInvertColor, textLighterColor, transitionProps } from '~/utils/style';\nimport styled from 'styled-components';\nconst height = em(20);\nconst checkSize = em(16);\nconst checkMark = // eslint-disable-next-line\n'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxMSA4IiB3aWR0aD0iMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkuNDc5NDI3MDggMTAuMTg3NWgtNS4yNXYtMS4zMTI1aDMuOTM3bC4wMDA1LTcuODc1aDEuMzEyNXoiIGZpbGw9IiNmNWY1ZjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNzEwNjc4IC43MDcxMDY3OCAtLjcwNzEwNjc4IC43MDcxMDY3OCA0Ljk2Mjk5NCAtNi4yMDg0NCkiLz48L3N2Zz4=';\nconst Wrapper = styled.label.withConfig({\n  displayName: \"Checkbox__Wrapper\",\n  componentId: \"sc-14goqpy-0\"\n})([\"position:relative;display:inline-flex;align-items:flex-start;cursor:\", \";\"], props => props.disabled ? 'not-allowed' : 'pointer');\nconst Input = styled.input.attrs(props => ({\n  type: 'checkbox',\n  disabled: !!props.disabled\n})).withConfig({\n  displayName: \"Checkbox__Input\",\n  componentId: \"sc-14goqpy-1\"\n})([\"\", \" \", \" opacity:0;pointer-events:none;\"], size(0), position('absolute', 0, null, null, 0));\nconst Inner = styled.div.withConfig({\n  displayName: \"Checkbox__Inner\",\n  componentId: \"sc-14goqpy-2\"\n})([\"color:\", \";flex-shrink:0;\", \" margin:\", \" 0;margin-right:\", \";\", \";background-color:\", \";background-image:\", \";background-repeat:no-repeat;background-position:center center;background-size:\", \" \", \";position:relative;\", \" \", \":hover > &{border-color:\", \";}\"], props => props.checked ? textInvertColor : 'transparent', props => size(math(`${checkSize} * ${props.size === 'small' ? 0.875 : 1}`)), half(`${height} - ${checkSize}`), em(4), props => sameBorder({\n  color: props.disabled || !props.checked ? textLighterColor : primaryColor\n}), props => props.disabled ? props.checked ? textLighterColor : lighten(1 / 3, textLighterColor) : props.checked ? primaryColor : backgroundColor, props => props.checked ? `url(\"${checkMark}\")` : 'none', em(10), em(8), transitionProps(['border-color', 'background-color', 'color']), Wrapper, props => props.disabled ? textLighterColor : props.checked ? primaryColor : darken(0.1, textLighterColor));\nconst Content = styled.div.withConfig({\n  displayName: \"Checkbox__Content\",\n  componentId: \"sc-14goqpy-3\"\n})([\"line-height:\", \";flex-grow:1;\", \" \", \"\"], height, props => props.disabled ? `color: ${textLighterColor};` : '', ellipsis());\n\nconst Checkbox = ({\n  value,\n  children,\n  size,\n  disabled,\n  className,\n  title,\n  onChange\n}) => {\n  const {\n    0: checked,\n    1: setChecked\n  } = useState(!!value);\n  useEffect(() => setChecked(!!value), [setChecked, value]);\n  const onChangeInput = useCallback(e => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(e.target.checked);\n    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);\n  }, [disabled, onChange]);\n  return __jsx(Wrapper, {\n    disabled: disabled,\n    className: className,\n    title: title\n  }, __jsx(Input, {\n    onChange: onChangeInput,\n    checked: checked,\n    disabled: disabled\n  }), __jsx(Inner, {\n    checked: checked,\n    size: size,\n    disabled: disabled\n  }), __jsx(Content, {\n    disabled: disabled\n  }, children));\n};\n\nexport default Checkbox;","map":null,"metadata":{},"sourceType":"module"}