@box/blueprint-web 12.52.0 → 12.53.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 (5) hide show
  1. package/dist/lib-esm/accordion/accordion.js +14 -2
  2. package/dist/lib-esm/accordion/accordion.module.js +1 -1
  3. package/dist/lib-esm/index.css +209 -95
  4. package/dist/lib-esm/input-chip/input-chip.module.js +1 -1
  5. package/package.json +1 -1
package/dist/lib-esm/accordion/accordion.js CHANGED
@@ -4,6 +4,7 @@ import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, Surf
4
4
  import * as RadixAccordion from '@radix-ui/react-accordion';
5
5
  import clsx from 'clsx';
6
6
  import { createElement } from 'react';
7
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
8
  import { Ghost } from '../ghost/ghost.js';
8
9
  import { InlineNotice } from '../inline-notice/inline-notice.js';
9
10
  import { Status } from '../status/status.js';
@@ -33,8 +34,12 @@ const accordionIconVariantToIconProps = {
33
34
  * </Accordion>
34
35
  */
35
36
  const Root = props => {
37
+ const {
38
+ enableModernizedComponents
39
+ } = useBlueprintModernization();
36
40
  return jsx(RadixAccordion.Root, {
37
- ...props
41
+ ...props,
42
+ className: enableModernizedComponents ? styles.accordion : ''
38
43
  });
39
44
  };
40
45
  const Item = props => {
@@ -46,10 +51,14 @@ const Item = props => {
46
51
  ...rest
47
52
  } = props;
48
53
  const accordionItemClasses = clsx(styles.accordionItem, className);
54
+ const {
55
+ enableModernizedComponents
56
+ } = useBlueprintModernization();
49
57
  if (loading) {
50
58
  return jsx("div", {
51
59
  ...rest,
52
60
  className: accordionItemClasses,
61
+ "data-modern": enableModernizedComponents,
53
62
  children: jsx("button", {
54
63
  "aria-label": loadingAriaLabel,
55
64
  className: styles.accordionTrigger,
@@ -65,6 +74,7 @@ const Item = props => {
65
74
  return jsx("div", {
66
75
  ...rest,
67
76
  className: accordionItemClasses,
77
+ "data-modern": enableModernizedComponents,
68
78
  children: jsx("div", {
69
79
  className: clsx({
70
80
  [styles.accordionFixedContent]: Boolean(children)
@@ -96,6 +106,7 @@ const Item = props => {
96
106
  return jsxs(RadixAccordion.Item, {
97
107
  ...itemRest,
98
108
  className: accordionItemClasses,
109
+ "data-modern": enableModernizedComponents,
99
110
  children: [jsx(RadixAccordion.Header, {
100
111
  asChild: true,
101
112
  children: jsx(RadixAccordion.Trigger, {
@@ -125,7 +136,8 @@ const Item = props => {
125
136
  })
126
137
  }), jsx(PointerChevron, {
127
138
  "aria-hidden": "true",
128
- className: styles.accordionTriggerIcon
139
+ className: styles.accordionTriggerIcon,
140
+ color: enableModernizedComponents ? 'var(--bp-icon-icon-on-light-secondary)' : 'var(--bp-gray-100)'
129
141
  })]
130
142
  })]
131
143
  })
package/dist/lib-esm/accordion/accordion.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"accordionContent":"bp_accordion_module_accordionContent--13004","slideDown":"bp_accordion_module_slideDown--13004","slideUp":"bp_accordion_module_slideUp--13004","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--13004","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--13004","accordionItem":"bp_accordion_module_accordionItem--13004","accordionFixedContent":"bp_accordion_module_accordionFixedContent--13004","accordionHeader":"bp_accordion_module_accordionHeader--13004","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--13004","accordionStatus":"bp_accordion_module_accordionStatus--13004","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--13004","accordionTrigger":"bp_accordion_module_accordionTrigger--13004","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--13004"};
2
+ var styles = {"accordionItem":"bp_accordion_module_accordionItem--8cf35","accordionContent":"bp_accordion_module_accordionContent--8cf35","slideDown":"bp_accordion_module_slideDown--8cf35","slideUp":"bp_accordion_module_slideUp--8cf35","accordion":"bp_accordion_module_accordion--8cf35","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--8cf35","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--8cf35","accordionFixedContent":"bp_accordion_module_accordionFixedContent--8cf35","accordionHeader":"bp_accordion_module_accordionHeader--8cf35","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--8cf35","accordionStatus":"bp_accordion_module_accordionStatus--8cf35","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--8cf35","accordionTrigger":"bp_accordion_module_accordionTrigger--8cf35","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--8cf35"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -802,19 +802,94 @@
802
802
  .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
803
803
  background-color:var(--surface-status-surface-green-focus);
804
804
  }
805
- .bp_accordion_module_accordionContent--13004[data-state=open]{
806
- animation:bp_accordion_module_slideDown--13004 .15s ease-out;
807
- }
808
-
809
- .bp_accordion_module_accordionContent--13004[data-state=closed]{
810
- animation:bp_accordion_module_slideUp--13004 .15s ease-out;
811
- }
812
805
 
813
- .bp_accordion_module_accordionContent--13004{
806
+ .bp_accordion_module_accordionItem--8cf35[data-modern=false]{
807
+ --accordion-min-width:320px;
808
+ --accordion-item-radius:none;
809
+ --accordion-item-background-collapsed:var(--surface-accordion-surface);
810
+ --accordion-item-background-expanded:var(--surface-accordion-surface);
811
+ --accordion-item-border:var(--border-1) solid var(--border-divider-border);
812
+ --accordion-item-border-expanded:none;
813
+ --accordion-item-border-bottom-expanded:var(--border-1) solid var(--border-divider-border);
814
+ --accordion-content-padding-block:var(--space-4);
815
+ --accordion-content-padding-inline:var(--space-4);
816
+ --accordion-content-padding-block-end:var(--space-6);
817
+ --accordion-content-gap:var(--space-4);
818
+ --accordion-error-padding-block-start:var(--space-4);
819
+ --accordion-error-padding-inline:var(--space-4);
820
+ --accordion-fixed-content-gap:var(--space-4);
821
+ --accordion-fixed-content-padding-block:var(--space-5);
822
+ --accordion-fixed-content-padding-inline:var(--space-4);
823
+ --accordion-header-text-color:var(--text-text-on-light);
824
+ --accordion-status-margin:var(--space-2);
825
+ --accordion-icon-size:var(--size-4);
826
+ --accordion-icon-radius:var(--radius-half);
827
+ --accordion-icon-margin:var(--space-2);
828
+ --accordion-trigger-border:none;
829
+ --accordion-trigger-expanded-border:none;
830
+ --accordion-trigger-border-hover:none;
831
+ --accordion-trigger-padding:var(--space-4) var(--space-6) var(--space-4) var(--space-4);
832
+ --accordion-trigger-background-active:var(--surface-surface);
833
+ --accordion-trigger-collapsed-background-hover:var(--surface-accordion-surface-hover);
834
+ --accordion-trigger-expanded-background-hover:var(--surface-accordion-surface-hover);
835
+ --accordion-trigger-collapsed-background-focus:var(--surface-surface-hover);
836
+ --accordion-trigger-expanded-background-focus:var(--surface-surface-hover);
837
+ --accordion-trigger-box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
838
+ --accordion-trigger-icon-margin:var(--space-3);
839
+ --accordion-trigger-icon-transform-collapsed:none;
840
+ --accordion-trigger-icon-transform-expanded:rotate(180deg);
841
+ }
842
+
843
+ .bp_accordion_module_accordionItem--8cf35[data-modern=true]{
844
+ --accordion-min-width:320px;
845
+ --accordion-item-radius:var(--bp-radius-08);
846
+ --accordion-item-background-collapsed:var(--bp-surface-accordion-surface-collapsed);
847
+ --accordion-item-background-expanded:var(--bp-surface-accordion-surface-expanded);
848
+ --accordion-item-border:none;
849
+ --accordion-item-border-expanded:var(--bp-border-01) solid var(--bp-black-opacity-08);
850
+ --accordion-item-border-bottom-expanded:var(--bp-border-01) solid var(--bp-black-opacity-08);
851
+ --accordion-content-padding-block:var(--bp-space-040);
852
+ --accordion-content-padding-inline:var(--bp-space-040);
853
+ --accordion-content-padding-block-end:var(--bp-space-060);
854
+ --accordion-content-gap:var(--bp-space-040);
855
+ --accordion-error-padding-block-start:var(--bp-space-040);
856
+ --accordion-error-padding-inline:var(--bp-space-040);
857
+ --accordion-fixed-content-gap:0.625rem;
858
+ --accordion-fixed-content-padding-block:0.625rem;
859
+ --accordion-fixed-content-padding-inline:0.625rem;
860
+ --accordion-header-text-color:var(--bp-text-text-on-light);
861
+ --accordion-status-margin:var(--bp-space-020);
862
+ --accordion-icon-size:var(--bp-size-050);
863
+ --accordion-icon-radius:var(--bp-radius-16);
864
+ --accordion-icon-margin:var(--bp-space-020);
865
+ --accordion-trigger-border:var(--bp-border-01) solid var(--bp-black-opacity-04);
866
+ --accordion-trigger-expanded-border:var(--bp-border-01) solid var(--bp-surface-accordion-surface-expanded);
867
+ --accordion-trigger-border-hover:var(--bp-border-01) solid var(--bp-black-opacity-08);
868
+ --accordion-trigger-padding:var(--bp-space-030) var(--bp-space-040) var(--bp-space-030) var(--bp-space-040);
869
+ --accordion-trigger-background-active:var(--bp-surface-accordion-surface-collapsed);
870
+ --accordion-trigger-collapsed-background-hover:var(--bp-surface-accordion-surface-collapsed-hover);
871
+ --accordion-trigger-expanded-background-hover:var(--bp-surface-accordion-surface-expanded-hover);
872
+ --accordion-trigger-collapsed-background-focus:var(--bp-surface-accordion-surface-collapsed-hover);
873
+ --accordion-trigger-expanded-background-focus:var(--bp-surface-accordion-surface-expanded-hover);
874
+ --accordion-trigger-box-shadow:inset 0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
875
+ --accordion-trigger-icon-margin:var(--bp-space-030);
876
+ --accordion-trigger-icon-transform-collapsed:rotate(270deg);
877
+ --accordion-trigger-icon-transform-expanded:rotate(360deg);
878
+ }
879
+
880
+ .bp_accordion_module_accordionContent--8cf35[data-state=open]{
881
+ animation:bp_accordion_module_slideDown--8cf35 .15s ease-out;
882
+ }
883
+
884
+ .bp_accordion_module_accordionContent--8cf35[data-state=closed]{
885
+ animation:bp_accordion_module_slideUp--8cf35 .15s ease-out;
886
+ }
887
+
888
+ .bp_accordion_module_accordionContent--8cf35{
814
889
  overflow:hidden;
815
890
  }
816
891
 
817
- @keyframes bp_accordion_module_slideDown--13004{
892
+ @keyframes bp_accordion_module_slideDown--8cf35{
818
893
  from{
819
894
  height:0;
820
895
  }
@@ -822,7 +897,7 @@
822
897
  height:var(--radix-accordion-content-height);
823
898
  }
824
899
  }
825
- @keyframes bp_accordion_module_slideUp--13004{
900
+ @keyframes bp_accordion_module_slideUp--8cf35{
826
901
  from{
827
902
  height:var(--radix-accordion-content-height);
828
903
  }
@@ -830,110 +905,149 @@
830
905
  height:0;
831
906
  }
832
907
  }
833
- .bp_accordion_module_accordionContentWrapper--13004{
908
+ .bp_accordion_module_accordion--8cf35{
834
909
  display:flex;
835
910
  flex-direction:column;
836
- gap:var(--space-4);
837
- padding-block:var(--space-4);
838
- padding-block-end:var(--space-6);
839
- padding-inline:var(--space-4);
911
+ gap:var(--bp-space-030);
912
+ padding:var(--bp-space-030);
840
913
  }
841
914
 
842
- .bp_accordion_module_accordionInlineErrorWrapper--13004{
843
- padding-block-start:var(--space-4);
844
- padding-inline:var(--space-4);
915
+ .bp_accordion_module_accordionContentWrapper--8cf35{
916
+ display:flex;
917
+ flex-direction:column;
918
+ gap:var(--accordion-content-gap);
919
+ padding-block:var(--accordion-content-padding-block);
920
+ padding-block-end:var(--accordion-content-padding-block-end);
921
+ padding-inline:var(--accordion-content-padding-inline);
845
922
  }
846
923
 
847
- .bp_accordion_module_accordionItem--13004{
848
- border-bottom:var(--border-1) solid var(--border-divider-border);
849
- min-width:320px;
924
+ .bp_accordion_module_accordionInlineErrorWrapper--8cf35{
925
+ padding-block-start:var(--accordion-error-padding-block-start);
926
+ padding-inline:var(--accordion-error-padding-inline);
850
927
  }
851
- .bp_accordion_module_accordionItem--13004,.bp_accordion_module_accordionItem--13004 > [data-state=open]{
852
- background-color:var(--surface-accordion-surface);
928
+
929
+ .bp_accordion_module_accordionItem--8cf35{
930
+ -webkit-tap-highlight-color:transparent;
931
+ background:none;
932
+ border-bottom:var(--accordion-item-border);
933
+ border-radius:var(--accordion-item-radius);
934
+ min-width:var(--accordion-min-width);
935
+ }
936
+ .bp_accordion_module_accordionItem--8cf35[data-state=open]{
937
+ border:var(--accordion-item-border-expanded);
938
+ border-bottom:var(--accordion-item-border-bottom-expanded);
853
939
  }
854
940
 
855
- .bp_accordion_module_accordionFixedContent--13004{
856
- background-color:var(--surface-surface);
941
+ .bp_accordion_module_accordionFixedContent--8cf35{
942
+ background-color:var(--accordion-item-background-collapsed);
943
+ border:var(--accordion-trigger-border);
944
+ border-radius:var(--accordion-item-radius);
857
945
  display:flex;
858
946
  flex-direction:column;
859
- gap:var(--space-4);
860
- padding-block:var(--space-5);
861
- padding-inline:var(--space-4);
947
+ gap:var(--accordion-fixed-content-gap);
948
+ padding-block:var(--accordion-fixed-content-padding-block);
949
+ padding-inline:var(--accordion-fixed-content-padding-inline);
862
950
  }
863
951
 
864
- .bp_accordion_module_accordionHeader--13004{
865
- color:var(--text-text-on-light);
952
+ .bp_accordion_module_accordionHeader--8cf35{
866
953
  display:flex;
954
+ justify-content:space-between;
955
+ margin:0;
956
+ text-align:initial;
957
+ width:100%;
958
+ }
959
+
960
+ .bp_accordion_module_accordionItem--8cf35[data-modern=false] .bp_accordion_module_accordionHeader--8cf35{
961
+ color:var(--accordion-header-text-color);
867
962
  font-family:var(--title-small-font-family);
868
963
  font-size:var(--title-small-font-size);
869
964
  font-weight:var(--title-small-font-weight);
870
- justify-content:space-between;
871
965
  letter-spacing:var(--title-small-letter-spacing);
872
966
  line-height:var(--title-small-line-height);
873
- margin:0;
874
- text-align:initial;
875
967
  -webkit-text-decoration:var(--title-small-text-decoration);
876
968
  text-decoration:var(--title-small-text-decoration);
877
969
  text-transform:var(--title-small-text-case);
878
- width:100%;
879
970
  }
880
971
 
881
- .bp_accordion_module_accordionHeaderTrigger--13004{
972
+ .bp_accordion_module_accordionItem--8cf35[data-modern=true] .bp_accordion_module_accordionHeader--8cf35{
973
+ color:var(--accordion-header-text-color);
974
+ font-family:var(--title-medium-font-family);
975
+ font-size:var(--title-medium-font-size);
976
+ font-weight:var(--title-medium-font-weight);
977
+ letter-spacing:var(--title-medium-letter-spacing);
978
+ line-height:var(--title-medium-line-height);
979
+ line-height:var(--bp-font-line-height-04);
980
+ -webkit-text-decoration:var(--title-medium-text-decoration);
981
+ text-decoration:var(--title-medium-text-decoration);
982
+ text-transform:var(--title-medium-text-case);
983
+ }
984
+
985
+ .bp_accordion_module_accordionHeaderTrigger--8cf35{
882
986
  align-items:center;
883
987
  display:flex;
884
988
  }
885
989
 
886
- .bp_accordion_module_accordionStatus--13004{
887
- margin-inline-start:var(--space-2);
990
+ .bp_accordion_module_accordionStatus--8cf35{
991
+ margin-inline-start:var(--accordion-status-margin);
888
992
  }
889
993
 
890
- .bp_accordion_module_accordionIconWrapper--13004{
994
+ .bp_accordion_module_accordionIconWrapper--8cf35{
891
995
  align-items:center;
892
- border-radius:var(--radius-half);
996
+ border-radius:var(--accordion-icon-radius);
893
997
  display:flex;
894
- height:var(--size-4);
998
+ height:var(--accordion-icon-size);
895
999
  justify-content:center;
896
- margin-inline-start:var(--space-2);
897
- width:var(--size-4);
1000
+ margin-inline-start:var(--accordion-icon-margin);
1001
+ width:var(--accordion-icon-size);
898
1002
  }
899
1003
 
900
- .bp_accordion_module_accordionTrigger--13004{
1004
+ .bp_accordion_module_accordionTrigger--8cf35{
901
1005
  align-items:center;
902
- background-color:var(--surface-surface);
903
- border:none;
1006
+ background-color:var(--accordion-item-background-collapsed);
1007
+ border:var(--accordion-trigger-border);
1008
+ border-radius:var(--accordion-item-radius);
904
1009
  display:flex;
905
1010
  height:100%;
906
- padding:var(--space-4);
907
- padding-inline-end:var(--space-6);
1011
+ padding:var(--accordion-trigger-padding);
908
1012
  text-transform:capitalize;
909
1013
  width:100%;
910
1014
  }
911
- .bp_accordion_module_accordionTrigger--13004:active{
912
- background-color:var(--surface-surface);
1015
+ .bp_accordion_module_accordionTrigger--8cf35:disabled{
1016
+ cursor:default;
1017
+ opacity:.3;
1018
+ }
1019
+ .bp_accordion_module_accordionTrigger--8cf35:focus-visible{
1020
+ background-color:var(--accordion-trigger-collapsed-background-focus);
1021
+ border:var(--accordion-trigger-border-hover);
1022
+ box-shadow:var(--accordion-trigger-box-shadow);
1023
+ outline:none;
913
1024
  }
914
- .bp_accordion_module_accordionTrigger--13004:hover{
915
- background-color:var(--surface-accordion-surface-hover);
1025
+ .bp_accordion_module_accordionTrigger--8cf35:hover:not(:disabled){
1026
+ background-color:var(--accordion-trigger-collapsed-background-hover);
1027
+ border:var(--accordion-trigger-border-hover);
916
1028
  cursor:pointer;
917
1029
  }
918
- .bp_accordion_module_accordionTrigger--13004:focus-visible{
919
- background-color:var(--surface-surface-hover);
920
- box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
921
- outline:none;
1030
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open]{
1031
+ background-color:var(--accordion-item-background-expanded);
1032
+ border:var(--accordion-trigger-expanded-border);
1033
+ border-bottom-left-radius:0;
1034
+ border-bottom-right-radius:0;
922
1035
  }
923
- .bp_accordion_module_accordionTrigger--13004:disabled{
924
- cursor:default;
925
- opacity:.3;
1036
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open]:focus-visible{
1037
+ background-color:var(--accordion-trigger-expanded-background-focus);
1038
+ border:var(--accordion-trigger-expanded-border);
926
1039
  }
927
- .bp_accordion_module_accordionTrigger--13004:disabled:hover{
928
- background-color:var(--gray-white);
1040
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open]:hover:not(:disabled){
1041
+ background-color:var(--accordion-trigger-expanded-background-hover);
1042
+ border:var(--accordion-trigger-expanded-border);
929
1043
  }
930
- .bp_accordion_module_accordionTrigger--13004 .bp_accordion_module_accordionTriggerIcon--13004{
931
- color:var(--gray-50);
1044
+ .bp_accordion_module_accordionTrigger--8cf35 .bp_accordion_module_accordionTriggerIcon--8cf35{
932
1045
  flex-shrink:0;
933
1046
  margin-inline-start:var(--space-3);
1047
+ transform:var(--accordion-trigger-icon-transform-collapsed);
934
1048
  }
935
- .bp_accordion_module_accordionTrigger--13004[data-state=open] .bp_accordion_module_accordionTriggerIcon--13004{
936
- transform:rotate(180deg);
1049
+ .bp_accordion_module_accordionTrigger--8cf35[data-state=open] .bp_accordion_module_accordionTriggerIcon--8cf35{
1050
+ transform:var(--accordion-trigger-icon-transform-expanded);
937
1051
  }
938
1052
 
939
1053
  .bp_avatar_module_avatar--e431a{
@@ -1912,7 +2026,7 @@
1912
2026
  max-width:100%;
1913
2027
  }
1914
2028
 
1915
- .bp_input_chip_module_container--86f74[data-modern=false]{
2029
+ .bp_input_chip_module_container--9324d[data-modern=false]{
1916
2030
  --input-chip-surface:var(--surface-inputchip-surface);
1917
2031
  --input-chip-surface-hover:var(--surface-inputchip-surface-hover);
1918
2032
  --input-chip-surface-error:var(--surface-inputchip-surface-error);
@@ -1947,7 +2061,7 @@
1947
2061
  --input-chip-delete-padding-block:var(--space-1);
1948
2062
  }
1949
2063
 
1950
- .bp_input_chip_module_container--86f74[data-modern=true]{
2064
+ .bp_input_chip_module_container--9324d[data-modern=true]{
1951
2065
  --input-chip-surface:var(--bp-gray-10);
1952
2066
  --input-chip-surface-hover:var(--bp-gray-10);
1953
2067
  --input-chip-surface-error:var(--bp-watermelon-red-10);
@@ -1956,7 +2070,7 @@
1956
2070
  --input-chip-text-variable:var(--bp-purple-rain-120);
1957
2071
  --input-chip-delete-icon:var(--bp-purple-rain-120);
1958
2072
  --input-chip-border-error:var(--bp-watermelon-red-100);
1959
- --input-chip-border-radius:var(--bp-radius-16);
2073
+ --input-chip-border-radius:var(--bp-radius-04);
1960
2074
  --input-chip-height:var(--bp-size-070);
1961
2075
  --input-chip-padding-inline:calc(var(--bp-space-020) - var(--bp-space-005)) var(--bp-space-005);
1962
2076
  --input-chip-padding-block:var(--bp-space-005);
@@ -1982,7 +2096,7 @@
1982
2096
  --input-chip-delete-padding-block:var(--bp-space-010);
1983
2097
  }
1984
2098
 
1985
- .bp_input_chip_module_container--86f74{
2099
+ .bp_input_chip_module_container--9324d{
1986
2100
  align-items:center;
1987
2101
  background-color:var(--input-chip-surface);
1988
2102
  border:none;
@@ -2006,27 +2120,27 @@
2006
2120
  -webkit-user-select:none;
2007
2121
  user-select:none;
2008
2122
  }
2009
- .bp_input_chip_module_container--86f74.bp_input_chip_module_avatarContainer--86f74{
2123
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_avatarContainer--9324d{
2010
2124
  padding-inline:var(--input-chip-padding-inline-avatar);
2011
2125
  }
2012
- .bp_input_chip_module_container--86f74:not(.bp_input_chip_module_avatarContainer--86f74).bp_input_chip_module_deleteButton--86f74{
2126
+ .bp_input_chip_module_container--9324d:not(.bp_input_chip_module_avatarContainer--9324d).bp_input_chip_module_deleteButton--9324d{
2013
2127
  padding-inline:var(--input-chip-padding-inline-delete);
2014
2128
  }
2015
- .bp_input_chip_module_container--86f74:not(.bp_input_chip_module_avatarContainer--86f74).bp_input_chip_module_noDeleteButton--86f74{
2129
+ .bp_input_chip_module_container--9324d:not(.bp_input_chip_module_avatarContainer--9324d).bp_input_chip_module_noDeleteButton--9324d{
2016
2130
  padding-inline:calc(var(--bp-space-020) - var(--bp-space-005)) var(--bp-space-005);
2017
2131
  }
2018
- .bp_input_chip_module_container--86f74:not(.bp_input_chip_module_error--86f74):focus{
2132
+ .bp_input_chip_module_container--9324d:not(.bp_input_chip_module_error--9324d):focus{
2019
2133
  background-color:var(--input-chip-surface-hover);
2020
2134
  box-shadow:0 0 0 var(--input-chip-focus-ring-offset-width) var(--input-chip-focus-ring-offset-color), 0 0 0 calc(var(--input-chip-focus-ring-width) + var(--input-chip-focus-ring-offset-width)) var(--input-chip-focus-ring-color);
2021
2135
  }
2022
- .bp_input_chip_module_container--86f74.bp_input_chip_module_error--86f74{
2136
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_error--9324d{
2023
2137
  background-color:var(--input-chip-surface-error);
2024
2138
  outline:var(--border-1) solid var(--input-chip-border-error);
2025
2139
  }
2026
- .bp_input_chip_module_container--86f74.bp_input_chip_module_error--86f74:focus{
2140
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_error--9324d:focus{
2027
2141
  box-shadow:0 0 0 var(--input-chip-error-focus-ring-offset-width) var(--input-chip-error-focus-ring-offset-color), 0 0 0 calc(var(--input-chip-error-focus-ring-width) + var(--input-chip-error-focus-ring-offset-width)) var(--input-chip-error-focus-ring-color);
2028
2142
  }
2029
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74{
2143
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_deleteIcon--9324d{
2030
2144
  align-items:center;
2031
2145
  background:var(--input-chip-delete-surface);
2032
2146
  border-radius:var(--input-chip-delete-icon-border-radius);
@@ -2036,67 +2150,67 @@
2036
2150
  padding-block:var(--input-chip-delete-padding-block);
2037
2151
  padding-inline:var(--input-chip-delete-padding-inline);
2038
2152
  }
2039
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74 *{
2153
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_deleteIcon--9324d *{
2040
2154
  fill:var(--input-chip-delete-icon-color);
2041
2155
  }
2042
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:hover{
2156
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_deleteIcon--9324d:hover{
2043
2157
  background:var(--input-chip-delete-surface-hover);
2044
2158
  }
2045
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:hover *{
2159
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_deleteIcon--9324d:hover *{
2046
2160
  fill:var(--input-chip-delete-icon-hover);
2047
2161
  }
2048
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:active{
2162
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_deleteIcon--9324d:active{
2049
2163
  background:var(--input-chip-delete-surface-pressed);
2050
2164
  }
2051
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_deleteIcon--86f74:active *{
2165
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_deleteIcon--9324d:active *{
2052
2166
  fill:var(--input-chip-delete-icon-pressed);
2053
2167
  }
2054
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_label--86f74{
2168
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_label--9324d{
2055
2169
  overflow:hidden;
2056
2170
  padding-inline:var(--input-chip-label-padding-inline);
2057
2171
  text-overflow:ellipsis;
2058
2172
  white-space:nowrap;
2059
2173
  }
2060
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74{
2174
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d{
2061
2175
  background-color:var(--input-chip-surface-variable);
2062
2176
  }
2063
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_label--86f74{
2177
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_label--9324d{
2064
2178
  color:var(--input-chip-text-variable);
2065
2179
  }
2066
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74:focus{
2180
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d:focus{
2067
2181
  background-color:var(--input-chip-surface-variable);
2068
2182
  }
2069
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74{
2183
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_deleteIcon--9324d{
2070
2184
  background:var(--input-chip-delete-surface);
2071
2185
  }
2072
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74 *{
2186
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_deleteIcon--9324d *{
2073
2187
  fill:var(--input-chip-delete-icon);
2074
2188
  }
2075
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:hover{
2189
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_deleteIcon--9324d:hover{
2076
2190
  background:var(--input-chip-delete-surface-hover);
2077
2191
  }
2078
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:hover *{
2192
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_deleteIcon--9324d:hover *{
2079
2193
  fill:var(--input-chip-delete-icon);
2080
2194
  }
2081
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:active{
2195
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_deleteIcon--9324d:active{
2082
2196
  background:var(--input-chip-delete-surface-pressed);
2083
2197
  }
2084
- .bp_input_chip_module_container--86f74.bp_input_chip_module_variable--86f74 .bp_input_chip_module_deleteIcon--86f74:active *{
2198
+ .bp_input_chip_module_container--9324d.bp_input_chip_module_variable--9324d .bp_input_chip_module_deleteIcon--9324d:active *{
2085
2199
  fill:var(--input-chip-delete-icon);
2086
2200
  }
2087
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_avatar--86f74{
2201
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_avatar--9324d{
2088
2202
  flex-shrink:0;
2089
2203
  }
2090
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_avatar--86f74.bp_input_chip_module_modern--86f74{
2091
- border-bottom-left-radius:var(--bp-radius-16);
2204
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_avatar--9324d.bp_input_chip_module_modern--9324d{
2205
+ border-bottom-left-radius:var(--bp-radius-04);
2092
2206
  border-bottom-right-radius:0;
2093
- border-top-left-radius:var(--bp-radius-16);
2207
+ border-top-left-radius:var(--bp-radius-04);
2094
2208
  border-top-right-radius:0;
2095
2209
  height:1.75rem;
2096
2210
  overflow:hidden;
2097
2211
  width:1.75rem;
2098
2212
  }
2099
- .bp_input_chip_module_container--86f74 .bp_input_chip_module_avatar--86f74.bp_input_chip_module_modern--86f74 *{
2213
+ .bp_input_chip_module_container--9324d .bp_input_chip_module_avatar--9324d.bp_input_chip_module_modern--9324d *{
2100
2214
  border-radius:unset;
2101
2215
  }
2102
2216
  .bp_inline_error_module_inlineError--9a67c{
package/dist/lib-esm/input-chip/input-chip.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"container":"bp_input_chip_module_container--86f74","avatarContainer":"bp_input_chip_module_avatarContainer--86f74","deleteButton":"bp_input_chip_module_deleteButton--86f74","noDeleteButton":"bp_input_chip_module_noDeleteButton--86f74","error":"bp_input_chip_module_error--86f74","deleteIcon":"bp_input_chip_module_deleteIcon--86f74","label":"bp_input_chip_module_label--86f74","variable":"bp_input_chip_module_variable--86f74","avatar":"bp_input_chip_module_avatar--86f74","modern":"bp_input_chip_module_modern--86f74"};
2
+ var styles = {"container":"bp_input_chip_module_container--9324d","avatarContainer":"bp_input_chip_module_avatarContainer--9324d","deleteButton":"bp_input_chip_module_deleteButton--9324d","noDeleteButton":"bp_input_chip_module_noDeleteButton--9324d","error":"bp_input_chip_module_error--9324d","deleteIcon":"bp_input_chip_module_deleteIcon--9324d","label":"bp_input_chip_module_label--9324d","variable":"bp_input_chip_module_variable--9324d","avatar":"bp_input_chip_module_avatar--9324d","modern":"bp_input_chip_module_modern--9324d"};
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.52.0",
3
+ "version": "12.53.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {