rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

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

@@ -0,0 +1,236 @@
+import type { AccordionProps } from '../../Accordion';
+import type { AffixProps } from '../../Affix';
+import type { BounceProps } from '../../Animation/Bounce';
+import type { CollapseProps } from '../../Animation/Collapse';
+import type { FadeProps } from '../../Animation/Fade';
+import type { SlideProps } from '../../Animation/Slide';
+import type { TransitionProps } from '../../Animation/Transition';
+import type { AutoCompleteProps } from '../../AutoComplete';
+import type { AvatarProps } from '../../Avatar';
+import type { AvatarGroupProps } from '../../AvatarGroup';
+import type { BadgeProps } from '../../Badge';
+import type { BreadcrumbProps } from '../../Breadcrumb';
+import type { ButtonProps } from '../../Button';
+import type { ButtonGroupProps } from '../../ButtonGroup';
+import type { ButtonToolbarProps } from '../../ButtonToolbar';
+import type { CalendarProps } from '../../Calendar';
+import type { CarouselProps } from '../../Carousel';
+import type { CascadeTreeProps } from '../../CascadeTree';
+import type { CascaderProps } from '../../Cascader';
+import type { CardProps } from '../../Card';
+import type { CardGroupProps } from '../../CardGroup';
+import type { CheckPickerProps } from '../../CheckPicker';
+import type { CheckTreeProps } from '../../CheckTree';
+import type { CheckTreePickerProps } from '../../CheckTreePicker';
+import type { CheckboxProps } from '../../Checkbox';
+import type { CheckboxGroupProps } from '../../CheckboxGroup';
+import type { ColProps } from '../../Col';
+import type { ContainerProps } from '../../Container';
+import type { ContentProps } from '../../Content';
+import type { DateInputProps } from '../../DateInput';
+import type { DatePickerProps } from '../../DatePicker';
+import type { DateRangeInputProps } from '../../DateRangeInput';
+import type { DateRangePickerProps } from '../../DateRangePicker';
+import type { DividerProps } from '../../Divider';
+import type { DrawerProps } from '../../Drawer';
+import type { DropdownProps } from '../../Dropdown';
+import type { FlexboxGridProps } from '../../FlexboxGrid';
+import type { FooterProps } from '../../Footer';
+import type { FormProps } from '../../Form';
+import type { FormControlProps } from '../../FormControl';
+import type { FormControlLabelProps } from '../../FormControlLabel';
+import type { FormErrorMessageProps } from '../../FormErrorMessage';
+import type { FormGroupProps } from '../../FormGroup';
+import type { FormHelpTextProps } from '../../FormHelpText';
+import type { FormStackProps } from '../../FormStack';
+import type { GridProps } from '../../Grid';
+import type { HeaderProps } from '../../Header';
+import type { HeadingProps } from '../../Heading';
+import type { HeadingGroupProps } from '../../HeadingGroup';
+import type { HighlightProps } from '../../Highlight';
+import type { IconButtonProps } from '../../IconButton';
+import type { InlineEditProps } from '../../InlineEdit';
+import type { InputProps } from '../../Input';
+import type { InputGroupProps } from '../../InputGroup';
+import type { NumberInputProps } from '../../NumberInput';
+import type { InputPickerProps } from '../../InputPicker';
+import type { KbdProps } from '../../Kbd';
+import type { ImageProps } from '../../Image';
+import type { LinkProps } from '../../Link';
+import type { ListProps } from '../../List';
+import type { LoaderProps } from '../../Loader';
+import type { MaskedInputProps } from '../../MaskedInput';
+import type { MessageProps } from '../../Message';
+import type { ModalProps } from '../../Modal';
+import type { MultiCascadeTreeProps } from '../../MultiCascadeTree';
+import type { MultiCascaderProps } from '../../MultiCascader';
+import type { NavProps } from '../../Nav';
+import type { NavbarProps } from '../../Navbar';
+import type { NotificationProps } from '../../Notification';
+import type { PasswordInputProps } from '../../PasswordInput';
+import type { PasswordStrengthMeterProps } from '../../PasswordStrengthMeter';
+import type { PaginationProps } from '../../Pagination';
+import type { PanelProps } from '../../Panel';
+import type { PanelGroupProps } from '../../PanelGroup';
+import type { PlaceholderGraphProps } from '../../Placeholder/PlaceholderGraph';
+import type { PlaceholderGridProps } from '../../Placeholder/PlaceholderGrid';
+import type { PlaceholderParagraphProps } from '../../Placeholder/PlaceholderParagraph';
+import type { PopoverProps } from '../../Popover';
+import type { ProgressCircleProps } from '../../Progress/ProgressCircle';
+import type { ProgressLineProps } from '../../Progress/ProgressLine';
+import type { PinInputProps } from '../../PinInput';
+import type { RadioProps } from '../../Radio';
+import type { RadioGroupProps } from '../../RadioGroup';
+import type { RadioTileProps } from '../../RadioTile';
+import type { RadioTileGroupProps } from '../../RadioTileGroup';
+import type { RangeSliderProps } from '../../RangeSlider';
+import type { RateProps } from '../../Rate';
+import type { RowProps } from '../../Row';
+import type { SelectPickerProps } from '../../SelectPicker';
+import type { SidebarProps } from '../../Sidebar';
+import type { SidenavProps } from '../../Sidenav';
+import type { SliderProps } from '../../Slider';
+import type { StackProps } from '../../Stack';
+import type { StepsProps } from '../../Steps';
+import type { StatProps } from '../../Stat';
+import type { StatGroupProps } from '../../StatGroup';
+import type { TableProps } from '../../Table';
+import type { TabsProps } from '../../Tabs';
+import type { TagProps } from '../../Tag';
+import type { TagGroupProps } from '../../TagGroup';
+import type { TagInputProps } from '../../TagInput';
+import type { TagPickerProps } from '../../TagPicker';
+import type { TextProps } from '../../Text';
+import type { TimePickerProps } from '../../TimePicker';
+import type { TimeRangePickerProps } from '../../TimeRangePicker';
+import type { TimelineProps } from '../../Timeline';
+import type { ToggleProps } from '../../Toggle';
+import type { TooltipProps } from '../../Tooltip';
+import type { TreeProps } from '../../Tree';
+import type { TreePickerProps } from '../../TreePicker';
+import type { TextareaProps } from '../../Textarea';
+import type { UploaderProps } from '../../Uploader';
+import type { VisuallyHiddenProps } from '../../VisuallyHidden';
+import type { WhisperProps } from '../../Whisper';
+import type { SafeAnchorProps } from '../SafeAnchor';
+interface ComponentProps<T> {
+    defaultProps: Partial<T>;
+}
+export interface ReactSuiteComponents {
+    Accordion: ComponentProps<AccordionProps>;
+    Affix: ComponentProps<AffixProps>;
+    Bounce: ComponentProps<BounceProps>;
+    Collapse: ComponentProps<CollapseProps>;
+    Fade: ComponentProps<FadeProps>;
+    Slide: ComponentProps<SlideProps>;
+    Transition: ComponentProps<TransitionProps>;
+    AutoComplete: ComponentProps<AutoCompleteProps>;
+    Avatar: ComponentProps<AvatarProps>;
+    AvatarGroup: ComponentProps<AvatarGroupProps>;
+    Badge: ComponentProps<BadgeProps>;
+    Breadcrumb: ComponentProps<BreadcrumbProps>;
+    Button: ComponentProps<ButtonProps>;
+    ButtonGroup: ComponentProps<ButtonGroupProps>;
+    ButtonToolbar: ComponentProps<ButtonToolbarProps>;
+    Calendar: ComponentProps<CalendarProps>;
+    Carousel: ComponentProps<CarouselProps>;
+    CascadeTree: ComponentProps<CascadeTreeProps>;
+    Cascader: ComponentProps<CascaderProps>;
+    Card: ComponentProps<CardProps>;
+    CardGroup: ComponentProps<CardGroupProps>;
+    CheckPicker: ComponentProps<CheckPickerProps>;
+    CheckTree: ComponentProps<CheckTreeProps>;
+    CheckTreePicker: ComponentProps<CheckTreePickerProps>;
+    Checkbox: ComponentProps<CheckboxProps>;
+    CheckboxGroup: ComponentProps<CheckboxGroupProps>;
+    Col: ComponentProps<ColProps>;
+    Container: ComponentProps<ContainerProps>;
+    Content: ComponentProps<ContentProps>;
+    DateInput: ComponentProps<DateInputProps>;
+    DatePicker: ComponentProps<DatePickerProps>;
+    DateRangeInput: ComponentProps<DateRangeInputProps>;
+    DateRangePicker: ComponentProps<DateRangePickerProps>;
+    Divider: ComponentProps<DividerProps>;
+    Drawer: ComponentProps<DrawerProps>;
+    Dropdown: ComponentProps<DropdownProps>;
+    FlexboxGrid: ComponentProps<FlexboxGridProps>;
+    Footer: ComponentProps<FooterProps>;
+    Form: ComponentProps<FormProps>;
+    FormControl: ComponentProps<FormControlProps>;
+    FormControlLabel: ComponentProps<FormControlLabelProps>;
+    FormErrorMessage: ComponentProps<FormErrorMessageProps>;
+    FormGroup: ComponentProps<FormGroupProps>;
+    FormHelpText: ComponentProps<FormHelpTextProps>;
+    FormStack: ComponentProps<FormStackProps>;
+    Grid: ComponentProps<GridProps>;
+    Header: ComponentProps<HeaderProps>;
+    Heading: ComponentProps<HeadingProps>;
+    HeadingGroup: ComponentProps<HeadingGroupProps>;
+    Highlight: ComponentProps<HighlightProps>;
+    IconButton: ComponentProps<IconButtonProps>;
+    InlineEdit: ComponentProps<InlineEditProps>;
+    Input: ComponentProps<InputProps>;
+    InputGroup: ComponentProps<InputGroupProps>;
+    NumberInput: ComponentProps<NumberInputProps>;
+    InputPicker: ComponentProps<InputPickerProps>;
+    Image: ComponentProps<ImageProps>;
+    Kbd: ComponentProps<KbdProps>;
+    Link: ComponentProps<LinkProps>;
+    List: ComponentProps<ListProps>;
+    Loader: ComponentProps<LoaderProps>;
+    MaskedInput: ComponentProps<MaskedInputProps>;
+    Message: ComponentProps<MessageProps>;
+    Modal: ComponentProps<ModalProps>;
+    MultiCascadeTree: ComponentProps<MultiCascadeTreeProps>;
+    MultiCascader: ComponentProps<MultiCascaderProps>;
+    Nav: ComponentProps<NavProps>;
+    Navbar: ComponentProps<NavbarProps>;
+    Notification: ComponentProps<NotificationProps>;
+    PasswordInput: ComponentProps<PasswordInputProps>;
+    PasswordStrengthMeter: ComponentProps<PasswordStrengthMeterProps>;
+    Pagination: ComponentProps<PaginationProps>;
+    Panel: ComponentProps<PanelProps>;
+    PanelGroup: ComponentProps<PanelGroupProps>;
+    PlaceholderGraph: ComponentProps<PlaceholderGraphProps>;
+    PlaceholderGrid: ComponentProps<PlaceholderGridProps>;
+    PlaceholderParagraph: ComponentProps<PlaceholderParagraphProps>;
+    PinInput: ComponentProps<PinInputProps>;
+    Popover: ComponentProps<PopoverProps>;
+    ProgressCircle: ComponentProps<ProgressCircleProps>;
+    ProgressLine: ComponentProps<ProgressLineProps>;
+    Radio: ComponentProps<RadioProps>;
+    RadioGroup: ComponentProps<RadioGroupProps>;
+    RadioTile: ComponentProps<RadioTileProps>;
+    RadioTileGroup: ComponentProps<RadioTileGroupProps>;
+    RangeSlider: ComponentProps<RangeSliderProps>;
+    Rate: ComponentProps<RateProps>;
+    Row: ComponentProps<RowProps>;
+    SelectPicker: ComponentProps<SelectPickerProps>;
+    Sidebar: ComponentProps<SidebarProps>;
+    Sidenav: ComponentProps<SidenavProps>;
+    Slider: ComponentProps<SliderProps>;
+    Stack: ComponentProps<StackProps>;
+    Steps: ComponentProps<StepsProps>;
+    Stat: ComponentProps<StatProps>;
+    StatGroup: ComponentProps<StatGroupProps>;
+    Table: ComponentProps<TableProps>;
+    Tabs: ComponentProps<TabsProps>;
+    Tag: ComponentProps<TagProps>;
+    TagGroup: ComponentProps<TagGroupProps>;
+    TagInput: ComponentProps<TagInputProps>;
+    TagPicker: ComponentProps<TagPickerProps>;
+    Text: ComponentProps<TextProps>;
+    TimePicker: ComponentProps<TimePickerProps>;
+    TimeRangePicker: ComponentProps<TimeRangePickerProps>;
+    Timeline: ComponentProps<TimelineProps>;
+    Toggle: ComponentProps<ToggleProps>;
+    Tooltip: ComponentProps<TooltipProps>;
+    Tree: ComponentProps<TreeProps>;
+    TreePicker: ComponentProps<TreePickerProps>;
+    Textarea: ComponentProps<TextareaProps>;
+    Uploader: ComponentProps<UploaderProps>;
+    VisuallyHidden: ComponentProps<VisuallyHiddenProps>;
+    Whisper: ComponentProps<WhisperProps>;
+    SafeAnchor: ComponentProps<SafeAnchorProps>;
+}
+export {};

package/esm/internals/Provider/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/internals/Ripple/Ripple.js

@@ -4,9 +4,8 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import getOffset from 'dom-lib/getOffset';
 import on from 'dom-lib/on';
 import Transition from "../../Animation/Transition.js";
-import { useStyles } from "../hooks/index.js";
+import { useStyles, useCustom } from "../hooks/index.js";
 import { mergeRefs, forwardRef } from "../utils/index.js";
-import { useCustom } from "../../CustomProvider/index.js";
 const getPosition = (target, event) => {
   const offset = getOffset(target);
   const offsetX = (event.pageX || 0) - offset.left;

package/esm/internals/SafeAnchor/SafeAnchor.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback } from 'react';
 import Box from "../Box/index.js";
-import { useCustom } from "../../CustomProvider/index.js";
+import { useCustom } from "../hooks/index.js";
 import { forwardRef } from "../utils/index.js";
 function isTrivialHref(href) {
   return !href || href.trim() === '#';

package/esm/internals/Windowing/List.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useRef, useImperativeHandle, useCallback, useMemo } from 'react';
 import ScrollView from "../ScrollView/index.js";
 import { VariableSizeList } from 'react-window';
-import { useCustom } from "../../CustomProvider/index.js";
+import { useCustom } from "../hooks/index.js";
 import { forwardRef } from "../utils/index.js";
 export const defaultItemSize = () => 36;
 const OuterElementType = forwardRef(function OuterElementType(props, ref) {

package/esm/internals/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { useCustom } from './useCustom';
 export { useStyles } from './useStyles';
 export { useClickOutside } from './useClickOutside';
 export { useControlled } from './useControlled';

package/esm/internals/hooks/index.js

@@ -1,4 +1,5 @@
 'use client';
+export { useCustom } from "./useCustom.js";
 export { useStyles } from "./useStyles.js";
 export { useClickOutside } from "./useClickOutside.js";
 export { useControlled } from "./useControlled.js";

package/esm/{CustomProvider → internals/hooks}/useCustom.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import enGB from '../locales/en_GB';
-import type { FormatDateOptions } from '../internals/utils/date/types';
-import type { ReactSuiteComponents } from './types';
+import enGB from '../../locales/en_GB';
+import type { FormatDateOptions } from '../utils/date/types';
+import type { ReactSuiteComponents } from '../Provider/types';
 type LocaleKey = keyof typeof enGB;
 /**
  * A hook to get custom configuration of `<CustomProvider>`
@@ -11,7 +11,7 @@ type LocaleKey = keyof typeof enGB;
 export declare function useCustom<P = any>(componentName?: keyof ReactSuiteComponents, componentProps?: P): {
     code: string | undefined;
     rtl: boolean;
-    toasters: import("react").MutableRefObject<Map<string, import("../toaster/ToastContainer").ToastContainerInstance>> | undefined;
+    toasters: import("react").MutableRefObject<Map<string, import("../../toaster/ToastContainer").ToastContainerInstance>> | undefined;
     disableRipple: boolean | undefined;
     classPrefix: string | undefined;
     propsWithDefaults: P;

package/esm/{CustomProvider → internals/hooks}/useCustom.js

@@ -1,9 +1,9 @@
 'use client';
-import { useContext, useCallback, useMemo } from 'react';
 import assign from 'lodash/assign';
-import enGB from "../locales/en_GB.js";
-import { format, parse, isValid } from "../internals/utils/date/index.js";
-import { CustomContext } from "./CustomProvider.js";
+import enGB from "../../locales/en_GB.js";
+import { useContext, useCallback, useMemo } from 'react';
+import { format, parse, isValid } from "../utils/date/index.js";
+import { CustomContext } from "../Provider/CustomContext.js";
 function getDefaultRTL() {
   return typeof document !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
 }

package/esm/internals/hooks/useStyles.js

@@ -2,7 +2,7 @@
 import classNames from 'classnames';
 import { useCallback, useContext } from 'react';
 import { createStyleGetter, prefix as addPrefix, getResponsiveClasses } from "../utils/index.js";
-import { CustomContext } from "../../CustomProvider/CustomProvider.js";
+import { CustomContext } from "../Provider/CustomContext.js";
 
 // This is the only way I found to break circular references between ClassArray and ClassValue
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540

package/esm/internals/hooks/useToggleCaret.js

@@ -1,6 +1,6 @@
 'use client';
 import { useMemo } from 'react';
-import { useCustom } from "../../CustomProvider/index.js";
+import { useCustom } from "./index.js";
 import ArrowUpLineIcon from '@rsuite/icons/ArrowUpLine';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';

package/esm/internals/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Box } from './Box';
+export { default as Plaintext } from './Plaintext';
+export { default as InputBase } from './InputBase';
+export { default as SafeAnchor } from './SafeAnchor';

package/esm/internals/index.js

@@ -1 +1,6 @@
 'use client';
+// Export internal components
+export { default as Box } from "./Box/index.js";
+export { default as Plaintext } from "./Plaintext/index.js";
+export { default as InputBase } from "./InputBase/index.js";
+export { default as SafeAnchor } from "./SafeAnchor/index.js";

package/esm/{CustomProvider → internals/intl}/FormattedDate.js

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { useCustom } from "./useCustom.js";
+import { useCustom } from "../hooks/index.js";
 export function FormattedDate(_ref) {
   let {
     date,

package/esm/{CustomProvider → internals/intl}/FormattedNumber.js

@@ -1,6 +1,6 @@
 'use client';
 import React, { useMemo } from 'react';
-import { useCustom } from "./useCustom.js";
+import { useCustom } from "../hooks/index.js";
 export function FormattedNumber(_ref) {
   let {
     value,

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

@@ -12,6 +12,8 @@ export type HTMLPropsWithoutSelect<T extends HTMLElement = HTMLElement, P extend
 export type HTMLPropsWithoutChange<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutChange<P>;
 /** Input props with 'onChange' and 'size' attributes removed. */
 export type SanitizedInputProps = PropsWithout<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>;
+/** Textarea props with 'onChange' attribute removed. */
+export type SanitizedTextareaProps = PropsWithout<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>;
 /** HTML props excluding 'title', 'onToggle', and 'onSelect' attributes. */
 export type SanitizedHTMListProps<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithout<P, 'title' | 'onToggle' | 'onSelect'>;
 export type WithoutChildren<T> = Omit<T, 'children'>;

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

@@ -4,7 +4,7 @@ import type { ToArray } from './utils';
 import type { FormControlBaseProps } from './form';
 import type { AnimationEventProps } from './animation';
 import type { BoxProps } from '../Box';
-import type { Size } from './sizes';
+import type { BasicSize } from './sizes';
 import type { PickerHandle } from '../Picker/types';
 export interface Option<T = number | string> extends Record<string, any> {
     label?: string | ReactNode;
@@ -123,7 +123,7 @@ export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, Animatio
     /** A picker that can clear values */
     cleanable?: boolean;
     /** A picker can have different sizes */
-    size?: Size;
+    size?: BasicSize;
     /** Called when Modal is displayed */
     onOpen?: () => void;
     /** Called when Modal is closed */

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

@@ -18,6 +18,8 @@ export declare enum TypographySizeEnum {
     XL6 = "6xl"
 }
 export type Size = `${SizeEnum}`;
+/** Basic size type (xs, sm, md, lg) */
+export type BasicSize = Exclude<Size, 'xl'>;
 export type TextSize = `${TypographySizeEnum}`;
 export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type ResponsiveValue<T> = {

package/esm/internals/types/sizes.js

@@ -19,4 +19,6 @@ export let TypographySizeEnum = /*#__PURE__*/function (TypographySizeEnum) {
   TypographySizeEnum["XL5"] = "5xl";
   TypographySizeEnum["XL6"] = "6xl";
   return TypographySizeEnum;
-}({});
+}({});
+
+/** Basic size type (xs, sm, md, lg) */

package/esm/internals/utils/date/getWeekStartDates.d.ts

@@ -8,7 +8,6 @@ import type { Locale } from 'date-fns';
  */
 export declare function getWeekStartDates(firstDayOfMonth: Date, options: {
     weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    isoWeek?: boolean;
     locale?: Locale;
 }): Date[];
 export default getWeekStartDates;

package/esm/internals/utils/date/getWeekStartDates.js

@@ -10,13 +10,11 @@ import { startOfWeek } from 'date-fns/startOfWeek';
  */
 export function getWeekStartDates(firstDayOfMonth, options) {
   const {
-    weekStart = 0,
-    isoWeek,
+    weekStart,
     locale
   } = options;
-  const weekStartsOn = isoWeek ? 1 : weekStart;
   const firstDay = startOfWeek(firstDayOfMonth, {
-    weekStartsOn,
+    weekStartsOn: weekStart,
     locale
   });
   const days = [firstDay];

package/esm/internals/utils/react/createComponent.js

@@ -3,9 +3,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
 import Box from "../../Box/Box.js";
-import { useStyles } from "../../hooks/index.js";
 import { forwardRef } from "./forwardRef.js";
-import { useCustom } from "../../../CustomProvider/index.js";
+/**
+ * Why not import like this:
+ * ```
+ * import { useStyles, useCustom } from '../../hooks/index.js';
+ * ```
+ *
+ * We import useStyles and useCustom separately to prevent Vite from displaying Rollup warnings
+ * during the build process. This approach avoids circular dependency issues that could affect
+ * chunk division and optimizes the build output.
+ */
+import { useStyles } from "../../hooks/useStyles.js";
+import { useCustom } from "../../hooks/useCustom.js";
 /**
  * Create a component with `classPrefix` and `as` attributes.
  * By default, the component is based on Box component and inherits all Box props.