@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/FluidNumberInput/FluidNumberInput.js

@@ -17,6 +17,7 @@ require('../NumberInput/NumberInput.Skeleton.js');
 var NumberInput = require('../NumberInput/NumberInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var NumberFormatPropTypes = require('../NumberInput/NumberFormatPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,11 +25,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidNumberInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidNumberInput(_ref, ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidNumberInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidNumberInput({
+  className,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--number-input--fluid`, className);
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
@@ -61,6 +61,13 @@ FluidNumberInput.propTypes = {
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * **Experimental:** Specify Intl.NumberFormat options applied to internal
+   * number parsing and formatting. Use with `type="text"`, has no effect when
+   * `type="number"`.
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+   */
+  formatOptions: NumberFormatPropTypes.NumberFormatOptionsPropType,
   /**
    * Provide a description for up/down icons that can be read by screen readers
    */
@@ -69,6 +76,12 @@ FluidNumberInput.propTypes = {
    * Specify a custom `id` for the input
    */
   id: PropTypes__default["default"].string.isRequired,
+  /**
+   * Instruct the browser which keyboard to display on mobile devices. Note that
+   * standard numeric keyboards vary across devices and operating systems.
+   * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
+   */
+  inputMode: PropTypes__default["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   /**
    * Specify if the currently value is invalid.
    */
@@ -82,6 +95,12 @@ FluidNumberInput.propTypes = {
    * this field is for
    */
   label: PropTypes__default["default"].node,
+  /**
+   * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
+   * language code for parsing and formatting. Use with `type="text"`, has no
+   * effect when `type="number"`.
+   */
+  locale: PropTypes__default["default"].string,
   /**
    * The maximum value.
    */
@@ -93,6 +112,9 @@ FluidNumberInput.propTypes = {
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.
+   * When type="number", this is called on every change of the input.
+   * When type="text", this is only called on blur after the number has been
+   * parsed and formatted.
    * `(event, { value, direction }) => void`
    */
   onChange: PropTypes__default["default"].func,
@@ -104,6 +126,11 @@ FluidNumberInput.propTypes = {
    * Provide an optional function to be called when a key is pressed in the number input
    */
   onKeyUp: PropTypes__default["default"].func,
+  /**
+   * When type="text", provide an optional pattern to restrict user input. Has
+   * no effect when type="number".
+   */
+  pattern: PropTypes__default["default"].string,
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
    */
@@ -112,6 +139,12 @@ FluidNumberInput.propTypes = {
    * Provide custom text for the component for each translation id
    */
   translateWithId: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: Specify if the input should be of type text or number.
+   * Use type="text" with `locale`, `formatOptions`, and guide user input with
+   * `pattern` and `inputMode`.
+   */
+  type: PropTypes__default["default"].oneOf(['number', 'text']),
   /**
    * Specify the value of the input
    */

package/lib/components/FluidSearch/FluidSearch.Skeleton.js

@@ -22,11 +22,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidSearchSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidSearchSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {

package/lib/components/FluidSearch/FluidSearch.js

@@ -24,11 +24,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidSearch = /*#__PURE__*/React__default["default"].forwardRef(function FluidSearch(_ref, ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidSearch = /*#__PURE__*/React__default["default"].forwardRef(function FluidSearch({
+  className,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--search--fluid`, className);
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {

package/lib/components/FluidSelect/FluidSelect.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidSelectSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidSelectSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FluidSelect/FluidSelect.js

@@ -24,12 +24,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidSelect(_ref, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const FluidSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidSelect({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--select--fluid`, className);
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -22,11 +22,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidTextAreaSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidTextAreaSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -25,11 +25,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidTextArea = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidTextArea = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--text-area--fluid`, className);
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {

package/lib/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -22,11 +22,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidTextInputSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidTextInputSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -26,12 +26,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidTextInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidTextInput(_ref, ref) {
-  let {
-    className,
-    isPassword,
-    ...other
-  } = _ref;
+const FluidTextInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidTextInput({
+  className,
+  isPassword,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, {
     [`${prefix}--text-input--fluid`]: !isPassword

package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -27,12 +27,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _FluidTextInputSkelet, _FluidSelectSkeleton, _FluidSelectSkeleton2;
-const FluidTimePickerSkeleton = _ref => {
-  let {
-    className,
-    isOnlyTwo,
-    ...rest
-  } = _ref;
+const FluidTimePickerSkeleton = ({
+  className,
+  isOnlyTwo,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const wrapperClasses = cx__default["default"](className, `${prefix}--time-picker--fluid--skeleton`, {
     [`${prefix}--time-picker--equal-width`]: isOnlyTwo

package/lib/components/FluidTimePicker/FluidTimePicker.js

@@ -25,18 +25,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidTimePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidTimePicker(_ref, ref) {
-  let {
-    className,
-    children,
-    disabled,
-    invalid,
-    invalidText,
-    warn,
-    warnText,
-    readOnly,
-    ...other
-  } = _ref;
+const FluidTimePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidTimePicker({
+  className,
+  children,
+  disabled,
+  invalid,
+  invalidText,
+  warn,
+  warnText,
+  readOnly,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, {
     [`${prefix}--time-picker--fluid`]: true,

package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -20,12 +20,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const FluidTimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidTimePickerSelect(_ref, ref) {
-  let {
-    children,
-    className,
-    ...other
-  } = _ref;
+const FluidTimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidTimePickerSelect({
+  children,
+  className,
+  ...other
+}, ref) {
   return /*#__PURE__*/React__default["default"].createElement(FluidSelect["default"], _rollupPluginBabelHelpers["extends"]({
     className: className,
     ref: ref

package/lib/components/Form/Form.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function Form(_ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+function Form({
+  className,
+  children,
+  ...other
+}) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--form`, className);
   return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FormGroup/FormGroup.js

@@ -21,18 +21,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FormGroup = _ref => {
-  let {
-    disabled = false,
-    legendId,
-    legendText,
-    invalid = false,
-    children,
-    className,
-    message = false,
-    messageText = '',
-    ...rest
-  } = _ref;
+const FormGroup = ({
+  disabled = false,
+  legendId,
+  legendText,
+  invalid = false,
+  children,
+  className,
+  message = false,
+  messageText = '',
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const classNamesFieldset = cx__default["default"](`${prefix}--fieldset`, className);
   return /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FormItem/FormItem.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FormItem(_ref) {
-  let {
-    className,
-    children,
-    ...rest
-  } = _ref;
+function FormItem({
+  className,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--form-item`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FormLabel/FormLabel.js

@@ -23,13 +23,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FormLabel(_ref) {
-  let {
-    className: customClassName,
-    children,
-    id,
-    ...rest
-  } = _ref;
+function FormLabel({
+  className: customClassName,
+  children,
+  id,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--label`, `${prefix}--label--no-margin`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({

package/lib/components/Grid/CSSGrid.js

@@ -22,17 +22,16 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const CSSGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    align,
-    as,
-    children,
-    className: customClassName,
-    condensed = false,
-    fullWidth = false,
-    narrow = false,
-    ...rest
-  } = _ref;
+const CSSGrid = /*#__PURE__*/React__default["default"].forwardRef(({
+  align,
+  as,
+  children,
+  className: customClassName,
+  condensed = false,
+  fullWidth = false,
+  narrow = false,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const {
     subgrid
@@ -105,14 +104,13 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
-const Subgrid = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
-  let {
-    as,
-    className: customClassName,
-    children,
-    mode,
-    ...rest
-  } = _ref2;
+const Subgrid = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  className: customClassName,
+  children,
+  mode,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](customClassName, {
     [`${prefix}--subgrid`]: true,

package/lib/components/Grid/Column.js

@@ -42,18 +42,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Column = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    children,
-    className: customClassName,
-    sm,
-    md,
-    lg,
-    xlg,
-    max,
-    ...rest
-  } = _ref;
+const Column = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  children,
+  className: customClassName,
+  sm,
+  md,
+  lg,
+  xlg,
+  max,
+  ...rest
+}, ref) => {
   const {
     mode
   } = GridContext.useGridSettings();
@@ -65,6 +64,7 @@ const Column = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
       className: customClassName,
       sm: sm,
       md: md,
+      ref: ref,
       lg: lg,
       xlg: xlg,
       max: max
@@ -143,19 +143,19 @@ Column.propTypes = {
    */
   xlg: spanPropType
 };
-function CSSGridColumn(_ref2) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className: containerClassName,
-    sm,
-    md,
-    lg,
-    xlg,
-    max,
-    span,
-    ...rest
-  } = _ref2;
+const CSSGridColumn = /*#__PURE__*/React__default["default"].forwardRef(({
+  as: BaseComponent = 'div',
+  children,
+  className: containerClassName,
+  sm,
+  md,
+  lg,
+  xlg,
+  max,
+  span,
+  ...rest
+}, ref) => {
+  // Add ref parameter
   const prefix = usePrefix.usePrefix();
   const breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
   const spanClassName = getClassNameForSpan(span, prefix);
@@ -163,9 +163,10 @@ function CSSGridColumn(_ref2) {
     [`${prefix}--css-grid-column`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
-    className: className
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 CSSGridColumn.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/lib/components/Grid/ColumnHang.js

@@ -25,13 +25,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Helper component for rendering content that hangs on the column. Useful when
  * trying to align content across different gutter modes
  */
-function ColumnHang(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    className: customClassName,
-    children,
-    ...rest
-  } = _ref;
+function ColumnHang({
+  as: BaseComponent = 'div',
+  className: customClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](customClassName, `${prefix}--grid-column-hang`);
   // cast as any to let TypeScript allow passing in attributes to base component

package/lib/components/Grid/FlexGrid.js

@@ -22,16 +22,15 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    condensed = false,
-    narrow = false,
-    fullWidth = false,
-    className: containerClassName,
-    children,
-    ...rest
-  } = _ref;
+const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  condensed = false,
+  narrow = false,
+  fullWidth = false,
+  className: containerClassName,
+  children,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, {
     [`${prefix}--grid`]: true,

package/lib/components/Grid/GridContext.js

@@ -25,12 +25,11 @@ const GridSettingsContext = /*#__PURE__*/React__default["default"].createContext
   mode: 'flexbox',
   subgrid: false
 });
-const GridSettings = _ref => {
-  let {
-    children,
-    mode,
-    subgrid = false
-  } = _ref;
+const GridSettings = ({
+  children,
+  mode,
+  subgrid = false
+}) => {
   const value = React__default["default"].useMemo(() => {
     return {
       mode,

package/lib/components/Grid/Row.js

@@ -21,15 +21,14 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Row(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    condensed = false,
-    narrow = false,
-    className: containerClassName,
-    children,
-    ...rest
-  } = _ref;
+function Row({
+  as: BaseComponent = 'div',
+  condensed = false,
+  narrow = false,
+  className: containerClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, {
     [`${prefix}--row`]: true,

package/lib/components/Heading/index.js

@@ -19,12 +19,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
-const Section = /*#__PURE__*/React__default["default"].forwardRef(function Section(_ref, ref) {
-  let {
-    as: BaseComponent = 'section',
-    level: levelOverride,
-    ...rest
-  } = _ref;
+const Section = /*#__PURE__*/React__default["default"].forwardRef(function Section({
+  as: BaseComponent = 'section',
+  level: levelOverride,
+  ...rest
+}, ref) {
   const parentLevel = React__default["default"].useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
   const BaseComponentAsAny = BaseComponent;