@box/blueprint-web 8.4.1 → 8.5.0

package/lib-esm/avatar/avatar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"avatar":"bp_avatar_module_avatar--97423","badge":"bp_avatar_module_badge--97423","text":"bp_avatar_module_text--97423","small":"bp_avatar_module_small--97423","length-1":"bp_avatar_module_length-1--97423","length-2":"bp_avatar_module_length-2--97423","medium":"bp_avatar_module_medium--97423","large":"bp_avatar_module_large--97423","length-3":"bp_avatar_module_length-3--97423","length-4":"bp_avatar_module_length-4--97423","xlarge":"bp_avatar_module_xlarge--97423","xxlarge":"bp_avatar_module_xxlarge--97423","image":"bp_avatar_module_image--97423","loading":"bp_avatar_module_loading--97423","anonymousAvatar":"bp_avatar_module_anonymousAvatar--97423"};
+var styles = {"avatar":"bp_avatar_module_avatar--792cd","badge":"bp_avatar_module_badge--792cd","text":"bp_avatar_module_text--792cd","small":"bp_avatar_module_small--792cd","length-1":"bp_avatar_module_length-1--792cd","length-2":"bp_avatar_module_length-2--792cd","medium":"bp_avatar_module_medium--792cd","large":"bp_avatar_module_large--792cd","length-3":"bp_avatar_module_length-3--792cd","length-4":"bp_avatar_module_length-4--792cd","xlarge":"bp_avatar_module_xlarge--792cd","xxlarge":"bp_avatar_module_xxlarge--792cd","image":"bp_avatar_module_image--792cd","loading":"bp_avatar_module_loading--792cd","anonymousAvatar":"bp_avatar_module_anonymousAvatar--792cd"};
 
 export { styles as default };

package/lib-esm/button-wrapper/button-wrapper.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type ReactNode } from 'react';
+export interface ButtonWrapperProps extends AriakitButtonProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const ButtonWrapper: import("react").ForwardRefExoticComponent<Omit<ButtonWrapperProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/button-wrapper/button-wrapper.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './button-wrapper.module.js';
+
+const ButtonWrapper = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(Button, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.buttonWrapper, className),
+    "data-button-wrapper": true,
+    children: children
+  });
+});
+ButtonWrapper.displayName = 'ButtonWrapper';
+
+export { ButtonWrapper };

package/lib-esm/button-wrapper/button-wrapper.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"buttonWrapper":"bp_button_wrapper_module_buttonWrapper--b0897"};
+
+export { styles as default };

package/lib-esm/button-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { ButtonWrapper, type ButtonWrapperProps } from './button-wrapper';

package/lib-esm/index.css

@@ -667,11 +667,12 @@
   transform:rotate(180deg);
 }
 
-.bp_avatar_module_avatar--97423{
+.bp_avatar_module_avatar--792cd{
   all:unset;
   align-items:center;
   background-color:var(--gray-10);
   border-radius:50%;
+  box-sizing:border-box;
   display:flex;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -683,7 +684,7 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--97423 .bp_avatar_module_badge--97423{
+.bp_avatar_module_avatar--792cd .bp_avatar_module_badge--792cd{
   background-color:var(--gray-white);
   border:var(--border-2) solid var(--gray-white);
   border-radius:50%;
@@ -691,7 +692,7 @@
   display:flex;
   position:absolute;
 }
-.bp_avatar_module_avatar--97423 .bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd .bp_avatar_module_text--792cd{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -699,14 +700,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_small--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_text--792cd{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_length-1--97423.bp_avatar_module_text--97423,.bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_length-2--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_length-1--792cd.bp_avatar_module_text--792cd,.bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_length-2--792cd.bp_avatar_module_text--792cd{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-weight:700;
@@ -715,14 +716,14 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_badge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_badge--792cd{
   right:-.25rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd{
   height:var(--size-7);
   width:var(--size-7);
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_text--792cd{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-weight:700;
@@ -731,20 +732,20 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_length-1--97423.bp_avatar_module_text--97423,.bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_length-2--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_length-1--792cd.bp_avatar_module_text--792cd,.bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_length-2--792cd.bp_avatar_module_text--792cd{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_badge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_badge--792cd{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_text--792cd{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-1--97423.bp_avatar_module_text--97423,.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-2--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-1--792cd.bp_avatar_module_text--792cd,.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-2--792cd.bp_avatar_module_text--792cd{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-weight:700;
@@ -753,10 +754,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-3--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-3--792cd.bp_avatar_module_text--792cd{
   font-size:.6875rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-4--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-4--792cd.bp_avatar_module_text--792cd{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-weight:700;
@@ -765,17 +766,17 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_badge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_badge--792cd{
   right:-.25rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd{
   height:var(--size-11);
   width:var(--size-11);
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_text--792cd{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_length-1--97423.bp_avatar_module_text--97423,.bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_length-2--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_length-1--792cd.bp_avatar_module_text--792cd,.bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_length-2--792cd.bp_avatar_module_text--792cd{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:1.3125rem;
   font-weight:700;
@@ -784,39 +785,52 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_badge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_badge--792cd{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd{
   height:var(--size-20);
   width:var(--size-20);
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_text--792cd{
   font-size:1.25rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_length-1--97423.bp_avatar_module_text--97423,.bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_length-2--97423.bp_avatar_module_text--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_length-1--792cd.bp_avatar_module_text--792cd,.bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_length-2--792cd.bp_avatar_module_text--792cd{
   font-size:2rem;
 }
-.bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_badge--97423{
+.bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_badge--792cd{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--97423 .bp_avatar_module_image--97423{
+.bp_avatar_module_avatar--792cd .bp_avatar_module_image--792cd{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--97423 .bp_avatar_module_image--97423.bp_avatar_module_loading--97423{
+.bp_avatar_module_avatar--792cd .bp_avatar_module_image--792cd.bp_avatar_module_loading--792cd{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--97423{
+.bp_avatar_module_anonymousAvatar--792cd{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
+[data-button-wrapper]:hover .bp_avatar_module_avatar--792cd{
+  box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
+  cursor:pointer;
+}
+
+[data-button-wrapper]:active .bp_avatar_module_avatar--792cd{
+  box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
+}
+
+[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--792cd{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
+}
+
 .bp_base_badge_module_badgeContainer--38d12{
   display:inline-flex;
   position:relative;
@@ -896,6 +910,9 @@
 .bp_base_badge_module_numericBadgeMoreDigits--38d12{
   padding:1px 3px;
 }
+.bp_button_wrapper_module_buttonWrapper--b0897{
+  all:unset;
+}
 
 .bp_card_module_card--35455{
   background:var(--surface-card-surface);

package/lib-esm/index.d.ts

@@ -4,6 +4,7 @@ export * from './avatar';
 export * from './badge';
 export * from './branding-styles';
 export * from './button';
+export * from './button-wrapper';
 export * from './card';
 export * from './card-tooltip';
 export * from './checkbox';

package/lib-esm/index.js

@@ -7,6 +7,7 @@ export { StatusBadge } from './badge/status-badge.js';
 export { BrandingStyles } from './branding-styles/branding-styles.js';
 export { useCustomBranding } from './branding-styles/useCustomBranding.js';
 export { Button } from './button/button.js';
+export { ButtonWrapper } from './button-wrapper/button-wrapper.js';
 export { Card } from './card/card.js';
 export { CardTooltip } from './card-tooltip/card-tooltip.js';
 export { Checkbox } from './checkbox/index.js';

package/package.json

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