@carbon/react 1.23.0-rc.0 → 1.23.1

package/lib/components/Dropdown/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Dropdown = require('./Dropdown.js');
+var Dropdown_Skeleton = require('./Dropdown.Skeleton.js');
 
 
 
 exports.Dropdown = Dropdown["default"];
 exports["default"] = Dropdown["default"];
+exports.DropdownSkeleton = Dropdown_Skeleton["default"];

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var Dropdown = require('../Dropdown/Dropdown.js');
+require('../Dropdown/Dropdown.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 

package/lib/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/lib/components/Grid/CSSGrid.js

@@ -64,11 +64,13 @@ function CSSGrid(_ref) {
     }, rest), children));
   }
 
-  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx));
+  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.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["default"].createElement(GridContext.GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children));
 }
@@ -107,7 +109,7 @@ CSSGrid.propTypes = {
   narrow: PropTypes__default["default"].bool
 };
 
-function Subgrid(_ref2) {
+var Subgrid = function Subgrid(_ref2) {
   var _cx2;
 
   var _ref2$as = _ref2.as,
@@ -122,7 +124,7 @@ function Subgrid(_ref2) {
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
-}
+};
 
 Subgrid.propTypes = {
   /**
@@ -145,5 +147,6 @@ Subgrid.propTypes = {
    */
   mode: PropTypes__default["default"].oneOf(['wide', 'narrow', 'condensed'])
 };
+var CSSGridComponent = CSSGrid;
 
-exports.CSSGrid = CSSGrid;
+exports.CSSGrid = CSSGridComponent;

package/lib/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/lib/components/Grid/Column.js

@@ -75,8 +75,10 @@ function Column(_ref) {
   }
 
   var columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
-  var className = cx__default["default"](customClassName, columnClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  var className = cx__default["default"](customClassName, columnClassName, _rollupPluginBabelHelpers.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["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }
@@ -281,28 +283,30 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset,
-        start = breakpoint.start,
-        end = breakpoint.end;
+    if (_rollupPluginBabelHelpers["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 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 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 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 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;
+      }
     }
   }
 
@@ -340,19 +344,21 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset;
+    if (_rollupPluginBabelHelpers["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/lib/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/lib/components/Grid/ColumnHang.js

@@ -22,11 +22,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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,
@@ -35,8 +35,10 @@ function ColumnHang(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, "".concat(prefix, "--grid-column-hang"));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  var className = cx__default["default"](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["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
 }
@@ -57,5 +59,6 @@ ColumnHang.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var ColumnHangComponent = ColumnHang;
 
-exports.ColumnHang = ColumnHang;
+exports.ColumnHang = ColumnHangComponent;

package/lib/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/lib/components/Grid/FlexGrid.js

@@ -40,11 +40,13 @@ function FlexGrid(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx));
+  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _rollupPluginBabelHelpers.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["default"].createElement(GridContext.GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children));
 }
@@ -82,5 +84,6 @@ FlexGrid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
+var FlexGridComponent = FlexGrid;
 
-exports.FlexGrid = FlexGrid;
+exports.FlexGrid = FlexGridComponent;

package/lib/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/lib/components/Grid/Grid.js

@@ -63,5 +63,6 @@ Grid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
+var GridAsGridComponent = Grid;
 
-exports.Grid = Grid;
+exports.Grid = GridAsGridComponent;

package/lib/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/lib/components/Grid/GridContext.js

@@ -39,12 +39,11 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-
 var GridSettingsContext = /*#__PURE__*/React__namespace.createContext({
   mode: 'flexbox',
   subgrid: false
 });
-function GridSettings(_ref) {
+var GridSettings = function GridSettings(_ref) {
   var children = _ref.children,
       mode = _ref.mode,
       _ref$subgrid = _ref.subgrid,
@@ -58,7 +57,8 @@ function GridSettings(_ref) {
   return /*#__PURE__*/React__namespace.createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
-}
+};
+var gridModes = ['flexbox', 'css-grid'];
 GridSettings.propTypes = {
   /**
    * Pass in components which will be rendered within the `GridSettings`
@@ -69,7 +69,7 @@ GridSettings.propTypes = {
   /**
    * Specify the grid mode for the GridContext
    */
-  mode: PropTypes__default["default"].oneOf(['flexbox', 'css-grid']).isRequired,
+  mode: PropTypes__default["default"].oneOf(gridModes).isRequired,
 
   /**
    * Specify whether subgrid should be enabled
@@ -80,9 +80,9 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 
-function useGridSettings() {
+var useGridSettings = function useGridSettings() {
   return React__namespace.useContext(GridSettingsContext);
-}
+};
 
 exports.GridSettings = GridSettings;
 exports.useGridSettings = useGridSettings;

package/lib/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/lib/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/lib/components/Grid/Row.js

@@ -37,8 +37,10 @@ function Row(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _rollupPluginBabelHelpers.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["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }

package/lib/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/lib/components/Heading/index.js

@@ -18,18 +18,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "children"];
+var _excluded = ["as", "level", "children"];
 var HeadingContext = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
-  var level = React__default["default"].useContext(HeadingContext);
+  var parentLevel = React__default["default"].useContext(HeadingContext);
+  var level = typeof levelOverride !== 'undefined' ? levelOverride : parentLevel + 1;
   return /*#__PURE__*/React__default["default"].createElement(HeadingContext.Provider, {
-    value: Math.min(level + 1, 6)
+    value: Math.min(level, 6)
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, rest, children));
 }
 
@@ -48,7 +50,12 @@ Section.propTypes = {
   /**
    * Specify a class name for the outermost node of the component
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Overrides the level of the section
+   */
+  level: PropTypes__default["default"].number
 };
 
 function Heading(props) {