@hitachivantara/app-shell-ui 1.9.0 → 1.10.0

package/dist/esm/{lib/hooks/useNavigationMenuItems.js → hooks/useNavigationMenuItems.mjs}

@@ -1,30 +1,25 @@
 import { useContext, useMemo, useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import { useHvAppShellConfig, HvAppShellRuntimeContext, CONFIG_TRANSLATIONS_NAMESPACE, useHvMenuItems } from "@hitachivantara/app-shell-shared";
 import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
-import { createNavigationMenuItems } from "../utils/navigationUtil.js";
+import { useHvAppShellConfig, HvAppShellRuntimeContext, CONFIG_TRANSLATIONS_NAMESPACE, useHvMenuItems } from "@hitachivantara/app-shell-shared";
+import { createNavigationMenuItems } from "../utils/navigationUtil.mjs";
 const MAX_TOP_MENU_DEPTH = 2;
 const useNavigationMenuItems = () => {
-  const {
-    pathname
-  } = useLocation();
-  const {
-    navigationMode
-  } = useHvAppShellConfig();
-  const {
-    navigate
-  } = useHvNavigation();
-  const {
-    i18n
-  } = useContext(HvAppShellRuntimeContext) ?? {};
-  const tConfig = useMemo(() => i18n?.getFixedT(i18n.language, CONFIG_TRANSLATIONS_NAMESPACE) ?? // should not happen, but fallback if the i18n instance is not available
-  ((l) => l), [i18n]);
-  const {
+  const { pathname } = useLocation();
+  const { navigationMode } = useHvAppShellConfig();
+  const { navigate } = useHvNavigation();
+  const { i18n } = useContext(HvAppShellRuntimeContext) ?? {};
+  const tConfig = useMemo(
+    () => i18n?.getFixedT(i18n.language, CONFIG_TRANSLATIONS_NAMESPACE) ?? // should not happen, but fallback if the i18n instance is not available
+    ((l) => l),
+    [i18n]
+  );
+  const { items, selectedMenuItemId, rootMenuItemId } = useHvMenuItems();
+  const navigationMenuItemsTmp = createNavigationMenuItems(
+    tConfig,
     items,
-    selectedMenuItemId,
-    rootMenuItemId
-  } = useHvMenuItems();
-  const navigationMenuItemsTmp = createNavigationMenuItems(tConfig, items, navigationMode === "ONLY_TOP" ? MAX_TOP_MENU_DEPTH : void 0);
+    navigationMode === "ONLY_TOP" ? MAX_TOP_MENU_DEPTH : void 0
+  );
   useEffect(() => {
     if (!selectedMenuItemId && pathname === "/" && items[0]?.href) {
       navigate(items[0].href);

package/dist/esm/{lib/hooks/useNotificationsEventListener.js → hooks/useNotificationsEventListener.mjs}

@@ -1,19 +1,10 @@
 import { useHvSnackbar } from "@hitachivantara/uikit-react-core";
-import useBannerContext from "../../providers/hooks/useBannerContext.js";
+import { useBannerContext } from "../providers/BannerProvider.mjs";
 const useNotificationsEventListener = () => {
-  const {
-    enqueueSnackbar
-  } = useHvSnackbar();
-  const {
-    show
-  } = useBannerContext();
+  const { enqueueSnackbar } = useHvSnackbar();
+  const { show } = useBannerContext();
   const handleCustomEventSnackbar = (notification) => {
-    const {
-      message,
-      variant,
-      actions,
-      actionsCallback
-    } = notification;
+    const { message, variant, actions, actionsCallback } = notification;
     let snackbarContentProps;
     if (actions) {
       snackbarContentProps = {
@@ -46,9 +37,7 @@ const useNotificationsEventListener = () => {
         console.warn("Invalid notification type", notificationEvent.type);
     }
   };
-  return {
-    handleNotificationEvent
-  };
+  return { handleNotificationEvent };
 };
 export {
   useNotificationsEventListener as default

package/dist/esm/{lib/hooks/useThemeEventListener.js → hooks/useThemeEventListener.mjs}

@@ -1,31 +1,20 @@
 import { useTheme } from "@hitachivantara/uikit-react-core";
-import useLocalStorage from "./useLocalStorage.js";
+import useLocalStorage from "./useLocalStorage.mjs";
 const useThemeEventListener = () => {
-  const {
-    selectedTheme,
-    changeTheme,
-    selectedMode,
-    colorModes
-  } = useTheme();
-  const {
-    setStoredValue
-  } = useLocalStorage("COLOR_MODE");
+  const { selectedTheme, changeTheme, selectedMode, colorModes } = useTheme();
+  const { setStoredValue } = useLocalStorage("COLOR_MODE");
   const getNextColorMode = () => {
     const index = colorModes.indexOf(selectedMode);
     const nextIndex = (index + 1) % colorModes.length;
     return colorModes[nextIndex];
   };
   const handleThemeEvent = (event) => {
-    const {
-      colorMode
-    } = event.detail;
+    const { colorMode } = event.detail;
     const newColorMode = !colorMode || colorModes.indexOf(colorMode) === -1 ? getNextColorMode() : colorMode;
     changeTheme(selectedTheme, newColorMode);
     setStoredValue(newColorMode);
   };
-  return {
-    handleThemeEvent
-  };
+  return { handleThemeEvent };
 };
 export {
   useThemeEventListener as default

package/dist/esm/{lib/i18n/index.js → i18n/index.mjs}

@@ -1,23 +1,25 @@
-import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
+import { createInstance } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import en from "./localization/en.json.js";
-import pt from "./localization/pt.json.js";
+import en from "./localization/en.json.mjs";
+import pt from "./localization/pt.json.mjs";
 const APP_SHELL_NAMESPACE = "appShell";
 const addResourceBundles = (i18nInstance, bundles, namespace) => {
   Object.entries(bundles).forEach((entry) => {
     const [key, value] = entry;
-    i18nInstance.addResourceBundle(key, namespace ?? APP_SHELL_NAMESPACE, value);
+    i18nInstance.addResourceBundle(
+      key,
+      namespace ?? APP_SHELL_NAMESPACE,
+      value
+    );
   });
 };
 const createI18Next = () => {
-  const newInstance = i18next.createInstance();
+  const newInstance = createInstance();
   newInstance.use(LanguageDetector).use(initReactI18next).init({
     defaultNS: APP_SHELL_NAMESPACE,
     fallbackLng: "en",
-    detection: {
-      order: ["navigator"]
-    },
+    detection: { order: ["navigator"] },
     resources: {}
   });
   newInstance.addResourceBundle("en", APP_SHELL_NAMESPACE, en);

package/dist/esm/i18n/localization/en.json.mjs

@@ -0,0 +1,17 @@
+const errors = { "missing": { "configuration": "Missing or incomplete configuration." }, "notFound": { "code": "404", "title": "Oops! Seems like the page is lost in space.", "image_description": "404 Page not found" }, "genericError": { "code": "500", "title": "Shoot! We have a problem! Be back soon.", "image_description": "500 Generic error" }, "footer": "Click <navigate>here</navigate> to go back to the {{label}} page." };
+const header = { "helpUrl": { "documentationLink": "Documentation link" }, "appSwitcher": { "title": "Apps", "ariaLabel": "App Switcher Panel" }, "navigation": { "openNavigationPanel": "Open navigation panel", "closeNavigationPanel": "Close navigation panel" }, "colorModeSwitcher": { "ariaLabel": "Switch color mode" } };
+const verticalNavigation = { "ariaLabelNavigationTree": "Vertical navigation", "ariaLabelCollapse": "Collapse vertical navigation", "ariaLabelExpand": "Expand vertical navigation", "title": "Menu", "ariaLabelSliderForwardButton": "Navigate to submenu", "ariaLabelHeaderBackButton": "Back", "collapseAction": "Collapse Menu" };
+const notifications = { "banner": { "close": "Close banner" } };
+const en = {
+  errors,
+  header,
+  verticalNavigation,
+  notifications
+};
+export {
+  en as default,
+  errors,
+  header,
+  notifications,
+  verticalNavigation
+};

package/dist/esm/i18n/localization/pt.json.mjs

@@ -0,0 +1,17 @@
+const errors = { "missing": { "configuration": "Configuração em falta ou incompleta." }, "notFound": { "code": "404", "title": "Oops! Parece que a página está perdida no espaço.", "image_description": "404 Página não encontrada" }, "genericError": { "code": "500", "title": "Bolas! Temos um problema! Estaremos de volta em breve.", "image_description": "500 Erro genérico" }, "footer": "Carregue <navigate>aqui</navigate> para voltar à página {{label}}." };
+const header = { "helpUrl": { "documentationLink": "Link de documentação" }, "appSwitcher": { "title": "Aplicações", "ariaLabel": "Painel do App Switcher" }, "navigation": { "openNavigationPanel": "Abrir painel de navegação", "closeNavigationPanel": "Fechar painel de navegação" }, "colorModeSwitcher": { "ariaLabel": "Alternar modo de cor" } };
+const verticalNavigation = { "ariaLabelNavigationTree": "Navegação vertical", "ariaLabelCollapse": "Recolher navegação vertical", "ariaLabelExpand": "Expandir navegação vertical", "title": "Menu", "ariaLabelSliderForwardButton": "Navegar para submenu", "ariaLabelHeaderBackButton": "Voltar", "collapseAction": "Fechar" };
+const notifications = { "banner": { "close": "Fechar barra de notificação" } };
+const pt = {
+  errors,
+  header,
+  verticalNavigation,
+  notifications
+};
+export {
+  pt as default,
+  errors,
+  header,
+  notifications,
+  verticalNavigation
+};

package/dist/esm/index.mjs

@@ -0,0 +1,4 @@
+import HvAppShell from "./components/AppShell/AppShell.mjs";
+export {
+  HvAppShell as default
+};

package/dist/esm/pages/ErrorPage/ErrorPage.mjs

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { useNavigationContext } from "../../providers/NavigationProvider.mjs";
+import { Footer } from "./Footer.mjs";
+import { StyledErrorPage, StyledTitleWrapper, StyledImageWrapper } from "./styles.mjs";
+const ErrorPage = ({
+  code = void 0,
+  title,
+  background,
+  backgroundLabel,
+  fullPage = false,
+  includeFooter = true
+}) => {
+  const { isCompactMode, showHeaderSubMenu } = useNavigationContext();
+  return /* @__PURE__ */ jsxs(
+    StyledErrorPage,
+    {
+      showHeaderSubMenu,
+      isCompactMode,
+      fullPage,
+      children: [
+        /* @__PURE__ */ jsxs(StyledTitleWrapper, { children: [
+          code && /* @__PURE__ */ jsx(HvTypography, { variant: "title1", children: code }),
+          /* @__PURE__ */ jsx(HvTypography, { variant: isCompactMode ? "xsTitle" : "display", children: title })
+        ] }),
+        /* @__PURE__ */ jsx(
+          StyledImageWrapper,
+          {
+            style: { backgroundImage: background },
+            role: "img",
+            "aria-label": backgroundLabel
+          }
+        ),
+        includeFooter && /* @__PURE__ */ jsx(Footer, {})
+      ]
+    }
+  );
+};
+export {
+  ErrorPage as default
+};

package/dist/esm/pages/ErrorPage/Footer.mjs

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useErrorBoundary } from "react-error-boundary";
+import { useTranslation, Trans } from "react-i18next";
+import styled from "@emotion/styled";
+import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
+import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { useNavigationContext } from "../../providers/NavigationProvider.mjs";
+const StyledFooterWrapper = styled("div")({
+  textAlign: "center"
+});
+const Footer = () => {
+  const { t } = useTranslation();
+  const { navigate } = useHvNavigation();
+  const { navigationMode } = useHvAppShellConfig();
+  const { resetBoundary } = useErrorBoundary();
+  const { items, verticalNavigationItems, isCompactMode } = useNavigationContext();
+  const getFirstMenuItem = () => {
+    if (!isCompactMode && navigationMode !== "ONLY_LEFT") {
+      return items.length > 0 ? items[0] : null;
+    }
+    return verticalNavigationItems.length > 0 ? verticalNavigationItems[0] : null;
+  };
+  const firstMenuItem = getFirstMenuItem();
+  const handleClick = (event) => {
+    event.preventDefault();
+    if (firstMenuItem?.href) {
+      resetBoundary();
+      let path = firstMenuItem.href;
+      if (path.startsWith(".")) {
+        path = path.substring(1);
+      }
+      navigate(path);
+    }
+  };
+  return firstMenuItem && /* @__PURE__ */ jsx(StyledFooterWrapper, { children: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: /* @__PURE__ */ jsx(
+    Trans,
+    {
+      t,
+      i18nKey: "errors.footer",
+      values: { label: firstMenuItem.label },
+      components: {
+        navigate: /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            link: true,
+            component: "a",
+            href: firstMenuItem.href,
+            variant: "label",
+            onClick: handleClick,
+            children: firstMenuItem.label
+          }
+        )
+      }
+    }
+  ) }) });
+};
+export {
+  Footer
+};

package/dist/esm/pages/ErrorPage/styles.mjs

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled";
+import { theme } from "@hitachivantara/uikit-react-core";
+const calcHeight = ({
+  showHeaderSubMenu,
+  isCompactMode,
+  fullPage
+}) => {
+  if (fullPage) {
+    return `100vh`;
+  }
+  if (showHeaderSubMenu && !isCompactMode) {
+    return `calc(100vh - (${theme.header.height} + ${theme.header.secondLevelHeight}px + ${theme.space.lg} + ${theme.space.lg}))`;
+  }
+  return `calc(100vh - (${theme.header.height} + ${theme.space.lg} + ${theme.space.lg}))`;
+};
+const StyledErrorPage = styled("div")(
+  {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    marginTop: theme.space.lg
+  },
+  (props) => ({ height: calcHeight(props) })
+);
+const StyledImageWrapper = styled("div")({
+  flex: 1,
+  display: "flex",
+  backgroundSize: "contain",
+  backgroundPosition: "center center",
+  backgroundRepeat: "no-repeat",
+  flexDirection: "column",
+  height: "100%"
+});
+const StyledTitleWrapper = styled("div")({
+  textAlign: "center"
+});
+export {
+  StyledErrorPage,
+  StyledImageWrapper,
+  StyledTitleWrapper
+};

package/dist/esm/pages/GenericError/GenericError.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import BlackCat from "./500.svg.mjs";
+import ErrorPage from "../ErrorPage/ErrorPage.mjs";
+const GenericError = ({ fullPage = false, includeFooter = true }) => {
+  const { t } = useTranslation(void 0, { keyPrefix: "errors.genericError" });
+  return /* @__PURE__ */ jsx(
+    ErrorPage,
+    {
+      code: t("code"),
+      title: t("title"),
+      backgroundLabel: t("image_description"),
+      fullPage,
+      includeFooter,
+      background: `url(${BlackCat})`
+    }
+  );
+};
+export {
+  GenericError as default
+};

package/dist/esm/pages/LoadingPage/LoadingPage.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import Loading from "../../components/layout/Loading/Loading.mjs";
+import { useNavigationContext } from "../../providers/NavigationProvider.mjs";
+import StyledLoadingPage from "./styles.mjs";
+const LoadingPage = () => {
+  const { isCompactMode, showHeaderSubMenu } = useNavigationContext();
+  return /* @__PURE__ */ jsx(
+    StyledLoadingPage,
+    {
+      showHeaderSubMenu,
+      isCompactMode,
+      children: /* @__PURE__ */ jsx(Loading, {})
+    }
+  );
+};
+export {
+  LoadingPage as default
+};

package/dist/esm/pages/LoadingPage/index.mjs

@@ -0,0 +1,4 @@
+import LoadingPage from "./LoadingPage.mjs";
+export {
+  LoadingPage as default
+};

package/dist/esm/pages/LoadingPage/styles.mjs

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import { theme } from "@hitachivantara/uikit-react-core";
+const calcHeight = ({
+  showHeaderSubMenu,
+  isCompactMode
+}) => {
+  if (showHeaderSubMenu && !isCompactMode) {
+    return `calc(100vh - (${theme.header.height} + ${theme.header.secondLevelHeight}px + ${theme.space.lg} + ${theme.space.lg}))`;
+  }
+  return `calc(100vh - (${theme.header.height} + ${theme.space.lg} + ${theme.space.lg}))`;
+};
+const StyledLoadingPage = styled("div")(
+  {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    marginTop: theme.space.lg
+  },
+  (props) => ({ height: calcHeight(props) })
+);
+export {
+  StyledLoadingPage as default
+};

package/dist/esm/pages/NotFound/NotFound.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import DogeSpace from "./404.svg.mjs";
+import ErrorPage from "../ErrorPage/ErrorPage.mjs";
+const NotFound = () => {
+  const { t } = useTranslation(void 0, { keyPrefix: "errors.notFound" });
+  return /* @__PURE__ */ jsx(
+    ErrorPage,
+    {
+      code: t("code"),
+      title: t("title"),
+      backgroundLabel: t("image_description"),
+      background: `url(${DogeSpace})`
+    }
+  );
+};
+export {
+  NotFound as default
+};

package/dist/esm/pages/NotFound/index.mjs

@@ -0,0 +1,4 @@
+import { default as default2 } from "./NotFound.mjs";
+export {
+  default2 as default
+};

package/dist/esm/pages/Root/Root.mjs

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Outlet } from "react-router-dom";
+import { BannerProvider } from "../../providers/BannerProvider.mjs";
+import { NavigationProvider } from "../../providers/NavigationProvider.mjs";
+import CombinedProviders from "../../utils/CombinedProviders.mjs";
+import LoadingPage from "../LoadingPage/LoadingPage.mjs";
+import CustomHooksInitializer from "../../components/CustomHooksInitializer/CustomHooksInitializer.mjs";
+import Header from "../../components/layout/Header/Header.mjs";
+import Main from "../../components/layout/Main/Main.mjs";
+import GenericError from "../GenericError/GenericError.mjs";
+const Root = ({ providers }) => /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: true }), children: /* @__PURE__ */ jsx(CombinedProviders, { providers, children: /* @__PURE__ */ jsx(NavigationProvider, { children: /* @__PURE__ */ jsxs(BannerProvider, { children: [
+  /* @__PURE__ */ jsx(CustomHooksInitializer, {}),
+  /* @__PURE__ */ jsx(Header, {}),
+  /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPage, {}), children: /* @__PURE__ */ jsx(Outlet, {}) }) })
+] }) }) }) });
+export {
+  Root as default
+};

package/dist/esm/providers/BannerProvider.mjs

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, createContext, useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/css";
+import { uid } from "uid";
+import { useTheme, theme, HvBanner } from "@hitachivantara/uikit-react-core";
+import { useLayoutContext } from "./LayoutProvider.mjs";
+import { useNavigationContext } from "./NavigationProvider.mjs";
+const BannerContext = createContext({
+  show: () => {
+  },
+  dismiss: () => {
+  }
+});
+const BannerProvider = ({ children }) => {
+  const { t } = useTranslation(void 0, {
+    keyPrefix: "notifications.banner"
+  });
+  const { activeTheme } = useTheme();
+  const { showHeaderSubMenu, isCompactMode } = useNavigationContext();
+  const { verticalNavigationWidth, setBannerMaxHeight } = useLayoutContext();
+  const [banners, setBanners] = useState([]);
+  const isPentahoTheme = activeTheme?.name === "pentahoPlus";
+  const show = (notification) => {
+    const id = uid();
+    const newBanner = {
+      id,
+      ...notification,
+      variant: notification.variant ?? "default"
+    };
+    setBanners((prevBanners) => [...prevBanners, newBanner]);
+  };
+  const dismiss = (id) => {
+    setBanners(
+      (prevBanners) => prevBanners.filter((banner) => banner.id !== id)
+    );
+  };
+  const value = useMemo(
+    () => ({
+      show,
+      dismiss
+    }),
+    []
+  );
+  useEffect(() => {
+    if (banners.length > 0) {
+      const bannerHeights = banners.map((item) => {
+        const bannerElement = document.getElementById(item.id);
+        return bannerElement ? bannerElement.clientHeight : 0;
+      });
+      const maxBannerHeight = Math.max(...bannerHeights);
+      setBannerMaxHeight(maxBannerHeight);
+    } else {
+      setBannerMaxHeight(0);
+    }
+  }, [banners, setBannerMaxHeight]);
+  const { root, topCenter, bottomCenter } = useMemo(() => {
+    const paddingY = theme.space.xs;
+    const paddingX = theme.space.sm;
+    return {
+      root: css({
+        left: `calc(${verticalNavigationWidth}px + ${paddingX})`,
+        width: `calc(100% - (${verticalNavigationWidth}px + ${paddingX}) - ${paddingX})`,
+        transform: "unset",
+        minWidth: "unset",
+        zIndex: theme.zIndices.banner,
+        ...isPentahoTheme && {
+          maxWidth: 540,
+          left: `calc(${verticalNavigationWidth}px + (100% - ${verticalNavigationWidth}px) / 2)`,
+          transform: `translateX(-50%)`
+        }
+      }),
+      topCenter: css({
+        marginTop: showHeaderSubMenu && !isCompactMode ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight} + ${paddingY})` : `calc(${theme.header.height} + ${paddingY})`
+      }),
+      bottomCenter: css({
+        marginBottom: theme.space.md
+      })
+    };
+  }, [
+    isCompactMode,
+    isPentahoTheme,
+    showHeaderSubMenu,
+    verticalNavigationWidth
+  ]);
+  return /* @__PURE__ */ jsxs(BannerContext.Provider, { value, children: [
+    banners.map((banner) => /* @__PURE__ */ jsx(
+      HvBanner,
+      {
+        classes: {
+          root,
+          anchorOriginBottomCenter: bottomCenter,
+          anchorOriginTopCenter: topCenter
+        },
+        id: banner.id,
+        offset: 0,
+        open: true,
+        onClose: () => dismiss(banner.id),
+        variant: banner.variant,
+        label: banner.message,
+        showIcon: true,
+        actions: banner.actions,
+        actionsCallback: banner.actionsCallback,
+        bannerContentProps: {
+          actionProps: { "aria-label": t("close") }
+        },
+        anchorOrigin: isPentahoTheme ? "bottom" : void 0,
+        transitionDirection: isPentahoTheme ? "up" : void 0
+      },
+      banner.id
+    )),
+    children
+  ] });
+};
+const useBannerContext = () => {
+  const context = useContext(BannerContext);
+  if (!context) {
+    console.error("BannerContext was used outside of its Provider");
+  }
+  return context;
+};
+export {
+  BannerContext,
+  BannerProvider,
+  useBannerContext
+};

package/dist/esm/providers/LayoutProvider.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, createContext, useContext } from "react";
+const LayoutContext = createContext({
+  bannerMaxHeight: 0,
+  setBannerMaxHeight: () => {
+  },
+  verticalNavigationWidth: 0,
+  setVerticalNavigationWidth: () => {
+  }
+});
+const LayoutProvider = ({ children }) => {
+  const [bannerMaxHeight, setBannerMaxHeight] = useState(0);
+  const [verticalNavigationWidth, setVerticalNavigationWidth] = useState(0);
+  const value = useMemo(
+    () => ({
+      bannerMaxHeight,
+      setBannerMaxHeight,
+      verticalNavigationWidth,
+      setVerticalNavigationWidth
+    }),
+    [bannerMaxHeight, verticalNavigationWidth]
+  );
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children });
+};
+const useLayoutContext = () => {
+  const context = useContext(LayoutContext);
+  if (!context) {
+    console.error("LayoutContext was used outside of its Provider");
+  }
+  return context;
+};
+export {
+  LayoutContext,
+  LayoutProvider,
+  useLayoutContext
+};