@broxus/react-uikit 0.20.1 → 0.22.0

package/dist/esm/components/Alert/index.js

@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { Close } from '../../components/Close';
 import { useConfig } from '../../components/ConfigProvider';
-export const Alert = React.forwardRef((props, ref) => {
+export const Alert = React.forwardRef(({ children, className, closable = true, severity, style, onClose, onClosed, ...props }, ref) => {
     const config = useConfig();
-    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
+    const { closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
     const close = React.useCallback(() => {
         onClose?.();
@@ -15,13 +15,13 @@ export const Alert = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         close,
     }), [close]);
-    return (React.createElement(CSSMotion, { motionName: `${rootCls}-motion`, motionAppear: false, motionEnter: false, visible: !closed, onLeaveStart: node => ({
+    return (React.createElement(CSSMotion, { motionAppear: false, motionEnter: false, motionName: `${rootCls}-motion`, visible: !closed, onLeaveEnd: onClosed, onLeaveStart: node => ({
             maxHeight: node.offsetHeight,
-        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(rootCls, {
+        }) }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(rootCls, {
             [`${rootCls}-${severity}`]: severity !== undefined,
         }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
         closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {
-            // @ts-ignore
+            // @ts-ignore .....
             className: `${rootCls}-close`,
             onClick: close,
         })) : (React.createElement(Close, { className: `${rootCls}-close`, onClick: close }))),

package/dist/esm/components/Align/Align.d.ts

@@ -7,9 +7,9 @@ export interface AlignOwnProps extends Omit<AlignBreakpointsConfig, 'default'> {
     direction?: Direction;
     prefixCls?: string;
 }
-export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
+export type AlignProps<E extends React.ElementType = React.ElementType> = AlignOwnProps & PolymorphicProps<E> & PolymorphicProps<E, AlignOwnProps>;
 declare const defaultElement = "div";
-export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): React.JSX.Element;
+export declare function Align<E extends React.ElementType = typeof defaultElement>({ align, className, component, l, m, s, xl, ...props }: React.PropsWithChildren<AlignProps<E>>): React.JSX.Element;
 export declare namespace Align {
     var displayName: string;
 }

package/dist/esm/components/Align/Align.js

@@ -4,9 +4,9 @@ import { getAlignClassname } from '../../components/Align/utils';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Align(props) {
+export function Align({ align = 'left', className, component = defaultElement, l, m, s, xl, ...props }) {
     const config = useConfig();
-    const { align = 'left', className, direction = config.direction, prefixCls = config.prefixCls, s, m, l, xl, ...restProps } = props;
+    const { direction = config.direction, prefixCls = config.prefixCls, ...restProps } = props;
     const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
     const mergedAlign = React.useMemo(() => {
         if (isRtl && align === 'left') {
@@ -17,7 +17,7 @@ export function Align(props) {
         }
         return align;
     }, [align, isRtl]);
-    return (React.createElement(Component, { className: classNames(getAlignClassname(mergedAlign, prefixCls || config.prefixCls), getAlignClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component, { className: classNames(getAlignClassname(mergedAlign, prefixCls || config.prefixCls), getAlignClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Align.displayName = 'Align';

package/dist/esm/components/Article/Article.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export declare function Article(props: ArticleProps): React.JSX.Element;
+export declare function Article({ className, ...props }: ArticleProps): React.JSX.Element;
 export declare namespace Article {
     var displayName: string;
 }

package/dist/esm/components/Article/Article.js

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { ArticleContext } from '../../components/Article/context';
 import { useConfig } from '../../components/ConfigProvider';
-export function Article(props) {
+export function Article({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'article'), [config, prefixCls]);
     const context = React.useMemo(() => ({
         getRootCls() {

package/dist/esm/components/Article/Meta.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type ArticleMetaOwnProps = {
+export interface ArticleMetaOwnProps {
     prefixCls?: string;
-};
-export type ArticleMetaProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ArticleMetaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleMetaOwnProps>;
+}
+export type ArticleMetaProps<E extends React.ElementType = React.ElementType> = ArticleMetaOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ArticleMetaOwnProps>;
 declare const defaultElement = "p";
-export declare function Meta<E extends React.ElementType = typeof defaultElement>(props: ArticleMetaProps<E>): React.JSX.Element;
+export declare function Meta<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<ArticleMetaProps<E>>): React.JSX.Element;
 export declare namespace Meta {
     var displayName: string;
 }

package/dist/esm/components/Article/Meta.js

@@ -4,12 +4,12 @@ import { ArticleContext } from '../../components/Article/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'p';
-export function Meta(props) {
+export function Meta({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(ArticleContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const { prefixCls = getRootCls(), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'meta'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Meta.displayName = 'Article.Meta';

package/dist/esm/components/Article/Title.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type ArticleTitleOwnProps = {
+export interface ArticleTitleOwnProps {
     prefixCls?: string;
-};
-export type ArticleTitleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ArticleTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleTitleOwnProps>;
+}
+export type ArticleTitleProps<E extends React.ElementType = React.ElementType> = ArticleTitleOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ArticleTitleOwnProps>;
 declare const defaultElement = "h1";
-export declare function Title<E extends React.ElementType = typeof defaultElement>(props: ArticleTitleProps<E>): React.JSX.Element;
+export declare function Title<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<ArticleTitleProps<E>>): React.JSX.Element;
 export declare namespace Title {
     var displayName: string;
 }

package/dist/esm/components/Article/Title.js

@@ -4,12 +4,12 @@ import { ArticleContext } from '../../components/Article/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'h1';
-export function Title(props) {
+export function Title({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(ArticleContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const { prefixCls = getRootCls(), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Article.Title';

package/dist/esm/components/Article/context.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type ArticleContextConsumerProps = {
+export interface ArticleContextConsumerProps {
     getRootCls(): string | undefined;
-};
+}
 export declare const ArticleContext: React.Context<ArticleContextConsumerProps>;

package/dist/esm/components/Badge/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type BadgeOwnProps = {
+export interface BadgeOwnProps {
     prefixCls?: string;
-};
-export type BadgeProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
+}
+export type BadgeProps<E extends React.ElementType = React.ElementType> = BadgeOwnProps & PolymorphicProps<E> & PolymorphicProps<E, BadgeOwnProps>;
 declare const defaultElement = "span";
-export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: BadgeProps<E>): React.JSX.Element;
+export declare function Badge<E extends React.ElementType = typeof defaultElement>({ className, ...props }: React.PropsWithChildren<BadgeProps<E>>): React.JSX.Element;
 export declare namespace Badge {
     var displayName: string;
 }

package/dist/esm/components/Badge/index.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'span';
-export function Badge(props) {
+export function Badge({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
     return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
 }

package/dist/esm/components/Breadcrumb/Breadcrumb.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
 }
-export declare function Breadcrumb(props: BreadcrumbProps): React.JSX.Element;
+export declare function Breadcrumb({ className, ...props }: BreadcrumbProps): React.JSX.Element;
 export declare namespace Breadcrumb {
     var displayName: string;
 }

package/dist/esm/components/Breadcrumb/Breadcrumb.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Breadcrumb(props) {
+export function Breadcrumb({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'breadcrumb'), [config, prefixCls]);
     return React.createElement("ul", { className: classNames(rootCls, className), ...restProps });
 }

package/dist/esm/components/Breadcrumb/Item.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     disabled?: boolean;
 }
-export declare function Item(props: BreadcrumbItemProps): React.JSX.Element;
+export declare function Item({ className, disabled, ...props }: BreadcrumbItemProps): React.JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/esm/components/Breadcrumb/Item.js

@@ -1,12 +1,11 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Item(props) {
+export function Item({ className, disabled, ...props }) {
     const config = useConfig();
-    const { className, disabled, ...restProps } = props;
     return (React.createElement("li", { className: classNames(className, {
             [`${config.prefixCls}-disabled`]: disabled,
-        }), ...restProps }));
+        }), ...props }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Breadcrumb.Item';

package/dist/esm/components/Button/Button.d.ts

@@ -16,5 +16,5 @@ export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<Nati
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
-export type ButtonProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
+export type ButtonProps<E extends React.ElementType = React.ElementType> = ButtonOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ButtonOwnProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>, "ref"> & React.RefAttributes<any>>;

package/dist/esm/components/Button/Button.js

@@ -4,9 +4,9 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { Link } from '../../components/Link';
 const defaultElement = 'button';
-export const Button = React.forwardRef((props, ref) => {
+export const Button = React.forwardRef(({ component = defaultElement, ghost, htmlType = 'button', type, ...props }, ref) => {
     const config = useConfig();
-    const { component = defaultElement, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls ?? config.prefixCls, shape = config.button?.shape ?? config.buttonShape, size = config.button?.size ?? config.buttonSize, type, ...restProps } = props;
+    const { prefixCls = config.button?.prefixCls ?? config.prefixCls, shape = config.button?.shape ?? config.buttonShape, size = config.button?.size ?? config.buttonSize, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -17,10 +17,10 @@ export const Button = React.forwardRef((props, ref) => {
     }, [restProps]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
+        [`${rootCls}-${size}`]: size !== undefined,
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
-        [`${rootCls}-${size}`]: size !== undefined,
-        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
         return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));

package/dist/esm/components/Button/Group.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare function Group(props: ButtonGroupProps): React.JSX.Element;
+export declare function Group({ className, ...props }: ButtonGroupProps): React.JSX.Element;
 export declare namespace Group {
     var displayName: string;
 }

package/dist/esm/components/Button/Group.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Group(props) {
+export function Group({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.button?.prefixCls || config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.button?.prefixCls || config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button-group'), [config, prefixCls]);
     return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
 }

package/dist/esm/components/Card/Badge.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type BadgeProps } from '../../components/Badge';
 export type CardBadgeProps<E extends React.ElementType = React.ElementType> = BadgeProps<E>;
 declare const defaultElement = "span";
-export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: CardBadgeProps<E>): React.JSX.Element;
+export declare function Badge<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: CardBadgeProps<E>): React.JSX.Element;
 export declare namespace Badge {
     var displayName: string;
 }

package/dist/esm/components/Card/Badge.js

@@ -4,12 +4,12 @@ import { Badge as BaseBadge } from '../../components/Badge';
 import { CardContext } from '../../components/Card/context';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'span';
-export function Badge(props) {
+export function Badge({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
-    return React.createElement(BaseBadge, { className: classNames(rootCls, className), ...restProps });
+    return React.createElement(BaseBadge, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Badge.displayName = 'Card.Badge';

package/dist/esm/components/Card/Body.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type CardBodyOwnProps = {
+export interface CardBodyOwnProps {
     prefixCls?: string;
-};
-export type CardBodyProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardBodyOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardBodyOwnProps>;
+}
+export type CardBodyProps<E extends React.ElementType = React.ElementType> = CardBodyOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardBodyOwnProps>;
 declare const defaultElement = "div";
-export declare function Body<E extends React.ElementType = typeof defaultElement>(props: CardBodyProps<E>): React.JSX.Element;
+export declare function Body<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardBodyProps<E>>): React.JSX.Element;
 export declare namespace Body {
     var displayName: string;
 }

package/dist/esm/components/Card/Body.js

@@ -4,12 +4,12 @@ import { CardContext } from '../../components/Card/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Body(props) {
+export function Body({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'body'), [config, prefixCls]);
-    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Body.displayName = 'Card.Body';

package/dist/esm/components/Card/Card.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type ColorMode } from '../../components/Inverse';
-export type CardOwnProps = {
+export interface CardOwnProps {
     asBody?: boolean;
     colorMode?: ColorMode;
     hoverable?: boolean;
     kind?: 'default' | 'primary' | 'secondary' | 'tertiary';
     prefixCls?: string;
     size?: 'small' | 'large';
-};
-export type CardProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardOwnProps>;
+}
+export type CardProps<E extends React.ElementType = React.ElementType> = CardOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardOwnProps>;
 declare const defaultElement = "div";
-export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): React.JSX.Element;
+export declare function Card<E extends React.ElementType = typeof defaultElement>({ asBody, className, component, hoverable, kind, size, ...props }: React.PropsWithChildren<CardProps<E>>): React.JSX.Element;
 export declare namespace Card {
     var displayName: string;
 }

package/dist/esm/components/Card/Card.js

@@ -5,12 +5,12 @@ import { CardContext } from '../../components/Card/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Card(props) {
+export function Card({ asBody, className, component = defaultElement, hoverable, kind, size, ...props }) {
     const config = useConfig();
-    const { asBody, className, kind, colorMode = kind && kind !== 'default'
-        // @ts-ignore
+    const { colorMode = kind && kind !== 'default'
+        // @ts-expect-error TS7053: Element implicitly has an any type because ...
         ? (config.card?.[`${kind}ColorMode`] || config[`card${capitalizeFirstLetter(kind)}ColorMode`])
-        : undefined, hoverable, prefixCls = config.card?.prefixCls || config.prefixCls, size, ...restProps } = props;
+        : undefined, prefixCls = config.card?.prefixCls || config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'card'), [config, prefixCls]);
     const context = React.useMemo(() => ({
         getRootCls() {
@@ -19,12 +19,12 @@ export function Card(props) {
     }), [rootCls]);
     return (React.createElement(CardContext.Provider, { value: context },
         React.createElement(Component, { className: classNames(rootCls, {
+                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
                 [`${rootCls}-${kind}`]: kind && ['default', 'primary', 'secondary', 'tertiary'].includes(kind),
                 [`${rootCls}-${size}`]: size && ['small', 'large'].includes(size),
                 [`${rootCls}-body`]: asBody,
                 [`${rootCls}-hover`]: hoverable,
-                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
-            }, className), component: defaultElement, ...restProps })));
+            }, className), component: component, ...restProps })));
 }
 if (process.env.NODE_ENV !== 'production') {
     Card.displayName = 'Card';

package/dist/esm/components/Card/Footer.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type CardFooterOwnProps = {
+export interface CardFooterOwnProps {
     prefixCls?: string;
-};
-export type CardFooterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardFooterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardFooterOwnProps>;
+}
+export type CardFooterProps<E extends React.ElementType = React.ElementType> = CardFooterOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardFooterOwnProps>;
 declare const defaultElement = "footer";
-export declare function Footer<E extends React.ElementType = typeof defaultElement>(props: CardFooterProps<E>): React.JSX.Element;
+export declare function Footer<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardFooterProps<E>>): React.JSX.Element;
 export declare namespace Footer {
     var displayName: string;
 }

package/dist/esm/components/Card/Footer.js

@@ -4,12 +4,12 @@ import { CardContext } from '../../components/Card/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'footer';
-export function Footer(props) {
+export function Footer({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'footer'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Footer.displayName = 'Card.Footer';

package/dist/esm/components/Card/Header.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type CardHeaderOwnProps = {
+export interface CardHeaderOwnProps {
     prefixCls?: string;
-};
-export type CardHeaderProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardHeaderOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardHeaderOwnProps>;
+}
+export type CardHeaderProps<E extends React.ElementType = React.ElementType> = CardHeaderOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardHeaderOwnProps>;
 declare const defaultElement = "header";
-export declare function Header<E extends React.ElementType = typeof defaultElement>(props: CardHeaderProps<E>): React.JSX.Element;
+export declare function Header<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardHeaderProps<E>>): React.JSX.Element;
 export declare namespace Header {
     var displayName: string;
 }

package/dist/esm/components/Card/Header.js

@@ -4,12 +4,12 @@ import { CardContext } from '../../components/Card/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'header';
-export function Header(props) {
+export function Header({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'header'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Card.Header';

package/dist/esm/components/Card/Media.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type CardMediaOwnProps = {
+export interface CardMediaOwnProps {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
-};
-export type CardMediaProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardMediaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardMediaOwnProps>;
+}
+export type CardMediaProps<E extends React.ElementType = React.ElementType> = CardMediaOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardMediaOwnProps>;
 declare const defaultElement = "div";
-export declare function Media<E extends React.ElementType = typeof defaultElement>(props: CardMediaProps<E>): React.JSX.Element;
+export declare function Media<E extends React.ElementType = typeof defaultElement>({ className, component, position, ...props }: React.PropsWithChildren<CardMediaProps<E>>): React.JSX.Element;
 export declare namespace Media {
     var displayName: string;
 }

package/dist/esm/components/Card/Media.js

@@ -4,14 +4,14 @@ import { CardContext } from '../../components/Card/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Media(props) {
+export function Media({ className, component = defaultElement, position, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, position, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames({
             [`${rootCls}-${position}`]: position !== undefined,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Media.displayName = 'Card.Media';

package/dist/esm/components/Card/Title.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type CardTitleOwnProps = {
+export interface CardTitleOwnProps {
     prefixCls?: string;
-};
-export type CardTitleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
+}
+export type CardTitleProps<E extends React.ElementType = React.ElementType> = CardTitleOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardTitleOwnProps>;
 declare const defaultElement = "h3";
-export declare function Title<E extends React.ElementType = typeof defaultElement>(props: CardTitleProps<E>): React.JSX.Element;
+export declare function Title<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardTitleProps<E>>): React.JSX.Element;
 export declare namespace Title {
     var displayName: string;
 }

package/dist/esm/components/Card/Title.js

@@ -4,12 +4,12 @@ import { CardContext } from '../../components/Card/context';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'h3';
-export function Title(props) {
+export function Title({ className, component = defaultElement, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Card.Title';

package/dist/esm/components/Card/index.d.ts

@@ -6,7 +6,7 @@ import { Footer } from '../../components/Card/Footer';
 import { Header } from '../../components/Card/Header';
 import { Media } from '../../components/Card/Media';
 import { Title } from '../../components/Card/Title';
-export type { CardProps };
+export { type CardProps };
 export interface Card extends React.FunctionComponent<CardProps> {
     Badge: typeof Badge;
     Body: typeof Body;

package/dist/esm/components/Close/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type IconProps } from '../../components/Icon';
 export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
 declare const defaultElement = "button";
-export declare function Close<E extends React.ElementType = typeof defaultElement>(props: CloseProps<E>): React.JSX.Element;
+export declare function Close<E extends React.ElementType = typeof defaultElement>({ className, ...props }: CloseProps<E>): React.JSX.Element;
 export declare namespace Close {
     var displayName: string;
 }

package/dist/esm/components/Close/index.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
 const defaultElement = 'button';
-export function Close(props) {
+export function Close({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'close'), [config, prefixCls]);
     return (React.createElement(Icon, { "aria-hidden": "false", className: classNames(rootCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
 }