rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250319

package/cjs/Dropdown/DropdownItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { DeprecatedDropdownItemProps } from './types';
 interface DeprecatedDropdownMenuItemProps extends DeprecatedDropdownItemProps {
     /**
@@ -10,7 +11,7 @@ interface DeprecatedDropdownMenuItemProps extends DeprecatedDropdownItemProps {
      */
     divider?: boolean;
 }
-export interface DropdownMenuItemProps<T = any> extends WithAsProps, DeprecatedDropdownMenuItemProps, HTMLPropsWithoutSelect {
+export interface DropdownMenuItemProps<T = any> extends BoxProps, DeprecatedDropdownMenuItemProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
     /** Disable the current option */

package/cjs/Dropdown/DropdownItem.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const DropdownItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'dropdown-item',
     className,
@@ -79,7 +79,7 @@ const DropdownItem = (0, _utils.forwardRef)((props, ref) => {
       };
     }
   }, [internalId, selected, dispatch]);
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
 
   // If using <Dropdown.Item> within <Nav>
   // Suggest <Nav.Item>

package/cjs/Footer/Footer.d.ts

@@ -4,8 +4,5 @@ export type FooterProps = ComponentProps;
  * The `<Footer>` component is used to specify the footer of the page.
  * @see https://rsuitejs.com/components/container/
  */
-declare const Footer: import("../internals/types").InternalRefForwardingComponent<"footer", Partial<{
-    name: string;
-    componentAs: "footer";
-}>, never> & Record<string, never>;
+declare const Footer: import("../internals/types").InternalRefForwardingComponent<"footer", Partial<ComponentProps>, never> & Record<string, never>;
 export default Footer;

package/cjs/Grid/Col.d.ts

@@ -1,6 +1,7 @@
-import type { WithAsProps, ResponsiveValue } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { ResponsiveValue } from '../internals/types';
 import type { DeprecatedColProps } from './types';
-export interface ColProps extends WithAsProps {
+export interface ColProps extends BoxProps {
     /** Grid column span for different breakpoints */
     span?: number | 'auto' | ResponsiveValue<number | 'auto'>;
     /** Grid column offset for different breakpoints */

package/cjs/Grid/Col.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _constants = require("../internals/constants");
 var _hooks = require("../internals/hooks");
@@ -22,7 +23,7 @@ const Col = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Col', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'col',
     className,
     span,
@@ -105,7 +106,9 @@ const Col = (0, _utils.forwardRef)((props, ref) => {
   }, [prefix, rootPrefix, span, offset, push, pull, order, hidden, ..._constants.BREAKPOINTS.map(size => rest[size])]);
   const classes = merge(className, withPrefix(), colClasses);
   const unhandledProps = (0, _omit.default)(rest, Object.keys(omitKeys));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, unhandledProps, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, unhandledProps, {
     ref: ref,
     className: classes
   }));

package/cjs/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface GridProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface GridProps extends BoxProps {
     /** Whether the grid container should have a fluid width */
     fluid?: boolean;
 }

package/cjs/Grid/Grid.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -18,7 +19,7 @@ const Grid = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Grid', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'grid-container',
     className,
     fluid,
@@ -32,7 +33,9 @@ const Grid = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, fluid ? prefix({
     fluid
   }) : withPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/cjs/Grid/Row.d.ts

@@ -1,6 +1,7 @@
-import type { WithAsProps, ResponsiveValue } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { ResponsiveValue } from '../internals/types';
 import type { RowAlignment, RowJustify } from './types';
-export interface RowProps extends WithAsProps {
+export interface RowProps extends BoxProps {
     /** Spacing between columns. Support responsive values */
     gutter?: number | string | ResponsiveValue<number | string>;
     /** Vertical alignment of columns. Support responsive values */

package/cjs/Grid/Row.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -22,9 +23,10 @@ const getResponsiveGutterStyles = gutter => {
   return _constants.BREAKPOINTS.reduce((styles, breakpoint) => {
     const breakpointValue = gutter[breakpoint];
     if (!breakpointValue) return styles;
-    return (0, _utils.mergeStyles)(styles, {
+    const newStyles = {
       [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: (0, _utils.getCssValue)(breakpointValue)
-    });
+    };
+    return (0, _utils.mergeStyles)(styles, newStyles);
   }, {});
 };
 /**
@@ -36,7 +38,7 @@ const Row = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Row', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'row',
     style,
@@ -52,7 +54,9 @@ const Row = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix(), ...responsive(align), ...responsive(justify));
   const rowStyles = (0, _utils.mergeStyles)(style, getResponsiveGutterStyles(gutter));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes,
     style: rowStyles

package/cjs/Header/Header.d.ts

@@ -4,8 +4,5 @@ export type HeaderProps = ComponentProps;
  * The `<Header>` component is used to specify the header of the page.
  * @see https://rsuitejs.com/components/container/
  */
-declare const Header: import("../internals/types").InternalRefForwardingComponent<"header", Partial<{
-    name: string;
-    componentAs: "header";
-}>, never> & Record<string, never>;
+declare const Header: import("../internals/types").InternalRefForwardingComponent<"header", Partial<ComponentProps>, never> & Record<string, never>;
 export default Header;

package/cjs/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface HeadingProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface HeadingProps extends BoxProps {
     /**
      * Sets heading level, h1 through h6.
      * @default 3

package/cjs/Heading/Heading.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -31,8 +32,9 @@ const Heading = (0, _utils.forwardRef)((props, ref) => {
     merge
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
-  const Component = as || `h${level}`;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as || `h${level}`
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/cjs/HeadingGroup/HeadingGroup.d.ts

@@ -4,8 +4,5 @@ export type HeadingGroupProps = ComponentProps;
  * HeadingGroup is a group of headings.
  * @see https://rsuitejs.com/components/heading
  */
-declare const HeadingGroup: import("../internals/types").InternalRefForwardingComponent<"hgroup", Partial<{
-    name: string;
-    componentAs: "hgroup";
-}>, never> & Record<string, never>;
+declare const HeadingGroup: import("../internals/types").InternalRefForwardingComponent<"hgroup", Partial<ComponentProps>, never> & Record<string, never>;
 export default HeadingGroup;

package/cjs/Highlight/Highlight.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface HighlightProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface HighlightProps extends BoxProps {
     query?: string | string[];
     renderMark?: (match: string, index: number) => React.ReactNode;
 }

package/cjs/Highlight/Highlight.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _highlightText = require("./utils/highlightText");
 var _utils = require("../internals/utils");
@@ -28,7 +29,7 @@ const Highlight = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Highlight', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'highlight',
     className,
     children,
@@ -42,7 +43,8 @@ const Highlight = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   const text = (0, _utils.stringifyReactNode)(children);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
   }, rest), (0, _highlightText.highlightText)(text, {

package/cjs/Image/Image.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface ImageProps extends WithAsProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+import { BoxProps } from '../internals/Box';
+export interface ImageProps extends Omit<BoxProps, 'rounded'>, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
     /**
      * An image may appear with border.
      */

package/cjs/Image/Image.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _ImageWrapper = require("./ImageWrapper");
 var _useImage = require("./hooks/useImage");
@@ -16,7 +17,7 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Image', props);
   const {
-    as: Component = 'img',
+    as = 'img',
     bordered,
     classPrefix = 'image',
     className,
@@ -68,11 +69,8 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     ['--rs-object-fit']: fit,
     ['--rs-object-position']: position
   };
-  const wrapStyles = {
-    width,
-    height
-  };
-  const image = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  const image = /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     src: imgSrc,
     className: classes,
@@ -82,12 +80,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
   }, imgProps, rest));
   if (zoomed) {
     return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
-      style: wrapStyles
+      w: width,
+      h: height
     }, image);
   }
   if (placeholder) {
     return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
-      style: wrapStyles
+      w: width,
+      h: height
     }, isLoading && placeholder, image);
   }
   return image;

package/cjs/Image/ImageWrapper.d.ts

@@ -1,4 +1,3 @@
-export declare const ImageWrapper: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-    componentAs: "div";
-}>, never> & Record<string, never>;
+import { ComponentProps } from '../internals/utils';
+export type ImageWrapperProps = ComponentProps;
+export declare const ImageWrapper: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;

package/cjs/InlineEdit/InlineEdit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import { ChildrenProps } from './renderChildren';
-import type { WithAsPropsWithoutChildren } from '../internals/types';
-export interface InlineEditProps extends WithAsPropsWithoutChildren {
+export interface InlineEditProps extends Omit<BoxProps, 'children'> {
     /**
      * If true, the InlineEdit will be disabled.
      */

package/cjs/InlineEdit/InlineEdit.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _EditableControls = _interopRequireDefault(require("./EditableControls"));
 var _useFocusEvent = _interopRequireDefault(require("./useFocusEvent"));
 var _useEditState = _interopRequireDefault(require("./useEditState"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _renderChildren = require("./renderChildren");
@@ -18,7 +19,7 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('InlineEdit', props);
   const {
-    as: Component = 'div',
+    as,
     children = _renderChildren.defaultRenderInput,
     classPrefix = 'inline-edit',
     className,
@@ -66,7 +67,8 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     onChange,
     onBlur
   };
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: (0, _utils.mergeRefs)(root, ref),
     tabIndex: 0,
     className: merge(className, withPrefix(size, {

package/cjs/Input/Input.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import { PrependParameters } from '../internals/types/utils';
-import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, WithAsProps, Size } from '../internals/types';
+import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, Size } from '../internals/types';
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
+export interface InputProps extends BoxProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */

package/cjs/Input/Input.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _FormGroup = require("../FormGroup");
 var _InputGroup = require("../InputGroup/InputGroup");
@@ -26,9 +27,9 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Input', props);
   const inputGroup = (0, _react.useContext)(_InputGroup.InputGroupContext);
   const {
+    as = 'input',
     className,
     classPrefix = 'input',
-    as: Component = 'input',
     type = 'text',
     disabled,
     value,
@@ -85,7 +86,9 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
     eventProps.onFocus = (0, _utils.createChainedFunction)(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
     eventProps.onBlur = (0, _utils.createChainedFunction)(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, eventProps, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, eventProps, {
     ref: (0, _utils.mergeRefs)(ref, inputRef),
     className: classes,
     type: type,

package/cjs/InputGroup/InputGroup.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { WithAsProps, Size } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
 export declare const InputGroupContext: React.Context<{
     onFocus: () => void;
     onBlur: () => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } | null>;
-export interface InputGroupProps extends WithAsProps {
+export interface InputGroupProps extends BoxProps {
     /** Sets the composition content internally */
     inside?: boolean;
     /** An Input group can show that it is disabled */

package/cjs/InputGroup/InputGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = exports.InputGroupContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _InputGroupAddon = _interopRequireDefault(require("./InputGroupAddon"));
 var _InputGroupButton = _interopRequireDefault(require("./InputGroupButton"));
 var _utils = require("../internals/utils");
@@ -28,7 +29,7 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('InputGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'input-group',
     className,
     disabled,
@@ -73,7 +74,9 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
   }), [size, handleFocus, handleBlur]);
   return /*#__PURE__*/_react.default.createElement(InputGroupContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), renderChildren()));

package/cjs/InputGroup/InputGroupAddon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface InputGroupAddonProps extends WithAsProps, React.HTMLAttributes<HTMLSpanElement> {
+import { BoxProps } from '../internals/Box';
+export interface InputGroupAddonProps extends BoxProps, React.HTMLAttributes<HTMLSpanElement> {
     /** An Input group addon can show that it is disabled */
     disabled?: boolean;
 }

package/cjs/InputGroup/InputGroupAddon.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 /**
@@ -14,7 +15,7 @@ var _utils = require("../internals/utils");
  */
 const InputGroupAddon = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'span',
+    as = 'span',
     classPrefix = 'input-group-addon',
     className,
     disabled,
@@ -27,7 +28,9 @@ const InputGroupAddon = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     disabled
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/cjs/InputNumber/InputNumber.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, WithAsProps, Size } from '../internals/types';
-export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
+import { BoxProps } from '../internals/Box';
+import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, Size } from '../internals/types';
+export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, BoxProps, FormControlBaseProps<T> {
     /**
      * Button can have different appearances
      */

package/cjs/InputNumber/InputNumber.js

@@ -14,6 +14,7 @@ var _InputGroup = _interopRequireDefault(require("../InputGroup/InputGroup"));
 var _InputGroupAddon = _interopRequireDefault(require("../InputGroup/InputGroupAddon"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _Button = _interopRequireDefault(require("../Button"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _constants = require("../internals/constants");
 var _utils = require("../internals/utils");
@@ -82,7 +83,7 @@ const InputNumber = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('InputNumber', props);
   const {
-    as: Component = _InputGroup.default,
+    as = _InputGroup.default,
     className,
     classPrefix = 'input-number',
     disabled,
@@ -268,7 +269,9 @@ const InputNumber = (0, _utils.forwardRef)((props, ref) => {
   if (plaintext) {
     return input;
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes,
     disabled: disabled,

package/cjs/InputPicker/InputPicker.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { type InputOption } from './hooks/useData';
+import { InputOption } from './hooks/useData';
 import { PickerToggleProps } from '../internals/Picker';
 import type { Option, FormControlPickerProps } from '../internals/types';
 import type { InputPickerLocale } from '../locales';
 import type { SelectProps } from '../SelectPicker';
 export type ValueType = any;
-export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputOption>, Omit<SelectProps<V>, 'renderValue'>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputOption>, Omit<SelectProps<V>, 'renderValue'>, Pick<PickerToggleProps, 'caretAs' | 'loading' | 'label'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;