@box/blueprint-web 8.4.1 → 8.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib-esm/avatar/avatar.module.js +1 -1
  2. package/lib-esm/button-wrapper/button-wrapper.d.ts +7 -0
  3. package/lib-esm/button-wrapper/button-wrapper.js +23 -0
  4. package/lib-esm/button-wrapper/button-wrapper.module.js +4 -0
  5. package/lib-esm/button-wrapper/index.d.ts +1 -0
  6. package/lib-esm/index.css +89 -94
  7. package/lib-esm/index.d.ts +1 -0
  8. package/lib-esm/index.js +1 -0
  9. package/lib-esm/primitives/base-button/base-button.module.js +1 -1
  10. package/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
  11. package/package.json +2 -2
package/lib-esm/avatar/avatar.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- 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"};
2
+ 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"};
3
3
 
4
4
  export { styles as default };
package/lib-esm/button-wrapper/button-wrapper.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
2
+ import { type ReactNode } from 'react';
3
+ export interface ButtonWrapperProps extends AriakitButtonProps {
4
+ children: ReactNode;
5
+ className?: string;
6
+ }
7
+ export declare const ButtonWrapper: import("react").ForwardRefExoticComponent<Omit<ButtonWrapperProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
package/lib-esm/button-wrapper/button-wrapper.js ADDED
@@ -0,0 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Button } from '@ariakit/react';
3
+ import clsx from 'clsx';
4
+ import { forwardRef } from 'react';
5
+ import styles from './button-wrapper.module.js';
6
+
7
+ const ButtonWrapper = /*#__PURE__*/forwardRef((props, forwardedRef) => {
8
+ const {
9
+ children,
10
+ className,
11
+ ...rest
12
+ } = props;
13
+ return jsx(Button, {
14
+ ...rest,
15
+ ref: forwardedRef,
16
+ className: clsx(styles.buttonWrapper, className),
17
+ "data-button-wrapper": true,
18
+ children: children
19
+ });
20
+ });
21
+ ButtonWrapper.displayName = 'ButtonWrapper';
22
+
23
+ export { ButtonWrapper };
package/lib-esm/button-wrapper/button-wrapper.module.js ADDED
@@ -0,0 +1,4 @@
1
+ import '../index.css';
2
+ var styles = {"buttonWrapper":"bp_button_wrapper_module_buttonWrapper--b0897"};
3
+
4
+ export { styles as default };
package/lib-esm/button-wrapper/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { ButtonWrapper, type ButtonWrapperProps } from './button-wrapper';
package/lib-esm/index.css CHANGED
@@ -32,84 +32,62 @@
32
32
  }
33
33
  }
34
34
 
35
- .bp_base_inline_notice_module_noticeWrapper--ab47a{
35
+ .bp_base_inline_notice_module_noticeWrapper--3e92f{
36
36
  border-radius:var(--radius-2);
37
37
  display:flex;
38
38
  gap:var(--space-3);
39
39
  justify-content:space-between;
40
40
  padding:var(--space-3) var(--space-4);
41
41
  }
42
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actions--ab47a{
42
+ .bp_base_inline_notice_module_noticeWrapper--3e92f .bp_base_inline_notice_module_actions--3e92f{
43
43
  align-self:center;
44
44
  display:flex;
45
45
  gap:var(--space-3);
46
46
  justify-content:flex-end;
47
47
  }
48
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a,.bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a{
49
- height:var(--space-8);
50
- }
51
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a,.bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:hover{
52
- background:#0000;
53
- }
54
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundYellow--ab47a{
48
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundYellow--3e92f{
55
49
  background:var(--surface-message-surface-warning-secondary);
56
50
  }
57
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundBlue--ab47a{
51
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundBlue--3e92f{
58
52
  background:var(--surface-message-surface-info-secondary);
59
53
  }
60
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundRed--ab47a{
54
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundRed--3e92f{
61
55
  background:var(--surface-message-surface-error-secondary);
62
56
  }
63
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundGreen--ab47a{
57
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundGreen--3e92f{
64
58
  background:var(--surface-message-surface-success-secondary);
65
59
  }
66
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a{
60
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f{
67
61
  background:var(--surface-message-surface-promo-secondary);
68
62
  }
69
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a{
70
- background:var(--surface-cta-surface-tertiary-promo);
63
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonTertiary--3e92f{
71
64
  color:var(--text-cta-promo);
72
65
  }
73
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:active{
74
- background:var(--surface-cta-surface-tertiary-promo-pressed);
75
- }
76
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a[data-focus-visible]{
77
- background:var(--surface-cta-surface-tertiary-promo-focus);
78
- }
79
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:hover{
80
- background:var(--surface-cta-surface-tertiary-promo-hover);
81
- }
82
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:focus:active{
83
- background:var(--surface-cta-surface-tertiary-promo-focus-pressed);
84
- }
85
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:hover:active{
86
- background:var(--surface-cta-surface-tertiary-promo-pressed);
87
- }
88
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a{
66
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonPrimary--3e92f{
89
67
  background:var(--surface-cta-surface-promo);
90
68
  border-color:var(--surface-cta-surface-promo);
91
69
  }
92
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:active{
70
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonPrimary--3e92f:active{
93
71
  background:var(--surface-cta-surface-promo-pressed);
94
72
  }
95
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a[data-focus-visible]{
73
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonPrimary--3e92f[data-focus-visible]{
96
74
  background:var(--surface-cta-surface-promo-focus);
97
75
  }
98
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:hover{
76
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonPrimary--3e92f:hover{
99
77
  background:var(--surface-cta-surface-promo-hover);
100
78
  border-color:var(--surface-cta-surface-promo-hover);
101
79
  }
102
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:focus:active{
80
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonPrimary--3e92f:focus:active{
103
81
  background:var(--surface-cta-surface-promo-focus-pressed);
104
82
  }
105
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:hover:active{
83
+ .bp_base_inline_notice_module_noticeWrapper--3e92f.bp_base_inline_notice_module_backgroundPurple--3e92f .bp_base_inline_notice_module_actionButtonPrimary--3e92f:hover:active{
106
84
  background:var(--surface-cta-surface-promo-pressed);
107
85
  }
108
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_contentContainer--ab47a{
86
+ .bp_base_inline_notice_module_noticeWrapper--3e92f .bp_base_inline_notice_module_contentContainer--3e92f{
109
87
  display:flex;
110
88
  gap:var(--space-3);
111
89
  }
112
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_content--ab47a{
90
+ .bp_base_inline_notice_module_noticeWrapper--3e92f .bp_base_inline_notice_module_content--3e92f{
113
91
  color:var(--text-text-on-light);
114
92
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
115
93
  font-size:.875rem;
@@ -119,10 +97,10 @@
119
97
  text-decoration:none;
120
98
  text-transform:none;
121
99
  }
122
- .bp_base_inline_notice_module_noticeWrapper--ab47a svg{
100
+ .bp_base_inline_notice_module_noticeWrapper--3e92f svg{
123
101
  display:block;
124
102
  }
125
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_title--ab47a{
103
+ .bp_base_inline_notice_module_noticeWrapper--3e92f .bp_base_inline_notice_module_title--3e92f{
126
104
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
127
105
  font-size:.875rem;
128
106
  font-weight:700;
@@ -133,10 +111,10 @@
133
111
  }
134
112
 
135
113
  @media (max-width: 1023px){
136
- .bp_base_inline_notice_module_actions--ab47a{
114
+ .bp_base_inline_notice_module_actions--3e92f{
137
115
  margin-top:var(--space-3);
138
116
  }
139
- .bp_base_inline_notice_module_noticeWrapper--ab47a{
117
+ .bp_base_inline_notice_module_noticeWrapper--3e92f{
140
118
  display:block;
141
119
  }
142
120
  }
@@ -219,7 +197,7 @@
219
197
  }
220
198
  }
221
199
 
222
- .bp_base_button_module_button--fe56c{
200
+ .bp_base_button_module_button--e3cde{
223
201
  border-radius:var(--radius-2);
224
202
  cursor:pointer;
225
203
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -235,95 +213,95 @@
235
213
  user-select:none;
236
214
  white-space:nowrap;
237
215
  }
238
- .bp_base_button_module_button--fe56c,.bp_base_button_module_button--fe56c .bp_base_button_module_icon--fe56c{
216
+ .bp_base_button_module_button--e3cde,.bp_base_button_module_button--e3cde .bp_base_button_module_icon--e3cde{
239
217
  align-items:center;
240
218
  display:flex;
241
219
  }
242
- .bp_base_button_module_button--fe56c:not(:disabled)[data-focus-visible]{
220
+ .bp_base_button_module_button--e3cde:not(:disabled)[data-focus-visible]{
243
221
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
244
222
  }
245
- .bp_base_button_module_button--fe56c:disabled{
223
+ .bp_base_button_module_button--e3cde:disabled{
246
224
  opacity:.3;
247
225
  }
248
- .bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c{
226
+ .bp_base_button_module_button--e3cde.bp_base_button_module_primary--e3cde{
249
227
  background:var(--surface-surface-brand);
250
228
  border:var(--border-1) solid var(--surface-surface-brand);
251
229
  color:var(--text-text-brand-on-color);
252
230
  }
253
- .bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:disabled{
231
+ .bp_base_button_module_button--e3cde.bp_base_button_module_primary--e3cde:disabled{
254
232
  background:var(--surface-surface-brand-disabled);
255
233
  }
256
- .bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:not(:disabled)[data-focus-visible]{
234
+ .bp_base_button_module_button--e3cde.bp_base_button_module_primary--e3cde:not(:disabled):hover,.bp_base_button_module_button--e3cde.bp_base_button_module_primary--e3cde:not(:disabled)[data-focus-visible]{
257
235
  background:var(--surface-surface-brand-hover);
258
236
  border:var(--border-1) solid var(--surface-surface-brand-hover);
259
237
  }
260
- .bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:not(:disabled):active{
238
+ .bp_base_button_module_button--e3cde.bp_base_button_module_primary--e3cde:not(:disabled):active{
261
239
  background:var(--surface-surface-brand-pressed);
262
240
  border:var(--border-1) solid var(--surface-surface-brand-pressed);
263
241
  }
264
- .bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c{
242
+ .bp_base_button_module_button--e3cde.bp_base_button_module_secondary--e3cde{
265
243
  background:var(--surface-cta-surface-secondary);
266
244
  border:var(--border-1) solid var(--border-cta-border-secondary);
267
245
  color:var(--text-text-on-light);
268
246
  }
269
- .bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c:not(:disabled)[data-focus-visible]{
247
+ .bp_base_button_module_button--e3cde.bp_base_button_module_secondary--e3cde:not(:disabled):hover,.bp_base_button_module_button--e3cde.bp_base_button_module_secondary--e3cde:not(:disabled)[data-focus-visible]{
270
248
  background:var(--surface-cta-surface-secondary-hover);
271
249
  border:var(--border-1) solid var(--border-cta-border-secondary-hover);
272
250
  }
273
- .bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c:not(:disabled):active{
251
+ .bp_base_button_module_button--e3cde.bp_base_button_module_secondary--e3cde:not(:disabled):active{
274
252
  background:var(--surface-cta-surface-secondary-pressed);
275
253
  border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
276
254
  }
277
- .bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c{
278
- background:var(--surface-cta-surface-tertiary);
255
+ .bp_base_button_module_button--e3cde.bp_base_button_module_tertiary--e3cde{
256
+ background:#0000;
279
257
  border:var(--border-1) solid #0000;
280
258
  color:var(--text-cta-link);
281
259
  }
282
- .bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c:not(:disabled)[data-focus-visible]{
260
+ .bp_base_button_module_button--e3cde.bp_base_button_module_tertiary--e3cde:not(:disabled):hover,.bp_base_button_module_button--e3cde.bp_base_button_module_tertiary--e3cde:not(:disabled)[data-focus-visible]{
283
261
  background:var(--surface-cta-surface-tertiary-hover);
284
262
  }
285
- .bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c:not(:disabled):active{
263
+ .bp_base_button_module_button--e3cde.bp_base_button_module_tertiary--e3cde:not(:disabled):active{
286
264
  background:var(--surface-cta-surface-tertiary-pressed);
287
265
  }
288
- .bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c{
266
+ .bp_base_button_module_button--e3cde.bp_base_button_module_outline--e3cde{
289
267
  background:#0000;
290
268
  border:var(--border-1) solid var(--border-cta-border-outline);
291
269
  color:var(--text-text-on-light);
292
270
  }
293
- .bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled)[data-focus-visible]{
271
+ .bp_base_button_module_button--e3cde.bp_base_button_module_outline--e3cde:not(:disabled):hover,.bp_base_button_module_button--e3cde.bp_base_button_module_outline--e3cde:not(:disabled)[data-focus-visible]{
294
272
  background:var(--surface-cta-surface-outline-hover);
295
273
  border:var(--border-1) solid var(--border-cta-border-outline-hover);
296
274
  }
297
- .bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled):active{
275
+ .bp_base_button_module_button--e3cde.bp_base_button_module_outline--e3cde:not(:disabled):active{
298
276
  background:var(--surface-cta-surface-outline-pressed);
299
277
  border:var(--border-1) solid var(--border-cta-border-outline-pressed);
300
278
  }
301
- .bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c{
279
+ .bp_base_button_module_button--e3cde.bp_base_button_module_small--e3cde{
302
280
  gap:var(--space-1);
303
281
  min-height:var(--size-8);
304
282
  padding:0 var(--size-4);
305
283
  }
306
- .bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c.bp_base_button_module_isIconButton--fe56c{
284
+ .bp_base_button_module_button--e3cde.bp_base_button_module_small--e3cde.bp_base_button_module_isIconButton--e3cde{
307
285
  height:var(--size-8);
308
286
  min-height:unset;
309
287
  padding:0 calc((var(--size-8) - var(--size-4))/2);
310
288
  width:var(--size-8);
311
289
  }
312
- .bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c{
290
+ .bp_base_button_module_button--e3cde.bp_base_button_module_large--e3cde{
313
291
  gap:var(--space-2);
314
292
  min-height:var(--size-10);
315
293
  padding:0 var(--size-4);
316
294
  }
317
- .bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c.bp_base_button_module_isIconButton--fe56c{
295
+ .bp_base_button_module_button--e3cde.bp_base_button_module_large--e3cde.bp_base_button_module_isIconButton--e3cde{
318
296
  height:var(--size-10);
319
297
  padding:0 calc((var(--size-10) - var(--size-5))/2);
320
298
  width:var(--size-10);
321
299
  }
322
- .bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c{
300
+ .bp_base_button_module_button--e3cde.bp_base_button_module_hide--e3cde{
323
301
  pointer-events:none;
324
302
  position:relative;
325
303
  }
326
- .bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c span{
304
+ .bp_base_button_module_button--e3cde.bp_base_button_module_hide--e3cde span{
327
305
  color:#0000;
328
306
  opacity:0;
329
307
  }
@@ -667,11 +645,12 @@
667
645
  transform:rotate(180deg);
668
646
  }
669
647
 
670
- .bp_avatar_module_avatar--97423{
648
+ .bp_avatar_module_avatar--792cd{
671
649
  all:unset;
672
650
  align-items:center;
673
651
  background-color:var(--gray-10);
674
652
  border-radius:50%;
653
+ box-sizing:border-box;
675
654
  display:flex;
676
655
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
677
656
  font-size:.875rem;
@@ -683,7 +662,7 @@
683
662
  text-decoration:none;
684
663
  text-transform:none;
685
664
  }
686
- .bp_avatar_module_avatar--97423 .bp_avatar_module_badge--97423{
665
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_badge--792cd{
687
666
  background-color:var(--gray-white);
688
667
  border:var(--border-2) solid var(--gray-white);
689
668
  border-radius:50%;
@@ -691,7 +670,7 @@
691
670
  display:flex;
692
671
  position:absolute;
693
672
  }
694
- .bp_avatar_module_avatar--97423 .bp_avatar_module_text--97423{
673
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_text--792cd{
695
674
  align-items:center;
696
675
  border-radius:50%;
697
676
  display:flex;
@@ -699,14 +678,14 @@
699
678
  justify-content:center;
700
679
  width:100%;
701
680
  }
702
- .bp_avatar_module_avatar--97423.bp_avatar_module_small--97423{
681
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd{
703
682
  height:var(--size-6);
704
683
  width:var(--size-6);
705
684
  }
706
- .bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_text--97423{
685
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_text--792cd{
707
686
  font-size:.5rem;
708
687
  }
709
- .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{
688
+ .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{
710
689
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
711
690
  font-size:.625rem;
712
691
  font-weight:700;
@@ -715,14 +694,14 @@
715
694
  text-decoration:none;
716
695
  text-transform:none;
717
696
  }
718
- .bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_badge--97423{
697
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_badge--792cd{
719
698
  right:-.25rem;
720
699
  }
721
- .bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423{
700
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd{
722
701
  height:var(--size-7);
723
702
  width:var(--size-7);
724
703
  }
725
- .bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_text--97423{
704
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_text--792cd{
726
705
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
727
706
  font-size:.625rem;
728
707
  font-weight:700;
@@ -731,20 +710,20 @@
731
710
  text-decoration:none;
732
711
  text-transform:none;
733
712
  }
734
- .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{
713
+ .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{
735
714
  font-size:.8125rem;
736
715
  }
737
- .bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_badge--97423{
716
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_badge--792cd{
738
717
  right:-.375rem;
739
718
  }
740
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423{
719
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd{
741
720
  height:var(--size-8);
742
721
  width:var(--size-8);
743
722
  }
744
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_text--97423{
723
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_text--792cd{
745
724
  font-size:.5rem;
746
725
  }
747
- .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{
726
+ .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{
748
727
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
749
728
  font-size:.875rem;
750
729
  font-weight:700;
@@ -753,10 +732,10 @@
753
732
  text-decoration:none;
754
733
  text-transform:none;
755
734
  }
756
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-3--97423.bp_avatar_module_text--97423{
735
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-3--792cd.bp_avatar_module_text--792cd{
757
736
  font-size:.6875rem;
758
737
  }
759
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-4--97423.bp_avatar_module_text--97423{
738
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-4--792cd.bp_avatar_module_text--792cd{
760
739
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
761
740
  font-size:.625rem;
762
741
  font-weight:700;
@@ -765,17 +744,17 @@
765
744
  text-decoration:none;
766
745
  text-transform:none;
767
746
  }
768
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_badge--97423{
747
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_badge--792cd{
769
748
  right:-.25rem;
770
749
  }
771
- .bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423{
750
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd{
772
751
  height:var(--size-11);
773
752
  width:var(--size-11);
774
753
  }
775
- .bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_text--97423{
754
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_text--792cd{
776
755
  font-size:1rem;
777
756
  }
778
- .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{
757
+ .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{
779
758
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
780
759
  font-size:1.3125rem;
781
760
  font-weight:700;
@@ -784,39 +763,52 @@
784
763
  text-decoration:none;
785
764
  text-transform:none;
786
765
  }
787
- .bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_badge--97423{
766
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_badge--792cd{
788
767
  right:-.375rem;
789
768
  }
790
- .bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423{
769
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd{
791
770
  height:var(--size-20);
792
771
  width:var(--size-20);
793
772
  }
794
- .bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_text--97423{
773
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_text--792cd{
795
774
  font-size:1.25rem;
796
775
  }
797
- .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{
776
+ .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{
798
777
  font-size:2rem;
799
778
  }
800
- .bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_badge--97423{
779
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_badge--792cd{
801
780
  right:-.375rem;
802
781
  }
803
- .bp_avatar_module_avatar--97423 .bp_avatar_module_image--97423{
782
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_image--792cd{
804
783
  border-radius:50%;
805
784
  height:100%;
806
785
  object-fit:cover;
807
786
  width:100%;
808
787
  }
809
- .bp_avatar_module_avatar--97423 .bp_avatar_module_image--97423.bp_avatar_module_loading--97423{
788
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_image--792cd.bp_avatar_module_loading--792cd{
810
789
  height:0;
811
790
  width:0;
812
791
  }
813
792
 
814
- .bp_avatar_module_anonymousAvatar--97423{
793
+ .bp_avatar_module_anonymousAvatar--792cd{
815
794
  align-items:center;
816
795
  display:flex;
817
796
  justify-content:center;
818
797
  }
819
798
 
799
+ [data-button-wrapper]:hover .bp_avatar_module_avatar--792cd{
800
+ box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
801
+ cursor:pointer;
802
+ }
803
+
804
+ [data-button-wrapper]:active .bp_avatar_module_avatar--792cd{
805
+ box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
806
+ }
807
+
808
+ [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--792cd{
809
+ box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
810
+ }
811
+
820
812
  .bp_base_badge_module_badgeContainer--38d12{
821
813
  display:inline-flex;
822
814
  position:relative;
@@ -896,6 +888,9 @@
896
888
  .bp_base_badge_module_numericBadgeMoreDigits--38d12{
897
889
  padding:1px 3px;
898
890
  }
891
+ .bp_button_wrapper_module_buttonWrapper--b0897{
892
+ all:unset;
893
+ }
899
894
 
900
895
  .bp_card_module_card--35455{
901
896
  background:var(--surface-card-surface);
package/lib-esm/index.d.ts CHANGED
@@ -4,6 +4,7 @@ export * from './avatar';
4
4
  export * from './badge';
5
5
  export * from './branding-styles';
6
6
  export * from './button';
7
+ export * from './button-wrapper';
7
8
  export * from './card';
8
9
  export * from './card-tooltip';
9
10
  export * from './checkbox';
package/lib-esm/index.js CHANGED
@@ -7,6 +7,7 @@ export { StatusBadge } from './badge/status-badge.js';
7
7
  export { BrandingStyles } from './branding-styles/branding-styles.js';
8
8
  export { useCustomBranding } from './branding-styles/useCustomBranding.js';
9
9
  export { Button } from './button/button.js';
10
+ export { ButtonWrapper } from './button-wrapper/button-wrapper.js';
10
11
  export { Card } from './card/card.js';
11
12
  export { CardTooltip } from './card-tooltip/card-tooltip.js';
12
13
  export { Checkbox } from './checkbox/index.js';
package/lib-esm/primitives/base-button/base-button.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"button":"bp_base_button_module_button--fe56c","icon":"bp_base_button_module_icon--fe56c","primary":"bp_base_button_module_primary--fe56c","secondary":"bp_base_button_module_secondary--fe56c","tertiary":"bp_base_button_module_tertiary--fe56c","outline":"bp_base_button_module_outline--fe56c","small":"bp_base_button_module_small--fe56c","isIconButton":"bp_base_button_module_isIconButton--fe56c","large":"bp_base_button_module_large--fe56c","hide":"bp_base_button_module_hide--fe56c"};
2
+ var styles = {"button":"bp_base_button_module_button--e3cde","icon":"bp_base_button_module_icon--e3cde","primary":"bp_base_button_module_primary--e3cde","secondary":"bp_base_button_module_secondary--e3cde","tertiary":"bp_base_button_module_tertiary--e3cde","outline":"bp_base_button_module_outline--e3cde","small":"bp_base_button_module_small--e3cde","isIconButton":"bp_base_button_module_isIconButton--e3cde","large":"bp_base_button_module_large--e3cde","hide":"bp_base_button_module_hide--e3cde"};
3
3
 
4
4
  export { styles as default };
package/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--ab47a","actions":"bp_base_inline_notice_module_actions--ab47a","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--ab47a","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--ab47a","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--ab47a","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--ab47a","backgroundRed":"bp_base_inline_notice_module_backgroundRed--ab47a","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--ab47a","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--ab47a","contentContainer":"bp_base_inline_notice_module_contentContainer--ab47a","content":"bp_base_inline_notice_module_content--ab47a","title":"bp_base_inline_notice_module_title--ab47a"};
2
+ var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--3e92f","actions":"bp_base_inline_notice_module_actions--3e92f","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--3e92f","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--3e92f","backgroundRed":"bp_base_inline_notice_module_backgroundRed--3e92f","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--3e92f","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--3e92f","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--3e92f","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--3e92f","contentContainer":"bp_base_inline_notice_module_contentContainer--3e92f","content":"bp_base_inline_notice_module_content--3e92f","title":"bp_base_inline_notice_module_title--3e92f"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "8.4.1",
3
+ "version": "8.5.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -63,7 +63,7 @@
63
63
  "react-stately": "^3.31.1",
64
64
  "tsx": "^4.16.5"
65
65
  },
66
- "gitHead": "f477bbfa6a9fbb2c9c533a43c1f59acf03ad0e7b",
66
+ "gitHead": "9a31f96840eac8c8375a838e1e263e80717cd16f",
67
67
  "module": "lib-esm/index.js",
68
68
  "main": "lib-esm/index.js",
69
69
  "exports": {