{"version":3,"file":"static/js/8360.14d7ad11.chunk.js","mappings":"yNAMA,MAAMA,GAAQC,EAAAA,EAAAA,KAAS,IAAM,kCACvBC,GAAaD,EAAAA,EAAAA,KAAS,IAAM,iCAE5BE,EAAoBC,EAAAA,GAAOC,OAAMC,IAAAA,GAAAC,EAAAA,EAAAA,GAAA,ufAIhBC,GACnBA,EAAEC,SAAQ,GAAAC,QAAMC,EAAAA,EAAAA,IAAG,gBAAHA,CAAoBH,IAAE,GAAAE,QAAQC,EAAAA,EAAAA,IAAG,WAAHA,CAAeH,MAE9CA,GACfA,EAAEI,OAAQD,EAAAA,EAAAA,IAAG,eAAHA,CAAmBH,IAAKG,EAAAA,EAAAA,IAAG,iBAAHA,CAAqBH,KAE/CA,GAAOA,EAAEI,OAAQD,EAAAA,EAAAA,IAAG,eAAHA,CAAmBH,IAAKG,EAAAA,EAAAA,IAAG,aAAHA,CAAiBH,KAyBhEK,EAAcC,IAAA,IAAC,GACnBC,EAAE,KACFC,EAAI,MACJC,EAAK,MACLL,EAAK,QACLM,EAAO,aACPC,EAAY,SACZC,EAAQ,SACRX,EAAQ,aACRY,EAAY,aACZC,EAAY,MACZC,EAAK,WACLC,KACGC,GACJX,EAAA,OACCY,EAAAA,EAAAA,MAAA,UAASD,EAAKE,SAAA,EACZC,EAAAA,EAAAA,KAAC5B,EAAK,CAAC6B,QAASd,GAAMC,EAAMI,SAAUA,EAAUR,MAAOA,EAAMe,SAC1DV,KAEHS,EAAAA,EAAAA,MAACvB,EAAiB,CAChBY,GAAIA,GAAMC,EAEVA,KAAMA,EACNJ,MAAOA,EACPkB,SAAUT,EACVZ,SAAUA,MACJa,GAAiC,IAAjBA,IAAuB,CAAEA,oBAC3B,IAAfE,GAAuB,CAAED,SAAOI,SAAA,CAEpCR,IAAgBS,EAAAA,EAAAA,KAAA,UAAQL,MAAM,GAAEI,SAAC,cACjCT,EAAQa,KAAKC,IACZJ,EAAAA,EAAAA,KAAA,UAEEL,MAAOS,EAAIT,MACXd,SAAUuB,EAAIvB,SAASkB,SAEtBK,EAAIf,OAAK,GAAAP,OAJFsB,EAAIf,MAAK,KAAAP,OAAIsB,EAAIT,YAM3B,GAAAb,OAjBMK,GAAMC,EAAI,KAAAN,OAAIQ,EAAQe,OAAS,EAAI,YAAc,YAmB3DL,EAAAA,EAAAA,KAAC1B,EAAU,CAACU,MAAOA,MACf,EAkBRC,EAAYqB,aAAe,CACzBnB,GAAI,GACJE,MAAO,GACPL,MAAO,GACPU,aAAc,GACdC,WAAOY,EACPhB,cAAc,EACdC,UAAU,EACVX,UAAU,EACVY,aAAcA,OACdG,YAAY,GAGd,S","sources":["components/Molecules/SelectInput/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport loadable from '@loadable/component';\nimport { tc } from 'utils/theme';\n\nconst Label = loadable(() => import('components/Atoms/Label'));\nconst FieldError = loadable(() => import('components/Atoms/FieldError'));\n\nconst StyledSelectInput = styled.select`\n  appearance: none;\n  background: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\")\n    no-repeat right 0.75rem center/8px 10px;\n  background-color: ${(p) =>\n    p.disabled ? `${tc('disabledInput')(p)}` : `${tc('appWhite')(p)}`};\n  border: 1px solid;\n  border-color: ${(p) =>\n    p.error ? tc('errorMessage')(p) : tc('boxBorderColor')(p)};\n  border-radius: 3px;\n  color: ${(p) => (p.error ? tc('errorMessage')(p) : tc('labelColor')(p))};\n  font-size: 14px;\n  letter-spacing: -0.226154px;\n  line-height: 40px;\n  height: 40px;\n  margin-top: 5px;\n  padding: 0 10px;\n  width: 100%;\n`;\n\n/**\n * Select form input\n * @param {string} id\n * @param {string} name\n * @param {string} label\n * @param {string} error\n * @param {array} options options to display ({ label, value })\n * @param {boolean} includeEmpty to include empty value or not\n * @param {boolean} required to pass to the label component\n * @param {boolean} disabled to enable/disable components\n * @param {function} handleChange passed on to the select's `onChange`\n * @param {string} defaultValue set a default value for when uncontrolled\n * @param {string} value set the value for when this is controlled by state\n * @param {boolean} controlled make this a controlled input\n */\nconst SelectInput = ({\n  id,\n  name,\n  label,\n  error,\n  options,\n  includeEmpty,\n  required,\n  disabled,\n  handleChange,\n  defaultValue,\n  value,\n  controlled,\n  ...props\n}) => (\n  <div {...props}>\n    <Label htmlFor={id || name} required={required} error={error}>\n      {label}\n    </Label>\n    <StyledSelectInput\n      id={id || name}\n      key={`${id || name}+${options.length > 0 ? 'notLoaded' : 'loaded'}`}\n      name={name}\n      error={error}\n      onChange={handleChange}\n      disabled={disabled}\n      {...((defaultValue || defaultValue === 0) && { defaultValue })} // Uncontrolled\n      {...(controlled === true && { value })} // Controlled\n    >\n      {includeEmpty && <option value=\"\">Choose...</option>}\n      {options.map((opt) => (\n        <option\n          key={`${opt.label}+${opt.value}`}\n          value={opt.value}\n          disabled={opt.disabled}\n        >\n          {opt.label}\n        </option>\n      ))}\n    </StyledSelectInput>\n    <FieldError error={error} />\n  </div>\n);\n\nSelectInput.propTypes = {\n  id: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  error: PropTypes.string,\n  options: PropTypes.arrayOf(PropTypes.object).isRequired,\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  value: PropTypes.string,\n  includeEmpty: PropTypes.bool,\n  required: PropTypes.bool,\n  disabled: PropTypes.bool,\n  handleChange: PropTypes.func,\n  controlled: PropTypes.bool,\n};\n\nSelectInput.defaultProps = {\n  id: '',\n  label: '',\n  error: '',\n  defaultValue: '',\n  value: undefined,\n  includeEmpty: true,\n  required: false,\n  disabled: false,\n  handleChange: () => {},\n  controlled: false,\n};\n\nexport default SelectInput;\n"],"names":["Label","loadable","FieldError","StyledSelectInput","styled","select","_templateObject","_taggedTemplateLiteral","p","disabled","concat","tc","error","SelectInput","_ref","id","name","label","options","includeEmpty","required","handleChange","defaultValue","value","controlled","props","_jsxs","children","_jsx","htmlFor","onChange","map","opt","length","defaultProps","undefined"],"sourceRoot":""}