import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import VisuallyHiddenText from '../VisuallyHiddenText';
import NoValue from '../NoValue/NoValue';
import { formatCreditCard } from './utils';
export default forwardRef(function CreditCardDisplay({ value, formattingOptions = {}, ...restProps }, ref) {
    const formatted = value ? formatCreditCard(value, formattingOptions) : undefined;
    return (_jsx("span", { ref: ref, ...restProps, children: formatted ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: formatted }), _jsx(VisuallyHiddenText, { children: formatted
                        .replace(/\s+/g, '.')
                        .replace(/([0-9•]\.?)/g, digit => `${digit} `)
                        .trim() })] })) : (_jsx(NoValue, {})) }));
});
//# sourceMappingURL=CreditCardDisplay.js.map