@box/blueprint-web 12.42.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.
Files changed (6) hide show
  1. package/dist/lib-esm/checkbox/checkbox-item.js +5 -0
  2. package/dist/lib-esm/checkbox/checkbox.module.js +1 -1
  3. package/dist/lib-esm/index.css +209 -103
  4. package/dist/lib-esm/modal/modal-content.js +20 -13
  5. package/dist/lib-esm/modal/modal.module.js +1 -1
  6. package/package.json +1 -1
package/dist/lib-esm/checkbox/checkbox-item.js CHANGED
@@ -4,6 +4,7 @@ import { IconIconOnDark, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import * as RadixCheckbox from '@radix-ui/react-checkbox';
5
5
  import { clsx } from 'clsx';
6
6
  import { forwardRef } from 'react';
7
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
8
  import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
8
9
  import { useUniqueId } from '../utils/useUniqueId.js';
9
10
  import styles from './checkbox.module.js';
@@ -27,10 +28,14 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
27
28
  ...rest
28
29
  } = props;
29
30
  const descriptionId = useUniqueId('description-', !!description);
31
+ const {
32
+ enableModernizedComponents
33
+ } = useBlueprintModernization();
30
34
  return jsxs("div", {
31
35
  className: clsx([styles.option], {
32
36
  [styles.disabled]: disabled
33
37
  }, className),
38
+ "data-modern": enableModernizedComponents,
34
39
  children: [jsxs("label", {
35
40
  className: styles.label,
36
41
  "data-target-id": dataTargetId,
package/dist/lib-esm/checkbox/checkbox.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"option":"bp_checkbox_module_option--1a053","checkbox":"bp_checkbox_module_checkbox--1a053","indicator":"bp_checkbox_module_indicator--1a053","label":"bp_checkbox_module_label--1a053","description":"bp_checkbox_module_description--1a053","disabled":"bp_checkbox_module_disabled--1a053"};
2
+ var styles = {"option":"bp_checkbox_module_option--19b51","checkbox":"bp_checkbox_module_checkbox--19b51","indicator":"bp_checkbox_module_indicator--19b51","label":"bp_checkbox_module_label--19b51","description":"bp_checkbox_module_description--19b51","disabled":"bp_checkbox_module_disabled--19b51"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -1510,7 +1510,41 @@
1510
1510
  padding-bottom:var(--size-4);
1511
1511
  }
1512
1512
 
1513
- .bp_checkbox_module_option--1a053{
1513
+ .bp_checkbox_module_option--19b51[data-modern=false]{
1514
+ --checkbox-size:var(--size-4);
1515
+ --checkbox-label-gap:var(--size-3);
1516
+ --checkbox-description-padding-left:calc(var(--size-4) + var(--size-3));
1517
+ --checkbox-line-height:var(--body-default-line-height);
1518
+ --checkbox-surface:var(--surface-checkbox-surface);
1519
+ --checkbox-border:var(--border-2) solid var(--border-checkbox-border);
1520
+ --checkbox-radius:var(--radius-1);
1521
+ --checkbox-outline-focus:var(--outline-focus-on-light);
1522
+ --checkbox-outline-offset:var(--border-1);
1523
+ --checkbox-surface-selected:var(--surface-checkbox-surface-selected);
1524
+ --checkbox-border-selected:var(--border-2) solid var(--border-checkbox-border-selected);
1525
+ --checkbox-surface-selected-hover:var(--surface-checkbox-surface-selected-hover);
1526
+ --checkbox-border-hover:var(--border-2) solid var(--border-checkbox-border-hover);
1527
+ --checkbox-border-selected-hover:var(--border-2) solid var(--border-checkbox-border-selected-hover);
1528
+ }
1529
+
1530
+ .bp_checkbox_module_option--19b51[data-modern=true]{
1531
+ --checkbox-size:var(--bp-size-040);
1532
+ --checkbox-label-gap:var(--bp-space-030);
1533
+ --checkbox-description-padding-left:calc(var(--bp-size-040) + var(--bp-space-030));
1534
+ --checkbox-line-height:var(--bp-font-line-height-04);
1535
+ --checkbox-surface:var(--bp-surface-checkbox-surface);
1536
+ --checkbox-border:var(--bp-border-02) solid var(--bp-border-checkbox-border);
1537
+ --checkbox-radius:var(--bp-radius-02);
1538
+ --checkbox-outline-focus:var(--bp-outline-focus-on-light);
1539
+ --checkbox-outline-offset:var(--bp-border-01);
1540
+ --checkbox-surface-selected:var(--bp-surface-checkbox-surface-selected);
1541
+ --checkbox-border-selected:var(--bp-border-02) solid var(--bp-border-checkbox-border-selected);
1542
+ --checkbox-surface-selected-hover:var(--bp-surface-checkbox-surface-selected-hover);
1543
+ --checkbox-border-hover:var(--bp-border-02) solid var(--bp-border-checkbox-border-hover);
1544
+ --checkbox-border-selected-hover:var(--bp-border-02) solid var(--bp-border-checkbox-border-selected-hover);
1545
+ }
1546
+
1547
+ .bp_checkbox_module_option--19b51{
1514
1548
  display:flex;
1515
1549
  flex-direction:column;
1516
1550
  font-family:var(--body-default-font-family);
@@ -1522,64 +1556,64 @@
1522
1556
  text-decoration:var(--body-default-text-decoration);
1523
1557
  text-transform:var(--body-default-text-case);
1524
1558
  }
1525
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053{
1559
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51{
1526
1560
  all:unset;
1527
1561
  align-items:center;
1528
- background-color:var(--surface-checkbox-surface);
1529
- border:var(--border-2) solid var(--border-checkbox-border);
1530
- border-radius:var(--radius-1);
1562
+ background-color:var(--checkbox-surface);
1563
+ border:var(--checkbox-border);
1564
+ border-radius:var(--checkbox-radius);
1531
1565
  box-sizing:border-box;
1532
1566
  display:flex;
1533
1567
  flex-shrink:0;
1534
- height:var(--size-4);
1568
+ height:var(--checkbox-size);
1535
1569
  justify-content:center;
1536
- margin:calc((var(--body-default-line-height) - var(--size-4))/2) 0 0 0;
1537
- width:var(--size-4);
1570
+ margin:calc((var(--checkbox-line-height) - var(--checkbox-size))/2) 0 0 0;
1571
+ width:var(--checkbox-size);
1538
1572
  }
1539
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053 .bp_checkbox_module_indicator--1a053{
1573
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51 .bp_checkbox_module_indicator--19b51{
1540
1574
  display:flex;
1541
1575
  transform:scale(0);
1542
1576
  transition-duration:.15s;
1543
1577
  transition-property:transform;
1544
1578
  transition-timing-function:cubic-bezier(0, 0, .6, 1);
1545
1579
  }
1546
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:focus-visible{
1547
- outline:var(--border-2) solid var(--outline-focus-on-light);
1548
- outline-offset:var(--border-1);
1580
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:focus-visible{
1581
+ outline:var(--checkbox-border);
1582
+ outline-offset:var(--checkbox-outline-offset);
1549
1583
  }
1550
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053[data-disabled]{
1584
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-disabled]{
1551
1585
  opacity:60%;
1552
1586
  }
1553
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053[data-state=checked],.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053[data-state=indeterminate]{
1554
- background-color:var(--surface-checkbox-surface-selected);
1555
- border-color:var(--border-checkbox-border-selected);
1587
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=checked],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=indeterminate]{
1588
+ background-color:var(--checkbox-surface-selected);
1589
+ border:var(--checkbox-border-selected);
1556
1590
  }
1557
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053[data-state=checked] .bp_checkbox_module_indicator--1a053,.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053[data-state=indeterminate] .bp_checkbox_module_indicator--1a053{
1558
- background-color:var(--surface-checkbox-surface-selected);
1591
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=checked] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=indeterminate] .bp_checkbox_module_indicator--19b51{
1592
+ background-color:var(--checkbox-surface-selected);
1559
1593
  transform:scale(1);
1560
1594
  }
1561
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):focus-visible,.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):hover{
1562
- border-color:var(--border-checkbox-border-hover);
1595
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover{
1596
+ border:var(--checkbox-border-hover);
1563
1597
  }
1564
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):hover[data-state=indeterminate]{
1565
- background-color:var(--surface-checkbox-surface-selected-hover);
1566
- border-color:var(--border-checkbox-border-selected-hover);
1598
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=indeterminate]{
1599
+ background-color:var(--checkbox-surface-selected-hover);
1600
+ border:var(--checkbox-border-selected-hover);
1567
1601
  }
1568
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--1a053,.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--1a053,.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--1a053,.bp_checkbox_module_option--1a053 .bp_checkbox_module_checkbox--1a053:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--1a053{
1569
- background-color:var(--surface-checkbox-surface-selected-hover);
1602
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--19b51{
1603
+ background-color:var(--checkbox-surface-selected-hover);
1570
1604
  }
1571
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_label--1a053{
1605
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_label--19b51{
1572
1606
  cursor:pointer;
1573
1607
  display:inline-flex;
1574
1608
  flex-direction:row;
1575
- gap:var(--size-3);
1609
+ gap:var(--checkbox-label-gap);
1576
1610
  width:-moz-fit-content;
1577
1611
  width:fit-content;
1578
1612
  }
1579
- .bp_checkbox_module_option--1a053 .bp_checkbox_module_description--1a053{
1580
- padding-left:calc(var(--size-4) + var(--size-3));
1613
+ .bp_checkbox_module_option--19b51 .bp_checkbox_module_description--19b51{
1614
+ padding-left:var(--checkbox-description-padding-left);
1581
1615
  }
1582
- .bp_checkbox_module_option--1a053.bp_checkbox_module_disabled--1a053 .bp_checkbox_module_label--1a053{
1616
+ .bp_checkbox_module_option--19b51.bp_checkbox_module_disabled--19b51 .bp_checkbox_module_label--19b51{
1583
1617
  cursor:default;
1584
1618
  }
1585
1619
  .bp_icon_button_module_iconButton--161d7[data-modern=false]{
@@ -5227,8 +5261,80 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
5227
5261
  display:inline;
5228
5262
  }
5229
5263
 
5230
- .bp_modal_module_overlay--5457e{
5231
- background-color:var(--overlay-modal-overlay);
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);
5232
5338
  bottom:0;
5233
5339
  display:grid;
5234
5340
  left:0;
@@ -5239,14 +5345,14 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
5239
5345
  z-index:370;
5240
5346
  }
5241
5347
  @media (width > 459px){
5242
- .bp_modal_module_overlay--5457e{
5348
+ .bp_modal_module_overlay--cf8d1{
5243
5349
  place-items:center;
5244
5350
  }
5245
5351
  }
5246
5352
 
5247
- .bp_modal_module_content--5457e{
5248
- animation:bp_modal_module_popup_bounce_in--5457e var(--animation-duration-3);
5249
- background-color:var(--gray-white);
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);
5250
5356
  display:flex;
5251
5357
  flex-direction:column;
5252
5358
  height:100vh;
@@ -5254,153 +5360,153 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
5254
5360
  position:relative;
5255
5361
  }
5256
5362
  @media (width > 374px){
5257
- .bp_modal_module_content--5457e{
5363
+ .bp_modal_module_content--cf8d1{
5258
5364
  overflow:hidden;
5259
5365
  }
5260
5366
  }
5261
5367
  @media (width > 459px){
5262
- .bp_modal_module_content--5457e{
5263
- border-radius:var(--radius-4);
5368
+ .bp_modal_module_content--cf8d1{
5369
+ border-radius:var(--modal-border-radius);
5264
5370
  height:auto;
5265
- margin:0 var(--space-8);
5266
- max-height:calc(100vh - var(--space-8)*2);
5267
- min-width:calc(460px - var(--space-8)*2);
5371
+ margin:var(--modal-margin);
5372
+ max-height:var(--modal-max-height-non-fullscreen);
5373
+ min-width:var(--modal-min-width-non-fullscreen);
5268
5374
  }
5269
- .bp_modal_module_content--5457e.bp_modal_module_smallSizeModal--5457e{
5270
- max-width:460px;
5375
+ .bp_modal_module_content--cf8d1.bp_modal_module_smallSizeModal--cf8d1{
5376
+ max-width:var(--modal-max-width-small);
5271
5377
  }
5272
- .bp_modal_module_content--5457e.bp_modal_module_mediumSizeModal--5457e{
5273
- max-width:540px;
5378
+ .bp_modal_module_content--cf8d1.bp_modal_module_mediumSizeModal--cf8d1{
5379
+ max-width:var(--modal-max-width-medium);
5274
5380
  }
5275
- .bp_modal_module_content--5457e.bp_modal_module_largeSizeModal--5457e{
5276
- max-width:620px;
5381
+ .bp_modal_module_content--cf8d1.bp_modal_module_largeSizeModal--cf8d1{
5382
+ max-width:var(--modal-max-width-large);
5277
5383
  }
5278
- .bp_modal_module_content--5457e.bp_modal_module_xlargeSizeModal--5457e{
5279
- max-width:768px;
5384
+ .bp_modal_module_content--cf8d1.bp_modal_module_xlargeSizeModal--cf8d1{
5385
+ max-width:var(--modal-max-width-xlarge);
5280
5386
  }
5281
5387
  }
5282
5388
 
5283
- .bp_modal_module_scrollableContainer--5457e{
5389
+ .bp_modal_module_scrollableContainer--cf8d1{
5284
5390
  flex-grow:1;
5285
5391
  }
5286
5392
  @media (width > 374px){
5287
- .bp_modal_module_scrollableContainer--5457e{
5393
+ .bp_modal_module_scrollableContainer--cf8d1{
5288
5394
  overflow-y:auto;
5289
5395
  }
5290
5396
  }
5291
5397
 
5292
- .bp_modal_module_content--5457e .bp_modal_module_close--5457e{
5293
- color:var(--gray-65);
5398
+ .bp_modal_module_content--cf8d1 .bp_modal_module_close--cf8d1{
5399
+ color:var(--modal-close-button-color);
5294
5400
  position:fixed;
5295
- right:var(--space-4);
5296
- top:var(--space-4);
5401
+ right:var(--modal-close-button-offset-right);
5402
+ top:var(--modal-close-button-offset-top);
5297
5403
  }
5298
5404
  @media (width > 374px){
5299
- .bp_modal_module_content--5457e .bp_modal_module_close--5457e{
5405
+ .bp_modal_module_content--cf8d1 .bp_modal_module_close--cf8d1{
5300
5406
  position:absolute;
5301
5407
  }
5302
5408
  }
5303
5409
 
5304
- .bp_modal_module_close--5457e.bp_modal_module_onColor--5457e{
5305
- background-color:var(--surface-cta-surface-tertiary);
5410
+ .bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1{
5411
+ background-color:var(--modal-close-button-on-color-background);
5306
5412
  }
5307
- .bp_modal_module_close--5457e.bp_modal_module_onColor--5457e:hover{
5308
- background-color:var(--surface-cta-surface-icon-hover);
5413
+ .bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1:hover{
5414
+ background-color:var(--modal-close-button-on-color-background-hover);
5309
5415
  }
5310
- .bp_modal_module_close--5457e.bp_modal_module_onColor--5457e:active{
5311
- background-color:var(--surface-cta-surface-icon-pressed);
5416
+ .bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1:active{
5417
+ background-color:var(--modal-close-button-on-color-background-pressed);
5312
5418
  }
5313
5419
 
5314
- .bp_modal_module_content--5457e .bp_modal_module_backButton--5457e{
5315
- color:var(--gray-65);
5316
- margin-block-start:var(--space-4);
5317
- margin-inline-start:var(--space-4);
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);
5318
5424
  }
5319
5425
  @media (width > 459px){
5320
- .bp_modal_module_content--5457e .bp_modal_module_backButton--5457e{
5321
- height:var(--size-10);
5322
- width:var(--size-10);
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);
5323
5429
  }
5324
5430
  }
5325
5431
 
5326
- .bp_modal_module_modalHeader--5457e{
5432
+ .bp_modal_module_modalHeader--cf8d1{
5327
5433
  display:flex;
5328
5434
  }
5329
5435
 
5330
- .bp_modal_module_modalTitle--5457e{
5436
+ .bp_modal_module_modalTitle--cf8d1{
5331
5437
  display:flex;
5332
5438
  flex-direction:column;
5333
- gap:var(--space-2);
5439
+ gap:var(--modal-title-gap);
5334
5440
  overflow:auto;
5335
- padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
5441
+ padding:var(--modal-title-padding);
5336
5442
  }
5337
5443
  @media (width > 459px){
5338
- .bp_modal_module_modalTitle--5457e{
5339
- padding:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
5444
+ .bp_modal_module_modalTitle--cf8d1{
5445
+ padding:var(--modal-title-padding-non-fullscreen);
5340
5446
  }
5341
5447
  }
5342
5448
 
5343
- .bp_modal_module_body--5457e{
5344
- padding:var(--space-6) var(--space-4) var(--space-4);
5449
+ .bp_modal_module_body--cf8d1{
5450
+ padding:var(--modal-body-padding);
5345
5451
  }
5346
5452
  @media (width > 459px){
5347
- .bp_modal_module_body--5457e{
5348
- padding:var(--space-6) var(--space-6) var(--space-4);
5453
+ .bp_modal_module_body--cf8d1{
5454
+ padding:var(--modal-body-padding-non-fullscreen);
5349
5455
  }
5350
5456
  }
5351
5457
 
5352
- .bp_modal_module_headerDividerLine--5457e{
5458
+ .bp_modal_module_headerDividerLine--cf8d1{
5353
5459
  position:relative;
5354
5460
  }
5355
- .bp_modal_module_headerDividerLine--5457e::after{
5356
- border-bottom:var(--border-1) solid var(--border-divider-border);
5461
+ .bp_modal_module_headerDividerLine--cf8d1::after{
5462
+ border-bottom:var(--modal-divider-line-border);
5357
5463
  bottom:0;
5358
5464
  content:"";
5359
- left:var(--space-4);
5465
+ left:var(--modal-divider-line-offset-left);
5360
5466
  position:absolute;
5361
- right:var(--space-4);
5467
+ right:var(--modal-divider-line-offset-right);
5362
5468
  }
5363
5469
  @media (width > 459px){
5364
- .bp_modal_module_headerDividerLine--5457e::after{
5365
- left:var(--space-6);
5366
- right:var(--space-6);
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);
5367
5473
  }
5368
5474
  }
5369
5475
 
5370
- .bp_modal_module_footerDividerLine--5457e{
5476
+ .bp_modal_module_footerDividerLine--cf8d1{
5371
5477
  position:relative;
5372
5478
  }
5373
- .bp_modal_module_footerDividerLine--5457e::before{
5374
- border-bottom:var(--border-1) solid var(--border-divider-border);
5479
+ .bp_modal_module_footerDividerLine--cf8d1::before{
5480
+ border-bottom:var(--modal-divider-line-border);
5375
5481
  content:"";
5376
- left:var(--space-4);
5482
+ left:var(--modal-divider-line-offset-left);
5377
5483
  position:absolute;
5378
- right:var(--space-4);
5484
+ right:var(--modal-divider-line-offset-right);
5379
5485
  top:0;
5380
5486
  }
5381
5487
  @media (width > 459px){
5382
- .bp_modal_module_footerDividerLine--5457e::before{
5383
- left:var(--space-6);
5384
- right:var(--space-6);
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);
5385
5491
  }
5386
5492
  }
5387
5493
 
5388
- .bp_modal_module_footer--5457e{
5494
+ .bp_modal_module_footer--cf8d1{
5389
5495
  display:flex;
5390
5496
  justify-content:flex-end;
5391
- padding:var(--space-4);
5497
+ padding:var(--modal-footer-padding);
5392
5498
  }
5393
5499
  @media (width > 459px){
5394
- .bp_modal_module_footer--5457e{
5395
- padding:var(--space-6);
5500
+ .bp_modal_module_footer--cf8d1{
5501
+ padding:var(--modal-footer-padding-non-fullscreen);
5396
5502
  }
5397
5503
  }
5398
5504
 
5399
- .bp_modal_module_footerButton--5457e + .bp_modal_module_footerButton--5457e{
5400
- margin-inline-start:var(--space-3);
5505
+ .bp_modal_module_footerButton--cf8d1 + .bp_modal_module_footerButton--cf8d1{
5506
+ margin-inline-start:var(--modal-footer-button-margin-inline-start);
5401
5507
  }
5402
5508
 
5403
- @keyframes bp_modal_module_popup_bounce_in--5457e{
5509
+ @keyframes bp_modal_module_popup_bounce_in--cf8d1{
5404
5510
  0%{
5405
5511
  transform:scale3d(.1, .1, 1);
5406
5512
  }
package/dist/lib-esm/modal/modal-content.js CHANGED
@@ -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) => jsx(RadixDialog.Portal, {
19
- container: container,
20
- children: jsx(RadixDialog.Overlay, {
21
- className: styles.overlay,
22
- children: jsx(RadixDialog.Content, {
23
- ...props,
24
- ref: forwardedRef,
25
- asChild: asChild,
26
- className: clsx(styles.content, styles[`${size}SizeModal`], className),
27
- "data-testid": dataTestId,
28
- children: children
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 };
package/dist/lib-esm/modal/modal.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"overlay":"bp_modal_module_overlay--5457e","content":"bp_modal_module_content--5457e","popup_bounce_in":"bp_modal_module_popup_bounce_in--5457e","smallSizeModal":"bp_modal_module_smallSizeModal--5457e","mediumSizeModal":"bp_modal_module_mediumSizeModal--5457e","largeSizeModal":"bp_modal_module_largeSizeModal--5457e","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--5457e","scrollableContainer":"bp_modal_module_scrollableContainer--5457e","close":"bp_modal_module_close--5457e","onColor":"bp_modal_module_onColor--5457e","backButton":"bp_modal_module_backButton--5457e","modalHeader":"bp_modal_module_modalHeader--5457e","modalTitle":"bp_modal_module_modalTitle--5457e","body":"bp_modal_module_body--5457e","headerDividerLine":"bp_modal_module_headerDividerLine--5457e","footerDividerLine":"bp_modal_module_footerDividerLine--5457e","footer":"bp_modal_module_footer--5457e","footerButton":"bp_modal_module_footerButton--5457e"};
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.42.0",
3
+ "version": "12.44.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {