import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { css } from "styled-components";
export function HighlightedText({ text, Highlight = HighLight, }) {
    return (_jsx(_Fragment, { children: Array.from(new DOMParser().parseFromString(text, "text/html").body.childNodes).map((child, index) => {
            if (child instanceof Text)
                return child.textContent;
            if (child instanceof Element && child.tagName === "EM")
                return _jsx(Highlight, { children: child.textContent }, index);
            return null;
        }) }));
}
function HighLight({ children }) {
    return (_jsx("span", { className: "openk9-embeddable-high-light", css: css `
        color: var(--openk9-embeddable-search--primary-color);
      `, children: children }));
}
