@box/blueprint-web 7.11.0 → 7.13.0

package/lib-esm/index.css

@@ -1134,10 +1134,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 +1143,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/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.0",
     "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": "4291826556f62c20172aa6e6f4d6274071000aac",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {