@box/blueprint-web 12.3.0 → 12.4.0

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

@@ -1,14 +1,27 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
-import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
+import { PointerChevron, Alert, ClockBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, SurfaceBadgeErrorSurface, SurfaceBadgePagesSurface } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
+import { createElement } from 'react';
 import { Ghost } from '../ghost/ghost.js';
 import { InlineNotice } from '../inline-notice/inline-notice.js';
 import { Status } from '../status/status.js';
 import { isDefined } from '../utils/isDefined.js';
 import styles from './accordion.module.js';
 
+const accordionIconVariantToIconProps = {
+  'alert-error': {
+    icon: Alert,
+    iconColor: GrayWhite,
+    backgroundColor: SurfaceBadgeErrorSurface
+  },
+  'status-pending': {
+    icon: ClockBadge,
+    iconColor: GrayWhite,
+    backgroundColor: SurfaceBadgePagesSurface
+  }
+};
 /**
  * The root component that contains all the parts of a accordion.
  *
@@ -67,12 +80,19 @@ const Item = props => {
   // TODO: [DSYS-549] Refactor - spread props in a single place
   const {
     status,
+    iconVariant,
+    iconAriaLabel,
     title,
     disabled,
     error,
     errorIconAriaLabel,
     ...itemRest
   } = props;
+  const {
+    backgroundColor,
+    iconColor,
+    icon
+  } = iconVariant ? accordionIconVariantToIconProps[iconVariant] : {};
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
@@ -91,6 +111,18 @@ const Item = props => {
               className: styles.accordionStatus,
               color: error ? statusColors.error : statusColors.default,
               text: `${status}`
+            }), icon && jsx("div", {
+              className: styles.accordionIconWrapper,
+              style: {
+                backgroundColor
+              },
+              children: /*#__PURE__*/createElement(icon, {
+                color: iconColor,
+                role: 'img',
+                height: '0.625rem',
+                width: '0.625rem',
+                'aria-label': iconAriaLabel
+              })
             }), jsx(PointerChevron, {
               "aria-hidden": "true",
               className: styles.accordionTriggerIcon

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionContent":"bp_accordion_module_accordionContent--eb917","slideDown":"bp_accordion_module_slideDown--eb917","slideUp":"bp_accordion_module_slideUp--eb917","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--eb917","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--eb917","accordionItem":"bp_accordion_module_accordionItem--eb917","accordionFixedContent":"bp_accordion_module_accordionFixedContent--eb917","accordionHeader":"bp_accordion_module_accordionHeader--eb917","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--eb917","accordionStatus":"bp_accordion_module_accordionStatus--eb917","accordionTrigger":"bp_accordion_module_accordionTrigger--eb917","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--eb917"};
+var styles = {"accordionContent":"bp_accordion_module_accordionContent--13004","slideDown":"bp_accordion_module_slideDown--13004","slideUp":"bp_accordion_module_slideUp--13004","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--13004","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--13004","accordionItem":"bp_accordion_module_accordionItem--13004","accordionFixedContent":"bp_accordion_module_accordionFixedContent--13004","accordionHeader":"bp_accordion_module_accordionHeader--13004","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--13004","accordionStatus":"bp_accordion_module_accordionStatus--13004","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--13004","accordionTrigger":"bp_accordion_module_accordionTrigger--13004","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--13004"};
 
 export { styles as default };

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

@@ -16,6 +16,23 @@ interface Errorable {
      */
     errorIconAriaLabel?: string;
 }
+interface IconProps {
+    /**
+     * Variant of icon displayed next to the title
+     * */
+    iconVariant: 'alert-error' | 'status-pending';
+    /**
+     * ARIA label of icon displayed next to the title
+     * */
+    iconAriaLabel: string;
+}
+type StatusProps = {
+    status?: number;
+    iconVariant?: never;
+    iconAriaLabel?: never;
+} | ({
+    status?: never;
+} & RequireAllOrNone<IconProps, keyof IconProps>);
 export type AccordionBaseItem = {
     /**
      * Content of the accordion item that is displayed when the section is expanded
@@ -33,15 +50,11 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Header text displayed
      */
     title: string;
-    /**
-     * Number displayed in a status pill next to the title
-     * */
-    status?: number;
     /**
      * Disabled state of the section.
      */
     disabled?: boolean;
-};
+} & StatusProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"avatar":"bp_avatar_module_avatar--5e576","text":"bp_avatar_module_text--5e576","small":"bp_avatar_module_small--5e576","length-1":"bp_avatar_module_length-1--5e576","length-2":"bp_avatar_module_length-2--5e576","medium":"bp_avatar_module_medium--5e576","large":"bp_avatar_module_large--5e576","length-3":"bp_avatar_module_length-3--5e576","length-4":"bp_avatar_module_length-4--5e576","xlarge":"bp_avatar_module_xlarge--5e576","xxlarge":"bp_avatar_module_xxlarge--5e576","badge":"bp_avatar_module_badge--5e576","image":"bp_avatar_module_image--5e576","loading":"bp_avatar_module_loading--5e576","anonymousAvatar":"bp_avatar_module_anonymousAvatar--5e576"};
+var styles = {"avatar":"bp_avatar_module_avatar--def62","text":"bp_avatar_module_text--def62","small":"bp_avatar_module_small--def62","length-1":"bp_avatar_module_length-1--def62","length-2":"bp_avatar_module_length-2--def62","medium":"bp_avatar_module_medium--def62","large":"bp_avatar_module_large--def62","length-3":"bp_avatar_module_length-3--def62","length-4":"bp_avatar_module_length-4--def62","xlarge":"bp_avatar_module_xlarge--def62","xxlarge":"bp_avatar_module_xxlarge--def62","badge":"bp_avatar_module_badge--def62","image":"bp_avatar_module_image--def62","loading":"bp_avatar_module_loading--def62","anonymousAvatar":"bp_avatar_module_anonymousAvatar--def62"};
 
 export { styles as default };

package/dist/lib-esm/badge/base-badge.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--487bc","badge":"bp_base_badge_module_badge--487bc","smallSizeBadge":"bp_base_badge_module_smallSizeBadge--487bc","mediumSizeBadge":"bp_base_badge_module_mediumSizeBadge--487bc","largeSizeBadge":"bp_base_badge_module_largeSizeBadge--487bc","xlargeSizeBadge":"bp_base_badge_module_xlargeSizeBadge--487bc","xxlargeSizeBadge":"bp_base_badge_module_xxlargeSizeBadge--487bc","iconBadge":"bp_base_badge_module_iconBadge--487bc","statusBadge":"bp_base_badge_module_statusBadge--487bc","numericBadge":"bp_base_badge_module_numericBadge--487bc","numericBadgeSingleDigit":"bp_base_badge_module_numericBadgeSingleDigit--487bc","numericBadgeMoreDigits":"bp_base_badge_module_numericBadgeMoreDigits--487bc"};
+var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--4016b","badge":"bp_base_badge_module_badge--4016b","smallSizeBadge":"bp_base_badge_module_smallSizeBadge--4016b","mediumSizeBadge":"bp_base_badge_module_mediumSizeBadge--4016b","largeSizeBadge":"bp_base_badge_module_largeSizeBadge--4016b","xlargeSizeBadge":"bp_base_badge_module_xlargeSizeBadge--4016b","xxlargeSizeBadge":"bp_base_badge_module_xxlargeSizeBadge--4016b","iconBadge":"bp_base_badge_module_iconBadge--4016b","statusBadge":"bp_base_badge_module_statusBadge--4016b","numericBadge":"bp_base_badge_module_numericBadge--4016b","numericBadgeSingleDigit":"bp_base_badge_module_numericBadgeSingleDigit--4016b","numericBadgeMoreDigits":"bp_base_badge_module_numericBadgeMoreDigits--4016b"};
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_card_tooltip_module_content--2e321","card":"bp_card_tooltip_module_card--2e321","slideDownAndFade":"bp_card_tooltip_module_slideDownAndFade--2e321","slideLeftAndFade":"bp_card_tooltip_module_slideLeftAndFade--2e321","slideUpAndFade":"bp_card_tooltip_module_slideUpAndFade--2e321","slideRightAndFade":"bp_card_tooltip_module_slideRightAndFade--2e321"};
+var styles = {"content":"bp_card_tooltip_module_content--e2b32","card":"bp_card_tooltip_module_card--e2b32","slideDownAndFade":"bp_card_tooltip_module_slideDownAndFade--e2b32","slideLeftAndFade":"bp_card_tooltip_module_slideLeftAndFade--e2b32","slideUpAndFade":"bp_card_tooltip_module_slideUpAndFade--e2b32","slideRightAndFade":"bp_card_tooltip_module_slideRightAndFade--e2b32"};
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_card_tooltip_v2_module_content--9036b","slideDownAndFade":"bp_card_tooltip_v2_module_slideDownAndFade--9036b","slideLeftAndFade":"bp_card_tooltip_v2_module_slideLeftAndFade--9036b","slideUpAndFade":"bp_card_tooltip_v2_module_slideUpAndFade--9036b","slideRightAndFade":"bp_card_tooltip_v2_module_slideRightAndFade--9036b"};
+var styles = {"content":"bp_card_tooltip_v2_module_content--43c66","slideDownAndFade":"bp_card_tooltip_v2_module_slideDownAndFade--43c66","slideLeftAndFade":"bp_card_tooltip_v2_module_slideLeftAndFade--43c66","slideUpAndFade":"bp_card_tooltip_v2_module_slideUpAndFade--43c66","slideRightAndFade":"bp_card_tooltip_v2_module_slideRightAndFade--43c66"};
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_checkbox_module_option--9a217","checkbox":"bp_checkbox_module_checkbox--9a217","indicator":"bp_checkbox_module_indicator--9a217","label":"bp_checkbox_module_label--9a217","description":"bp_checkbox_module_description--9a217","disabled":"bp_checkbox_module_disabled--9a217"};
+var styles = {"option":"bp_checkbox_module_option--44836","checkbox":"bp_checkbox_module_checkbox--44836","indicator":"bp_checkbox_module_indicator--44836","label":"bp_checkbox_module_label--44836","description":"bp_checkbox_module_description--44836","disabled":"bp_checkbox_module_disabled--44836"};
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--8e11e","disabled":"bp_combobox_module_disabled--8e11e","label":"bp_combobox_module_label--8e11e","hiddenLabel":"bp_combobox_module_hiddenLabel--8e11e","comboboxContainer":"bp_combobox_module_comboboxContainer--8e11e","withComboboxButtons":"bp_combobox_module_withComboboxButtons--8e11e","error":"bp_combobox_module_error--8e11e","textInputWrapper":"bp_combobox_module_textInputWrapper--8e11e","textInput":"bp_combobox_module_textInput--8e11e","errorIcon":"bp_combobox_module_errorIcon--8e11e","comboboxButtons":"bp_combobox_module_comboboxButtons--8e11e","withChips":"bp_combobox_module_withChips--8e11e","inlineError":"bp_combobox_module_inlineError--8e11e","popover":"bp_combobox_module_popover--8e11e","option":"bp_combobox_module_option--8e11e","indicator":"bp_combobox_module_indicator--8e11e","indicatorIcon":"bp_combobox_module_indicatorIcon--8e11e","optionWithIndicator":"bp_combobox_module_optionWithIndicator--8e11e","loadingIndicator":"bp_combobox_module_loadingIndicator--8e11e","noResultOption":"bp_combobox_module_noResultOption--8e11e"};
+var styles = {"container":"bp_combobox_module_container--7673c","disabled":"bp_combobox_module_disabled--7673c","label":"bp_combobox_module_label--7673c","hiddenLabel":"bp_combobox_module_hiddenLabel--7673c","comboboxContainer":"bp_combobox_module_comboboxContainer--7673c","withComboboxButtons":"bp_combobox_module_withComboboxButtons--7673c","error":"bp_combobox_module_error--7673c","textInputWrapper":"bp_combobox_module_textInputWrapper--7673c","textInput":"bp_combobox_module_textInput--7673c","errorIcon":"bp_combobox_module_errorIcon--7673c","comboboxButtons":"bp_combobox_module_comboboxButtons--7673c","withChips":"bp_combobox_module_withChips--7673c","inlineError":"bp_combobox_module_inlineError--7673c","popover":"bp_combobox_module_popover--7673c","option":"bp_combobox_module_option--7673c","indicator":"bp_combobox_module_indicator--7673c","indicatorIcon":"bp_combobox_module_indicatorIcon--7673c","optionWithIndicator":"bp_combobox_module_optionWithIndicator--7673c","loadingIndicator":"bp_combobox_module_loadingIndicator--7673c","noResultOption":"bp_combobox_module_noResultOption--7673c"};
 
 export { styles as default };

package/dist/lib-esm/combobox-group/combobox-group.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_group_module_container--e6810","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--e6810","disabled":"bp_combobox_group_module_disabled--e6810","label":"bp_combobox_group_module_label--e6810","trailing":"bp_combobox_group_module_trailing--e6810","leading":"bp_combobox_group_module_leading--e6810","errorCombobox":"bp_combobox_group_module_errorCombobox--e6810","errorSelect":"bp_combobox_group_module_errorSelect--e6810","selectHasFocus":"bp_combobox_group_module_selectHasFocus--e6810","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--e6810"};
+var styles = {"container":"bp_combobox_group_module_container--2f12b","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--2f12b","disabled":"bp_combobox_group_module_disabled--2f12b","label":"bp_combobox_group_module_label--2f12b","trailing":"bp_combobox_group_module_trailing--2f12b","leading":"bp_combobox_group_module_leading--2f12b","errorCombobox":"bp_combobox_group_module_errorCombobox--2f12b","errorSelect":"bp_combobox_group_module_errorSelect--2f12b","selectHasFocus":"bp_combobox_group_module_selectHasFocus--2f12b","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--2f12b"};
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_content_card_module_card--93a16","cardContent":"bp_content_card_module_cardContent--93a16","cardTitle":"bp_content_card_module_cardTitle--93a16","cardTitleText":"bp_content_card_module_cardTitleText--93a16","cardBody":"bp_content_card_module_cardBody--93a16","cardBodyText":"bp_content_card_module_cardBodyText--93a16","cardIcon":"bp_content_card_module_cardIcon--93a16","cardBackground":"bp_content_card_module_cardBackground--93a16","image":"bp_content_card_module_image--93a16","ghostCard":"bp_content_card_module_ghostCard--93a16","iconGhost":"bp_content_card_module_iconGhost--93a16","titleGhost":"bp_content_card_module_titleGhost--93a16","bodyGhost":"bp_content_card_module_bodyGhost--93a16","pillGhostContainer":"bp_content_card_module_pillGhostContainer--93a16","pillGhost":"bp_content_card_module_pillGhost--93a16"};
+var styles = {"card":"bp_content_card_module_card--e5fff","cardContent":"bp_content_card_module_cardContent--e5fff","cardTitle":"bp_content_card_module_cardTitle--e5fff","cardTitleText":"bp_content_card_module_cardTitleText--e5fff","cardBody":"bp_content_card_module_cardBody--e5fff","cardBodyText":"bp_content_card_module_cardBodyText--e5fff","cardIcon":"bp_content_card_module_cardIcon--e5fff","cardBackground":"bp_content_card_module_cardBackground--e5fff","image":"bp_content_card_module_image--e5fff","ghostCard":"bp_content_card_module_ghostCard--e5fff","iconGhost":"bp_content_card_module_iconGhost--e5fff","titleGhost":"bp_content_card_module_titleGhost--e5fff","bodyGhost":"bp_content_card_module_bodyGhost--e5fff","pillGhostContainer":"bp_content_card_module_pillGhostContainer--e5fff","pillGhost":"bp_content_card_module_pillGhost--e5fff"};
 
 export { styles as default };

