@box/blueprint-web 12.41.1 → 12.43.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 +136 -57
  4. package/dist/lib-esm/text-toggle-button/text-toggle-button.js +6 -1
  5. package/dist/lib-esm/text-toggle-button/text-toggle-button.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]{
@@ -7870,20 +7904,64 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7870
7904
  .bp_text_input_module_loadingIndicatorReset--53592 div{
7871
7905
  position:static;
7872
7906
  }
7873
- .bp_text_toggle_button_module_textToggleButton--a97ea{
7874
- background:var(--surface-toggle-surface);
7875
- border:var(--border-1) solid var(--border-toggletext-border-off);
7876
- border-radius:var(--radius-2);
7877
- color:var(--text-toggletext-text);
7907
+ .bp_text_toggle_button_module_textToggleButton--b6cea[data-modern=false]{
7908
+ --text-toggle-button-min-height:var(--size-8);
7909
+ --text-toggle-button-padding-inline:var(--space-2);
7910
+ --text-toggle-button-color-on:var(--text-toggletext-text);
7911
+ --text-toggle-button-color-off:var(--text-toggletext-text);
7912
+ --text-toggle-button-background:var(--surface-toggle-surface);
7913
+ --text-toggle-button-border-width:var(--border-1);
7914
+ --text-toggle-button-border-color-off:var(--border-toggletext-border-off);
7915
+ --text-toggle-button-border-radius:var(--radius-2);
7916
+ --text-toggle-button-focus-outline:var(--outline-focus-on-light);
7917
+ --text-toggle-button-background-off-hover:var(--surface-toggle-surface-off-hover);
7918
+ --text-toggle-button-border-color-off-hover:var(--border-toggletext-border-off-hover);
7919
+ --text-toggle-button-background-off-pressed:var(--surface-toggle-surface-off-pressed);
7920
+ --text-toggle-button-border-color-off-pressed:var(--border-toggletext-border-off-pressed);
7921
+ --text-toggle-button-background-on:var(--surface-toggletext-surface-on);
7922
+ --text-toggle-button-border-color-on:var(--border-toggletext-border-on);
7923
+ --text-toggle-button-background-on-hover:var(--surface-toggletext-surface-on-hover);
7924
+ --text-toggle-button-border-color-on-hover:var(--border-toggletext-border-on-hover);
7925
+ --text-toggle-button-background-on-pressed:var(--surface-toggletext-surface-on-pressed);
7926
+ --text-toggle-button-border-color-on-pressed:var(--border-toggletext-border-on-pressed);
7927
+ }
7928
+
7929
+ .bp_text_toggle_button_module_textToggleButton--b6cea[data-modern=true]{
7930
+ --text-toggle-button-min-height:var(--bp-size-080);
7931
+ --text-toggle-button-padding-inline:var(--bp-space-020);
7932
+ --text-toggle-button-color-on:var(--bp-text-toggle-text-text);
7933
+ --text-toggle-button-color-off:var(--bp-text-text-on-light);
7934
+ --text-toggle-button-background:var(--bp-surface-toggle-surface);
7935
+ --text-toggle-button-border-width:var(--bp-border-01);
7936
+ --text-toggle-button-border-color-off:var(--bp-border-toggle-text-border-off);
7937
+ --text-toggle-button-border-radius:var(--bp-radius-10);
7938
+ --text-toggle-button-focus-outline:var(--bp-outline-focus-on-light);
7939
+ --text-toggle-button-background-off-hover:var(--bp-surface-toggle-text-surface-off-hover);
7940
+ --text-toggle-button-border-color-off-hover:var(--bp-border-toggle-text-border-off-hover);
7941
+ --text-toggle-button-background-off-pressed:var(--bp-surface-toggle-text-surface-off-pressed);
7942
+ --text-toggle-button-border-color-off-pressed:var(--bp-border-toggle-text-border-off-pressed);
7943
+ --text-toggle-button-background-on:var(--bp-surface-toggle-text-surface-on);
7944
+ --text-toggle-button-border-color-on:var(--bp-border-toggle-text-border-on);
7945
+ --text-toggle-button-background-on-hover:var(--bp-surface-toggle-text-surface-on-hover);
7946
+ --text-toggle-button-border-color-on-hover:var(--bp-border-toggle-text-border-on-hover);
7947
+ --text-toggle-button-background-on-pressed:var(--bp-surface-toggle-text-surface-on-pressed);
7948
+ --text-toggle-button-border-color-on-pressed:var(--bp-border-toggle-text-border-on-pressed);
7949
+ }
7950
+
7951
+ .bp_text_toggle_button_module_textToggleButton--b6cea{
7952
+ background:var(--text-toggle-button-background);
7953
+ border:var(--text-toggle-button-border-width) solid var(--text-toggle-button-border-color-off);
7954
+ border-radius:var(--text-toggle-button-border-radius);
7955
+ color:var(--text-toggle-button-color-off);
7878
7956
  cursor:pointer;
7879
7957
  font-family:var(--body-default-font-family);
7880
7958
  font-size:var(--body-default-font-size);
7881
7959
  font-weight:var(--body-default-font-weight);
7882
7960
  letter-spacing:var(--body-default-letter-spacing);
7883
7961
  line-height:var(--body-default-line-height);
7884
- min-height:var(--size-8);
7962
+ min-height:var(--text-toggle-button-min-height);
7885
7963
  outline:0;
7886
- padding-inline:var(--space-2);
7964
+ padding-inline:var(--text-toggle-button-padding-inline);
7887
7965
  -webkit-text-decoration:var(--body-default-text-decoration);
7888
7966
  text-decoration:var(--body-default-text-decoration);
7889
7967
  text-transform:var(--body-default-text-case);
@@ -7891,35 +7969,36 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
7891
7969
  user-select:none;
7892
7970
  white-space:nowrap;
7893
7971
  }
7894
- .bp_text_toggle_button_module_textToggleButton--a97ea:disabled,.bp_text_toggle_button_module_textToggleButton--a97ea[aria-disabled]{
7972
+ .bp_text_toggle_button_module_textToggleButton--b6cea:disabled,.bp_text_toggle_button_module_textToggleButton--b6cea[aria-disabled]{
7895
7973
  opacity:.3;
7896
7974
  pointer-events:none;
7897
7975
  }
7898
- .bp_text_toggle_button_module_textToggleButton--a97ea:hover{
7899
- background:var(--surface-toggle-surface-off-hover);
7900
- border-color:var(--border-toggletext-border-off-hover);
7976
+ .bp_text_toggle_button_module_textToggleButton--b6cea:hover{
7977
+ background:var(--text-toggle-button-background-off-hover);
7978
+ border-color:var(--text-toggle-button-border-color-off-hover);
7901
7979
  }
7902
- .bp_text_toggle_button_module_textToggleButton--a97ea:focus,.bp_text_toggle_button_module_textToggleButton--a97ea[data-focus-visible]{
7903
- box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
7980
+ .bp_text_toggle_button_module_textToggleButton--b6cea:focus,.bp_text_toggle_button_module_textToggleButton--b6cea[data-focus-visible]{
7981
+ box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--text-toggle-button-focus-outline);
7904
7982
  }
7905
- .bp_text_toggle_button_module_textToggleButton--a97ea:active,.bp_text_toggle_button_module_textToggleButton--a97ea[data-active]{
7906
- background:var(--surface-toggle-surface-off-pressed);
7907
- border-color:var(--border-toggletext-border-off-pressed);
7983
+ .bp_text_toggle_button_module_textToggleButton--b6cea:active,.bp_text_toggle_button_module_textToggleButton--b6cea[data-active]{
7984
+ background:var(--text-toggle-button-background-off-pressed);
7985
+ border-color:var(--text-toggle-button-border-color-off-pressed);
7908
7986
  }
7909
- .bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]{
7910
- background:var(--surface-toggletext-surface-on);
7911
- border:var(--border-1) solid var(--border-toggletext-border-on);
7987
+ .bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]{
7988
+ background:var(--text-toggle-button-background-on);
7989
+ border:var(--text-toggle-button-border-width) solid var(--text-toggle-button-border-color-on);
7990
+ color:var(--text-toggle-button-color-on);
7912
7991
  }
7913
- .bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]:hover{
7914
- background:var(--surface-toggletext-surface-on-hover);
7915
- border-color:var(--border-toggletext-border-on-hover);
7992
+ .bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]:hover{
7993
+ background:var(--text-toggle-button-background-on-hover);
7994
+ border-color:var(--text-toggle-button-border-color-on-hover);
7916
7995
  }
7917
- .bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true][data-focus-visible]{
7918
- box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
7996
+ .bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true][data-focus-visible]{
7997
+ box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--text-toggle-button-focus-outline);
7919
7998
  }
7920
- .bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true][data-active]{
7921
- background:var(--surface-toggletext-surface-on-pressed);
7922
- border-color:var(--border-toggletext-border-on-pressed);
7999
+ .bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true][data-active]{
8000
+ background:var(--text-toggle-button-background-on-pressed);
8001
+ border-color:var(--text-toggle-button-border-color-on-pressed);
7923
8002
  }
7924
8003
 
7925
8004
  .bp_time_picker_module_timePicker--1cdb7{
package/dist/lib-esm/text-toggle-button/text-toggle-button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
4
5
  import { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
5
6
  import styles from './text-toggle-button.module.js';
6
7
 
@@ -8,10 +9,14 @@ const TextToggleButton = /*#__PURE__*/forwardRef(({
8
9
  className,
9
10
  ...rest
10
11
  }, ref) => {
12
+ const {
13
+ enableModernizedComponents
14
+ } = useBlueprintModernization();
11
15
  return jsx(BaseToggleButton, {
12
16
  ...rest,
13
17
  ref: ref,
14
- className: clsx(styles.textToggleButton, className)
18
+ className: clsx(styles.textToggleButton, className),
19
+ "data-modern": enableModernizedComponents
15
20
  });
16
21
  });
17
22
  TextToggleButton.displayName = 'TextToggleButton';
package/dist/lib-esm/text-toggle-button/text-toggle-button.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--a97ea"};
2
+ var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--b6cea"};
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.41.1",
3
+ "version": "12.43.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {