@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -1,5 +1,6 @@
-import type { CollapseProps } from 'rc-collapse/lib/interface';
+import * as React from 'react';
+import { type CollapseProps } from 'rc-collapse';
 export interface AccordionProps extends CollapseProps {
     direction?: string;
 }
-export declare function Accordion(props: AccordionProps): JSX.Element;
+export declare const Accordion: React.MemoExoticComponent<(props: AccordionProps) => JSX.Element>;

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

@@ -30,13 +30,16 @@ exports.Accordion = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const rc_collapse_1 = __importDefault(require("rc-collapse"));
-const utils_1 = require("../../utils");
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Accordion(props) {
+const utils_1 = require("../../utils");
+exports.Accordion = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { direction, prefixCls = `${config.prefixCls}-accordion`, ...restProps } = props;
+    const { direction, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'accordion'), [config, prefixCls]);
     return (React.createElement(rc_collapse_1.default, { className: (0, classnames_1.default)({
             [`${prefixCls}-rtl`]: direction === 'rtl',
-        }), openMotion: utils_1.collapseMotion, prefixCls: prefixCls, ...restProps }));
+        }), openMotion: (0, utils_1.getCollapseMotion)(prefixCls || config.prefixCls), prefixCls: rootCls, ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Accordion.displayName = 'Accordion';
 }
-exports.Accordion = Accordion;

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import type { CollapsePanelProps } from 'rc-collapse/lib/interface';
-export declare type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
-export declare function Item(props: AccordionItemProps): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
-}
+import { type CollapsePanelProps } from 'rc-collapse';
+export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
+export declare const Item: React.MemoExoticComponent<(props: AccordionItemProps) => JSX.Element>;

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

@@ -27,12 +27,11 @@ exports.Item = void 0;
 const React = __importStar(require("react"));
 const rc_collapse_1 = require("rc-collapse");
 const Icon_1 = require("../Icon");
-function Item(props) {
+exports.Item = React.memo((props) => {
     const { expandIcon, ...restProps } = props;
     const mergedExpandIcon = React.useMemo(() => (expandIcon || (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' })))), [expandIcon]);
-    return (React.createElement(rc_collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps }));
-}
-exports.Item = Item;
+    return React.createElement(rc_collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Item.displayName = 'Accordion.Item';
+    exports.Item.displayName = 'Accordion.Item';
 }

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

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

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
-const Accordion_1 = require("./Accordion");
-const Item_1 = require("./Item");
+const Accordion_1 = require("../Accordion/Accordion");
+const Item_1 = require("../Accordion/Item");
 require("./index.scss");
 exports.Accordion = Accordion_1.Accordion;
 exports.Accordion.Item = Item_1.Item;

package/dist/cjs/components/Alert/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MotionEndEventHandler } from 'rc-motion';
+import { type MotionEndEventHandler } from 'rc-motion';
 import './index.scss';
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     closable?: boolean;
@@ -9,7 +9,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     onClose?: () => void;
     onClosed?: MotionEndEventHandler;
 }
-export declare type AlertRef = {
+export type AlertRef = {
     close: () => void;
 };
-export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>;
+export declare const Alert: React.MemoExoticComponent<React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>>;

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

@@ -33,25 +33,32 @@ const rc_motion_1 = __importDefault(require("rc-motion"));
 const Close_1 = require("../Close");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
-exports.Alert = React.forwardRef((props, ref) => {
+const ForwarderAlert = React.forwardRef((props, ref) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { children, className, closable = true, closeIcon, prefixCls = `${config.prefixCls}-alert`, style, severity, onClose, onClosed, ...restProps } = props;
+    const { children, className, closable = true, closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
-    const close = () => {
+    const close = React.useCallback(() => {
         onClose?.();
         setClosed(true);
-    };
+    }, [onClose]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'alert'), [config, prefixCls]);
     React.useImperativeHandle(ref, () => ({
         close,
-    }), []);
-    return (React.createElement(rc_motion_1.default, { visible: !closed, motionName: `${prefixCls}-motion`, motionAppear: false, motionEnter: false, onLeaveStart: node => ({
+    }), [close]);
+    return (React.createElement(rc_motion_1.default, { motionName: `${rootCls}-motion`, motionAppear: false, motionEnter: false, visible: !closed, onLeaveStart: node => ({
             maxHeight: node.offsetHeight,
-        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: (0, classnames_1.default)(prefixCls, {
-            [`${prefixCls}-${severity}`]: severity !== undefined,
+        }), onLeaveEnd: onClosed }, ({ 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, {
-            className: `${prefixCls}-close`,
+            // @ts-ignore
+            className: `${rootCls}-close`,
             onClick: close,
-        })) : (React.createElement(Close_1.Close, { className: `${prefixCls}-close`, onClick: close }))),
+        })) : (React.createElement(Close_1.Close, { className: `${rootCls}-close`, onClick: close }))),
         children))));
 });
+exports.Alert = React.memo(ForwarderAlert);
+if (process.env.NODE_ENV !== 'production') {
+    ForwarderAlert.displayName = 'Alert.Forwarded';
+    exports.Alert.displayName = 'Alert';
+}

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

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import type { Direction } from '../../types';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type AlignOwnProps = {
+import { type PolymorphicProps } from '../Component';
+import { type Direction } from '../../types';
+export type AlignOwnProps = {
     direction?: Direction;
     prefixCls?: string;
     side?: 'left' | 'right';
 };
-export declare type AlignProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, AlignOwnProps>;
-declare const defaultElement = "div";
-export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): JSX.Element;
-export {};
+export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
+export declare const Align: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: AlignProps<E>) => JSX.Element)>;

package/dist/cjs/components/Align/Align.js

@@ -32,13 +32,16 @@ const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Align(props) {
+exports.Align = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { direction, prefixCls = `${config.prefixCls}-align`, side = direction === 'rtl' ? 'right' : 'left', ...restProps } = props;
-    const isRtl = direction === 'rtl';
-    const invertedSide = side === 'left' ? 'right' : 'left';
+    const { direction = config.direction, prefixCls = config.prefixCls, side = direction === 'rtl' ? 'right' : 'left', ...restProps } = props;
+    const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
+    const invertedSide = React.useMemo(() => (side === 'left' ? 'right' : 'left'), [side]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'align'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
-            [`${prefixCls}-${isRtl ? invertedSide : side}`]: true,
+            [`${rootCls}-${isRtl ? invertedSide : side}`]: true,
         }), component: defaultElement, ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Align.displayName = 'Align';
 }
-exports.Align = Align;

package/dist/cjs/components/Align/Left.d.ts

@@ -1,5 +1,3 @@
-import type { AlignProps } from './Align';
-export declare function Left(props: Omit<AlignProps, 'side'>): JSX.Element;
-export declare namespace Left {
-    var displayName: string;
-}
+import * as React from 'react';
+import { type AlignProps } from '../Align/Align';
+export declare const Left: React.MemoExoticComponent<(props: Omit<AlignProps, 'side'>) => JSX.Element>;

package/dist/cjs/components/Align/Left.js

@@ -25,11 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Left = void 0;
 const React = __importStar(require("react"));
-const Align_1 = require("./Align");
-function Left(props) {
-    return React.createElement(Align_1.Align, { ...props, side: "left" });
-}
-exports.Left = Left;
+const Align_1 = require("../Align/Align");
+exports.Left = React.memo((props) => (React.createElement(Align_1.Align, { ...props, side: "left" })));
 if (process.env.NODE_ENV !== 'production') {
-    Left.displayName = 'Align.Left';
+    exports.Left.displayName = 'Align.Left';
 }

package/dist/cjs/components/Align/Right.d.ts

@@ -1,5 +1,3 @@
-import type { AlignProps } from './Align';
-export declare function Right(props: Omit<AlignProps, 'side'>): JSX.Element;
-export declare namespace Right {
-    var displayName: string;
-}
+import * as React from 'react';
+import { type AlignProps } from '../Align/Align';
+export declare const Right: React.MemoExoticComponent<(props: Omit<AlignProps, 'side'>) => JSX.Element>;

package/dist/cjs/components/Align/Right.js

@@ -25,11 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Right = void 0;
 const React = __importStar(require("react"));
-const Align_1 = require("./Align");
-function Right(props) {
-    return React.createElement(Align_1.Align, { ...props, side: "right" });
-}
-exports.Right = Right;
+const Align_1 = require("../Align/Align");
+exports.Right = React.memo((props) => (React.createElement(Align_1.Align, { ...props, side: "right" })));
 if (process.env.NODE_ENV !== 'production') {
-    Right.displayName = 'Align.Right';
+    exports.Right.displayName = 'Align.Right';
 }

package/dist/cjs/components/Align/index.d.ts

@@ -1,10 +1,11 @@
-import { PolymorphicComponent } from '../Component';
-import { AlignOwnProps } from './Align';
-import { Left } from './Left';
-import { Right } from './Right';
+import type * as React from 'react';
+import { type AlignOwnProps, type AlignProps } from '../Align/Align';
+import { Left } from '../Align/Left';
+import { Right } from '../Align/Right';
 import './index.scss';
-export declare type CompoundedAlign = PolymorphicComponent<AlignOwnProps> & {
+export type { AlignOwnProps, AlignProps };
+export interface Align extends React.MemoExoticComponent<React.FunctionComponent<AlignProps>> {
     Left: typeof Left;
     Right: typeof Right;
-};
-export declare const Align: CompoundedAlign;
+}
+export declare const Align: Align;

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Align = void 0;
-const Align_1 = require("./Align");
-const Left_1 = require("./Left");
-const Right_1 = require("./Right");
+const Align_1 = require("../Align/Align");
+const Left_1 = require("../Align/Left");
+const Right_1 = require("../Align/Right");
 require("./index.scss");
 exports.Align = Align_1.Align;
 exports.Align.Left = Left_1.Left;

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

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

package/dist/cjs/components/Article/Article.js

@@ -30,9 +30,14 @@ exports.Article = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Article(props) {
+const ComponentProvider_1 = require("../ComponentProvider");
+exports.Article = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
-    return (React.createElement("article", { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'article'), [config, prefixCls]);
+    return (React.createElement(ComponentProvider_1.ComponentProvider, { component: "article", prefixCls: prefixCls || config.prefixCls },
+        React.createElement("article", { className: (0, classnames_1.default)(rootCls, className), ...restProps })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Article.displayName = 'Article';
 }
-exports.Article = Article;

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

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

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

@@ -30,14 +30,16 @@ exports.Meta = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'p';
-function Meta(props) {
+exports.Meta = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${prefixCls}-meta`, className), component: defaultElement, ...restProps }));
-}
-exports.Meta = Meta;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, 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 }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Meta.displayName = 'Article.Meta';
+    exports.Meta.displayName = 'Article.Meta';
 }

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

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

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

@@ -30,14 +30,16 @@ exports.Title = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'h1';
-function Title(props) {
+exports.Title = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${prefixCls}-title`, className), component: defaultElement, ...restProps }));
-}
-exports.Title = Title;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, 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 }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Title.displayName = 'Article.Title';
+    exports.Title.displayName = 'Article.Title';
 }

package/dist/cjs/components/Article/index.d.ts

@@ -1,13 +1,11 @@
-import * as React from 'react';
-import { Meta } from './Meta';
-import { Title } from './Title';
-import type { ArticleProps } from './Article';
-import type { ArticleMetaProps } from './Meta';
-import type { ArticleTitleProps } from './Title';
+import type * as React from 'react';
+import { type ArticleProps } from '../Article/Article';
+import { type ArticleMetaProps, Meta } from '../Article/Meta';
+import { type ArticleTitleProps, Title } from '../Article/Title';
 import './index.scss';
-export type { ArticleProps, ArticleMetaProps, ArticleTitleProps };
-export interface CompoundedArticle extends React.FunctionComponent<ArticleProps> {
+export type { ArticleMetaProps, ArticleProps, ArticleTitleProps };
+export interface Article extends React.MemoExoticComponent<React.FunctionComponent<ArticleProps>> {
     Meta: typeof Meta;
     Title: typeof Title;
 }
-export declare const Article: CompoundedArticle;
+export declare const Article: Article;

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Article = void 0;
-const Article_1 = require("./Article");
-const Meta_1 = require("./Meta");
-const Title_1 = require("./Title");
+const Article_1 = require("../Article/Article");
+const Meta_1 = require("../Article/Meta");
+const Title_1 = require("../Article/Title");
 require("./index.scss");
 exports.Article = Article_1.Article;
 exports.Article.Meta = Meta_1.Meta;

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type BadgeOwnProps = {
+export type BadgeOwnProps = {
     prefixCls?: string;
 };
-export declare type BadgeProps<E extends React.ElementType> = PolymorphicComponentProps<E, BadgeOwnProps>;
-declare const defaultElement = "span";
-export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: BadgeProps<E>): JSX.Element;
-export {};
+export type BadgeProps<E extends React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
+export declare const Badge: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: BadgeProps<E>) => JSX.Element)>;

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

@@ -33,9 +33,12 @@ const Component_1 = require("../Component");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
 const defaultElement = 'span';
-function Badge(props) {
+exports.Badge = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-badge`, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(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_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Badge.displayName = 'Badge';
 }
-exports.Badge = Badge;

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

@@ -30,9 +30,12 @@ exports.Breadcrumb = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Breadcrumb(props) {
+exports.Breadcrumb = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-breadcrumb`, ...restProps } = props;
-    return (React.createElement("ul", { className: (0, classnames_1.default)(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: (0, classnames_1.default)(rootCls, className), ...restProps });
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Breadcrumb.displayName = 'Breadcrumb';
 }
-exports.Breadcrumb = Breadcrumb;

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

@@ -30,14 +30,13 @@ exports.Item = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Item(props) {
+exports.Item = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
     const { className, disabled, ...restProps } = props;
     return (React.createElement("li", { className: (0, classnames_1.default)(className, {
             [`${config.prefixCls}-disabled`]: disabled,
         }), ...restProps }));
-}
-exports.Item = Item;
+});
 if (process.env.NODE_ENV !== 'production') {
-    Item.displayName = 'Breadcrumb.Item';
+    exports.Item.displayName = 'Breadcrumb.Item';
 }

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = void 0;
-const Breadcrumb_1 = require("./Breadcrumb");
-const Item_1 = require("./Item");
+const Breadcrumb_1 = require("../Breadcrumb/Breadcrumb");
+const Item_1 = require("../Breadcrumb/Item");
 require("./index.scss");
 exports.Breadcrumb = Breadcrumb_1.Breadcrumb;
 exports.Breadcrumb.Item = Item_1.Item;

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

@@ -31,29 +31,31 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
 const Link_1 = require("../Link");
-/* eslint-disable react/prop-types */
-exports.Button = React.forwardRef((props, ref) => {
+const ForwardedButton = React.forwardRef((props, ref) => {
     const config = (0, ConfrigProvider_1.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 = (0, classnames_1.default)(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(() => (0, classnames_1.default)(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_1.Link, { ref: buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Link_1.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));
 });
+exports.Button = React.memo(ForwardedButton);
 if (process.env.NODE_ENV !== 'production') {
+    ForwardedButton.displayName = 'Button.Forwarded';
     exports.Button.displayName = 'Button';
 }