import React__default, { useMemo, useState } from 'react';
import { useMountEffect } from '../../hooks/useMountEffect.mjs';
import Typography from '../atoms/Typography.mjs';

const DASHBOARD_REGEX = /https:\/\/stytch\.com\/[#a-zA-Z0-9/-]+/g;
const mapURLsToLinks = (str)=>{
    const nonLinkChunks = str.split(DASHBOARD_REGEX);
    const linkChunks = Array.from(str.matchAll(DASHBOARD_REGEX)).map((el)=>el[0]);
    const chunkResults = [];
    while(nonLinkChunks.length || linkChunks.length){
        if (nonLinkChunks.length) {
            chunkResults.push(nonLinkChunks.shift());
        }
        if (linkChunks.length) {
            const chunk = linkChunks.shift();
            chunkResults.push(/*#__PURE__*/ React__default.createElement("a", {
                key: chunk + '__' + String(linkChunks.length),
                href: chunk,
                target: "_blank",
                rel: "noreferrer"
            }, chunk));
        }
    }
    return chunkResults;
};
const ErrorText = ({ children, ...props })=>{
    const tokens = useMemo(()=>mapURLsToLinks(children), [
        children
    ]);
    // HACK: Screen readers only read elements in aria-live regions if they are new or changed. We first render the
    // aria-live div, then render the inner children second so the error message is "new" and therefore read out
    const [render, setRender] = useState(false);
    useMountEffect(()=>setRender(true));
    return /*#__PURE__*/ React__default.createElement("div", {
        "aria-live": "polite"
    }, render && /*#__PURE__*/ React__default.createElement(Typography, {
        ...props,
        variant: "helper",
        color: "destructive",
        key: children
    }, tokens));
};

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