@carbon/react 1.82.1 → 1.83.0

package/es/components/Grid/Column.d.ts

@@ -28,35 +28,35 @@ export interface ColumnBaseProps {
      * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
      * This breakpoint supports 16 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     lg?: ColumnSpan;
     /**
      * Specify column span for the `max` breakpoint. This breakpoint supports 16
      * columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     max?: ColumnSpan;
     /**
      * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
      * This breakpoint supports 8 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     md?: ColumnSpan;
     /**
      * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
      * This breakpoint supports 4 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     sm?: ColumnSpan;
     /**
      * Specify column span for the `xlg` breakpoint (Default breakpoint up to
      * 1584px) This breakpoint supports 16 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     xlg?: ColumnSpan;
     /**

package/es/components/Grid/Column.js

@@ -9,11 +9,11 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import * as FeatureFlags from '@carbon/feature-flags';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings } from './GridContext.js';
 
-const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const Column = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     as,
     children,
@@ -31,7 +31,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const prefix = usePrefix();
   const BaseComponent = as || 'div';
   if (mode === 'css-grid') {
-    return /*#__PURE__*/React__default.createElement(CSSGridColumn, _extends({
+    return /*#__PURE__*/React.createElement(CSSGridColumn, _extends({
       as: BaseComponent,
       className: customClassName,
       sm: sm,
@@ -45,7 +45,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const className = cx(customClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0
   });
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({
     className: className,
     ref: ref
   }, rest), children);
@@ -77,28 +77,28 @@ Column.propTypes = {
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   lg: spanPropType,
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   max: spanPropType,
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   md: spanPropType,
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   sm: spanPropType,
   /**
@@ -110,7 +110,7 @@ Column.propTypes = {
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   xlg: spanPropType
 };
@@ -133,7 +133,7 @@ function CSSGridColumn(_ref2) {
   const className = cx(containerClassName, breakpointClassName, spanClassName, {
     [`${prefix}--css-grid-column`]: true
   });
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({
     className: className
   }, rest), children);
 }
@@ -154,28 +154,28 @@ CSSGridColumn.propTypes = {
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   lg: spanPropType,
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   max: spanPropType,
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   md: spanPropType,
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   sm: spanPropType,
   /**
@@ -191,7 +191,7 @@ CSSGridColumn.propTypes = {
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   xlg: spanPropType
 };

package/es/components/Grid/ColumnHang.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 /**
@@ -26,7 +26,7 @@ function ColumnHang(_ref) {
   const className = cx(customClassName, `${prefix}--grid-column-hang`);
   // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className
   }), children);
 }

package/es/components/Grid/FlexGrid.js

@@ -8,11 +8,11 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { GridSettings } from './GridContext.js';
 
-const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     as,
     condensed = false,
@@ -31,10 +31,10 @@ const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   });
   // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponent = as || 'div';
-  return /*#__PURE__*/React__default.createElement(GridSettings, {
+  return /*#__PURE__*/React.createElement(GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
     className: className,
     ref: ref
   }, rest), children));

package/es/components/Grid/Grid.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { CSSGrid as CSSGridComponent } from './CSSGrid.js';
 import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
@@ -14,9 +14,9 @@ import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
 function Grid(props) {
   const enableCSSGrid = useFeatureFlag('enable-css-grid');
   if (enableCSSGrid) {
-    return /*#__PURE__*/React__default.createElement(CSSGridComponent, props);
+    return /*#__PURE__*/React.createElement(CSSGridComponent, props);
   }
-  return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
+  return /*#__PURE__*/React.createElement(FlexGridComponent, props);
 }
 Grid.propTypes = {
   /**

package/es/components/Grid/GridContext.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import * as React from 'react';
+import React from 'react';
 export type GridMode = 'flexbox' | 'css-grid';
 export interface GridSettingContext {
     /**

package/es/components/Grid/GridContext.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import * as React from 'react';
+import React from 'react';
 
 /**
  * Provides a grid context for communication the grid "mode" (flexbox or

package/es/components/Grid/Row.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 function Row(_ref) {
@@ -28,7 +28,7 @@ function Row(_ref) {
   });
   // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }

package/es/components/Heading/index.js

@@ -7,21 +7,21 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 
-const HeadingContext = /*#__PURE__*/React__default.createContext(1);
-const Section = /*#__PURE__*/React__default.forwardRef(function Section(_ref, ref) {
+const HeadingContext = /*#__PURE__*/React.createContext(1);
+const Section = /*#__PURE__*/React.forwardRef(function Section(_ref, ref) {
   let {
     as: BaseComponent = 'section',
     level: levelOverride,
     ...rest
   } = _ref;
-  const parentLevel = React__default.useContext(HeadingContext);
+  const parentLevel = React.useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
+  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
-  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     ref: ref
   }, rest)));
 });
@@ -44,9 +44,9 @@ Section.propTypes = {
    */
   level: PropTypes.number
 };
-const Heading = /*#__PURE__*/React__default.forwardRef(function Heading(props, ref) {
-  const HeadingIntrinsic = `h${React__default.useContext(HeadingContext)}`;
-  return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, _extends({
+const Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
+  const HeadingIntrinsic = `h${React.useContext(HeadingContext)}`;
+  return /*#__PURE__*/React.createElement(HeadingIntrinsic, _extends({
     ref: ref
   }, props));
 });

package/es/components/Icon/Icon.Skeleton.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -17,7 +17,7 @@ const IconSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--icon--skeleton`, className)
   }, rest));
 };

package/es/components/IconButton/index.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -19,7 +19,7 @@ import { BadgeIndicator } from '../BadgeIndicator/index.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref, ref) {
   let {
     align,
     autoAlign = false,
@@ -48,7 +48,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
   }
   const badgeId = useId('badge-indicator');
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     align: align,
     autoAlign: autoAlign,
     closeOnActivation: closeOnActivation,
@@ -59,7 +59,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     highContrast: highContrast,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default.createElement(ButtonBase, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
     disabled: disabled,
     kind: kind,
     ref: ref,
@@ -67,8 +67,8 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     isSelected: isSelected,
     hasIconOnly: true,
     className: className,
-    "aria-describedby": badgeCount && badgeId
-  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
+    "aria-describedby": rest['aria-describedby'] || badgeCount && badgeId
+  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React.createElement(BadgeIndicator, {
     id: badgeId,
     count: badgeCount > 0 ? badgeCount : undefined
   })));
@@ -155,8 +155,13 @@ IconButton.propTypes = {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
+   * If the child node already has an `aria-label`, the tooltip will not apply
+   * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
+   * be used instead. Otherwise, the tooltip will use its own ID as the label.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
+   * If using `badgeCount={0}`, make sure the label explains that there is a
+   * new notification.
    */
   label: PropTypes.node.isRequired,
   /**

package/es/components/IconIndicator/index.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, CheckmarkFilled, CheckmarkOutline, InProgress, Incomplete, CircleDash, PendingFilled, UnknownFilled, WarningSquareFilled } from '@carbon/icons-react';
@@ -26,7 +26,7 @@ const iconTypes = {
   unknown: UnknownFilled,
   informative: WarningSquareFilled
 };
-const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndicatorContent(_ref, ref) {
+const IconIndicator = /*#__PURE__*/React.forwardRef(function IconIndicatorContent(_ref, ref) {
   let {
     className: customClassName,
     kind,
@@ -42,10 +42,10 @@ const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndica
   if (!IconForKind) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classNames,
     ref: ref
-  }, /*#__PURE__*/React__default.createElement(IconForKind, {
+  }, /*#__PURE__*/React.createElement(IconForKind, {
     size: size,
     className: `${prefix}--icon-indicator--${kind}`
   }), label);

package/es/components/IdPrefix/index.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { IdPrefixContext } from '../../internal/useIdPrefix.js';
 
 function IdPrefix(_ref) {
@@ -14,7 +14,7 @@ function IdPrefix(_ref) {
     children,
     prefix
   } = _ref;
-  return /*#__PURE__*/React__default.createElement(IdPrefixContext.Provider, {
+  return /*#__PURE__*/React.createElement(IdPrefixContext.Provider, {
     value: prefix
   }, children);
 }

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -6,12 +6,12 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
+const InlineCheckbox = /*#__PURE__*/React.forwardRef(function InlineCheckbox(props, forwardRef) {
   const {
     ['aria-label']: ariaLabel,
     ariaLabel: deprecatedAriaLabel,
@@ -56,19 +56,19 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
     }
     onClick?.(evt);
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--checkbox--inline`
-  }, /*#__PURE__*/React__default.createElement("input", inputProps),
+  }, /*#__PURE__*/React.createElement("input", inputProps),
   /*#__PURE__*/
   /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-  React__default.createElement("label", {
+  React.createElement("label", {
     htmlFor: id,
     className: `${prefix}--checkbox-label`,
     title: title,
     onClick: evt => {
       evt.stopPropagation();
     }
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, deprecatedAriaLabel || ariaLabel)));
 });

package/es/components/InlineLoading/InlineLoading.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
@@ -44,20 +44,20 @@ const InlineLoading = _ref => {
   const getLoading = () => {
     let iconLabel = iconDescription ? iconDescription : status;
     if (status === 'error') {
-      return /*#__PURE__*/React__default.createElement(ErrorFilled, {
+      return /*#__PURE__*/React.createElement(ErrorFilled, {
         className: `${prefix}--inline-loading--error`
-      }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
+      }, /*#__PURE__*/React.createElement("title", null, iconLabel));
     }
     if (status === 'finished') {
-      return /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
+      return /*#__PURE__*/React.createElement(CheckmarkFilled, {
         className: `${prefix}--inline-loading__checkmark-container`
-      }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
+      }, /*#__PURE__*/React.createElement("title", null, iconLabel));
     }
     if (status === 'active') {
       if (!iconDescription) {
         iconLabel = 'loading';
       }
-      return /*#__PURE__*/React__default.createElement(Loading, {
+      return /*#__PURE__*/React.createElement(Loading, {
         small: true,
         description: iconLabel,
         withOverlay: false,
@@ -68,20 +68,20 @@ const InlineLoading = _ref => {
       if (!iconDescription) {
         iconLabel = 'not loading';
       }
-      return /*#__PURE__*/React__default.createElement("title", {
+      return /*#__PURE__*/React.createElement("title", {
         className: `${prefix}--inline-loading__inactive-status`
       }, iconLabel);
     }
     return undefined;
   };
-  const loadingText = description && /*#__PURE__*/React__default.createElement("div", {
+  const loadingText = description && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
   const loading = getLoading();
-  const loadingAnimation = loading && /*#__PURE__*/React__default.createElement("div", {
+  const loadingAnimation = loading && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--inline-loading__animation`
   }, loading);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: loadingClasses
   }, rest, {
     "aria-live": rest['aria-live'] ?? 'assertive'

package/es/components/Layer/LayerContext.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const LayerContext = /*#__PURE__*/React__default.createContext(1);
+const LayerContext = /*#__PURE__*/React.createContext(1);
 
 export { LayerContext };

package/es/components/Layer/index.d.ts

@@ -29,6 +29,10 @@ export interface LayerBaseProps {
      * Specify the layer level and override any existing levels based on hierarchy
      */
     level?: LayerLevel;
+    /**
+     * Applies a css background-color set to $layer-background
+     */
+    withBackground?: boolean;
 }
 export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
 declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {

package/es/components/Layer/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,29 +20,32 @@ import { clamp } from '../../internal/clamp.js';
  * calls this hook is currently in
  */
 function useLayer() {
-  const level = React__default.useContext(LayerContext);
+  const level = React.useContext(LayerContext);
   return {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const Layer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     as,
     className: customClassName,
     children,
     level: overrideLevel,
+    withBackground = false,
     ...rest
   } = _ref;
-  const contextLevel = React__default.useContext(LayerContext);
+  const contextLevel = React.useContext(LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
+  const className = cx(`${prefix}--layer-${levels[level]}`, {
+    [`${prefix}--layer__with-background`]: withBackground
+  }, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = clamp(level + 1, MIN_LEVEL, MAX_LEVEL);
   const BaseComponent = as || 'div';
-  return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
+  return /*#__PURE__*/React.createElement(LayerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
     ref: ref
   }, rest, {
     className: className
@@ -67,7 +70,11 @@ Layer.propTypes = {
   /**
    * Specify the layer level and override any existing levels based on hierarchy
    */
-  level: PropTypes.oneOf([0, 1, 2])
+  level: PropTypes.oneOf([0, 1, 2]),
+  /**
+   * Applies a css background-color set to $layer-background
+   */
+  withBackground: PropTypes.bool
 };
 
 export { Layer, useLayer };