@box/blueprint-web 12.30.0 → 12.32.0

package/dist/lib-esm/index.css

@@ -6389,7 +6389,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   opacity:.3;
 }
 
-.bp_tabs_module_hiddenWidthSetter--49dca{
+.bp_tabs_module_hiddenWidthSetter--5991e{
   display:block;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -6403,46 +6403,77 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-bold-text-case);
   visibility:hidden;
 }
-.bp_tabs_module_hiddenWidthSetter--49dca > *{
+.bp_tabs_module_hiddenWidthSetter--5991e > *{
   visibility:hidden;
 }
 
-.bp_tabs_module_contentSwitchTabList--49dca{
-  background:var(--surface-contentswitcher-surface);
-  border-radius:var(--radius-7);
+.bp_tabs_module_contentSwitchTabList--5991e[data-modern=false]{
+  --content-switch-tab-list-gap:var(--space-1);
+  --content-switch-tab-list-padding:var(--space-1);
+  --content-switch-tab-list-background:var(--surface-contentswitcher-surface);
+  --content-switch-tab-list-border-radius:var(--radius-7);
+  --content-switch-tab-height:var(--size-8);
+  --content-switch-tab-border-radius:var(--radius-6);
+  --content-switch-tab-padding-inline:var(--space-4);
+  --content-switch-tab-selected-color:var(--text-text-on-light);
+  --content-switch-tab-selected-background:var(--surface-cta-surface-secondary);
+  --content-switch-tab-selected-box-shadow:0 0 0 var(--border-1) var(--gray-50);
+  --content-switch-tab-focus-box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+  --content-switch-tab-hover-background:var(--surface-surface-hover);
+  --content-switch-tab-active-background:var(--surface-cta-surface-secondary-pressed);
+}
+
+.bp_tabs_module_contentSwitchTabList--5991e[data-modern=true]{
+  --content-switch-tab-list-gap:var(--bp-space-010);
+  --content-switch-tab-list-padding:var(--bp-space-010);
+  --content-switch-tab-list-background:var(--bp-gray-10);
+  --content-switch-tab-list-border-radius:var(--bp-radius-10);
+  --content-switch-tab-height:var(--bp-size-080);
+  --content-switch-tab-border-radius:var(--bp-radius-10);
+  --content-switch-tab-padding-inline:var(--bp-space-040);
+  --content-switch-tab-selected-color:var(--bp-text-text-on-light);
+  --content-switch-tab-selected-background:var(--bp-gray-white);
+  --content-switch-tab-selected-box-shadow:0 0 0 var(--bp-border-01) var(--bp-gray-50);
+  --content-switch-tab-focus-box-shadow:0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
+  --content-switch-tab-hover-background:var(--bp-gray-05);
+}
+
+.bp_tabs_module_contentSwitchTabList--5991e{
+  background:var(--content-switch-tab-list-background);
+  border-radius:var(--content-switch-tab-list-border-radius);
   display:grid;
-  gap:var(--space-1);
+  gap:var(--content-switch-tab-list-gap);
   grid-auto-columns:1fr;
   grid-auto-flow:column;
   min-width:-moz-fit-content;
   min-width:fit-content;
-  padding:var(--space-1);
+  padding:var(--content-switch-tab-list-padding);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca{
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e{
   align-items:center;
   background:#0000;
   border:none;
-  border-radius:var(--radius-6);
+  border-radius:var(--content-switch-tab-border-radius);
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  height:var(--size-8);
+  height:var(--content-switch-tab-height);
   justify-content:center;
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   outline:none;
-  padding-inline:var(--space-4);
+  padding-inline:var(--content-switch-tab-padding-inline);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   white-space:nowrap;
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca[aria-selected=true]{
-  background:var(--surface-cta-surface-secondary);
-  box-shadow:0 0 0 var(--border-1) var(--gray-50);
-  color:var(--text-text-on-light);
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e[aria-selected=true]{
+  background:var(--content-switch-tab-selected-background);
+  box-shadow:var(--content-switch-tab-selected-box-shadow);
+  color:var(--content-switch-tab-selected-color);
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -6452,44 +6483,44 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca:not([aria-disabled=true])[data-focus-visible]{
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e:not([aria-disabled=true])[data-focus-visible]{
   border-color:#0000;
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+  box-shadow:var(--content-switch-tab-focus-box-shadow);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca:not([aria-disabled=true]):hover{
-  background:var(--surface-surface-hover);
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e:not([aria-disabled=true]):hover{
+  background:var(--content-switch-tab-hover-background);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca:not([aria-disabled=true]):active{
-  background:var(--surface-cta-surface-secondary-pressed);
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e:not([aria-disabled=true]):active{
+  background:var(--content-switch-tab-active-background);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca[aria-disabled=true]{
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e[aria-disabled=true]{
   opacity:.3;
   pointer-events:none;
 }
 
-.bp_tabs_module_tabsListContainer--49dca{
+.bp_tabs_module_tabsListContainer--5991e{
   height:calc(var(--size-10) + (var(--border-3) + 1px)*2);
   overflow-y:hidden;
   scroll-behavior:smooth;
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e{
   display:flex;
   overflow-x:auto;
   padding:calc(var(--border-3) + 1px);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tabSeparator--49dca{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tabSeparator--5991e{
   border-bottom:var(--border-2) solid var(--border-tab-border);
   min-width:var(--space-4);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tabSeparator--49dca:last-child{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tabSeparator--5991e:last-child{
   display:none;
 }
 @media only screen and (max-width: 1023px){
-  .bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tabSeparator--49dca{
+  .bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tabSeparator--5991e{
     min-width:calc(var(--border-3) + 1px);
   }
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e{
   background:var(--background-background);
   border-style:none;
   border-bottom:var(--border-2) solid var(--border-tab-border);
@@ -6510,7 +6541,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
   z-index:2;
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[aria-selected=true]{
   border-bottom:var(--border-2) solid var(--border-tab-border-selected);
   color:var(--text-cta-link);
   font-family:var(--body-default-bold-font-family);
@@ -6522,21 +6553,21 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:hover{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:hover{
   background-color:var(--surface-tab-surface-hover);
   color:var(--text-text-on-light-secondary-hover);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:hover[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:hover[aria-selected=true]{
   color:var(--text-cta-link);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:active{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:active{
   background-color:var(--surface-tab-surface-pressed);
   color:var(--text-text-on-light-secondary-hover);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:active[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:active[aria-selected=true]{
   color:var(--text-cta-link);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:focus-visible,.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[data-focus-visible]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:focus-visible,.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[data-focus-visible]{
   background-color:var(--surface-tab-surface-hover);
   border-radius:var(--radius-05);
   box-shadow:inset 0 0 0 1px #fff;
@@ -6544,10 +6575,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   outline:var(--border-3) solid var(--outline-focus-on-light);
   outline-offset:1px;
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[data-focus-visible][aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[data-focus-visible][aria-selected=true]{
   color:var(--text-cta-link);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[aria-disabled=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[aria-disabled=true]{
   opacity:.5;
 }
 
@@ -7084,52 +7115,76 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_styles_module_splitButton--2a32d{
+.bp_styles_module_splitButton--f7401[data-modern=false]{
+  --split-button-left-width:100%;
+  --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
+  --split-button-left-skip-right-border-border-inline-end-color:#0000;
+  --split-button-left-skip-right-border-focus-visible-border-inline-end-color:var(--border-cta-border-secondary-hover);
+  --split-button-right-element-padding:0 var(--size-4);
+  --split-button-right-svg-width:var(--size-3);
+  --split-button-right-svg-height:var(--size-3);
+}
+
+.bp_styles_module_splitButton--f7401[data-modern=true]{
+  --split-button-left-width:100%;
+  --split-button-left-gap-margin-inline-end:calc(var(--bp-space-005)/2);
+  --split-button-left-skip-right-border-border-inline-end-color:#0000;
+  --split-button-left-skip-right-border-focus-visible-border-inline-end-color:var(--bp-border-cta-border-secondary-hover);
+  --split-button-right-element-padding:var(--bp-size-030) var(--bp-size-040) var(--bp-size-030) var(--bp-size-030);
+  --split-button-right-svg-width:var(--bp-size-030);
+  --split-button-right-svg-height:var(--bp-size-030);
+}
+
+.bp_styles_module_dropdown--f7401[data-modern=false],.bp_styles_module_dropdown--f7401[data-modern=true]{
+  --split-button-dropdown-min-width:160px;
+}
+
+.bp_styles_module_splitButton--f7401{
   display:inline-flex;
   position:relative;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401{
   border-bottom-right-radius:0;
   border-top-right-radius:0;
-  width:100%;
+  width:var(--split-button-left-width);
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_gap--2a32d{
-  margin-inline-end:1px;
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401.bp_styles_module_gap--f7401{
+  margin-inline-end:var(--split-button-left-gap-margin-inline-end);
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d:focus-visible{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_skipRightBorder--2a32d{
-  border-inline-end-color:#0000 !important;
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401.bp_styles_module_skipRightBorder--f7401{
+  border-inline-end-color:var(--split-button-left-skip-right-border-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_skipRightBorder--2a32d:focus-visible{
-  border-inline-end-color:var(--border-cta-border-secondary-hover) !important;
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401.bp_styles_module_skipRightBorder--f7401:focus-visible{
+  border-inline-end-color:var(--split-button-left-skip-right-border-focus-visible-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_loadingButton--2a32d{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_loadingButton--f7401{
   width:100%;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonRight--f7401{
   border-end-start-radius:0;
   border-start-start-radius:0;
-  padding:0 var(--size-4) !important;
+  padding:var(--split-button-right-element-padding) !important;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d svg{
-  height:var(--size-3);
-  width:var(--size-3);
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonRight--f7401 svg{
+  height:var(--split-button-right-svg-height);
+  width:var(--split-button-right-svg-width);
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d:focus-visible{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonRight--f7401:focus-visible{
   z-index:1;
 }
 
-.bp_styles_module_invisible--2a32d{
+.bp_styles_module_invisible--f7401{
   left:0;
   position:absolute;
   top:0;
   visibility:hidden;
 }
 
-.bp_styles_module_dropdown--2a32d{
-  min-width:160px;
+.bp_styles_module_dropdown--f7401{
+  min-width:var(--split-button-dropdown-min-width);
 }
 
 .bp_switch_module_option--1f7a2{

package/dist/lib-esm/primitives/tabs/tab-list.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { TabList as TabList$1 } from '@ariakit/react';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './tabs.module.js';
 import { useTabs } from './use-tabs.js';
 
@@ -13,6 +14,9 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
     ...rest
   } = props;
   const tab = useTabs();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   if (!tab) {
     throw new Error('TabList must be wrapped in a Tabs component');
   }
@@ -22,6 +26,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
       ...rest,
       ref: ref,
       className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
+      "data-modern": enableModernizedComponents,
       store: tab
     })
   });

package/dist/lib-esm/primitives/tabs/tabs.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--49dca","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--49dca","contentSwitchTab":"bp_tabs_module_contentSwitchTab--49dca","tabsListContainer":"bp_tabs_module_tabsListContainer--49dca","tabList":"bp_tabs_module_tabList--49dca","tabSeparator":"bp_tabs_module_tabSeparator--49dca","tab":"bp_tabs_module_tab--49dca"};
+var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--5991e","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--5991e","contentSwitchTab":"bp_tabs_module_contentSwitchTab--5991e","tabsListContainer":"bp_tabs_module_tabsListContainer--5991e","tabList":"bp_tabs_module_tabList--5991e","tabSeparator":"bp_tabs_module_tabSeparator--5991e","tab":"bp_tabs_module_tab--5991e"};
 
 export { styles as default };

package/dist/lib-esm/split-button/split-button.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useState, useRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Button } from '../button/button.js';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 import { useControllableState } from '../utils/useControllableState.js';
@@ -44,6 +45,9 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onChange: onOpenChange,
     defaultProp: defaultOpen
   });
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const localLeftRef = useRef(null);
   const onLeftButtonMountCallback = useCallback(button => {
     if (button?.offsetWidth) {
@@ -83,6 +87,7 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     open: open,
     children: [jsxs("span", {
       className: styles.splitButton,
+      "data-modern": enableModernizedComponents,
       children: [jsx(Button, {
         ...rest,
         ref: onLeftButtonMountCallback,
@@ -110,6 +115,7 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }), jsx(DropdownMenu.Content, {
       className: styles.dropdown,
       container: container,
+      "data-modern": enableModernizedComponents,
       ...alignOpts,
       children: children
     })]

package/dist/lib-esm/split-button/styles.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"splitButton":"bp_styles_module_splitButton--2a32d","splitButtonLeft":"bp_styles_module_splitButtonLeft--2a32d","gap":"bp_styles_module_gap--2a32d","skipRightBorder":"bp_styles_module_skipRightBorder--2a32d","loadingButton":"bp_styles_module_loadingButton--2a32d","splitButtonRight":"bp_styles_module_splitButtonRight--2a32d","invisible":"bp_styles_module_invisible--2a32d","dropdown":"bp_styles_module_dropdown--2a32d"};
+var styles = {"splitButton":"bp_styles_module_splitButton--f7401","dropdown":"bp_styles_module_dropdown--f7401","splitButtonLeft":"bp_styles_module_splitButtonLeft--f7401","gap":"bp_styles_module_gap--f7401","skipRightBorder":"bp_styles_module_skipRightBorder--f7401","loadingButton":"bp_styles_module_loadingButton--f7401","splitButtonRight":"bp_styles_module_splitButtonRight--f7401","invisible":"bp_styles_module_invisible--f7401"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.30.0",
+    "version": "12.32.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {