@box/blueprint-web 15.2.0 → 15.4.0

package/dist/lib-esm/blueprint-configuration-context/consts.d.ts

@@ -38,7 +38,7 @@ export declare const BLUEPRINT_CONFIGURATION_SPLITS: {
  */
 export declare const ANIMATED_COMPONENTS_BY_PHASE: {
     readonly phase1: readonly ["Button", "IconButton", "DropdownMenu", "Tooltip", "Popover", "SplitButton", "CardTooltip", "NavigationMenu", "Modal", "TextButton", "ContextMenu"];
-    readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup"];
+    readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup", "InlineError"];
     readonly phase3: readonly [];
 };
 /**

package/dist/lib-esm/blueprint-configuration-context/consts.js

@@ -40,7 +40,7 @@ const BLUEPRINT_CONFIGURATION_SPLITS = deepFreeze({
  */
 const ANIMATED_COMPONENTS_BY_PHASE = deepFreeze({
   phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
-  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup'],
+  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup', 'InlineError'],
   phase3: []
 });
 /**

package/dist/lib-esm/index.css

@@ -4546,7 +4546,7 @@
 .bp_input_chip_module_container--8ac7b .bp_input_chip_module_avatar--8ac7b.bp_input_chip_module_modern--8ac7b *{
   border-radius:unset;
 }
-.bp_inline_error_module_inlineError--4733a[data-modern=false]{
+.bp_inline_error_module_inlineError--e70b6[data-modern=false]{
   --inline-error-gap:var(--size-1);
   --inline-error-height:var(--size-4);
   --inline-error-text-color:var(--text-text-error-on-light);
@@ -4559,10 +4559,11 @@
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_inline_error_module_inlineError--4733a[data-modern=true]{
+.bp_inline_error_module_inlineError--e70b6[data-modern=true]{
   --inline-error-gap:var(--bp-space-010);
   --inline-error-height:var(--bp-size-040);
   --inline-error-text-color:var(--bp-text-text-error-on-light);
+  --inline-error-slide-offset:calc(var(--bp-font-size-02, 0.625rem)*-1);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -4571,21 +4572,54 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6{
   align-items:center;
   color:var(--inline-error-text-color);
   display:flex;
   gap:var(--inline-error-gap);
   line-height:var(--inline-error-height);
 }
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_empty--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_empty--e70b6{
   display:none;
 }
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a .bp_inline_error_module_errorIcon--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6 .bp_inline_error_module_errorIcon--e70b6{
   align-self:flex-start;
   flex-grow:0;
   flex-shrink:0;
 }
+
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_animated--e70b6[data-state=open]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_inline_error_module_bpInlineErrorSlideEnter--e70b6;
+  animation-timing-function:var(--bp-curve-small-on);
+}
+
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_animated--e70b6[data-state=closed]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:forwards;
+  animation-name:bp_inline_error_module_bpInlineErrorFadeExit--e70b6;
+  animation-timing-function:var(--bp-curve-small-off);
+}
+
+@keyframes bp_inline_error_module_bpInlineErrorSlideEnter--e70b6{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(var(--inline-error-slide-offset));
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0);
+  }
+}
+@keyframes bp_inline_error_module_bpInlineErrorFadeExit--e70b6{
+  from{
+    opacity:var(--bp-opacity-visible);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+  }
+}
 .bp_labelable_module_required--25dbc{
   align-items:center;
   display:inline-flex;
@@ -11445,7 +11479,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   display:flex;
   flex-direction:row;
 }
-.bp_select_menu_grid_option_module_buttonWrapper--287af[data-modern=false]{
+.bp_select_menu_grid_option_module_buttonWrapper--1b151[data-modern=false]{
   --select-menu-grid-option-labeled-margin-small-breakpoint:var(--space-05) 0;
   --select-menu-grid-option-labeled-margin:var(--space-05);
   --select-menu-grid-option-labeled-max-width:calc(50% - var(--space-1));
@@ -11453,7 +11487,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
 }
 
-.bp_select_menu_grid_option_module_buttonWrapper--287af[data-modern=true]{
+.bp_select_menu_grid_option_module_buttonWrapper--1b151[data-modern=true]{
   --select-menu-grid-option-labeled-margin-small-breakpoint:var(--bp-space-005) 0;
   --select-menu-grid-option-labeled-margin:var(--bp-space-005);
   --select-menu-grid-option-labeled-max-width:calc(50% - var(--bp-size-010));
@@ -11461,27 +11495,27 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
 }
 
-.bp_select_menu_grid_option_module_buttonWrapper--287af.bp_select_menu_grid_option_module_withLabel--287af{
+.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--1b151{
   flex:1 1 0;
   margin:var(--select-menu-grid-option-labeled-margin-small-breakpoint);
 }
-.bp_select_menu_grid_option_module_buttonWrapper--287af.bp_select_menu_grid_option_module_withLabel--default--287af{
+.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151{
   max-width:100%;
 }
 @media only screen and (width > 374px){
-  .bp_select_menu_grid_option_module_buttonWrapper--287af.bp_select_menu_grid_option_module_withLabel--default--287af{
+  .bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151{
     margin:var(--select-menu-grid-option-labeled-margin);
     max-width:var(--select-menu-grid-option-labeled-max-width);
   }
-  .bp_select_menu_grid_option_module_buttonWrapper--287af.bp_select_menu_grid_option_module_withLabel--default--287af:first-child{
+  .bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151:first-child{
     margin-left:var(--select-menu-grid-option-labeled-max-width-first-child-margin-left);
   }
-  .bp_select_menu_grid_option_module_buttonWrapper--287af.bp_select_menu_grid_option_module_withLabel--default--287af:last-child{
+  .bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151:last-child{
     margin-right:var(--select-menu-grid-option-labeled-max-width-last-child-margin-right);
   }
 }
 
-.bp_select_menu_grid_option_module_optionButton--287af[data-modern=false]{
+.bp_select_menu_grid_option_module_optionButton--1b151[data-modern=false]{
   --select-menu-grid-option-background-color:#0000;
   --select-menu-grid-option-labeled-background-color-hover:var(--surface-surface-secondary);
   --select-menu-grid-option-labeled-background-color-active:var(--surface-surface-secondary);
@@ -11497,6 +11531,8 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --select-menu-grid-option-labeled-border-radius:var(--radius-3);
   --select-menu-grid-option-labeled-transition:background-color var(--animation-duration-2);
   --select-menu-grid-option-labeled-text-max-height:var(--size-8);
+  --select-menu-grid-option-labeled-label-content-gap:var(--space-05);
+  --select-menu-grid-option-labeled-label-content-optical-offset:var(--border-1);
   --select-menu-grid-option-labeled-text-color:var(--text-text-on-light);
   --select-menu-grid-option-labeled-icon-border-radius:var(--radius-3);
   --select-menu-grid-option-labeled-icon-default-size:var(--size-8);
@@ -11539,7 +11575,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
 }
 
-.bp_select_menu_grid_option_module_optionButton--287af[data-modern=true]{
+.bp_select_menu_grid_option_module_optionButton--1b151[data-modern=true]{
   --select-menu-grid-option-background-color:#0000;
   --select-menu-grid-option-labeled-background-color-hover:var(--bp-surface-surface-secondary);
   --select-menu-grid-option-labeled-background-color-active:var(--bp-surface-surface-secondary);
@@ -11555,6 +11591,8 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --select-menu-grid-option-labeled-border-radius:var(--bp-radius-06);
   --select-menu-grid-option-labeled-transition:background-color var(--animation-duration-2);
   --select-menu-grid-option-labeled-text-max-height:var(--bp-size-080);
+  --select-menu-grid-option-labeled-label-content-gap:var(--bp-space-005);
+  --select-menu-grid-option-labeled-label-content-optical-offset:var(--bp-border-01);
   --select-menu-grid-option-labeled-text-color:var(--bp-text-text-on-light);
   --select-menu-grid-option-labeled-icon-border-radius:var(--bp-radius-04);
   --select-menu-grid-option-labeled-icon-default-size:var(--bp-size-080);
@@ -11597,7 +11635,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--bp-border-01) var(--bp-gray-white), 0 0 0 var(--bp-border-03) var(--bp-border-input-border-focus);
 }
 
-.bp_select_menu_grid_option_module_optionButton--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151{
   align-items:center;
   background-color:var(--select-menu-grid-option-background-color);
   border:none;
@@ -11607,13 +11645,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_menu_grid_option_module_optionButton--287af:not(.bp_select_menu_grid_option_module_labeled--287af){
+.bp_select_menu_grid_option_module_optionButton--1b151:not(.bp_select_menu_grid_option_module_labeled--1b151){
   height:var(--select-menu-grid-option-not-labeled-height);
   justify-content:center;
   padding:var(--select-menu-grid-option-not-labeled-padding);
   width:var(--select-menu-grid-option-not-labeled-width);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151{
   border-radius:var(--select-menu-grid-option-labeled-border-radius);
   gap:var(--select-menu-grid-option-labeled-gap);
   min-width:var(--select-menu-grid-option-labeled-min-width);
@@ -11621,24 +11659,41 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transition:var(--select-menu-grid-option-labeled-transition);
   width:100%;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_text--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_labelContent--1b151{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  justify-content:center;
+  min-width:0;
+  text-align:left;
+}
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_labelContent--withDescription--1b151{
+  gap:var(--select-menu-grid-option-labeled-label-content-gap);
+  margin-top:calc(var(--select-menu-grid-option-labeled-label-content-optical-offset)*-1);
+}
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_text--1b151{
   color:var(--select-menu-grid-option-labeled-text-color);
   max-height:var(--select-menu-grid-option-labeled-text-max-height);
-  text-align:left;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_text--large--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_text--large--1b151{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:1;
   display:-webkit-box;
   overflow:hidden;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_text--default--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_text--default--1b151{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-box;
   overflow:hidden;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_description--1b151{
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:1;
+  display:-webkit-box;
+  overflow:hidden;
+}
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--1b151{
   align-items:center;
   background:var(--icon-background);
   border-radius:var(--select-menu-grid-option-labeled-icon-border-radius);
@@ -11646,80 +11701,80 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   flex-shrink:0;
   justify-content:center;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--size-default--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--size-default--1b151{
   height:var(--select-menu-grid-option-labeled-icon-default-size);
   width:var(--select-menu-grid-option-labeled-icon-default-size);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--size-large--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--size-large--1b151{
   height:var(--select-menu-grid-option-labeled-icon-large-size);
   width:var(--select-menu-grid-option-labeled-icon-large-size);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--default--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--default--1b151{
   --icon-background:var(--select-menu-grid-option-labeled-icon-default-background);
   --icon-background-dark:var(--select-menu-grid-option-labeled-icon-default-background-dark);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--box--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--box--1b151{
   --icon-background:var(--select-menu-grid-option-labeled-icon-box-background);
   --icon-background-dark:var(--select-menu-grid-option-labeled-icon-box-background-dark);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--docgen--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--docgen--1b151{
   --icon-background:var(--select-menu-grid-option-labeled-icon-docgen-background);
   --icon-background-dark:var(--select-menu-grid-option-labeled-icon-docgen-background-dark);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--forms--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--forms--1b151{
   --icon-background:var(--select-menu-grid-option-labeled-icon-forms-background);
   --icon-background-dark:var(--select-menu-grid-option-labeled-icon-forms-background-dark);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af .bp_select_menu_grid_option_module_iconContainer--sign--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--sign--1b151{
   --icon-background:var(--select-menu-grid-option-labeled-icon-sign-background);
   --icon-background-dark:var(--select-menu-grid-option-labeled-icon-sign-background-dark);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af:hover{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:hover{
   background:var(--select-menu-grid-option-labeled-background-color-hover);
   box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
   cursor:grab;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af.bp_select_menu_grid_option_module_active--287af,.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af.bp_select_menu_grid_option_module_dragging--287af,.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af:active{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_active--1b151,.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151,.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:active{
   background:var(--select-menu-grid-option-labeled-background-color-active);
   box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af.bp_select_menu_grid_option_module_active--287af .bp_select_menu_grid_option_module_iconContainer--287af,.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af:active .bp_select_menu_grid_option_module_iconContainer--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_iconContainer--1b151,.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:active .bp_select_menu_grid_option_module_iconContainer--1b151{
   background-color:var(--icon-background);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af.bp_select_menu_grid_option_module_dragging--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151{
   box-shadow:var(--select-menu-grid-option-labeled-box-shadow-dragging);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af.bp_select_menu_grid_option_module_dragging--287af .bp_select_menu_grid_option_module_iconContainer--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151 .bp_select_menu_grid_option_module_iconContainer--1b151{
   background-color:var(--icon-background-dark);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af.bp_select_menu_grid_option_module_dragging--287af:hover{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151:hover{
   cursor:grabbing;
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af:hover:not(.bp_select_menu_grid_option_module_disabled--287af) .bp_select_menu_grid_option_module_iconContainer--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:hover:not(.bp_select_menu_grid_option_module_disabled--1b151) .bp_select_menu_grid_option_module_iconContainer--1b151{
   background-color:var(--icon-background-dark);
   transition:var(--select-menu-grid-option-labeled-transition);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af[data-focus-visible]{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151[data-focus-visible]{
   box-shadow:var(--select-menu-grid-option-labeled-box-shadow-focus);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_labeled--287af[data-focus-visible]:active{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151[data-focus-visible]:active{
   background:var(--select-menu-grid-option-labeled-background-color-active);
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_square--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151{
   height:var(--select-menu-grid-option-square-height);
   width:var(--select-menu-grid-option-square-width);
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_square--287af,.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_square--287af .bp_select_menu_grid_option_module_outlineHost--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151,.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151 .bp_select_menu_grid_option_module_outlineHost--1b151{
   align-items:center;
   border-radius:var(--select-menu-grid-option-square-border-radius);
   display:flex;
   justify-content:center;
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_square--287af .bp_select_menu_grid_option_module_outlineHost--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151 .bp_select_menu_grid_option_module_outlineHost--1b151{
   height:var(--select-menu-grid-option-square-outline-host-height);
   width:var(--select-menu-grid-option-square-outline-host-width);
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_circle--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151{
   align-items:center;
   background-clip:content-box;
   background-color:var(--select-menu-grid-option-circle-background-color);
@@ -11731,10 +11786,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   justify-content:center;
   width:var(--select-menu-grid-option-circle-width);
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_circle--287af.bp_select_menu_grid_option_module_loading--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151.bp_select_menu_grid_option_module_loading--1b151{
   border-color:var(--select-menu-grid-option-circle-border-color-loading);
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_circle--287af .bp_select_menu_grid_option_module_color--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151 .bp_select_menu_grid_option_module_color--1b151{
   background-color:var(--circleColor);
   border:var(--select-menu-grid-option-circle-inner-border-width) solid var(--circleBorderColor);
   border-radius:var(--select-menu-grid-option-circle-inner-border-radius);
@@ -11742,10 +11797,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   height:var(--select-menu-grid-option-circle-inner-height);
   width:var(--select-menu-grid-option-circle-inner-width);
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_circle--287af .bp_select_menu_grid_option_module_strikeThrough--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151 .bp_select_menu_grid_option_module_strikeThrough--1b151{
   position:relative;
 }
-.bp_select_menu_grid_option_module_optionButton--287af .bp_select_menu_grid_option_module_circle--287af .bp_select_menu_grid_option_module_strikeThrough--287af::after{
+.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151 .bp_select_menu_grid_option_module_strikeThrough--1b151::after{
   background-color:var(--select-menu-grid-option-circle-strikethrough-background-color);
   border-radius:var(--select-menu-grid-option-circle-strikethrough-border-radius);
   content:"";
@@ -11756,32 +11811,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transform:rotate(-45deg);
   width:90%;
 }
-.bp_select_menu_grid_option_module_optionButton--287af:hover .bp_select_menu_grid_option_module_square--287af,.bp_select_menu_grid_option_module_optionButton--287af[data-focus-visible] .bp_select_menu_grid_option_module_square--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151:hover .bp_select_menu_grid_option_module_square--1b151,.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_square--1b151{
   background-color:var(--select-menu-grid-option-square-background-color-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--287af:hover .bp_select_menu_grid_option_module_circle--287af,.bp_select_menu_grid_option_module_optionButton--287af[data-focus-visible] .bp_select_menu_grid_option_module_circle--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151:hover .bp_select_menu_grid_option_module_circle--1b151,.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_circle--1b151{
   background-color:var(--select-menu-grid-option-circle-background-color-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_active--287af .bp_select_menu_grid_option_module_square--287af,.bp_select_menu_grid_option_module_optionButton--287af:active .bp_select_menu_grid_option_module_square--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_square--1b151,.bp_select_menu_grid_option_module_optionButton--1b151:active .bp_select_menu_grid_option_module_square--1b151{
   background-color:var(--select-menu-grid-option-square-background-color-active);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_active--287af .bp_select_menu_grid_option_module_circle--287af,.bp_select_menu_grid_option_module_optionButton--287af:active .bp_select_menu_grid_option_module_circle--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_circle--1b151,.bp_select_menu_grid_option_module_optionButton--1b151:active .bp_select_menu_grid_option_module_circle--1b151{
   border:var(--select-menu-grid-option-circle-inner-border-width-active) solid var(--circleColor);
 }
-.bp_select_menu_grid_option_module_optionButton--287af.bp_select_menu_grid_option_module_loading--287af,.bp_select_menu_grid_option_module_optionButton--287af:disabled{
+.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_loading--1b151,.bp_select_menu_grid_option_module_optionButton--1b151:disabled{
   cursor:default;
 }
-.bp_select_menu_grid_option_module_optionButton--287af[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--1b151{
   box-shadow:var(--select-menu-grid-option-circle-outline-host-box-shadow-focus);
 }
-.bp_select_menu_grid_option_module_optionButton--287af[data-focus-visible] .bp_select_menu_grid_option_module_circle--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_circle--1b151{
   border-color:var(--select-menu-grid-option-circle-border-color-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--287af[data-focus-visible].bp_select_menu_grid_option_module_active--287af .bp_select_menu_grid_option_module_circle--287af,.bp_select_menu_grid_option_module_optionButton--287af[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--287af{
+.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible].bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_circle--1b151,.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--1b151{
   border:var(--select-menu-grid-option-circle-border-width-focus-active) solid var(--circleColor);
   box-shadow:var(--select-menu-grid-option-circle-box-shadow-focus-active);
 }
-.bp_select_menu_grid_option_module_optionButton--287af:disabled:not(.bp_select_menu_grid_option_module_loading--287af){
+.bp_select_menu_grid_option_module_optionButton--1b151:disabled:not(.bp_select_menu_grid_option_module_loading--1b151){
   opacity:.3;
 }
 

package/dist/lib-esm/primitives/inline-error/inline-error.js

@@ -3,44 +3,82 @@ import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
 import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
 import { Size4, IconIconErrorOnLight, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useInlineErrorPresence } from './utils/use-inline-error-presence.js';
 import styles from './inline-error.module.js';
 
+const renderErrorContent = (content, enableModernizedComponents, errorIconClassName) => content && (!enableModernizedComponents ? jsxs(Fragment, {
+  children: [jsx(AlertBadge, {
+    className: errorIconClassName,
+    color: IconIconErrorOnLight,
+    height: Size4,
+    role: "presentation",
+    width: Size4
+  }), content]
+}) : jsxs(Fragment, {
+  children: [jsx(AlertCircle, {
+    className: errorIconClassName,
+    color: IconIconErrorOnLight,
+    height: bpSize050,
+    role: "presentation",
+    width: bpSize050
+  }), content]
+}));
 /** Renders an inline error message and icon, used to show error state in form elements. */
 const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
+    onAnimationEnd: onAnimationEndProp,
     ...rest
   } = props;
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('InlineError');
+  const useModernizedAnimation = isAnimationEnabled && enableModernizedComponents;
+  const presence = useInlineErrorPresence(children, useModernizedAnimation);
+  const {
+    onAnimationEnd: onPresenceAnimationEnd
+  } = presence;
+  const handleAnimationEnd = useCallback(event => {
+    onPresenceAnimationEnd(event);
+    onAnimationEndProp?.(event);
+  }, [onPresenceAnimationEnd, onAnimationEndProp]);
+  /** Legacy path: identical DOM/CSS to pre-animation InlineError (no mount/unmount, `.empty` + `display: none`). */
+  if (!useModernizedAnimation) {
+    return jsx("span", {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx([className, styles.inlineError, {
+        [styles.empty]: !children
+      }]),
+      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      onAnimationEnd: onAnimationEndProp,
+      children: renderErrorContent(children, enableModernizedComponents, styles.errorIcon)
+    });
+  }
+  /** `return null` when there is no error (and we are not in the exit phase): no visible slot for the
+  message — layout matches legacy (legacy hides the same slot via `.empty` + `display: none`). */
+  if (!presence.isMounted) {
+    return null;
+  }
   return jsx("span", {
     ...rest,
     ref: forwardedRef,
-    className: clsx([className, styles.inlineError, {
-      [styles.empty]: !children
-    }]),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: children && (!enableModernizedComponents ? jsxs(Fragment, {
-      children: [jsx(AlertBadge, {
-        className: styles.errorIcon,
-        color: IconIconErrorOnLight,
-        height: Size4,
-        role: "presentation",
-        width: Size4
-      }), children]
-    }) : jsxs(Fragment, {
-      children: [jsx(AlertCircle, {
-        className: styles.errorIcon,
-        color: IconIconErrorOnLight,
-        height: bpSize050,
-        role: "presentation",
-        width: bpSize050
-      }), children]
-    }))
+    className: clsx([className, styles.inlineError, styles.animated]),
+    "data-bp-animated": "true",
+    "data-modern": "true",
+    "data-state": presence.presenceState,
+    onAnimationEnd: handleAnimationEnd,
+    children: renderErrorContent(presence.content, enableModernizedComponents, styles.errorIcon)
   });
 });
 

package/dist/lib-esm/primitives/inline-error/inline-error.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"inlineError":"bp_inline_error_module_inlineError--4733a","empty":"bp_inline_error_module_empty--4733a","errorIcon":"bp_inline_error_module_errorIcon--4733a"};
+var styles = {"inlineError":"bp_inline_error_module_inlineError--e70b6","empty":"bp_inline_error_module_empty--e70b6","errorIcon":"bp_inline_error_module_errorIcon--e70b6","animated":"bp_inline_error_module_animated--e70b6"};
 
 export { styles as default };

package/dist/lib-esm/primitives/inline-error/utils/use-inline-error-presence.d.ts

@@ -0,0 +1,13 @@
+import { type AnimationEvent } from 'react';
+type PresenceState = 'open' | 'closed';
+/**
+ * Exit-animation presence for `InlineError`. Pattern inspired by Radix UI `usePresence`:
+ * keep the node mounted while exit CSS runs, then unmount on `animationend`.
+ */
+export declare function useInlineErrorPresence(children: React.ReactNode, isAnimationEnabled: boolean): {
+    content: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
+    isMounted: boolean;
+    presenceState: PresenceState | undefined;
+    onAnimationEnd: (e: AnimationEvent<HTMLSpanElement>) => void;
+};
+export {};

package/dist/lib-esm/primitives/inline-error/utils/use-inline-error-presence.js

@@ -0,0 +1,54 @@
+import noop from 'lodash/noop';
+import { useState, useCallback } from 'react';
+import { useEnhancedEffect } from '../../../utils/useEnhancedEffect.js';
+
+const animationEndNoop = noop;
+/**
+ * Exit-animation presence for `InlineError`. Pattern inspired by Radix UI `usePresence`:
+ * keep the node mounted while exit CSS runs, then unmount on `animationend`.
+ */
+function useInlineErrorPresence(children, isAnimationEnabled) {
+  const hasContent = Boolean(children);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [presenceState, setPresenceState] = useState(() => isAnimationEnabled && hasContent ? 'open' : undefined);
+  const isMounted = isAnimationEnabled && (presenceState === 'open' || presenceState === 'closed');
+  const unmountAfterExit = useCallback(() => {
+    setPresenceState(undefined);
+    setRenderedChildren(undefined);
+  }, []);
+  const onAnimationEnd = useCallback(e => {
+    if (e.target !== e.currentTarget || presenceState !== 'closed') {
+      return;
+    }
+    unmountAfterExit();
+  }, [presenceState, unmountAfterExit]);
+  useEnhancedEffect(() => {
+    if (!isAnimationEnabled) {
+      return;
+    }
+    if (hasContent) {
+      setRenderedChildren(children);
+      setPresenceState('open');
+      return;
+    }
+    setPresenceState(current => current === 'open' ? 'closed' : current);
+  }, [children, isAnimationEnabled, hasContent]);
+  // When `isAnimationEnabled` is false (legacy path), return a no-op result: no mount/unmount, no exit animation.
+  // `inline-error.tsx` ignores `presence` and renders the legacy `<span>` + `.empty` instead.
+  if (!isAnimationEnabled) {
+    return {
+      content: children,
+      isMounted: false,
+      presenceState: undefined,
+      onAnimationEnd: animationEndNoop
+    };
+  }
+  return {
+    content: renderedChildren,
+    isMounted,
+    presenceState,
+    onAnimationEnd
+  };
+}
+
+export { useInlineErrorPresence };

