import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import classNames from '../../../../../../_virtual/index.mjs';
import { OTPInput as Lt } from '../../../../../../node_modules/input-otp/dist/index.mjs';
import React__default, { useState, useMemo } from 'react';
import modules_6ff17004 from './OtpInput.module.css.mjs';

const OTP_LENGTH = 6;
const transformInput = (input)=>input.replace(/\D/g, '').slice(0, OTP_LENGTH);
const renderSlots = ({ slots })=>/*#__PURE__*/ React__default.createElement("div", {
        className: modules_6ff17004.slotsContainer
    }, slots.map((slot, index)=>/*#__PURE__*/ React__default.createElement("div", {
            key: index,
            className: classNames(modules_6ff17004.otpSlot, {
                [modules_6ff17004.active]: slot.isActive
            })
        }, /*#__PURE__*/ React__default.createElement("span", null, slot.char), slot.hasFakeCaret && /*#__PURE__*/ React__default.createElement("div", {
            className: modules_6ff17004.caret
        }))));
const OtpInput = ({ defaultOtp, onSubmit, disabled, ...additionalProps })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [otp, setOtp] = useState(defaultOtp);
    const isSafari = useMemo(()=>{
        const ua = navigator.userAgent.toLowerCase();
        // chrom catches both chrome and chromium
        return ua.includes('safari') && !ua.includes('chrom');
    }, []);
    return /*#__PURE__*/ React__default.createElement(Lt, {
        "aria-label": $__i18n._({
            id: "formField.otp.ariaLabel",
            message: "One-time passcode"
        }),
        containerClassName: classNames(modules_6ff17004.inputContainer, {
            [modules_6ff17004.disabled]: disabled,
            [modules_6ff17004.safari]: isSafari
        }),
        maxLength: OTP_LENGTH,
        value: otp,
        onChange: (newOtp)=>setOtp(transformInput(newOtp)),
        pasteTransformer: transformInput,
        disabled: disabled,
        onComplete: onSubmit,
        pattern: "[0-9]*",
        render: renderSlots,
        ...additionalProps
    });
};

export { OtpInput as default };
//# sourceMappingURL=OtpInput.mjs.map
