@box/blueprint-web 12.68.2 → 12.69.0

package/dist/lib-esm/index.css

@@ -6408,45 +6408,66 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
 .bp_page_module_portalEntry--41d33{
   display:contents;
 }
-.bp_page_header_module_pageHeader--c3842{
+.bp_page_header_module_pageHeader--2768d[data-modern=false]{
+  --page-header-min-height:var(--size-10);
+  --page-header-max-height:var(--size-16);
+  --page-header-background:var(--surface-surface);
+  --page-header-default-height:var(--size-16);
+  --page-header-default-padding-inline:var(--space-2);
+  --page-header-inline-height:var(--size-10);
+}
+
+.bp_page_header_module_pageHeader--2768d[data-modern=true]{
+  --page-header-min-height:var(--bp-size-100);
+  --page-header-max-height:var(--bp-size-160);
+  --page-header-background:var(--bp-surface-surface);
+  --page-header-default-height:var(--bp-size-160);
+  --page-header-default-padding-inline:var(--bp-space-020);
+  --page-header-inline-height:var(--bp-size-100);
+}
+.bp_page_header_module_pageHeader--2768d[data-modern=true]:not(.bp_page_header_module_inline--2768d){
+  border-bottom:var(--bp-border-01) solid var(--bp-border-header-border);
+}
+
+.bp_page_header_module_pageHeader--2768d{
   align-items:center;
-  background:var(--surface-surface);
+  background:var(--page-header-background);
   display:flex;
   flex-direction:row;
   justify-content:space-between;
-  max-height:var(--size-16);
-  min-height:var(--size-10);
+  max-height:var(--page-header-max-height);
+  min-height:var(--page-header-min-height);
   width:100%;
 }
-.bp_page_header_module_pageHeader--c3842.bp_page_header_module_sticky--c3842{
+.bp_page_header_module_pageHeader--2768d.bp_page_header_module_sticky--2768d{
   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--c3842.bp_page_header_module_default--c3842{
-  height:var(--size-16);
-  padding-inline:var(--space-2);
+.bp_page_header_module_pageHeader--2768d.bp_page_header_module_default--2768d{
+  height:var(--page-header-default-height);
+  padding-inline:var(--page-header-default-padding-inline);
 }
-.bp_page_header_module_pageHeader--c3842.bp_page_header_module_inline--c3842{
-  height:var(--size-10);
+.bp_page_header_module_pageHeader--2768d.bp_page_header_module_inline--2768d{
+  height:var(--page-header-inline-height);
 }
-.bp_page_header_module_pageHeader--c3842 .bp_page_header_module_corner--c3842{
+.bp_page_header_module_pageHeader--2768d .bp_page_header_module_corner--2768d{
   align-items:center;
   display:flex;
   flex-basis:content;
   flex-grow:0;
   flex-shrink:0;
 }
-.bp_page_header_module_pageHeader--c3842 .bp_page_header_module_startElements--c3842{
+.bp_page_header_module_pageHeader--2768d .bp_page_header_module_startElements--2768d{
   align-items:center;
   display:flex;
   flex-grow:1;
   justify-content:flex-start;
   overflow:hidden;
 }
-.bp_page_header_module_pageHeader--c3842 .bp_page_header_module_endElements--c3842{
+.bp_page_header_module_pageHeader--2768d .bp_page_header_module_endElements--2768d{
   align-items:center;
   display:flex;
   flex-direction:row;

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

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './page-header.module.js';
 
 const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -12,9 +13,13 @@ const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     sticky = true,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return /*#__PURE__*/createElement(as, {
     ...rest,
     ref: forwardedRef,
+    'data-modern': enableModernizedComponents,
     className: clsx(styles.pageHeader, className, {
       [styles.default]: variant === 'default'
     }, {

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"pageHeader":"bp_page_header_module_pageHeader--c3842","sticky":"bp_page_header_module_sticky--c3842","default":"bp_page_header_module_default--c3842","inline":"bp_page_header_module_inline--c3842","corner":"bp_page_header_module_corner--c3842","startElements":"bp_page_header_module_startElements--c3842","endElements":"bp_page_header_module_endElements--c3842"};
+var styles = {"pageHeader":"bp_page_header_module_pageHeader--2768d","inline":"bp_page_header_module_inline--2768d","sticky":"bp_page_header_module_sticky--2768d","default":"bp_page_header_module_default--2768d","corner":"bp_page_header_module_corner--2768d","startElements":"bp_page_header_module_startElements--2768d","endElements":"bp_page_header_module_endElements--2768d"};
 
 export { styles as default };

package/package.json

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