@box/blueprint-web 8.7.1 → 8.8.0

package/lib-esm/index.css

@@ -4789,22 +4789,42 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   flex-direction:row;
 }
 
-.bp_select_menu_grid_option_module_square--74a74{
+.bp_select_menu_grid_option_module_buttonWrapper--3bd72.bp_select_menu_grid_option_module_withLabel--3bd72{
+  flex:1 1 0;
+  margin:var(--space-05) 0;
+}
+.bp_select_menu_grid_option_module_buttonWrapper--3bd72.bp_select_menu_grid_option_module_withLabel--default--3bd72{
+  max-width:100%;
+}
+@media only screen and (width > 374px){
+  .bp_select_menu_grid_option_module_buttonWrapper--3bd72.bp_select_menu_grid_option_module_withLabel--default--3bd72{
+    margin:var(--space-05);
+    max-width:calc(50% - var(--space-1));
+  }
+  .bp_select_menu_grid_option_module_buttonWrapper--3bd72.bp_select_menu_grid_option_module_withLabel--default--3bd72:first-child{
+    margin-left:0;
+  }
+  .bp_select_menu_grid_option_module_buttonWrapper--3bd72.bp_select_menu_grid_option_module_withLabel--default--3bd72:last-child{
+    margin-right:0;
+  }
+}
+
+.bp_select_menu_grid_option_module_square--3bd72{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_select_menu_grid_option_module_square--74a74,.bp_select_menu_grid_option_module_square--74a74 .bp_select_menu_grid_option_module_outlineHost--74a74{
+.bp_select_menu_grid_option_module_square--3bd72,.bp_select_menu_grid_option_module_square--3bd72 .bp_select_menu_grid_option_module_outlineHost--3bd72{
   align-items:center;
   border-radius:var(--radius-3);
   display:flex;
   justify-content:center;
 }
-.bp_select_menu_grid_option_module_square--74a74 .bp_select_menu_grid_option_module_outlineHost--74a74{
+.bp_select_menu_grid_option_module_square--3bd72 .bp_select_menu_grid_option_module_outlineHost--3bd72{
   height:var(--size-7);
   width:var(--size-7);
 }
 
-.bp_select_menu_grid_option_module_circle--74a74{
+.bp_select_menu_grid_option_module_circle--3bd72{
   align-items:center;
   background-clip:content-box;
   background-color:var(--gray-white);
@@ -4816,10 +4836,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   justify-content:center;
   width:var(--size-8);
 }
-.bp_select_menu_grid_option_module_circle--74a74.bp_select_menu_grid_option_module_loading--74a74{
+.bp_select_menu_grid_option_module_circle--3bd72.bp_select_menu_grid_option_module_loading--3bd72{
   border-color:var(--gray-white);
 }
-.bp_select_menu_grid_option_module_circle--74a74 .bp_select_menu_grid_option_module_color--74a74{
+.bp_select_menu_grid_option_module_circle--3bd72 .bp_select_menu_grid_option_module_color--3bd72{
   background-color:var(--circleColor);
   border:var(--border-1) solid var(--circleBorderColor);
   border-radius:50%;
@@ -4827,10 +4847,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_select_menu_grid_option_module_circle--74a74 .bp_select_menu_grid_option_module_strikeThrough--74a74{
+.bp_select_menu_grid_option_module_circle--3bd72 .bp_select_menu_grid_option_module_strikeThrough--3bd72{
   position:relative;
 }
-.bp_select_menu_grid_option_module_circle--74a74 .bp_select_menu_grid_option_module_strikeThrough--74a74::after{
+.bp_select_menu_grid_option_module_circle--3bd72 .bp_select_menu_grid_option_module_strikeThrough--3bd72::after{
   background-color:var(--watermelon-red-100);
   border-radius:var(--radius-1);
   content:"";
@@ -4842,46 +4862,139 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:90%;
 }
 
-.bp_select_menu_grid_option_module_optionButton--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72{
   align-items:center;
   background-color:initial;
   border:none;
   cursor:pointer;
   display:flex;
-  height:var(--size-8);
-  justify-content:center;
   outline:0;
-  padding:0;
   -webkit-user-select:none;
           user-select:none;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72:not(.bp_select_menu_grid_option_module_labeled--3bd72){
+  height:var(--size-8);
+  justify-content:center;
+  padding:0;
   width:var(--size-8);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74:hover .bp_select_menu_grid_option_module_square--74a74,.bp_select_menu_grid_option_module_optionButton--74a74[data-focus-visible] .bp_select_menu_grid_option_module_square--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72{
+  border-radius:var(--radius-3);
+  gap:var(--space-3);
+  min-width:10rem;
+  padding:var(--space-1);
+  transition:background-color var(--animation-duration-2);
+  width:100%;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_text--3bd72{
+  max-height:var(--size-8);
+  text-align:left;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_text--large--3bd72{
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:1;
+  display:-webkit-box;
+  overflow:hidden;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_text--default--3bd72{
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  display:-webkit-box;
+  overflow:hidden;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--3bd72{
+  align-items:center;
+  background:var(--icon-background);
+  border-radius:var(--radius-3);
+  display:flex;
+  flex-shrink:0;
+  justify-content:center;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--size-default--3bd72{
+  height:var(--size-8);
+  width:var(--size-8);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--size-large--3bd72{
+  height:var(--size-10);
+  width:var(--size-10);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--default--3bd72{
+  --icon-background:var(--surface-surface-tertiary);
+  --icon-background-dark:var(--surface-surface-quaternary);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--box--3bd72{
+  --icon-background:var(--brand-box-tertiary);
+  --icon-background-dark:var(--brand-box-secondary);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--docgen--3bd72{
+  --icon-background:var(--brand-docgen-tertiary);
+  --icon-background-dark:var(--brand-docgen-secondary);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--forms--3bd72{
+  --icon-background:var(--brand-forms-tertiary);
+  --icon-background-dark:var(--brand-forms-secondary);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72 .bp_select_menu_grid_option_module_iconContainer--sign--3bd72{
+  --icon-background:var(--brand-sign-tertiary);
+  --icon-background-dark:var(--brand-sign-secondary);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72:hover{
+  background:var(--surface-surface-secondary);
+  box-shadow:var(--dropshadow-2);
+  cursor:grab;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72.bp_select_menu_grid_option_module_active--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72.bp_select_menu_grid_option_module_dragging--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72:active{
+  background:var(--surface-surface-secondary);
+  box-shadow:var(--dropshadow-2);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72.bp_select_menu_grid_option_module_active--3bd72 .bp_select_menu_grid_option_module_iconContainer--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72:active .bp_select_menu_grid_option_module_iconContainer--3bd72{
+  background-color:var(--icon-background);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72.bp_select_menu_grid_option_module_dragging--3bd72{
+  box-shadow:0 0 0 var(--border-1) var(--border-divider-border), var(--dropshadow-2);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72.bp_select_menu_grid_option_module_dragging--3bd72 .bp_select_menu_grid_option_module_iconContainer--3bd72{
+  background-color:var(--icon-background-dark);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72.bp_select_menu_grid_option_module_dragging--3bd72:hover{
+  cursor:grabbing;
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72:hover:not(.bp_select_menu_grid_option_module_disabled--3bd72) .bp_select_menu_grid_option_module_iconContainer--3bd72{
+  background-color:var(--icon-background-dark);
+  transition:background-color var(--animation-duration-2);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_labeled--3bd72[data-focus-visible]:active{
+  background:var(--surface-surface-secondary);
+}
+.bp_select_menu_grid_option_module_optionButton--3bd72:hover .bp_select_menu_grid_option_module_square--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72[data-focus-visible] .bp_select_menu_grid_option_module_square--3bd72{
   background-color:var(--surface-cta-surface-outline-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74:hover .bp_select_menu_grid_option_module_circle--74a74,.bp_select_menu_grid_option_module_optionButton--74a74[data-focus-visible] .bp_select_menu_grid_option_module_circle--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72:hover .bp_select_menu_grid_option_module_circle--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72[data-focus-visible] .bp_select_menu_grid_option_module_circle--3bd72{
   background-color:var(--surface-option-grid-surface-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74.bp_select_menu_grid_option_module_active--74a74 .bp_select_menu_grid_option_module_square--74a74,.bp_select_menu_grid_option_module_optionButton--74a74:active .bp_select_menu_grid_option_module_square--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_active--3bd72 .bp_select_menu_grid_option_module_square--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72:active .bp_select_menu_grid_option_module_square--3bd72{
   background-color:var(--surface-cta-surface-outline-pressed);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74.bp_select_menu_grid_option_module_active--74a74 .bp_select_menu_grid_option_module_circle--74a74,.bp_select_menu_grid_option_module_optionButton--74a74:active .bp_select_menu_grid_option_module_circle--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_active--3bd72 .bp_select_menu_grid_option_module_circle--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72:active .bp_select_menu_grid_option_module_circle--3bd72{
   border:var(--border-2) solid var(--circleColor);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74.bp_select_menu_grid_option_module_loading--74a74,.bp_select_menu_grid_option_module_optionButton--74a74:disabled{
+.bp_select_menu_grid_option_module_optionButton--3bd72.bp_select_menu_grid_option_module_loading--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72:disabled{
   cursor:default;
 }
-.bp_select_menu_grid_option_module_optionButton--74a74[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--3bd72{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74[data-focus-visible] .bp_select_menu_grid_option_module_circle--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72[data-focus-visible] .bp_select_menu_grid_option_module_circle--3bd72{
   border-color:var(--surface-option-grid-surface-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--74a74[data-focus-visible].bp_select_menu_grid_option_module_active--74a74 .bp_select_menu_grid_option_module_circle--74a74,.bp_select_menu_grid_option_module_optionButton--74a74[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--74a74{
+.bp_select_menu_grid_option_module_optionButton--3bd72[data-focus-visible].bp_select_menu_grid_option_module_active--3bd72 .bp_select_menu_grid_option_module_circle--3bd72,.bp_select_menu_grid_option_module_optionButton--3bd72[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--3bd72{
   border:var(--border-2) solid var(--circleColor);
   box-shadow: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--74a74:disabled:not(.bp_select_menu_grid_option_module_loading--74a74){
+.bp_select_menu_grid_option_module_optionButton--3bd72:disabled:not(.bp_select_menu_grid_option_module_loading--3bd72){
   opacity:.3;
 }
 

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

@@ -1,9 +1,10 @@
 import { SelectMenuGrid } from './select-menu-grid';
-import { SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare } from './select-menu-grid-option';
+import { SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare, SelectMenuGridWithLabel } from './select-menu-grid-option';
 export { type SelectMenuGridProps, type SelectMenuOptionProps } from './types';
 type SelectMenuOption = typeof SelectMenuGridOption & {
     Square: typeof SelectMenuGridSquare;
     ColorCircle: typeof SelectMenuGridColorCircle;
+    WithLabel: typeof SelectMenuGridWithLabel;
 };
 interface SelectMenuType {
     Option: SelectMenuOption;

package/lib-esm/primitives/select-menu-grid/index.js

@@ -1,5 +1,5 @@
 import { SelectMenuGrid } from './select-menu-grid.js';
-import { SelectMenuGridSquare, SelectMenuGridColorCircle, SelectMenuGridOption } from './select-menu-grid-option.js';
+import { SelectMenuGridSquare, SelectMenuGridColorCircle, SelectMenuGridWithLabel, SelectMenuGridOption } from './select-menu-grid-option.js';
 
 const SelectMenu = {
   Option: SelectMenuGridOption,
@@ -7,5 +7,6 @@ const SelectMenu = {
 };
 SelectMenu.Option.Square = SelectMenuGridSquare;
 SelectMenu.Option.ColorCircle = SelectMenuGridColorCircle;
+SelectMenu.Option.WithLabel = SelectMenuGridWithLabel;
 
 export { SelectMenu };

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

@@ -1,3 +1,4 @@
+import { type SelectMenuGridWithLabelProps } from './types';
 export declare const SelectMenuGridSquare: import("react").ForwardRefExoticComponent<(Omit<{
     'aria-label': string;
     tooltipSide?: "top" | "bottom" | "left" | "right";
@@ -40,6 +41,17 @@ 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";
+    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<{
     'aria-label': string;
     tooltipSide?: "top" | "bottom" | "left" | "right";
@@ -128,4 +140,19 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
     color: string;
 }> & {
     variant: "square" | "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> & {
+    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> & {
+    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;

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

@@ -1,25 +1,32 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { CompositeItem, Button } from '@ariakit/react';
-import { Gray05 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Gray05, Gray100, BoxBlue100, DarkBlue100, GreenLight100, Grimace100, Size4, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import Color from 'color';
-import { forwardRef } from 'react';
+import { forwardRef, createElement } from 'react';
+import { Text } from '../../text/text.js';
 import { Ghost } from '../../ghost/ghost.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
 import styles from './select-menu-grid-option.module.js';
 
-const SelectMenuGridSquare = /*#__PURE__*/forwardRef((props, ref) => jsx(SelectMenuGridOption, {
+const SelectMenuGridSquare = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(SelectMenuGridOption, {
   ...props,
+  ref: forwardedRef,
   variant: "square"
 }));
-const SelectMenuGridColorCircle = /*#__PURE__*/forwardRef((props, ref) => jsx(SelectMenuGridOption, {
+const SelectMenuGridColorCircle = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(SelectMenuGridOption, {
   ...props,
+  ref: forwardedRef,
   variant: "colorCircle"
 }));
+const SelectMenuGridWithLabel = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(SelectMenuGridOption, {
+  ...props,
+  ref: forwardedRef,
+  variant: "labeled"
+}));
 const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     active,
-    'aria-label': ariaLabel,
     children,
     className,
     color,
@@ -27,12 +34,14 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     loading,
     loadingAriaLabel,
     disabled,
-    tooltipSide = 'bottom',
     ...restProps
   } = props;
+  const isWithLabel = variant === 'labeled';
   const isButtonDisabled = disabled || loading;
   const isButtonActive = !disabled && !loading && active;
-  const shouldShowTooltip = !isButtonDisabled;
+  const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
+  const shouldShowTooltip = !isButtonDisabled && !isWithLabel;
+  const ariaLabel = !isWithLabel ? props['aria-label'] : props.label;
   // TODO: [DSYS-764] use IconButton instead of AriakitButton
   const button = jsx(CompositeItem, {
     render: jsxs(Button, {
@@ -40,8 +49,10 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       "aria-label": loading ? loadingAriaLabel : ariaLabel,
       className: clsx(styles.optionButton, className, {
+        [styles.labeled]: isWithLabel,
         [styles.loading]: loading,
-        [styles.active]: isButtonActive
+        [styles.active]: isButtonActive,
+        [styles.dragging]: isButtonDragged
       }),
       disabled: isButtonDisabled,
       children: [variant === 'colorCircle' && jsx(ColorSwatch, {
@@ -50,16 +61,21 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }), variant === 'square' && jsx(Icon, {
         loading: !!loading,
         children: children
+      }), variant === 'labeled' && jsx(ItemWithLabel, {
+        ...props
       })]
     })
   });
   return jsxs("div", {
-    className: styles.buttonWrapper,
+    className: clsx(styles.buttonWrapper, {
+      [styles.withLabel]: isWithLabel,
+      [styles['withLabel--default']]: isWithLabel && props.size === 'default'
+    }),
     role: "gridcell",
     children: [shouldShowTooltip && jsx(Tooltip, {
       "aria-hidden": true,
       content: ariaLabel,
-      side: tooltipSide,
+      side: props.tooltipSide,
       children: button
     }), !shouldShowTooltip && button]
   });
@@ -103,5 +119,40 @@ const Icon = ({
     })
   });
 };
+const iconColor = {
+  default: Gray100,
+  box: BoxBlue100,
+  sign: DarkBlue100,
+  forms: GreenLight100,
+  docgen: Grimace100
+};
+const iconSize = {
+  default: Size4,
+  large: Size6
+};
+const ItemWithLabel = ({
+  size,
+  colorVariant,
+  label,
+  icon
+}) => {
+  const iconElement = /*#__PURE__*/createElement(icon, {
+    color: iconColor[colorVariant],
+    width: iconSize[size],
+    height: iconSize[size],
+    role: 'presentation'
+  });
+  return jsxs(Fragment, {
+    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
+    })]
+  });
+};
 
-export { SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare };
+export { ItemWithLabel, SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare, SelectMenuGridWithLabel };

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

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

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

@@ -1,11 +1,16 @@
 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';
 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;
     /** The aria-label for the ghost state. */
     loadingAriaLabel: string;
 }
+export interface Dragging {
+    dragging: boolean;
+    draggable: boolean;
+}
 export type CommonOptionProps = {
     /** The aria-label for the grid option */
     'aria-label': string;
@@ -22,9 +27,18 @@ export type SelectMenuGridColorCircleProps = CommonOptionProps & {
     /** The color of the swatch  */
     color: string;
 };
-export type SelectMenuOptionProps = Partial<SelectMenuGridSquareProps> & Partial<SelectMenuGridColorCircleProps> & {
+export type SelectMenuGridWithLabelProps = Omit<CommonOptionProps, 'aria-label' | 'tooltipSide' | 'draggable'> & {
+    size: 'default' | 'large';
+    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 SelectMenuOptionProps = SelectMenuOptionIconsProps | (SelectMenuGridWithLabelProps & {
+    variant: 'labeled';
+});
 export type SelectMenuGridRowProps = CompositeRowProps;
 export type SelectMenuGridProps = {
     /** The grid options to render */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "8.7.1",
+    "version": "8.8.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "08cead4b10a66b448ac22ef4ad6393b696a0371b",
+    "gitHead": "5c7f39250a18eacf7e99ee41713ea791495acb63",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {