rsuite 6.0.0-canary-20250315 → 6.0.0-canary-2025031915

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;

package/cjs/InputPicker/InputPicker.js

@@ -19,6 +19,7 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _useInput = _interopRequireDefault(require("./hooks/useInput"));
 var _useData = _interopRequireDefault(require("./hooks/useData"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/Tree/utils");
 var _hooks = require("../internals/hooks");
 var _constants = require("../internals/constants");
@@ -40,11 +41,12 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('InputPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     cleanable = true,
     cacheData = [],
     classPrefix = 'picker',
+    caretAs,
     data: controlledData = [],
     disabled,
     readOnly,
@@ -74,6 +76,8 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     listProps,
     id,
     tabIndex,
+    loading,
+    label,
     sort,
     renderListbox,
     renderExtraFooter,
@@ -412,6 +416,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     trigger: triggerRef,
     target,
     overlay,
+    loading,
     ...events,
     ...rest
   });
@@ -581,7 +586,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     [prefix`disabled-options`]: disabledOptions
   });
   const searching = !!searchKeyword && open;
-  const editable = searchable && !disabled && !rest.loading;
+  const editable = searchable && !disabled && !loading;
   if (plaintext) {
     const plaintextProps = {};
 
@@ -609,18 +614,22 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
     speaker: renderPopup,
     placement: placement
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: classes,
     style: style,
     onClick: focus,
     onKeyDown: onPickerKeyDown,
     ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+  }, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys])), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {
+    loading: loading,
+    label: label,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
     ref: target,
     as: toggleAs,
+    caretAs: caretAs,
     tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
@@ -632,7 +641,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     focusItemValue: focusItemValue,
     caret: !disabledOptions,
     size: size
-  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
+  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
     showTagList: multi,
     inputRef: inputRef,
     inputValue: open ? searchKeyword : '',

package/cjs/Kbd/Kbd.d.ts

@@ -1,5 +1,6 @@
-import type { WithAsProps, Size } from '../internals/types';
-export interface KbdProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface KbdProps extends BoxProps {
     /**
      * Sets Kbd size.
      */

package/cjs/Kbd/Kbd.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");
@@ -20,7 +21,7 @@ const Kbd = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Kbd', props);
   const {
-    as: Component = 'kbd',
+    as = 'kbd',
     classPrefix = 'kbd',
     className,
     size = 'md',
@@ -31,7 +32,9 @@ const Kbd = (0, _utils.forwardRef)((props, ref) => {
     merge
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix(size));
-  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/List/List.d.ts

@@ -1,6 +1,6 @@
 import { SortConfig } from './helper/useSortHelper';
-import type { WithAsProps } from '../internals/types';
-export interface ListProps extends WithAsProps, SortConfig {
+import { BoxProps } from '../internals/Box';
+export interface ListProps extends BoxProps, SortConfig {
     /**
      * Size of list item.
      */