@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/lib/components/FluidMultiSelect/FluidMultiSelect.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 FluidMultiSelectSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidMultiSelectSkeleton = ({
+  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/FluidMultiSelect/FluidMultiSelect.js

@@ -24,13 +24,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidMultiSelect(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    isFilterable,
-    ...other
-  } = _ref;
+const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidMultiSelect({
+  className,
+  isCondensed,
+  isFilterable,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

package/lib/components/FluidNumberInput/FluidNumberInput.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 FluidNumberInputSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidNumberInputSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {

package/lib/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { type NumberFormatOptions } from '@carbon/utilities';
 export interface FluidNumberInputProps {
     /**
      * `true` to allow empty string.
@@ -26,6 +27,13 @@ export interface FluidNumberInputProps {
      * Specify if the control should be disabled, or not
      */
     disabled?: boolean;
+    /**
+     * **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?: NumberFormatOptions;
     /**
      * Provide a description for up/down icons that can be read by screen readers
      */
@@ -34,6 +42,12 @@ export interface FluidNumberInputProps {
      * Specify a custom `id` for the input
      */
     id: string;
+    /**
+     * 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?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
     /**
      * Specify if the currently value is invalid.
      */
@@ -47,6 +61,12 @@ export interface FluidNumberInputProps {
      * this field is for
      */
     label?: React.ReactNode;
+    /**
+     * **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?: string;
     /**
      * The maximum value.
      */
@@ -55,7 +75,15 @@ export interface FluidNumberInputProps {
      * The minimum value.
      */
     min?: number;
-    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+    /**
+     * 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?: (event: React.MouseEvent<HTMLButtonElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>, state: {
         value: number | string;
         direction: string;
     }) => void;
@@ -70,6 +98,11 @@ export interface FluidNumberInputProps {
      * Provide an optional function to be called when a key is pressed in the number input
      */
     onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * When type="text", provide an optional pattern to restrict user input. Has
+     * no effect when type="number".
+     */
+    pattern?: string;
     /**
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
@@ -78,6 +111,12 @@ export interface FluidNumberInputProps {
      * Provide custom text for the component for each translation id
      */
     translateWithId?: (id: string) => string;
+    /**
+     * **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?: 'number' | 'text';
     /**
      * Specify the value of the input
      */

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.d.ts

@@ -1,13 +1,12 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
-export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface FormGroupProps extends HTMLAttributes<HTMLFieldSetElement> {
     /**
      * Provide the children form elements to be rendered inside of the <fieldset>
      */

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,