@box/blueprint-web 12.67.0 → 12.68.1

package/dist/lib-esm/index.css

@@ -8322,9 +8322,69 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transform:translateY(-50%);
 }
 
-.bp_side_panel_module_content--114ef{
-  background-color:var(--gray-white);
-  border-inline-start:var(--border-1) solid var(--border-divider-border);
+.bp_side_panel_module_content--226ef[data-modern=false]{
+  --side-panel-border:var(--border-1) solid var(--border-divider-border);
+  --side-panel-background:var(--gray-white);
+  --side-panel-header-padding:var(--space-5) var(--space-4);
+  --side-panel-header-background:var(--surface-surface);
+  --side-panel-header-border:var(--border-1) solid var(--border-divider-border);
+  --side-panel-header-shadow:var(--dropshadow-3);
+  --side-panel-content-width-normal:360px;
+  --side-panel-content-width-large:420px;
+  --side-panel-content-shadow:var(--dropshadow-3);
+  --side-panel-close-color:var(--gray-65);
+  --side-panel-close-top-small:var(--space-4);
+  --side-panel-close-top:var(--space-5);
+  --side-panel-close-right:var(--space-4);
+  --side-panel-overlay-header-padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
+  --side-panel-footer-padding:var(--space-5) var(--space-4);
+  --side-panel-footer-background:var(--surface-surface);
+  --side-panel-footer-shadow:var(--dropshadow-3-inverse);
+  --side-panel-footer-button-margin:var(--space-2);
+  --side-panel-footer-button-margin-plus:var(--space-3);
+  --side-panel-footer-scroll-bg-color:var(--surface-surface);
+  --side-panel-footer-scroll-backdrop-filter:none;
+  --side-panel-header-scroll-bg-color:var(--surface-surface);
+  --side-panel-header-scroll-backdrop-filter:none;
+}
+
+.bp_side_panel_module_content--226ef[data-modern=true]{
+  --side-panel-border:var(--bp-border-01) solid var(--bp-border-divider-border);
+  --side-panel-background:var(--bp-surface-side-panel-surface);
+  --side-panel-header-padding:var(--bp-space-040) var(--bp-space-020);
+  --side-panel-header-background:var(--bp-surface-side-panel-surface);
+  --side-panel-header-border:var(--bp-border-01) solid var(--bp-border-divider-border);
+  --side-panel-header-shadow:none;
+  --side-panel-content-width-normal:360px;
+  --side-panel-content-width-large:420px;
+  --side-panel-content-shadow:var(--dropshadow-3);
+  --side-panel-close-color:var(--bp-surface-cta-surface-icon);
+  --side-panel-close-top-small:var(--bp-space-040);
+  --side-panel-close-top:var(--bp-space-040);
+  --side-panel-close-right:var(--bp-space-040);
+  --side-panel-overlay-header-padding:var(--bp-space-050) var(--bp-space-030) var(--bp-space-050) var(--bp-space-040);
+  --side-panel-footer-padding:var(--bp-space-050) var(--bp-space-040);
+  --side-panel-footer-background:var(--bp-surface-side-panel-surface);
+  --side-panel-footer-shadow:none;
+  --side-panel-footer-button-margin:var(--bp-space-020);
+  --side-panel-footer-button-margin-plus:var(--bp-space-030);
+  --side-panel-footer-scroll-bg-color:var(--bp-white-opacity-90);
+  --side-panel-footer-scroll-backdrop-filter:blur(4px);
+  --side-panel-header-scroll-bg-color:var(--bp-white-opacity-90);
+  --side-panel-header-scroll-backdrop-filter:blur(4px);
+}
+
+.bp_side_panel_module_overlay--226ef[data-modern=false]{
+  --side-panel-overlay-background:var(--overlay-sidepanel-overlay);
+}
+
+.bp_side_panel_module_overlay--226ef[data-modern=true]{
+  --side-panel-overlay-background:var(--bp-overlay-side-panel-overlay);
+}
+
+.bp_side_panel_module_content--226ef{
+  background-color:var(--side-panel-background);
+  border-inline-start:var(--side-panel-border);
   display:flex;
   flex-direction:column;
   flex-shrink:0;
@@ -8335,95 +8395,101 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   overflow-y:auto;
 }
 @media (width > 374px){
-  .bp_side_panel_module_content--114ef{
+  .bp_side_panel_module_content--226ef{
     min-width:320px;
     overflow:hidden;
   }
 }
-.bp_side_panel_module_content--114ef .bp_side_panel_module_header--114ef{
+.bp_side_panel_module_content--226ef .bp_side_panel_module_header--226ef{
   align-items:center;
-  background-color:var(--surface-surface);
-  border-bottom:var(--border-1) solid var(--border-divider-border);
+  background-color:var(--side-panel-header-background);
+  border-bottom:var(--side-panel-header-border);
   display:flex;
   justify-content:space-between;
-  padding:var(--space-5) var(--space-4);
+  padding:var(--side-panel-header-padding);
   transition-duration:.2s;
   transition-property:box-shadow;
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
   word-break:break-word;
 }
-.bp_side_panel_module_content--114ef .bp_side_panel_module_headerShadow--114ef{
-  box-shadow:var(--dropshadow-3);
+.bp_side_panel_module_content--226ef .bp_side_panel_module_headerShadow--226ef{
+  backdrop-filter:var(--side-panel-header-scroll-backdrop-filter);
+  background-color:var(--side-panel-header-scroll-bg-color);
+  box-shadow:var(--side-panel-header-shadow);
+  left:0;
+  position:absolute;
+  right:0;
+  top:0;
 }
 
-.bp_side_panel_module_scrollableContainer--114ef{
+.bp_side_panel_module_scrollableContainer--226ef{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_side_panel_module_scrollableContainer--114ef{
+  .bp_side_panel_module_scrollableContainer--226ef{
     overflow-y:auto;
   }
 }
 
-.bp_side_panel_module_persistentContent--114ef{
+.bp_side_panel_module_persistentContent--226ef{
   overflow:hidden;
   position:relative;
 }
-.bp_side_panel_module_persistentContent--114ef .bp_side_panel_module_scrollableContainer--114ef{
+.bp_side_panel_module_persistentContent--226ef .bp_side_panel_module_scrollableContainer--226ef{
   flex-grow:1;
   overflow-y:auto;
 }
 
-.bp_side_panel_module_contentAnimatedSlideIn--114ef{
+.bp_side_panel_module_contentAnimatedSlideIn--226ef{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideIn--114ef;
+  animation-name:bp_side_panel_module_slideIn--226ef;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentAnimatedSlideOut--114ef[data-state=closed]{
+.bp_side_panel_module_contentAnimatedSlideOut--226ef[data-state=closed]{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideOut--114ef;
+  animation-name:bp_side_panel_module_slideOut--226ef;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentNormal--114ef{
-  width:360px;
+.bp_side_panel_module_contentNormal--226ef{
+  width:var(--side-panel-content-width-normal);
 }
 
-.bp_side_panel_module_contentLarge--114ef{
-  width:420px;
+.bp_side_panel_module_contentLarge--226ef{
+  width:var(--side-panel-content-width-large);
 }
 
-.bp_side_panel_module_dropShadowContent--114ef{
-  box-shadow:var(--dropshadow-3);
+.bp_side_panel_module_dropShadowContent--226ef{
+  box-shadow:var(--side-panel-content-shadow);
 }
 
-.bp_side_panel_module_content--114ef .bp_side_panel_module_close--114ef{
-  color:var(--gray-65);
+.bp_side_panel_module_content--226ef .bp_side_panel_module_close--226ef{
+  color:var(--side-panel-close-color);
   position:fixed;
-  right:var(--space-4);
-  top:var(--space-4);
+  right:var(--side-panel-close-right);
+  top:var(--side-panel-close-top-small);
 }
 @media (width > 374px){
-  .bp_side_panel_module_content--114ef .bp_side_panel_module_close--114ef{
+  .bp_side_panel_module_content--226ef .bp_side_panel_module_close--226ef{
     position:absolute;
-    top:var(--space-5);
+    top:var(--side-panel-close-top);
   }
 }
 
-.bp_side_panel_module_overlayContent--114ef{
-  box-shadow:var(--dropshadow-3);
+.bp_side_panel_module_overlayContent--226ef{
+  box-shadow:var(--side-panel-content-shadow);
   position:fixed;
   right:0;
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlayContent--114ef .bp_side_panel_module_header--114ef{
-  padding:var(--space-5) var(--space-14) var(--space-5) var(--space-4);
+.bp_side_panel_module_overlayContent--226ef .bp_side_panel_module_header--226ef{
+  padding:var(--side-panel-overlay-header-padding);
 }
 
-.bp_side_panel_module_overlay--114ef{
-  background-color:var(--overlay-sidepanel-overlay);
+.bp_side_panel_module_overlay--226ef{
+  background-color:var(--side-panel-overlay-background);
   bottom:0;
   display:flex;
   left:0;
@@ -8433,37 +8499,43 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlay--114ef .bp_side_panel_module_content--114ef .bp_side_panel_module_header--114ef{
-  padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
+.bp_side_panel_module_overlay--226ef .bp_side_panel_module_content--226ef .bp_side_panel_module_header--226ef{
+  padding:var(--side-panel-overlay-header-padding);
 }
 
-.bp_side_panel_module_dropShadowOverlay--114ef{
+.bp_side_panel_module_dropShadowOverlay--226ef{
   background-color:initial;
 }
 
-.bp_side_panel_module_footer--114ef{
-  background-color:var(--surface-surface);
+.bp_side_panel_module_footer--226ef{
+  background-color:var(--side-panel-footer-background);
   display:flex;
   justify-content:flex-end;
-  padding:var(--space-5) var(--space-4);
+  padding:var(--side-panel-footer-padding);
   transition-duration:.2s;
   transition-property:box-shadow;
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_footerShadow--114ef{
-  box-shadow:var(--dropshadow-3-inverse);
+.bp_side_panel_module_footerShadow--226ef{
+  backdrop-filter:var(--side-panel-footer-scroll-backdrop-filter);
+  background-color:var(--side-panel-footer-scroll-bg-color);
+  bottom:0;
+  box-shadow:var(--side-panel-footer-shadow);
+  left:0;
+  position:absolute;
+  right:0;
 }
 
-.bp_side_panel_module_footerButton--114ef{
-  margin-inline-start:var(--space-2);
+.bp_side_panel_module_footerButton--226ef{
+  margin-inline-start:var(--side-panel-footer-button-margin);
 }
 
-.bp_side_panel_module_footerButton--114ef + .bp_side_panel_module_footerButton--114ef{
-  margin-inline-start:var(--space-3);
+.bp_side_panel_module_footerButton--226ef + .bp_side_panel_module_footerButton--226ef{
+  margin-inline-start:var(--side-panel-footer-button-margin-plus);
 }
 
-@keyframes bp_side_panel_module_slideIn--114ef{
+@keyframes bp_side_panel_module_slideIn--226ef{
   from{
     inset-inline-end:-100%;
   }
@@ -8471,7 +8543,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
     inset-inline-end:0;
   }
 }
-@keyframes bp_side_panel_module_slideOut--114ef{
+@keyframes bp_side_panel_module_slideOut--226ef{
   from{
     inset-inline-end:0;
   }

package/dist/lib-esm/side-panel/side-panel-content.js

@@ -3,6 +3,7 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 import { clsx } from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 
@@ -24,6 +25,9 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
       event.preventDefault();
     }
   }, [isInteractiveOverlayVariant]);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(FocusScope, {
     trapped: !isInteractiveOverlayVariant,
     children: jsx(RadixDialog.Content, {
@@ -37,6 +41,7 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
         [styles.dropShadowContent]: variant === 'dropShadowOverlay',
         [styles.overlayContent]: isOverlayVariant
       }, className),
+      "data-modern": enableModernizedComponents,
       onInteractOutside: handleInteractOutside,
       children: children
     })
@@ -49,11 +54,17 @@ const SidePanelPersistentContent = /*#__PURE__*/forwardRef(({
   children,
   className,
   ...props
-}, forwardedRef) => jsx("div", {
-  ref: forwardedRef,
-  className: clsx(styles.content, styles.contentNormal, styles.persistentContent, className),
-  ...props,
-  children: children
-}));
+}, forwardedRef) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsx("div", {
+    ref: forwardedRef,
+    className: clsx(styles.content, styles.contentNormal, styles.persistentContent, className),
+    "data-modern": enableModernizedComponents,
+    ...props,
+    children: children
+  });
+});
 
 export { SidePanelContent, SidePanelPersistentContent };

package/dist/lib-esm/side-panel/side-panel-overlay.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 
@@ -16,6 +17,9 @@ const SidePanelOverlay = /*#__PURE__*/forwardRef(({
   ...props
 }, forwardedRef) => {
   const variant = useVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(RadixDialog.Portal, {
     container: container,
     children: variant === 'interactiveOverlay' ? children : jsx(RadixDialog.Overlay, {
@@ -23,6 +27,7 @@ const SidePanelOverlay = /*#__PURE__*/forwardRef(({
       className: clsx(styles.overlay, {
         [styles.dropShadowOverlay]: variant === 'dropShadowOverlay'
       }, className),
+      "data-modern": enableModernizedComponents,
       ...props,
       children: children
     })

package/dist/lib-esm/side-panel/side-panel.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_side_panel_module_content--114ef","header":"bp_side_panel_module_header--114ef","headerShadow":"bp_side_panel_module_headerShadow--114ef","scrollableContainer":"bp_side_panel_module_scrollableContainer--114ef","persistentContent":"bp_side_panel_module_persistentContent--114ef","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--114ef","slideIn":"bp_side_panel_module_slideIn--114ef","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--114ef","slideOut":"bp_side_panel_module_slideOut--114ef","contentNormal":"bp_side_panel_module_contentNormal--114ef","contentLarge":"bp_side_panel_module_contentLarge--114ef","dropShadowContent":"bp_side_panel_module_dropShadowContent--114ef","close":"bp_side_panel_module_close--114ef","overlayContent":"bp_side_panel_module_overlayContent--114ef","overlay":"bp_side_panel_module_overlay--114ef","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--114ef","footer":"bp_side_panel_module_footer--114ef","footerShadow":"bp_side_panel_module_footerShadow--114ef","footerButton":"bp_side_panel_module_footerButton--114ef"};
+var styles = {"content":"bp_side_panel_module_content--226ef","overlay":"bp_side_panel_module_overlay--226ef","header":"bp_side_panel_module_header--226ef","headerShadow":"bp_side_panel_module_headerShadow--226ef","scrollableContainer":"bp_side_panel_module_scrollableContainer--226ef","persistentContent":"bp_side_panel_module_persistentContent--226ef","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--226ef","slideIn":"bp_side_panel_module_slideIn--226ef","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--226ef","slideOut":"bp_side_panel_module_slideOut--226ef","contentNormal":"bp_side_panel_module_contentNormal--226ef","contentLarge":"bp_side_panel_module_contentLarge--226ef","dropShadowContent":"bp_side_panel_module_dropShadowContent--226ef","close":"bp_side_panel_module_close--226ef","overlayContent":"bp_side_panel_module_overlayContent--226ef","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--226ef","footer":"bp_side_panel_module_footer--226ef","footerShadow":"bp_side_panel_module_footerShadow--226ef","footerButton":"bp_side_panel_module_footerButton--226ef"};
 
 export { styles as default };

package/package.json

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