@broxus/react-uikit 0.20.1 → 0.22.0

package/dist/cjs/components/Accordion/Accordion.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export interface AccordionProps extends CollapseProps {
     direction?: string;
 }
-export declare function Accordion(props: AccordionProps): React.JSX.Element;
+export declare function Accordion({ className, direction, ...props }: AccordionProps): React.JSX.Element;
 export declare namespace Accordion {
     var displayName: string;
 }

package/dist/cjs/components/Accordion/Accordion.js

@@ -42,9 +42,9 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
-function Accordion(props) {
+function Accordion({ className, direction, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, direction, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'accordion'), [config, prefixCls]);
     return (React.createElement(collapse_1.default, { className: (0, classnames_1.default)({
             [`${rootCls}-rtl`]: direction === 'rtl',

package/dist/cjs/components/Accordion/Item.d.ts

@@ -7,7 +7,7 @@ export interface AccordionItemProps extends Omit<CollapsePanelProps, 'expandIcon
  * Use Accordion items props instead
  * @deprecated
  */
-export declare function Item(props: React.PropsWithChildren<AccordionItemProps>): React.JSX.Element;
+export declare function Item({ expandIcon, ...props }: React.PropsWithChildren<AccordionItemProps>): React.JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/cjs/components/Accordion/Item.js

@@ -41,11 +41,10 @@ const Icon_1 = require("../../components/Icon");
  * Use Accordion items props instead
  * @deprecated
  */
-function Item(props) {
-    const { expandIcon, ...restProps } = props;
+function Item({ expandIcon, ...props }) {
     const mergedExpandIcon = React.useMemo(() => expandIcon
         || (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' }))), [expandIcon]);
-    return React.createElement(collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps });
+    return React.createElement(collapse_1.Panel, { expandIcon: mergedExpandIcon, ...props });
 }
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Accordion.Item';

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

@@ -42,9 +42,9 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Close_1 = require("../../components/Close");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-exports.Alert = React.forwardRef((props, ref) => {
+exports.Alert = React.forwardRef(({ children, className, closable = true, severity, style, onClose, onClosed, ...props }, ref) => {
     const config = (0, ConfigProvider_1.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?.();
@@ -54,13 +54,13 @@ exports.Alert = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         close,
     }), [close]);
-    return (React.createElement(motion_1.default, { motionName: `${rootCls}-motion`, motionAppear: false, motionEnter: false, visible: !closed, onLeaveStart: node => ({
+    return (React.createElement(motion_1.default, { 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: (0, classnames_1.default)(rootCls, {
+        }) }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: (0, classnames_1.default)(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_1.Close, { className: `${rootCls}-close`, onClick: close }))),

package/dist/cjs/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/cjs/components/Align/Align.js

@@ -43,9 +43,9 @@ const utils_1 = require("../../components/Align/utils");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Align(props) {
+function Align({ align = 'left', className, component = defaultElement, l, m, s, xl, ...props }) {
     const config = (0, ConfigProvider_1.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') {
@@ -56,7 +56,7 @@ function Align(props) {
         }
         return align;
     }, [align, isRtl]);
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getAlignClassname)(mergedAlign, prefixCls || config.prefixCls), (0, utils_1.getAlignClassname)({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getAlignClassname)(mergedAlign, prefixCls || config.prefixCls), (0, utils_1.getAlignClassname)({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Align.displayName = 'Align';

package/dist/cjs/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/cjs/components/Article/Article.js

@@ -41,9 +41,9 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const context_1 = require("../../components/Article/context");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-function Article(props) {
+function Article({ className, ...props }) {
     const config = (0, ConfigProvider_1.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/cjs/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/cjs/components/Article/Meta.js

@@ -43,12 +43,12 @@ const context_1 = require("../../components/Article/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'p';
-function Meta(props) {
+function Meta({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Meta.displayName = 'Article.Meta';

package/dist/cjs/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/cjs/components/Article/Title.js

@@ -43,12 +43,12 @@ const context_1 = require("../../components/Article/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'h1';
-function Title(props) {
+function Title({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Article.Title';

package/dist/cjs/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/cjs/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/cjs/components/Badge/index.js

@@ -42,9 +42,9 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'span';
-function Badge(props) {
+function Badge({ className, ...props }) {
     const config = (0, ConfigProvider_1.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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
 }

package/dist/cjs/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/cjs/components/Breadcrumb/Breadcrumb.js

@@ -40,9 +40,9 @@ exports.Breadcrumb = Breadcrumb;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-function Breadcrumb(props) {
+function Breadcrumb({ className, ...props }) {
     const config = (0, ConfigProvider_1.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: (0, classnames_1.default)(rootCls, className), ...restProps });
 }

package/dist/cjs/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/cjs/components/Breadcrumb/Item.js

@@ -40,12 +40,11 @@ exports.Item = Item;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-function Item(props) {
+function Item({ className, disabled, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, disabled, ...restProps } = props;
     return (React.createElement("li", { className: (0, classnames_1.default)(className, {
             [`${config.prefixCls}-disabled`]: disabled,
-        }), ...restProps }));
+        }), ...props }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Breadcrumb.Item';

package/dist/cjs/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/cjs/components/Button/Button.js

@@ -43,9 +43,9 @@ const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Link_1 = require("../../components/Link");
 const defaultElement = 'button';
-exports.Button = React.forwardRef((props, ref) => {
+exports.Button = React.forwardRef(({ component = defaultElement, ghost, htmlType = 'button', type, ...props }, ref) => {
     const config = (0, ConfigProvider_1.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) {
@@ -56,10 +56,10 @@ exports.Button = React.forwardRef((props, ref) => {
     }, [restProps]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => (0, classnames_1.default)(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_1.Component, { ref: ref || buttonRef, component: Link_1.Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));

package/dist/cjs/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/cjs/components/Button/Group.js

@@ -40,9 +40,9 @@ exports.Group = Group;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-function Group(props) {
+function Group({ className, ...props }) {
     const config = (0, ConfigProvider_1.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: (0, classnames_1.default)(rootCls, className), ...restProps });
 }

package/dist/cjs/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/cjs/components/Card/Badge.js

@@ -43,12 +43,12 @@ const Badge_1 = require("../../components/Badge");
 const context_1 = require("../../components/Card/context");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'span';
-function Badge(props) {
+function Badge({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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(Badge_1.Badge, { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+    return React.createElement(Badge_1.Badge, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Badge.displayName = 'Card.Badge';

package/dist/cjs/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/cjs/components/Card/Body.js

@@ -43,12 +43,12 @@ const context_1 = require("../../components/Card/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Body(props) {
+function Body({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Body.displayName = 'Card.Body';

package/dist/cjs/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/cjs/components/Card/Card.js

@@ -44,12 +44,12 @@ const context_1 = require("../../components/Card/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Card(props) {
+function Card({ asBody, className, component = defaultElement, hoverable, kind, size, ...props }) {
     const config = (0, ConfigProvider_1.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${(0, js_utils_1.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() {
@@ -58,12 +58,12 @@ function Card(props) {
     }), [rootCls]);
     return (React.createElement(context_1.CardContext.Provider, { value: context },
         React.createElement(Component_1.Component, { className: (0, classnames_1.default)(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/cjs/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/cjs/components/Card/Footer.js

@@ -43,12 +43,12 @@ const context_1 = require("../../components/Card/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'footer';
-function Footer(props) {
+function Footer({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Footer.displayName = 'Card.Footer';

package/dist/cjs/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/cjs/components/Card/Header.js

@@ -43,12 +43,12 @@ const context_1 = require("../../components/Card/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'header';
-function Header(props) {
+function Header({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Card.Header';

package/dist/cjs/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/cjs/components/Card/Media.js

@@ -43,14 +43,14 @@ const context_1 = require("../../components/Card/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Media(props) {
+function Media({ className, component = defaultElement, position, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.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_1.Component, { className: (0, classnames_1.default)({
             [`${rootCls}-${position}`]: position !== undefined,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Media.displayName = 'Card.Media';

package/dist/cjs/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;
 }