@koine/next 1.0.10 → 1.0.13

package/Theme/Theme.js

@@ -0,0 +1,245 @@
+import { __assign, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Adapted from [next-themes](https://github.com/pacocoursey/next-themes)
+ */
+import { createContext, useCallback, useContext, useEffect, useState, memo, } from "react";
+import NextScript from "next/script";
+import { isServer } from "@koine/utils";
+var THEME_STORAGE_KEY = "theme";
+var colorSchemes = ["light", "dark"];
+var MEDIA = "(prefers-color-scheme: dark)";
+var ThemeContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setTheme: function (_) { },
+    themes: [],
+});
+export var useTheme = function () { return useContext(ThemeContext); };
+export var ThemeProvider = function (_a) {
+    var forcedTheme = _a.forcedTheme, _b = _a.disableTransitionOnChange, disableTransitionOnChange = _b === void 0 ? false : _b, _c = _a.enableSystem, enableSystem = _c === void 0 ? true : _c, _d = _a.enableColorScheme, enableColorScheme = _d === void 0 ? true : _d, _e = _a.themes, themes = _e === void 0 ? ["light", "dark"] : _e, _f = _a.defaultTheme, defaultTheme = _f === void 0 ? enableSystem ? "system" : "light" : _f, _g = _a.attribute, attribute = _g === void 0 ? "data-theme" : _g, value = _a.value, children = _a.children, nonce = _a.nonce;
+    var _h = useState(function () {
+        return getTheme(THEME_STORAGE_KEY, defaultTheme);
+    }), theme = _h[0], setThemeState = _h[1];
+    var _j = useState(function () {
+        return getTheme(THEME_STORAGE_KEY);
+    }), resolvedTheme = _j[0], setResolvedTheme = _j[1];
+    var attrs = !value ? themes : Object.values(value);
+    var applyTheme = useCallback(function (theme) {
+        var _a;
+        var resolved = theme;
+        if (isServer || !resolved)
+            return;
+        // If theme is system, resolve it before setting theme
+        if (theme === "system" && enableSystem) {
+            resolved = getSystemTheme();
+        }
+        var name = value ? value[resolved] : resolved;
+        var enable = disableTransitionOnChange ? disableAnimation() : null;
+        var d = document.documentElement;
+        if (attribute === "class") {
+            (_a = d.classList).remove.apply(_a, attrs);
+            if (name)
+                d.classList.add(name);
+        }
+        else {
+            if (name) {
+                d.setAttribute(attribute, name);
+            }
+            else {
+                d.removeAttribute(attribute);
+            }
+        }
+        if (enableColorScheme) {
+            var fallback = colorSchemes.includes(defaultTheme)
+                ? defaultTheme
+                : "";
+            var colorScheme = colorSchemes.includes(resolved)
+                ? resolved
+                : fallback;
+            d.style.colorScheme = colorScheme;
+        }
+        enable === null || enable === void 0 ? void 0 : enable();
+    }, [
+        attribute,
+        attrs,
+        defaultTheme,
+        disableTransitionOnChange,
+        enableColorScheme,
+        enableSystem,
+        value,
+    ]);
+    var setTheme = useCallback(function (theme) {
+        setThemeState(theme);
+        // Save to storage
+        try {
+            localStorage.setItem(THEME_STORAGE_KEY, theme);
+        }
+        catch (e) {
+            // Unsupported
+        }
+    }, []);
+    var handleMediaQuery = useCallback(function (e) {
+        var resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, enableSystem, forcedTheme, applyTheme]);
+    // Always listen to System preference
+    useEffect(function () {
+        var media = window.matchMedia(MEDIA);
+        // Intentionally use deprecated listener methods to support iOS & old browsers
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return function () { return media.removeListener(handleMediaQuery); };
+    }, [handleMediaQuery]);
+    // localStorage event handling
+    useEffect(function () {
+        var handleStorage = function (e) {
+            if (e.key !== THEME_STORAGE_KEY) {
+                return;
+            }
+            // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+            var theme = e.newValue || defaultTheme;
+            setTheme(theme);
+        };
+        window.addEventListener("storage", handleStorage);
+        return function () { return window.removeEventListener("storage", handleStorage); };
+    }, [defaultTheme, setTheme]);
+    // Whenever theme or forcedTheme changes, apply it
+    useEffect(function () {
+        applyTheme(forcedTheme !== null && forcedTheme !== void 0 ? forcedTheme : theme);
+    }, [applyTheme, forcedTheme, theme]);
+    return (_jsxs(ThemeContext.Provider, __assign({ value: {
+            theme: theme,
+            setTheme: setTheme,
+            forcedTheme: forcedTheme,
+            resolvedTheme: theme === "system" ? resolvedTheme : theme,
+            themes: enableSystem ? __spreadArray(__spreadArray([], themes, true), ["system"], false) : themes,
+            systemTheme: (enableSystem ? resolvedTheme : undefined),
+        } }, { children: [_jsx(ThemeScript, __assign({}, {
+                forcedTheme: forcedTheme,
+                disableTransitionOnChange: disableTransitionOnChange,
+                enableSystem: enableSystem,
+                enableColorScheme: enableColorScheme,
+                themes: themes,
+                defaultTheme: defaultTheme,
+                attribute: attribute,
+                value: value,
+                children: children,
+                attrs: attrs,
+                nonce: nonce,
+            })), children] })));
+};
+var ThemeScript = memo(function (_a) {
+    var forcedTheme = _a.forcedTheme, attribute = _a.attribute, enableSystem = _a.enableSystem, enableColorScheme = _a.enableColorScheme, defaultTheme = _a.defaultTheme, value = _a.value, attrs = _a.attrs, nonce = _a.nonce;
+    var defaultSystem = defaultTheme === "system";
+    // Code-golfing the amount of characters in the script
+    var optimization = (function () {
+        var removeClasses = "d.remove(".concat(attrs
+            .map(function (t) { return "'".concat(t, "'"); })
+            .join(","), ")");
+        return "var d=document.documentElement.classList;".concat(removeClasses, ";");
+    })();
+    var fallbackColorScheme = (function () {
+        if (!enableColorScheme) {
+            return "";
+        }
+        var fallback = colorSchemes.includes(defaultTheme)
+            ? defaultTheme
+            : null;
+        if (fallback) {
+            return "if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'".concat(defaultTheme, "'");
+        }
+        else {
+            return "if(e==='light'||e==='dark')d.style.colorScheme=e";
+        }
+    })();
+    var updateDOM = function (name, literal, setColorScheme) {
+        if (literal === void 0) { literal = false; }
+        if (setColorScheme === void 0) { setColorScheme = true; }
+        var resolvedName = value ? value[name] : name;
+        var val = literal ? name + "|| ''" : "'".concat(resolvedName, "'");
+        var text = "";
+        // MUCH faster to set colorScheme alongside HTML attribute/class
+        // as it only incurs 1 style recalculation rather than 2
+        // This can save over 250ms of work for pages with big DOM
+        if (enableColorScheme &&
+            setColorScheme &&
+            !literal &&
+            colorSchemes.includes(name)) {
+            text += "d.style.colorScheme = '".concat(name, "';");
+        }
+        if (attribute === "class") {
+            if (literal || resolvedName) {
+                text += "d.add(".concat(val, ")");
+            }
+            else {
+                text += "null";
+            }
+        }
+        else {
+            if (resolvedName) {
+                text += "d[s](n, ".concat(val, ")");
+            }
+        }
+        return text;
+    };
+    var scriptSrc = (function () {
+        if (forcedTheme) {
+            return "!function(){".concat(optimization).concat(updateDOM(forcedTheme), "}()");
+        }
+        if (enableSystem) {
+            return "!function(){try {".concat(optimization, "var e=localStorage.getItem('").concat(THEME_STORAGE_KEY, "');if(\"system\"===e||(!e&&").concat(defaultSystem, ")){var t=\"").concat(MEDIA, "\",m=window.matchMedia(t);if(m.media!==t||m.matches){").concat(updateDOM("dark"), "}else{").concat(updateDOM("light"), "}}else if(e){").concat(value ? "var x=".concat(JSON.stringify(value), ";") : "").concat(updateDOM(value ? "x[e]" : "e", true), "}").concat(!defaultSystem
+                ? "else{" + updateDOM(defaultTheme, false, false) + "}"
+                : "").concat(fallbackColorScheme, "}catch(e){}}()");
+        }
+        return "!function(){try{".concat(optimization, "var e=localStorage.getItem(\"").concat(THEME_STORAGE_KEY, "\");if(e){").concat(value ? "var x=".concat(JSON.stringify(value), ";") : "").concat(updateDOM(value ? "x[e]" : "e", true), "}else{").concat(updateDOM(defaultTheme, false, false), ";}").concat(fallbackColorScheme, "}catch(t){}}();");
+    })();
+    // We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
+    // However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
+    // But our script cannot be external because it changes at runtime based on React props
+    // so we trick next/script by passing `src` as a base64 JS script
+    var encodedScript = "data:text/javascript;base64,".concat(encodeBase64(scriptSrc));
+    return (_jsx(NextScript, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
+}, 
+// Never re-render this component
+function () { return true; });
+// Helpers
+var getTheme = function (key, fallback) {
+    if (isServer)
+        return undefined;
+    var theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
+    }
+    catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};
+var disableAnimation = function () {
+    var css = document.createElement("style");
+    css.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+    document.head.appendChild(css);
+    return function () {
+        // Force restyle
+        (function () { return window.getComputedStyle(document.body); })();
+        // Wait for next tick before removing
+        setTimeout(function () {
+            document.head.removeChild(css);
+        }, 1);
+    };
+};
+var getSystemTheme = function (e) {
+    if (!e)
+        e = window.matchMedia(MEDIA);
+    var isDark = e.matches;
+    var systemTheme = isDark ? "dark" : "light";
+    return systemTheme;
+};
+var encodeBase64 = function (str) {
+    return isServer ? Buffer.from(str).toString("base64") : btoa(str);
+};

package/Theme/index.d.ts

@@ -0,0 +1 @@
+export * from "./Theme";

package/Theme/index.js

@@ -0,0 +1 @@
+export * from "./Theme";

package/Theme/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Theme/index.js",
+  "types": "./index.d.ts"
+}

package/app/AppHead.d.ts

@@ -0,0 +1,2 @@
+export declare type AppHeadProps = unknown;
+export declare const AppHead: () => JSX.Element;

package/app/AppHead.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Head from "next/head";
+export var AppHead = function () {
+    return (_jsx(Head, { children: _jsx("meta", { name: "viewport", content: "width=device-width" }) }));
+};

package/app/AppMain.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { AppProps as NextAppProps } from "next/app";
+import type { HTMLMotionProps } from "framer-motion";
+import type { SeoDefaultsProps } from "../Seo";
+import type { NextProgressProps } from "../NextProgress";
+import type { MotionProviderFeatures } from "@koine/react/m";
+export declare type AppMainBaseProps = NextAppProps & {
+    /**
+     * A wrapping layout component
+     */
+    Layout: React.FC<Record<string, unknown>>;
+    /**
+     * A Progress' Overlay component
+     */
+    ProgressOverlay?: NextProgressProps["Overlay"];
+    /**
+     * Seo site wide default configuration
+     */
+    seo?: SeoDefaultsProps;
+    /**
+     * JSX to render just after SEO
+     */
+    pre?: React.ReactNode;
+    /**
+     * JSX to render just at the end of the markup
+     */
+    post?: React.ReactNode;
+};
+export declare type AppMainFramerProps = {
+    motion: MotionProviderFeatures;
+    /**
+     * Default layout transition, by default it is a simple fade in/out
+     */
+    transition?: Omit<HTMLMotionProps<"div">, "key">;
+};

package/app/AppMain.js

@@ -0,0 +1 @@
+export {};

package/app/css/AppMain.d.ts

@@ -0,0 +1,8 @@
+import type { AppMainBaseProps } from "../AppMain";
+export declare type AppMainProps = Omit<AppMainBaseProps, "ProgressOverlay">;
+/**
+ * App main
+ *
+ * It does not imply any specific styling or animation solution
+ */
+export declare const AppMain: ({ Component, pageProps, Layout, seo, pre, post, }: AppMainProps) => JSX.Element;

package/app/css/AppMain.js

@@ -0,0 +1,13 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SeoDefaults } from "../../Seo";
+/**
+ * App main
+ *
+ * It does not imply any specific styling or animation solution
+ */
+export var AppMain = function (_a) {
+    var Component = _a.Component, pageProps = _a.pageProps, Layout = _a.Layout, seo = _a.seo, pre = _a.pre, post = _a.post;
+    return (_jsxs(React.Fragment, { children: [_jsx(SeoDefaults, __assign({}, seo)), pre, _jsx(Layout, { children: _jsx(Component, __assign({}, pageProps)) }), post] }));
+};

package/app/css/AppTheme.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { ThemeProviderProps } from "../../Theme";
+export declare type AppThemeProps = React.PropsWithChildren<NextAppProps & {
+    theme: ThemeProviderProps["defaultTheme"];
+}>;
+/**
+ * App theme with vanilla class based theme (good for `tailwindcss`)
+ */
+export declare const AppTheme: ({ theme, children }: AppThemeProps) => JSX.Element;

package/app/css/AppTheme.js

@@ -0,0 +1,14 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// import { ThemeVanillaProvider, ThemeVanillaValue } from "@koine/react";
+import { ThemeProvider } from "../../Theme";
+/**
+ * App theme with vanilla class based theme (good for `tailwindcss`)
+ */
+export var AppTheme = function (_a) {
+    var theme = _a.theme, children = _a.children;
+    // return (
+    //   <ThemeVanillaProvider initialTheme={theme}>{children}</ThemeVanillaProvider>
+    // );
+    return (_jsx(ThemeProvider, __assign({ defaultTheme: theme, attribute: "class" }, { children: children })));
+};

package/app/css/auth/index.d.ts

@@ -0,0 +1,9 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "../AppTheme";
+import { AppMainProps } from "../AppMain";
+export declare type NextAppProps = AppProps & AppThemeProps & AppMainProps;
+/**
+ * App with authentication provided by `next-auth`
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/css/auth/index.js

@@ -0,0 +1,14 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SessionProvider } from "next-auth/react";
+import { AppHead } from "../../AppHead";
+import { AppTheme } from "../AppTheme";
+import { AppMain } from "../AppMain";
+/**
+ * App with authentication provided by `next-auth`
+ */
+export var NextApp = function (props) {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(SessionProvider, __assign({ session: props.pageProps.session }, { children: _jsx(AppTheme, __assign({}, props, { children: _jsx(AppMain, __assign({}, props)) })) }))] }));
+};
+export default NextApp;

package/app/css/auth/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../../node/app/css/auth/index.js",
+  "types": "./index.d.ts"
+}

package/app/css/index.d.ts

