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

package/esm/Tooltip/Tooltip.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -14,7 +15,7 @@ const Tooltip = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Tooltip', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'tooltip',
     children,
@@ -33,7 +34,8 @@ const Tooltip = forwardRef((props, ref) => {
   const styles = useMemo(() => mergeStyles(style, {
     ['--rs-opacity']: visible ? 1 : undefined
   }), [visible, style]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "tooltip"
   }, rest, {
     ref: ref,

package/esm/Tree/Tree.d.ts

@@ -1,4 +1,4 @@
-import { type TreeViewProps } from './TreeView';
+import { TreeViewProps } from './TreeView';
 import type { TreeExtraProps, WithTreeDragProps } from './types';
 export interface TreeProps<T = string | number | null> extends WithTreeDragProps<TreeViewProps<T>>, TreeExtraProps {
     /**

package/esm/Tree/TreeNode.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import type { TreeNode as TreeNodeData } from '../internals/Tree/types';
 export type DragStatus = 'drag-over' | 'drag-over-top' | 'drag-over-bottom';
 interface TreeDragEventProps {
@@ -31,7 +31,7 @@ interface TreeDragEventProps {
 /**
  * Props for the TreeNode component.
  */
-export interface TreeNodeProps extends WithAsProps, TreeDragEventProps {
+export interface TreeNodeProps extends BoxProps, TreeDragEventProps {
     /**
      * The layer of the node in the tree hierarchy.
      */

package/esm/Tree/TreeNode.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import TreeNodeToggle from "./TreeNodeToggle.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeRefs, stringifyReactNode, mergeStyles } from "../internals/utils/index.js";
 import { useFocusVirtualListItem, useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { useTreeContextProps } from "../internals/Tree/TreeProvider.js";
@@ -14,7 +15,7 @@ import { useCustom } from "../CustomProvider/index.js";
 
 const TreeNode = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     label,
     layer,
     active,
@@ -101,9 +102,10 @@ const TreeNode = forwardRef((props, ref) => {
   }));
   const treeItemRef = useFocusVirtualListItem(focus);
   const styles = virtualized ? mergeStyles(style, indentTreeNode(rtl, layer - 1)) : style;
-  return visible ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    ref: mergeRefs(treeItemRef, ref),
+  return visible ? /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "treeitem",
+    ref: mergeRefs(treeItemRef, ref),
     tabIndex: -1,
     "aria-expanded": expanded,
     "aria-label": labelStr,
@@ -123,7 +125,7 @@ const TreeNode = forwardRef((props, ref) => {
     onDragLeave: handleDragLeave,
     onDragEnd: handleDragEnd,
     onDrop: handleDrop
-  }), /*#__PURE__*/React.createElement(TreeNodeToggle, {
+  }, rest), /*#__PURE__*/React.createElement(TreeNodeToggle, {
     "aria-label": (expanded ? 'Collapse' : 'Expand') + ` ${labelStr}`,
     data: nodeData,
     loading: loading,

package/esm/Tree/TreeView.js

@@ -10,6 +10,7 @@ import useFocusTree from "./hooks/useFocusTree.js";
 import useVirtualizedTreeData from "./hooks/useVirtualizedTreeData.js";
 import useTreeNodeProps from "./hooks/useTreeNodeProps.js";
 import SearchBox from "../internals/SearchBox/index.js";
+import Box from "../internals/Box/index.js";
 import { List, AutoSizer, defaultItemSize } from "../internals/Windowing/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { getPathTowardsItem, getKeyParentMap } from "../internals/Tree/utils/index.js";
@@ -29,7 +30,7 @@ import { useCustom } from "../CustomProvider/index.js";
 
 const TreeView = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     data = [],
     style,
     showIndentLine,
@@ -250,7 +251,8 @@ const TreeView = forwardRef((props, ref) => {
     virtualized
   }), className);
   const formattedNodes = getFormattedNodes(renderNode);
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     ref: ref,
     className: classes,
     style: style

package/esm/Tree/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { StandardProps } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
 import type { ListProps } from '../internals/Windowing';
 import type { TreeNode } from '../internals/Tree/types';
 /**
@@ -80,7 +80,7 @@ export type WithTreeDragProps<P> = P & TreeDragProps;
 /**
  * Represents the props for the Tree component.
  */
-export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends StandardProps {
+export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends BoxProps {
     /**
      * The height of the tree.
      */

package/esm/TreePicker/TreePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TreeViewProps } from '../Tree/TreeView';
+import { TreeViewProps } from '../Tree/TreeView';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
 import { TreeNode } from '../internals/Tree/types';

package/esm/TreePicker/TreePicker.js

@@ -10,6 +10,7 @@ import useFlattenTree from "../Tree/hooks/useFlattenTree.js";
 import useFocusState from "./hooks/useFocusState.js";
 import useExpandTree from "../Tree/hooks/useExpandTree.js";
 import TreeView from "../Tree/TreeView.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { getActiveItem, getTreeActiveNode } from "../Tree/utils/index.js";
@@ -26,7 +27,7 @@ const TreePicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('TreePicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     classPrefix = 'picker',
     cleanable = true,
@@ -260,7 +261,8 @@ const TreePicker = forwardRef((props, ref) => {
     ref: trigger,
     placement: placement,
     speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/React.createElement(Component, {
+  }, triggerProps), /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/Uploader/UploadFileItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { FileType } from './Uploader';
-import type { WithAsProps } from '../internals/types';
 import type { UploaderLocale } from '../locales';
-export interface UploadFileItemProps extends WithAsProps {
+export interface UploadFileItemProps extends BoxProps {
     file: FileType;
     listType?: 'text' | 'picture-text' | 'picture';
     disabled?: boolean;

package/esm/Uploader/UploadFileItem.js

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import Attachment from '@rsuite/icons/Attachment';
 import Reload from '@rsuite/icons/Reload';
 import CloseButton from "../internals/CloseButton/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { previewFile } from "./utils/previewFile.js";
@@ -31,7 +32,7 @@ export const formatSize = function (size) {
 };
 const UploadFileItem = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     disabled,
     allowReupload = true,
     file,
@@ -237,18 +238,24 @@ const UploadFileItem = forwardRef((props, ref) => {
     }, renderFileInfo ? renderFileInfo(file, fileElement) : fileElement, renderErrorStatus(), renderFileSize()));
   };
   if (listType === 'picture') {
-    return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as
+    }, rest, {
       ref: ref,
       className: classes
     }), renderIcon(), renderPreview(), renderErrorStatus(), renderRemoveButton());
   }
   if (listType === 'picture-text') {
-    return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as
+    }, rest, {
       ref: ref,
       className: classes
     }), renderIcon(), renderPreview(), renderFilePanel(), renderProgressBar(), renderRemoveButton());
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), renderIcon(), renderFilePanel(), renderProgressBar(), renderRemoveButton());

package/esm/Uploader/UploadTrigger.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { ButtonProps } from '../Button';
 import type { UploaderLocale } from '../locales';
 export interface UploadTriggerProps extends ButtonProps {
+    children?: React.ReactElement<any>;
+    className?: string;
+    disabled?: boolean;
     name?: string;
     multiple?: boolean;
-    disabled?: boolean;
     readOnly?: boolean;
     draggable?: boolean;
     accept?: string;

package/esm/Uploader/UploadTrigger.js

@@ -3,7 +3,9 @@ import React, { useRef, useState, useImperativeHandle } from 'react';
 import Button from "../Button/index.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
+import classNames from 'classnames';
 const UploadTrigger = forwardRef((props, ref) => {
+  var _children$props;
   const {
     as: Component = Button,
     name,
@@ -27,11 +29,10 @@ const UploadTrigger = forwardRef((props, ref) => {
   const [dragOver, setDragOver] = useState(false);
   const inputRef = useRef(null);
   const {
-    merge,
     withPrefix,
     prefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
+  const classes = classNames(className, withPrefix({
     disabled,
     customize: children,
     'drag-over': dragOver
@@ -75,19 +76,25 @@ const UploadTrigger = forwardRef((props, ref) => {
     root: rootRef.current,
     clearInput: handleClearInput
   }));
+
+  // Prepare button props with event handlers conditionally applied
   const buttonProps = {
     ...rest,
     disabled,
-    className: prefix('btn')
+    className: prefix('btn'),
+    // Only add event handlers if component is interactive
+    ...(!disabled && !readOnly && {
+      onClick: handleClick,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop
+    })
   };
-  if (!disabled && !readOnly) {
-    buttonProps.onClick = handleClick;
-    buttonProps.onDragEnter = handleDragEnter;
-    buttonProps.onDragLeave = handleDragLeave;
-    buttonProps.onDragOver = handleDragOver;
-    buttonProps.onDrop = handleDrop;
-  }
-  const trigger = children ? (/*#__PURE__*/React.cloneElement(React.Children.only(children), buttonProps)) : /*#__PURE__*/React.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
+  const trigger = children ? (/*#__PURE__*/React.cloneElement(children, {
+    ...buttonProps,
+    className: classNames((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.className, prefix('btn'))
+  })) : /*#__PURE__*/React.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
   return /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
     className: classes

package/esm/Uploader/Uploader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ErrorStatus } from './utils/ajaxUpload';
 import { UploadTriggerProps } from './UploadTrigger';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import type { UploaderLocale } from '../locales';
 export interface FileType {
     /** File Name */
@@ -21,7 +21,7 @@ export interface UploaderInstance {
     root: HTMLElement;
     start: (file?: FileType) => void;
 }
-export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
+export interface UploaderProps extends BoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
     /**
      * Custom ref for Uploader
      */
@@ -33,7 +33,7 @@ export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'on
     /** Automatically upload files after selecting them */
     autoUpload?: boolean;
     /** Primary content */
-    children?: React.ReactNode;
+    children?: React.ReactElement;
     /** List of uploaded files */
     defaultFileList?: FileType[];
     /** List of uploaded files （Controlled） */

package/esm/Uploader/Uploader.js

@@ -6,6 +6,7 @@ import FileItem from "./UploadFileItem.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import ajaxUpload from "./utils/ajaxUpload.js";
 import UploadTrigger from "./UploadTrigger.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, guid } from "../internals/utils/index.js";
 import { useStyles, useWillUnmount, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -92,7 +93,7 @@ const Uploader = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Uploader', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'uploader',
     className,
     listType = 'text',
@@ -382,7 +383,8 @@ const Uploader = forwardRef((props, ref) => {
   if (listType === 'picture') {
     renderList.reverse();
   }
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     ref: rootRef,
     className: classes,
     style: style

package/esm/VisuallyHidden/VisuallyHidden.d.ts

@@ -6,8 +6,5 @@ export type VisuallyHiddenProps = ComponentProps;
  * @version 5.52.0
  * @see https://rsuitejs.com/components/visually-hidden/
  */
-declare const VisuallyHidden: import("../internals/types").InternalRefForwardingComponent<"span", Partial<{
-    name: string;
-    componentAs: "span";
-}>, never> & Record<string, never>;
+declare const VisuallyHidden: import("../internals/types").InternalRefForwardingComponent<"span", Partial<ComponentProps>, never> & Record<string, never>;
 export default VisuallyHidden;

package/esm/internals/Box/Box.d.ts

@@ -1,12 +1,10 @@
 import { CSSProperties as CSS } from 'react';
 import type { WithAsProps, Breakpoints, ColorScheme, Size } from '../types';
 export interface BoxProps extends WithAsProps {
-    /** Override the 'as' prop when Box is used as a base component */
-    componentAs?: WithAsProps['as'];
-    /** Display element */
-    visible?: Breakpoints;
-    /** Hide element */
-    hidden?: Breakpoints;
+    /** Breakpoint below which the component is shown with `display: block` */
+    showFrom?: Breakpoints;
+    /** Breakpoint above which the component is hidden with `display: none` */
+    hideFrom?: Breakpoints;
     /** Display property */
     display?: CSS['display'];
     /** Padding */
@@ -29,15 +27,21 @@ export interface BoxProps extends WithAsProps {
     w?: CSS['width'];
     h?: CSS['height'];
     /** Box Color */
-    color?: ColorScheme | CSS['color'];
+    c?: ColorScheme | CSS['color'];
+    /** Box Border */
+    bd?: CSS['border'];
     /** Box Background */
     bg?: ColorScheme | CSS['backgroundColor'];
     /** Box Border Radius */
     rounded?: Size | CSS['borderRadius'] | 'full';
-    /** Box Border */
-    border?: CSS['border'];
     /** Box Shadow */
     shadow?: Size | CSS['boxShadow'];
 }
+/**
+ * Box component is the base component for all components,
+ * providing shorthand for style properties.
+ *
+ * @see https://rsuitejs.com/components/box
+ */
 declare const Box: import("../types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>;
 export default Box;

package/esm/internals/Box/Box.js

@@ -1,37 +1,37 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { forwardRef, mergeStyles } from "../utils/index.js";
-import { useStyles } from "../hooks/index.js";
+import isEmpty from 'lodash/isEmpty';
+import { mergeStyles } from "../utils/index.js";
+import { forwardRef } from "../utils/forwardRef.js";
 import { getBoxCSSVariables, extractBoxProps, omitBoxProps } from "./utils.js";
+/**
+ * Box component is the base component for all components,
+ * providing shorthand for style properties.
+ *
+ * @see https://rsuitejs.com/components/box
+ */
 const Box = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
-    classPrefix = 'box',
     className,
     children,
-    componentAs,
-    visible,
-    hidden,
+    showFrom,
+    hideFrom,
     style,
     ...rest
   } = props;
   const boxProps = extractBoxProps(rest);
   const domProps = omitBoxProps(rest);
-  const {
-    merge,
-    withPrefix
-  } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
-    [`visible-${visible}`]: visible,
-    [`hidden-${hidden}`]: hidden
-  }));
   const boxCSSVars = getBoxCSSVariables(boxProps);
   const boxStyle = mergeStyles(style, boxCSSVars);
-  const FinalComponent = componentAs || Component;
-  return /*#__PURE__*/React.createElement(FinalComponent, _extends({
+  const isBox = !isEmpty(boxCSSVars) || showFrom || hideFrom;
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: classes,
+    "data-rs": isBox ? 'box' : undefined,
+    "data-visible-from": showFrom,
+    "data-hidden-from": hideFrom,
+    className: className,
     style: boxStyle
   }, domProps), children);
 });

package/esm/internals/Box/utils.js

@@ -30,7 +30,7 @@ const sizeStyleMap = {
 };
 
 // Derive box property keys from style mappings
-const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'rounded', 'border', 'shadow', 'display', 'color', 'bg'];
+const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];
 
 /**
  * Extract box properties from props
@@ -94,14 +94,14 @@ export const getBoxCSSVariables = props => {
       cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
     }
   });
-  if (props.border !== undefined) {
-    cssVars['--rs-box-border'] = getCssValue(props.border);
+  if (props.bd !== undefined) {
+    cssVars['--rs-box-bd'] = getCssValue(props.bd);
   }
   if (props.display !== undefined) {
     cssVars['--rs-box-display'] = props.display;
   }
-  if (props.color !== undefined) {
-    cssVars['--rs-box-color'] = getColorVar(props.color);
+  if (props.c !== undefined) {
+    cssVars['--rs-box-c'] = getColorVar(props.c);
   }
   if (props.bg !== undefined) {
     cssVars['--rs-box-bg'] = getColorVar(props.bg);

package/esm/internals/Menu/useRenderMenuItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function useRenderMenuItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => React.JSX.Element;
+export declare function useRenderMenuItem(as: React.ElementType): (props: any, overrideAs?: React.ElementType) => React.JSX.Element;

package/esm/internals/Menu/useRenderMenuItem.js

@@ -1,17 +1,25 @@
 'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback } from 'react';
-export function useRenderMenuItem(Component) {
-  return useCallback((props, OverrideComponent) => {
-    if (Component === 'li') {
-      if (OverrideComponent) {
+import Box from "../Box/index.js";
+export function useRenderMenuItem(as) {
+  return useCallback((props, overrideAs) => {
+    if (as === 'li') {
+      if (overrideAs) {
         return /*#__PURE__*/React.createElement("li", {
           role: "none presentation"
-        }, /*#__PURE__*/React.createElement(OverrideComponent, props));
+        }, /*#__PURE__*/React.createElement(Box, _extends({
+          as: overrideAs
+        }, props)));
       }
-      return /*#__PURE__*/React.createElement(Component, props);
+      return /*#__PURE__*/React.createElement(Box, _extends({
+        as: as
+      }, props));
     }
     return /*#__PURE__*/React.createElement("li", {
       role: "none presentation"
-    }, /*#__PURE__*/React.createElement(Component, props));
-  }, [Component]);
+    }, /*#__PURE__*/React.createElement(Box, _extends({
+      as: as
+    }, props)));
+  }, [as]);
 }

package/esm/internals/Overlay/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsPropsWithoutChildren, AnimationEventProps } from '../types';
-export interface BaseModalProps extends WithAsPropsWithoutChildren, AnimationEventProps {
+import { BoxProps } from '../Box';
+import type { AnimationEventProps } from '../types';
+export interface BaseModalProps extends Omit<BoxProps, 'children'>, AnimationEventProps {
     /** Animation-related properties */
     animationProps?: any;
     /** Primary content */

package/esm/internals/Overlay/Modal.js

@@ -6,6 +6,7 @@ import contains from 'dom-lib/contains';
 import on from 'dom-lib/on';
 import ModalManager from "./ModalManager.js";
 import Fade from "../../Animation/Fade.js";
+import Box from "../Box/index.js";
 import { OverlayProvider } from "./OverlayProvider.js";
 import { KEY_VALUES } from "../constants/index.js";
 import { usePortal, useWillUnmount, useEventCallback } from "../hooks/index.js";
@@ -39,7 +40,7 @@ const useModalManager = () => {
 };
 const Modal = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     children,
     transition: Transition,
     dialogTransitionTimeout,
@@ -208,7 +209,9 @@ const Modal = forwardRef((props, ref) => {
   }), children) : children;
   return /*#__PURE__*/React.createElement(OverlayProvider, {
     overlayContainer: overlayContainer
-  }, /*#__PURE__*/React.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: mergeRefs(modal.setDialogRef, ref),
     style: style,
     className: className,

package/esm/internals/Picker/PickerToggle.d.ts

@@ -31,5 +31,5 @@ export interface PickerToggleProps<T = OptionValue> extends ToggleButtonProps {
     focusItemValue?: T | null;
     onClean?: (event: React.MouseEvent) => void;
 }
-declare const PickerToggle: import("../types").InternalRefForwardingComponent<React.ForwardRefExoticComponent<import("../..").ButtonProps & React.RefAttributes<HTMLDivElement>>, PickerToggleProps<OptionValue>, never> & Record<string, never>;
+declare const PickerToggle: import("../types").InternalRefForwardingComponent<React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLDivElement>>, PickerToggleProps<OptionValue>, never> & Record<string, never>;
 export default PickerToggle;

package/esm/internals/Picker/ToggleButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ButtonProps } from '../../Button';
-export type ToggleButtonProps = ButtonProps;
-declare const ToggleButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLDivElement>>;
+export type ToggleButtonProps = Omit<ButtonProps, 'color'>;
+declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLDivElement>>;
 export default ToggleButton;

package/esm/internals/Picker/hooks/useCombobox.d.ts

@@ -1,6 +1,6 @@
 declare function useCombobox(): {
     id: string | undefined;
-    popupType: "dialog" | "menu" | "listbox" | "grid" | "tree" | undefined;
+    popupType: "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
     multiple: boolean | undefined;
     placement: import("../../types").Placement | undefined;
     labelId: string | undefined;

package/esm/internals/Plaintext/Plaintext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
+import { BoxProps } from '../Box';
 type LocaleKey = 'unfilled' | 'notSelected' | 'notUploaded';
-export interface PlaintextProps extends WithAsProps {
+export interface PlaintextProps extends BoxProps {
     placeholder?: React.ReactNode;
     localeKey?: LocaleKey;
 }

package/esm/internals/Plaintext/Plaintext.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../Box/index.js";
 import { forwardRef } from "../utils/index.js";
 import { useStyles } from "../hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
@@ -13,7 +14,7 @@ const Plaintext = forwardRef((props, ref) => {
     getLocale
   } = useCustom();
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'plaintext',
     className,
     children,
@@ -28,7 +29,8 @@ const Plaintext = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     empty: !children
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "text"
   }, rest, {
     ref: ref,