@carbon/react 1.23.0-rc.0 → 1.23.1

package/es/components/DataTable/tools/sorting.js

@@ -23,6 +23,9 @@ import { sortStates } from '../state/sortStates.js';
 
 var compare = function compare(a, b) {
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+  // prevent multiple null values in one column (sorting breaks)
+  a === null ? a = '' : null;
+  b === null ? b = '' : null;
 
   if (typeof a === 'number' && typeof b === 'number') {
     return a - b;

package/es/components/Dropdown/Dropdown.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { ListBoxSize } from '../ListBox';
+import { ReactAttr } from '../../types/common';
+export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
+    size?: ListBoxSize;
+}
+declare const DropdownSkeleton: React.FC<DropdownSkeletonProps>;
+export default DropdownSkeleton;
+export { DropdownSkeleton };

package/es/components/Dropdown/Dropdown.Skeleton.js

@@ -42,6 +42,5 @@ DropdownSkeleton.propTypes = {
    */
   size: ListBoxSize
 };
-var DropdownSkeleton$1 = DropdownSkeleton;
 
-export { DropdownSkeleton, DropdownSkeleton$1 as default };
+export { DropdownSkeleton, DropdownSkeleton as default };

package/es/components/Dropdown/index.js

@@ -7,3 +7,4 @@
 
 import Dropdown from './Dropdown.js';
 export { default as Dropdown, default } from './Dropdown.js';
+export { default as DropdownSkeleton } from './Dropdown.Skeleton.js';

package/es/components/FluidDropdown/FluidDropdown.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import Dropdown from '../Dropdown/Dropdown.js';
+import '../Dropdown/Dropdown.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { GridComponent } from './GridTypes';
+declare const CSSGridComponent: GridComponent;
+export { CSSGridComponent as CSSGrid };

package/es/components/Grid/CSSGrid.js

@@ -54,11 +54,13 @@ function CSSGrid(_ref) {
     }, rest), children));
   }
 
-  var className = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx));
+  var className = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx)); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children));
 }
@@ -97,7 +99,7 @@ CSSGrid.propTypes = {
   narrow: PropTypes.bool
 };
 
-function Subgrid(_ref2) {
+var Subgrid = function Subgrid(_ref2) {
   var _cx2;
 
   var _ref2$as = _ref2.as,
@@ -112,7 +114,7 @@ function Subgrid(_ref2) {
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     className: className
   }), children);
-}
+};
 
 Subgrid.propTypes = {
   /**
@@ -135,5 +137,6 @@ Subgrid.propTypes = {
    */
   mode: PropTypes.oneOf(['wide', 'narrow', 'condensed'])
 };
+var CSSGridComponent = CSSGrid;
 
-export { CSSGrid };
+export { CSSGridComponent as CSSGrid };

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

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { PolymorphicProps } from '../../types/common';
+type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
+type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
+interface ColumnSpanObject {
+    span?: ColumnSpanSimple;
+    offset?: number;
+    start?: number;
+    end?: number;
+}
+export type ColumnSpan = ColumnSpanSimple | ColumnSpanObject;
+interface ColumnBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Column`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Column`
+     */
+    className?: string;
+    /**
+     * 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
+     */
+    lg?: ColumnSpan;
+    /**
+     * Specify column span for the `max` breakpoint. This breakpoint supports 16
+     * columns by default.
+     *
+     * @see https://www.carbondesignsystem.com/guidelines/layout#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
+     */
+    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
+     */
+    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
+     */
+    xlg?: ColumnSpan;
+    /**
+     * Specify constant column span, start, or end values that will not change
+     * based on breakpoint
+     */
+    span?: ColumnSpan;
+}
+export type ColumnProps<T extends React.ElementType> = PolymorphicProps<T, ColumnBaseProps>;
+export interface ColumnComponent {
+    <T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: ColumnComponent;
+export default _default;

package/es/components/Grid/Column.js

@@ -46,8 +46,10 @@ function Column(_ref) {
   }
 
   var columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
-  var className = cx(customClassName, columnClassName, _defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  var className = cx(customClassName, columnClassName, _defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0)); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }
@@ -252,28 +254,30 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset,
-        start = breakpoint.start,
-        end = breakpoint.end;
-
-    if (typeof offset === 'number' && offset > 0) {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
-    }
-
-    if (typeof start === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
-    }
-
-    if (typeof end === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
-    }
-
-    if (typeof span === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
-    } else if (typeof span === 'string') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
-      continue;
+    if (_typeof(breakpoint) === 'object') {
+      var span = breakpoint.span,
+          offset = breakpoint.offset,
+          start = breakpoint.start,
+          end = breakpoint.end;
+
+      if (typeof offset === 'number' && offset > 0) {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
+      }
+
+      if (typeof start === 'number') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
+      }
+
+      if (typeof end === 'number') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
+      }
+
+      if (typeof span === 'number') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
+      } else if (typeof span === 'string') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
+        continue;
+      }
     }
   }
 
@@ -311,19 +315,21 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset;
+    if (_typeof(breakpoint) === 'object') {
+      var span = breakpoint.span,
+          offset = breakpoint.offset;
 
-    if (typeof span === 'number') {
-      classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
-    }
+      if (typeof span === 'number') {
+        classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
+      }
 
-    if (span === true) {
-      classNames.push("".concat(prefix, "--col-").concat(name));
-    }
+      if (span === true) {
+        classNames.push("".concat(prefix, "--col-").concat(name));
+      }
 
-    if (typeof offset === 'number') {
-      classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+      if (typeof offset === 'number') {
+        classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+      }
     }
   }
 

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { PolymorphicProps } from '../../types/common';
+interface ColumnHangBaseProps {
+    /**
+     * Pass in content that will be rendered within the `ColumnHang`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `ColumnHang`
+     */
+    className?: string;
+}
+export type ColumnHangProps<T extends React.ElementType> = PolymorphicProps<T, ColumnHangBaseProps>;
+export interface ColumnHangComponent {
+    <T extends React.ElementType>(props: ColumnHangProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const ColumnHangComponent: ColumnHangComponent;
+export { ColumnHangComponent as ColumnHang };

package/es/components/Grid/ColumnHang.js

@@ -12,11 +12,11 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["as", "className", "children"];
+
 /**
  * Helper component for rendering content that hangs on the column. Useful when
  * trying to align content across different grid modes
  */
-
 function ColumnHang(_ref) {
   var _ref$as = _ref.as,
       BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
@@ -25,8 +25,10 @@ function ColumnHang(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var className = cx(customClassName, "".concat(prefix, "--grid-column-hang"));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  var className = cx(customClassName, "".concat(prefix, "--grid-column-hang")); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className
   }), children);
 }
@@ -47,5 +49,6 @@ ColumnHang.propTypes = {
    */
   className: PropTypes.string
 };
+var ColumnHangComponent = ColumnHang;
 
-export { ColumnHang };
+export { ColumnHangComponent as ColumnHang };

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { GridComponent } from './GridTypes';
+declare const FlexGridComponent: GridComponent;
+export { FlexGridComponent as FlexGrid };

package/es/components/Grid/FlexGrid.js

@@ -30,11 +30,13 @@ function FlexGrid(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--grid"), true), _defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx));
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--grid"), true), _defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx)); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children));
 }
@@ -72,5 +74,6 @@ FlexGrid.propTypes = {
    */
   narrow: PropTypes.bool
 };
+var FlexGridComponent = FlexGrid;
 
-export { FlexGrid };
+export { FlexGridComponent as FlexGrid };

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { GridComponent } from './GridTypes';
+declare const GridAsGridComponent: GridComponent;
+export { GridAsGridComponent as Grid };

package/es/components/Grid/Grid.js

@@ -8,17 +8,17 @@
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { CSSGrid } from './CSSGrid.js';
-import { FlexGrid } from './FlexGrid.js';
+import { CSSGrid as CSSGridComponent } from './CSSGrid.js';
+import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
 
 function Grid(props) {
   var enableCSSGrid = useFeatureFlag('enable-css-grid');
 
   if (enableCSSGrid) {
-    return /*#__PURE__*/React__default.createElement(CSSGrid, props);
+    return /*#__PURE__*/React__default.createElement(CSSGridComponent, props);
   }
 
-  return /*#__PURE__*/React__default.createElement(FlexGrid, props);
+  return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
 }
 
 Grid.propTypes = {
@@ -54,5 +54,6 @@ Grid.propTypes = {
    */
   narrow: PropTypes.bool
 };
+var GridAsGridComponent = Grid;
 
-export { Grid };
+export { GridAsGridComponent as Grid };

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+export type GridMode = 'flexbox' | 'css-grid';
+export interface GridSettingContext {
+    /**
+     * The grid mode for the GridContext
+     */
+    mode: GridMode;
+    /**
+     * Specifies whether subgrid should be enabled
+     */
+    subgrid?: boolean;
+}
+export interface GridSettingsProps {
+    /**
+     * Pass in components which will be rendered within the `GridSettings`
+     * component
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the grid mode for the GridContext
+     */
+    mode: GridMode;
+    /**
+     * Specify whether subgrid should be enabled
+     */
+    subgrid?: boolean;
+}
+export declare const GridSettings: React.FC<GridSettingsProps>;
+/**
+ * Helper function for accessing the GridContext value
+ */
+export declare const useGridSettings: () => GridSettingContext;

package/es/components/Grid/GridContext.js

@@ -12,12 +12,11 @@ import * as React from 'react';
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-
 var GridSettingsContext = /*#__PURE__*/React.createContext({
   mode: 'flexbox',
   subgrid: false
 });
-function GridSettings(_ref) {
+var GridSettings = function GridSettings(_ref) {
   var children = _ref.children,
       mode = _ref.mode,
       _ref$subgrid = _ref.subgrid,
@@ -31,7 +30,8 @@ function GridSettings(_ref) {
   return /*#__PURE__*/React.createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
-}
+};
+var gridModes = ['flexbox', 'css-grid'];
 GridSettings.propTypes = {
   /**
    * Pass in components which will be rendered within the `GridSettings`
@@ -42,7 +42,7 @@ GridSettings.propTypes = {
   /**
    * Specify the grid mode for the GridContext
    */
-  mode: PropTypes.oneOf(['flexbox', 'css-grid']).isRequired,
+  mode: PropTypes.oneOf(gridModes).isRequired,
 
   /**
    * Specify whether subgrid should be enabled
@@ -53,8 +53,8 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 
-function useGridSettings() {
+var useGridSettings = function useGridSettings() {
   return React.useContext(GridSettingsContext);
-}
+};
 
 export { GridSettings, useGridSettings };

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import { PolymorphicProps } from '../../types/common';
+interface GridBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Grid`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Grid`
+     */
+    className?: string;
+    /**
+     * Collapse the gutter to 1px. Useful for fluid layouts.
+     * Rows have 1px of margin between them to match gutter.
+     */
+    condensed?: boolean;
+    /**
+     * Remove the default max width that the grid has set
+     */
+    fullWidth?: boolean;
+    /**
+     * Container hangs 16px into the gutter. Useful for
+     * typographic alignment with and without containers.
+     */
+    narrow?: boolean;
+}
+export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
+export interface GridComponent {
+    <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+export {};

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { PolymorphicProps } from '../../types/common';
+export interface RowBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Row`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Row`
+     */
+    className?: string;
+    /**
+     * Specify a single row as condensed.Rows that are adjacent
+     * and are condensed will have 2px of margin between them to match gutter.
+     */
+    condensed?: boolean;
+    /**
+     * Specify a single row as narrow. The container will hang
+     * 16px into the gutter.
+     */
+    narrow?: boolean;
+}
+export type RowProps<T extends React.ElementType> = PolymorphicProps<T, RowBaseProps>;
+export interface RowComponent {
+    <T extends React.ElementType>(props: RowProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: RowComponent;
+export default _default;

package/es/components/Grid/Row.js

@@ -27,8 +27,10 @@ function Row(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--row"), true), _defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--row"), true), _defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx)); // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }

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

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { FlexGrid } from './FlexGrid';
+export { Grid } from './Grid';
+export { default as Row } from './Row';
+export { default as Column } from './Column';
+export { ColumnHang } from './ColumnHang';

package/es/components/Heading/index.js

@@ -9,18 +9,20 @@ import { objectWithoutProperties as _objectWithoutProperties } from '../../_virt
 import PropTypes from 'prop-types';
 import React__default from 'react';
 
-var _excluded = ["as", "children"];
+var _excluded = ["as", "level", "children"];
 var HeadingContext = /*#__PURE__*/React__default.createContext(1);
 
 function Section(_ref) {
   var _ref$as = _ref.as,
       BaseComponent = _ref$as === void 0 ? 'section' : _ref$as,
+      levelOverride = _ref.level,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var level = React__default.useContext(HeadingContext);
+  var parentLevel = React__default.useContext(HeadingContext);
+  var level = typeof levelOverride !== 'undefined' ? levelOverride : parentLevel + 1;
   return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
-    value: Math.min(level + 1, 6)
+    value: Math.min(level, 6)
   }, /*#__PURE__*/React__default.createElement(BaseComponent, rest, children));
 }
 
@@ -39,7 +41,12 @@ Section.propTypes = {
   /**
    * Specify a class name for the outermost node of the component
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /**
+   * Overrides the level of the section
+   */
+  level: PropTypes.number
 };
 
 function Heading(props) {