@box/blueprint-web 13.5.0 → 13.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 (5) hide show
  1. package/dist/lib-esm/actionable-inline-notice/types.d.ts +1 -1
  2. package/dist/lib-esm/index.css +40 -34
  3. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
  4. package/dist/lib-esm/primitives/base-inline-notice/types.d.ts +1 -1
  5. package/package.json +3 -3
package/dist/lib-esm/actionable-inline-notice/types.d.ts CHANGED
@@ -5,7 +5,7 @@ export type ActionableInlineNoticeProps = {
5
5
  /** Governs background color for inline notice
6
6
  * @default backgroundBlue
7
7
  */
8
- backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple' | 'backgroundRed' | 'backgroundWhite'>;
8
+ backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple' | 'backgroundRed' | 'backgroundWhite' | 'backgroundGray'>;
9
9
  /** Text for the body of the inline notice */
10
10
  text: string;
11
11
  /** Optional children buttons for the inline notice CTA. Specify either PrimaryAction OR both TertiaryAction and PrimaryAction. */
package/dist/lib-esm/index.css CHANGED
@@ -49,7 +49,7 @@
49
49
  background-color:var(--ghost-background-color);
50
50
  }
51
51
  }
52
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=false]{
52
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=false]{
53
53
  --notice-border-color:var(--bp-border-inline-notice-border);
54
54
  --notice-border-width:var(--border-1);
55
55
  --notice-radius:var(--radius-2);
@@ -63,6 +63,7 @@
63
63
  --notice-surface-success:var(--surface-message-surface-success-secondary);
64
64
  --notice-surface-promo:var(--surface-message-surface-promo-secondary);
65
65
  --notice-surface-note:var(--bp-surface-inline-notice-surface-note);
66
+ --notice-surface-gray:var(--gray-05);
66
67
  --notice-btn-text-promo:var(--text-cta-promo);
67
68
  --notice-btn-surface-promo:var(--surface-cta-surface-promo);
68
69
  --notice-btn-surface-promo-pressed:var(--surface-cta-surface-promo-pressed);
@@ -77,7 +78,7 @@
77
78
  --notice-content-align:center;
78
79
  --notice-icon-padding-top:0;
79
80
  }
80
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=false] .bp_base_inline_notice_module_content--ba8f8{
81
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=false] .bp_base_inline_notice_module_content--0fad9{
81
82
  font-family:var(--body-default-font-family);
82
83
  font-size:var(--body-default-font-size);
83
84
  font-weight:var(--body-default-font-weight);
@@ -86,7 +87,7 @@
86
87
  text-decoration:var(--body-default-text-decoration);
87
88
  text-transform:var(--body-default-text-case);
88
89
  }
89
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=false] .bp_base_inline_notice_module_title--ba8f8{
90
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=false] .bp_base_inline_notice_module_title--0fad9{
90
91
  font-family:var(--body-default-bold-font-family);
91
92
  font-size:var(--body-default-bold-font-size);
92
93
  font-weight:var(--body-default-bold-font-weight);
@@ -96,7 +97,7 @@
96
97
  text-transform:var(--body-default-bold-text-case);
97
98
  }
98
99
 
99
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true]{
100
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=true]{
100
101
  --notice-border-color:var(--bp-border-inline-notice-border);
101
102
  --notice-border-width:var(--bp-border-01);
102
103
  --notice-radius:var(--bp-radius-10);
@@ -110,6 +111,7 @@
110
111
  --notice-surface-success:var(--bp-surface-inline-notice-surface-success);
111
112
  --notice-surface-promo:var(--bp-grimace-10);
112
113
  --notice-surface-note:var(--bp-surface-inline-notice-surface-note);
114
+ --notice-surface-gray:var(--bp-gray-05);
113
115
  --notice-btn-text-promo:var(--bp-text-cta-promo);
114
116
  --notice-btn-surface-promo:var(--bp-surface-cta-surface-promo);
115
117
  --notice-btn-surface-promo-pressed:var(--bp-surface-cta-surface-promo-pressed);
@@ -124,116 +126,120 @@
124
126
  --notice-content-align:top;
125
127
  --notice-icon-padding-top:var(--bp-space-005);
126
128
  }
127
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_content--ba8f8{
129
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=true] .bp_base_inline_notice_module_content--0fad9{
128
130
  font-weight:var(--bp-font-weight-regular);
129
131
  }
130
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_content--ba8f8,.bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_title--ba8f8{
132
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=true] .bp_base_inline_notice_module_content--0fad9,.bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=true] .bp_base_inline_notice_module_title--0fad9{
131
133
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
132
134
  font-size:var(--bp-font-size-05);
133
135
  font-style:normal;
134
136
  letter-spacing:var(--bp-font-letter-spacing-01);
135
137
  line-height:var(--bp-font-line-height-04);
136
138
  }
137
- .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_title--ba8f8{
139
+ .bp_base_inline_notice_module_noticeWrapper--0fad9[data-modern=true] .bp_base_inline_notice_module_title--0fad9{
138
140
  font-weight:var(--bp-font-weight-bold);
139
141
  }
140
142
 
141
- .bp_base_inline_notice_module_noticeWrapper--ba8f8{
143
+ .bp_base_inline_notice_module_noticeWrapper--0fad9{
142
144
  border-radius:var(--notice-radius);
143
145
  display:flex;
144
146
  gap:var(--notice-gap);
145
147
  justify-content:space-between;
146
148
  padding:var(--notice-padding-block) var(--notice-padding-inline);
147
149
  }
148
- .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_actions--ba8f8{
150
+ .bp_base_inline_notice_module_noticeWrapper--0fad9 .bp_base_inline_notice_module_actions--0fad9{
149
151
  align-self:center;
150
152
  display:flex;
151
153
  gap:var(--notice-gap);
152
154
  justify-content:flex-end;
153
155
  }
154
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundYellow--ba8f8{
156
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundYellow--0fad9{
155
157
  background:var(--notice-surface-warning);
156
158
  }
157
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundBlue--ba8f8{
159
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundBlue--0fad9{
158
160
  background:var(--notice-surface-info);
159
161
  }
160
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8{
162
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9{
161
163
  background:var(--notice-surface-error);
162
164
  }
163
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonTertiary--ba8f8{
165
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonTertiary--0fad9{
164
166
  color:var(--notice-btn-text-error);
165
167
  }
166
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8{
168
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9{
167
169
  background:var(--notice-btn-surface-error);
168
170
  border-color:var(--notice-btn-surface-error);
169
171
  }
170
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):active{
172
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):active{
171
173
  background:var(--notice-btn-surface-error-pressed);
172
174
  }
173
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled)[data-focus-visible]{
175
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled)[data-focus-visible]{
174
176
  background:var(--notice-btn-surface-error-hover);
175
177
  }
176
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover{
178
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):hover{
177
179
  background:var(--notice-btn-surface-error-hover);
178
180
  border-color:var(--notice-btn-surface-error-hover);
179
181
  }
180
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):focus:active,.bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover:active{
182
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):focus:active,.bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundRed--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):hover:active{
181
183
  background:var(--notice-btn-surface-error-pressed);
182
184
  }
183
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundGreen--ba8f8{
185
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundGreen--0fad9{
184
186
  background:var(--notice-surface-success);
185
187
  }
186
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8{
188
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9{
187
189
  background:var(--notice-surface-promo);
188
190
  }
189
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonTertiary--ba8f8{
191
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonTertiary--0fad9{
190
192
  color:var(--notice-btn-text-promo);
191
193
  }
192
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8{
194
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9{
193
195
  background:var(--notice-btn-surface-promo);
194
196
  border-color:var(--notice-btn-surface-promo);
195
197
  }
196
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):active{
198
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):active{
197
199
  background:var(--notice-btn-surface-promo-pressed);
198
200
  }
199
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled)[data-focus-visible]{
201
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled)[data-focus-visible]{
200
202
  background:var(--notice-btn-surface-promo-focus);
201
203
  }
202
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover{
204
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):hover{
203
205
  background:var(--notice-btn-surface-promo-hover);
204
206
  border-color:var(--notice-btn-surface-promo-hover);
205
207
  }
206
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):focus:active{
208
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):focus:active{
207
209
  background:var(--notice-btn-surface-promo-focus-pressed);
208
210
  }
209
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover:active{
211
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundPurple--0fad9 .bp_base_inline_notice_module_actionButtonPrimary--0fad9:not(:disabled):hover:active{
210
212
  background:var(--notice-btn-surface-promo-pressed);
211
213
  }
212
- .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundWhite--ba8f8{
214
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundWhite--0fad9{
213
215
  background:var(--notice-surface-note);
214
216
  border:var(--notice-border-width) solid var(--notice-border-color);
215
217
  }
216
- .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_contentContainer--ba8f8{
218
+ .bp_base_inline_notice_module_noticeWrapper--0fad9.bp_base_inline_notice_module_backgroundGray--0fad9{
219
+ background:var(--notice-surface-gray);
220
+ border:var(--notice-border-width) solid var(--notice-border-color);
221
+ }
222
+ .bp_base_inline_notice_module_noticeWrapper--0fad9 .bp_base_inline_notice_module_contentContainer--0fad9{
217
223
  align-items:var(--notice-content-align);
218
224
  align-self:center;
219
225
  display:flex;
220
226
  gap:var(--notice-gap);
221
227
  }
222
- .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_content--ba8f8{
228
+ .bp_base_inline_notice_module_noticeWrapper--0fad9 .bp_base_inline_notice_module_content--0fad9{
223
229
  color:var(--notice-content-text-color);
224
230
  }
225
- .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_icon--ba8f8{
231
+ .bp_base_inline_notice_module_noticeWrapper--0fad9 .bp_base_inline_notice_module_icon--0fad9{
226
232
  padding-top:var(--notice-icon-padding-top);
227
233
  }
228
- .bp_base_inline_notice_module_noticeWrapper--ba8f8 svg{
234
+ .bp_base_inline_notice_module_noticeWrapper--0fad9 svg{
229
235
  display:block;
230
236
  }
231
237
 
232
238
  @media (max-width: 1023px){
233
- .bp_base_inline_notice_module_actions--ba8f8{
239
+ .bp_base_inline_notice_module_actions--0fad9{
234
240
  margin-top:var(--notice-space-3);
235
241
  }
236
- .bp_base_inline_notice_module_noticeWrapper--ba8f8{
242
+ .bp_base_inline_notice_module_noticeWrapper--0fad9{
237
243
  display:block;
238
244
  }
239
245
  }
package/dist/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--ba8f8","content":"bp_base_inline_notice_module_content--ba8f8","title":"bp_base_inline_notice_module_title--ba8f8","actions":"bp_base_inline_notice_module_actions--ba8f8","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--ba8f8","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--ba8f8","backgroundRed":"bp_base_inline_notice_module_backgroundRed--ba8f8","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--ba8f8","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--ba8f8","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--ba8f8","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--ba8f8","backgroundWhite":"bp_base_inline_notice_module_backgroundWhite--ba8f8","contentContainer":"bp_base_inline_notice_module_contentContainer--ba8f8","icon":"bp_base_inline_notice_module_icon--ba8f8"};
2
+ var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--0fad9","content":"bp_base_inline_notice_module_content--0fad9","title":"bp_base_inline_notice_module_title--0fad9","actions":"bp_base_inline_notice_module_actions--0fad9","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--0fad9","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--0fad9","backgroundRed":"bp_base_inline_notice_module_backgroundRed--0fad9","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--0fad9","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--0fad9","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--0fad9","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--0fad9","backgroundWhite":"bp_base_inline_notice_module_backgroundWhite--0fad9","backgroundGray":"bp_base_inline_notice_module_backgroundGray--0fad9","contentContainer":"bp_base_inline_notice_module_contentContainer--0fad9","icon":"bp_base_inline_notice_module_icon--0fad9"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/base-inline-notice/types.d.ts CHANGED
@@ -31,7 +31,7 @@ export interface BaseInlineNoticeContentContainerProps {
31
31
  /** Children within the container */
32
32
  children: ReactNode;
33
33
  }
34
- export type BaseInlineNoticeBackgroundColor = 'backgroundBlue' | 'backgroundYellow' | 'backgroundGreen' | 'backgroundRed' | 'backgroundPurple' | 'backgroundWhite';
34
+ export type BaseInlineNoticeBackgroundColor = 'backgroundBlue' | 'backgroundYellow' | 'backgroundGreen' | 'backgroundRed' | 'backgroundPurple' | 'backgroundWhite' | 'backgroundGray';
35
35
  export interface BaseInlineNoticeProps extends HTMLAttributes<HTMLDivElement> {
36
36
  /** Governs the background color displayed. */
37
37
  backgroundColor: BaseInlineNoticeBackgroundColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.5.0",
3
+ "version": "13.5.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.101.19",
50
+ "@box/blueprint-web-assets": "^4.101.20",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.16.56",
80
+ "@box/storybook-utils": "^0.16.57",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",