@box/blueprint-web 8.8.1 → 9.0.0

package/lib-esm/index.css

@@ -4171,6 +4171,184 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   margin-block:var(--space-2);
 }
 
+.bp_page_module_page--47219{
+  --navigation-width-collapsed:var(--space-20);
+  --navigation-width-expanded:calc(var(--space-20)*3);
+  --large-viewport-inline-space:var(--space-8);
+  display:flex;
+  flex-direction:column;
+  height:calc(100vh - var(--space-5));
+  overflow:hidden;
+  padding-block-start:var(--space-5);
+  padding-inline-start:var(--navigation-width-collapsed);
+  position:relative;
+}
+.bp_page_module_page--47219 .bp_page_module_globalHeader--47219{
+  align-items:center;
+  display:flex;
+  flex-direction:row;
+  justify-content:space-between;
+  padding-inline:var(--large-viewport-inline-space);
+  position:relative;
+}
+.bp_page_module_page--47219 .bp_page_module_globalHeader--47219 .bp_page_module_searchContainer--47219,.bp_page_module_page--47219 .bp_page_module_globalHeader--47219 .bp_page_module_sideContentContainer--47219{
+  display:flex;
+  flex:none;
+}
+.bp_page_module_page--47219 .bp_page_module_pageMain--47219{
+  display:flex;
+  flex-direction:column;
+  height:inherit;
+  overflow:hidden;
+  padding-block-start:var(--space-5);
+  padding-inline:var(--large-viewport-inline-space);
+}
+.bp_page_module_page--47219 .bp_page_module_pageMain--47219 .bp_page_module_topSection--47219{
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  gap:var(--space-5);
+  overflow:hidden;
+}
+.bp_page_module_page--47219 .bp_page_module_pageMain--47219 .bp_page_module_mainSection--47219{
+  display:flex;
+  flex-direction:row;
+  height:inherit;
+  overflow:hidden;
+}
+.bp_page_module_page--47219 .bp_page_module_pageMain--47219 .bp_page_module_mainSection--47219 .bp_page_module_content--47219{
+  flex-grow:1;
+  margin-block-start:var(--space-4);
+  overflow-y:auto;
+  padding-inline-end:var(--space-8);
+}
+.bp_page_module_page--47219 .bp_page_module_pageMain--47219 .bp_page_module_mainSection--47219 .bp_page_module_sidebar--47219{
+  flex-shrink:0;
+  margin-inline-start:var(--space-4);
+}
+.bp_page_module_page--47219 .bp_page_module_navigationPortal--47219{
+  background-color:var(--box-blue-100);
+  height:100%;
+  left:0;
+  position:absolute;
+  top:0;
+  width:var(--navigation-width);
+}
+.bp_page_module_page--47219 .bp_page_module_navigationPortal--47219 .bp_page_module_navigationContent--47219{
+  height:100%;
+}
+.bp_page_module_page--47219 .bp_page_module_navigationPortalLargeCollapsed--47219{
+  --navigation-width:var(--navigation-width-collapsed);
+}
+.bp_page_module_page--47219 .bp_page_module_navigationPortalLargeExpanded--47219{
+  --navigation-width:var(--navigation-width-expanded);
+}
+
+.bp_page_module_hide--47219{
+  visibility:hidden;
+}
+
+.bp_page_module_pageMediumOrLessViewport--47219{
+  --global-header-fixed-size-section-height:var(--space-16);
+  --global-header-fixed-size-section-collapsed:var(--space-16);
+  height:calc(100vh - var(--global-header-fixed-size-section-height));
+  padding-block-start:var(--global-header-fixed-size-section-height);
+  padding-inline-start:0;
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_globalHeader--47219{
+  height:var(--global-header-fixed-size-section-height);
+  left:0;
+  padding-inline:0;
+  padding-inline-start:var(--global-header-fixed-size-section-collapsed);
+  position:fixed;
+  top:0;
+  width:calc(100vw - var(--global-header-fixed-size-section-collapsed));
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_globalHeader--47219 .bp_page_module_search--47219{
+  width:var(--global-header-fixed-size-section-collapsed);
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_pageMain--47219{
+  overflow-y:auto;
+  padding-inline:var(--space-4);
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_pageMain--47219 .bp_page_module_mainSection--47219{
+  overflow:unset;
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_pageMain--47219 .bp_page_module_mainSection--47219 .bp_page_module_content--47219{
+  overflow-y:unset;
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_navigationPortalOverlayCollapsed--47219{
+  height:100%;
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_navigationPortalOverlayCollapsed--47219 .bp_page_module_navigationContent--47219{
+  width:var(--global-header-fixed-size-section-collapsed);
+}
+.bp_page_module_pageMediumOrLessViewport--47219 .bp_page_module_navigationPortalOverlayExpanded--47219{
+  height:100vh;
+  width:100vw;
+  z-index:1;
+}
+
+.bp_page_module_pageNavigationXXLargeCollapsed--47219{
+  --navigation-width:var(--navigation-width-collapsed);
+  padding-inline-start:var(--navigation-width-collapsed);
+}
+
+.bp_page_module_pageNavigationXXLargeExpanded--47219{
+  --navigation-width:var(--navigation-width-expanded);
+  padding-inline-start:var(--navigation-width-expanded);
+}
+
+.bp_page_module_portalEntry--47219{
+  display:contents;
+}
+
+.bp_page_header_module_pageHeader--d031a{
+  align-items:center;
+  background:var(--surface-surface);
+  display:flex;
+  flex-direction:row;
+  justify-content:space-between;
+  max-height:var(--size-16);
+  min-height:var(--size-10);
+  width:100%;
+}
+.bp_page_header_module_pageHeader--d031a.bp_page_header_module_sticky--d031a{
+  bottom:var(--blueprint-page-header-bottom, 0);
+  left:var(--blueprint-page-header-left, 0);
+  position:sticky;
+  right:var(--blueprint-page-header-right, 0);
+  top:var(--blueprint-page-header-top, 0);
+}
+.bp_page_header_module_pageHeader--d031a.bp_page_header_module_default--d031a{
+  height:var(--size-16);
+  padding-inline:var(--space-2);
+}
+.bp_page_header_module_pageHeader--d031a.bp_page_header_module_inline--d031a{
+  height:var(--size-10);
+}
+.bp_page_header_module_pageHeader--d031a .bp_page_header_module_corner--d031a{
+  align-items:center;
+  display:flex;
+  flex-basis:content;
+  flex-grow:0;
+  flex-shrink:0;
+}
+.bp_page_header_module_pageHeader--d031a .bp_page_header_module_startElements--d031a{
+  align-items:center;
+  display:flex;
+  flex-grow:1;
+  justify-content:flex-start;
+  overflow:hidden;
+}
+.bp_page_header_module_pageHeader--d031a .bp_page_header_module_endElements--d031a{
+  align-items:center;
+  display:flex;
+  flex-direction:row;
+  flex-grow:1;
+  justify-content:flex-end;
+}
+
 .bp_page_section_module_pageSectionContainer--2add7{
   display:flex;
   flex-direction:column;
@@ -4697,52 +4875,6 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   fill:currentColor;
 }
 
-.bp_page_header_module_pageHeader--d031a{
-  align-items:center;
-  background:var(--surface-surface);
-  display:flex;
-  flex-direction:row;
-  justify-content:space-between;
-  max-height:var(--size-16);
-  min-height:var(--size-10);
-  width:100%;
-}
-.bp_page_header_module_pageHeader--d031a.bp_page_header_module_sticky--d031a{
-  bottom:var(--blueprint-page-header-bottom, 0);
-  left:var(--blueprint-page-header-left, 0);
-  position:sticky;
-  right:var(--blueprint-page-header-right, 0);
-  top:var(--blueprint-page-header-top, 0);
-}
-.bp_page_header_module_pageHeader--d031a.bp_page_header_module_default--d031a{
-  height:var(--size-16);
-  padding-inline:var(--space-2);
-}
-.bp_page_header_module_pageHeader--d031a.bp_page_header_module_inline--d031a{
-  height:var(--size-10);
-}
-.bp_page_header_module_pageHeader--d031a .bp_page_header_module_corner--d031a{
-  align-items:center;
-  display:flex;
-  flex-basis:content;
-  flex-grow:0;
-  flex-shrink:0;
-}
-.bp_page_header_module_pageHeader--d031a .bp_page_header_module_startElements--d031a{
-  align-items:center;
-  display:flex;
-  flex-grow:1;
-  justify-content:flex-start;
-  overflow:hidden;
-}
-.bp_page_header_module_pageHeader--d031a .bp_page_header_module_endElements--d031a{
-  align-items:center;
-  display:flex;
-  flex-direction:row;
-  flex-grow:1;
-  justify-content:flex-end;
-}
-
 .bp_popover_module_popoverMainContent--7fad3{
   mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
   overflow-y:auto;

package/lib-esm/index.d.ts

@@ -30,6 +30,7 @@ export * from './list-item/list-item';
 export * from './loading-indicator/loading-indicator';
 export * from './modal';
 export * from './navigation-menu';
+export * from './page';
 export * from './page-section';
 export * from './password-input';
 export * from './primitives/calendar';

package/lib-esm/index.js

@@ -34,6 +34,7 @@ export { ActionCell, Cell, Column, DropIndicator, Row, Table, TableBody, TableHe
 export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
 export { Modal } from './modal/modal.js';
 export { NavigationMenu } from './navigation-menu/index.js';
+export { Page } from './page/index.js';
 export { PageSection } from './page-section/index.js';
 export { PasswordInput } from './password-input/password-input.js';
 export { Calendar } from './primitives/calendar/calendar.js';
@@ -89,5 +90,6 @@ export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
 export { useFullTextTooltip } from './utils/useFullTextTooltip.js';
 export { getUniqueId, useUniqueId } from './utils/useUniqueId.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';
+export { useMainSectionSidebar, usePageNavigation } from './page/page-context.js';
 export { useNotification } from './primitives/notification/notification-provider.js';
 export { useTabs } from './primitives/tabs/use-tabs.js';

package/lib-esm/page/index.d.ts

@@ -1,16 +1,40 @@
-export { usePage } from './page-context';
+export { useMainSectionSidebar, usePageNavigation } from './page-context';
 export * from './types';
-export declare const Page: import("react").ForwardRefExoticComponent<import("./types").PageProps & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const Page: import("react").ForwardRefExoticComponent<import("./types").PageLayoutProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * Top level navigation landmark on the left side of the page.
+     */
     Navigation: import("react").ForwardRefExoticComponent<import("./types").PageNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
     /**
-     * Top level  landmark placed at the top of the page.
-     * Contains two subcomponents for contents:
+     * Top level header landmark placed at the top of the page.
+     * It should contain two subcomponents:
      * - PageGlobalHeader.SearchContainer
      * - PageGlobalHeader.SideContentContainer
      */
-    GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+    GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").PageGlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
         SearchContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
         SideContentContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     };
-    Content: import("react").ForwardRefExoticComponent<import("./types").PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Main content area of the page.
+     * Contains two subcomponents:
+     * - Page.MainContent.ContentScrollableSection
+     * - Page.MainContent.Complementary (sidebar-like section with hide/show functionality)
+     */
+    MainSection: import("react").ForwardRefExoticComponent<import("./types").PageMainSectionProps & import("react").RefAttributes<HTMLDivElement>> & {
+        Content: import("react").ForwardRefExoticComponent<import("./types").PageMainProps & import("react").RefAttributes<HTMLDivElement>>;
+        Sidebar: import("react").ForwardRefExoticComponent<import("./types").PageMainSectionSidebarProps & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    /**
+     * Sub navigation area of the page.
+     */
+    SubNavigation: import("react").ForwardRefExoticComponent<import("./types").PageSubNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Page header with title and actions.
+     */
+    PageHeader: ((props: import("./types").PagePageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+        StartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        EndElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Corner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    };
 };

package/lib-esm/page/index.js

@@ -0,0 +1,39 @@
+import { PageGlobalHeader } from './page-global-header.js';
+import { MainSection } from './page-main-section.js';
+import { PageNavigation } from './page-navigation.js';
+import { PagePageHeader } from './page-page-header.js';
+import { PageRoot } from './page-root.js';
+import { PageSubNavigation } from './page-subnavigation.js';
+import 'react/jsx-runtime';
+import 'react';
+
+const Page = Object.assign(PageRoot, {
+  /**
+   * Top level navigation landmark on the left side of the page.
+   */
+  Navigation: PageNavigation,
+  /**
+   * Top level header landmark placed at the top of the page.
+   * It should contain two subcomponents:
+   * - PageGlobalHeader.SearchContainer
+   * - PageGlobalHeader.SideContentContainer
+   */
+  GlobalHeader: PageGlobalHeader,
+  /**
+   * Main content area of the page.
+   * Contains two subcomponents:
+   * - Page.MainContent.ContentScrollableSection
+   * - Page.MainContent.Complementary (sidebar-like section with hide/show functionality)
+   */
+  MainSection,
+  /**
+   * Sub navigation area of the page.
+   */
+  SubNavigation: PageSubNavigation,
+  /**
+   * Page header with title and actions.
+   */
+  PageHeader: PagePageHeader
+});
+
+export { Page };

package/lib-esm/page/page-context.d.ts

@@ -1,27 +1,19 @@
-import { type PropsWithChildren } from 'react';
-export interface PageContextValuesType {
+export interface PageFastContextValuesType {
     navigationExpanded: boolean;
-    setNavigationExpanded: (expanded: boolean) => void;
-    toggleNavigationExpanded: () => void;
     pageContainer: HTMLElement | null;
-    setPageContainer: (container: HTMLDivElement | null) => void;
     globalHeaderContainer: HTMLDivElement | null;
-    setGlobalHeaderContainer: (container: HTMLDivElement | null) => void;
+    mainSectionSidebarVisible: boolean;
 }
-export interface PageContextProps {
-    /**
-     * Whether navigation is initially expanded
-     * */
-    defaultNavigationExpanded: boolean;
-    /**
-     * Callback called when the navigation is toggled
-     * */
-    onToggleNavigationExpanded?: (nextState: boolean) => void;
-}
-export declare const PageContext: import("react").Context<PageContextValuesType | null>;
-export declare const PageContextProvider: ({ children, onToggleNavigationExpanded, defaultNavigationExpanded, }: PropsWithChildren<PageContextProps>) => import("react/jsx-runtime").JSX.Element;
-export declare const usePage: () => {
+export declare const PageProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, usePageStore: <SelectorOutput>(selector: (store: PageFastContextValuesType) => SelectorOutput) => [SelectorOutput, (value: Partial<PageFastContextValuesType>) => void], usePageStoreSetter: () => (value: Partial<PageFastContextValuesType>) => void;
+export declare const usePageNavigation: () => {
     navigationExpanded: boolean;
     setNavigationExpanded: (expanded: boolean) => void;
     toggleNavigationExpanded: () => void;
 };
+export declare const useMainSectionSidebar: () => {
+    mainSectionSidebarVisible: boolean;
+    setMainSectionSidebarVisible: (visible: boolean) => void;
+    toggleMainSectionSidebarVisible: () => void;
+};

package/lib-esm/page/page-context.js

@@ -0,0 +1,50 @@
+import { createFastContext } from '../utils/fast-context.js';
+
+const {
+  Provider: PageProvider,
+  useStore: usePageStore,
+  useStoreSetter: usePageStoreSetter
+} = createFastContext({
+  globalHeaderContainer: null,
+  mainSectionSidebarVisible: true,
+  navigationExpanded: true,
+  pageContainer: null
+});
+const usePageNavigation = () => {
+  const [navigationExpanded, setPageStore] = usePageStore(store => store.navigationExpanded);
+  const setNavigationExpanded = expanded => {
+    setPageStore({
+      navigationExpanded: expanded
+    });
+  };
+  const toggleNavigationExpanded = () => {
+    setPageStore({
+      navigationExpanded: !navigationExpanded
+    });
+  };
+  return {
+    navigationExpanded,
+    setNavigationExpanded,
+    toggleNavigationExpanded
+  };
+};
+const useMainSectionSidebar = () => {
+  const [mainSectionSidebarVisible, setPageStore] = usePageStore(store => store.mainSectionSidebarVisible);
+  const setMainSectionSidebarVisible = visible => {
+    setPageStore({
+      mainSectionSidebarVisible: visible
+    });
+  };
+  const toggleMainSectionSidebarVisible = () => {
+    setPageStore({
+      mainSectionSidebarVisible: !mainSectionSidebarVisible
+    });
+  };
+  return {
+    mainSectionSidebarVisible,
+    setMainSectionSidebarVisible,
+    toggleMainSectionSidebarVisible
+  };
+};
+
+export { PageProvider, useMainSectionSidebar, usePageNavigation, usePageStore, usePageStoreSetter };

package/lib-esm/page/page-global-header-search-container.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page.module.js';
+
+const SearchContainer = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, ref) => {
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.searchContainer, className),
+    role: "search"
+  });
+});
+SearchContainer.displayName = 'SearchContainer';
+
+export { SearchContainer };

package/lib-esm/page/page-global-header-side-content-container.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page.module.js';
+
+const SideContentContainer = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, ref) => {
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.sideContentContainer, className)
+  });
+});
+SideContentContainer.displayName = 'SideContentContainer';
+
+export { SideContentContainer };

package/lib-esm/page/page-global-header.d.ts

@@ -1,6 +1,6 @@
-import { type GlobalHeaderProps } from './types';
-export declare const PageGlobalHeader: import("react").ForwardRefExoticComponent<GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const GlobalHeader: import("react").ForwardRefExoticComponent<GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+import { type PageGlobalHeaderProps } from './types';
+export declare const PageGlobalHeaderRoot: import("react").ForwardRefExoticComponent<PageGlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageGlobalHeader: import("react").ForwardRefExoticComponent<PageGlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * Container for components related to global search.
      */

package/lib-esm/page/page-global-header.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useRefWithEffect as useRefWithEffectMemoized } from '../utils/useRefWithEffect.js';
+import { usePageStoreSetter } from './page-context.js';
+import { SearchContainer } from './page-global-header-search-container.js';
+import { SideContentContainer } from './page-global-header-side-content-container.js';
+import styles from './page.module.js';
+
+const PageGlobalHeaderRoot = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  const setPageStore = usePageStoreSetter();
+  const setRefs = useRefWithEffectMemoized(forwardedRef, node => {
+    setPageStore({
+      globalHeaderContainer: node
+    });
+  });
+  return jsx("div", {
+    ...rest,
+    ref: setRefs,
+    className: clsx(styles.globalHeader, className),
+    role: "banner"
+  });
+});
+PageGlobalHeaderRoot.displayName = 'GlobalHeader';
+const PageGlobalHeader = Object.assign(PageGlobalHeaderRoot, {
+  /**
+   * Container for components related to global search.
+   */
+  SearchContainer,
+  /**
+   * Container for all components excluding ones related to global search.
+   */
+  SideContentContainer
+});
+
+export { PageGlobalHeader, PageGlobalHeaderRoot };

package/lib-esm/page/page-main-section-content.d.ts

@@ -0,0 +1,2 @@
+import { type PageMainProps } from './types';
+export declare const PageMainSectionContent: import("react").ForwardRefExoticComponent<PageMainProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page/page-main-section-content.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page.module.js';
+
+const PageMainSectionContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.content, className)
+  });
+});
+
+export { PageMainSectionContent };

package/lib-esm/page/page-main-section-sidebar.d.ts

@@ -0,0 +1,2 @@
+import { type PageMainSectionSidebarProps } from './types';
+export declare const PageMainSectionSidebar: import("react").ForwardRefExoticComponent<PageMainSectionSidebarProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page/page-main-section-sidebar.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
+import { useMainSectionSidebar } from './page-context.js';
+import styles from './page.module.js';
+
+const PageMainSectionSidebar = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  const {
+    mainSectionSidebarVisible
+  } = useMainSectionSidebar();
+  const breakpoint = useBreakpoint();
+  if (!mainSectionSidebarVisible || breakpoint <= Breakpoint.Medium) {
+    return null;
+  }
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.sidebar, className),
+    role: "complementary"
+  });
+});
+
+export { PageMainSectionSidebar };

package/lib-esm/page/page-main-section.d.ts

@@ -0,0 +1,6 @@
+import { type PageMainSectionProps } from './types';
+export declare const PageMainSection: import("react").ForwardRefExoticComponent<PageMainSectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MainSection: import("react").ForwardRefExoticComponent<PageMainSectionProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Content: import("react").ForwardRefExoticComponent<import("./types").PageMainProps & import("react").RefAttributes<HTMLDivElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<import("./types").PageMainSectionSidebarProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/lib-esm/page/page-main-section.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { PageMainSectionContent } from './page-main-section-content.js';
+import { PageMainSectionSidebar } from './page-main-section-sidebar.js';
+import styles from './page.module.js';
+
+const PageMainSection = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.mainSection, className)
+  });
+});
+const MainSection = Object.assign(PageMainSection, {
+  Content: PageMainSectionContent,
+  Sidebar: PageMainSectionSidebar
+});
+
+export { MainSection, PageMainSection };