@@ -0,0 +1,54 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "./AppTheme";
+import { AppMainProps } from "./AppMain";
+export declare type NextAppProps = AppProps & AppThemeProps & AppMainProps;
+/**
+ * App
+ *
+ * @example
+ *
+ * ```tsx
+ * import { NextApp, NextAppProps } from "@koine/next/app/css/auth";
+ * import { Favicon, AnalyticsGoogle } from "@koine/next";
+ * import { theme } from "src/helpers/theme";
+ * import { Layout } from "src/components/Layout";
+ * // import "@fontsource/myfont/800.css";
+ * // import "src/helpers/theme.css";
+ *
+ * const motion = () => import("@koine/react/m/max").then((m) => m.default);
+ *
+ * export default function App(props: NextAppProps) {
+ *   return (
+ *     <NextApp
+ *       {...props}
+ *       Layout={Layout}
+ *       theme={theme}
+ *       seo={{
+ *         titleTemplate: "%s | MyApp",
+ *         defaultTitle: "MyApp",
+ *         openGraph: {
+ *           type: "website",
+ *           locale: "en_US",
+ *           url: "https://myapp.com/",
+ *           site_name: "MyApp",
+ *         },
+ *         twitter: {
+ *           handle: "@MklrNl",
+ *           site: "@MyApp",
+ *           cardType: "summary_large_image",
+ *         },
+ *       }}
+ *       pre={
+ *         <>
+ *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
+ *           <Favicon name="MyApp" color="#000000" />
+ *         </>
+ *       }
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/css/index.js

@@ -0,0 +1,58 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppHead } from "../AppHead";
+import { AppTheme } from "./AppTheme";
+import { AppMain } from "./AppMain";
+/**
+ * App
+ *
+ * @example
+ *
+ * ```tsx
+ * import { NextApp, NextAppProps } from "@koine/next/app/css/auth";
+ * import { Favicon, AnalyticsGoogle } from "@koine/next";
+ * import { theme } from "src/helpers/theme";
+ * import { Layout } from "src/components/Layout";
+ * // import "@fontsource/myfont/800.css";
+ * // import "src/helpers/theme.css";
+ *
+ * const motion = () => import("@koine/react/m/max").then((m) => m.default);
+ *
+ * export default function App(props: NextAppProps) {
+ *   return (
+ *     <NextApp
+ *       {...props}
+ *       Layout={Layout}
+ *       theme={theme}
+ *       seo={{
+ *         titleTemplate: "%s | MyApp",
+ *         defaultTitle: "MyApp",
+ *         openGraph: {
+ *           type: "website",
+ *           locale: "en_US",
+ *           url: "https://myapp.com/",
+ *           site_name: "MyApp",
+ *         },
+ *         twitter: {
+ *           handle: "@MklrNl",
+ *           site: "@MyApp",
+ *           cardType: "summary_large_image",
+ *         },
+ *       }}
+ *       pre={
+ *         <>
+ *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
+ *           <Favicon name="MyApp" color="#000000" />
+ *         </>
+ *       }
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ */
+export var NextApp = function (props) {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(AppTheme, __assign({}, props, { children: _jsx(AppMain, __assign({}, props)) }))] }));
+};
+export default NextApp;

package/app/css/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../node/app/css/index.js",
+  "types": "./index.d.ts"
+}

package/app/em/AppMain.d.ts

@@ -0,0 +1,10 @@
+import type { AppMainBaseProps, AppMainFramerProps } from "../AppMain";
+export declare type AppMainProps = AppMainBaseProps & AppMainFramerProps;
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+export declare const AppMain: ({ Component, pageProps, Layout, ProgressOverlay, seo, motion, transition, pre, post, }: AppMainProps) => JSX.Element;

package/app/em/AppMain.js

@@ -0,0 +1,24 @@
+import { __assign } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter } from "next/router";
+import { AnimatePresence, m } from "framer-motion";
+import { MotionProvider } from "@koine/react/m";
+import { SeoDefaults } from "../../Seo";
+import { NextProgress } from "../../NextProgress";
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+export var AppMain = function (_a) {
+    var Component = _a.Component, pageProps = _a.pageProps, Layout = _a.Layout, ProgressOverlay = _a.ProgressOverlay, seo = _a.seo, motion = _a.motion, _b = _a.transition, transition = _b === void 0 ? {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+    } : _b, pre = _a.pre, post = _a.post;
+    var pathname = useRouter().pathname;
+    return (_jsxs(_Fragment, { children: [_jsx(SeoDefaults, __assign({}, seo)), pre, _jsxs(MotionProvider, __assign({ features: motion }, { children: [ProgressOverlay && _jsx(NextProgress, { Overlay: ProgressOverlay }), _jsx(Layout, { children: _jsx(AnimatePresence, __assign({ exitBeforeEnter: true, initial: false }, { children: _jsx(m.div, __assign({}, transition, { children: _createElement(Component, __assign({}, pageProps, { key: pathname })) }), pathname) })) })] })), post] }));
+};

package/app/em/AppTheme.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { Theme } from "@mui/material/styles";
+import { EmotionCache } from "@emotion/react";
+export declare type AppThemeProps = React.PropsWithChildren<NextAppProps & {
+    emotionCache?: EmotionCache;
+    /**
+     * A theme object
+     */
+    theme: Theme;
+}>;
+/**
+ * App theme with `emotion` (good for `@mui`)s
+ */
+export declare const AppTheme: ({ emotionCache, theme, children, }: AppThemeProps) => JSX.Element;

package/app/em/AppTheme.js

@@ -0,0 +1,18 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemeProvider } from "@mui/material/styles";
+import { CacheProvider } from "@emotion/react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Global, css } from "@emotion/react";
+import { stylesGlobal } from "@koine/react/sc";
+import { createEmotionCache } from "../../utils/emotion-cache";
+// client-side cache, shared for the whole session of the user in the browser.
+var clientSideEmotionCache = createEmotionCache();
+/**
+ * App theme with `emotion` (good for `@mui`)s
+ */
+export var AppTheme = function (_a) {
+    var _b = _a.emotionCache, emotionCache = _b === void 0 ? clientSideEmotionCache : _b, theme = _a.theme, children = _a.children;
+    return (_jsx(CacheProvider, __assign({ value: emotionCache }, { children: _jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(CssBaseline, {}), _jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), stylesGlobal) }), children] })) })));
+};
+var templateObject_1;

package/app/em/auth/index.d.ts

@@ -0,0 +1,9 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "../AppTheme";
+import { AppMainProps } from "../AppMain";
+export declare type NextAppProps = AppProps & AppThemeProps & AppMainProps;
+/**
+ * App with authentication provided by `next-auth`
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/em/auth/index.js

@@ -0,0 +1,14 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SessionProvider } from "next-auth/react";
+import { AppHead } from "../../AppHead";
+import { AppTheme } from "../AppTheme";
+import { AppMain } from "../AppMain";
+/**
+ * App with authentication provided by `next-auth`
+ */
+export var NextApp = function (props) {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(SessionProvider, __assign({ session: props.pageProps.session }, { children: _jsx(AppTheme, __assign({}, props, { children: _jsx(AppMain, __assign({}, props)) })) }))] }));
+};
+export default NextApp;

package/app/em/auth/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../../node/app/em/auth/index.js",
+  "types": "./index.d.ts"
+}

package/app/em/index.d.ts

@@ -0,0 +1,9 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "./AppTheme";
+import { AppMainProps } from "./AppMain";
+export declare type NextAppProps = AppProps & AppThemeProps & AppMainProps;
+/**
+ * App
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/em/index.js

@@ -0,0 +1,13 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppHead } from "../AppHead";
+import { AppTheme } from "./AppTheme";
+import { AppMain } from "./AppMain";
+/**
+ * App
+ */
+export var NextApp = function (props) {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(AppTheme, __assign({}, props, { children: _jsx(AppMain, __assign({}, props)) }))] }));
+};
+export default NextApp;

package/app/em/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../node/app/em/index.js",
+  "types": "./index.d.ts"
+}