"use strict";
const React = require("react");
const reactDom = require("react-dom");
const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
const styles_lib_components_HiddenVisually_HiddenVisually_css_cjs = require("../../HiddenVisually/HiddenVisually.css.cjs");
let announcementCounter = 0;
const containerPrefix = "braid-announcement-container";
const Announcement = ({ children }) => {
  const [announcementElement, setElement] = React.useState(null);
  const className = [
    styles_lib_css_atoms_atoms_cjs.atoms({
      reset: "div",
      position: "absolute",
      overflow: "hidden"
    }),
    styles_lib_components_HiddenVisually_HiddenVisually_css_cjs.root
  ].join(" ");
  React.useEffect(() => {
    const announcementContainerId = `${containerPrefix}-${announcementCounter++}`;
    const element = document.createElement("div");
    element.setAttribute("id", announcementContainerId);
    element.setAttribute("class", className);
    element.setAttribute("aria-live", "polite");
    element.setAttribute("aria-atomic", "true");
    document.body.appendChild(element);
    setElement(element);
    return () => {
      document.body.removeChild(element);
    };
  }, [className]);
  if (!announcementElement) {
    return null;
  }
  return reactDom.createPortal(children, announcementElement);
};
exports.Announcement = Announcement;
