@broxus/react-uikit 0.1.3 → 0.2.1

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

@@ -4,8 +4,12 @@ import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'span';
-export function Badge(props) {
+export const Badge = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-badge`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+    const { className, 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 }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Badge.displayName = 'Badge';
 }

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

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

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

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Breadcrumb(props) {
+export const Breadcrumb = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-breadcrumb`, ...restProps } = props;
-    return (React.createElement("ul", { className: classNames(prefixCls, className), ...restProps }));
+    const { className, 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 });
+});
+if (process.env.NODE_ENV !== 'production') {
+    Breadcrumb.displayName = 'Breadcrumb';
 }

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

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

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

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

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Item } from './Item';
-import type { BreadcrumbProps } from './Breadcrumb';
+import type * as React from 'react';
+import { type BreadcrumbProps } from '../Breadcrumb/Breadcrumb';
+import { Item } from '../Breadcrumb/Item';
 import './index.scss';
 export type { BreadcrumbProps };
-export interface CompoundedBreadcrumb extends React.FunctionComponent<BreadcrumbProps> {
+export interface Breadcrumb extends React.MemoExoticComponent<React.FunctionComponent<BreadcrumbProps>> {
     Item: typeof Item;
 }
-export declare const Breadcrumb: CompoundedBreadcrumb;
+export declare const Breadcrumb: Breadcrumb;

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

@@ -1,5 +1,5 @@
-import { Breadcrumb as InnerBreadcrumb } from './Breadcrumb';
-import { Item } from './Item';
+import { Breadcrumb as InternalBreadcrumb } from '../Breadcrumb/Breadcrumb';
+import { Item } from '../Breadcrumb/Item';
 import './index.scss';
-export const Breadcrumb = InnerBreadcrumb;
+export const Breadcrumb = InternalBreadcrumb;
 Breadcrumb.Item = Item;

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

@@ -15,4 +15,4 @@ export interface ButtonProps extends Partial<AnchorButtonProps>, Partial<NativeB
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;
+export declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>>;

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

@@ -2,29 +2,31 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
 import { Link } from '../Link';
-/* eslint-disable react/prop-types */
-export const Button = React.forwardRef((props, ref) => {
+const ForwardedButton = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, ghost, htmlType = 'button', prefixCls = `${config.prefixCls}-button`, shape, size, type, ...restProps } = props;
-    const buttonRef = ref || React.useRef(null);
-    const onClick = event => {
+    const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape, size, type, ...restProps } = props;
+    const buttonRef = React.useRef(null);
+    const onClick = React.useCallback(event => {
         if (restProps.disabled) {
             event.preventDefault();
             return;
         }
         restProps.onClick?.(event);
-    };
-    const className = classNames(prefixCls, {
-        [`${prefixCls}-${type}`]: type !== undefined,
-        [`${prefixCls}-ghost`]: ghost !== undefined,
-        [`${prefixCls}-${size}`]: size !== undefined,
-        [`${prefixCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
-    }, restProps.className);
+    }, [restProps]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const className = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-${type}`]: type !== undefined,
+        [`${rootCls}-ghost`]: ghost !== undefined,
+        [`${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(Link, { ref: buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Link, { ref: ref || buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
     }
-    return (React.createElement("button", { ref: buttonRef, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    return (React.createElement("button", { ref: ref || buttonRef, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
 });
+export const Button = React.memo(ForwardedButton);
 if (process.env.NODE_ENV !== 'production') {
+    ForwardedButton.displayName = 'Button.Forwarded';
     Button.displayName = 'Button';
 }

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

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

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Group(props) {
+export const Group = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-button-group`, ...restProps } = props;
-    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
-}
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button-group'), [config, prefixCls]);
+    return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Group.displayName = 'Button.Group';
 }

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Group } from './Group';
-import type { ButtonProps } from './Button';
+import type * as React from 'react';
+import { type ButtonProps } from '../Button/Button';
+import { Group } from '../Button/Group';
 import './index.scss';
 export type { ButtonProps };
-export interface CompoundedButton extends React.ForwardRefExoticComponent<ButtonProps> {
+export interface Button extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps>> {
     Group: typeof Group;
 }
-export declare const Button: CompoundedButton;
+export declare const Button: Button;

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

@@ -1,5 +1,5 @@
-import { Button as InternalButton } from './Button';
-import { Group } from './Group';
+import { Button as InternalButton } from '../Button/Button';
+import { Group } from '../Button/Group';
 import './index.scss';
 export const Button = InternalButton;
 Button.Group = Group;

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

@@ -1,8 +1,4 @@
 import * as React from 'react';
-export interface CardBadgeProps extends React.HTMLAttributes<HTMLElement> {
-    prefixCls?: string;
-}
-export declare function Badge(props: CardBadgeProps): JSX.Element;
-export declare namespace Badge {
-    var displayName: string;
-}
+import { type BadgeProps } from '../Badge';
+export type CardBadgeProps<E extends React.ElementType> = BadgeProps<E>;
+export declare const Badge: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: CardBadgeProps<E>) => JSX.Element)>;

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

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { Badge as BaseBadge } from '../Badge';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-import { Label } from '../Label';
-export function Badge(props) {
+const defaultElement = 'span';
+export const Badge = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-badge`, ...restProps } = props;
-    return (React.createElement(Label, { className: classNames(prefixCls, className), ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
+    return React.createElement(BaseBadge, { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Badge.displayName = 'Card.Badge';
 }

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

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

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

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-export function Body(props) {
+export const Body = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-body`, ...restProps } = props;
-    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'body'), [config, prefixCls]);
+    return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Body.displayName = 'Card.Body';
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-import type { ColorMode } from '../ConfrigProvider';
+import { type PolymorphicProps } from '../Component';
+import { type ColorMode } from '../ConfrigProvider';
 export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
     asBody?: boolean;
     color?: 'default' | 'primary' | 'secondary' | 'tertiary';
@@ -9,7 +9,5 @@ export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
     size?: 'small' | 'large';
 }
-export declare type CardProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardOwnProps>;
-declare const defaultElement = "div";
-export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): JSX.Element;
-export {};
+export type CardProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardOwnProps>;
+export declare const Card: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: CardProps<E>) => JSX.Element)>;

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

@@ -2,18 +2,25 @@ import * as React from 'react';
 import { capitalizeFirstLetter } from '@broxus/js-utils';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { ComponentProvider } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Card(props) {
+export const Card = React.memo((props) => {
     const config = useConfig();
     const { asBody, className, color, colorMode = color !== 'default' && color !== undefined
-        ? config[`card${capitalizeFirstLetter(color)}ColorMode`]
-        : undefined, hoverable, prefixCls = `${config.prefixCls}-card`, size, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, {
-            [`${prefixCls}-${color}`]: color !== undefined,
-            [`${prefixCls}-${size}`]: size !== undefined,
-            [`${prefixCls}-body`]: asBody,
-            [`${prefixCls}-hover`]: hoverable,
-            [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
-        }, className), component: defaultElement, ...restProps }));
+        ? // @ts-ignore
+            config[`card${capitalizeFirstLetter(color)}ColorMode`]
+        : undefined, hoverable, prefixCls = config.prefixCls, size, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'card'), [config, prefixCls]);
+    return (React.createElement(ComponentProvider, { component: "card", prefixCls: prefixCls || config.prefixCls },
+        React.createElement(Component, { className: classNames(rootCls, {
+                [`${rootCls}-${color}`]: color !== undefined,
+                [`${rootCls}-${size}`]: size !== undefined,
+                [`${rootCls}-body`]: asBody,
+                [`${rootCls}-hover`]: hoverable,
+                [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
+            }, className), component: defaultElement, ...restProps })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Card.displayName = 'Card';
 }

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

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

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

@@ -2,12 +2,15 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
+import { useComponentContext } from '../ComponentProvider';
 const defaultElement = 'footer';
-export function Footer(props) {
+export const Footer = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-footer`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'footer'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Footer.displayName = 'Card.Footer';
 }

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

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

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

@@ -2,12 +2,15 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
+import { useComponentContext } from '../ComponentProvider';
 const defaultElement = 'header';
-export function Header(props) {
+export const Header = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-header`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'header'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Card.Header';
 }

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

@@ -3,7 +3,4 @@ export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
 }
-export declare function Media(props: CardMediaProps): JSX.Element;
-export declare namespace Media {
-    var displayName: string;
-}
+export declare const Media: React.MemoExoticComponent<(props: CardMediaProps) => JSX.Element>;

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-export function Media(props) {
+export const Media = React.memo((props) => {
     const config = useConfig();
-    const { className, position, prefixCls = `${config.prefixCls}-card-media`, ...restProps } = props;
+    const { getRootCls } = useComponentContext();
+    const { className, position, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
     return (React.createElement("div", { className: classNames({
-            [`${prefixCls}-${position}`]: position !== undefined,
+            [`${rootCls}-${position}`]: position !== undefined,
         }, className), ...restProps }));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Media.displayName = 'Card.Media';
 }

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

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

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-const defaultElement = 'h1';
-export function Title(props) {
+const defaultElement = 'h3';
+export const Title = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-title`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, 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 }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Card.Title';
 }

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { Badge } from './Badge';
-import { Body } from './Body';
-import { Footer } from './Footer';
-import { Header } from './Header';
-import { Media } from './Media';
-import { Title } from './Title';
-import type { CardProps } from './Card';
+import type * as React from 'react';
+import { Badge } from '../Card/Badge';
+import { Body } from '../Card/Body';
+import { type CardProps } from '../Card/Card';
+import { Footer } from '../Card/Footer';
+import { Header } from '../Card/Header';
+import { Media } from '../Card/Media';
+import { Title } from '../Card/Title';
 import './index.scss';
 export type { CardProps };
-export interface CompoundedCard extends React.FunctionComponent<CardProps> {
+export interface Card extends React.MemoExoticComponent<React.FunctionComponent<CardProps>> {
     Badge: typeof Badge;
     Body: typeof Body;
     Footer: typeof Footer;
@@ -16,4 +16,4 @@ export interface CompoundedCard extends React.FunctionComponent<CardProps> {
     Media: typeof Media;
     Title: typeof Title;
 }
-export declare const Card: CompoundedCard;
+export declare const Card: Card;

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

@@ -1,10 +1,10 @@
-import { Badge } from './Badge';
-import { Body } from './Body';
-import { Card as InternalCard } from './Card';
-import { Footer } from './Footer';
-import { Header } from './Header';
-import { Media } from './Media';
-import { Title } from './Title';
+import { Badge } from '../Card/Badge';
+import { Body } from '../Card/Body';
+import { Card as InternalCard } from '../Card/Card';
+import { Footer } from '../Card/Footer';
+import { Header } from '../Card/Header';
+import { Media } from '../Card/Media';
+import { Title } from '../Card/Title';
 import './index.scss';
 export const Card = InternalCard;
 Card.Badge = Badge;

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

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import type { IconProps } from '../Icon';
-export declare type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'> & {
-    prefixCls?: string;
-};
-declare const defaultElement = "button";
-export declare function Close<E extends React.ElementType = typeof defaultElement>(props: CloseProps<E>): JSX.Element;
-export {};
+import { type IconProps } from '../Icon';
+export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
+export declare const Close: React.MemoExoticComponent<(<E extends React.ElementType<any> = "button">(props: CloseProps<E>) => JSX.Element)>;

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

@@ -3,8 +3,12 @@ import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
 import { Icon } from '../Icon';
 const defaultElement = 'button';
-export function Close(props) {
+export const Close = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-close`, ...restProps } = props;
-    return (React.createElement(Icon, { "aria-hidden": "false", className: classNames(prefixCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+    const { className, 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" }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Close.displayName = 'Close';
 }

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import type { ComponentProps } from './Component';
-export { Component } from './Component';
-export declare type PolymorphicComponentProps<E extends React.ElementType, P> = ComponentProps<E> & P;
-export declare type PolymorphicComponent<P, D extends React.ElementType = 'div'> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => React.ReactElement | null;
+type ComponentOwnProp<E extends React.ElementType = React.ElementType> = {
+    component?: E;
+};
+type PropsToOmit<E extends React.ElementType, P = {}> = keyof (ComponentOwnProp<E> & P);
+export type PolymorphicProps<E extends React.ElementType, P = {}> = ComponentOwnProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, P>>;
+export type PolymorphicComponent<P = {}, C extends React.ElementType = 'div', I = {}> = <E extends React.ElementType = C>(props: PolymorphicProps<E, P> & I) => React.ReactElement | null;
+declare const defaultElement: React.ElementType;
+export declare const Component: <E extends React.ElementType = typeof defaultElement, P = {}>(props: PolymorphicProps<E, P>) => React.ReactElement | null;
+export {};

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

@@ -1 +1,3 @@
-export { Component } from './Component';
+import * as React from 'react';
+const defaultElement = 'div';
+export const Component = React.forwardRef(({ component: Element = defaultElement, ...props }, ref) => React.createElement(Element, { ref: ref, ...props }));

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type ComponentContextConsumerProps = {
+    getRootCls(): string | undefined;
+};
+export interface ComponentContextProviderProps extends React.PropsWithChildren<Partial<ComponentContextConsumerProps>> {
+    component: string;
+    prefixCls?: string;
+}
+export declare const ComponentContext: React.Context<ComponentContextConsumerProps>;
+export declare function useComponentContext(): ComponentContextConsumerProps;
+export declare function ComponentProvider(props: ComponentContextProviderProps): JSX.Element;