import React, { useEffect } from "react";
import finsembleCSS from "../assets/css/finsemble.lazy.css";
import dialogsCSS from "../assets/css/dialogs.lazy.css";
import { loadCSSAsStyle, unloadCSSAsStyle } from "../components/common/loadCSSAsStyle";
/**
 * A component for dynamically loading and unloading the finsemble css. This component can be composed into
 * a template in order to instantiate the styles, as opposed to importing them directly.
 *
 * We use dynamic loading because if we were to import the CSS directly then the styles would be injected
 * at module load time, and since the module is included in index.ts, this would mean that the styles would
 * _always_ be injected, regardless of whether a developer actually used the component or not.
 *
 * @param param.dialog Set to true when the component is a dialog so that dialogs.css will also be loaded, such as the authentication component.
 */
export const FinsembleCSS = ({ dialog }) => {
    useEffect(() => {
        loadCSSAsStyle(finsembleCSS);
        if (dialog)
            loadCSSAsStyle(dialogsCSS);
        return () => {
            unloadCSSAsStyle(finsembleCSS);
            if (dialog)
                unloadCSSAsStyle(dialogsCSS);
        };
    }, []);
    return React.createElement(React.Fragment, null);
};
//# sourceMappingURL=FinsembleCSS.js.map