@box/blueprint-web 12.54.0 → 12.55.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.
@@ -660,41 +660,124 @@
660
660
  text-decoration:var(--label-default-text-decoration);
661
661
  text-transform:var(--label-default-text-case);
662
662
  }
663
- .bp_status_module_interactiveStatus--6c98f{
663
+ .bp_status_module_maxContainer--a717b[data-modern=false]{
664
+ --status-gap:var(--space-1);
665
+ --status-height:var(--size-5);
666
+ --status-padding-right:var(--size-2);
667
+ --status-padding-left:var(--size-2);
668
+ --status-text-color:var(--text-text-on-light);
669
+ --status-background-color:var(--surface-status-surface-gray);
670
+ --status-border-radius:var(--radius-half);
671
+ --status-interactive-background-color-hover:var(--surface-status-surface-gray-hover);
672
+ --status-interactive-background-color-focus:var(--surface-status-surface-gray-focus);
673
+ --status-interactive-box-shadow-hover:0 0 0 var(--border-3) var(--border-status-border-hover);
674
+ --status-interactive-focus-ring-border:var(--border-2);
675
+ --status-interactive-focus-ring-color:var(--outline-focus-on-light);
676
+ --status-background-gray:var(--surface-status-surface-gray);
677
+ --status-interactive-background-gray-hover:var(--surface-status-surface-gray-hover);
678
+ --status-interactive-background-gray-focus:var(--surface-status-surface-gray-focus);
679
+ --status-background-yellow:var(--surface-status-surface-yellow);
680
+ --status-interactive-background-yellow-hover:var(--surface-status-surface-yellow-hover);
681
+ --status-interactive-background-yellow-focus:var(--surface-status-surface-yellow-focus);
682
+ --status-background-orange:var(--surface-status-surface-orange);
683
+ --status-interactive-background-orange-hover:var(--surface-status-surface-orange-hover);
684
+ --status-interactive-background-orange-focus:var(--surface-status-surface-orange-focus);
685
+ --status-background-red:var(--surface-status-surface-red);
686
+ --status-interactive-background-red-hover:var(--surface-status-surface-red-hover);
687
+ --status-interactive-background-red-focus:var(--surface-status-surface-red-focus);
688
+ --status-background-purple:var(--surface-status-surface-purple);
689
+ --status-interactive-background-purple-hover:var(--surface-status-surface-purple-hover);
690
+ --status-interactive-background-purple-focus:var(--surface-status-surface-purple-focus);
691
+ --status-background-light-blue:var(--surface-status-surface-light-blue);
692
+ --status-interactive-background-light-blue-hover:var(--surface-status-surface-light-blue-hover);
693
+ --status-background-dark-blue:var(--surface-status-surface-dark-blue);
694
+ --status-interactive-background-dark-blue-hover:var(--surface-status-surface-dark-blue-hover);
695
+ --status-interactive-background-dark-blue-focus:var(--surface-status-surface-dark-blue-focus);
696
+ --status-background-green:var(--surface-status-surface-green);
697
+ --status-interactive-background-green-hover:var(--surface-status-surface-green-hover);
698
+ --status-interactive-background-green-focus:var(--surface-status-surface-green-focus);
699
+ }
700
+
701
+ .bp_status_module_maxContainer--a717b[data-modern=true]{
702
+ --status-gap:var(--bp-space-010);
703
+ --status-height:var(--bp-size-050);
704
+ --status-padding-right:var(--bp-space-020);
705
+ --status-padding-left:var(--bp-space-020);
706
+ --status-text-color:var(--bp-text-text-on-light);
707
+ --status-background-color:var(--bp-surface-status-surface-gray);
708
+ --status-border-radius:var(--bp-radius-16);
709
+ --status-interactive-background-color-hover:var(--bp-surface-status-surface-gray-hover);
710
+ --status-interactive-background-color-focus:var(--bp-surface-status-surface-gray-focus);
711
+ --status-interactive-box-shadow-hover:0 0 0 var(--bp-border-03) var(--bp-border-status-border-hover);
712
+ --status-interactive-focus-ring-border:var(--bp-border-02);
713
+ --status-interactive-focus-ring-color:var(--bp-outline-focus-on-light);
714
+ --status-background-gray:var(--bp-surface-status-surface-gray);
715
+ --status-interactive-background-gray-hover:var(--bp-surface-status-surface-gray-hover);
716
+ --status-interactive-background-gray-focus:var(--bp-surface-status-surface-gray-focus);
717
+ --status-background-yellow:var(--bp-surface-status-surface-yellow);
718
+ --status-interactive-background-yellow-hover:var(--bp-surface-status-surface-yellow-hover);
719
+ --status-interactive-background-yellow-focus:var(--bp-surface-status-surface-yellow-focus);
720
+ --status-background-orange:var(--bp-surface-status-surface-orange);
721
+ --status-interactive-background-orange-hover:var(--bp-surface-status-surface-orange-hover);
722
+ --status-interactive-background-orange-focus:var(--bp-surface-status-surface-orange-focus);
723
+ --status-background-red:var(--bp-surface-status-surface-red);
724
+ --status-interactive-background-red-hover:var(--bp-surface-status-surface-red-hover);
725
+ --status-interactive-background-red-focus:var(--bp-surface-status-surface-red-focus);
726
+ --status-background-purple:var(--bp-surface-status-surface-purple);
727
+ --status-interactive-background-purple-hover:var(--bp-surface-status-surface-purple-hover);
728
+ --status-interactive-background-purple-focus:var(--bp-surface-status-surface-purple-focus);
729
+ --status-background-light-blue:var(--bp-surface-status-surface-light-blue);
730
+ --status-interactive-background-light-blue-hover:var(--bp-surface-status-surface-light-blue-hover);
731
+ --status-interactive-background-light-blue-focus:var(--bp-surface-status-surface-light-blue-focus);
732
+ --status-background-dark-blue:var(--bp-surface-status-surface-dark-blue);
733
+ --status-interactive-background-dark-blue-hover:var(--bp-surface-status-surface-dark-blue-hover);
734
+ --status-interactive-background-dark-blue-focus:var(--bp-surface-status-surface-dark-blue-focus);
735
+ --status-background-green:var(--bp-surface-status-surface-green);
736
+ --status-interactive-background-green-hover:var(--bp-surface-status-surface-green-hover);
737
+ --status-interactive-background-green-focus:var(--bp-surface-status-surface-green-focus);
738
+ }
739
+
740
+ .bp_status_module_maxContainer--a717b{
741
+ display:inline-block;
742
+ max-width:100%;
743
+ vertical-align:middle;
744
+ }
745
+
746
+ .bp_status_module_interactiveStatus--a717b{
664
747
  border:initial;
665
748
  cursor:default;
666
749
  max-width:100%;
667
750
  padding:initial;
668
751
  vertical-align:top;
669
752
  }
670
- .bp_status_module_interactiveStatus--6c98f:focus-visible{
671
- box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
753
+ .bp_status_module_interactiveStatus--a717b:focus-visible{
754
+ box-shadow:0 0 0 var(--status-interactive-focus-ring-border) var(--status-interactive-focus-ring-color);
672
755
  outline:none;
673
756
  overflow:visible;
674
757
  }
675
- .bp_status_module_interactiveStatus--6c98f:hover{
676
- background-color:var(--status-interactive-background-color-hover, var(--surface-status-surface-gray-hover));
677
- box-shadow:0 0 0 var(--border-3) var(--border-status-border-hover);
758
+ .bp_status_module_interactiveStatus--a717b:hover{
759
+ background-color:var(--status-interactive-background-color-hover);
760
+ box-shadow:var(--status-interactive-box-shadow-hover);
678
761
  }
679
- .bp_status_module_interactiveStatus--6c98f:focus-visible{
680
- background-color:var(--status-interactive-background-color-focus, var(--surface-status-surface-gray-focus));
762
+ .bp_status_module_interactiveStatus--a717b:focus-visible{
763
+ background-color:var(--status-interactive-background-color-focus);
681
764
  }
682
765
 
683
- .bp_status_module_status--6c98f{
766
+ .bp_status_module_status--a717b{
684
767
  align-items:center;
685
- background-color:var(--status-background-color, var(--surface-status-surface-gray));
686
- border-radius:var(--radius-half);
687
- color:var(--text-text-on-light);
768
+ background-color:var(--status-background-color);
769
+ border-radius:var(--status-border-radius);
770
+ color:var(--status-text-color);
688
771
  display:flex;
689
772
  font-family:var(--label-bold-font-family);
690
773
  font-size:var(--label-bold-font-size);
691
774
  font-weight:var(--label-bold-font-weight);
692
- gap:var(--space-1);
693
- height:var(--size-5);
775
+ gap:var(--status-gap);
776
+ height:var(--status-height);
694
777
  letter-spacing:var(--label-bold-letter-spacing);
695
778
  line-height:var(--label-bold-line-height);
696
- padding-left:var(--size-2);
697
- padding-right:var(--size-2);
779
+ padding-left:var(--status-padding-left);
780
+ padding-right:var(--status-padding-right);
698
781
  -webkit-text-decoration:var(--label-bold-text-decoration);
699
782
  text-decoration:var(--label-bold-text-decoration);
700
783
  text-transform:var(--label-bold-text-case);
@@ -702,105 +785,99 @@
702
785
  user-select:text;
703
786
  white-space:nowrap;
704
787
  }
705
- .bp_status_module_status--6c98f.bp_status_module_reverse--6c98f{
788
+ .bp_status_module_status--a717b.bp_status_module_reverse--a717b{
706
789
  flex-direction:row-reverse;
707
790
  }
708
- .bp_status_module_status--6c98f.bp_status_module_circle--6c98f{
791
+ .bp_status_module_status--a717b.bp_status_module_circle--a717b{
709
792
  padding:0 3px;
710
793
  }
711
- .bp_status_module_status--6c98f .bp_status_module_text--6c98f{
794
+ .bp_status_module_status--a717b .bp_status_module_text--a717b{
712
795
  overflow:hidden;
713
796
  text-overflow:ellipsis;
714
797
  }
715
- .bp_status_module_status--6c98f > svg{
798
+ .bp_status_module_status--a717b > svg{
716
799
  flex:0 0 auto;
717
800
  white-space:nowrap;
718
801
  }
719
802
 
720
- .bp_status_module_maxContainer--6c98f{
721
- display:inline-block;
722
- max-width:100%;
723
- vertical-align:middle;
724
- }
725
-
726
- .bp_status_module_colorSurfaceStatusSurfaceGray--6c98f{
727
- background-color:var(--surface-status-surface-gray);
803
+ .bp_status_module_colorSurfaceStatusSurfaceGray--a717b{
804
+ background-color:var(--status-background-gray);
728
805
  }
729
- .bp_status_module_colorSurfaceStatusSurfaceGray--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
730
- background-color:var(--surface-status-surface-gray-hover);
806
+ .bp_status_module_colorSurfaceStatusSurfaceGray--a717b.bp_status_module_interactiveStatus--a717b:hover{
807
+ background-color:var(--status-interactive-background-gray-hover);
731
808
  }
732
- .bp_status_module_colorSurfaceStatusSurfaceGray--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
733
- background-color:var(--surface-status-surface-gray-focus);
809
+ .bp_status_module_colorSurfaceStatusSurfaceGray--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
810
+ background-color:var(--status-interactive-background-gray-focus);
734
811
  }
735
812
 
736
- .bp_status_module_colorSurfaceStatusSurfaceYellow--6c98f{
737
- background-color:var(--surface-status-surface-yellow);
813
+ .bp_status_module_colorSurfaceStatusSurfaceYellow--a717b{
814
+ background-color:var(--status-background-yellow);
738
815
  }
739
- .bp_status_module_colorSurfaceStatusSurfaceYellow--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
740
- background-color:var(--surface-status-surface-yellow-hover);
816
+ .bp_status_module_colorSurfaceStatusSurfaceYellow--a717b.bp_status_module_interactiveStatus--a717b:hover{
817
+ background-color:var(--status-interactive-background-yellow-hover);
741
818
  }
742
- .bp_status_module_colorSurfaceStatusSurfaceYellow--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
743
- background-color:var(--surface-status-surface-yellow-focus);
819
+ .bp_status_module_colorSurfaceStatusSurfaceYellow--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
820
+ background-color:var(--status-interactive-background-yellow-focus);
744
821
  }
745
822
 
746
- .bp_status_module_colorSurfaceStatusSurfaceOrange--6c98f{
747
- background-color:var(--surface-status-surface-orange);
823
+ .bp_status_module_colorSurfaceStatusSurfaceOrange--a717b{
824
+ background-color:var(--status-background-orange);
748
825
  }
749
- .bp_status_module_colorSurfaceStatusSurfaceOrange--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
750
- background-color:var(--surface-status-surface-orange-hover);
826
+ .bp_status_module_colorSurfaceStatusSurfaceOrange--a717b.bp_status_module_interactiveStatus--a717b:hover{
827
+ background-color:var(--status-interactive-background-orange-hover);
751
828
  }
752
- .bp_status_module_colorSurfaceStatusSurfaceOrange--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
753
- background-color:var(--surface-status-surface-orange-focus);
829
+ .bp_status_module_colorSurfaceStatusSurfaceOrange--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
830
+ background-color:var(--status-interactive-background-orange-focus);
754
831
  }
755
832
 
756
- .bp_status_module_colorSurfaceStatusSurfaceRed--6c98f{
757
- background-color:var(--surface-status-surface-red);
833
+ .bp_status_module_colorSurfaceStatusSurfaceRed--a717b{
834
+ background-color:var(--status-background-red);
758
835
  }
759
- .bp_status_module_colorSurfaceStatusSurfaceRed--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
760
- background-color:var(--surface-status-surface-red-hover);
836
+ .bp_status_module_colorSurfaceStatusSurfaceRed--a717b.bp_status_module_interactiveStatus--a717b:hover{
837
+ background-color:var(--status-interactive-background-red-hover);
761
838
  }
762
- .bp_status_module_colorSurfaceStatusSurfaceRed--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
763
- background-color:var(--surface-status-surface-red-focus);
839
+ .bp_status_module_colorSurfaceStatusSurfaceRed--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
840
+ background-color:var(--status-interactive-background-red-focus);
764
841
  }
765
842
 
766
- .bp_status_module_colorSurfaceStatusSurfacePurple--6c98f{
767
- background-color:var(--surface-status-surface-purple);
843
+ .bp_status_module_colorSurfaceStatusSurfacePurple--a717b{
844
+ background-color:var(--status-background-purple);
768
845
  }
769
- .bp_status_module_colorSurfaceStatusSurfacePurple--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
770
- background-color:var(--surface-status-surface-purple-hover);
846
+ .bp_status_module_colorSurfaceStatusSurfacePurple--a717b.bp_status_module_interactiveStatus--a717b:hover{
847
+ background-color:var(--status-interactive-background-purple-hover);
771
848
  }
772
- .bp_status_module_colorSurfaceStatusSurfacePurple--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
773
- background-color:var(--surface-status-surface-purple-focus);
849
+ .bp_status_module_colorSurfaceStatusSurfacePurple--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
850
+ background-color:var(--status-interactive-background-purple-focus);
774
851
  }
775
852
 
776
- .bp_status_module_colorSurfaceStatusSurfaceLightBlue--6c98f{
777
- background-color:var(--surface-status-surface-light-blue);
853
+ .bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b{
854
+ background-color:var(--status-background-light-blue);
778
855
  }
779
- .bp_status_module_colorSurfaceStatusSurfaceLightBlue--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
780
- background-color:var(--surface-status-surface-light-blue-hover);
856
+ .bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b.bp_status_module_interactiveStatus--a717b:hover{
857
+ background-color:var(--status-interactive-background-light-blue-hover);
781
858
  }
782
- .bp_status_module_colorSurfaceStatusSurfaceLightBlue--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
783
- background-color:var(--surface-status-surface-light-blue-focus);
859
+ .bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
860
+ background-color:var(--status-interactive-background-light-blue-focus);
784
861
  }
785
862
 
786
- .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--6c98f{
787
- background-color:var(--surface-status-surface-dark-blue);
863
+ .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b{
864
+ background-color:var(--status-background-dark-blue);
788
865
  }
789
- .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
790
- background-color:var(--surface-status-surface-dark-blue-hover);
866
+ .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b.bp_status_module_interactiveStatus--a717b:hover{
867
+ background-color:var(--status-interactive-background-dark-blue-hover);
791
868
  }
792
- .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
793
- background-color:var(--surface-status-surface-dark-blue-focus);
869
+ .bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
870
+ background-color:var(--status-interactive-background-dark-blue-focus);
794
871
  }
795
872
 
796
- .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f{
797
- background-color:var(--surface-status-surface-green);
873
+ .bp_status_module_colorSurfaceStatusSurfaceGreen--a717b{
874
+ background-color:var(--status-background-green);
798
875
  }
799
- .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f.bp_status_module_interactiveStatus--6c98f:hover{
800
- background-color:var(--surface-status-surface-green-hover);
876
+ .bp_status_module_colorSurfaceStatusSurfaceGreen--a717b.bp_status_module_interactiveStatus--a717b:hover{
877
+ background-color:var(--status-interactive-background-green-hover);
801
878
  }
802
- .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
803
- background-color:var(--surface-status-surface-green-focus);
879
+ .bp_status_module_colorSurfaceStatusSurfaceGreen--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
880
+ background-color:var(--status-interactive-background-green-focus);
804
881
  }
805
882
 
806
883
  .bp_accordion_module_accordionItem--8cf35[data-modern=false]{
@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
3
3
  import clsx from 'clsx';
4
4
  import { forwardRef, useMemo, createElement } from 'react';
5
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
5
6
  import { colorToTokenMap, colors, colorsMap } from './consts.js';
6
7
  import styles from './status.module.js';
7
8
 
@@ -22,6 +23,9 @@ const Status = /*#__PURE__*/forwardRef((props, forwardedRef) => {
22
23
  'aria-label': ariaLabel,
23
24
  ...rest
24
25
  } = props;
26
+ const {
27
+ enableModernizedComponents
28
+ } = useBlueprintModernization();
25
29
  const backgroundColor = useMemo(() => {
26
30
  const bgColor = color || getColorFromColorsMap(colorIndex);
27
31
  return colorToTokenMap[bgColor] || 'SurfaceStatusSurfaceGray';
@@ -74,6 +78,7 @@ const Status = /*#__PURE__*/forwardRef((props, forwardedRef) => {
74
78
  });
75
79
  return jsx("span", {
76
80
  className: clsx(styles.maxContainer, className),
81
+ "data-modern": enableModernizedComponents,
77
82
  children: innerElement
78
83
  });
79
84
  });
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"interactiveStatus":"bp_status_module_interactiveStatus--6c98f","status":"bp_status_module_status--6c98f","reverse":"bp_status_module_reverse--6c98f","circle":"bp_status_module_circle--6c98f","text":"bp_status_module_text--6c98f","maxContainer":"bp_status_module_maxContainer--6c98f","colorSurfaceStatusSurfaceGray":"bp_status_module_colorSurfaceStatusSurfaceGray--6c98f","colorSurfaceStatusSurfaceYellow":"bp_status_module_colorSurfaceStatusSurfaceYellow--6c98f","colorSurfaceStatusSurfaceOrange":"bp_status_module_colorSurfaceStatusSurfaceOrange--6c98f","colorSurfaceStatusSurfaceRed":"bp_status_module_colorSurfaceStatusSurfaceRed--6c98f","colorSurfaceStatusSurfacePurple":"bp_status_module_colorSurfaceStatusSurfacePurple--6c98f","colorSurfaceStatusSurfaceLightBlue":"bp_status_module_colorSurfaceStatusSurfaceLightBlue--6c98f","colorSurfaceStatusSurfaceDarkBlue":"bp_status_module_colorSurfaceStatusSurfaceDarkBlue--6c98f","colorSurfaceStatusSurfaceGreen":"bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f"};
2
+ var styles = {"maxContainer":"bp_status_module_maxContainer--a717b","interactiveStatus":"bp_status_module_interactiveStatus--a717b","status":"bp_status_module_status--a717b","reverse":"bp_status_module_reverse--a717b","circle":"bp_status_module_circle--a717b","text":"bp_status_module_text--a717b","colorSurfaceStatusSurfaceGray":"bp_status_module_colorSurfaceStatusSurfaceGray--a717b","colorSurfaceStatusSurfaceYellow":"bp_status_module_colorSurfaceStatusSurfaceYellow--a717b","colorSurfaceStatusSurfaceOrange":"bp_status_module_colorSurfaceStatusSurfaceOrange--a717b","colorSurfaceStatusSurfaceRed":"bp_status_module_colorSurfaceStatusSurfaceRed--a717b","colorSurfaceStatusSurfacePurple":"bp_status_module_colorSurfaceStatusSurfacePurple--a717b","colorSurfaceStatusSurfaceLightBlue":"bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b","colorSurfaceStatusSurfaceDarkBlue":"bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b","colorSurfaceStatusSurfaceGreen":"bp_status_module_colorSurfaceStatusSurfaceGreen--a717b"};
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.54.0",
3
+ "version": "12.55.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {