@box/blueprint-web 8.4.0 → 8.5.0

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 (12) hide show
  1. package/lib-esm/accordion/accordion.js +19 -5
  2. package/lib-esm/accordion/accordion.module.js +1 -1
  3. package/lib-esm/accordion/types.d.ts +11 -1
  4. package/lib-esm/avatar/avatar.module.js +1 -1
  5. package/lib-esm/button-wrapper/button-wrapper.d.ts +7 -0
  6. package/lib-esm/button-wrapper/button-wrapper.js +23 -0
  7. package/lib-esm/button-wrapper/button-wrapper.module.js +4 -0
  8. package/lib-esm/button-wrapper/index.d.ts +1 -0
  9. package/lib-esm/index.css +354 -332
  10. package/lib-esm/index.d.ts +1 -0
  11. package/lib-esm/index.js +1 -0
  12. package/package.json +2 -2
package/lib-esm/accordion/accordion.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
3
- import { SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
3
+ import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import * as RadixAccordion from '@radix-ui/react-accordion';
5
5
  import clsx from 'clsx';
6
6
  import { Ghost } from '../ghost/ghost.js';
7
+ import { InlineNotice } from '../inline-notice/inline-notice.js';
7
8
  import { Status } from '../status/status.js';
8
9
  import { isDefined } from '../utils/isDefined.js';
9
10
  import styles from './accordion.module.js';
@@ -59,11 +60,17 @@ const Item = props => {
59
60
  })
60
61
  });
61
62
  }
63
+ const statusColors = {
64
+ error: SurfaceStatusSurfaceRed,
65
+ default: SurfaceStatusSurfaceLightBlue
66
+ };
62
67
  // TODO: [DSYS-549] Refactor - spread props in a single place
63
68
  const {
64
69
  status,
65
70
  title,
66
71
  disabled,
72
+ error,
73
+ errorIconAriaLabel,
67
74
  ...itemRest
68
75
  } = props;
69
76
  return jsxs(RadixAccordion.Item, {
@@ -82,7 +89,7 @@ const Item = props => {
82
89
  className: styles.accordionHeaderTrigger,
83
90
  children: [isDefined(status) && jsx(Status, {
84
91
  className: styles.accordionStatus,
85
- color: SurfaceStatusSurfaceLightBlue,
92
+ color: error ? statusColors.error : statusColors.default,
86
93
  text: `${status}`
87
94
  }), jsx(PointerChevron, {
88
95
  "aria-hidden": "true",
@@ -91,12 +98,19 @@ const Item = props => {
91
98
  })]
92
99
  })
93
100
  })
94
- }), jsx(RadixAccordion.Content, {
101
+ }), jsxs(RadixAccordion.Content, {
95
102
  className: clsx(children && styles.accordionContent),
96
- children: jsx("div", {
103
+ children: [error && jsx("div", {
104
+ className: styles.accordionInlineErrorWrapper,
105
+ children: jsx(InlineNotice, {
106
+ variant: "error",
107
+ variantIconAriaLabel: errorIconAriaLabel,
108
+ children: error
109
+ })
110
+ }), jsx("div", {
97
111
  className: styles.accordionContentWrapper,
98
112
  children: children
99
- })
113
+ })]
100
114
  })]
101
115
  });
102
116
  };
package/lib-esm/accordion/accordion.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"accordionContent":"bp_accordion_module_accordionContent--aef9c","slideDown":"bp_accordion_module_slideDown--aef9c","slideUp":"bp_accordion_module_slideUp--aef9c","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--aef9c","accordionItem":"bp_accordion_module_accordionItem--aef9c","accordionFixedContent":"bp_accordion_module_accordionFixedContent--aef9c","accordionHeader":"bp_accordion_module_accordionHeader--aef9c","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--aef9c","accordionStatus":"bp_accordion_module_accordionStatus--aef9c","accordionTrigger":"bp_accordion_module_accordionTrigger--aef9c","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--aef9c"};
2
+ var styles = {"accordionContent":"bp_accordion_module_accordionContent--81559","slideDown":"bp_accordion_module_slideDown--81559","slideUp":"bp_accordion_module_slideUp--81559","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--81559","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--81559","accordionItem":"bp_accordion_module_accordionItem--81559","accordionFixedContent":"bp_accordion_module_accordionFixedContent--81559","accordionHeader":"bp_accordion_module_accordionHeader--81559","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--81559","accordionStatus":"bp_accordion_module_accordionStatus--81559","accordionTrigger":"bp_accordion_module_accordionTrigger--81559","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--81559"};
3
3
 
4
4
  export { styles as default };
package/lib-esm/accordion/types.d.ts CHANGED
@@ -7,12 +7,22 @@ interface Loading {
7
7
  /** The aria-label for the ghost state. */
8
8
  loadingAriaLabel: string;
9
9
  }
10
+ interface Errorable {
11
+ /**
12
+ * Error message displayed in an InlineNotice
13
+ */
14
+ error?: string;
15
+ /**
16
+ * ARIA label for the icon inside the InlineNotice
17
+ */
18
+ errorIconAriaLabel?: string;
19
+ }
10
20
  export type AccordionBaseItem = {
11
21
  /**
12
22
  * Content of the accordion item that is displayed when the section is expanded
13
23
  */
14
24
  children?: React.ReactNode;
15
- } & RequireAllOrNone<Loading, keyof Loading>;
25
+ } & RequireAllOrNone<Loading, keyof Loading> & RequireAllOrNone<Errorable, keyof Errorable>;
16
26
  /**
17
27
  * Fixed sections are non-collapsible, have no title, only content, can't be disabled
18
28
  */
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,208 +32,113 @@
32
32
  }
33
33
  }
34
34
 
35
- .bp_status_module_interactiveStatus--88fd7{
36
- border:initial;
37
- cursor:default;
38
- max-width:100%;
39
- padding:initial;
40
- vertical-align:top;
41
- }
42
- .bp_status_module_interactiveStatus--88fd7:focus-visible{
43
- box-shadow:0 0 0 .125rem #2486fc;
44
- outline:none;
45
- overflow:visible;
46
- }
47
- .bp_status_module_interactiveStatus--88fd7:hover{
48
- background-color:var(--status-interactive-background-color-hover, #e8e8e8);
49
- box-shadow:0 0 0 .1875rem #0000000a;
50
- }
51
- .bp_status_module_interactiveStatus--88fd7:focus-visible{
52
- background-color:var(--status-interactive-background-color-focus, #e8e8e8);
53
- }
54
-
55
- .bp_status_module_status--88fd7{
56
- align-items:center;
57
- background-color:var(--status-background-color, #e8e8e8);
58
- border-radius:2rem;
59
- color:#222;
35
+ .bp_base_inline_notice_module_noticeWrapper--ab47a{
36
+ border-radius:var(--radius-2);
60
37
  display:flex;
61
- font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
62
- font-size:.625rem;
63
- font-weight:700;
64
- gap:.25rem;
65
- height:1.25rem;
66
- letter-spacing:.0375rem;
67
- line-height:1rem;
68
- padding-left:.5rem;
69
- padding-right:.5rem;
70
- text-decoration:none;
71
- text-transform:none;
72
- -webkit-user-select:text;
73
- user-select:text;
74
- white-space:nowrap;
75
- }
76
- .bp_status_module_status--88fd7.bp_status_module_reverse--88fd7{
77
- flex-direction:row-reverse;
38
+ gap:var(--space-3);
39
+ justify-content:space-between;
40
+ padding:var(--space-3) var(--space-4);
78
41
  }
79
- .bp_status_module_status--88fd7.bp_status_module_circle--88fd7{
80
- padding:0 3px;
42
+ .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actions--ab47a{
43
+ align-self:center;
44
+ display:flex;
45
+ gap:var(--space-3);
46
+ justify-content:flex-end;
81
47
  }
82
- .bp_status_module_status--88fd7 .bp_status_module_text--88fd7{
83
- overflow:hidden;
84
- text-overflow:ellipsis;
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);
85
50
  }
86
- .bp_status_module_status--88fd7 > svg{
87
- flex:0 0 auto;
88
- white-space:nowrap;
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;
89
53
  }
90
-
91
- .bp_status_module_maxContainer--88fd7{
92
- display:inline-block;
93
- max-width:100%;
94
- vertical-align:middle;
54
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundYellow--ab47a{
55
+ background:var(--surface-message-surface-warning-secondary);
95
56
  }
96
- .bp_status_module_colorSurfaceStatusSurfaceGray--88fd7,.bp_status_module_colorSurfaceStatusSurfaceGray--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceGray--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
97
- background-color:#e8e8e8;
57
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundBlue--ab47a{
58
+ background:var(--surface-message-surface-info-secondary);
98
59
  }
99
- .bp_status_module_colorSurfaceStatusSurfaceYellow--88fd7,.bp_status_module_colorSurfaceStatusSurfaceYellow--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceYellow--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
100
- background-color:#ffeb7f;
60
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundRed--ab47a{
61
+ background:var(--surface-message-surface-error-secondary);
101
62
  }
102
- .bp_status_module_colorSurfaceStatusSurfaceOrange--88fd7,.bp_status_module_colorSurfaceStatusSurfaceOrange--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceOrange--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
103
- background-color:#f8c08c;
63
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundGreen--ab47a{
64
+ background:var(--surface-message-surface-success-secondary);
104
65
  }
105
- .bp_status_module_colorSurfaceStatusSurfaceRed--88fd7,.bp_status_module_colorSurfaceStatusSurfaceRed--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceRed--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
106
- background-color:#f69bab;
66
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a{
67
+ background:var(--surface-message-surface-promo-secondary);
107
68
  }
108
- .bp_status_module_colorSurfaceStatusSurfacePurple--88fd7,.bp_status_module_colorSurfaceStatusSurfacePurple--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfacePurple--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
109
- background-color:#cf9ff6;
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);
71
+ color:var(--text-cta-promo);
110
72
  }
111
- .bp_status_module_colorSurfaceStatusSurfaceLightBlue--88fd7,.bp_status_module_colorSurfaceStatusSurfaceLightBlue--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceLightBlue--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
112
- background-color:#91c2fd;
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);
113
75
  }
114
- .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--88fd7,.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
115
- background-color:#7f9dc1;
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);
116
78
  }
117
- .bp_status_module_colorSurfaceStatusSurfaceGreen--88fd7,.bp_status_module_colorSurfaceStatusSurfaceGreen--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceGreen--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
118
- background-color:#92e0c0;
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);
119
81
  }
120
-
121
- .bp_accordion_module_accordionContent--aef9c[data-state=open]{
122
- animation:bp_accordion_module_slideDown--aef9c .15s ease-out;
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);
123
84
  }
124
-
125
- .bp_accordion_module_accordionContent--aef9c[data-state=closed]{
126
- animation:bp_accordion_module_slideUp--aef9c .15s ease-out;
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);
127
87
  }
128
-
129
- .bp_accordion_module_accordionContent--aef9c{
130
- overflow:hidden;
88
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a{
89
+ background:var(--surface-cta-surface-promo);
90
+ border-color:var(--surface-cta-surface-promo);
131
91
  }
132
-
133
- @keyframes bp_accordion_module_slideDown--aef9c{
134
- from{
135
- height:0;
136
- }
137
- to{
138
- height:var(--radix-accordion-content-height);
139
- }
92
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:active{
93
+ background:var(--surface-cta-surface-promo-pressed);
140
94
  }
141
- @keyframes bp_accordion_module_slideUp--aef9c{
142
- from{
143
- height:var(--radix-accordion-content-height);
144
- }
145
- to{
146
- height:0;
147
- }
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]{
96
+ background:var(--surface-cta-surface-promo-focus);
148
97
  }
149
- .bp_accordion_module_accordionContentWrapper--aef9c{
150
- display:flex;
151
- flex-direction:column;
152
- gap:var(--space-4);
153
- padding-block:var(--space-4);
154
- padding-block-end:var(--space-6);
155
- padding-inline:var(--space-4);
98
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:hover{
99
+ background:var(--surface-cta-surface-promo-hover);
100
+ border-color:var(--surface-cta-surface-promo-hover);
156
101
  }
157
-
158
- .bp_accordion_module_accordionItem--aef9c{
159
- border-bottom:var(--border-1) solid var(--border-divider-border);
160
- min-width:320px;
102
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:focus:active{
103
+ background:var(--surface-cta-surface-promo-focus-pressed);
161
104
  }
162
- .bp_accordion_module_accordionItem--aef9c,.bp_accordion_module_accordionItem--aef9c > [data-state=open]{
163
- background-color:var(--surface-accordion-surface);
105
+ .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:hover:active{
106
+ background:var(--surface-cta-surface-promo-pressed);
164
107
  }
165
-
166
- .bp_accordion_module_accordionFixedContent--aef9c{
167
- background-color:var(--surface-surface);
108
+ .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_contentContainer--ab47a{
168
109
  display:flex;
169
- flex-direction:column;
170
- gap:var(--space-4);
171
- padding-block:var(--space-5);
172
- padding-inline:var(--space-4);
110
+ gap:var(--space-3);
173
111
  }
174
-
175
- .bp_accordion_module_accordionHeader--aef9c{
112
+ .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_content--ab47a{
176
113
  color:var(--text-text-on-light);
177
- display:flex;
178
114
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
179
- font-size:.9375rem;
180
- font-weight:700;
181
- justify-content:space-between;
115
+ font-size:.875rem;
116
+ font-weight:400;
182
117
  letter-spacing:.01875rem;
183
118
  line-height:1.25rem;
184
- margin:0;
185
- text-align:initial;
186
119
  text-decoration:none;
187
120
  text-transform:none;
188
- width:100%;
189
121
  }
190
-
191
- .bp_accordion_module_accordionHeaderTrigger--aef9c{
192
- align-items:center;
193
- display:flex;
122
+ .bp_base_inline_notice_module_noticeWrapper--ab47a svg{
123
+ display:block;
194
124
  }
195
-
196
- .bp_accordion_module_accordionStatus--aef9c{
197
- margin-inline-start:var(--space-2);
125
+ .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_title--ab47a{
126
+ font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
127
+ font-size:.875rem;
128
+ font-weight:700;
129
+ letter-spacing:.01875rem;
130
+ line-height:1.25rem;
131
+ text-decoration:none;
132
+ text-transform:none;
198
133
  }
199
134
 
200
- .bp_accordion_module_accordionTrigger--aef9c{
201
- align-items:center;
202
- background-color:var(--surface-surface);
203
- border:none;
204
- display:flex;
205
- height:100%;
206
- padding:var(--space-4);
207
- padding-inline-end:var(--space-6);
208
- text-transform:capitalize;
209
- width:100%;
210
- }
211
- .bp_accordion_module_accordionTrigger--aef9c:active{
212
- background-color:var(--surface-surface);
213
- }
214
- .bp_accordion_module_accordionTrigger--aef9c:hover{
215
- background-color:var(--surface-accordion-surface-hover);
216
- cursor:pointer;
217
- }
218
- .bp_accordion_module_accordionTrigger--aef9c:focus-visible{
219
- background-color:var(--surface-surface-hover);
220
- box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
221
- outline:none;
222
- }
223
- .bp_accordion_module_accordionTrigger--aef9c:disabled{
224
- cursor:default;
225
- opacity:.3;
226
- }
227
- .bp_accordion_module_accordionTrigger--aef9c:disabled:hover{
228
- background-color:var(--gray-white);
229
- }
230
- .bp_accordion_module_accordionTrigger--aef9c .bp_accordion_module_accordionTriggerIcon--aef9c{
231
- color:var(--gray-50);
232
- flex-shrink:0;
233
- margin-inline-start:var(--space-3);
234
- }
235
- .bp_accordion_module_accordionTrigger--aef9c[data-state=open] .bp_accordion_module_accordionTriggerIcon--aef9c{
236
- transform:rotate(180deg);
135
+ @media (max-width: 1023px){
136
+ .bp_base_inline_notice_module_actions--ab47a{
137
+ margin-top:var(--space-3);
138
+ }
139
+ .bp_base_inline_notice_module_noticeWrapper--ab47a{
140
+ display:block;
141
+ }
237
142
  }
238
143
 
239
144
  .bp_loading_indicator_module_crawler--59b39{
@@ -389,147 +294,38 @@
389
294
  background:var(--surface-cta-surface-outline-hover);
390
295
  border:var(--border-1) solid var(--border-cta-border-outline-hover);
391
296
  }
392
- .bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled):active{
393
- background:var(--surface-cta-surface-outline-pressed);
394
- border:var(--border-1) solid var(--border-cta-border-outline-pressed);
395
- }
396
- .bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c{
397
- gap:var(--space-1);
398
- min-height:var(--size-8);
399
- padding:0 var(--size-4);
400
- }
401
- .bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c.bp_base_button_module_isIconButton--fe56c{
402
- height:var(--size-8);
403
- min-height:unset;
404
- padding:0 calc((var(--size-8) - var(--size-4))/2);
405
- width:var(--size-8);
406
- }
407
- .bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c{
408
- gap:var(--space-2);
409
- min-height:var(--size-10);
410
- padding:0 var(--size-4);
411
- }
412
- .bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c.bp_base_button_module_isIconButton--fe56c{
413
- height:var(--size-10);
414
- padding:0 calc((var(--size-10) - var(--size-5))/2);
415
- width:var(--size-10);
416
- }
417
- .bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c{
418
- pointer-events:none;
419
- position:relative;
420
- }
421
- .bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c span{
422
- color:#0000;
423
- opacity:0;
424
- }
425
-
426
- .bp_base_inline_notice_module_noticeWrapper--ab47a{
427
- border-radius:var(--radius-2);
428
- display:flex;
429
- gap:var(--space-3);
430
- justify-content:space-between;
431
- padding:var(--space-3) var(--space-4);
432
- }
433
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_actions--ab47a{
434
- align-self:center;
435
- display:flex;
436
- gap:var(--space-3);
437
- justify-content:flex-end;
438
- }
439
- .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{
440
- height:var(--space-8);
441
- }
442
- .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{
443
- background:#0000;
444
- }
445
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundYellow--ab47a{
446
- background:var(--surface-message-surface-warning-secondary);
447
- }
448
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundBlue--ab47a{
449
- background:var(--surface-message-surface-info-secondary);
450
- }
451
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundRed--ab47a{
452
- background:var(--surface-message-surface-error-secondary);
453
- }
454
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundGreen--ab47a{
455
- background:var(--surface-message-surface-success-secondary);
456
- }
457
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a{
458
- background:var(--surface-message-surface-promo-secondary);
459
- }
460
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a{
461
- background:var(--surface-cta-surface-tertiary-promo);
462
- color:var(--text-cta-promo);
463
- }
464
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:active{
465
- background:var(--surface-cta-surface-tertiary-promo-pressed);
466
- }
467
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a[data-focus-visible]{
468
- background:var(--surface-cta-surface-tertiary-promo-focus);
469
- }
470
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:hover{
471
- background:var(--surface-cta-surface-tertiary-promo-hover);
472
- }
473
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:focus:active{
474
- background:var(--surface-cta-surface-tertiary-promo-focus-pressed);
475
- }
476
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonTertiary--ab47a:hover:active{
477
- background:var(--surface-cta-surface-tertiary-promo-pressed);
478
- }
479
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a{
480
- background:var(--surface-cta-surface-promo);
481
- border-color:var(--surface-cta-surface-promo);
482
- }
483
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:active{
484
- background:var(--surface-cta-surface-promo-pressed);
485
- }
486
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a[data-focus-visible]{
487
- background:var(--surface-cta-surface-promo-focus);
488
- }
489
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:hover{
490
- background:var(--surface-cta-surface-promo-hover);
491
- border-color:var(--surface-cta-surface-promo-hover);
492
- }
493
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:focus:active{
494
- background:var(--surface-cta-surface-promo-focus-pressed);
495
- }
496
- .bp_base_inline_notice_module_noticeWrapper--ab47a.bp_base_inline_notice_module_backgroundPurple--ab47a .bp_base_inline_notice_module_actionButtonPrimary--ab47a:hover:active{
497
- background:var(--surface-cta-surface-promo-pressed);
297
+ .bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled):active{
298
+ background:var(--surface-cta-surface-outline-pressed);
299
+ border:var(--border-1) solid var(--border-cta-border-outline-pressed);
498
300
  }
499
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_contentContainer--ab47a{
500
- display:flex;
501
- gap:var(--space-3);
301
+ .bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c{
302
+ gap:var(--space-1);
303
+ min-height:var(--size-8);
304
+ padding:0 var(--size-4);
502
305
  }
503
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_content--ab47a{
504
- color:var(--text-text-on-light);
505
- font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
506
- font-size:.875rem;
507
- font-weight:400;
508
- letter-spacing:.01875rem;
509
- line-height:1.25rem;
510
- text-decoration:none;
511
- text-transform:none;
306
+ .bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c.bp_base_button_module_isIconButton--fe56c{
307
+ height:var(--size-8);
308
+ min-height:unset;
309
+ padding:0 calc((var(--size-8) - var(--size-4))/2);
310
+ width:var(--size-8);
512
311
  }
513
- .bp_base_inline_notice_module_noticeWrapper--ab47a svg{
514
- display:block;
312
+ .bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c{
313
+ gap:var(--space-2);
314
+ min-height:var(--size-10);
315
+ padding:0 var(--size-4);
515
316
  }
516
- .bp_base_inline_notice_module_noticeWrapper--ab47a .bp_base_inline_notice_module_title--ab47a{
517
- font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
518
- font-size:.875rem;
519
- font-weight:700;
520
- letter-spacing:.01875rem;
521
- line-height:1.25rem;
522
- text-decoration:none;
523
- text-transform:none;
317
+ .bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c.bp_base_button_module_isIconButton--fe56c{
318
+ height:var(--size-10);
319
+ padding:0 calc((var(--size-10) - var(--size-5))/2);
320
+ width:var(--size-10);
524
321
  }
525
-
526
- @media (max-width: 1023px){
527
- .bp_base_inline_notice_module_actions--ab47a{
528
- margin-top:var(--space-3);
529
- }
530
- .bp_base_inline_notice_module_noticeWrapper--ab47a{
531
- display:block;
532
- }
322
+ .bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c{
323
+ pointer-events:none;
324
+ position:relative;
325
+ }
326
+ .bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c span{
327
+ color:#0000;
328
+ opacity:0;
533
329
  }
534
330
 
535
331
  .bp_text_module_textReset--fcca1{
@@ -662,11 +458,221 @@
662
458
  text-transform:none;
663
459
  }
664
460
 
665
- .bp_avatar_module_avatar--97423{
461
+ .bp_status_module_interactiveStatus--88fd7{
462
+ border:initial;
463
+ cursor:default;
464
+ max-width:100%;
465
+ padding:initial;
466
+ vertical-align:top;
467
+ }
468
+ .bp_status_module_interactiveStatus--88fd7:focus-visible{
469
+ box-shadow:0 0 0 .125rem #2486fc;
470
+ outline:none;
471
+ overflow:visible;
472
+ }
473
+ .bp_status_module_interactiveStatus--88fd7:hover{
474
+ background-color:var(--status-interactive-background-color-hover, #e8e8e8);
475
+ box-shadow:0 0 0 .1875rem #0000000a;
476
+ }
477
+ .bp_status_module_interactiveStatus--88fd7:focus-visible{
478
+ background-color:var(--status-interactive-background-color-focus, #e8e8e8);
479
+ }
480
+
481
+ .bp_status_module_status--88fd7{
482
+ align-items:center;
483
+ background-color:var(--status-background-color, #e8e8e8);
484
+ border-radius:2rem;
485
+ color:#222;
486
+ display:flex;
487
+ font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
488
+ font-size:.625rem;
489
+ font-weight:700;
490
+ gap:.25rem;
491
+ height:1.25rem;
492
+ letter-spacing:.0375rem;
493
+ line-height:1rem;
494
+ padding-left:.5rem;
495
+ padding-right:.5rem;
496
+ text-decoration:none;
497
+ text-transform:none;
498
+ -webkit-user-select:text;
499
+ user-select:text;
500
+ white-space:nowrap;
501
+ }
502
+ .bp_status_module_status--88fd7.bp_status_module_reverse--88fd7{
503
+ flex-direction:row-reverse;
504
+ }
505
+ .bp_status_module_status--88fd7.bp_status_module_circle--88fd7{
506
+ padding:0 3px;
507
+ }
508
+ .bp_status_module_status--88fd7 .bp_status_module_text--88fd7{
509
+ overflow:hidden;
510
+ text-overflow:ellipsis;
511
+ }
512
+ .bp_status_module_status--88fd7 > svg{
513
+ flex:0 0 auto;
514
+ white-space:nowrap;
515
+ }
516
+
517
+ .bp_status_module_maxContainer--88fd7{
518
+ display:inline-block;
519
+ max-width:100%;
520
+ vertical-align:middle;
521
+ }
522
+ .bp_status_module_colorSurfaceStatusSurfaceGray--88fd7,.bp_status_module_colorSurfaceStatusSurfaceGray--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceGray--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
523
+ background-color:#e8e8e8;
524
+ }
525
+ .bp_status_module_colorSurfaceStatusSurfaceYellow--88fd7,.bp_status_module_colorSurfaceStatusSurfaceYellow--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceYellow--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
526
+ background-color:#ffeb7f;
527
+ }
528
+ .bp_status_module_colorSurfaceStatusSurfaceOrange--88fd7,.bp_status_module_colorSurfaceStatusSurfaceOrange--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceOrange--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
529
+ background-color:#f8c08c;
530
+ }
531
+ .bp_status_module_colorSurfaceStatusSurfaceRed--88fd7,.bp_status_module_colorSurfaceStatusSurfaceRed--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceRed--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
532
+ background-color:#f69bab;
533
+ }
534
+ .bp_status_module_colorSurfaceStatusSurfacePurple--88fd7,.bp_status_module_colorSurfaceStatusSurfacePurple--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfacePurple--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
535
+ background-color:#cf9ff6;
536
+ }
537
+ .bp_status_module_colorSurfaceStatusSurfaceLightBlue--88fd7,.bp_status_module_colorSurfaceStatusSurfaceLightBlue--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceLightBlue--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
538
+ background-color:#91c2fd;
539
+ }
540
+ .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--88fd7,.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
541
+ background-color:#7f9dc1;
542
+ }
543
+ .bp_status_module_colorSurfaceStatusSurfaceGreen--88fd7,.bp_status_module_colorSurfaceStatusSurfaceGreen--88fd7.bp_status_module_interactiveStatus--88fd7:focus-visible,.bp_status_module_colorSurfaceStatusSurfaceGreen--88fd7.bp_status_module_interactiveStatus--88fd7:hover{
544
+ background-color:#92e0c0;
545
+ }
546
+
547
+ .bp_accordion_module_accordionContent--81559[data-state=open]{
548
+ animation:bp_accordion_module_slideDown--81559 .15s ease-out;
549
+ }
550
+
551
+ .bp_accordion_module_accordionContent--81559[data-state=closed]{
552
+ animation:bp_accordion_module_slideUp--81559 .15s ease-out;
553
+ }
554
+
555
+ .bp_accordion_module_accordionContent--81559{
556
+ overflow:hidden;
557
+ }
558
+
559
+ @keyframes bp_accordion_module_slideDown--81559{
560
+ from{
561
+ height:0;
562
+ }
563
+ to{
564
+ height:var(--radix-accordion-content-height);
565
+ }
566
+ }
567
+ @keyframes bp_accordion_module_slideUp--81559{
568
+ from{
569
+ height:var(--radix-accordion-content-height);
570
+ }
571
+ to{
572
+ height:0;
573
+ }
574
+ }
575
+ .bp_accordion_module_accordionContentWrapper--81559{
576
+ display:flex;
577
+ flex-direction:column;
578
+ gap:var(--space-4);
579
+ padding-block:var(--space-4);
580
+ padding-block-end:var(--space-6);
581
+ padding-inline:var(--space-4);
582
+ }
583
+
584
+ .bp_accordion_module_accordionInlineErrorWrapper--81559{
585
+ padding-block-start:var(--space-4);
586
+ padding-inline:var(--space-4);
587
+ }
588
+
589
+ .bp_accordion_module_accordionItem--81559{
590
+ border-bottom:var(--border-1) solid var(--border-divider-border);
591
+ min-width:320px;
592
+ }
593
+ .bp_accordion_module_accordionItem--81559,.bp_accordion_module_accordionItem--81559 > [data-state=open]{
594
+ background-color:var(--surface-accordion-surface);
595
+ }
596
+
597
+ .bp_accordion_module_accordionFixedContent--81559{
598
+ background-color:var(--surface-surface);
599
+ display:flex;
600
+ flex-direction:column;
601
+ gap:var(--space-4);
602
+ padding-block:var(--space-5);
603
+ padding-inline:var(--space-4);
604
+ }
605
+
606
+ .bp_accordion_module_accordionHeader--81559{
607
+ color:var(--text-text-on-light);
608
+ display:flex;
609
+ font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
610
+ font-size:.9375rem;
611
+ font-weight:700;
612
+ justify-content:space-between;
613
+ letter-spacing:.01875rem;
614
+ line-height:1.25rem;
615
+ margin:0;
616
+ text-align:initial;
617
+ text-decoration:none;
618
+ text-transform:none;
619
+ width:100%;
620
+ }
621
+
622
+ .bp_accordion_module_accordionHeaderTrigger--81559{
623
+ align-items:center;
624
+ display:flex;
625
+ }
626
+
627
+ .bp_accordion_module_accordionStatus--81559{
628
+ margin-inline-start:var(--space-2);
629
+ }
630
+
631
+ .bp_accordion_module_accordionTrigger--81559{
632
+ align-items:center;
633
+ background-color:var(--surface-surface);
634
+ border:none;
635
+ display:flex;
636
+ height:100%;
637
+ padding:var(--space-4);
638
+ padding-inline-end:var(--space-6);
639
+ text-transform:capitalize;
640
+ width:100%;
641
+ }
642
+ .bp_accordion_module_accordionTrigger--81559:active{
643
+ background-color:var(--surface-surface);
644
+ }
645
+ .bp_accordion_module_accordionTrigger--81559:hover{
646
+ background-color:var(--surface-accordion-surface-hover);
647
+ cursor:pointer;
648
+ }
649
+ .bp_accordion_module_accordionTrigger--81559:focus-visible{
650
+ background-color:var(--surface-surface-hover);
651
+ box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
652
+ outline:none;
653
+ }
654
+ .bp_accordion_module_accordionTrigger--81559:disabled{
655
+ cursor:default;
656
+ opacity:.3;
657
+ }
658
+ .bp_accordion_module_accordionTrigger--81559:disabled:hover{
659
+ background-color:var(--gray-white);
660
+ }
661
+ .bp_accordion_module_accordionTrigger--81559 .bp_accordion_module_accordionTriggerIcon--81559{
662
+ color:var(--gray-50);
663
+ flex-shrink:0;
664
+ margin-inline-start:var(--space-3);
665
+ }
666
+ .bp_accordion_module_accordionTrigger--81559[data-state=open] .bp_accordion_module_accordionTriggerIcon--81559{
667
+ transform:rotate(180deg);
668
+ }
669
+
670
+ .bp_avatar_module_avatar--792cd{
666
671
  all:unset;
667
672
  align-items:center;
668
673
  background-color:var(--gray-10);
669
674
  border-radius:50%;
675
+ box-sizing:border-box;
670
676
  display:flex;
671
677
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
672
678
  font-size:.875rem;
@@ -678,7 +684,7 @@
678
684
  text-decoration:none;
679
685
  text-transform:none;
680
686
  }
681
- .bp_avatar_module_avatar--97423 .bp_avatar_module_badge--97423{
687
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_badge--792cd{
682
688
  background-color:var(--gray-white);
683
689
  border:var(--border-2) solid var(--gray-white);
684
690
  border-radius:50%;
@@ -686,7 +692,7 @@
686
692
  display:flex;
687
693
  position:absolute;
688
694
  }
689
- .bp_avatar_module_avatar--97423 .bp_avatar_module_text--97423{
695
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_text--792cd{
690
696
  align-items:center;
691
697
  border-radius:50%;
692
698
  display:flex;
@@ -694,14 +700,14 @@
694
700
  justify-content:center;
695
701
  width:100%;
696
702
  }
697
- .bp_avatar_module_avatar--97423.bp_avatar_module_small--97423{
703
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd{
698
704
  height:var(--size-6);
699
705
  width:var(--size-6);
700
706
  }
701
- .bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_text--97423{
707
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_text--792cd{
702
708
  font-size:.5rem;
703
709
  }
704
- .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{
710
+ .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{
705
711
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
706
712
  font-size:.625rem;
707
713
  font-weight:700;
@@ -710,14 +716,14 @@
710
716
  text-decoration:none;
711
717
  text-transform:none;
712
718
  }
713
- .bp_avatar_module_avatar--97423.bp_avatar_module_small--97423 .bp_avatar_module_badge--97423{
719
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_small--792cd .bp_avatar_module_badge--792cd{
714
720
  right:-.25rem;
715
721
  }
716
- .bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423{
722
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd{
717
723
  height:var(--size-7);
718
724
  width:var(--size-7);
719
725
  }
720
- .bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_text--97423{
726
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_text--792cd{
721
727
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
722
728
  font-size:.625rem;
723
729
  font-weight:700;
@@ -726,20 +732,20 @@
726
732
  text-decoration:none;
727
733
  text-transform:none;
728
734
  }
729
- .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{
735
+ .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{
730
736
  font-size:.8125rem;
731
737
  }
732
- .bp_avatar_module_avatar--97423.bp_avatar_module_medium--97423 .bp_avatar_module_badge--97423{
738
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_medium--792cd .bp_avatar_module_badge--792cd{
733
739
  right:-.375rem;
734
740
  }
735
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423{
741
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd{
736
742
  height:var(--size-8);
737
743
  width:var(--size-8);
738
744
  }
739
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_text--97423{
745
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_text--792cd{
740
746
  font-size:.5rem;
741
747
  }
742
- .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{
748
+ .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{
743
749
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
744
750
  font-size:.875rem;
745
751
  font-weight:700;
@@ -748,10 +754,10 @@
748
754
  text-decoration:none;
749
755
  text-transform:none;
750
756
  }
751
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-3--97423.bp_avatar_module_text--97423{
757
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-3--792cd.bp_avatar_module_text--792cd{
752
758
  font-size:.6875rem;
753
759
  }
754
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_length-4--97423.bp_avatar_module_text--97423{
760
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_length-4--792cd.bp_avatar_module_text--792cd{
755
761
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
756
762
  font-size:.625rem;
757
763
  font-weight:700;
@@ -760,17 +766,17 @@
760
766
  text-decoration:none;
761
767
  text-transform:none;
762
768
  }
763
- .bp_avatar_module_avatar--97423.bp_avatar_module_large--97423 .bp_avatar_module_badge--97423{
769
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_large--792cd .bp_avatar_module_badge--792cd{
764
770
  right:-.25rem;
765
771
  }
766
- .bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423{
772
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd{
767
773
  height:var(--size-11);
768
774
  width:var(--size-11);
769
775
  }
770
- .bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_text--97423{
776
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_text--792cd{
771
777
  font-size:1rem;
772
778
  }
773
- .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{
779
+ .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{
774
780
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
775
781
  font-size:1.3125rem;
776
782
  font-weight:700;
@@ -779,39 +785,52 @@
779
785
  text-decoration:none;
780
786
  text-transform:none;
781
787
  }
782
- .bp_avatar_module_avatar--97423.bp_avatar_module_xlarge--97423 .bp_avatar_module_badge--97423{
788
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xlarge--792cd .bp_avatar_module_badge--792cd{
783
789
  right:-.375rem;
784
790
  }
785
- .bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423{
791
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd{
786
792
  height:var(--size-20);
787
793
  width:var(--size-20);
788
794
  }
789
- .bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_text--97423{
795
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_text--792cd{
790
796
  font-size:1.25rem;
791
797
  }
792
- .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{
798
+ .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{
793
799
  font-size:2rem;
794
800
  }
795
- .bp_avatar_module_avatar--97423.bp_avatar_module_xxlarge--97423 .bp_avatar_module_badge--97423{
801
+ .bp_avatar_module_avatar--792cd.bp_avatar_module_xxlarge--792cd .bp_avatar_module_badge--792cd{
796
802
  right:-.375rem;
797
803
  }
798
- .bp_avatar_module_avatar--97423 .bp_avatar_module_image--97423{
804
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_image--792cd{
799
805
  border-radius:50%;
800
806
  height:100%;
801
807
  object-fit:cover;
802
808
  width:100%;
803
809
  }
804
- .bp_avatar_module_avatar--97423 .bp_avatar_module_image--97423.bp_avatar_module_loading--97423{
810
+ .bp_avatar_module_avatar--792cd .bp_avatar_module_image--792cd.bp_avatar_module_loading--792cd{
805
811
  height:0;
806
812
  width:0;
807
813
  }
808
814
 
809
- .bp_avatar_module_anonymousAvatar--97423{
815
+ .bp_avatar_module_anonymousAvatar--792cd{
810
816
  align-items:center;
811
817
  display:flex;
812
818
  justify-content:center;
813
819
  }
814
820
 
821
+ [data-button-wrapper]:hover .bp_avatar_module_avatar--792cd{
822
+ box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
823
+ cursor:pointer;
824
+ }
825
+
826
+ [data-button-wrapper]:active .bp_avatar_module_avatar--792cd{
827
+ box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
828
+ }
829
+
830
+ [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--792cd{
831
+ box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
832
+ }
833
+
815
834
  .bp_base_badge_module_badgeContainer--38d12{
816
835
  display:inline-flex;
817
836
  position:relative;
@@ -891,6 +910,9 @@
891
910
  .bp_base_badge_module_numericBadgeMoreDigits--38d12{
892
911
  padding:1px 3px;
893
912
  }
913
+ .bp_button_wrapper_module_buttonWrapper--b0897{
914
+ all:unset;
915
+ }
894
916
 
895
917
  .bp_card_module_card--35455{
896
918
  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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "8.4.0",
3
+ "version": "8.5.0",
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": "057276bec06cb3038669d8e87106aaa2bd86c718",
66
+ "gitHead": "b963b0c33615aba9b65b3d3787ebb490b039070f",
67
67
  "module": "lib-esm/index.js",
68
68
  "main": "lib-esm/index.js",
69
69
  "exports": {