package/dist/lib-esm/data-table/cell/sticky-cell.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"stickyCell":"bp_sticky_cell_module_stickyCell--2bbb5","childrenWrapper":"bp_sticky_cell_module_childrenWrapper--2bbb5","verticalBar":"bp_sticky_cell_module_verticalBar--2bbb5","isScrolledX":"bp_sticky_cell_module_isScrolledX--2bbb5","stickyCellBelow":"bp_sticky_cell_module_stickyCellBelow--2bbb5","stickyCellOuterLeft":"bp_sticky_cell_module_stickyCellOuterLeft--2bbb5"};
+var styles = {"stickyCell":"bp_sticky_cell_module_stickyCell--fc636","childrenWrapper":"bp_sticky_cell_module_childrenWrapper--fc636","verticalBar":"bp_sticky_cell_module_verticalBar--fc636","isScrolledX":"bp_sticky_cell_module_isScrolledX--fc636","stickyCellBelow":"bp_sticky_cell_module_stickyCellBelow--fc636","stickyCellOuterLeft":"bp_sticky_cell_module_stickyCellOuterLeft--fc636"};
 
 export { styles as default };

package/dist/lib-esm/data-table/data-table.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--83071","isScrolledX":"bp_data_table_module_isScrolledX--83071","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--83071"};
+var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--caa4c","isScrolledX":"bp_data_table_module_isScrolledX--caa4c","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--caa4c"};
 
 export { styles as default };

package/dist/lib-esm/date-picker/date-picker.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"datePicker":"bp_date_picker_module_datePicker--af7c7","disabled":"bp_date_picker_module_disabled--af7c7","label":"bp_date_picker_module_label--af7c7","group":"bp_date_picker_module_group--af7c7","groupContainer":"bp_date_picker_module_groupContainer--af7c7","error":"bp_date_picker_module_error--af7c7","groupContainerInput":"bp_date_picker_module_groupContainerInput--af7c7","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--af7c7","button":"bp_date_picker_module_button--af7c7","clear":"bp_date_picker_module_clear--af7c7","inlineError":"bp_date_picker_module_inlineError--af7c7","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--af7c7","slide":"bp_date_picker_module_slide--af7c7"};
+var styles = {"datePicker":"bp_date_picker_module_datePicker--451e9","disabled":"bp_date_picker_module_disabled--451e9","label":"bp_date_picker_module_label--451e9","group":"bp_date_picker_module_group--451e9","groupContainer":"bp_date_picker_module_groupContainer--451e9","error":"bp_date_picker_module_error--451e9","groupContainerInput":"bp_date_picker_module_groupContainerInput--451e9","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--451e9","button":"bp_date_picker_module_button--451e9","clear":"bp_date_picker_module_clear--451e9","inlineError":"bp_date_picker_module_inlineError--451e9","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--451e9","slide":"bp_date_picker_module_slide--451e9"};
 
 export { styles as default };

package/dist/lib-esm/empty-state/empty-state.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"emptyState":"bp_empty_state_module_emptyState--0b226","illustration":"bp_empty_state_module_illustration--0b226","body":"bp_empty_state_module_body--0b226","heading":"bp_empty_state_module_heading--0b226","button":"bp_empty_state_module_button--0b226","small":"bp_empty_state_module_small--0b226"};
+var styles = {"emptyState":"bp_empty_state_module_emptyState--7e04a","illustration":"bp_empty_state_module_illustration--7e04a","body":"bp_empty_state_module_body--7e04a","heading":"bp_empty_state_module_heading--7e04a","button":"bp_empty_state_module_button--7e04a","small":"bp_empty_state_module_small--7e04a"};
 
 export { styles as default };