{"ast":null,"code":"var __jsx = React.createElement;\nimport { EventContext, ValueContext } from '~/components/RadioGroup';\nimport React, { useCallback, useContext } from 'react';\nimport { backgroundColor, borderColor, borderFocusedColor, borderRadius, borderRadiusShortHand, ellipsis, em, primaryColor, sameBorder, textColor, textInvertColor, transitionProps } from '~/utils/style';\nimport styled from 'styled-components';\nconst height = em(36);\nconst minWidth = em(72);\nconst maxWidth = em(144);\nconst Button = styled.a.withConfig({\n  displayName: \"RadioButton__Button\",\n  componentId: \"sc-15cq2bi-0\"\n})([\"cursor:pointer;background-color:\", \";color:\", \";height:\", \";line-height:calc(\", \" - 2px);min-width:\", \";text-align:center;\", \" \", \";\", \" \", \" &:hover{border-color:\", \";}&:first-of-type{\", \"}&:last-of-type{\", \"}& + &{margin-left:-1px;}\"], props => props.selected ? primaryColor : backgroundColor, props => props.selected ? textInvertColor : textColor, height, height, minWidth, ellipsis(maxWidth), props => sameBorder({\n  color: props.selected ? primaryColor : borderColor\n}), transitionProps(['color', 'border-color', 'background-color']), props => props.selected ? 'position: relative;' : '', props => props.selected ? primaryColor : borderFocusedColor, borderRadiusShortHand('left', borderRadius), borderRadiusShortHand('right', borderRadius));\n\nconst RadioButton = ({\n  className,\n  value,\n  selected,\n  title,\n  children\n}) => {\n  const groupValue = useContext(ValueContext);\n  const onChange = useContext(EventContext);\n  const onClick = useCallback(() => {\n    if (value && onChange && groupValue !== value) {\n      onChange(value);\n    }\n  }, [value, onChange, groupValue]);\n  return __jsx(Button, {\n    className: className,\n    title: title,\n    selected: groupValue === value || selected,\n    onClick: onClick\n  }, children);\n};\n\nexport default RadioButton;","map":null,"metadata":{},"sourceType":"module"}