@box/blueprint-web 13.5.0 → 13.5.2
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.
- package/dist/lib-esm/actionable-inline-notice/types.d.ts +1 -1
- package/dist/lib-esm/index.css +83 -87
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
- package/dist/lib-esm/primitives/base-inline-notice/types.d.ts +1 -1
- package/dist/lib-esm/select/select.module.js +1 -1
- package/package.json +3 -3
|
@@ -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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
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--
|
|
242
|
+
.bp_base_inline_notice_module_noticeWrapper--0fad9{
|
|
237
243
|
display:block;
|
|
238
244
|
}
|
|
239
245
|
}
|
|
@@ -4333,7 +4339,7 @@
|
|
|
4333
4339
|
.bp_combobox_group_module_comboboxHasFocus--58b45.bp_combobox_group_module_errorSelect--58b45.bp_combobox_group_module_trailing--58b45{
|
|
4334
4340
|
--blueprint-select-border-error-left-width:none;
|
|
4335
4341
|
}
|
|
4336
|
-
.bp_select_module_container--
|
|
4342
|
+
.bp_select_module_container--d0d36[data-modern=false]{
|
|
4337
4343
|
--select-gap:var(--space-2);
|
|
4338
4344
|
--select-label-color:var(--text-text-on-light);
|
|
4339
4345
|
--select-trigger-btn-gap:var(--space-2);
|
|
@@ -4370,7 +4376,7 @@
|
|
|
4370
4376
|
text-decoration:var(--body-default-text-decoration);
|
|
4371
4377
|
text-transform:var(--body-default-text-case);
|
|
4372
4378
|
}
|
|
4373
|
-
.bp_select_module_container--
|
|
4379
|
+
.bp_select_module_container--d0d36[data-modern=false] .bp_select_module_label--d0d36{
|
|
4374
4380
|
font-family:var(--body-default-bold-font-family);
|
|
4375
4381
|
font-size:var(--body-default-bold-font-size);
|
|
4376
4382
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -4379,7 +4385,7 @@
|
|
|
4379
4385
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
4380
4386
|
text-transform:var(--body-default-bold-text-case);
|
|
4381
4387
|
}
|
|
4382
|
-
.bp_select_module_container--
|
|
4388
|
+
.bp_select_module_container--d0d36[data-modern=false] .bp_select_module_triggerBtn--d0d36{
|
|
4383
4389
|
font-family:var(--body-default-font-family);
|
|
4384
4390
|
font-size:var(--body-default-font-size);
|
|
4385
4391
|
font-weight:var(--body-default-font-weight);
|
|
@@ -4389,7 +4395,7 @@
|
|
|
4389
4395
|
text-transform:var(--body-default-text-case);
|
|
4390
4396
|
}
|
|
4391
4397
|
|
|
4392
|
-
.bp_select_module_container--
|
|
4398
|
+
.bp_select_module_container--d0d36[data-modern=true]{
|
|
4393
4399
|
--select-gap:var(--bp-space-020);
|
|
4394
4400
|
--select-label-color:var(--bp-text-text-on-light);
|
|
4395
4401
|
--select-trigger-btn-gap:var(--bp-space-020);
|
|
@@ -4420,17 +4426,17 @@
|
|
|
4420
4426
|
--select-trigger-left-element-size:var(--bp-size-060);
|
|
4421
4427
|
font-weight:var(--bp-font-weight-regular);
|
|
4422
4428
|
}
|
|
4423
|
-
.bp_select_module_container--
|
|
4429
|
+
.bp_select_module_container--d0d36[data-modern=true],.bp_select_module_container--d0d36[data-modern=true] .bp_select_module_label--d0d36{
|
|
4424
4430
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4425
4431
|
font-size:var(--bp-font-size-05);
|
|
4426
4432
|
font-style:normal;
|
|
4427
4433
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
4428
4434
|
line-height:var(--bp-font-line-height-04);
|
|
4429
4435
|
}
|
|
4430
|
-
.bp_select_module_container--
|
|
4436
|
+
.bp_select_module_container--d0d36[data-modern=true] .bp_select_module_label--d0d36{
|
|
4431
4437
|
font-weight:var(--bp-font-weight-bold);
|
|
4432
4438
|
}
|
|
4433
|
-
.bp_select_module_container--
|
|
4439
|
+
.bp_select_module_container--d0d36[data-modern=true] .bp_select_module_triggerBtn--d0d36{
|
|
4434
4440
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4435
4441
|
font-size:var(--bp-font-size-05);
|
|
4436
4442
|
font-style:normal;
|
|
@@ -4439,20 +4445,20 @@
|
|
|
4439
4445
|
line-height:var(--bp-font-line-height-04);
|
|
4440
4446
|
}
|
|
4441
4447
|
|
|
4442
|
-
.bp_select_module_container--
|
|
4448
|
+
.bp_select_module_container--d0d36{
|
|
4443
4449
|
display:flex;
|
|
4444
4450
|
flex-direction:column;
|
|
4445
4451
|
gap:var(--select-gap);
|
|
4446
4452
|
}
|
|
4447
|
-
.bp_select_module_container--
|
|
4453
|
+
.bp_select_module_container--d0d36.bp_select_module_disabled--d0d36{
|
|
4448
4454
|
opacity:60%;
|
|
4449
4455
|
}
|
|
4450
|
-
.bp_select_module_container--
|
|
4456
|
+
.bp_select_module_container--d0d36 .bp_select_module_label--d0d36{
|
|
4451
4457
|
color:var(--select-label-color);
|
|
4452
4458
|
flex:0 0 fit-content;
|
|
4453
4459
|
overflow-wrap:break-word;
|
|
4454
4460
|
}
|
|
4455
|
-
.bp_select_module_container--
|
|
4461
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36{
|
|
4456
4462
|
align-items:center;
|
|
4457
4463
|
background-color:var(--select-trigger-btn-bg-color);
|
|
4458
4464
|
border-bottom:var(--select-trigger-btn-border-bottom);
|
|
@@ -4473,7 +4479,7 @@
|
|
|
4473
4479
|
text-align:start;
|
|
4474
4480
|
width:100%;
|
|
4475
4481
|
}
|
|
4476
|
-
.bp_select_module_container--
|
|
4482
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 .bp_select_module_triggerValue--d0d36{
|
|
4477
4483
|
align-items:center;
|
|
4478
4484
|
display:flex;
|
|
4479
4485
|
gap:var(--select-trigger-btn-gap);
|
|
@@ -4482,7 +4488,7 @@
|
|
|
4482
4488
|
text-overflow:ellipsis;
|
|
4483
4489
|
white-space:nowrap;
|
|
4484
4490
|
}
|
|
4485
|
-
.bp_select_module_container--
|
|
4491
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 .bp_select_module_triggerLeftElement--d0d36{
|
|
4486
4492
|
align-items:center;
|
|
4487
4493
|
display:flex;
|
|
4488
4494
|
flex-shrink:0;
|
|
@@ -4490,58 +4496,58 @@
|
|
|
4490
4496
|
justify-content:center;
|
|
4491
4497
|
width:var(--select-trigger-left-element-size);
|
|
4492
4498
|
}
|
|
4493
|
-
.bp_select_module_container--
|
|
4499
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 span:first-child{
|
|
4494
4500
|
overflow:hidden;
|
|
4495
4501
|
text-overflow:ellipsis;
|
|
4496
4502
|
white-space:nowrap;
|
|
4497
4503
|
}
|
|
4498
|
-
.bp_select_module_container--
|
|
4504
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:disabled{
|
|
4499
4505
|
cursor:default;
|
|
4500
4506
|
}
|
|
4501
|
-
.bp_select_module_container--
|
|
4507
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36.bp_select_module_readonly--d0d36:not(:disabled){
|
|
4502
4508
|
background-color:var(--gray-02);
|
|
4503
4509
|
box-shadow:none;
|
|
4504
4510
|
color:var(--text-text-on-light-secondary);
|
|
4505
4511
|
cursor:default;
|
|
4506
4512
|
}
|
|
4507
|
-
.bp_select_module_container--
|
|
4513
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:not(.bp_select_module_readonly--d0d36, :disabled).bp_select_module_error--d0d36, .bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:not(.bp_select_module_readonly--d0d36, :disabled)[aria-invalid=true]{
|
|
4508
4514
|
background-color:var(--select-trigger-btn-error-bg-color);
|
|
4509
4515
|
border-bottom:var(--select-trigger-btn-error-border-bottom);
|
|
4510
4516
|
border-left:var(--select-trigger-btn-error-border-left);
|
|
4511
4517
|
border-right:var(--select-trigger-btn-error-border-right);
|
|
4512
4518
|
border-top:var(--select-trigger-btn-error-border-top);
|
|
4513
4519
|
}
|
|
4514
|
-
.bp_select_module_container--
|
|
4520
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:not(.bp_select_module_readonly--d0d36):focus,.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:not(.bp_select_module_readonly--d0d36, :disabled).bp_select_module_error--d0d36:focus,.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:not(.bp_select_module_readonly--d0d36, :disabled)[aria-invalid=true]:focus{
|
|
4515
4521
|
background-color:var(--select-trigger-btn-focus-bg-color);
|
|
4516
4522
|
border:var(--select-trigger-btn-focus-border);
|
|
4517
4523
|
}
|
|
4518
|
-
.bp_select_module_container--
|
|
4524
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36:not(.bp_select_module_readonly--d0d36, :disabled, :focus, .bp_select_module_error--d0d36, [aria-invalid=true]):hover{
|
|
4519
4525
|
background-color:var(--select-trigger-btn-hover-bg-color);
|
|
4520
4526
|
border-color:var(--select-trigger-btn-hover-border-color);
|
|
4521
4527
|
}
|
|
4522
|
-
.bp_select_module_container--
|
|
4528
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 .bp_select_module_iconWrapper--d0d36{
|
|
4523
4529
|
flex-shrink:0;
|
|
4524
4530
|
-webkit-user-select:none;
|
|
4525
4531
|
user-select:none;
|
|
4526
4532
|
}
|
|
4527
|
-
.bp_select_module_container--
|
|
4533
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 .bp_select_module_iconCaret--d0d36{
|
|
4528
4534
|
display:block;
|
|
4529
4535
|
height:var(--select-trigger-btn-caret-height);
|
|
4530
4536
|
width:var(--select-trigger-btn-caret-width);
|
|
4531
4537
|
}
|
|
4532
|
-
.bp_select_module_container--
|
|
4538
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 .bp_select_module_iconCaret--d0d36 path{
|
|
4533
4539
|
fill:var(--select-trigger-btn-caret-color);
|
|
4534
4540
|
}
|
|
4535
|
-
.bp_select_module_container--
|
|
4541
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36 .bp_select_module_iconPencilCrossed--d0d36{
|
|
4536
4542
|
display:block;
|
|
4537
4543
|
height:var(--select-trigger-btn-pencil-height);
|
|
4538
4544
|
width:var(--select-trigger-btn-pencil-width);
|
|
4539
4545
|
}
|
|
4540
|
-
.bp_select_module_container--
|
|
4546
|
+
.bp_select_module_container--d0d36 .bp_select_module_triggerBtn--d0d36[data-state=open] .bp_select_module_icon--d0d36{
|
|
4541
4547
|
transform:rotate(180deg);
|
|
4542
4548
|
}
|
|
4543
4549
|
|
|
4544
|
-
.bp_select_module_content--
|
|
4550
|
+
.bp_select_module_content--d0d36[data-modern=false]{
|
|
4545
4551
|
--select-content-bg-color:var(--surface-menu-surface);
|
|
4546
4552
|
--select-content-backdrop-filter:none;
|
|
4547
4553
|
--select-content-border:var(--border-1) solid var(--border-card-border);
|
|
@@ -4557,13 +4563,10 @@
|
|
|
4557
4563
|
--select-content-viewport-option-padding-inline-reversed:var(--space-2) var(--space-10);
|
|
4558
4564
|
--select-content-viewport-option-focus-bg-color:var(--surface-menu-surface-focus);
|
|
4559
4565
|
--select-content-viewport-option-focus-border:var(--border-2) solid var(--outline-focus-on-light);
|
|
4560
|
-
--select-content-viewport-option-active-bg-color:var(--surface-menu-surface);
|
|
4561
|
-
--select-content-viewport-option-active-border:var(--border-2) solid #0000;
|
|
4562
4566
|
--select-content-viewport-option-hover-bg-color:var(--surface-menu-surface-hover);
|
|
4563
4567
|
--select-content-viewport-option-secondary-text-color:var(--text-text-on-light-secondary);
|
|
4564
4568
|
--select-content-viewport-option-indicator-left:var(--space-2);
|
|
4565
4569
|
--select-content-viewport-option-indicator-right:var(--space-2);
|
|
4566
|
-
--select-content-viewport-option-indicator-height:var(--size-9);
|
|
4567
4570
|
--select-content-viewport-option-indicator-color:var(--icon-icon-on-light);
|
|
4568
4571
|
--select-content-viewport-option-separator-height:var(--border-1);
|
|
4569
4572
|
--select-content-viewport-option-separator-bg-color:var(--border-divider-border);
|
|
@@ -4578,7 +4581,7 @@
|
|
|
4578
4581
|
text-transform:var(--body-default-text-case);
|
|
4579
4582
|
}
|
|
4580
4583
|
|
|
4581
|
-
.bp_select_module_content--
|
|
4584
|
+
.bp_select_module_content--d0d36[data-modern=true]{
|
|
4582
4585
|
--select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
|
|
4583
4586
|
--select-content-backdrop-filter:blur(16px);
|
|
4584
4587
|
--select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
|
|
@@ -4594,13 +4597,10 @@
|
|
|
4594
4597
|
--select-content-viewport-option-padding-inline-reversed:var(--bp-space-020) var(--bp-space-100);
|
|
4595
4598
|
--select-content-viewport-option-focus-bg-color:var(--bp-surface-menu-item-surface-hover);
|
|
4596
4599
|
--select-content-viewport-option-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
4597
|
-
--select-content-viewport-option-active-bg-color:var(--bp-surface-menu-item-surface);
|
|
4598
|
-
--select-content-viewport-option-active-border:var(--bp-border-02) solid #0000;
|
|
4599
4600
|
--select-content-viewport-option-hover-bg-color:var(--bp-surface-menu-item-surface-hover);
|
|
4600
4601
|
--select-content-viewport-option-secondary-text-color:var(--bp-text-text-on-light-secondary);
|
|
4601
4602
|
--select-content-viewport-option-indicator-left:var(--bp-space-020);
|
|
4602
4603
|
--select-content-viewport-option-indicator-right:var(--bp-space-020);
|
|
4603
|
-
--select-content-viewport-option-indicator-height:var(--bp-size-090);
|
|
4604
4604
|
--select-content-viewport-option-indicator-color:var(--bp-icon-icon-on-light);
|
|
4605
4605
|
--select-content-viewport-option-separator-height:var(--bp-border-01);
|
|
4606
4606
|
--select-content-viewport-option-separator-bg-color:var(--bp-border-divider-border);
|
|
@@ -4614,7 +4614,7 @@
|
|
|
4614
4614
|
line-height:var(--bp-font-line-height-04);
|
|
4615
4615
|
}
|
|
4616
4616
|
|
|
4617
|
-
.bp_select_module_content--
|
|
4617
|
+
.bp_select_module_content--d0d36{
|
|
4618
4618
|
backdrop-filter:var(--select-content-backdrop-filter);
|
|
4619
4619
|
background-color:var(--select-content-bg-color);
|
|
4620
4620
|
border:var(--select-content-border);
|
|
@@ -4626,11 +4626,11 @@
|
|
|
4626
4626
|
overflow:auto;
|
|
4627
4627
|
z-index:380;
|
|
4628
4628
|
}
|
|
4629
|
-
.bp_select_module_content--
|
|
4629
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36{
|
|
4630
4630
|
padding-block:var(--select-content-viewport-padding-block);
|
|
4631
4631
|
padding-inline:var(--select-content-viewport-padding-inline);
|
|
4632
4632
|
}
|
|
4633
|
-
.bp_select_module_content--
|
|
4633
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36{
|
|
4634
4634
|
align-items:center;
|
|
4635
4635
|
border:var(--select-content-viewport-option-border);
|
|
4636
4636
|
border-radius:var(--select-content-viewport-option-border-radius);
|
|
@@ -4646,22 +4646,18 @@
|
|
|
4646
4646
|
-webkit-user-select:none;
|
|
4647
4647
|
user-select:none;
|
|
4648
4648
|
}
|
|
4649
|
-
.bp_select_module_content--
|
|
4649
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36[data-disabled]{
|
|
4650
4650
|
opacity:60%;
|
|
4651
4651
|
pointer-events:none;
|
|
4652
4652
|
}
|
|
4653
|
-
.bp_select_module_content--
|
|
4653
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36:focus-visible{
|
|
4654
4654
|
background-color:var(--select-content-viewport-option-focus-bg-color);
|
|
4655
4655
|
border:var(--select-content-viewport-option-focus-border);
|
|
4656
4656
|
}
|
|
4657
|
-
.bp_select_module_content--
|
|
4658
|
-
background-color:var(--select-content-viewport-option-active-bg-color);
|
|
4659
|
-
border:var(--select-content-viewport-option-active-border);
|
|
4660
|
-
}
|
|
4661
|
-
.bp_select_module_content--33e59 .bp_select_module_viewport--33e59 .bp_select_module_option--33e59:hover{
|
|
4657
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36:hover{
|
|
4662
4658
|
background-color:var(--select-content-viewport-option-hover-bg-color);
|
|
4663
4659
|
}
|
|
4664
|
-
.bp_select_module_content--
|
|
4660
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_textWrapper--d0d36{
|
|
4665
4661
|
align-items:center;
|
|
4666
4662
|
display:flex;
|
|
4667
4663
|
flex:1;
|
|
@@ -4670,14 +4666,14 @@
|
|
|
4670
4666
|
min-width:0;
|
|
4671
4667
|
overflow:hidden;
|
|
4672
4668
|
}
|
|
4673
|
-
.bp_select_module_content--
|
|
4669
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_textWrapper--d0d36 span:first-child{
|
|
4674
4670
|
overflow:hidden;
|
|
4675
4671
|
overflow-wrap:break-word;
|
|
4676
4672
|
}
|
|
4677
|
-
.bp_select_module_content--
|
|
4673
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_secondaryText--d0d36{
|
|
4678
4674
|
color:var(--select-content-viewport-option-secondary-text-color);
|
|
4679
4675
|
}
|
|
4680
|
-
.bp_select_module_content--
|
|
4676
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_leftElement--d0d36{
|
|
4681
4677
|
align-items:center;
|
|
4682
4678
|
display:flex;
|
|
4683
4679
|
flex-shrink:0;
|
|
@@ -4685,30 +4681,30 @@
|
|
|
4685
4681
|
justify-content:center;
|
|
4686
4682
|
width:var(--select-content-viewport-option-left-element-size);
|
|
4687
4683
|
}
|
|
4688
|
-
.bp_select_module_content--
|
|
4684
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36.bp_select_module_hasLeftElement--d0d36{
|
|
4689
4685
|
padding-inline:var(--select-content-viewport-option-padding-inline-reversed);
|
|
4690
4686
|
}
|
|
4691
|
-
.bp_select_module_content--
|
|
4687
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36.bp_select_module_hasLeftElement--d0d36 .bp_select_module_textWrapper--d0d36{
|
|
4692
4688
|
align-items:flex-start;
|
|
4693
4689
|
flex-direction:column;
|
|
4694
4690
|
}
|
|
4695
|
-
.bp_select_module_content--
|
|
4691
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_indicator--d0d36{
|
|
4696
4692
|
align-items:center;
|
|
4697
4693
|
display:flex;
|
|
4698
|
-
height:
|
|
4694
|
+
height:100%;
|
|
4699
4695
|
justify-content:center;
|
|
4700
4696
|
left:var(--select-content-viewport-option-indicator-left);
|
|
4701
4697
|
position:absolute;
|
|
4702
4698
|
top:0;
|
|
4703
4699
|
}
|
|
4704
|
-
.bp_select_module_content--
|
|
4700
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_indicator--d0d36 path{
|
|
4705
4701
|
fill:var(--select-content-viewport-option-indicator-color);
|
|
4706
4702
|
}
|
|
4707
|
-
.bp_select_module_content--
|
|
4703
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_option--d0d36 .bp_select_module_indicatorRight--d0d36{
|
|
4708
4704
|
left:auto;
|
|
4709
4705
|
right:var(--select-content-viewport-option-indicator-right);
|
|
4710
4706
|
}
|
|
4711
|
-
.bp_select_module_content--
|
|
4707
|
+
.bp_select_module_content--d0d36 .bp_select_module_viewport--d0d36 .bp_select_module_separator--d0d36{
|
|
4712
4708
|
background-color:var(--select-content-viewport-option-separator-bg-color);
|
|
4713
4709
|
flex-shrink:0;
|
|
4714
4710
|
height:var(--select-content-viewport-option-separator-height);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--
|
|
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 };
|
|
@@ -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;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_select_module_container--
|
|
2
|
+
var styles = {"container":"bp_select_module_container--d0d36","label":"bp_select_module_label--d0d36","triggerBtn":"bp_select_module_triggerBtn--d0d36","disabled":"bp_select_module_disabled--d0d36","triggerValue":"bp_select_module_triggerValue--d0d36","triggerLeftElement":"bp_select_module_triggerLeftElement--d0d36","readonly":"bp_select_module_readonly--d0d36","error":"bp_select_module_error--d0d36","iconWrapper":"bp_select_module_iconWrapper--d0d36","iconCaret":"bp_select_module_iconCaret--d0d36","iconPencilCrossed":"bp_select_module_iconPencilCrossed--d0d36","content":"bp_select_module_content--d0d36","viewport":"bp_select_module_viewport--d0d36","option":"bp_select_module_option--d0d36","textWrapper":"bp_select_module_textWrapper--d0d36","secondaryText":"bp_select_module_secondaryText--d0d36","leftElement":"bp_select_module_leftElement--d0d36","hasLeftElement":"bp_select_module_hasLeftElement--d0d36","indicator":"bp_select_module_indicator--d0d36","indicatorRight":"bp_select_module_indicatorRight--d0d36","separator":"bp_select_module_separator--d0d36"};
|
|
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": "13.5.
|
|
3
|
+
"version": "13.5.2",
|
|
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.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.101.21",
|
|
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.
|
|
80
|
+
"@box/storybook-utils": "^0.16.58",
|
|
81
81
|
"@figma/code-connect": "1.3.12",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|