package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.d.ts

@@ -42,17 +42,33 @@ export declare const SelectMenuGridColorCircle: import("react").ForwardRefExotic
     color: string;
 }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SelectMenuGridWithLabel: import("react").ForwardRefExoticComponent<(Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
-    size: "default" | "large";
     colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
     icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
     label: string;
-} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging>, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
-    size: "default" | "large";
+} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "default";
+}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
+    colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
+    icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    label: string;
+} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "default";
+}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
+    colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
+    icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    label: string;
+} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "large";
+    description?: string;
+}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
     colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
     icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
     label: string;
-} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging>, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SelectMenuGridOption: import("react").ForwardRefExoticComponent<(Omit<Partial<{
+} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "large";
+    description?: string;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectMenuGridOption: import("react").ForwardRefExoticComponent<(Omit<{
     'aria-label': string;
     tooltipSide?: "top" | "bottom" | "left" | "right";
     active?: boolean;
@@ -62,41 +78,9 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
     [index: `data-${string}`]: unknown;
 } & {
     children: React.ReactNode;
-}> & Partial<{
-    'aria-label': string;
-    tooltipSide?: "top" | "bottom" | "left" | "right";
-    active?: boolean;
-} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@ariakit/react").ButtonOptions<T>> & {
-    [index: `data-${string}`]: unknown;
 } & {
-    color: string;
-}> & {
-    variant: "square" | "colorCircle";
-}, "ref"> | Omit<Partial<{
-    'aria-label': string;
-    tooltipSide?: "top" | "bottom" | "left" | "right";
-    active?: boolean;
-} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@ariakit/react").ButtonOptions<T>> & {
-    [index: `data-${string}`]: unknown;
-} & {
-    children: React.ReactNode;
-}> & Partial<{
-    'aria-label': string;
-    tooltipSide?: "top" | "bottom" | "left" | "right";
-    active?: boolean;
-} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@ariakit/react").ButtonOptions<T>> & {
-    [index: `data-${string}`]: unknown;
-} & {
-    color: string;
-}> & {
-    variant: "square" | "colorCircle";
-}, "ref"> | Omit<Partial<{
+    variant: "square";
+}, "ref"> | Omit<{
     'aria-label': string;
     tooltipSide?: "top" | "bottom" | "left" | "right";
     active?: boolean;
@@ -106,7 +90,9 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
     [index: `data-${string}`]: unknown;
 } & {
     children: React.ReactNode;
-}> & Partial<{
+} & {
+    variant: "square";
+}, "ref"> | Omit<{
     'aria-label': string;
     tooltipSide?: "top" | "bottom" | "left" | "right";
     active?: boolean;
@@ -116,19 +102,9 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
     [index: `data-${string}`]: unknown;
 } & {
     color: string;
-}> & {
-    variant: "square" | "colorCircle";
-}, "ref"> | Omit<Partial<{
-    'aria-label': string;
-    tooltipSide?: "top" | "bottom" | "left" | "right";
-    active?: boolean;
-} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@ariakit/react").ButtonOptions<T>> & {
-    [index: `data-${string}`]: unknown;
 } & {
-    children: React.ReactNode;
-}> & Partial<{
+    variant: "colorCircle";
+}, "ref"> | Omit<{
     'aria-label': string;
     tooltipSide?: "top" | "bottom" | "left" | "right";
     active?: boolean;
@@ -138,21 +114,43 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
     [index: `data-${string}`]: unknown;
 } & {
     color: string;
-}> & {
-    variant: "square" | "colorCircle";
+} & {
+    variant: "colorCircle";
 }, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
