@box/blueprint-web 7.11.0 → 7.13.1

package/lib-esm/index.css

@@ -314,7 +314,7 @@
   }
 }
 
-.bp_base_button_module_button--bac20{
+.bp_base_button_module_button--7030f{
   border-radius:var(--radius-2);
   cursor:pointer;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -330,96 +330,97 @@
           user-select:none;
   white-space:nowrap;
 }
-.bp_base_button_module_button--bac20,.bp_base_button_module_button--bac20 .bp_base_button_module_icon--bac20{
+.bp_base_button_module_button--7030f,.bp_base_button_module_button--7030f .bp_base_button_module_icon--7030f{
   align-items:center;
   display:flex;
 }
-.bp_base_button_module_button--bac20:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--7030f:not(:disabled)[data-focus-visible]{
   box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.bp_base_button_module_button--bac20:disabled{
+.bp_base_button_module_button--7030f:disabled{
   opacity:.3;
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_primary--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_primary--7030f{
   background:var(--surface-surface-brand);
   border:var(--border-1) solid var(--surface-surface-brand);
   color:var(--text-text-brand-on-color);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_primary--bac20:disabled{
+.bp_base_button_module_button--7030f.bp_base_button_module_primary--7030f:disabled{
   background:var(--surface-surface-brand-disabled);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_primary--bac20:not(:disabled):hover,.bp_base_button_module_button--bac20.bp_base_button_module_primary--bac20:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--7030f.bp_base_button_module_primary--7030f:not(:disabled):hover,.bp_base_button_module_button--7030f.bp_base_button_module_primary--7030f:not(:disabled)[data-focus-visible]{
   background:var(--surface-surface-brand-hover);
   border:var(--border-1) solid var(--surface-surface-brand-hover);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_primary--bac20:not(:disabled):active{
+.bp_base_button_module_button--7030f.bp_base_button_module_primary--7030f:not(:disabled):active{
   background:var(--surface-surface-brand-pressed);
   border:var(--border-1) solid var(--surface-surface-brand-pressed);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_secondary--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_secondary--7030f{
   background:var(--surface-cta-surface-secondary);
   border:var(--border-1) solid var(--border-cta-border-secondary);
   color:var(--text-text-on-light);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_secondary--bac20:not(:disabled):hover,.bp_base_button_module_button--bac20.bp_base_button_module_secondary--bac20:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--7030f.bp_base_button_module_secondary--7030f:not(:disabled):hover,.bp_base_button_module_button--7030f.bp_base_button_module_secondary--7030f:not(:disabled)[data-focus-visible]{
   background:var(--surface-cta-surface-secondary-hover);
   border:var(--border-1) solid var(--border-cta-border-secondary-hover);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_secondary--bac20:not(:disabled):active{
+.bp_base_button_module_button--7030f.bp_base_button_module_secondary--7030f:not(:disabled):active{
   background:var(--surface-cta-surface-secondary-pressed);
   border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_tertiary--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_tertiary--7030f{
   background:var(--surface-cta-surface-tertiary);
   border:var(--border-1) solid #0000;
   color:var(--text-cta-link);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_tertiary--bac20:not(:disabled):hover,.bp_base_button_module_button--bac20.bp_base_button_module_tertiary--bac20:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--7030f.bp_base_button_module_tertiary--7030f:not(:disabled):hover,.bp_base_button_module_button--7030f.bp_base_button_module_tertiary--7030f:not(:disabled)[data-focus-visible]{
   background:var(--surface-cta-surface-tertiary-hover);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_tertiary--bac20:not(:disabled):active{
+.bp_base_button_module_button--7030f.bp_base_button_module_tertiary--7030f:not(:disabled):active{
   background:var(--surface-cta-surface-tertiary-pressed);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_outline--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_outline--7030f{
   background:#0000;
   border:var(--border-1) solid var(--border-cta-border-outline);
   color:var(--text-text-on-light);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_outline--bac20:not(:disabled):hover,.bp_base_button_module_button--bac20.bp_base_button_module_outline--bac20:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--7030f.bp_base_button_module_outline--7030f:not(:disabled):hover,.bp_base_button_module_button--7030f.bp_base_button_module_outline--7030f:not(:disabled)[data-focus-visible]{
   background:var(--surface-cta-surface-outline-hover);
   border:var(--border-1) solid var(--border-cta-border-outline-hover);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_outline--bac20:not(:disabled):active{
+.bp_base_button_module_button--7030f.bp_base_button_module_outline--7030f:not(:disabled):active{
   background:var(--surface-cta-surface-outline-pressed);
   border:var(--border-1) solid var(--border-cta-border-outline-pressed);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_small--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_small--7030f{
   gap:var(--space-1);
   min-height:var(--size-8);
   padding:0 var(--size-4);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_small--bac20.bp_base_button_module_isIconButton--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_small--7030f.bp_base_button_module_isIconButton--7030f{
   height:var(--size-8);
   min-height:unset;
   padding:0 calc((var(--size-8) - var(--size-4))/2);
   width:var(--size-8);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_large--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_large--7030f{
   gap:var(--space-2);
   min-height:var(--size-10);
   padding:0 var(--size-4);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_large--bac20.bp_base_button_module_isIconButton--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_large--7030f.bp_base_button_module_isIconButton--7030f{
   height:var(--size-10);
   padding:0 calc((var(--size-10) - var(--size-5))/2);
   width:var(--size-10);
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_hide--bac20{
+.bp_base_button_module_button--7030f.bp_base_button_module_hide--7030f{
   pointer-events:none;
   position:relative;
 }
-.bp_base_button_module_button--bac20.bp_base_button_module_hide--bac20 span{
+.bp_base_button_module_button--7030f.bp_base_button_module_hide--7030f span{
   color:#0000;
+  opacity:0;
 }
 
 .bp_base_inline_notice_module_noticeWrapper--2ece9{
@@ -1134,10 +1135,8 @@
   cursor:default;
 }
 
-.bp_icon_button_module_iconButton--a3df7{
+.bp_icon_button_module_iconButton--b6e1c{
   align-items:center;
-  background:var(--surface-cta-surface-icon);
-  border:0;
   border-radius:var(--radius-2);
   border-style:none;
   cursor:pointer;
@@ -1145,82 +1144,94 @@
   justify-content:center;
   padding:0;
 }
-.bp_icon_button_module_iconButton--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
-  fill:var(--icon-cta-icon);
-}
-.bp_icon_button_module_iconButton--a3df7[aria-disabled=true]{
+.bp_icon_button_module_iconButton--b6e1c[aria-disabled=true]{
   background:var(--surface-cta-surface-icon-disabled);
   opacity:.3;
 }
-.bp_icon_button_module_iconButton--a3df7[aria-disabled=true] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c[aria-disabled=true] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--gray-50);
 }
-.bp_icon_button_module_iconButton--a3df7:focus-visible{
+.bp_icon_button_module_iconButton--b6e1c:focus-visible{
   outline:none;
 }
-.bp_icon_button_module_iconButton--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c[data-focus-visible]{
   outline:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_icon_button_module_iconButton--a3df7:hover,.bp_icon_button_module_iconButton--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c{
+  background:var(--surface-cta-surface-icon);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c .bp_icon_button_module_icon--b6e1c *{
+  fill:var(--icon-cta-icon);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:hover .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-focus-visible] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7:active,.bp_icon_button_module_iconButton--a3df7[data-active]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:active .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-active] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_large--a3df7{
-  height:var(--size-10);
-  width:var(--size-10);
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c{
+  background:var(--surface-cta-surface-icon);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small--a3df7{
-  height:var(--size-8);
-  width:var(--size-8);
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c[data-focus-visible]{
+  background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_x-small--a3df7{
-  height:var(--size-6);
-  width:var(--size-6);
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c[data-active]{
+  background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c{
   background:var(--surface-cta-surface-icon);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-on-color);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:hover,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:hover .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-focus-visible] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-on-color-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:active,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-active]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:active .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-active] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-on-color-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c{
   background:var(--surface-cta-surface-icon-utility);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-utility);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:hover,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-focus-visible]{
   background:var(--surface-cta-surface-icon-utility-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:hover .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-focus-visible] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-utility-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:active,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-active]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-active]{
   background:var(--surface-cta-surface-icon-utility-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:active .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-active] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-utility-pressed);
 }
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_large--b6e1c{
+  height:var(--size-10);
+  width:var(--size-10);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small--b6e1c{
+  height:var(--size-8);
+  width:var(--size-8);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_x-small--b6e1c{
+  height:var(--size-6);
+  width:var(--size-6);
+}
 
 .bp_collapsible_section_module_collapsibleSection--f411c{
   width:100%;

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

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

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

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { forwardRef, useRef, createElement } from 'react';
 import { useForkRef } from '../../utils/useForkRef.js';
 import styles from './icon-button.module.js';
-import { getIconSize } from './utils.js';
+import { iconSizeMap } from './utils.js';
 
 const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -17,11 +17,11 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Button, {
     ...rest,
     ref: useForkRef(ref, forwardedRef),
-    className: clsx([styles.iconButton, styles[size], styles[variant]], props.className),
+    className: clsx(styles.iconButton, styles[variant], styles[size], props.className),
     children: /*#__PURE__*/createElement(icon, {
-      className: styles.iconColor,
-      height: getIconSize(props),
-      width: getIconSize(props),
+      className: styles.icon,
+      height: iconSizeMap[size],
+      width: iconSizeMap[size],
       role: 'presentation'
     })
   });

package/lib-esm/primitives/icon-button/icon-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"iconButton":"bp_icon_button_module_iconButton--a3df7","iconColor":"bp_icon_button_module_iconColor--a3df7","large":"bp_icon_button_module_large--a3df7","small":"bp_icon_button_module_small--a3df7","x-small":"bp_icon_button_module_x-small--a3df7","high-contrast":"bp_icon_button_module_high-contrast--a3df7","small-utility":"bp_icon_button_module_small-utility--a3df7"};
+var styles = {"iconButton":"bp_icon_button_module_iconButton--b6e1c","icon":"bp_icon_button_module_icon--b6e1c","default":"bp_icon_button_module_default--b6e1c","icon-logo":"bp_icon_button_module_icon-logo--b6e1c","high-contrast":"bp_icon_button_module_high-contrast--b6e1c","small-utility":"bp_icon_button_module_small-utility--b6e1c","large":"bp_icon_button_module_large--b6e1c","small":"bp_icon_button_module_small--b6e1c","x-small":"bp_icon_button_module_x-small--b6e1c"};
 
 export { styles as default };

package/lib-esm/primitives/icon-button/types.d.ts

@@ -10,29 +10,33 @@ interface IconButtonCommonProps extends AriakitButtonProps {
      */
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
 }
+export declare const IconButtonSizes: readonly ["x-small", "small", "large"];
+export type IconButtonSize = (typeof IconButtonSizes)[number];
+export declare const IconButtonVariants: readonly ["default", "high-contrast", "icon-logo", "small-utility"];
+export type IconButtonVariant = (typeof IconButtonVariants)[number];
 export interface IconButtonVariantsProps extends IconButtonCommonProps {
     /**
      * The variant of the button.
      *
      * @default 'default'
      */
-    variant?: 'default' | 'high-contrast';
+    variant?: Exclude<IconButtonVariant, 'small-utility'>;
     /**
      * Size of the button.
      *
      * @default 'small'
      */
-    size?: 'x-small' | 'small' | 'large';
+    size?: IconButtonSize;
 }
 export interface IconButtonSmallUtilityVariantProps extends IconButtonCommonProps {
     /**
      * The variant of the button.
      */
-    variant: 'small-utility';
+    variant: Extract<IconButtonVariant, 'small-utility'>;
     /**
-     * The only acceptable size for the small-utility variant is 'small'.
+     * The only acceptable size for the 'small-utility' variant is 'small'.
      */
-    size: 'small';
+    size: Extract<IconButtonSize, 'small'>;
 }
 export type IconButtonProps = IconButtonVariantsProps | IconButtonSmallUtilityVariantProps;
 export {};

package/lib-esm/primitives/icon-button/utils.d.ts

@@ -1,3 +1,3 @@
 import { type IconButtonProps } from './types';
-declare function getIconSize(props: IconButtonProps): string;
-export { getIconSize };
+declare const iconSizeMap: Record<NonNullable<IconButtonProps['size']>, string>;
+export { iconSizeMap };

package/lib-esm/primitives/icon-button/utils.js

@@ -5,11 +5,5 @@ const iconSizeMap = {
   small: Size5,
   large: Size6
 };
-function getIconSize(props) {
-  if (props.variant === 'small-utility') {
-    return Size4;
-  }
-  return iconSizeMap[props.size || 'small'];
-}
 
-export { getIconSize };
+export { iconSizeMap };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.11.0",
+    "version": "7.13.1",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
         "@box/storybook-utils": "^0.3.0",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "64f24026d06c71ca4145bf9f77a9adb4acd37787",
+    "gitHead": "bfb1c63630dad923443e0f533e7abd2c187ec30b",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {