{"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';\nvar height = em(20);\nvar checkSize = em(16);\nvar checkMark = // eslint-disable-next-line\n'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxMSA4IiB3aWR0aD0iMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkuNDc5NDI3MDggMTAuMTg3NWgtNS4yNXYtMS4zMTI1aDMuOTM3bC4wMDA1LTcuODc1aDEuMzEyNXoiIGZpbGw9IiNmNWY1ZjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNzEwNjc4IC43MDcxMDY3OCAtLjcwNzEwNjc4IC43MDcxMDY3OCA0Ljk2Mjk5NCAtNi4yMDg0NCkiLz48L3N2Zz4=';\nvar Wrapper = styled.label.withConfig({\n  displayName: \"Checkbox__Wrapper\",\n  componentId: \"sc-14goqpy-0\"\n})([\"position:relative;display:inline-flex;align-items:flex-start;cursor:\", \";\"], function (props) {\n  return props.disabled ? 'not-allowed' : 'pointer';\n});\nvar Input = styled.input.attrs(function (props) {\n  return {\n    type: 'checkbox',\n    disabled: !!props.disabled\n  };\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));\nvar 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:\", \";}\"], function (props) {\n  return props.checked ? textInvertColor : 'transparent';\n}, function (props) {\n  return size(math(\"\".concat(checkSize, \" * \").concat(props.size === 'small' ? 0.875 : 1)));\n}, half(\"\".concat(height, \" - \").concat(checkSize)), em(4), function (props) {\n  return sameBorder({\n    color: props.disabled || !props.checked ? textLighterColor : primaryColor\n  });\n}, function (props) {\n  return props.disabled ? props.checked ? textLighterColor : lighten(1 / 3, textLighterColor) : props.checked ? primaryColor : backgroundColor;\n}, function (props) {\n  return props.checked ? \"url(\\\"\".concat(checkMark, \"\\\")\") : 'none';\n}, em(10), em(8), transitionProps(['border-color', 'background-color', 'color']), Wrapper, function (props) {\n  return props.disabled ? textLighterColor : props.checked ? primaryColor : darken(0.1, textLighterColor);\n});\nvar Content = styled.div.withConfig({\n  displayName: \"Checkbox__Content\",\n  componentId: \"sc-14goqpy-3\"\n})([\"line-height:\", \";flex-grow:1;\", \" \", \"\"], height, function (props) {\n  return props.disabled ? \"color: \".concat(textLighterColor, \";\") : '';\n}, ellipsis());\n\nvar Checkbox = function Checkbox(_ref) {\n  var value = _ref.value,\n      children = _ref.children,\n      size = _ref.size,\n      disabled = _ref.disabled,\n      className = _ref.className,\n      title = _ref.title,\n      onChange = _ref.onChange;\n\n  var _useState = useState(!!value),\n      checked = _useState[0],\n      setChecked = _useState[1];\n\n  useEffect(function () {\n    return setChecked(!!value);\n  }, [setChecked, value]);\n  var onChangeInput = useCallback(function (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"}