{"version":3,"file":"OTPEntry.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/OTPEntry.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport React, { ReactNode } from 'react';\n\nimport AnimatedContainer from '../atoms/AnimatedContainer';\nimport { chromaticIgnoreClassName } from '../atoms/chromaticIgnoreClassName';\nimport Column from '../atoms/Column';\nimport LoadingBar from '../atoms/LoadingBar';\nimport Typography from '../atoms/Typography';\nimport ErrorText from './ErrorText';\nimport styles from './OTPEntry.module.css';\nimport OtpInput from './OtpInput';\nimport TextColumn from './TextColumn';\n\ninterface OTPEntryProps {\n  header: ReactNode;\n  instruction: ReactNode;\n  helperContent: ReactNode;\n  isSubmitting: boolean;\n  onSubmit: (otp: string) => void;\n  errorMessage?: string;\n}\n\nconst OTPEntry = ({ header, helperContent, instruction, isSubmitting, onSubmit, errorMessage }: OTPEntryProps) => {\n  const { t } = useLingui();\n\n  return (\n    <Column gap={6}>\n      <TextColumn header={header} body={instruction} />\n\n      <Column gap={2}>\n        {/* HACK: We can't have gap: 2 between OtpInput and the loading component below,\n         * so instead we add padding-top: spacing-2 to progressContainer, hence the\n         * slightly concerning number of nested Columns */}\n        <Column>\n          <OtpInput onSubmit={onSubmit} disabled={isSubmitting} />\n\n          <AnimatedContainer isOpen={isSubmitting}>\n            <Column className={styles.progressInner} gap={2}>\n              <Typography variant=\"helper\">\n                {t({ id: 'formField.passcode.status.verifying', message: 'Verifying passcode...' })}\n              </Typography>\n\n              <LoadingBar isLoading={isSubmitting} />\n            </Column>\n          </AnimatedContainer>\n        </Column>\n\n        <Column>\n          {!isSubmitting && errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n          <Typography variant=\"helper\" className={chromaticIgnoreClassName()}>\n            {helperContent}\n          </Typography>\n        </Column>\n      </Column>\n    </Column>\n  );\n};\n\nexport default OTPEntry;\n"],"names":["OTPEntry","header","helperContent","instruction","isSubmitting","onSubmit","errorMessage","useLingui","React","Column","gap","TextColumn","body","OtpInput","disabled","AnimatedContainer","isOpen","className","styles","progressInner","Typography","variant","LoadingBar","isLoading","ErrorText","chromaticIgnoreClassName"],"mappings":";;;;;;;;;;;;AAsBA,MAAMA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAEC,aAAa,EAAEC,WAAW,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,YAAY,EAAiB,GAAA;AAC3G,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AAEd,IAAA,qBACEC,EAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,EAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QAAWV,MAAAA,EAAQA,MAAAA;QAAQW,IAAAA,EAAMT;sBAElCK,EAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;AAIX,KAAA,gBAAAF,EAAA,CAAA,aAAA,CAACC,4BACCD,EAAA,CAAA,aAAA,CAACK,QAAAA,EAAAA;QAASR,QAAAA,EAAUA,QAAAA;QAAUS,QAAAA,EAAUV;sBAExCI,EAAA,CAAA,aAAA,CAACO,iBAAAA,EAAAA;QAAkBC,MAAAA,EAAQZ;qBACzBI,EAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;AAAOQ,QAAAA,SAAAA,EAAWC,iBAAOC,aAAa;QAAET,GAAAA,EAAK;qBAC5CF,EAAA,CAAA,aAAA,CAACY,UAAAA,EAAAA;QAAWC,OAAAA,EAAQ;;;;uBAIpBb,EAAA,CAAA,aAAA,CAACc,UAAAA,EAAAA;QAAWC,SAAAA,EAAWnB;AAK7B,KAAA,CAAA,CAAA,CAAA,CAAA,gBAAAI,EAAA,CAAA,aAAA,CAACC,cACE,CAACL,YAAAA,IAAgBE,8BAAgBE,EAAA,CAAA,aAAA,CAACgB,SAAAA,EAAAA,IAAAA,EAAWlB,6BAC9CE,EAAA,CAAA,aAAA,CAACY,UAAAA,EAAAA;QAAWC,OAAAA,EAAQ,QAAA;QAASJ,SAAAA,EAAWQ,wBAAAA;AACrCvB,KAAAA,EAAAA,aAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}