@box/blueprint-web 15.3.0 → 15.4.0

package/dist/lib-esm/index.css

@@ -11479,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));
@@ -11487,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));
@@ -11495,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);
@@ -11531,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);
@@ -11573,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);
@@ -11589,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);
@@ -11631,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;
@@ -11641,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);
@@ -11655,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);
@@ -11680,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);
@@ -11765,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);
@@ -11776,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:"";
@@ -11790,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/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.3.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.6",
+        "@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.6",
+        "@box/storybook-utils": "^0.20.7",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",