@box/blueprint-web 12.43.0 → 12.44.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.
package/dist/lib-esm/index.css
CHANGED
|
@@ -5261,8 +5261,80 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5261
5261
|
display:inline;
|
|
5262
5262
|
}
|
|
5263
5263
|
|
|
5264
|
-
.bp_modal_module_overlay--
|
|
5265
|
-
background
|
|
5264
|
+
.bp_modal_module_overlay--cf8d1[data-modern=false]{
|
|
5265
|
+
--modal-overlay-background:var(--overlay-modal-overlay);
|
|
5266
|
+
--modal-content-background:var(--gray-white);
|
|
5267
|
+
--modal-min-width-non-fullscreen:calc(460px - var(--space-8)*2);
|
|
5268
|
+
--modal-max-height-non-fullscreen:calc(100vh - var(--space-8)*2);
|
|
5269
|
+
--modal-max-width-small:460px;
|
|
5270
|
+
--modal-max-width-medium:540px;
|
|
5271
|
+
--modal-max-width-large:620px;
|
|
5272
|
+
--modal-max-width-xlarge:768px;
|
|
5273
|
+
--modal-margin:0 var(--space-8);
|
|
5274
|
+
--modal-border-radius:var(--radius-4);
|
|
5275
|
+
--modal-close-button-color:var(--gray-65);
|
|
5276
|
+
--modal-close-button-offset-top:var(--space-4);
|
|
5277
|
+
--modal-close-button-offset-right:var(--space-4);
|
|
5278
|
+
--modal-close-button-on-color-background:var(--surface-cta-surface-tertiary);
|
|
5279
|
+
--modal-close-button-on-color-background-hover:var(--surface-cta-surface-icon-hover);
|
|
5280
|
+
--modal-close-button-on-color-background-pressed:var(--surface-cta-surface-icon-pressed);
|
|
5281
|
+
--modal-back-button-color:var(--gray-65);
|
|
5282
|
+
--modal-back-button-margin-top-start:var(--space-4);
|
|
5283
|
+
--modal-back-button-margin-inline-start:var(--space-4);
|
|
5284
|
+
--modal-back-button-size-non-fullscreen:var(--size-10);
|
|
5285
|
+
--modal-title-gap:var(--space-2);
|
|
5286
|
+
--modal-title-padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
|
|
5287
|
+
--modal-title-padding-non-fullscreen:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
|
|
5288
|
+
--modal-body-padding:var(--space-6) var(--space-4) var(--space-4);
|
|
5289
|
+
--modal-body-padding-non-fullscreen:var(--space-6) var(--space-6) var(--space-4);
|
|
5290
|
+
--modal-divider-line-border:var(--border-1) solid var(--border-divider-border);
|
|
5291
|
+
--modal-divider-line-offset-right:var(--space-4);
|
|
5292
|
+
--modal-divider-line-offset-left:var(--space-4);
|
|
5293
|
+
--modal-divider-line-offset-right-non-fullscreen:var(--space-6);
|
|
5294
|
+
--modal-divider-line-offset-left-non-fullscreen:var(--space-6);
|
|
5295
|
+
--modal-footer-padding:var(--space-4);
|
|
5296
|
+
--modal-footer-padding-non-fullscreen:var(--space-6);
|
|
5297
|
+
--modal-footer-button-margin-inline-start:var(--space-3);
|
|
5298
|
+
}
|
|
5299
|
+
|
|
5300
|
+
.bp_modal_module_overlay--cf8d1[data-modern=true]{
|
|
5301
|
+
--modal-overlay-background:var(--bp-overlay-modal-overlay);
|
|
5302
|
+
--modal-content-background:var(--bp-gray-white);
|
|
5303
|
+
--modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
|
|
5304
|
+
--modal-max-height-non-fullscreen:calc(100vh - var(--bp-space-080)*2);
|
|
5305
|
+
--modal-max-width-small:460px;
|
|
5306
|
+
--modal-max-width-medium:540px;
|
|
5307
|
+
--modal-max-width-large:620px;
|
|
5308
|
+
--modal-max-width-xlarge:768px;
|
|
5309
|
+
--modal-margin:0 var(--bp-space-080);
|
|
5310
|
+
--modal-border-radius:var(--bp-radius-16);
|
|
5311
|
+
--modal-close-button-color:var(--bp-icon-icon-on-light-secondary);
|
|
5312
|
+
--modal-close-button-offset-top:var(--bp-space-040);
|
|
5313
|
+
--modal-close-button-offset-right:var(--bp-space-040);
|
|
5314
|
+
--modal-close-button-on-color-background:var(--bp-surface-cta-surface-tertiary);
|
|
5315
|
+
--modal-close-button-on-color-background-hover:var(--bp-surface-cta-surface-icon-hover);
|
|
5316
|
+
--modal-close-button-on-color-background-pressed:var(--bp-surface-cta-surface-icon-pressed);
|
|
5317
|
+
--modal-back-button-color:var(--bp-icon-icon-on-light-secondary);
|
|
5318
|
+
--modal-back-button-margin-top-start:var(--bp-space-040);
|
|
5319
|
+
--modal-back-button-margin-inline-start:var(--bp-space-040);
|
|
5320
|
+
--modal-back-button-size-non-fullscreen:var(--bp-size-100);
|
|
5321
|
+
--modal-title-gap:var(--bp-space-020);
|
|
5322
|
+
--modal-title-padding:var(--bp-space-050) var(--bp-space-120) var(--bp-space-050) var(--bp-space-040);
|
|
5323
|
+
--modal-title-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-160) var(--bp-space-060) var(--bp-space-060);
|
|
5324
|
+
--modal-body-padding:var(--bp-space-060) var(--bp-space-040) var(--bp-space-040);
|
|
5325
|
+
--modal-body-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-060) var(--bp-space-040);
|
|
5326
|
+
--modal-divider-line-border:var(--bp-border-01) solid var(--bp-border-divider-border);
|
|
5327
|
+
--modal-divider-line-offset-right:var(--bp-space-040);
|
|
5328
|
+
--modal-divider-line-offset-left:var(--bp-space-040);
|
|
5329
|
+
--modal-divider-line-offset-right-non-fullscreen:var(--bp-space-060);
|
|
5330
|
+
--modal-divider-line-offset-left-non-fullscreen:var(--bp-space-060);
|
|
5331
|
+
--modal-footer-padding:var(--bp-space-040);
|
|
5332
|
+
--modal-footer-padding-non-fullscreen:var(--bp-space-060);
|
|
5333
|
+
--modal-footer-button-margin-inline-start:var(--bp-space-030);
|
|
5334
|
+
}
|
|
5335
|
+
|
|
5336
|
+
.bp_modal_module_overlay--cf8d1{
|
|
5337
|
+
background-color:var(--modal-overlay-background);
|
|
5266
5338
|
bottom:0;
|
|
5267
5339
|
display:grid;
|
|
5268
5340
|
left:0;
|
|
@@ -5273,14 +5345,14 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5273
5345
|
z-index:370;
|
|
5274
5346
|
}
|
|
5275
5347
|
@media (width > 459px){
|
|
5276
|
-
.bp_modal_module_overlay--
|
|
5348
|
+
.bp_modal_module_overlay--cf8d1{
|
|
5277
5349
|
place-items:center;
|
|
5278
5350
|
}
|
|
5279
5351
|
}
|
|
5280
5352
|
|
|
5281
|
-
.bp_modal_module_content--
|
|
5282
|
-
animation:bp_modal_module_popup_bounce_in--
|
|
5283
|
-
background-color:var(--
|
|
5353
|
+
.bp_modal_module_content--cf8d1{
|
|
5354
|
+
animation:bp_modal_module_popup_bounce_in--cf8d1 var(--animation-duration-3);
|
|
5355
|
+
background-color:var(--modal-content-background);
|
|
5284
5356
|
display:flex;
|
|
5285
5357
|
flex-direction:column;
|
|
5286
5358
|
height:100vh;
|
|
@@ -5288,153 +5360,153 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5288
5360
|
position:relative;
|
|
5289
5361
|
}
|
|
5290
5362
|
@media (width > 374px){
|
|
5291
|
-
.bp_modal_module_content--
|
|
5363
|
+
.bp_modal_module_content--cf8d1{
|
|
5292
5364
|
overflow:hidden;
|
|
5293
5365
|
}
|
|
5294
5366
|
}
|
|
5295
5367
|
@media (width > 459px){
|
|
5296
|
-
.bp_modal_module_content--
|
|
5297
|
-
border-radius:var(--radius
|
|
5368
|
+
.bp_modal_module_content--cf8d1{
|
|
5369
|
+
border-radius:var(--modal-border-radius);
|
|
5298
5370
|
height:auto;
|
|
5299
|
-
margin:
|
|
5300
|
-
max-height:
|
|
5301
|
-
min-width:
|
|
5371
|
+
margin:var(--modal-margin);
|
|
5372
|
+
max-height:var(--modal-max-height-non-fullscreen);
|
|
5373
|
+
min-width:var(--modal-min-width-non-fullscreen);
|
|
5302
5374
|
}
|
|
5303
|
-
.bp_modal_module_content--
|
|
5304
|
-
max-width:
|
|
5375
|
+
.bp_modal_module_content--cf8d1.bp_modal_module_smallSizeModal--cf8d1{
|
|
5376
|
+
max-width:var(--modal-max-width-small);
|
|
5305
5377
|
}
|
|
5306
|
-
.bp_modal_module_content--
|
|
5307
|
-
max-width:
|
|
5378
|
+
.bp_modal_module_content--cf8d1.bp_modal_module_mediumSizeModal--cf8d1{
|
|
5379
|
+
max-width:var(--modal-max-width-medium);
|
|
5308
5380
|
}
|
|
5309
|
-
.bp_modal_module_content--
|
|
5310
|
-
max-width:
|
|
5381
|
+
.bp_modal_module_content--cf8d1.bp_modal_module_largeSizeModal--cf8d1{
|
|
5382
|
+
max-width:var(--modal-max-width-large);
|
|
5311
5383
|
}
|
|
5312
|
-
.bp_modal_module_content--
|
|
5313
|
-
max-width:
|
|
5384
|
+
.bp_modal_module_content--cf8d1.bp_modal_module_xlargeSizeModal--cf8d1{
|
|
5385
|
+
max-width:var(--modal-max-width-xlarge);
|
|
5314
5386
|
}
|
|
5315
5387
|
}
|
|
5316
5388
|
|
|
5317
|
-
.bp_modal_module_scrollableContainer--
|
|
5389
|
+
.bp_modal_module_scrollableContainer--cf8d1{
|
|
5318
5390
|
flex-grow:1;
|
|
5319
5391
|
}
|
|
5320
5392
|
@media (width > 374px){
|
|
5321
|
-
.bp_modal_module_scrollableContainer--
|
|
5393
|
+
.bp_modal_module_scrollableContainer--cf8d1{
|
|
5322
5394
|
overflow-y:auto;
|
|
5323
5395
|
}
|
|
5324
5396
|
}
|
|
5325
5397
|
|
|
5326
|
-
.bp_modal_module_content--
|
|
5327
|
-
color:var(--
|
|
5398
|
+
.bp_modal_module_content--cf8d1 .bp_modal_module_close--cf8d1{
|
|
5399
|
+
color:var(--modal-close-button-color);
|
|
5328
5400
|
position:fixed;
|
|
5329
|
-
right:var(--
|
|
5330
|
-
top:var(--
|
|
5401
|
+
right:var(--modal-close-button-offset-right);
|
|
5402
|
+
top:var(--modal-close-button-offset-top);
|
|
5331
5403
|
}
|
|
5332
5404
|
@media (width > 374px){
|
|
5333
|
-
.bp_modal_module_content--
|
|
5405
|
+
.bp_modal_module_content--cf8d1 .bp_modal_module_close--cf8d1{
|
|
5334
5406
|
position:absolute;
|
|
5335
5407
|
}
|
|
5336
5408
|
}
|
|
5337
5409
|
|
|
5338
|
-
.bp_modal_module_close--
|
|
5339
|
-
background-color:var(--
|
|
5410
|
+
.bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1{
|
|
5411
|
+
background-color:var(--modal-close-button-on-color-background);
|
|
5340
5412
|
}
|
|
5341
|
-
.bp_modal_module_close--
|
|
5342
|
-
background-color:var(--
|
|
5413
|
+
.bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1:hover{
|
|
5414
|
+
background-color:var(--modal-close-button-on-color-background-hover);
|
|
5343
5415
|
}
|
|
5344
|
-
.bp_modal_module_close--
|
|
5345
|
-
background-color:var(--
|
|
5416
|
+
.bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1:active{
|
|
5417
|
+
background-color:var(--modal-close-button-on-color-background-pressed);
|
|
5346
5418
|
}
|
|
5347
5419
|
|
|
5348
|
-
.bp_modal_module_content--
|
|
5349
|
-
color:var(--
|
|
5350
|
-
margin-block-start:var(--
|
|
5351
|
-
margin-inline-start:var(--
|
|
5420
|
+
.bp_modal_module_content--cf8d1 .bp_modal_module_backButton--cf8d1{
|
|
5421
|
+
color:var(--modal-back-button-color);
|
|
5422
|
+
margin-block-start:var(--modal-back-button-margin-top-start);
|
|
5423
|
+
margin-inline-start:var(--modal-back-button-margin-inline-start);
|
|
5352
5424
|
}
|
|
5353
5425
|
@media (width > 459px){
|
|
5354
|
-
.bp_modal_module_content--
|
|
5355
|
-
height:var(--size-
|
|
5356
|
-
width:var(--size-
|
|
5426
|
+
.bp_modal_module_content--cf8d1 .bp_modal_module_backButton--cf8d1{
|
|
5427
|
+
height:var(--modal-back-button-size-non-fullscreen);
|
|
5428
|
+
width:var(--modal-back-button-size-non-fullscreen);
|
|
5357
5429
|
}
|
|
5358
5430
|
}
|
|
5359
5431
|
|
|
5360
|
-
.bp_modal_module_modalHeader--
|
|
5432
|
+
.bp_modal_module_modalHeader--cf8d1{
|
|
5361
5433
|
display:flex;
|
|
5362
5434
|
}
|
|
5363
5435
|
|
|
5364
|
-
.bp_modal_module_modalTitle--
|
|
5436
|
+
.bp_modal_module_modalTitle--cf8d1{
|
|
5365
5437
|
display:flex;
|
|
5366
5438
|
flex-direction:column;
|
|
5367
|
-
gap:var(--
|
|
5439
|
+
gap:var(--modal-title-gap);
|
|
5368
5440
|
overflow:auto;
|
|
5369
|
-
padding:var(--
|
|
5441
|
+
padding:var(--modal-title-padding);
|
|
5370
5442
|
}
|
|
5371
5443
|
@media (width > 459px){
|
|
5372
|
-
.bp_modal_module_modalTitle--
|
|
5373
|
-
padding:var(--
|
|
5444
|
+
.bp_modal_module_modalTitle--cf8d1{
|
|
5445
|
+
padding:var(--modal-title-padding-non-fullscreen);
|
|
5374
5446
|
}
|
|
5375
5447
|
}
|
|
5376
5448
|
|
|
5377
|
-
.bp_modal_module_body--
|
|
5378
|
-
padding:var(--
|
|
5449
|
+
.bp_modal_module_body--cf8d1{
|
|
5450
|
+
padding:var(--modal-body-padding);
|
|
5379
5451
|
}
|
|
5380
5452
|
@media (width > 459px){
|
|
5381
|
-
.bp_modal_module_body--
|
|
5382
|
-
padding:var(--
|
|
5453
|
+
.bp_modal_module_body--cf8d1{
|
|
5454
|
+
padding:var(--modal-body-padding-non-fullscreen);
|
|
5383
5455
|
}
|
|
5384
5456
|
}
|
|
5385
5457
|
|
|
5386
|
-
.bp_modal_module_headerDividerLine--
|
|
5458
|
+
.bp_modal_module_headerDividerLine--cf8d1{
|
|
5387
5459
|
position:relative;
|
|
5388
5460
|
}
|
|
5389
|
-
.bp_modal_module_headerDividerLine--
|
|
5390
|
-
border-bottom:var(--
|
|
5461
|
+
.bp_modal_module_headerDividerLine--cf8d1::after{
|
|
5462
|
+
border-bottom:var(--modal-divider-line-border);
|
|
5391
5463
|
bottom:0;
|
|
5392
5464
|
content:"";
|
|
5393
|
-
left:var(--
|
|
5465
|
+
left:var(--modal-divider-line-offset-left);
|
|
5394
5466
|
position:absolute;
|
|
5395
|
-
right:var(--
|
|
5467
|
+
right:var(--modal-divider-line-offset-right);
|
|
5396
5468
|
}
|
|
5397
5469
|
@media (width > 459px){
|
|
5398
|
-
.bp_modal_module_headerDividerLine--
|
|
5399
|
-
left:var(--
|
|
5400
|
-
right:var(--
|
|
5470
|
+
.bp_modal_module_headerDividerLine--cf8d1::after{
|
|
5471
|
+
left:var(--modal-divider-line-offset-left-non-fullscreen);
|
|
5472
|
+
right:var(--modal-divider-line-offset-right-non-fullscreen);
|
|
5401
5473
|
}
|
|
5402
5474
|
}
|
|
5403
5475
|
|
|
5404
|
-
.bp_modal_module_footerDividerLine--
|
|
5476
|
+
.bp_modal_module_footerDividerLine--cf8d1{
|
|
5405
5477
|
position:relative;
|
|
5406
5478
|
}
|
|
5407
|
-
.bp_modal_module_footerDividerLine--
|
|
5408
|
-
border-bottom:var(--
|
|
5479
|
+
.bp_modal_module_footerDividerLine--cf8d1::before{
|
|
5480
|
+
border-bottom:var(--modal-divider-line-border);
|
|
5409
5481
|
content:"";
|
|
5410
|
-
left:var(--
|
|
5482
|
+
left:var(--modal-divider-line-offset-left);
|
|
5411
5483
|
position:absolute;
|
|
5412
|
-
right:var(--
|
|
5484
|
+
right:var(--modal-divider-line-offset-right);
|
|
5413
5485
|
top:0;
|
|
5414
5486
|
}
|
|
5415
5487
|
@media (width > 459px){
|
|
5416
|
-
.bp_modal_module_footerDividerLine--
|
|
5417
|
-
left:var(--
|
|
5418
|
-
right:var(--
|
|
5488
|
+
.bp_modal_module_footerDividerLine--cf8d1::before{
|
|
5489
|
+
left:var(--modal-divider-line-offset-left-non-fullscreen);
|
|
5490
|
+
right:var(--modal-divider-line-offset-right-non-fullscreen);
|
|
5419
5491
|
}
|
|
5420
5492
|
}
|
|
5421
5493
|
|
|
5422
|
-
.bp_modal_module_footer--
|
|
5494
|
+
.bp_modal_module_footer--cf8d1{
|
|
5423
5495
|
display:flex;
|
|
5424
5496
|
justify-content:flex-end;
|
|
5425
|
-
padding:var(--
|
|
5497
|
+
padding:var(--modal-footer-padding);
|
|
5426
5498
|
}
|
|
5427
5499
|
@media (width > 459px){
|
|
5428
|
-
.bp_modal_module_footer--
|
|
5429
|
-
padding:var(--
|
|
5500
|
+
.bp_modal_module_footer--cf8d1{
|
|
5501
|
+
padding:var(--modal-footer-padding-non-fullscreen);
|
|
5430
5502
|
}
|
|
5431
5503
|
}
|
|
5432
5504
|
|
|
5433
|
-
.bp_modal_module_footerButton--
|
|
5434
|
-
margin-inline-start:var(--
|
|
5505
|
+
.bp_modal_module_footerButton--cf8d1 + .bp_modal_module_footerButton--cf8d1{
|
|
5506
|
+
margin-inline-start:var(--modal-footer-button-margin-inline-start);
|
|
5435
5507
|
}
|
|
5436
5508
|
|
|
5437
|
-
@keyframes bp_modal_module_popup_bounce_in--
|
|
5509
|
+
@keyframes bp_modal_module_popup_bounce_in--cf8d1{
|
|
5438
5510
|
0%{
|
|
5439
5511
|
transform:scale3d(.1, .1, 1);
|
|
5440
5512
|
}
|
|
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as RadixDialog from '@radix-ui/react-dialog';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import styles from './modal.module.js';
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -15,19 +16,25 @@ const ModalContent = /*#__PURE__*/forwardRef(({
|
|
|
15
16
|
'data-testid': dataTestId = 'modal-content-container',
|
|
16
17
|
size,
|
|
17
18
|
...props
|
|
18
|
-
}, forwardedRef) =>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
}, forwardedRef) => {
|
|
20
|
+
const {
|
|
21
|
+
enableModernizedComponents
|
|
22
|
+
} = useBlueprintModernization();
|
|
23
|
+
return jsx(RadixDialog.Portal, {
|
|
24
|
+
container: container,
|
|
25
|
+
children: jsx(RadixDialog.Overlay, {
|
|
26
|
+
className: styles.overlay,
|
|
27
|
+
"data-modern": enableModernizedComponents,
|
|
28
|
+
children: jsx(RadixDialog.Content, {
|
|
29
|
+
...props,
|
|
30
|
+
ref: forwardedRef,
|
|
31
|
+
asChild: asChild,
|
|
32
|
+
className: clsx(styles.content, styles[`${size}SizeModal`], className),
|
|
33
|
+
"data-testid": dataTestId,
|
|
34
|
+
children: children
|
|
35
|
+
})
|
|
29
36
|
})
|
|
30
|
-
})
|
|
31
|
-
})
|
|
37
|
+
});
|
|
38
|
+
});
|
|
32
39
|
|
|
33
40
|
export { ModalContent };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"overlay":"bp_modal_module_overlay--
|
|
2
|
+
var styles = {"overlay":"bp_modal_module_overlay--cf8d1","content":"bp_modal_module_content--cf8d1","popup_bounce_in":"bp_modal_module_popup_bounce_in--cf8d1","smallSizeModal":"bp_modal_module_smallSizeModal--cf8d1","mediumSizeModal":"bp_modal_module_mediumSizeModal--cf8d1","largeSizeModal":"bp_modal_module_largeSizeModal--cf8d1","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--cf8d1","scrollableContainer":"bp_modal_module_scrollableContainer--cf8d1","close":"bp_modal_module_close--cf8d1","onColor":"bp_modal_module_onColor--cf8d1","backButton":"bp_modal_module_backButton--cf8d1","modalHeader":"bp_modal_module_modalHeader--cf8d1","modalTitle":"bp_modal_module_modalTitle--cf8d1","body":"bp_modal_module_body--cf8d1","headerDividerLine":"bp_modal_module_headerDividerLine--cf8d1","footerDividerLine":"bp_modal_module_footerDividerLine--cf8d1","footer":"bp_modal_module_footer--cf8d1","footerButton":"bp_modal_module_footerButton--cf8d1"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|