-    size: "default" | "large";
     colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
     icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
     label: string;
 } & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "default";
+} & {
     variant: "labeled";
 }, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
-    size: "default" | "large";
     colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
     icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
     label: string;
 } & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "default";
+} & {
+    variant: "labeled";
+}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
+    colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
+    icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    label: string;
+} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "large";
+    description?: string;
+} & {
+    variant: "labeled";
+}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
+    colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
+    icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    label: string;
+} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
+    size: "large";
+    description?: string;
+} & {
     variant: "labeled";
 }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const ItemWithLabel: ({ size, colorVariant, label, icon, }: Pick<SelectMenuGridWithLabelProps, "label" | "size" | "colorVariant" | "icon">) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemWithLabel: ({ size, colorVariant, label, description, icon, }: Pick<SelectMenuGridWithLabelProps, "colorVariant" | "icon" | "label" | "size"> & {
+    description?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js

@@ -46,8 +46,21 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const isButtonActive = !disabled && !loading && active;
   const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
   const shouldShowTooltip = !isButtonDisabled && !isWithLabel;
-  const ariaLabel = !isWithLabel ? props['aria-label'] : props.label;
-  const buttonProps = isWithLabel ? omit(restProps, ['colorVariant', 'icon', 'dragging', 'label']) : restProps;
+  let ariaLabel;
+  if (variant === 'labeled') {
+    const {
+      label,
+      size
+    } = props;
+    if (size === 'large' && props.description) {
+      ariaLabel = `${label}. ${props.description}`;
+    } else {
+      ariaLabel = label;
+    }
+  } else {
+    ariaLabel = props['aria-label'];
+  }
+  const buttonProps = isWithLabel ? omit(restProps, ['colorVariant', 'icon', 'dragging', 'label', 'description']) : restProps;
   // TODO: [DSYS-764] use IconButton instead of AriakitButton
   const button = jsx(CompositeItem, {
     render: jsxs(Button, {
@@ -153,6 +166,7 @@ const ItemWithLabel = ({
   size,
   colorVariant,
   label,
+  description,
   icon
 }) => {
   const {
@@ -168,11 +182,22 @@ const ItemWithLabel = ({
     children: [jsx("div", {
       className: clsx(styles.iconContainer, styles[`iconContainer--${colorVariant}`], styles[`iconContainer--size-${size}`]),
       children: iconElement
-    }), jsx(Text, {
-      as: "span",
-      className: clsx(styles.text, styles[`text--${size}`]),
-      variant: size === 'default' ? 'caption' : 'bodyDefaultBold',
-      children: label
+    }), jsxs("div", {
+      className: clsx(styles.labelContent, {
+        [styles['labelContent--withDescription']]: description
+      }),
+      children: [jsx(Text, {
+        as: "span",
+        className: clsx(styles.text, styles[`text--${size}`]),
+        variant: size === 'default' ? 'caption' : 'bodyDefaultBold',
+        children: label
+      }), description && jsx(Text, {
+        as: "span",
+        className: styles.description,
+        color: "textOnLightSecondary",
+        variant: "caption",
+        children: description
+      })]
     })]
   });
 };

package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--287af","withLabel":"bp_select_menu_grid_option_module_withLabel--287af","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--287af","optionButton":"bp_select_menu_grid_option_module_optionButton--287af","labeled":"bp_select_menu_grid_option_module_labeled--287af","text":"bp_select_menu_grid_option_module_text--287af","text--large":"bp_select_menu_grid_option_module_text--large--287af","text--default":"bp_select_menu_grid_option_module_text--default--287af","iconContainer":"bp_select_menu_grid_option_module_iconContainer--287af","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--287af","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--287af","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--287af","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--287af","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--287af","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--287af","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--287af","active":"bp_select_menu_grid_option_module_active--287af","dragging":"bp_select_menu_grid_option_module_dragging--287af","disabled":"bp_select_menu_grid_option_module_disabled--287af","square":"bp_select_menu_grid_option_module_square--287af","outlineHost":"bp_select_menu_grid_option_module_outlineHost--287af","circle":"bp_select_menu_grid_option_module_circle--287af","loading":"bp_select_menu_grid_option_module_loading--287af","color":"bp_select_menu_grid_option_module_color--287af","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--287af"};
+var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--1b151","withLabel":"bp_select_menu_grid_option_module_withLabel--1b151","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--1b151","optionButton":"bp_select_menu_grid_option_module_optionButton--1b151","labeled":"bp_select_menu_grid_option_module_labeled--1b151","labelContent":"bp_select_menu_grid_option_module_labelContent--1b151","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--1b151","text":"bp_select_menu_grid_option_module_text--1b151","text--large":"bp_select_menu_grid_option_module_text--large--1b151","text--default":"bp_select_menu_grid_option_module_text--default--1b151","description":"bp_select_menu_grid_option_module_description--1b151","iconContainer":"bp_select_menu_grid_option_module_iconContainer--1b151","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--1b151","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--1b151","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--1b151","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--1b151","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--1b151","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--1b151","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--1b151","active":"bp_select_menu_grid_option_module_active--1b151","dragging":"bp_select_menu_grid_option_module_dragging--1b151","disabled":"bp_select_menu_grid_option_module_disabled--1b151","square":"bp_select_menu_grid_option_module_square--1b151","outlineHost":"bp_select_menu_grid_option_module_outlineHost--1b151","circle":"bp_select_menu_grid_option_module_circle--1b151","loading":"bp_select_menu_grid_option_module_loading--1b151","color":"bp_select_menu_grid_option_module_color--1b151","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--1b151"};
 
 export { styles as default };

package/dist/lib-esm/primitives/select-menu-grid/types.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonProps as AriakitButtonProps, type CompositeProps, type CompositeRowProps } from '@ariakit/react';
-import { type RequireAllOrNone } from 'type-fest';
 import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
 export interface Loading {
     /** Loading state of the grid option. Ghost section is displaying as a placeholder. When this is true `loadingAriaLabel` must also be provided. */
     loading: boolean;
@@ -27,15 +27,23 @@ export type SelectMenuGridColorCircleProps = CommonOptionProps & {
     /** The color of the swatch  */
     color: string;
 };
-export type SelectMenuGridWithLabelProps = Omit<CommonOptionProps, 'aria-label' | 'tooltipSide' | 'draggable'> & {
-    size: 'default' | 'large';
+type SelectMenuGridWithLabelBase = Omit<CommonOptionProps, 'aria-label' | 'tooltipSide' | 'draggable'> & {
     colorVariant: 'default' | 'box' | 'forms' | 'docgen' | 'sign';
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
     label: string;
 } & RequireAllOrNone<Dragging, keyof Dragging>;
-export type SelectMenuOptionIconsProps = Partial<SelectMenuGridSquareProps> & Partial<SelectMenuGridColorCircleProps> & {
-    variant: 'square' | 'colorCircle';
-};
+export type SelectMenuGridWithLabelProps = (SelectMenuGridWithLabelBase & {
+    size: 'default';
+}) | (SelectMenuGridWithLabelBase & {
+    /** Secondary text shown below the label. Only supported when `size` is `large`. */
+    size: 'large';
+    description?: string;
+});
+export type SelectMenuOptionIconsProps = (SelectMenuGridSquareProps & {
+    variant: 'square';
+}) | (SelectMenuGridColorCircleProps & {
+    variant: 'colorCircle';
+});
 export type SelectMenuOptionProps = SelectMenuOptionIconsProps | (SelectMenuGridWithLabelProps & {
     variant: 'labeled';
 });
@@ -46,3 +54,4 @@ export type SelectMenuGridProps = {
     /** The number of columns to slice the grid options into */
     columns: number;
 } & CompositeProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "15.2.0",
+    "version": "15.4.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.121.5",
+        "@box/blueprint-web-assets": "^4.121.7",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.20.5",
+        "@box/storybook-utils": "^0.20.7",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",