@box/blueprint-web 12.74.0 → 12.75.1

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 (7) hide show
  1. package/dist/lib-esm/index.css +58 -59
  2. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-content.js +0 -1
  3. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js +10 -4
  4. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
  5. package/dist/lib-esm/primitives/tabs/default-tab.js +8 -6
  6. package/dist/lib-esm/primitives/tabs/tabs.module.js +1 -1
  7. package/package.json +1 -1
package/dist/lib-esm/index.css CHANGED
@@ -31,7 +31,7 @@
31
31
  background-color:var(--surface-surface-hover);
32
32
  }
33
33
  }
34
- .bp_base_inline_notice_module_noticeWrapper--69602[data-modern=false]{
34
+ .bp_base_inline_notice_module_noticeWrapper--186f9[data-modern=false]{
35
35
  --notice-radius:var(--radius-2);
36
36
  --notice-gap:var(--space-3);
37
37
  --notice-padding-block:var(--space-3);
@@ -49,9 +49,11 @@
49
49
  --notice-btn-surface-promo-hover:var(--surface-cta-surface-promo-hover);
50
50
  --notice-btn-surface-promo-focus-pressed:var(--surface-cta-surface-promo-focus-pressed);
51
51
  --notice-content-text-color:var(--text-text-on-light);
52
+ --notice-content-align:center;
53
+ --notice-icon-padding-top:0;
52
54
  }
53
55
 
54
- .bp_base_inline_notice_module_noticeWrapper--69602[data-modern=true]{
56
+ .bp_base_inline_notice_module_noticeWrapper--186f9[data-modern=true]{
55
57
  --notice-radius:var(--bp-radius-10);
56
58
  --notice-gap:var(--bp-space-030);
57
59
  --notice-padding-block:var(--bp-space-030);
@@ -69,65 +71,67 @@
69
71
  --notice-btn-surface-promo-hover:var(--bp-surface-cta-surface-promo-hover);
70
72
  --notice-btn-surface-promo-focus-pressed:var(--bp-surface-cta-surface-promo-focus-pressed);
71
73
  --notice-content-text-color:var(--bp-text-text-on-light);
74
+ --notice-content-align:top;
75
+ --notice-icon-padding-top:var(--bp-space-005);
72
76
  }
73
77
 
74
- .bp_base_inline_notice_module_noticeWrapper--69602{
78
+ .bp_base_inline_notice_module_noticeWrapper--186f9{
75
79
  border-radius:var(--notice-radius);
76
80
  display:flex;
77
81
  gap:var(--notice-gap);
78
82
  justify-content:space-between;
79
83
  padding:var(--notice-padding-block) var(--notice-padding-inline);
80
84
  }
81
- .bp_base_inline_notice_module_noticeWrapper--69602 .bp_base_inline_notice_module_actions--69602{
85
+ .bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_actions--186f9{
82
86
  align-self:center;
83
87
  display:flex;
84
88
  gap:var(--notice-gap);
85
89
  justify-content:flex-end;
86
90
  }
87
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundYellow--69602{
91
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundYellow--186f9{
88
92
  background:var(--notice-surface-warning);
89
93
  }
90
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundBlue--69602{
94
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundBlue--186f9{
91
95
  background:var(--notice-surface-info);
92
96
  }
93
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundRed--69602{
97
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundRed--186f9{
94
98
  background:var(--notice-surface-error);
95
99
  }
96
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundGreen--69602{
100
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundGreen--186f9{
97
101
  background:var(--notice-surface-success);
98
102
  }
99
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602{
103
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9{
100
104
  background:var(--notice-surface-promo);
101
105
  }
102
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonTertiary--69602{
106
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonTertiary--186f9{
103
107
  color:var(--notice-btn-text-promo);
104
108
  }
105
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonPrimary--69602{
109
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9{
106
110
  background:var(--notice-btn-surface-promo);
107
111
  border-color:var(--notice-btn-surface-promo);
108
112
  }
109
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonPrimary--69602:active{
113
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:active{
110
114
  background:var(--notice-btn-surface-promo-pressed);
111
115
  }
112
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonPrimary--69602[data-focus-visible]{
116
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9[data-focus-visible]{
113
117
  background:var(--notice-btn-surface-promo-focus);
114
118
  }
115
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonPrimary--69602:hover{
119
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:hover{
116
120
  background:var(--notice-btn-surface-promo-hover);
117
121
  border-color:var(--notice-btn-surface-promo-hover);
118
122
  }
119
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonPrimary--69602:focus:active{
123
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:focus:active{
120
124
  background:var(--notice-btn-surface-promo-focus-pressed);
121
125
  }
122
- .bp_base_inline_notice_module_noticeWrapper--69602.bp_base_inline_notice_module_backgroundPurple--69602 .bp_base_inline_notice_module_actionButtonPrimary--69602:hover:active{
126
+ .bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:hover:active{
123
127
  background:var(--notice-btn-surface-promo-pressed);
124
128
  }
125
- .bp_base_inline_notice_module_noticeWrapper--69602 .bp_base_inline_notice_module_contentContainer--69602{
126
- align-items:center;
129
+ .bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_contentContainer--186f9{
130
+ align-items:var(--notice-content-align);
127
131
  display:flex;
128
132
  gap:var(--notice-gap);
129
133
  }
130
- .bp_base_inline_notice_module_noticeWrapper--69602 .bp_base_inline_notice_module_content--69602{
134
+ .bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_content--186f9{
131
135
  color:var(--notice-content-text-color);
132
136
  font-family:var(--body-default-font-family);
133
137
  font-size:var(--body-default-font-size);
@@ -138,25 +142,18 @@
138
142
  text-decoration:var(--body-default-text-decoration);
139
143
  text-transform:var(--body-default-text-case);
140
144
  }
141
- .bp_base_inline_notice_module_noticeWrapper--69602 svg{
142
- display:block;
145
+ .bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_icon--186f9{
146
+ padding-top:var(--notice-icon-padding-top);
143
147
  }
144
- .bp_base_inline_notice_module_noticeWrapper--69602 .bp_base_inline_notice_module_title--69602{
145
- font-family:var(--body-default-bold-font-family);
146
- font-size:var(--body-default-bold-font-size);
147
- font-weight:var(--body-default-bold-font-weight);
148
- letter-spacing:var(--body-default-bold-letter-spacing);
149
- line-height:var(--body-default-bold-line-height);
150
- -webkit-text-decoration:var(--body-default-bold-text-decoration);
151
- text-decoration:var(--body-default-bold-text-decoration);
152
- text-transform:var(--body-default-bold-text-case);
148
+ .bp_base_inline_notice_module_noticeWrapper--186f9 svg{
149
+ display:block;
153
150
  }
154
151
 
155
152
  @media (max-width: 1023px){
156
- .bp_base_inline_notice_module_actions--69602{
153
+ .bp_base_inline_notice_module_actions--186f9{
157
154
  margin-top:var(--notice-space-3);
158
155
  }
159
- .bp_base_inline_notice_module_noticeWrapper--69602{
156
+ .bp_base_inline_notice_module_noticeWrapper--186f9{
160
157
  display:block;
161
158
  }
162
159
  }
@@ -8032,7 +8029,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8032
8029
  opacity:.3;
8033
8030
  }
8034
8031
 
8035
- .bp_tabs_module_hiddenWidthSetter--9f3da{
8032
+ .bp_tabs_module_hiddenWidthSetter--c5f51{
8036
8033
  display:block;
8037
8034
  font-family:var(--body-default-bold-font-family);
8038
8035
  font-size:var(--body-default-bold-font-size);
@@ -8046,11 +8043,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8046
8043
  text-transform:var(--body-default-bold-text-case);
8047
8044
  visibility:hidden;
8048
8045
  }
8049
- .bp_tabs_module_hiddenWidthSetter--9f3da > *{
8046
+ .bp_tabs_module_hiddenWidthSetter--c5f51 > *{
8050
8047
  visibility:hidden;
8051
8048
  }
8052
8049
 
8053
- .bp_tabs_module_contentSwitchTabList--9f3da[data-modern=false]{
8050
+ .bp_tabs_module_contentSwitchTabList--c5f51[data-modern=false]{
8054
8051
  --content-switch-tab-list-gap:var(--space-1);
8055
8052
  --content-switch-tab-list-padding:var(--space-1);
8056
8053
  --content-switch-tab-list-background:var(--surface-contentswitcher-surface);
@@ -8066,7 +8063,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8066
8063
  --content-switch-tab-active-background:var(--surface-cta-surface-secondary-pressed);
8067
8064
  }
8068
8065
 
8069
- .bp_tabs_module_contentSwitchTabList--9f3da[data-modern=true]{
8066
+ .bp_tabs_module_contentSwitchTabList--c5f51[data-modern=true]{
8070
8067
  --content-switch-tab-list-gap:var(--bp-space-010);
8071
8068
  --content-switch-tab-list-padding:var(--bp-space-010);
8072
8069
  --content-switch-tab-list-background:var(--bp-gray-10);
@@ -8081,7 +8078,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8081
8078
  --content-switch-tab-hover-background:var(--bp-gray-05);
8082
8079
  }
8083
8080
 
8084
- .bp_tabs_module_tabsListContainer--9f3da[data-modern=false]{
8081
+ .bp_tabs_module_tabsListContainer--c5f51[data-modern=false]{
8085
8082
  --tab-height:var(--size-10);
8086
8083
  --tab-inline-padding:var(--space-3);
8087
8084
  --tab-background:var(--background-background);
@@ -8106,7 +8103,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8106
8103
  --tab-border-hover-color:var(--border-tab-border-hover);
8107
8104
  }
8108
8105
 
8109
- .bp_tabs_module_tabsListContainer--9f3da[data-modern=true]{
8106
+ .bp_tabs_module_tabsListContainer--c5f51[data-modern=true]{
8110
8107
  --tab-height:var(--bp-size-100);
8111
8108
  --tab-inline-padding:var(--bp-space-030);
8112
8109
  --tab-background:var(--bp-background-background);
@@ -8132,7 +8129,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8132
8129
  --tab-border-selected-color:var(--bp-border-tab-border-selected);
8133
8130
  }
8134
8131
 
8135
- .bp_tabs_module_contentSwitchTabList--9f3da{
8132
+ .bp_tabs_module_contentSwitchTabList--c5f51{
8136
8133
  background:var(--content-switch-tab-list-background);
8137
8134
  border-radius:var(--content-switch-tab-list-border-radius);
8138
8135
  display:grid;
@@ -8143,7 +8140,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8143
8140
  min-width:fit-content;
8144
8141
  padding:var(--content-switch-tab-list-padding);
8145
8142
  }
8146
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da{
8143
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51{
8147
8144
  align-items:center;
8148
8145
  background:#0000;
8149
8146
  border:none;
@@ -8164,7 +8161,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8164
8161
  text-transform:var(--body-default-text-case);
8165
8162
  white-space:nowrap;
8166
8163
  }
8167
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da[aria-selected=true]{
8164
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51[aria-selected=true]{
8168
8165
  background:var(--content-switch-tab-selected-background);
8169
8166
  box-shadow:var(--content-switch-tab-selected-box-shadow);
8170
8167
  color:var(--content-switch-tab-selected-color);
@@ -8177,44 +8174,45 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8177
8174
  text-decoration:var(--body-default-bold-text-decoration);
8178
8175
  text-transform:var(--body-default-bold-text-case);
8179
8176
  }
8180
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da:not([aria-disabled=true])[data-focus-visible]{
8177
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51:not([aria-disabled=true])[data-focus-visible]{
8181
8178
  border-color:#0000;
8182
8179
  box-shadow:var(--content-switch-tab-focus-box-shadow);
8183
8180
  }
8184
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da:not([aria-disabled=true]):hover{
8181
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51:not([aria-disabled=true]):hover{
8185
8182
  background:var(--content-switch-tab-hover-background);
8186
8183
  }
8187
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da:not([aria-disabled=true]):active{
8184
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51:not([aria-disabled=true]):active{
8188
8185
  background:var(--content-switch-tab-active-background);
8189
8186
  }
8190
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da[aria-disabled=true]{
8187
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51[aria-disabled=true]{
8191
8188
  opacity:.3;
8192
8189
  pointer-events:none;
8193
8190
  }
8194
8191
 
8195
- .bp_tabs_module_tabsListContainer--9f3da{
8192
+ .bp_tabs_module_tabsListContainer--c5f51{
8196
8193
  height:calc(var(--tab-height) + (var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset))*2);
8197
8194
  overflow-y:hidden;
8198
8195
  scroll-behavior:smooth;
8199
8196
  }
8200
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da{
8197
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51{
8201
8198
  display:flex;
8202
8199
  overflow-x:auto;
8203
8200
  padding:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
8204
8201
  }
8205
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tabSeparator--9f3da{
8202
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tabSeparator--c5f51{
8206
8203
  border-bottom:var(--tab-separator-border);
8207
8204
  min-width:var(--tab-gap);
8208
8205
  }
8209
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tabSeparator--9f3da:last-child{
8206
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tabSeparator--c5f51:last-child{
8210
8207
  display:none;
8211
8208
  }
8212
8209
  @media only screen and (max-width: 1023px){
8213
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tabSeparator--9f3da{
8210
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tabSeparator--c5f51{
8214
8211
  min-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
8215
8212
  }
8216
8213
  }
8217
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da{
8214
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51{
8215
+ align-items:center;
8218
8216
  background:var(--tab-background);
8219
8217
  border-style:none;
8220
8218
  border-bottom:var(--tab-border);
@@ -8222,6 +8220,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8222
8220
  border-top-right-radius:var(--tab-border-radius-top-right);
8223
8221
  color:var(--tab-font-color);
8224
8222
  cursor:pointer;
8223
+ display:flex;
8225
8224
  font-family:var(--body-default-font-family);
8226
8225
  font-size:var(--body-default-font-size);
8227
8226
  font-weight:var(--body-default-font-weight);
@@ -8235,7 +8234,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8235
8234
  text-transform:var(--body-default-text-case);
8236
8235
  z-index:2;
8237
8236
  }
8238
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da[aria-selected=true]{
8237
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51[aria-selected=true]{
8239
8238
  border-bottom:var(--tab-border-selected);
8240
8239
  color:var(--tab-font-selected-color);
8241
8240
  font-family:var(--body-default-bold-font-family);
@@ -8247,23 +8246,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8247
8246
  text-decoration:var(--body-default-bold-text-decoration);
8248
8247
  text-transform:var(--body-default-bold-text-case);
8249
8248
  }
8250
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:hover{
8249
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:hover{
8251
8250
  background-color:var(--tab-background-hover);
8252
8251
  border-bottom:var(--tab-border-hover);
8253
8252
  color:var(--tab-font-color-hover);
8254
8253
  }
8255
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:hover[aria-selected=true]{
8254
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:hover[aria-selected=true]{
8256
8255
  border-bottom:var(--tab-border-selected-hover);
8257
8256
  color:var(--tab-font-selected-color);
8258
8257
  }
8259
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:active{
8258
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:active{
8260
8259
  background-color:var(--tab-background-pressed);
8261
8260
  color:var(--tab-font-color-hover);
8262
8261
  }
8263
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:active[aria-selected=true]{
8262
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:active[aria-selected=true]{
8264
8263
  color:var(--tab-font-selected-color);
8265
8264
  }
8266
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:focus-visible,.bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da[data-focus-visible]{
8265
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:focus-visible,.bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51[data-focus-visible]{
8267
8266
  background-color:var(--tab-background-hover);
8268
8267
  border-bottom:var(--tab-border-focus);
8269
8268
  border-radius:var(--tab-border-radius);
@@ -8272,11 +8271,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8272
8271
  outline:var(--tab-border-focus-outline-width) solid var(--tab-border-focus-outline-color);
8273
8272
  outline-offset:var(--tab-border-focus-outline-offset);
8274
8273
  }
8275
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da[data-focus-visible][aria-selected=true]{
8274
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51[data-focus-visible][aria-selected=true]{
8276
8275
  border-bottom:var(--tab-border-selected);
8277
8276
  color:var(--tab-font-selected-color);
8278
8277
  }
8279
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da[aria-disabled=true]{
8278
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51[aria-disabled=true]{
8280
8279
  opacity:.5;
8281
8280
  }
8282
8281
 
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-content.js CHANGED
@@ -22,7 +22,6 @@ const Title = /*#__PURE__*/forwardRef((props, forwardedRef) => {
22
22
  ...rest
23
23
  } = props;
24
24
  return jsx("div", {
25
- className: clsx(styles.title),
26
25
  children: jsx(Text, {
27
26
  ...rest,
28
27
  as: "h6",
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
2
+ import { bpIconIconOnLight, IconIconOnLight, bpSize050, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
3
3
  import { forwardRef, createElement } from 'react';
4
+ import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
5
+ import styles from './base-inline-notice.module.js';
4
6
 
5
7
  const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
6
8
  const {
@@ -8,18 +10,22 @@ const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
8
10
  iconAriaLabel,
9
11
  ...rest
10
12
  } = props;
13
+ const {
14
+ enableModernizedComponents
15
+ } = useBlueprintModernization();
11
16
  if (!icon) {
12
17
  return null;
13
18
  }
14
19
  const iconElement = /*#__PURE__*/createElement(icon, {
15
- color: IconIconOnLight,
16
- width: Size5,
17
- height: Size5,
20
+ color: enableModernizedComponents ? bpIconIconOnLight : IconIconOnLight,
21
+ width: enableModernizedComponents ? bpSize050 : Size5,
22
+ height: enableModernizedComponents ? bpSize050 : Size5,
18
23
  'aria-label': iconAriaLabel
19
24
  });
20
25
  return jsx("span", {
21
26
  ...rest,
22
27
  ref: forwardedRef,
28
+ className: styles.icon,
23
29
  children: iconElement
24
30
  });
25
31
  });
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--69602","actions":"bp_base_inline_notice_module_actions--69602","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--69602","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--69602","backgroundRed":"bp_base_inline_notice_module_backgroundRed--69602","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--69602","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--69602","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--69602","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--69602","contentContainer":"bp_base_inline_notice_module_contentContainer--69602","content":"bp_base_inline_notice_module_content--69602","title":"bp_base_inline_notice_module_title--69602"};
2
+ var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--186f9","actions":"bp_base_inline_notice_module_actions--186f9","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--186f9","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--186f9","backgroundRed":"bp_base_inline_notice_module_backgroundRed--186f9","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--186f9","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--186f9","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--186f9","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--186f9","contentContainer":"bp_base_inline_notice_module_contentContainer--186f9","content":"bp_base_inline_notice_module_content--186f9","icon":"bp_base_inline_notice_module_icon--186f9"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/tabs/default-tab.js CHANGED
@@ -38,15 +38,17 @@ const DefaultTab = /*#__PURE__*/forwardRef(function Tab$1(props, ref) {
38
38
  checkedScrollOnMount.current = true;
39
39
  }, [isTabSelected]);
40
40
  return jsxs(Fragment, {
41
- children: [jsxs(Tab, {
41
+ children: [jsx(Tab, {
42
42
  ...rest,
43
43
  ref: useForkRef(tabRef, ref),
44
44
  className: clsx(styles.tab, className),
45
- children: [children, jsx("span", {
46
- "aria-hidden": "true",
47
- className: styles.hiddenWidthSetter,
48
- children: children
49
- })]
45
+ children: jsxs("div", {
46
+ children: [children, jsx("span", {
47
+ "aria-hidden": "true",
48
+ className: styles.hiddenWidthSetter,
49
+ children: children
50
+ })]
51
+ })
50
52
  }), jsx("div", {
51
53
  "aria-hidden": "true",
52
54
  className: styles.tabSeparator,
package/dist/lib-esm/primitives/tabs/tabs.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--9f3da","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--9f3da","tabsListContainer":"bp_tabs_module_tabsListContainer--9f3da","contentSwitchTab":"bp_tabs_module_contentSwitchTab--9f3da","tabList":"bp_tabs_module_tabList--9f3da","tabSeparator":"bp_tabs_module_tabSeparator--9f3da","tab":"bp_tabs_module_tab--9f3da"};
2
+ var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--c5f51","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--c5f51","tabsListContainer":"bp_tabs_module_tabsListContainer--c5f51","contentSwitchTab":"bp_tabs_module_contentSwitchTab--c5f51","tabList":"bp_tabs_module_tabList--c5f51","tabSeparator":"bp_tabs_module_tabSeparator--c5f51","tab":"bp_tabs_module_tab--c5f51"};
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.74.0",
3
+ "version": "12.75.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {