@box/blueprint-web 7.27.1 → 7.28.0

package/lib-esm/index.css

@@ -5121,7 +5121,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   margin-block:var(--space-2);
 }
 
-.bp_side_panel_module_content--26666{
+.bp_side_panel_module_content--c438f{
   background-color:var(--gray-white);
   border-inline-start:var(--border-1) solid var(--border-divider-border);
   display:flex;
@@ -5132,14 +5132,13 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   max-width:100%;
   min-width:320px;
   overflow:hidden;
-  width:360px;
 }
 @media only screen and (max-width: 374px){
-  .bp_side_panel_module_content--26666{
+  .bp_side_panel_module_content--c438f{
     min-width:100%;
   }
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f{
   align-items:center;
   background-color:var(--surface-surface);
   border-bottom:var(--border-1) solid var(--border-divider-border);
@@ -5154,60 +5153,68 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
   word-break:break-word;
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666,.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666.bp_side_panel_module_headerMobile--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f,.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f.bp_side_panel_module_headerMobile--c438f{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-weight:700;
   letter-spacing:.01875rem;
   text-decoration:none;
   text-transform:none;
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666.bp_side_panel_module_headerMobile--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f.bp_side_panel_module_headerMobile--c438f{
   font-size:.9375rem;
   line-height:1.25rem;
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_headerShadow--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_headerShadow--c438f{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_persistentContent--26666{
+.bp_side_panel_module_persistentContent--c438f{
   position:relative;
 }
 
-.bp_side_panel_module_contentAnimatedSlideIn--26666{
+.bp_side_panel_module_contentAnimatedSlideIn--c438f{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideIn--26666;
+  animation-name:bp_side_panel_module_slideIn--c438f;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentAnimatedSlideOut--26666[data-state=closed]{
+.bp_side_panel_module_contentAnimatedSlideOut--c438f[data-state=closed]{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideOut--26666;
+  animation-name:bp_side_panel_module_slideOut--c438f;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_dropShadowContent--26666{
+.bp_side_panel_module_contentNormal--c438f{
+  width:360px;
+}
+
+.bp_side_panel_module_contentLarge--c438f{
+  width:420px;
+}
+
+.bp_side_panel_module_dropShadowContent--c438f{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_content--26666 .bp_side_panel_module_close--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_close--c438f{
   color:var(--gray-65);
   position:absolute;
   right:var(--space-4);
   top:var(--space-5);
 }
 
-.bp_side_panel_module_overlayContent--26666{
+.bp_side_panel_module_overlayContent--c438f{
   box-shadow:var(--dropshadow-3);
   position:fixed;
   right:0;
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlayContent--26666 .bp_side_panel_module_header--26666{
+.bp_side_panel_module_overlayContent--c438f .bp_side_panel_module_header--c438f{
   padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
 }
 
-.bp_side_panel_module_overlay--26666{
+.bp_side_panel_module_overlay--c438f{
   background-color:var(--black-opacity-80);
   bottom:0;
   display:flex;
@@ -5218,20 +5225,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlay--26666 .bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666{
+.bp_side_panel_module_overlay--c438f .bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f{
   padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
 }
 
-.bp_side_panel_module_dropShadowOverlay--26666{
+.bp_side_panel_module_dropShadowOverlay--c438f{
   background-color:initial;
 }
 
-.bp_side_panel_module_scrollableContainer--26666{
+.bp_side_panel_module_scrollableContainer--c438f{
   flex-grow:1;
   overflow-y:auto;
 }
 
-.bp_side_panel_module_footer--26666{
+.bp_side_panel_module_footer--c438f{
   background-color:var(--surface-surface);
   display:flex;
   justify-content:flex-end;
@@ -5241,19 +5248,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_footerShadow--26666{
+.bp_side_panel_module_footerShadow--c438f{
   box-shadow:var(--dropshadow-3-inverse);
 }
 
-.bp_side_panel_module_footerButton--26666{
+.bp_side_panel_module_footerButton--c438f{
   margin-inline-start:var(--space-2);
 }
 
-.bp_side_panel_module_footerButton--26666 + .bp_side_panel_module_footerButton--26666{
+.bp_side_panel_module_footerButton--c438f + .bp_side_panel_module_footerButton--c438f{
   margin-inline-start:var(--space-3);
 }
 
-@keyframes bp_side_panel_module_slideIn--26666{
+@keyframes bp_side_panel_module_slideIn--c438f{
   from{
     inset-inline-end:-100%;
   }
@@ -5261,7 +5268,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
     inset-inline-end:0;
   }
 }
-@keyframes bp_side_panel_module_slideOut--26666{
+@keyframes bp_side_panel_module_slideOut--c438f{
   from{
     inset-inline-end:0;
   }

package/lib-esm/side-panel/side-panel-content.d.ts

@@ -3,7 +3,9 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 /**
  * Contains content to be rendered in the open SidePanel in Overlay view.
  */
-export declare const SidePanelContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & {
+    size?: "medium" | "large" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * Contains content to be rendered in the open SidePanel in Persistent view.
  */

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

@@ -13,9 +13,11 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
   asChild = false,
   children,
   className,
+  size = 'medium',
   ...props
 }, forwardedRef) => {
   const variant = useVariant();
+  const isOverlayVariant = ['overlay', 'dropShadowOverlay', 'interactiveOverlay'].includes(variant);
   const isInteractiveOverlayVariant = variant === 'interactiveOverlay';
   const handleInteractOutside = useCallback(event => {
     if (isInteractiveOverlayVariant) {
@@ -29,9 +31,11 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
       ref: forwardedRef,
       asChild: asChild,
       className: clsx(styles.content, styles.contentAnimatedSlideIn, {
-        [styles.overlayContent]: variant !== 'persistent',
         [styles.contentAnimatedSlideOut]: isInteractiveOverlayVariant,
-        [styles.dropShadowContent]: variant === 'dropShadowOverlay'
+        [styles.contentLarge]: size === 'large',
+        [styles.contentNormal]: size === 'medium',
+        [styles.dropShadowContent]: variant === 'dropShadowOverlay',
+        [styles.overlayContent]: isOverlayVariant
       }, className),
       onInteractOutside: handleInteractOutside,
       children: children
@@ -47,7 +51,7 @@ const SidePanelPersistentContent = /*#__PURE__*/forwardRef(({
   ...props
 }, forwardedRef) => jsx("div", {
   ref: forwardedRef,
-  className: clsx(styles.content, styles.persistentContent, className),
+  className: clsx(styles.content, styles.contentNormal, styles.persistentContent, className),
   ...props,
   children: children
 }));

package/lib-esm/side-panel/side-panel.d.ts

@@ -2,7 +2,9 @@
 import { type SidePanelProps } from './types';
 export declare const SidePanel: ((props: SidePanelProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Close: import("react").ForwardRefExoticComponent<import("./types").SidePanelCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & {
+        size?: "medium" | "large" | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
         PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[] | undefined;

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

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

package/lib-esm/side-panel/types.d.ts

@@ -18,7 +18,13 @@ export type SidePanelPersistentProps = ComponentPropsWithRef<'div'> & {
 };
 export type SidePanelOverlayProps = DialogProps;
 export type SidePanelOverlayComponentProps = ComponentPropsWithRef<'div'> & Pick<DialogPortalProps, 'container'>;
-export type SidePanelContentProps = DialogContentProps;
+export type SidePanelContentProps = DialogContentProps & {
+    /**
+     * The size of the side panel content.
+     * @default "medium"
+     */
+    size?: 'medium' | 'large';
+};
 export type SidePanelPersistentContentProps = ComponentPropsWithRef<'div'>;
 export interface SidePanelCloseProps {
     /** The aria-label for the Close element */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.27.1",
+    "version": "7.28.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "aa5870125c7788a07adcc307775630d30dcaee13",
+    "gitHead": "835475acd8803db00eb4cc44be3abe67304a53fc",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {