@box/blueprint-web 12.69.0 → 12.69.2

package/dist/lib-esm/index.css

@@ -271,23 +271,23 @@
     background-color:var(--loading-indicator-segment-light-background);
   }
 }
-.bp_base_button_module_button--0e19f[data-modern=true]{
+
+.bp_base_button_module_button--85575[data-modern=true]{
   --button-border-radius:var(--bp-radius-10);
 }
-.bp_base_button_module_button--0e19f[data-modern=true]:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--85575[data-modern=true]:not(:disabled)[data-focus-visible]{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_primary--0e19f{
-  --button-color:var(--bp-text-text-brand-on-color);
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_primary--85575{
+  --button-color:var(--bp-text-text-on-dark);
   --button-background:var(--bp-surface-surface-brand);
   --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
-  --button-disabled-background:var(--bp-surface-surface-brand-disabled);
   --button-focus-or-hover-background:var(--bp-surface-surface-brand-hover);
   --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-hover);
   --button-active-background:var(--bp-surface-surface-brand-pressed);
   --button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_secondary--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_secondary--85575{
   --button-color:var(--bp-text-text-on-light);
   --button-background:var(--bp-surface-cta-surface-secondary);
   --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
@@ -295,14 +295,16 @@
   --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
   --button-active-background:var(--bp-surface-cta-surface-secondary-pressed);
   --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
+  --button-backdrop-filter:blur(16px);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_tertiary--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_tertiary--85575{
   --button-color:var(--bp-text-cta-link);
-  --button-background:#0000;
+  --button-background:var(--bp-surface-cta-surface-tertiary);
   --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
   --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
+  --button-backdrop-filter:blur(16px);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_outline--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_outline--85575{
   --button-color:var(--bp-text-text-on-light);
   --button-background:var(--bp-surface-cta-surface-outline);
   --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -310,45 +312,51 @@
   --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
   --button-active-background:var(--bp-surface-cta-surface-outline-pressed);
   --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
+  --button-backdrop-filter:blur(16px);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_small--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_small--85575{
   --button-small-gap:var(--bp-space-010);
   --button-small-min-height:var(--bp-size-080);
   --button-small-padding:0 var(--bp-size-040);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_small--0e19f.bp_base_button_module_isIconButton--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_small--85575.bp_base_button_module_isIconButton--85575{
   --icon-button-small-width:var(--bp-size-080);
   --icon-button-small-height:var(--bp-size-080);
   --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_large--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_small--85575.bp_base_button_module_isTextWithIconButton--85575{
+  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
+}
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_large--85575{
   --button-large-gap:var(--bp-space-020);
   --button-large-min-height:var(--bp-size-100);
   --button-large-padding:0 var(--bp-size-040);
 }
-.bp_base_button_module_button--0e19f[data-modern=true].bp_base_button_module_large--0e19f.bp_base_button_module_isIconButton--0e19f{
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_large--85575.bp_base_button_module_isIconButton--85575{
   --icon-button-large-width:var(--bp-size-100);
   --icon-button-large-height:var(--bp-size-100);
   --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
 }
+.bp_base_button_module_button--85575[data-modern=true].bp_base_button_module_large--85575.bp_base_button_module_isTextWithIconButton--85575{
+  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
+}
 
-.bp_base_button_module_button--0e19f[data-modern=false]{
+.bp_base_button_module_button--85575[data-modern=false]{
   --button-border-radius:var(--radius-2);
 }
-.bp_base_button_module_button--0e19f[data-modern=false]:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--85575[data-modern=false]:not(:disabled)[data-focus-visible]{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_primary--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_primary--85575{
   --button-color:var(--text-text-brand-on-color);
   --button-background:var(--surface-surface-brand);
   --button-border:var(--border-1) solid var(--surface-surface-brand);
-  --button-disabled-background:var(--surface-surface-brand-disabled);
   --button-focus-or-hover-background:var(--surface-surface-brand-hover);
   --button-focus-or-hover-border:var(--border-1) solid var(--surface-surface-brand-hover);
   --button-active-background:var(--surface-surface-brand-pressed);
   --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_secondary--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_secondary--85575{
   --button-color:var(--text-text-on-light);
   --button-background:var(--surface-cta-surface-secondary);
   --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -356,15 +364,17 @@
   --button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-secondary-hover);
   --button-active-background:var(--surface-cta-surface-secondary-pressed);
   --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
+  --button-backdrop-filter:none;
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_tertiary--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_tertiary--85575{
   --button-color:var(--text-cta-link);
   --button-background:#0000;
   --button-border:var(--border-1) solid #0000;
   --button-focus-or-hover-background:var(--surface-cta-surface-tertiary-hover);
   --button-active-background:var(--surface-cta-surface-tertiary-pressed);
+  --button-backdrop-filter:none;
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_outline--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_outline--85575{
   --button-color:var(--text-text-on-light);
   --button-background:var(--surface-cta-surface-outline);
   --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -372,29 +382,36 @@
   --button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-outline-hover);
   --button-active-background:var(--surface-cta-surface-outline-pressed);
   --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
+  --button-backdrop-filter:none;
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_small--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_small--85575{
   --button-small-gap:var(--space-1);
   --button-small-min-height:var(--size-8);
   --button-small-padding:0 var(--space-4);
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_small--0e19f.bp_base_button_module_isIconButton--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_small--85575.bp_base_button_module_isIconButton--85575{
   --icon-button-small-width:var(--size-8);
   --icon-button-small-height:var(--size-8);
   --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_large--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_small--85575.bp_base_button_module_isTextWithIconButton--85575{
+  --button-small-padding:0 var(--space-3);
+}
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_large--85575{
   --button-large-gap:var(--space-2);
   --button-large-min-height:var(--size-10);
   --button-large-padding:0 var(--space-4);
 }
-.bp_base_button_module_button--0e19f[data-modern=false].bp_base_button_module_large--0e19f.bp_base_button_module_isIconButton--0e19f{
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_large--85575.bp_base_button_module_isIconButton--85575{
   --icon-button-large-width:var(--size-10);
   --icon-button-large-height:var(--size-10);
   --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
 }
+.bp_base_button_module_button--85575[data-modern=false].bp_base_button_module_large--85575.bp_base_button_module_isTextWithIconButton--85575{
+  --button-large-padding:0 var(--space-4);
+}
 
-.bp_base_button_module_button--0e19f{
+.bp_base_button_module_button--85575{
   border-radius:var(--button-border-radius);
   cursor:pointer;
   font-family:var(--body-default-bold-font-family);
@@ -411,92 +428,98 @@
           user-select:none;
   white-space:nowrap;
 }
-.bp_base_button_module_button--0e19f,.bp_base_button_module_button--0e19f .bp_base_button_module_icon--0e19f{
+.bp_base_button_module_button--85575,.bp_base_button_module_button--85575 .bp_base_button_module_icon--85575{
   align-items:center;
   display:flex;
 }
-.bp_base_button_module_button--0e19f:disabled{
+.bp_base_button_module_button--85575:disabled{
   opacity:.3;
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_primary--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_primary--85575{
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_primary--0e19f:disabled{
-  background:var(--button-disabled-background);
-}
-.bp_base_button_module_button--0e19f.bp_base_button_module_primary--0e19f:not(:disabled):hover,.bp_base_button_module_button--0e19f.bp_base_button_module_primary--0e19f:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--85575.bp_base_button_module_primary--85575:not(:disabled):hover,.bp_base_button_module_button--85575.bp_base_button_module_primary--85575:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_primary--0e19f:not(:disabled):active{
+.bp_base_button_module_button--85575.bp_base_button_module_primary--85575:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_secondary--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_secondary--85575{
+  backdrop-filter:var(--button-backdrop-filter);
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_secondary--0e19f:not(:disabled):hover,.bp_base_button_module_button--0e19f.bp_base_button_module_secondary--0e19f:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--85575.bp_base_button_module_secondary--85575:not(:disabled):hover,.bp_base_button_module_button--85575.bp_base_button_module_secondary--85575:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_secondary--0e19f:not(:disabled):active{
+.bp_base_button_module_button--85575.bp_base_button_module_secondary--85575:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_tertiary--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_tertiary--85575{
+  backdrop-filter:var(--button-backdrop-filter);
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_tertiary--0e19f:not(:disabled):hover,.bp_base_button_module_button--0e19f.bp_base_button_module_tertiary--0e19f:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--85575.bp_base_button_module_tertiary--85575:not(:disabled):hover,.bp_base_button_module_button--85575.bp_base_button_module_tertiary--85575:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_tertiary--0e19f:not(:disabled):active{
+.bp_base_button_module_button--85575.bp_base_button_module_tertiary--85575:not(:disabled):active{
   background:var(--button-active-background);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_outline--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_outline--85575{
+  backdrop-filter:var(--button-backdrop-filter);
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_outline--0e19f:not(:disabled):hover,.bp_base_button_module_button--0e19f.bp_base_button_module_outline--0e19f:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--85575.bp_base_button_module_outline--85575:not(:disabled):hover,.bp_base_button_module_button--85575.bp_base_button_module_outline--85575:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_outline--0e19f:not(:disabled):active{
+.bp_base_button_module_button--85575.bp_base_button_module_outline--85575:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_small--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_small--85575{
   gap:var(--button-small-gap);
   min-height:var(--button-small-min-height);
   padding:var(--button-small-padding);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_small--0e19f.bp_base_button_module_isIconButton--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_small--85575.bp_base_button_module_isIconButton--85575{
   height:var(--icon-button-small-height);
   min-height:unset;
   padding:var(--icon-button-small-padding);
   width:var(--icon-button-small-width);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_large--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_small--85575.bp_base_button_module_isTextWithIconButton--85575{
+  padding:var(--button-small-padding);
+}
+.bp_base_button_module_button--85575.bp_base_button_module_large--85575{
   gap:var(--button-large-gap);
   min-height:var(--button-large-min-height);
   padding:var(--button-large-padding);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_large--0e19f.bp_base_button_module_isIconButton--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_large--85575.bp_base_button_module_isIconButton--85575{
   height:var(--icon-button-large-height);
   padding:var(--icon-button-large-padding);
   width:var(--icon-button-large-width);
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_hide--0e19f{
+.bp_base_button_module_button--85575.bp_base_button_module_large--85575.bp_base_button_module_isTextWithIconButton--85575{
+  padding:var(--button-large-padding);
+}
+.bp_base_button_module_button--85575.bp_base_button_module_hide--85575{
   pointer-events:none;
   position:relative;
 }
-.bp_base_button_module_button--0e19f.bp_base_button_module_hide--0e19f span{
+.bp_base_button_module_button--85575.bp_base_button_module_hide--85575 span{
   color:#0000;
   opacity:0;
 }

package/dist/lib-esm/primitives/base-button/base-button-context.js

@@ -1,9 +1,9 @@
 import { createContext, useContext } from 'react';
 
 const BaseButtonContext = /*#__PURE__*/createContext({
-  isIconButton: false,
   variant: 'primary',
-  size: 'small'
+  size: 'small',
+  buttonType: 'text-only'
 });
 const useBaseButtonContext = () => useContext(BaseButtonContext);
 

package/dist/lib-esm/primitives/base-button/base-button-icon.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useCallback, createElement } from 'react';
 import clsx from 'clsx';
-import { getIconSize, buttonVariantToIconColorMap } from './utils.js';
+import { forwardRef, useCallback, createElement } from 'react';
 import { useBaseButtonContext } from './base-button-context.js';
 import styles from './base-button.module.js';
+import { getIconSize, buttonVariantToIconColorMap } from './utils.js';
 
 const BaseButtonIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -14,29 +14,30 @@ const BaseButtonIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     loading,
     size,
     variant,
-    isIconButton,
+    buttonType,
     ariaLabel
   } = useBaseButtonContext();
+  const isIconOnly = buttonType === 'icon-only';
   const renderIcon = useCallback(() => {
     if (!icon) {
       return null;
     }
-    if (isIconButton && !ariaLabel) {
+    if (isIconOnly && !ariaLabel) {
       // eslint-disable-next-line no-console
       console.warn('Icon only button must have an aria-label');
       return null;
     }
     return /*#__PURE__*/createElement(icon, {
-      ...getIconSize(size, isIconButton),
+      ...getIconSize(size, isIconOnly),
       color: loading ? 'transparent' : buttonVariantToIconColorMap[variant],
       role: 'presentation',
       ...iconProps
     });
-  }, [icon, size, loading, variant, isIconButton, iconProps, ariaLabel]);
+  }, [icon, isIconOnly, ariaLabel, size, loading, variant, iconProps]);
   return jsx("span", {
     ref: forwardedRef,
     className: clsx(styles.icon, {
-      [styles.isIconButton]: isIconButton,
+      [styles.isIconButton]: isIconOnly,
       [styles.loading]: loading
     }),
     children: renderIcon()

package/dist/lib-esm/primitives/base-button/base-button.js

@@ -8,6 +8,7 @@ import { getButtonOptions } from '../../utils/getButtonOptions.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { BaseButtonContext } from './base-button-context.js';
 import { BaseButtonIcon } from './base-button-icon.js';
+import { BaseButtonLabel } from './base-button-label.js';
 import styles from './base-button.module.js';
 import { loadingIndicatorVariantMap } from './utils.js';
 
@@ -26,24 +27,32 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     enableModernizedComponents
   } = useBlueprintModernization();
   const ref = useRef(null);
-  const isIconButton = useMemo(() => {
+  const buttonType = useMemo(() => {
     const childArray = Children.toArray(children);
-    const firstChild = childArray[0];
-    return childArray.length === 1 && /*#__PURE__*/isValidElement(firstChild) && firstChild.type === BaseButtonIcon;
+    const hasIcon = childArray.some(child => /*#__PURE__*/isValidElement(child) && child.type === BaseButtonIcon);
+    const hasText = childArray.some(child => /*#__PURE__*/isValidElement(child) && child.type === BaseButtonLabel);
+    if (hasIcon && hasText) {
+      return 'text-with-icon';
+    }
+    if (hasIcon && !hasText) {
+      return 'icon-only';
+    }
+    return 'text-only';
   }, [children]);
   const context = useMemo(() => ({
     ariaLabel,
     loading,
     size,
     variant,
-    isIconButton
-  }), [ariaLabel, loading, size, variant, isIconButton]);
+    buttonType
+  }), [ariaLabel, loading, size, variant, buttonType]);
   return jsx(Button, {
     ...rest,
     ref: useForkRef(ref, forwardedRef),
     "aria-label": loading ? undefined : ariaLabel,
     className: clsx([styles.button, styles[variant], styles[size]], {
-      [styles.isIconButton]: isIconButton,
+      [styles.isIconButton]: buttonType === 'icon-only',
+      [styles.isTextWithIconButton]: buttonType === 'text-with-icon',
       [styles.hide]: loading
     }, className),
     "data-modern": enableModernizedComponents,

package/dist/lib-esm/primitives/base-button/base-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"button":"bp_base_button_module_button--0e19f","primary":"bp_base_button_module_primary--0e19f","secondary":"bp_base_button_module_secondary--0e19f","tertiary":"bp_base_button_module_tertiary--0e19f","outline":"bp_base_button_module_outline--0e19f","small":"bp_base_button_module_small--0e19f","isIconButton":"bp_base_button_module_isIconButton--0e19f","large":"bp_base_button_module_large--0e19f","icon":"bp_base_button_module_icon--0e19f","hide":"bp_base_button_module_hide--0e19f"};
+var styles = {"button":"bp_base_button_module_button--85575","primary":"bp_base_button_module_primary--85575","secondary":"bp_base_button_module_secondary--85575","tertiary":"bp_base_button_module_tertiary--85575","outline":"bp_base_button_module_outline--85575","small":"bp_base_button_module_small--85575","isIconButton":"bp_base_button_module_isIconButton--85575","isTextWithIconButton":"bp_base_button_module_isTextWithIconButton--85575","large":"bp_base_button_module_large--85575","icon":"bp_base_button_module_icon--85575","hide":"bp_base_button_module_hide--85575"};
 
 export { styles as default };

package/dist/lib-esm/primitives/base-button/types.d.ts

@@ -24,5 +24,5 @@ export type BaseButtonIconProps = ComponentPropsWithRef<'span'> & {
 };
 export type BaseButtonContextType = Pick<BaseButtonProps, 'loading'> & Required<Pick<BaseButtonProps, 'variant' | 'size'>> & {
     ariaLabel?: BaseButtonProps['aria-label'];
-    isIconButton: boolean;
+    buttonType: 'text-only' | 'icon-only' | 'text-with-icon';
 };

package/dist/lib-esm/primitives/base-button/utils.d.ts

@@ -1,6 +1,6 @@
 import { type LoadingIndicatorProps } from '../../loading-indicator/loading-indicator';
 import { type BaseButtonProps } from './types';
-export declare const getIconSize: (buttonSize: NonNullable<BaseButtonProps["size"]>, isIconButton: boolean) => {
+export declare const getIconSize: (buttonSize: NonNullable<BaseButtonProps["size"]>, isIconButton: boolean, enableModernizedComponents?: boolean) => {
     readonly width: string;
     readonly height: string;
 };

package/dist/lib-esm/primitives/base-button/utils.js

@@ -1,11 +1,16 @@
-import { IconIconOnDark, IconIconOnLight, TextCtaLink, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import { IconIconOnDark, IconIconOnLight, TextCtaLink, bpSize050, bpSize040, bpSize030, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
 
-const getIconSize = (buttonSize, isIconButton) => {
+const getIconSize = (buttonSize, isIconButton, enableModernizedComponents = false) => {
+  const isLarge = buttonSize === 'large';
   let size;
-  if (isIconButton) {
-    size = buttonSize === 'large' ? Size5 : Size4;
+  if (enableModernizedComponents && isIconButton) {
+    size = isLarge ? bpSize050 : bpSize040;
+  } else if (enableModernizedComponents && !isIconButton) {
+    size = isLarge ? bpSize040 : bpSize030;
+  } else if (!enableModernizedComponents && isIconButton) {
+    size = isLarge ? Size5 : Size4;
   } else {
-    size = buttonSize === 'large' ? Size4 : Size3;
+    size = isLarge ? Size4 : Size3;
   }
   return {
     width: size,

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

@@ -12,9 +12,19 @@ interface ColorProps {
     colorIndex?: number;
 }
 type CommonProps = {
-    /** Text inside the Status. Needs to be an UPPERCASED string. */
+    /**
+     * Text inside the Status. Needs to be an UPPERCASED string.
+     * This text is used as an icon's aria-label when hideText is true.
+     * Passing an empty string or null should only be done in exceptional cases,
+     * when the status does not have any meaning that can be conveyed by a screen reader
+     * or an icon with aria-label is already passed.
+     */
     text: string;
-    /** Hide the text, it is still visible to screen readers */
+    /**
+     * Hide the text visually, but it will still be available to screen readers.
+     * This can be useful for accessibility purposes when the visual text is not needed.
+     * When hideText is true, the text is used as an icon's aria-label.
+     */
     hideText?: boolean;
     /** Should the component be interactive (button without onClick) */
     interactive?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.69.0",
+    "version": "12.69.2",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.66.0",
+        "@box/blueprint-web-assets": "^4.67.0",
         "@internationalized/date": "^3.7.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.14.2",
+        "@box/storybook-utils": "^0.14.3",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",