@box/blueprint-web 12.74.0 → 12.75.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.
@@ -8032,7 +8032,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8032
8032
  opacity:.3;
8033
8033
  }
8034
8034
 
8035
- .bp_tabs_module_hiddenWidthSetter--9f3da{
8035
+ .bp_tabs_module_hiddenWidthSetter--c5f51{
8036
8036
  display:block;
8037
8037
  font-family:var(--body-default-bold-font-family);
8038
8038
  font-size:var(--body-default-bold-font-size);
@@ -8046,11 +8046,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8046
8046
  text-transform:var(--body-default-bold-text-case);
8047
8047
  visibility:hidden;
8048
8048
  }
8049
- .bp_tabs_module_hiddenWidthSetter--9f3da > *{
8049
+ .bp_tabs_module_hiddenWidthSetter--c5f51 > *{
8050
8050
  visibility:hidden;
8051
8051
  }
8052
8052
 
8053
- .bp_tabs_module_contentSwitchTabList--9f3da[data-modern=false]{
8053
+ .bp_tabs_module_contentSwitchTabList--c5f51[data-modern=false]{
8054
8054
  --content-switch-tab-list-gap:var(--space-1);
8055
8055
  --content-switch-tab-list-padding:var(--space-1);
8056
8056
  --content-switch-tab-list-background:var(--surface-contentswitcher-surface);
@@ -8066,7 +8066,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8066
8066
  --content-switch-tab-active-background:var(--surface-cta-surface-secondary-pressed);
8067
8067
  }
8068
8068
 
8069
- .bp_tabs_module_contentSwitchTabList--9f3da[data-modern=true]{
8069
+ .bp_tabs_module_contentSwitchTabList--c5f51[data-modern=true]{
8070
8070
  --content-switch-tab-list-gap:var(--bp-space-010);
8071
8071
  --content-switch-tab-list-padding:var(--bp-space-010);
8072
8072
  --content-switch-tab-list-background:var(--bp-gray-10);
@@ -8081,7 +8081,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8081
8081
  --content-switch-tab-hover-background:var(--bp-gray-05);
8082
8082
  }
8083
8083
 
8084
- .bp_tabs_module_tabsListContainer--9f3da[data-modern=false]{
8084
+ .bp_tabs_module_tabsListContainer--c5f51[data-modern=false]{
8085
8085
  --tab-height:var(--size-10);
8086
8086
  --tab-inline-padding:var(--space-3);
8087
8087
  --tab-background:var(--background-background);
@@ -8106,7 +8106,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8106
8106
  --tab-border-hover-color:var(--border-tab-border-hover);
8107
8107
  }
8108
8108
 
8109
- .bp_tabs_module_tabsListContainer--9f3da[data-modern=true]{
8109
+ .bp_tabs_module_tabsListContainer--c5f51[data-modern=true]{
8110
8110
  --tab-height:var(--bp-size-100);
8111
8111
  --tab-inline-padding:var(--bp-space-030);
8112
8112
  --tab-background:var(--bp-background-background);
@@ -8132,7 +8132,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8132
8132
  --tab-border-selected-color:var(--bp-border-tab-border-selected);
8133
8133
  }
8134
8134
 
8135
- .bp_tabs_module_contentSwitchTabList--9f3da{
8135
+ .bp_tabs_module_contentSwitchTabList--c5f51{
8136
8136
  background:var(--content-switch-tab-list-background);
8137
8137
  border-radius:var(--content-switch-tab-list-border-radius);
8138
8138
  display:grid;
@@ -8143,7 +8143,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8143
8143
  min-width:fit-content;
8144
8144
  padding:var(--content-switch-tab-list-padding);
8145
8145
  }
8146
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da{
8146
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51{
8147
8147
  align-items:center;
8148
8148
  background:#0000;
8149
8149
  border:none;
@@ -8164,7 +8164,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8164
8164
  text-transform:var(--body-default-text-case);
8165
8165
  white-space:nowrap;
8166
8166
  }
8167
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da[aria-selected=true]{
8167
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51[aria-selected=true]{
8168
8168
  background:var(--content-switch-tab-selected-background);
8169
8169
  box-shadow:var(--content-switch-tab-selected-box-shadow);
8170
8170
  color:var(--content-switch-tab-selected-color);
@@ -8177,44 +8177,45 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8177
8177
  text-decoration:var(--body-default-bold-text-decoration);
8178
8178
  text-transform:var(--body-default-bold-text-case);
8179
8179
  }
8180
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da:not([aria-disabled=true])[data-focus-visible]{
8180
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51:not([aria-disabled=true])[data-focus-visible]{
8181
8181
  border-color:#0000;
8182
8182
  box-shadow:var(--content-switch-tab-focus-box-shadow);
8183
8183
  }
8184
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da:not([aria-disabled=true]):hover{
8184
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51:not([aria-disabled=true]):hover{
8185
8185
  background:var(--content-switch-tab-hover-background);
8186
8186
  }
8187
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da:not([aria-disabled=true]):active{
8187
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51:not([aria-disabled=true]):active{
8188
8188
  background:var(--content-switch-tab-active-background);
8189
8189
  }
8190
- .bp_tabs_module_contentSwitchTabList--9f3da .bp_tabs_module_contentSwitchTab--9f3da[aria-disabled=true]{
8190
+ .bp_tabs_module_contentSwitchTabList--c5f51 .bp_tabs_module_contentSwitchTab--c5f51[aria-disabled=true]{
8191
8191
  opacity:.3;
8192
8192
  pointer-events:none;
8193
8193
  }
8194
8194
 
8195
- .bp_tabs_module_tabsListContainer--9f3da{
8195
+ .bp_tabs_module_tabsListContainer--c5f51{
8196
8196
  height:calc(var(--tab-height) + (var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset))*2);
8197
8197
  overflow-y:hidden;
8198
8198
  scroll-behavior:smooth;
8199
8199
  }
8200
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da{
8200
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51{
8201
8201
  display:flex;
8202
8202
  overflow-x:auto;
8203
8203
  padding:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
8204
8204
  }
8205
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tabSeparator--9f3da{
8205
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tabSeparator--c5f51{
8206
8206
  border-bottom:var(--tab-separator-border);
8207
8207
  min-width:var(--tab-gap);
8208
8208
  }
8209
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tabSeparator--9f3da:last-child{
8209
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tabSeparator--c5f51:last-child{
8210
8210
  display:none;
8211
8211
  }
8212
8212
  @media only screen and (max-width: 1023px){
8213
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tabSeparator--9f3da{
8213
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tabSeparator--c5f51{
8214
8214
  min-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
8215
8215
  }
8216
8216
  }
8217
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da{
8217
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51{
8218
+ align-items:center;
8218
8219
  background:var(--tab-background);
8219
8220
  border-style:none;
8220
8221
  border-bottom:var(--tab-border);
@@ -8222,6 +8223,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8222
8223
  border-top-right-radius:var(--tab-border-radius-top-right);
8223
8224
  color:var(--tab-font-color);
8224
8225
  cursor:pointer;
8226
+ display:flex;
8225
8227
  font-family:var(--body-default-font-family);
8226
8228
  font-size:var(--body-default-font-size);
8227
8229
  font-weight:var(--body-default-font-weight);
@@ -8235,7 +8237,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8235
8237
  text-transform:var(--body-default-text-case);
8236
8238
  z-index:2;
8237
8239
  }
8238
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da[aria-selected=true]{
8240
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51[aria-selected=true]{
8239
8241
  border-bottom:var(--tab-border-selected);
8240
8242
  color:var(--tab-font-selected-color);
8241
8243
  font-family:var(--body-default-bold-font-family);
@@ -8247,23 +8249,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8247
8249
  text-decoration:var(--body-default-bold-text-decoration);
8248
8250
  text-transform:var(--body-default-bold-text-case);
8249
8251
  }
8250
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:hover{
8252
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:hover{
8251
8253
  background-color:var(--tab-background-hover);
8252
8254
  border-bottom:var(--tab-border-hover);
8253
8255
  color:var(--tab-font-color-hover);
8254
8256
  }
8255
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:hover[aria-selected=true]{
8257
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:hover[aria-selected=true]{
8256
8258
  border-bottom:var(--tab-border-selected-hover);
8257
8259
  color:var(--tab-font-selected-color);
8258
8260
  }
8259
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:active{
8261
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:active{
8260
8262
  background-color:var(--tab-background-pressed);
8261
8263
  color:var(--tab-font-color-hover);
8262
8264
  }
8263
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da:active[aria-selected=true]{
8265
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51:active[aria-selected=true]{
8264
8266
  color:var(--tab-font-selected-color);
8265
8267
  }
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]{
8268
+ .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
8269
  background-color:var(--tab-background-hover);
8268
8270
  border-bottom:var(--tab-border-focus);
8269
8271
  border-radius:var(--tab-border-radius);
@@ -8272,11 +8274,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
8272
8274
  outline:var(--tab-border-focus-outline-width) solid var(--tab-border-focus-outline-color);
8273
8275
  outline-offset:var(--tab-border-focus-outline-offset);
8274
8276
  }
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]{
8277
+ .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
8278
  border-bottom:var(--tab-border-selected);
8277
8279
  color:var(--tab-font-selected-color);
8278
8280
  }
8279
- .bp_tabs_module_tabsListContainer--9f3da .bp_tabs_module_tabList--9f3da .bp_tabs_module_tab--9f3da[aria-disabled=true]{
8281
+ .bp_tabs_module_tabsListContainer--c5f51 .bp_tabs_module_tabList--c5f51 .bp_tabs_module_tab--c5f51[aria-disabled=true]{
8280
8282
  opacity:.5;
8281
8283
  }
8282
8284
 
@@ -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,
@@ -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.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {