{"version":3,"file":"OtpInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/OtpInput.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport classNames from 'classnames';\nimport { OTPInput, RenderProps } from 'input-otp';\nimport React, { useMemo, useState } from 'react';\n\nimport styles from './OtpInput.module.css';\n\nconst OTP_LENGTH = 6;\n\nexport type OtpInputProps = {\n  onSubmit: (otp: string) => void;\n  defaultOtp?: string;\n  disabled?: boolean;\n};\n\nconst transformInput = (input: string) => input.replace(/\\D/g, '').slice(0, OTP_LENGTH);\n\nconst renderSlots = ({ slots }: RenderProps) => (\n  <div className={styles.slotsContainer}>\n    {slots.map((slot, index) => (\n      <div\n        key={index}\n        className={classNames(styles.otpSlot, {\n          [styles.active]: slot.isActive,\n        })}\n      >\n        <span>{slot.char}</span>\n        {slot.hasFakeCaret && <div className={styles.caret} />}\n      </div>\n    ))}\n  </div>\n);\n\nconst OtpInput = ({ defaultOtp, onSubmit, disabled, ...additionalProps }: OtpInputProps) => {\n  const { t } = useLingui();\n  const [otp, setOtp] = useState(defaultOtp);\n\n  const isSafari = useMemo(() => {\n    const ua = navigator.userAgent.toLowerCase();\n    // chrom catches both chrome and chromium\n    return ua.includes('safari') && !ua.includes('chrom');\n  }, []);\n\n  return (\n    <OTPInput\n      aria-label={t({ id: 'formField.otp.ariaLabel', message: 'One-time passcode' })}\n      containerClassName={classNames(styles.inputContainer, {\n        [styles.disabled]: disabled,\n        [styles.safari]: isSafari,\n      })}\n      maxLength={OTP_LENGTH}\n      value={otp}\n      onChange={(newOtp) => setOtp(transformInput(newOtp))}\n      pasteTransformer={transformInput}\n      disabled={disabled}\n      onComplete={onSubmit}\n      pattern=\"[0-9]*\"\n      render={renderSlots}\n      {...additionalProps}\n    />\n  );\n};\n\nexport default OtpInput;\n"],"names":["OTP_LENGTH","transformInput","input","replace","slice","renderSlots","slots","React","div","className","styles","slotsContainer","map","slot","index","key","classNames","otpSlot","active","isActive","span","char","hasFakeCaret","caret","OtpInput","defaultOtp","onSubmit","disabled","additionalProps","useLingui","otp","setOtp","useState","isSafari","useMemo","ua","navigator","userAgent","toLowerCase","includes","OTPInput","aria-label","containerClassName","inputContainer","safari","maxLength","value","onChange","newOtp","pasteTransformer","onComplete","pattern","render"],"mappings":";;;;;;;AAOA,MAAMA,UAAAA,GAAa,CAAA;AAQnB,MAAMC,cAAAA,GAAiB,CAACC,KAAAA,GAAkBA,KAAAA,CAAMC,OAAO,CAAC,KAAA,EAAO,EAAA,CAAA,CAAIC,KAAK,CAAC,CAAA,EAAGJ,UAAAA,CAAAA;AAE5E,MAAMK,cAAc,CAAC,EAAEC,KAAK,EAAe,iBACzCC,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,SAAAA,EAAWC,iBAAOC;AACpBL,KAAAA,EAAAA,KAAAA,CAAMM,GAAG,CAAC,CAACC,IAAAA,EAAMC,sBAChBP,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;YACCO,GAAAA,EAAKD,KAAAA;YACLL,SAAAA,EAAWO,UAAAA,CAAWN,gBAAAA,CAAOO,OAAO,EAAE;AACpC,gBAAA,CAACP,gBAAAA,CAAOQ,MAAM,GAAGL,KAAKM;AACxB,aAAA;AAEA,SAAA,gBAAAZ,EAAA,CAAA,aAAA,CAACa,cAAMP,IAAAA,CAAKQ,IAAI,GACfR,IAAAA,CAAKS,YAAY,kBAAIf,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;AAAIC,YAAAA,SAAAA,EAAWC,iBAAOa;;AAMrD,MAAMC,QAAAA,GAAW,CAAC,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,eAAAA,EAAgC,GAAA;AACrF,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAM,CAACC,GAAAA,EAAKC,MAAAA,CAAO,GAAGC,CAAAA,CAASP,UAAAA,CAAAA;AAE/B,IAAA,MAAMQ,WAAWC,CAAAA,CAAQ,IAAA;AACvB,QAAA,MAAMC,EAAAA,GAAKC,SAAAA,CAAUC,SAAS,CAACC,WAAW,EAAA;;AAE1C,QAAA,OAAOH,GAAGI,QAAQ,CAAC,aAAa,CAACJ,EAAAA,CAAGI,QAAQ,CAAC,OAAA,CAAA;AAC/C,IAAA,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,qBACEhC,EAAA,CAAA,aAAA,CAACiC,EAAAA,EAAAA;QACCC,YAAU,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACVC,kBAAAA,EAAoB1B,UAAAA,CAAWN,gBAAAA,CAAOiC,cAAc,EAAE;YACpD,CAACjC,gBAAAA,CAAOiB,QAAQ,GAAGA,QAAAA;YACnB,CAACjB,gBAAAA,CAAOkC,MAAM,GAAGX;AACnB,SAAA,CAAA;QACAY,SAAAA,EAAW7C,UAAAA;QACX8C,KAAAA,EAAOhB,GAAAA;QACPiB,QAAAA,EAAU,CAACC,MAAAA,GAAWjB,MAAAA,CAAO9B,cAAAA,CAAe+C,MAAAA,CAAAA,CAAAA;QAC5CC,gBAAAA,EAAkBhD,cAAAA;QAClB0B,QAAAA,EAAUA,QAAAA;QACVuB,UAAAA,EAAYxB,QAAAA;QACZyB,OAAAA,EAAQ,QAAA;QACRC,MAAAA,EAAQ/C,WAAAA;AACP,QAAA,GAAGuB;;AAGV;;;;"}