package/lib-esm/page/page-navigation.js

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import { Portal, FocusTrapRegion } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
+import { usePageStore } from './page-context.js';
+import styles from './page.module.js';
+
+const createPortalElementDiv = () => {
+  const div = document.createElement('div');
+  // Adds className with display:contents property.
+  // We want to display only contents of the portal which has position absolute
+  // but not the "anchor" which points where the portal should be placed
+  div.classList.add(styles.portalEntry);
+  return div;
+};
+const PageNavigation = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...rest
+}, forwardedRef) => {
+  const [{
+    navigationExpanded,
+    globalHeaderContainer,
+    pageContainer
+  }] = usePageStore(store => {
+    return {
+      navigationExpanded: store.navigationExpanded,
+      globalHeaderContainer: store.globalHeaderContainer,
+      pageContainer: store.pageContainer
+    };
+  });
+  const breakpoint = useBreakpoint();
+  const largeBreakpointActive = breakpoint >= Breakpoint.Large;
+  const lessOrEqualMediumBreakpointActive = breakpoint <= Breakpoint.Medium;
+  const isFullscreenNavigation = lessOrEqualMediumBreakpointActive && navigationExpanded;
+  const portalElement = useRef(null);
+  const getPortalElement = useCallback(() => {
+    if (!pageContainer || !globalHeaderContainer) {
+      return null;
+    }
+    if (!portalElement.current) {
+      portalElement.current = createPortalElementDiv();
+    }
+    let portalRoot;
+    if (lessOrEqualMediumBreakpointActive) {
+      portalRoot = globalHeaderContainer;
+      if (pageContainer?.contains(portalElement.current)) {
+        pageContainer.removeChild(portalElement.current);
+      }
+    } else {
+      portalRoot = pageContainer;
+      if (globalHeaderContainer?.contains(portalElement.current)) {
+        globalHeaderContainer.removeChild(portalElement.current);
+      }
+    }
+    portalRoot.appendChild(portalElement.current);
+    return portalElement.current;
+  }, [pageContainer, globalHeaderContainer, lessOrEqualMediumBreakpointActive]);
+  return jsx(Portal, {
+    ...rest,
+    className: clsx(styles.navigationPortal, {
+      [styles.navigationPortalLargeExpanded]: largeBreakpointActive && navigationExpanded,
+      [styles.navigationPortalLargeCollapsed]: largeBreakpointActive && !navigationExpanded,
+      [styles.navigationPortalOverlayCollapsed]: lessOrEqualMediumBreakpointActive && !navigationExpanded,
+      [styles.navigationPortalOverlayExpanded]: lessOrEqualMediumBreakpointActive && navigationExpanded
+    }),
+    "data-state": navigationExpanded ? 'expanded' : 'collapsed',
+    portalElement: getPortalElement,
+    preserveTabOrder: true,
+    role: "navigation",
+    children: jsx(FocusTrapRegion, {
+      ref: forwardedRef,
+      className: clsx(styles.navigationContent, className),
+      enabled: isFullscreenNavigation,
+      children: typeof children === 'function' ? children({
+        expanded: Boolean(navigationExpanded)
+      }) : children
+    })
+  });
+});
+PageNavigation.displayName = 'Navigation';
+
+export { PageNavigation };

package/lib-esm/page/page-page-header.d.ts

@@ -0,0 +1,6 @@
+import { type PagePageHeaderProps } from './types';
+export declare const PagePageHeader: ((props: PagePageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    StartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    EndElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Corner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/lib-esm/page/page-page-header.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { PageHeader } from '../primitives/page-header/page-header.js';
+
+const PagePageHeaderRoot = props => {
+  return jsx(PageHeader.Root, {
+    ...props,
+    as: "div",
+    sticky: false,
+    variant: "inline"
+  });
+};
+const PagePageHeader = Object.assign(PagePageHeaderRoot, {
+  StartElements: PageHeader.StartElements,
+  EndElements: PageHeader.EndElements,
+  Corner: PageHeader.Corner
+});
+
+export { PagePageHeader };

package/lib-esm/page/page-root.d.ts

@@ -1,2 +1,2 @@
-import { type PageProps } from './types';
-export declare const PageRoot: import("react").ForwardRefExoticComponent<PageProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type PageLayoutProps } from './types';
+export declare const PageRoot: import("react").ForwardRefExoticComponent<PageLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page/page-root.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useEffect, Children, isValidElement } from 'react';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
+import { useRefWithEffect as useRefWithEffectMemoized } from '../utils/useRefWithEffect.js';
+import { PageProvider, usePageStore } from './page-context.js';
+import { PageGlobalHeader } from './page-global-header.js';
+import { MainSection } from './page-main-section.js';
+import { PageNavigation } from './page-navigation.js';
+import { PagePageHeader } from './page-page-header.js';
+import { PageSubNavigation } from './page-subnavigation.js';
+import styles from './page.module.js';
+
+const PageRoot = /*#__PURE__*/forwardRef(({
+  onToggleNavigationExpanded,
+  defaultNavigationExpanded,
+  children,
+  ...rest
+}, forwardedRef) => {
+  return jsx(PageProvider, {
+    children: jsx(PageLayout, {
+      ...rest,
+      ref: forwardedRef,
+      defaultNavigationExpanded: defaultNavigationExpanded,
+      onToggleNavigationExpanded: onToggleNavigationExpanded,
+      children: children
+    })
+  });
+});
+PageRoot.displayName = 'PageRoot';
+const PageLayout = /*#__PURE__*/forwardRef(({
+  defaultNavigationExpanded,
+  className,
+  children,
+  ...rest
+}, forwardedRef) => {
+  const [navigationExpanded, setPageStoreData] = usePageStore(store => store.navigationExpanded);
+  const breakpoint = useBreakpoint();
+  const xxLargeBreakpointActive = breakpoint === Breakpoint.XXLarge;
+  const lessOrEqualMediumBreakpointActive = breakpoint <= Breakpoint.Medium;
+  const isFullscreenNavigation = lessOrEqualMediumBreakpointActive && navigationExpanded;
+  const setRefs = useRefWithEffectMemoized(forwardedRef, node => setPageStoreData({
+    pageContainer: node
+  }));
+  // this effect has to fire once to set initial state of the navigationExpanded
+  useEffect(() => {
+    setPageStoreData({
+      navigationExpanded: defaultNavigationExpanded ?? xxLargeBreakpointActive
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const Slots = getChildrenForLandmarks(children);
+  return jsxs("div", {
+    ...rest,
+    ref: setRefs,
+    className: clsx(styles.page, {
+      [styles.pageNavigationXXLargeExpanded]: xxLargeBreakpointActive && navigationExpanded,
+      [styles.pageNavigationXXLargeCollapsed]: xxLargeBreakpointActive && !navigationExpanded,
+      [styles.pageMediumOrLessViewport]: breakpoint <= Breakpoint.Medium
+    }, className),
+    children: [Slots.Navigation, Slots.GlobalHeader, jsxs("div", {
+      // hide fixed focus trap region problem and overlaying content on the navigation
+      className: clsx(styles.pageMain, {
+        [styles.hide]: isFullscreenNavigation
+      }, className),
+      role: "main",
+      children: [jsx("div", {
+        className: clsx(styles.topSection),
+        children: Slots.TopSection
+      }), Slots.MainSection]
+    })]
+  });
+});
+PageLayout.displayName = 'PageLayout';
+const getChildrenForLandmarks = children => {
+  return Children.toArray(children).reduce((acc, child) => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return acc;
+    }
+    if (child.type === PageNavigation) {
+      acc.Navigation = child;
+    } else if (child.type === PageGlobalHeader) {
+      acc.GlobalHeader = child;
+    } else if (child.type === MainSection) {
+      acc.MainSection = child;
+    } else if (child.type === PagePageHeader) {
+      acc.TopSection.unshift(child);
+    } else if (child.type === PageSubNavigation) {
+      acc.TopSection.push(child);
+    }
+    return acc;
+  }, {
+    Navigation: null,
+    MainSection: null,
+    GlobalHeader: null,
+    TopSection: []
+  });
+};
+
+export { PageRoot };

package/lib-esm/page/page-subnavigation.d.ts

@@ -0,0 +1,2 @@
+import { type PageSubNavigationProps } from './types';
+export declare const PageSubNavigation: import("react").ForwardRefExoticComponent<PageSubNavigationProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page/page-subnavigation.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const PageSubNavigation = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: className
+  });
+});
+
+export { PageSubNavigation };

package/lib-esm/page/page.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"page":"bp_page_module_page--47219","globalHeader":"bp_page_module_globalHeader--47219","sideContentContainer":"bp_page_module_sideContentContainer--47219","searchContainer":"bp_page_module_searchContainer--47219","pageMain":"bp_page_module_pageMain--47219","topSection":"bp_page_module_topSection--47219","mainSection":"bp_page_module_mainSection--47219","content":"bp_page_module_content--47219","sidebar":"bp_page_module_sidebar--47219","navigationPortal":"bp_page_module_navigationPortal--47219","navigationContent":"bp_page_module_navigationContent--47219","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--47219","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--47219","hide":"bp_page_module_hide--47219","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--47219","search":"bp_page_module_search--47219","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--47219","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--47219","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--47219","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--47219","portalEntry":"bp_page_module_portalEntry--47219"};
+
+export { styles as default };

package/lib-esm/page/types.d.ts

@@ -1,22 +1,32 @@
 import { type ReactNode } from 'react';
-import { type PageContextProps } from './page-context';
-export type PageLayoutProps = React.HTMLAttributes<HTMLDivElement>;
-export type GlobalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-export type PageContentProps = React.HTMLAttributes<HTMLDivElement>;
-export interface PageProps extends PageLayoutProps, Pick<PageContextProps, 'onToggleNavigationExpanded'> {
+import { type PageHeaderProps } from '../primitives/page-header';
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether the navigation is initially expanded.
-     *
-     * If not provided:
-     * - in screens > 1220px the navigation will be initially expanded,
-     * - otherwise it will be initially collapsed,
-     * */
+     * Whether navigation is initially expanded.
+     * For viewport greater than 1220px it is expanded by default.
+     */
     defaultNavigationExpanded?: boolean;
+    /**
+     * Whether main content sidebar is initially expanded.
+     * @default true
+     */
+    defaultMainContentSidebarVisible?: boolean;
+    /**
+     * Callback called when the navigation is toggled
+     */
+    onToggleNavigationExpanded?: (nextState: boolean) => void;
 }
+export type PageGlobalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type PagePageHeaderProps = Omit<PageHeaderProps, 'variant' | 'sticky' | 'as'>;
+export type PageMainProps = React.HTMLAttributes<HTMLDivElement>;
+export type PageMainSectionProps = React.HTMLAttributes<HTMLDivElement>;
+export type PageMainSectionSidebarProps = React.HTMLAttributes<HTMLDivElement>;
+export type PageSubNavigationProps = React.HTMLAttributes<HTMLDivElement>;
+export type PageProps = PageLayoutProps;
 export interface PageNavigationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
      * The children to render within the navigation
-     * */
+     */
     children: ReactNode | (({ expanded }: {
         expanded: boolean;
     }) => ReactNode);

package/lib-esm/primitives/page-header/page-header.d.ts

@@ -1,10 +1,10 @@
-import { type PageHeaderProps } from './types';
-export declare const PageHeaderRoot: import("react").ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+import { type HeaderElementTypes, type PageHeaderProps } from './types';
+export declare const PageHeaderRoot: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HeaderElementTypes>>;
 export declare const PageHeaderCorner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const PageHeadeStartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageHeaderStartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PageHeaderEndElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PageHeader: {
-    Root: import("react").ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Root: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HeaderElementTypes>>;
     StartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     EndElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Corner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/page-header/page-header.js

@@ -1,17 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, createElement } from 'react';
 import styles from './page-header.module.js';
 
 const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
+    as = 'header',
     className,
     children,
     variant,
     sticky = true,
     ...rest
   } = props;
-  return jsx("header", {
+  return /*#__PURE__*/createElement(as, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.pageHeader, className, {
@@ -20,9 +21,8 @@ const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.inline]: variant === 'inline'
     }, {
       [styles.sticky]: sticky
-    }),
-    children: children
-  });
+    })
+  }, children);
 });
 const PageHeaderCorner = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -37,7 +37,7 @@ const PageHeaderCorner = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children: children
   });
 });
-const PageHeadeStartElements = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+const PageHeaderStartElements = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
     children,
@@ -65,9 +65,9 @@ const PageHeaderEndElements = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 });
 const PageHeader = {
   Root: PageHeaderRoot,
-  StartElements: PageHeadeStartElements,
+  StartElements: PageHeaderStartElements,
   EndElements: PageHeaderEndElements,
   Corner: PageHeaderCorner
 };
 
-export { PageHeadeStartElements, PageHeader, PageHeaderCorner, PageHeaderEndElements, PageHeaderRoot };
+export { PageHeader, PageHeaderCorner, PageHeaderEndElements, PageHeaderRoot, PageHeaderStartElements };

package/lib-esm/primitives/page-header/types.d.ts

@@ -1,8 +1,17 @@
-import type React from 'react';
-export interface PageHeaderProps extends React.ComponentPropsWithRef<'header'> {
+import { type HTMLAttributes } from 'react';
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    as?: 'header';
+}
+interface DivProps extends HTMLAttributes<HTMLDivElement> {
+    as: 'div';
+}
+export type HeaderElementTypes = HeaderProps | DivProps;
+export type PageHeaderProps = (DivProps | HeaderProps) & {
     variant: 'default' | 'inline';
-    /** When true the header will have `position: sticky`
+    /**
+     * When true the header will have `position: sticky`
      * @default true
      */
     sticky?: boolean;
-}
+};
+export {};

package/lib-esm/utils/fast-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function createFastContext<Store>(initialState: Store): {
+    Provider: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useStore: <SelectorOutput>(selector: (store: Store) => SelectorOutput) => [SelectorOutput, (value: Partial<Store>) => void];
+    useStoreSetter: () => (value: Partial<Store>) => void;
+};

package/lib-esm/utils/fast-context.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useState, useEffect, useRef, useCallback, createContext } from 'react';
+
+function createFastContext(initialState) {
+  function useStoreData() {
+    const store = useRef(initialState);
+    const get = useCallback(() => store.current, []);
+    const subscribers = useRef(new Set());
+    const set = useCallback(value => {
+      store.current = {
+        ...store.current,
+        ...value
+      };
+      subscribers.current.forEach(callback => callback());
+    }, []);
+    const subscribe = useCallback(callback => {
+      subscribers.current.add(callback);
+      return () => subscribers.current.delete(callback);
+    }, []);
+    return {
+      get,
+      set,
+      subscribe
+    };
+  }
+  const StoreContext = /*#__PURE__*/createContext(null);
+  function Provider({
+    children
+  }) {
+    return jsx(StoreContext.Provider, {
+      value: useStoreData(),
+      children: children
+    });
+  }
+  function useStore(selector) {
+    const store = useContext(StoreContext);
+    if (!store) {
+      throw new Error('Store not found');
+    }
+    const [state, setState] = useState(() => selector(store.get() || initialState));
+    useEffect(() => {
+      return store.subscribe(() => {
+        setState(selector(store.get()));
+      });
+    }, [selector, store]);
+    // This is an alternative implementation of above code using useSyncExternalStore - requires react 18
+    // const state = useSyncExternalStore(
+    //     store.subscribe,
+    //     () => selector(store.get()),
+    //     () => selector(initialState),
+    // );
+    return [state, store.set];
+  }
+  function useStoreSetter() {
+    const store = useContext(StoreContext);
+    if (!store) {
+      throw new Error('Store not found');
+    }
+    return store.set;
+  }
+  return {
+    Provider,
+    useStore,
+    useStoreSetter
+  };
+}
+
+export { createFastContext };

package/lib-esm/utils/useRefWithEffect.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardedRef, type RefCallback } from 'react';
+/**
+ * Returns memoized function that sets ref with side effect.
+ */
+declare function useRefWithEffectMemoized<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;
+export { useRefWithEffectMemoized as useRefWithEffect };

package/lib-esm/utils/useRefWithEffect.js

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+/**
+ * Returns function that sets ref and invokes provided ref callback function.
+ */
+function createSetRefWithEffect(forwardedRef, callback) {
+  return node => {
+    if (callback) {
+      callback(node);
+    }
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+}
+/**
+ * Returns memoized function that sets ref with side effect.
+ */
+function useRefWithEffectMemoized(forwardedRef, callback) {
+  return useMemo(() => createSetRefWithEffect(forwardedRef, callback), [forwardedRef, callback]);
+}
+
+export { useRefWithEffectMemoized as useRefWithEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "8.8.1",
+    "version": "9.0.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -22,8 +22,8 @@
         "**/*.scss"
     ],
     "dependencies": {
-        "@ariakit/react": "0.4.5",
-        "@ariakit/react-core": "0.4.5",
+        "@ariakit/react": "0.4.14",
+        "@ariakit/react-core": "0.4.14",
         "@box/blueprint-web-assets": "^4.30.0",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "84b0da3b7df701ce396ed038ab4297e2da27d64f",
+    "gitHead": "8371b326ea09e2a07955fb57e63e15e9b14abc4c",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {

package/lib-esm/page/page-content.d.ts

@@ -1,2 +0,0 @@
-import { type PageContentProps } from './types';
-export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/utils/createSetRefWithCallback.d.ts

@@ -1,10 +0,0 @@
-import { type ForwardedRef, type RefCallback } from 'react';
-/**
- * Returns function that sets ref and invokes provided ref callback function.
- */
-export declare function createSetRefWithCallback<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;
-/**
- * Memoized version of createSetRefWithCallback.
- * Returns function that sets ref and invokes provided ref callback function.
- */
-export declare function useCreateSetRefWithCallbackMemo<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;