\n));\n\nexport default PageContainer;\n","// extracted by mini-css-extract-plugin\nexport default {\"blueDark\":\"#1e3056\",\"blueDarkest\":\"#18253a\",\"blueLight\":\"#9aacd8\",\"blueNeutral\":\"#2d4972\",\"brightPink\":\"#ad72b0\",\"brightYellow\":\"#ffeb5c\",\"eeyoreMist\":\"#6a78a5\",\"greenNeutral\":\"#4d8e6d\",\"greyBlue\":\"#b9c8ea\",\"greyDark\":\"#4c4e4f\",\"greyLight\":\"#c5c7cc\",\"greyMedium\":\"#6a6d71\",\"greyWhite\":\"#e8eef7\",\"lightPurple\":\"#ae72b7\",\"scarletPostcard\":\"#bf3e0a\",\"whiteBlue\":\"#f0f4fa\",\"whiteGrey\":\"#f5f9ff\",\"whitePure\":\"#fff\",\"disabled\":\"#d8d8d8\",\"errorMessage\":\"#eb5757\",\"blueGreen\":\"#d1eedf\",\"silverFoil\":\"#a9aeb5\",\"fadedSunlight\":\"#fcce6a\",\"greyReadOnly\":\"#d8dce6\",\"fontSizeMedium\":\"28px\",\"fontSizeNormal\":\"18px\",\"fontSizeBody\":\"16px\",\"fontSizeButton\":\"14px\",\"fontSizeSmall\":\"12px\",\"fieldBox\":\"ufS3aM5u9QkkndcgmyFp\",\"fieldBoxFocused\":\"Ragnreh9oLJxPaB1g7KL\",\"fieldBoxErrored\":\"GnqBqPpDIsGnuCMpF0il\",\"fieldBoxCard\":\"Wdk77lD6VJCCjIqsyoBQ\"};","import React from 'react';\nimport cx from 'classnames';\nimport styles from './styles';\n\nimport { withFocus } from '../FocusManager';\n\n/**\n * The containing box of a form field.\n *\n * This is applied as a wrapper, rather than as a border on an or\n * itself, to (a) make it easy to provide consistent sizing across a\n * variety of field types, and (b) allow fields that actually contain multiple\n * controls, such as (which has both an and\n * for number and country respectively).\n */\nconst FieldBox = ({ children, errored, isFocused, card }) => (\n
\n {children}\n
\n);\n\nexport default withFocus(FieldBox);\n","// extracted by mini-css-extract-plugin\nexport default {\"blueDark\":\"#1e3056\",\"blueDarkest\":\"#18253a\",\"blueLight\":\"#9aacd8\",\"blueNeutral\":\"#2d4972\",\"brightPink\":\"#ad72b0\",\"brightYellow\":\"#ffeb5c\",\"eeyoreMist\":\"#6a78a5\",\"greenNeutral\":\"#4d8e6d\",\"greyBlue\":\"#b9c8ea\",\"greyDark\":\"#4c4e4f\",\"greyLight\":\"#c5c7cc\",\"greyMedium\":\"#6a6d71\",\"greyWhite\":\"#e8eef7\",\"lightPurple\":\"#ae72b7\",\"scarletPostcard\":\"#bf3e0a\",\"whiteBlue\":\"#f0f4fa\",\"whiteGrey\":\"#f5f9ff\",\"whitePure\":\"#fff\",\"disabled\":\"#d8d8d8\",\"errorMessage\":\"_Q31HUzGPxHc3DP7Huc3\",\"blueGreen\":\"#d1eedf\",\"silverFoil\":\"#a9aeb5\",\"fadedSunlight\":\"#fcce6a\",\"greyReadOnly\":\"#d8dce6\",\"fontSizeMedium\":\"28px\",\"fontSizeNormal\":\"18px\",\"fontSizeBody\":\"16px\",\"fontSizeButton\":\"14px\",\"fontSizeSmall\":\"12px\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect, getIn } from 'formik';\nimport styles from './styles.module.scss';\nimport { withTranslation } from 'react-i18next';\n\n/**\n * Renders validation errors for a field, including server-side validation\n * messages.\n *\n * Only displays errors when a field has been touched and is not currently\n * focused. Hides server-side errors after input has been changed, somehow?\n */\nclass FieldErrorDisplay extends React.Component {\n static propTypes = {\n name: PropTypes.string.isRequired,\n humanName: PropTypes.string.isRequired,\n // supplied by formik.connect()\n formik: PropTypes.object.isRequired,\n };\n\n render() {\n const { formik, name, t } = this.props;\n const touched = getIn(formik.touched, name);\n const clientError = getIn(formik.errors, name);\n const serverErrors = getIn(formik.status, ['fieldErrors', name]);\n\n const formatServerErrors = (name, errors) => {\n return `${this.props.humanName} ${errors[0]}`;\n };\n\n const errorMessage = serverErrors\n ? formatServerErrors(name, serverErrors)\n : clientError;\n\n if (!touched) {\n return null;\n }\n\n if (!clientError && !serverErrors) {\n return null;\n }\n\n return
{t(errorMessage)}
;\n }\n}\n\nexport default connect(withTranslation()(FieldErrorDisplay));\n","// extracted by mini-css-extract-plugin\nexport default {\"blueDark\":\"#1e3056\",\"blueDarkest\":\"#18253a\",\"blueLight\":\"#9aacd8\",\"blueNeutral\":\"#2d4972\",\"brightPink\":\"#ad72b0\",\"brightYellow\":\"#ffeb5c\",\"eeyoreMist\":\"#6a78a5\",\"greenNeutral\":\"#4d8e6d\",\"greyBlue\":\"#b9c8ea\",\"greyDark\":\"#4c4e4f\",\"greyLight\":\"#c5c7cc\",\"greyMedium\":\"#6a6d71\",\"greyWhite\":\"#e8eef7\",\"lightPurple\":\"#ae72b7\",\"scarletPostcard\":\"#bf3e0a\",\"whiteBlue\":\"#f0f4fa\",\"whiteGrey\":\"#f5f9ff\",\"whitePure\":\"#fff\",\"disabled\":\"#d8d8d8\",\"errorMessage\":\"#eb5757\",\"blueGreen\":\"#d1eedf\",\"silverFoil\":\"#a9aeb5\",\"fadedSunlight\":\"#fcce6a\",\"greyReadOnly\":\"#d8dce6\",\"fontSizeMedium\":\"28px\",\"fontSizeNormal\":\"18px\",\"fontSizeBody\":\"16px\",\"fontSizeButton\":\"14px\",\"fontSizeSmall\":\"12px\",\"labelContent\":\"nbafXxaIlHPW1tPE6JoX\",\"label\":\"viV8M2nFgnQrfhwkZ4dq\",\"mobilePlaceholderLabel\":\"REvCXP6NrsqhlL4lcy7d\",\"mobilePlaceholderLabelHidden\":\"o88gWq5JYwYtqTFLBb85\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\n\nimport { withFocus } from '../FocusManager';\n\nimport styles from './styles';\n\n/**\n * Renders the element around a field, as well as the content of the\n * label text supplied.\n *\n * Instead of relying on browser-native click events, this uses a\n * custom click handler on the label to focus in on the first wrapped input.\n * This allows for wrapping multiple form elements, like 's text\n * field and country selector.\n */\nclass FieldLabel extends React.Component {\n static propTypes = {\n labelText: PropTypes.node.isRequired,\n name: PropTypes.string.isRequired,\n mobilePlaceholderLabel: PropTypes.bool,\n\n // supplied by withFocus()\n isFocused: PropTypes.bool.isRequired,\n\n labelClassName: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n this.ref = React.createRef();\n }\n\n getInput() {\n const el = this.ref.current;\n if (!el) {\n return;\n }\n return el.querySelector('input');\n }\n\n /**\n * Used only to determine whether to hide the mobile placeholder label for a\n * text .\n */\n hideMobilePlaceholderLabel() {\n const input = this.getInput();\n return (input && input.value.length > 0) || this.props.isFocused;\n }\n\n renderLabel() {\n // There are two types of labels we can render in a field:\n // 1. \"Placeholder label,\" as used on the mobile activation screens. These\n // are light grey labels on top of the input. They don't actually use the\n // placeholder attribute for accessibility and styling reasons, but are\n // absolute-positioned on the input.\n // 2. Regular ol' normal labels above the input. We use these anywhere where\n // you're editing existing content, or where the fields would be\n // ambiguous after text entry (e.g. change password screen, where \"old\n // password, \"new password,\" and \"confirm new password\" need to be\n // disambiguated)\n return (\n