{i + 1}
\n \n
\n \n ))}\n
{this.props.children}
;\n }\n}\n\nCheckBox.propTypes = {\n children: PropTypes.node.isRequired,\n selectedValues: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])\n ),\n onChange: PropTypes.func,\n};\n\nCheckBox.defaultProps = {\n selectedValues: [],\n onChange: () => {},\n};\n\nCheckBox.childContextTypes = {\n checkBox: PropTypes.object,\n};\n\nexport default CheckBox;\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/SurveyToast/subComponents/CheckBox/CheckBox.jsx","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { BreakPoint, Color, FontSize } from '../../styles/constants';\nimport checkmark from '../../images/checkmark';\n\nconst Item = styled.div`\n #rexSurveyRoot & {\n display: flex;\n }\n`;\n\nconst Check = styled.div`\n #rexSurveyRoot & {\n background: ${props =>\n props.checked\n ? `${Color.border.blue} url(${checkmark}) no-repeat center center`\n : 'transparent'};\n background-size: 12px 9px;\n border: solid 2px\n ${props => (props.checked ? Color.border.blue : Color.border.gray)};\n border-radius: 4px;\n box-sizing: border-box;\n cursor: pointer;\n margin-right: 16px;\n height: 24px;\n width: 24px;\n\n @media (min-width: ${BreakPoint.desktop}) {\n height: 18px;\n width: 18px;\n margin-top: 3px;\n margin-right: 8px;\n }\n }\n`;\n\nconst Content = styled.div`\n #rexSurveyRoot & {\n color: ${props => (props.checked ? Color.text.darkGray : Color.text.gray)};\n cursor: pointer;\n flex: 1;\n font-size: ${FontSize.medium};\n line-height: 1.6875;\n text-align: left;\n\n @media (min-width: ${BreakPoint.desktop}) {\n font-size: ${FontSize.desktop.small};\n }\n\n @media (max-width: ${BreakPoint.small}) {\n font-size: ${FontSize.smallDevice.medium};\n }\n }\n`;\n\nclass CheckBoxItem extends Component {\n constructor(props) {\n super(props);\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick(value, checked) {\n const { onChange } = this.context.checkBox;\n onChange(value, checked);\n }\n\n render() {\n const { selectedValues } = this.context.checkBox;\n const { label, value, ...rest } = this.props;\n const options = { checked: false };\n if (selectedValues.length > 0) {\n options.checked = selectedValues.indexOf(value) >= 0;\n }\n\n return (\n \n \n ))}\n