rsuite 6.0.0-canary-20250315 → 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/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
      */

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'];
-    /** Breakpoint below which the component is hidden with `display: none` */
-    visible?: Breakpoints;
+    /** Breakpoint below which the component is shown with `display: block` */
+    showFrom?: Breakpoints;
     /** Breakpoint above which the component is hidden with `display: none` */
-    hidden?: Breakpoints;
+    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,35 +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,
-    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-from-${visible}`]: visible,
-    [`hidden-from-${hidden}`]: hidden
-  }));
   const boxCSSVars = getBoxCSSVariables(boxProps);
   const boxStyle = mergeStyles(style, boxCSSVars);
+  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,

package/esm/internals/Tree/TreeView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-interface TreeViewProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
+import { BoxProps } from '../Box';
+interface TreeViewProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
     treeRootClassName: string;
     multiselectable?: boolean;
     height?: number;

package/esm/internals/Tree/TreeView.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import useCombobox from "../Picker/hooks/useCombobox.js";
 import ScrollView from "../ScrollView/index.js";
+import Box from "../Box/index.js";
 import { useTreeContextProps } from "./TreeProvider.js";
 import { forwardRef } from "../utils/index.js";
 const ScrollShadowView = forwardRef((props, ref) => {
@@ -32,14 +33,15 @@ const TreeView = forwardRef((props, ref) => {
   } = useCombobox();
 
   // If the tree is virtualized, the scroll shadow is not needed.
-  const Component = scrollShadow && !virtualized ? ScrollShadowView : as;
+  const treeAs = scrollShadow && !virtualized ? ScrollShadowView : as;
 
   // If the tree is virtualized, the height is not needed.
   const viewStyles = {
     height: virtualized ? undefined : height,
     ...style
   };
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: treeAs,
     role: "tree",
     style: viewStyles,
     id: id ? `${id}-${popupType}` : undefined,

package/esm/internals/types/picker.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './placement';
 import type { ToArray } from './utils';
 import type { FormControlBaseProps } from './form';
 import type { AnimationEventProps } from './animation';
-import type { WithAsProps } from './shared';
+import type { BoxProps } from '../Box';
 import type { Size } from './sizes';
 import type { PickerHandle } from '../Picker/types';
 export interface Option<T = number | string> extends Record<string, any> {
@@ -90,7 +90,7 @@ export interface DataProps<TData> {
      */
     childrenKey?: string;
 }
-export interface PickerBaseProps<L = any> extends PopupProps, WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, AnimationEventProps {
     id?: string;
     /**
      * Custom Ref for the picker

package/esm/internals/utils/colours.d.ts

@@ -7,7 +7,7 @@ import { Color } from '../types/colours';
  */
 export declare const getColorVar: (color: Color | string | undefined) => string | undefined;
 export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
-export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, component?: string | undefined, prop?: string) => {
+export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | (string & {}) | undefined;
 } | undefined;
 /**

package/esm/internals/utils/createComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-export type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
+import Box, { BoxProps } from '../Box/Box';
+export type ComponentProps = BoxProps & React.HTMLAttributes<HTMLDivElement>;
 interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     componentAs?: T;
@@ -8,6 +8,7 @@ interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDi
 }
 /**
  * Create a component with `classPrefix` and `as` attributes.
+ * By default, the component is based on Box component and inherits all Box props.
  */
-export declare function createComponent<T extends React.ElementType = 'div', P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
+export declare function createComponent<T extends React.ElementType = typeof Box, P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
 export default createComponent;