@box/blueprint-web 12.78.6 → 12.78.7

package/dist/lib-esm/collapsible/collapsible-section.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PointerChevronUp, PointerChevronDown } from '@box/blueprint-web-assets/icons/Fill';
+import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
-import { forwardRef, useState, useEffect, useCallback } from 'react';
+import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { Slot } from '../primitives/slot.js';
 import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
 import styles from './collapsible-section.module.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 
 const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -31,6 +32,11 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     setCollapsibleSectionOpen(isOpen);
     onOpenChange?.(isOpen);
   }, [onOpenChange]);
+  const icon = useMemo(() => ({
+    up: enableModernizedComponents ? ChevronUp : PointerChevronUp,
+    down: enableModernizedComponents ? ChevronDown : PointerChevronDown,
+    size: enableModernizedComponents ? 'large' : 'x-small'
+  }), [enableModernizedComponents]);
   return jsxs(Collapsible.Root, {
     ...rest,
     ref: forwardedRef,
@@ -46,8 +52,8 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
         children: [headerSlot?.props.children, jsx(IconButton, {
           "aria-label": collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel,
           className: styles.collapsibleSectionHeaderArrow,
-          icon: collapsibleSectionOpen ? PointerChevronUp : PointerChevronDown,
-          size: "x-small",
+          icon: collapsibleSectionOpen ? icon.up : icon.down,
+          size: icon.size,
           type: "button"
         })]
       })

package/dist/lib-esm/collapsible/collapsible-section.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--d6e7f","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--d6e7f","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--d6e7f","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--d6e7f","slideDown":"bp_collapsible_section_module_slideDown--d6e7f","slideUp":"bp_collapsible_section_module_slideUp--d6e7f","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--d6e7f"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--35a18","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--35a18","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--35a18","slideDown":"bp_collapsible_section_module_slideDown--35a18","slideUp":"bp_collapsible_section_module_slideUp--35a18","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--35a18"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -2051,36 +2051,40 @@
   height:var(--icon-button-size-x-small);
   width:var(--icon-button-size-x-small);
 }
-.bp_collapsible_section_module_collapsibleSection--d6e7f[data-modern=false]{
+.bp_collapsible_section_module_collapsibleSection--35a18[data-modern=false]{
+  --collapsible-section-header-padding:var(--space-5);
+  --collapsible-section-body-padding:var(--space-5);
   --collapsible-section-padding:var(--space-5);
   --collapsible-section-border-radius:var(--radius-3);
   --collapsible-section-outline-border-radius:var(--radius-2);
-  --collapsible-section-background-color:var(--surface-surface);
   --collapsible-section-border:var(--border-1) solid var(--border-collapsible-border);
   --collapsible-section-outline-width:var(--border-2);
   --collapsible-section-outline-offset:var(--space-05);
   --collapsible-section-header-focus-color:var(--outline-focus-on-light);
   --collapsible-section-header-background-color:var(--surface-surface);
   --collapsible-section-content-background-color:var(--surface-surface);
+  --collapsible-section-header-expanded-border-bottom:var(--border-1) solid var(--border-collapsible-border);
 }
 
-.bp_collapsible_section_module_collapsibleSection--d6e7f[data-modern=true]{
+.bp_collapsible_section_module_collapsibleSection--35a18[data-modern=true]{
+  --collapsible-section-header-padding:var(--bp-space-050) var(--bp-space-020);
+  --collapsible-section-body-padding:var(--bp-space-040) var(--bp-space-050);
   --collapsible-section-padding:var(--bp-space-050);
   --collapsible-section-border-radius:var(--bp-radius-10);
   --collapsible-section-outline-border-radius:var(--bp-radius-03);
-  --collapsible-section-background-color:var(--bp-surface-surface);
   --collapsible-section-border:var(--bp-border-01) solid var(--bp-border-collapsible-section-border);
   --collapsible-section-outline-width:var(--bp-border-02);
   --collapsible-section-outline-offset:var(--bp-space-005);
   --collapsible-section-header-focus-color:var(--bp-outline-focus-on-light);
-  --collapsible-section-header-background-color:var(--bp-surface-surface);
-  --collapsible-section-content-background-color:var(--bp-surface-surface);
+  --collapsible-section-header-background-color:var(--bp-surface-collapsible-section-surface);
+  --collapsible-section-content-background-color:var(--bp-surface-collapsible-section-surface);
+  --collapsible-section-header-expanded-border-bottom:none;
 }
 
-.bp_collapsible_section_module_collapsibleSection--d6e7f{
+.bp_collapsible_section_module_collapsibleSection--35a18{
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--d6e7f{
+.bp_collapsible_section_module_collapsibleSectionHeader--35a18{
   align-items:center;
   background:var(--collapsible-section-header-background-color);
   border:var(--collapsible-section-border);
@@ -2097,7 +2101,7 @@
           user-select:none;
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--d6e7f:focus::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--35a18:focus::before{
   border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
   border-radius:var(--collapsible-section-outline-border-radius);
   bottom:var(--collapsible-section-outline-offset);
@@ -2107,27 +2111,29 @@
   right:var(--collapsible-section-outline-offset);
   top:var(--collapsible-section-outline-offset);
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--d6e7f[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--d6e7f[aria-expanded=true]::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--35a18[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--35a18[aria-expanded=true]::before{
+  border-bottom:var(--collapsible-section-header-expanded-border-bottom);
   border-end-end-radius:0;
   border-end-start-radius:0;
+  padding-block:var(--collapsible-section-header-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--d6e7f{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18{
   display:block;
   margin-inline-start:var(--collapsible-section-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--d6e7f > svg{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18 > svg{
   vertical-align:middle;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--d6e7f{
+.bp_collapsible_section_module_collapsibleSectionContent--35a18{
   overflow:hidden;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--d6e7f[data-state=open]{
-  animation:bp_collapsible_section_module_slideDown--d6e7f .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--35a18[data-state=open]{
+  animation:bp_collapsible_section_module_slideDown--35a18 .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--d6e7f[data-state=closed]{
-  animation:bp_collapsible_section_module_slideUp--d6e7f .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--35a18[data-state=closed]{
+  animation:bp_collapsible_section_module_slideUp--35a18 .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionBody--d6e7f{
+.bp_collapsible_section_module_collapsibleSectionBody--35a18{
   align-items:center;
   background:var(--collapsible-section-content-background-color);
   border:var(--collapsible-section-border);
@@ -2136,11 +2142,11 @@
   border-top:none;
   display:flex;
   justify-content:space-between;
-  padding-block:var(--collapsible-section-padding);
+  padding-block:var(--collapsible-section-body-padding);
   padding-inline:var(--collapsible-section-padding);
 }
 
-@keyframes bp_collapsible_section_module_slideDown--d6e7f{
+@keyframes bp_collapsible_section_module_slideDown--35a18{
   from{
     height:0;
   }
@@ -2148,7 +2154,7 @@
     height:var(--radix-collapsible-content-height);
   }
 }
-@keyframes bp_collapsible_section_module_slideUp--d6e7f{
+@keyframes bp_collapsible_section_module_slideUp--35a18{
   from{
     height:var(--radix-collapsible-content-height);
   }

package/package.json

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