@box/blueprint-web 8.2.1 → 8.3.1

package/lib-esm/index.css

@@ -4787,22 +4787,23 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   display:flex;
   flex-direction:row;
 }
-.bp_select_menu_grid_option_module_square--921c1{
+
+.bp_select_menu_grid_option_module_square--6ad66{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_select_menu_grid_option_module_square--921c1,.bp_select_menu_grid_option_module_square--921c1 .bp_select_menu_grid_option_module_outlineHost--921c1{
+.bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_square--6ad66 .bp_select_menu_grid_option_module_outlineHost--6ad66{
   align-items:center;
   border-radius:var(--radius-3);
   display:flex;
   justify-content:center;
 }
-.bp_select_menu_grid_option_module_square--921c1 .bp_select_menu_grid_option_module_outlineHost--921c1{
+.bp_select_menu_grid_option_module_square--6ad66 .bp_select_menu_grid_option_module_outlineHost--6ad66{
   height:var(--size-7);
   width:var(--size-7);
 }
 
-.bp_select_menu_grid_option_module_circle--921c1{
+.bp_select_menu_grid_option_module_circle--6ad66{
   align-items:center;
   background-clip:content-box;
   background-color:var(--gray-white);
@@ -4814,10 +4815,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--921c1.bp_select_menu_grid_option_module_loading--921c1{
+.bp_select_menu_grid_option_module_circle--6ad66.bp_select_menu_grid_option_module_loading--6ad66{
   border-color:var(--gray-white);
 }
-.bp_select_menu_grid_option_module_circle--921c1 .bp_select_menu_grid_option_module_color--921c1{
+.bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_color--6ad66{
   background-color:var(--circleColor);
   border:var(--border-1) solid var(--circleBorderColor);
   border-radius:50%;
@@ -4825,8 +4826,22 @@ 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--6ad66 .bp_select_menu_grid_option_module_strikeThrough--6ad66{
+  position:relative;
+}
+.bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_strikeThrough--6ad66::after{
+  background-color:var(--watermelon-red-100);
+  border-radius:var(--radius-1);
+  content:"";
+  height:.15625rem;
+  left:.0625rem;
+  position:absolute;
+  top:45%;
+  transform:rotate(-45deg);
+  width:90%;
+}
 
-.bp_select_menu_grid_option_module_optionButton--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66{
   align-items:center;
   background-color:initial;
   border:none;
@@ -4840,32 +4855,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
           user-select:none;
   width:var(--size-8);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1:hover .bp_select_menu_grid_option_module_square--921c1,.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_square--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66:hover .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_square--6ad66{
   background-color:var(--surface-cta-surface-outline-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1:hover .bp_select_menu_grid_option_module_circle--921c1,.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_circle--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66:hover .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_circle--6ad66{
   background-color:var(--surface-option-grid-surface-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1.bp_select_menu_grid_option_module_active--921c1 .bp_select_menu_grid_option_module_square--921c1,.bp_select_menu_grid_option_module_optionButton--921c1:active .bp_select_menu_grid_option_module_square--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:active .bp_select_menu_grid_option_module_square--6ad66{
   background-color:var(--surface-cta-surface-outline-pressed);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1.bp_select_menu_grid_option_module_active--921c1 .bp_select_menu_grid_option_module_circle--921c1,.bp_select_menu_grid_option_module_optionButton--921c1:active .bp_select_menu_grid_option_module_circle--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:active .bp_select_menu_grid_option_module_circle--6ad66{
   border:var(--border-2) solid var(--circleColor);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1.bp_select_menu_grid_option_module_loading--921c1,.bp_select_menu_grid_option_module_optionButton--921c1:disabled{
+.bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_loading--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:disabled{
   cursor:default;
 }
-.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--6ad66{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible] .bp_select_menu_grid_option_module_circle--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_circle--6ad66{
   border-color:var(--surface-option-grid-surface-hover);
 }
-.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible].bp_select_menu_grid_option_module_active--921c1 .bp_select_menu_grid_option_module_circle--921c1,.bp_select_menu_grid_option_module_optionButton--921c1[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--921c1{
+.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible].bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--6ad66{
   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--921c1:disabled:not(.bp_select_menu_grid_option_module_loading--921c1){
+.bp_select_menu_grid_option_module_optionButton--6ad66:disabled:not(.bp_select_menu_grid_option_module_loading--6ad66){
   opacity:.3;
 }
 
@@ -5018,7 +5033,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   opacity:.5;
 }
 
-.bp_radio_group_module_root--365a1{
+.bp_radio_group_module_root--c72b9{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -5031,31 +5046,31 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-transform:none;
 }
 
-.bp_radio_group_module_horizontal--365a1{
+.bp_radio_group_module_horizontal--c72b9{
   flex-direction:row;
   gap:1.625rem;
 }
 
-.bp_radio_group_module_radioOption--365a1{
+.bp_radio_group_module_radioOption--c72b9{
   display:flex;
   flex-direction:column;
 }
-.bp_radio_group_module_radioOption--365a1 .bp_radio_group_module_label--365a1{
+.bp_radio_group_module_radioOption--c72b9 .bp_radio_group_module_label--c72b9{
   align-items:flex-start;
   cursor:pointer;
   display:inline-flex;
   gap:var(--size-3);
   line-height:var(--body-default-line-height);
 }
-.bp_radio_group_module_radioOption--365a1 .bp_radio_group_module_description--365a1{
+.bp_radio_group_module_radioOption--c72b9 .bp_radio_group_module_description--c72b9{
   padding-left:calc(var(--size-4) + var(--size-3));
 }
-.bp_radio_group_module_radioOption--365a1.bp_radio_group_module_disabled--365a1 .bp_radio_group_module_label--365a1{
+.bp_radio_group_module_radioOption--c72b9.bp_radio_group_module_disabled--c72b9 .bp_radio_group_module_label--c72b9,[role=radiogroup][data-disabled] .bp_radio_group_module_radioOption--c72b9 .bp_radio_group_module_label--c72b9{
   color:var(--text-text-on-light-secondary);
   cursor:default;
 }
 
-.bp_radio_group_module_radioButton--365a1{
+.bp_radio_group_module_radioButton--c72b9{
   all:unset;
   align-items:center;
   background-color:var(--surface-radio-surface);
@@ -5069,33 +5084,33 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   margin:calc((var(--body-default-line-height) - var(--size-4))/2) 0 0 0;
   width:var(--size-4);
 }
-.bp_radio_group_module_radioButton--365a1 .bp_radio_group_module_indicator--365a1{
+.bp_radio_group_module_radioButton--c72b9 .bp_radio_group_module_indicator--c72b9{
   background-color:var(--surface-radio-surface-selected);
   border-radius:50%;
   height:var(--size-2);
   transition:transform .1s;
   width:var(--size-2);
 }
-.bp_radio_group_module_radioButton--365a1:focus-visible{
+.bp_radio_group_module_radioButton--c72b9:focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_radio_group_module_radioButton--365a1[data-disabled]{
+.bp_radio_group_module_radioButton--c72b9[data-disabled]{
   opacity:60%;
 }
-.bp_radio_group_module_radioButton--365a1[data-state=unchecked]{
+.bp_radio_group_module_radioButton--c72b9[data-state=unchecked]{
   background-color:var(--surface-radio-surface);
   border:var(--border-2) solid var(--border-radio-border);
 }
-.bp_radio_group_module_radioButton--365a1[data-state=unchecked] .bp_radio_group_module_indicator--365a1{
+.bp_radio_group_module_radioButton--c72b9[data-state=unchecked] .bp_radio_group_module_indicator--c72b9{
   transform:scale(0);
 }
-.bp_radio_group_module_radioButton--365a1:not([data-disabled]):focus-visible,.bp_radio_group_module_radioButton--365a1:not([data-disabled]):hover{
+.bp_radio_group_module_radioButton--c72b9:not([data-disabled]):focus-visible,.bp_radio_group_module_radioButton--c72b9:not([data-disabled]):hover{
   border:var(--border-2) solid var(--border-radio-border-hover);
 }
-.bp_radio_group_module_radioButton--365a1:not([data-disabled]):focus-visible[data-state=checked],.bp_radio_group_module_radioButton--365a1:not([data-disabled]):hover[data-state=checked]{
+.bp_radio_group_module_radioButton--c72b9:not([data-disabled]):focus-visible[data-state=checked],.bp_radio_group_module_radioButton--c72b9:not([data-disabled]):hover[data-state=checked]{
   border:var(--border-2) solid var(--border-radio-border-selected-hover);
 }
-.bp_radio_group_module_radioButton--365a1:not([data-disabled]):focus-visible[data-state=checked] .bp_radio_group_module_indicator--365a1,.bp_radio_group_module_radioButton--365a1:not([data-disabled]):hover[data-state=checked] .bp_radio_group_module_indicator--365a1{
+.bp_radio_group_module_radioButton--c72b9:not([data-disabled]):focus-visible[data-state=checked] .bp_radio_group_module_indicator--c72b9,.bp_radio_group_module_radioButton--c72b9:not([data-disabled]):hover[data-state=checked] .bp_radio_group_module_indicator--c72b9{
   background-color:var(--surface-radio-surface-selected-hover);
 }
 

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CompositeItem, Button } from '@ariakit/react';
+import { Gray05 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import Color from 'color';
 import { forwardRef } from 'react';
@@ -67,9 +68,11 @@ const ColorSwatch = ({
   color,
   loading
 }) => {
-  const borderColor = new Color(color).darken(0.5).hex();
+  const isNoColorOption = color === 'no-color';
+  const finalColor = isNoColorOption ? Gray05 : color;
+  const borderColor = new Color(finalColor).darken(0.5).hex();
   const style = {
-    '--circleColor': color,
+    '--circleColor': finalColor,
     '--circleBorderColor': borderColor
   };
   return jsx("div", {
@@ -80,7 +83,9 @@ const ColorSwatch = ({
     children: loading ? jsx(Ghost, {
       variant: "circle"
     }) : jsx("div", {
-      className: styles.color
+      className: clsx(styles.color, {
+        [styles.strikeThrough]: isNoColorOption
+      })
     })
   });
 };

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--921c1","outlineHost":"bp_select_menu_grid_option_module_outlineHost--921c1","circle":"bp_select_menu_grid_option_module_circle--921c1","loading":"bp_select_menu_grid_option_module_loading--921c1","color":"bp_select_menu_grid_option_module_color--921c1","optionButton":"bp_select_menu_grid_option_module_optionButton--921c1","active":"bp_select_menu_grid_option_module_active--921c1"};
+var styles = {"square":"bp_select_menu_grid_option_module_square--6ad66","outlineHost":"bp_select_menu_grid_option_module_outlineHost--6ad66","circle":"bp_select_menu_grid_option_module_circle--6ad66","loading":"bp_select_menu_grid_option_module_loading--6ad66","color":"bp_select_menu_grid_option_module_color--6ad66","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--6ad66","optionButton":"bp_select_menu_grid_option_module_optionButton--6ad66","active":"bp_select_menu_grid_option_module_active--6ad66"};
 
 export { styles as default };

package/lib-esm/radio-group/radio-group.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"root":"bp_radio_group_module_root--365a1","horizontal":"bp_radio_group_module_horizontal--365a1","radioOption":"bp_radio_group_module_radioOption--365a1","label":"bp_radio_group_module_label--365a1","description":"bp_radio_group_module_description--365a1","disabled":"bp_radio_group_module_disabled--365a1","radioButton":"bp_radio_group_module_radioButton--365a1","indicator":"bp_radio_group_module_indicator--365a1"};
+var styles = {"root":"bp_radio_group_module_root--c72b9","horizontal":"bp_radio_group_module_horizontal--c72b9","radioOption":"bp_radio_group_module_radioOption--c72b9","label":"bp_radio_group_module_label--c72b9","description":"bp_radio_group_module_description--c72b9","disabled":"bp_radio_group_module_disabled--c72b9","radioButton":"bp_radio_group_module_radioButton--c72b9","indicator":"bp_radio_group_module_indicator--c72b9"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "8.2.1",
+    "version": "8.3.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "c610c508865c55ba584032236e9f052efb12b4e4",
+    "gitHead": "bef9db208515d53f0fb75d387d1740b389f6f753",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {