@box/blueprint-web 6.44.0 → 6.45.1

package/lib-esm/index.css

@@ -801,7 +801,7 @@
   top:0;
 }
 
-.bp_icon_button_module_iconButton--7b7ab{
+.bp_icon_button_module_iconButton--f14bf{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border:0;
@@ -812,50 +812,64 @@
   justify-content:center;
   padding:0;
 }
-.bp_icon_button_module_iconButton--7b7ab .bp_icon_button_module_iconColor--7b7ab *{
+.bp_icon_button_module_iconButton--f14bf .bp_icon_button_module_iconColor--f14bf *{
   fill:var(--icon-cta-icon);
 }
-.bp_icon_button_module_iconButton--7b7ab[aria-disabled=true]{
+.bp_icon_button_module_iconButton--f14bf[aria-disabled=true]{
   background:var(--surface-cta-surface-icon-disabled);
   opacity:.3;
 }
-.bp_icon_button_module_iconButton--7b7ab[aria-disabled=true] .bp_icon_button_module_iconColor--7b7ab *{
+.bp_icon_button_module_iconButton--f14bf[aria-disabled=true] .bp_icon_button_module_iconColor--f14bf *{
   fill:var(--gray-50);
 }
-.bp_icon_button_module_iconButton--7b7ab:focus-visible{
+.bp_icon_button_module_iconButton--f14bf:focus-visible{
   outline:none;
 }
-.bp_icon_button_module_iconButton--7b7ab[data-focus-visible]{
-  background:var(--surface-cta-surface-icon-hover);
+.bp_icon_button_module_iconButton--f14bf[data-focus-visible]{
   outline:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_icon_button_module_iconButton--7b7ab[data-focus-visible] .bp_icon_button_module_iconColor--7b7ab *{
-  fill:var(--icon-cta-icon-hover);
-}
-.bp_icon_button_module_iconButton--7b7ab:hover{
+.bp_icon_button_module_iconButton--f14bf:hover,.bp_icon_button_module_iconButton--f14bf[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--7b7ab:hover .bp_icon_button_module_iconColor--7b7ab *{
+.bp_icon_button_module_iconButton--f14bf:hover .bp_icon_button_module_iconColor--f14bf *,.bp_icon_button_module_iconButton--f14bf[data-focus-visible] .bp_icon_button_module_iconColor--f14bf *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_icon_button_module_iconButton--7b7ab:active,.bp_icon_button_module_iconButton--7b7ab[data-active]{
+.bp_icon_button_module_iconButton--f14bf:active,.bp_icon_button_module_iconButton--f14bf[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--7b7ab:active .bp_icon_button_module_iconColor--7b7ab *,.bp_icon_button_module_iconButton--7b7ab[data-active] .bp_icon_button_module_iconColor--7b7ab *{
+.bp_icon_button_module_iconButton--f14bf:active .bp_icon_button_module_iconColor--f14bf *,.bp_icon_button_module_iconButton--f14bf[data-active] .bp_icon_button_module_iconColor--f14bf *{
   fill:var(--icon-cta-icon-pressed);
 }
-.bp_icon_button_module_iconButton--7b7ab.bp_icon_button_module_large--7b7ab{
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_large--f14bf{
   height:var(--size-10);
   width:var(--size-10);
 }
-.bp_icon_button_module_iconButton--7b7ab.bp_icon_button_module_small--7b7ab{
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_small--f14bf{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_icon_button_module_iconButton--7b7ab.bp_icon_button_module_x-small--7b7ab{
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_x-small--f14bf{
   height:var(--size-6);
   width:var(--size-6);
 }
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf{
+  background:var(--surface-cta-surface-icon);
+}
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf .bp_icon_button_module_iconColor--f14bf *{
+  fill:var(--icon-cta-icon-on-color);
+}
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf:hover,.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf[data-focus-visible]{
+  background:var(--surface-cta-surface-icon-hover);
+}
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf:hover .bp_icon_button_module_iconColor--f14bf *,.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf[data-focus-visible] .bp_icon_button_module_iconColor--f14bf *{
+  fill:var(--icon-cta-icon-on-color-hover);
+}
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf:active,.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf[data-active]{
+  background:var(--surface-cta-surface-icon-pressed);
+}
+.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf:active .bp_icon_button_module_iconColor--f14bf *,.bp_icon_button_module_iconButton--f14bf.bp_icon_button_module_highContrast--f14bf[data-active] .bp_icon_button_module_iconColor--f14bf *{
+  fill:var(--icon-cta-icon-on-color-pressed);
+}
 
 .bp_collapsible_section_module_collapsibleSection--090c0{
   width:100%;

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

@@ -9,6 +9,7 @@ import { iconSizeMap } from './utils.js';
 const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     size = 'small',
+    variant = 'default',
     icon,
     ...rest
   } = props;
@@ -16,7 +17,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Button, {
     ...rest,
     ref: useForkRef(ref, forwardedRef),
-    className: clsx([styles.iconButton, styles[size]], props.className),
+    className: clsx([styles.iconButton, styles[size], {
+      [styles.highContrast]: variant === 'high-contrast'
+    }], props.className),
     children: /*#__PURE__*/createElement(icon, {
       className: styles.iconColor,
       height: iconSizeMap[size],

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--7b7ab","iconColor":"bp_icon_button_module_iconColor--7b7ab","large":"bp_icon_button_module_large--7b7ab","small":"bp_icon_button_module_small--7b7ab","x-small":"bp_icon_button_module_x-small--7b7ab"};
+var styles = {"iconButton":"bp_icon_button_module_iconButton--f14bf","iconColor":"bp_icon_button_module_iconColor--f14bf","large":"bp_icon_button_module_large--f14bf","small":"bp_icon_button_module_small--f14bf","x-small":"bp_icon_button_module_x-small--f14bf","highContrast":"bp_icon_button_module_highContrast--f14bf"};
 
 export { styles as default };

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

@@ -1,9 +1,24 @@
 import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
 import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 export interface IconButtonProps extends AriakitButtonProps {
-    /** The size of the button. */
-    size?: 'x-small' | 'small' | 'large';
-    /** Icon that will be rendered */
-    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * Accessible label for the button.
+     */
     'aria-label': NonNullable<AriakitButtonProps['aria-label']>;
+    /**
+     * Icon that will be rendered.
+     */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * Size of the button.
+     *
+     * @default 'small'
+     */
+    size?: 'x-small' | 'small' | 'large';
+    /**
+     * The variant of the button.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'high-contrast';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.44.0",
+    "version": "6.45.1",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.1.0"
     },
-    "gitHead": "d9355c0f3e921196378d32e7e46dd9acc0e1d770",
+    "gitHead": "0d9cbfb7f511a9f370a2d081c82bfbc3ce405550",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {