@box/blueprint-web 12.68.1 → 12.69.0

package/dist/lib-esm/accordion/accordion.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PointerChevron, Alert, ClockBadge } from '@box/blueprint-web-assets/icons/Fill';
-import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, SurfaceBadgeErrorSurface, Orange100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, SurfaceBadgeErrorSurface, Orange100, bpSurfaceBadgeSurfaceModified } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
 import { createElement } from 'react';
@@ -21,6 +21,9 @@ const accordionIconVariantToIconProps = {
     icon: ClockBadge,
     iconColor: GrayWhite,
     backgroundColor: Orange100
+  },
+  'status-modified': {
+    backgroundColor: bpSurfaceBadgeSurfaceModified
   }
 };
 /**
@@ -98,11 +101,12 @@ const Item = props => {
     errorIconAriaLabel,
     ...itemRest
   } = props;
+  const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
   const {
     backgroundColor,
     iconColor,
     icon
-  } = iconVariant ? accordionIconVariantToIconProps[iconVariant] : {};
+  } = iconProps ?? {};
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
@@ -122,16 +126,18 @@ const Item = props => {
               className: styles.accordionStatus,
               color: error ? statusColors.error : statusColors.default,
               text: `${status}`
-            }), icon && jsx("div", {
+            }), isDefined(backgroundColor) && jsx("div", {
+              "aria-label": iconAriaLabel,
               className: styles.accordionIconWrapper,
+              role: "img",
               style: {
                 backgroundColor
               },
-              children: /*#__PURE__*/createElement(icon, {
+              children: icon && /*#__PURE__*/createElement(icon, {
                 color: iconColor,
                 role: 'img',
-                height: '0.625rem',
-                width: '0.625rem',
+                height: '0.75rem',
+                width: '0.75rem',
                 'aria-label': iconAriaLabel
               })
             }), jsx(PointerChevron, {

package/dist/lib-esm/accordion/types.d.ts

@@ -20,7 +20,7 @@ interface IconProps {
     /**
      * Variant of icon displayed next to the title
      * */
-    iconVariant: 'alert-error' | 'status-pending';
+    iconVariant: 'alert-error' | 'status-pending' | 'status-modified';
     /**
      * ARIA label of icon displayed next to the title
      * */

package/dist/lib-esm/combobox-group/combobox-group-combobox.js

@@ -46,7 +46,7 @@ const ComboboxGroupCombobox = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
     "aria-describedby": comboboxHasError ? inlineErrorId : undefined,
     "aria-invalid": comboboxHasError,
-    className: clsx(borderStyles, {
+    className: clsx(borderStyles, styles.comboboxContainer, {
       [styles.errorSelect]: selectHasError
     }, {
       [styles.errorCombobox]: comboboxHasError

package/dist/lib-esm/combobox-group/combobox-group.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_group_module_container--20be3","trailing":"bp_combobox_group_module_trailing--20be3","leading":"bp_combobox_group_module_leading--20be3","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--20be3","disabled":"bp_combobox_group_module_disabled--20be3","label":"bp_combobox_group_module_label--20be3","errorCombobox":"bp_combobox_group_module_errorCombobox--20be3","errorSelect":"bp_combobox_group_module_errorSelect--20be3","selectHasFocus":"bp_combobox_group_module_selectHasFocus--20be3","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--20be3"};
+var styles = {"container":"bp_combobox_group_module_container--9375b","trailing":"bp_combobox_group_module_trailing--9375b","leading":"bp_combobox_group_module_leading--9375b","comboboxContainer":"bp_combobox_group_module_comboboxContainer--9375b","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--9375b","disabled":"bp_combobox_group_module_disabled--9375b","label":"bp_combobox_group_module_label--9375b","errorCombobox":"bp_combobox_group_module_errorCombobox--9375b","errorSelect":"bp_combobox_group_module_errorSelect--9375b","selectHasFocus":"bp_combobox_group_module_selectHasFocus--9375b","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--9375b"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -2874,59 +2874,62 @@
           user-select:none;
 }
 
-.bp_combobox_group_module_container--20be3[data-modern=false]{
+.bp_combobox_group_module_container--9375b[data-modern=false]{
   --combobox-group-container-gap:var(--space-2);
-  --combobox-group-container-max-width:358px;
   --combobox-group-disabled-opacity:60%;
   --combobox-group-label-color:var(--text-text-on-light);
 }
-.bp_combobox_group_module_container--20be3[data-modern=false] .bp_combobox_group_module_trailing--20be3{
+.bp_combobox_group_module_container--9375b[data-modern=false] .bp_combobox_group_module_trailing--9375b{
   --blueprint-combobox-input-radius:0 var(--radius-2) var(--radius-2) 0;
   --blueprint-select-trigger-radius:0 var(--radius-2) var(--radius-2) 0;
   --blueprint-combobox-border-left-width:none;
   --blueprint-select-border-left-width:none;
 }
-.bp_combobox_group_module_container--20be3[data-modern=false] .bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_container--9375b[data-modern=false] .bp_combobox_group_module_leading--9375b{
   --blueprint-combobox-input-radius:var(--radius-2) 0 0 var(--radius-2);
   --blueprint-select-trigger-radius:var(--radius-2) 0 0 var(--radius-2);
 }
 
-.bp_combobox_group_module_container--20be3[data-modern=true]{
+.bp_combobox_group_module_container--9375b[data-modern=true]{
   --combobox-group-container-gap:var(--bp-space-020);
-  --combobox-group-container-max-width:358px;
   --combobox-group-disabled-opacity:60%;
   --combobox-group-label-color:var(--bp-text-text-on-light);
 }
-.bp_combobox_group_module_container--20be3[data-modern=true] .bp_combobox_group_module_trailing--20be3{
+.bp_combobox_group_module_container--9375b[data-modern=true] .bp_combobox_group_module_trailing--9375b{
   --blueprint-combobox-input-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
   --blueprint-select-trigger-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
   --blueprint-combobox-border-left-width:none;
   --blueprint-select-border-left-width:none;
 }
-.bp_combobox_group_module_container--20be3[data-modern=true] .bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_container--9375b[data-modern=true] .bp_combobox_group_module_leading--9375b{
   --blueprint-combobox-input-radius:var(--bp-radius-06) 0 0 var(--bp-radius-06);
   --blueprint-select-trigger-radius:var(--bp-radius-06) 0 0 var(--bp-radius-06);
 }
 
-.bp_combobox_group_module_container--20be3{
+.bp_combobox_group_module_container--9375b{
   align-items:flex-start;
   display:flex;
   flex-direction:column;
   gap:var(--combobox-group-container-gap);
-  max-width:var(--combobox-group-container-max-width);
+  width:100%;
+}
+
+.bp_combobox_group_module_comboboxContainer--9375b{
+  flex:1;
 }
 
-.bp_combobox_group_module_comboboxGroupcontainer--20be3{
+.bp_combobox_group_module_comboboxGroupcontainer--9375b{
   display:flex;
   flex-direction:row;
+  width:100%;
 }
 
-.bp_combobox_group_module_disabled--20be3{
+.bp_combobox_group_module_disabled--9375b{
   opacity:var(--combobox-group-disabled-opacity);
   pointer-events:none;
 }
 
-.bp_combobox_group_module_label--20be3{
+.bp_combobox_group_module_label--9375b{
   color:var(--combobox-group-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
@@ -2940,43 +2943,43 @@
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_combobox_group_module_errorCombobox--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_errorCombobox--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-select-border-right-width:none;
 }
 
-.bp_combobox_group_module_errorSelect--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_errorSelect--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-combobox-border-right-width:none;
 }
 
-.bp_combobox_group_module_errorCombobox--20be3.bp_combobox_group_module_errorSelect--20be3.bp_combobox_group_module_trailing--20be3{
+.bp_combobox_group_module_errorCombobox--9375b.bp_combobox_group_module_errorSelect--9375b.bp_combobox_group_module_trailing--9375b{
   --blueprint-select-border-error-left-width:none;
 }
 
-.bp_combobox_group_module_errorCombobox--20be3.bp_combobox_group_module_errorSelect--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_errorCombobox--9375b.bp_combobox_group_module_errorSelect--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-select-border-error-right-width:none;
 }
 
-.bp_combobox_group_module_selectHasFocus--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_selectHasFocus--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-combobox-border-right-width:none;
 }
 
-.bp_combobox_group_module_selectHasFocus--20be3.bp_combobox_group_module_errorCombobox--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_selectHasFocus--9375b.bp_combobox_group_module_errorCombobox--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-combobox-border-error-right-width:none;
 }
 
-.bp_combobox_group_module_selectHasFocus--20be3.bp_combobox_group_module_errorCombobox--20be3.bp_combobox_group_module_trailing--20be3{
+.bp_combobox_group_module_selectHasFocus--9375b.bp_combobox_group_module_errorCombobox--9375b.bp_combobox_group_module_trailing--9375b{
   --blueprint-combobox-border-error-left-width:none;
 }
 
-.bp_combobox_group_module_comboboxHasFocus--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_comboboxHasFocus--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-select-border-right-width:none;
 }
 
-.bp_combobox_group_module_comboboxHasFocus--20be3.bp_combobox_group_module_errorSelect--20be3.bp_combobox_group_module_leading--20be3{
+.bp_combobox_group_module_comboboxHasFocus--9375b.bp_combobox_group_module_errorSelect--9375b.bp_combobox_group_module_leading--9375b{
   --blueprint-select-border-error-right-width:none;
 }
 
-.bp_combobox_group_module_comboboxHasFocus--20be3.bp_combobox_group_module_errorSelect--20be3.bp_combobox_group_module_trailing--20be3{
+.bp_combobox_group_module_comboboxHasFocus--9375b.bp_combobox_group_module_errorSelect--9375b.bp_combobox_group_module_trailing--9375b{
   --blueprint-select-border-error-left-width:none;
 }
 
@@ -6405,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.1",
+    "version": "12.69.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {