@box/blueprint-web 17.17.0 → 17.18.0

package/dist/lib-esm/accordion/accordion.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
 import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
@@ -22,7 +21,7 @@ import styles from './accordion.module.js';
 const Root = props => {
   return jsx(RadixAccordion.Root, {
     ...props,
-    className: styles.accordion 
+    className: styles.accordion
   });
 };
 const Item = props => {
@@ -39,7 +38,6 @@ const Item = props => {
     return jsx("div", {
       ...rest,
       className: accordionItemClasses,
-      "data-modern": 'true' ,
       children: jsx("button", {
         "aria-label": loadingAriaLabel,
         className: styles.accordionTrigger,
@@ -55,7 +53,6 @@ const Item = props => {
     return jsx("div", {
       ...rest,
       className: accordionItemClasses,
-      "data-modern": 'true' ,
       children: jsx("div", {
         className: clsx({
           [styles.accordionFixedContent]: Boolean(children)
@@ -87,7 +84,7 @@ const Item = props => {
     "aria-hidden": "true",
     className: styles.accordionTriggerIcon,
     color: "var(--bp-icon-icon-on-light-secondary)"
-  }) ;
+  });
   const handleChevronClick = () => {
     triggerRef.current?.click();
   };
@@ -97,7 +94,6 @@ const Item = props => {
       [styles.highlighted]: highlighted
     }),
     "data-expanded-line-clamp": expandedLineClamp,
-    "data-modern": 'true' ,
     // The clamp is declared on the descendant title, which cannot read this item's
     // attribute, so the value is handed down through an inherited custom property.
     style: expandedLineClamp === undefined ? itemRest.style : {

package/dist/lib-esm/accordion/accordion.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionItem":"bp_accordion_module_accordionItem--a56e0","accordionContent":"bp_accordion_module_accordionContent--a56e0","accordionContentLayout":"bp_accordion_module_accordionContentLayout--a56e0","accordion":"bp_accordion_module_accordion--a56e0","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--a56e0","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--a56e0","highlighted":"bp_accordion_module_highlighted--a56e0","accordionFixedContent":"bp_accordion_module_accordionFixedContent--a56e0","accordionHeader":"bp_accordion_module_accordionHeader--a56e0","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--a56e0","accordionStartElement":"bp_accordion_module_accordionStartElement--a56e0","accordionStartElementFramed":"bp_accordion_module_accordionStartElementFramed--a56e0","accordionStartElementFramedDefault":"bp_accordion_module_accordionStartElementFramedDefault--a56e0","accordionStartElementFramedBox":"bp_accordion_module_accordionStartElementFramedBox--a56e0","accordionStartElementFramedForms":"bp_accordion_module_accordionStartElementFramedForms--a56e0","accordionStartElementFramedDocgen":"bp_accordion_module_accordionStartElementFramedDocgen--a56e0","accordionStartElementFramedSign":"bp_accordion_module_accordionStartElementFramedSign--a56e0","accordionTitleContent":"bp_accordion_module_accordionTitleContent--a56e0","accordionTitleText":"bp_accordion_module_accordionTitleText--a56e0","accordionSubtitle":"bp_accordion_module_accordionSubtitle--a56e0","accordionSubtitleIcon":"bp_accordion_module_accordionSubtitleIcon--a56e0","accordionSubtitleText":"bp_accordion_module_accordionSubtitleText--a56e0","accordionEndText":"bp_accordion_module_accordionEndText--a56e0","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--a56e0","accordionSlot":"bp_accordion_module_accordionSlot--a56e0","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--a56e0","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--a56e0","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--a56e0","bgOnly":"bp_accordion_module_bgOnly--a56e0","withIcon":"bp_accordion_module_withIcon--a56e0","accordionTrigger":"bp_accordion_module_accordionTrigger--a56e0","disabled":"bp_accordion_module_disabled--a56e0","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--a56e0"};
+var styles = {"accordion":"bp_accordion_module_accordion--d6eaf","accordionItem":"bp_accordion_module_accordionItem--d6eaf","accordionStartElementFramed":"bp_accordion_module_accordionStartElementFramed--d6eaf","accordionStartElementFramedDefault":"bp_accordion_module_accordionStartElementFramedDefault--d6eaf","accordionStartElementFramedBox":"bp_accordion_module_accordionStartElementFramedBox--d6eaf","accordionStartElementFramedForms":"bp_accordion_module_accordionStartElementFramedForms--d6eaf","accordionStartElementFramedDocgen":"bp_accordion_module_accordionStartElementFramedDocgen--d6eaf","accordionStartElementFramedSign":"bp_accordion_module_accordionStartElementFramedSign--d6eaf","accordionTitleContent":"bp_accordion_module_accordionTitleContent--d6eaf","accordionTitleText":"bp_accordion_module_accordionTitleText--d6eaf","accordionSubtitleText":"bp_accordion_module_accordionSubtitleText--d6eaf","accordionEndText":"bp_accordion_module_accordionEndText--d6eaf","accordionContentLayout":"bp_accordion_module_accordionContentLayout--d6eaf","accordionContent":"bp_accordion_module_accordionContent--d6eaf","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--d6eaf","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--d6eaf","accordionFixedContent":"bp_accordion_module_accordionFixedContent--d6eaf","accordionHeader":"bp_accordion_module_accordionHeader--d6eaf","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--d6eaf","accordionStartElement":"bp_accordion_module_accordionStartElement--d6eaf","accordionSubtitle":"bp_accordion_module_accordionSubtitle--d6eaf","accordionSubtitleIcon":"bp_accordion_module_accordionSubtitleIcon--d6eaf","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--d6eaf","accordionSlot":"bp_accordion_module_accordionSlot--d6eaf","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--d6eaf","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--d6eaf","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--d6eaf","bgOnly":"bp_accordion_module_bgOnly--d6eaf","withIcon":"bp_accordion_module_withIcon--d6eaf","accordionTrigger":"bp_accordion_module_accordionTrigger--d6eaf","disabled":"bp_accordion_module_disabled--d6eaf","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--d6eaf","highlighted":"bp_accordion_module_highlighted--d6eaf"};
 
 export { styles as default };

package/dist/lib-esm/accordion/types.d.ts

@@ -2,7 +2,7 @@ import { type AccordionMultipleProps, type AccordionSingleProps, type AccordionI
 import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
 export type AccordionIconComponent = FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
-/** Tint for the optional framed start-of-row icon (modernized items only). */
+/** Tint for the optional framed start-of-row icon. */
 export type StartElementBackgroundVariant = 'default' | 'box' | 'forms' | 'docgen' | 'sign';
 /**
  * Mutually-exclusive start-of-row slot. Use either `startIcon` (preferred,
@@ -123,18 +123,16 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * - `sign`   – `brand-sign-tertiary` (#E5EBF2) background, `dark-blue-100` (#003C84) icon
      *
      * Has no effect unless `startIcon` (or the legacy `startElement`) is
-     * also provided. Only applies to modernized accordion items.
+     * also provided.
      */
     startElementBackgroundColor?: StartElementBackgroundVariant;
     /**
      * Optional supplemental text displayed below the title in the header.
-     * Only applies to modernized accordion items.
      */
     subtitle?: string;
     /**
      * Optional decorative icon displayed before the subtitle text.
      * Has no effect unless `subtitle` is also provided.
-     * Only applies to modernized accordion items.
      */
     subtitleIcon?: React.ReactNode;
     /**
@@ -142,7 +140,6 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * expanded to visually indicate it is the active/selected item. The border
      * radius of the inner header container is automatically adjusted to stay
      * flush with the border's inner edge, including the focus ring.
-     * Only applies to modernized accordion items.
      */
     highlighted?: boolean;
 } & HeaderSlotProps & StartSlotProps;

package/dist/lib-esm/card/card.js

@@ -17,7 +17,6 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.card, elevationToken && styles[elevationToken], className),
-    "data-modern": 'true' ,
     children: children
   });
 });

package/dist/lib-esm/card/card.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--65268","dropshadow-1":"bp_card_module_dropshadow-1--65268","dropshadow-3":"bp_card_module_dropshadow-3--65268"};
+var styles = {"card":"bp_card_module_card--519df","dropshadow-1":"bp_card_module_dropshadow-1--519df","dropshadow-3":"bp_card_module_dropshadow-3--519df"};
 
 export { styles as default };

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
-import { ChevronDown, ChevronUp, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
+import { ChevronDown, ChevronRight, ChevronUp } from '@box/blueprint-web-assets/icons/Medium';
 import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
@@ -10,6 +9,11 @@ import { Slot } from '../primitives/slot.js';
 import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
 import styles from './collapsible-section.module.js';
 
+const sectionToggleIcons = {
+  up: ChevronUp,
+  down: ChevronDown,
+  size: 'large'
+};
 const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
@@ -21,7 +25,6 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     variant = 'default',
     ...rest
   } = props;
-  const enableModernizedComponents = true;
   const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
   const [headerSlot, contentSlot, actionSlot] = useNamedSlots(children, ['header', 'content', 'action']);
   useEffect(() => {
@@ -31,11 +34,6 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     setCollapsibleSectionOpen(isOpen);
     onOpenChange?.(isOpen);
   }, [onOpenChange]);
-  const icon = useMemo(() => ({
-    up: ChevronUp ,
-    down: ChevronDown ,
-    size: 'large' 
-  }), [enableModernizedComponents]);
   const BorderlessIcon = useMemo(() => collapsibleSectionOpen ? ChevronDown : ChevronRight, [collapsibleSectionOpen]);
   const iconAriaLabel = useMemo(() => collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel, [collapsibleSectionOpen, closeSectionButtonAriaLabel, openSectionButtonAriaLabel]);
   const isBorderless = variant === 'borderless';
@@ -49,7 +47,6 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.collapsibleSection, className),
-    "data-modern": 'true' ,
     "data-variant": variant,
     onOpenChange: onCollapsibleOpenChanged,
     open: collapsibleSectionOpen,
@@ -79,8 +76,8 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
         children: [headerSlot?.props.children, jsx(IconButton, {
           "aria-label": iconAriaLabel,
           className: styles.collapsibleSectionHeaderArrow,
-          icon: collapsibleSectionOpen ? icon.up : icon.down,
-          size: icon.size,
+          icon: collapsibleSectionOpen ? sectionToggleIcons.up : sectionToggleIcons.down,
+          size: sectionToggleIcons.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--f155a","collapsibleSectionHeaderRow":"bp_collapsible_section_module_collapsibleSectionHeaderRow--f155a","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--f155a","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--f155a","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--f155a","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--f155a"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--01dbe","collapsibleSectionHeaderRow":"bp_collapsible_section_module_collapsibleSectionHeaderRow--01dbe","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--01dbe","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--01dbe","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--01dbe","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--01dbe"};
 
 export { styles as default };