@box/blueprint-web 12.73.0 → 12.74.0

package/dist/lib-esm/index.css

@@ -6453,138 +6453,164 @@ table.bp_inline_table_module_inlineTable--f6f94[data-modern=true] td:last-child,
 .bp_navigation_menu_module_navigationMenuSeparator--a2f10{
   margin-block:var(--space-2);
 }
-.bp_page_module_page--41d33{
-  --navigation-width-collapsed:var(--space-20);
-  --navigation-width-expanded:calc(var(--space-20)*3);
-  --large-viewport-inline-space:var(--space-8);
+.bp_page_module_page--96006[data-modern=false]{
+  --page-navigation-width-collapsed:var(--space-20);
+  --page-navigation-width-expanded:calc(var(--space-20)*3);
+  --page-viewport-inline-space:var(--space-8);
+  --page-height:calc(100vh - var(--space-5));
+  --page-padding-block-start:var(--space-5);
+  --page-top-section-gap:var(--space-5);
+  --page-content-margin-block-start:var(--space-4);
+  --page-sidebar-margin-inline-start:var(--space-4);
+  --page-padding-with-sidebar-inline-end:var(--space-8);
+  --page-navigation-portal-background-color:var(--box-blue-100);
+  --page-medium-global-header-fixed-size-section-height:var(--space-16);
+  --page-medium-global-header-fixed-size-section-collapsed:var(--space-16);
+  --page-medium-page-main-padding-inline:var(--space-4);
+}
+
+.bp_page_module_page--96006[data-modern=true]{
+  --page-navigation-width-collapsed:var(--bp-space-200);
+  --page-navigation-width-expanded:calc(var(--bp-space-200)*3);
+  --page-viewport-inline-space:var(--bp-space-080);
+  --page-height:calc(100vh - var(--bp-space-050));
+  --page-padding-block-start:var(--bp-space-050);
+  --page-top-section-gap:var(--bp-space-050);
+  --page-content-margin-block-start:var(--bp-space-040);
+  --page-sidebar-margin-inline-start:var(--bp-space-040);
+  --page-navigation-portal-background-color:var(--bp-box-blue-100);
+  --page-medium-global-header-fixed-size-section-height:var(--bp-space-160);
+  --page-medium-global-header-fixed-size-section-collapsed:var(--bp-space-160);
+  --page-medium-page-main-padding-inline:var(--bp-space-040);
+}
+
+.bp_page_module_page--96006{
   display:flex;
   flex-direction:column;
-  height:calc(100vh - var(--space-5));
+  height:var(--page-height);
   overflow:hidden;
-  padding-block-start:var(--space-5);
-  padding-inline-start:var(--navigation-width-collapsed);
+  padding-block-start:var(--page-padding-block-start);
+  padding-inline-start:var(--page-navigation-width-collapsed);
   position:relative;
 }
-.bp_page_module_page--41d33 .bp_page_module_globalHeader--41d33{
+.bp_page_module_page--96006 .bp_page_module_globalHeader--96006{
   align-items:center;
   display:flex;
   flex-direction:row;
   justify-content:space-between;
-  padding-inline:var(--large-viewport-inline-space);
+  padding-inline:var(--page-viewport-inline-space);
   position:relative;
 }
-.bp_page_module_page--41d33 .bp_page_module_globalHeader--41d33 .bp_page_module_searchContainer--41d33,.bp_page_module_page--41d33 .bp_page_module_globalHeader--41d33 .bp_page_module_sideContentContainer--41d33{
+.bp_page_module_page--96006 .bp_page_module_globalHeader--96006 .bp_page_module_searchContainer--96006,.bp_page_module_page--96006 .bp_page_module_globalHeader--96006 .bp_page_module_sideContentContainer--96006{
   display:flex;
   flex:none;
 }
-.bp_page_module_page--41d33 .bp_page_module_pageMain--41d33{
+.bp_page_module_page--96006 .bp_page_module_pageMain--96006{
   display:flex;
   flex-direction:column;
   height:inherit;
   overflow:hidden;
-  padding-block-start:var(--space-5);
-  padding-inline:var(--large-viewport-inline-space);
+  padding-block-start:var(--page-padding-block-start);
+  padding-inline:var(--page-viewport-inline-space);
 }
-.bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_topSection--41d33{
+.bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_topSection--96006{
   display:flex;
   flex-direction:column;
   flex-shrink:0;
-  gap:var(--space-5);
+  gap:var(--page-top-section-gap);
   overflow:hidden;
 }
-.bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33{
+.bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006{
   display:flex;
   flex-direction:row;
   height:inherit;
   overflow:hidden;
 }
-.bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_content--41d33{
+.bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_content--96006{
   flex-grow:1;
-  margin-block-start:var(--space-4);
+  margin-block-start:var(--page-content-margin-block-start);
   overflow-y:auto;
 }
-.bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_paddingWithSidebarVisible--41d33{
-  padding-inline-end:var(--space-8);
+.bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_paddingWithSidebarVisible--96006{
+  padding-inline-end:var(--page-padding-with-sidebar-inline-end);
 }
-.bp_page_module_page--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_sidebar--41d33{
+.bp_page_module_page--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_sidebar--96006{
   flex-shrink:0;
-  margin-inline-start:var(--space-4);
+  margin-inline-start:var(--page-sidebar-margin-inline-start);
 }
-.bp_page_module_page--41d33 .bp_page_module_navigationPortal--41d33{
-  background-color:var(--box-blue-100);
+.bp_page_module_page--96006 .bp_page_module_navigationPortal--96006{
+  background-color:var(--page-navigation-portal-background-color);
   height:100%;
   left:0;
   position:absolute;
   top:0;
   width:var(--navigation-width);
 }
-.bp_page_module_page--41d33 .bp_page_module_navigationPortal--41d33 .bp_page_module_navigationContent--41d33{
+.bp_page_module_page--96006 .bp_page_module_navigationPortal--96006 .bp_page_module_navigationContent--96006{
   height:100%;
 }
-.bp_page_module_page--41d33 .bp_page_module_navigationPortalLargeCollapsed--41d33{
-  --navigation-width:var(--navigation-width-collapsed);
+.bp_page_module_page--96006 .bp_page_module_navigationPortalLargeCollapsed--96006{
+  --navigation-width:var(--page-navigation-width-collapsed);
 }
-.bp_page_module_page--41d33 .bp_page_module_navigationPortalLargeExpanded--41d33{
-  --navigation-width:var(--navigation-width-expanded);
+.bp_page_module_page--96006 .bp_page_module_navigationPortalLargeExpanded--96006{
+  --navigation-width:var(--page-navigation-width-expanded);
 }
 
-.bp_page_module_hide--41d33{
+.bp_page_module_hide--96006{
   visibility:hidden;
 }
 
-.bp_page_module_pageMediumOrLessViewport--41d33{
-  --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);
+.bp_page_module_pageMediumOrLessViewport--96006{
+  height:calc(100vh - var(--page-medium-global-header-fixed-size-section-height));
+  padding-block-start:var(--page-medium-global-header-fixed-size-section-height);
   padding-inline-start:0;
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_globalHeader--41d33{
-  height:var(--global-header-fixed-size-section-height);
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_globalHeader--96006{
+  height:var(--page-medium-global-header-fixed-size-section-height);
   left:0;
   padding-inline:0;
-  padding-inline-start:var(--global-header-fixed-size-section-collapsed);
+  padding-inline-start:var(--page-medium-global-header-fixed-size-section-collapsed);
   position:fixed;
   top:0;
-  width:calc(100vw - var(--global-header-fixed-size-section-collapsed));
+  width:calc(100vw - var(--page-medium-global-header-fixed-size-section-collapsed));
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_globalHeader--41d33 .bp_page_module_search--41d33{
-  width:var(--global-header-fixed-size-section-collapsed);
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_globalHeader--96006 .bp_page_module_search--96006{
+  width:var(--page-medium-global-header-fixed-size-section-collapsed);
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_pageMain--41d33{
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_pageMain--96006{
   overflow-y:auto;
-  padding-inline:var(--space-4);
+  padding-inline:var(--page-medium-page-main-padding-inline);
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33{
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006{
   overflow:unset;
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_pageMain--41d33 .bp_page_module_mainSection--41d33 .bp_page_module_content--41d33{
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_pageMain--96006 .bp_page_module_mainSection--96006 .bp_page_module_content--96006{
   overflow-y:unset;
   padding-inline-end:unset;
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_navigationPortalOverlayCollapsed--41d33{
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_navigationPortalOverlayCollapsed--96006{
   height:100%;
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_navigationPortalOverlayCollapsed--41d33 .bp_page_module_navigationContent--41d33{
-  width:var(--global-header-fixed-size-section-collapsed);
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_navigationPortalOverlayCollapsed--96006 .bp_page_module_navigationContent--96006{
+  width:var(--page-medium-global-header-fixed-size-section-collapsed);
 }
-.bp_page_module_pageMediumOrLessViewport--41d33 .bp_page_module_navigationPortalOverlayExpanded--41d33{
+.bp_page_module_pageMediumOrLessViewport--96006 .bp_page_module_navigationPortalOverlayExpanded--96006{
   height:100vh;
   width:100vw;
   z-index:1;
 }
 
-.bp_page_module_pageNavigationXXLargeCollapsed--41d33{
-  --navigation-width:var(--navigation-width-collapsed);
-  padding-inline-start:var(--navigation-width-collapsed);
+.bp_page_module_pageNavigationXXLargeCollapsed--96006{
+  --navigation-width:var(--page-navigation-width-collapsed);
+  padding-inline-start:var(--page-navigation-width-collapsed);
 }
 
-.bp_page_module_pageNavigationXXLargeExpanded--41d33{
-  --navigation-width:var(--navigation-width-expanded);
-  padding-inline-start:var(--navigation-width-expanded);
+.bp_page_module_pageNavigationXXLargeExpanded--96006{
+  --navigation-width:var(--page-navigation-width-expanded);
+  padding-inline-start:var(--page-navigation-width-expanded);
 }
 
-.bp_page_module_portalEntry--41d33{
+.bp_page_module_portalEntry--96006{
   display:contents;
 }
 .bp_page_header_module_pageHeader--2768d[data-modern=false]{

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useEffect, Children, isValidElement } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { useRefWithEffect as useRefWithEffectMemoized } from '../utils/useRefWithEffect.js';
 import { PageProvider, usePageStore } from './page-context.js';
@@ -50,6 +51,9 @@ const PageLayout = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const Slots = getChildrenForLandmarks(children);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     ...rest,
     ref: setRefs,
@@ -58,6 +62,7 @@ const PageLayout = /*#__PURE__*/forwardRef(({
       [styles.pageNavigationXXLargeCollapsed]: xxLargeBreakpointActive && !navigationExpanded,
       [styles.pageMediumOrLessViewport]: breakpoint <= Breakpoint.Medium
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [Slots.Navigation, Slots.GlobalHeader, jsxs("div", {
       // hide fixed focus trap region problem and overlaying content on the navigation
       className: clsx(styles.pageMain, {

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.73.0",
+    "version": "12.74.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {