@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/esm/components/Form/Fieldset.js

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-export function Fieldset(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement("fieldset", { className: classNames('uk-fieldset', className), ...restProps }));
-}
+import { useConfig } from '../ConfrigProvider';
+export const Fieldset = React.memo((props) => {
+    const config = useConfig();
+    const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'fieldset'), [config, prefixCls]);
+    return (React.createElement("fieldset", { className: classNames(rootCls, {
+            [`${rootCls}-${layout}`]: layout !== undefined,
+        }, className), ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Fieldset.displayName = 'Form.Fieldset';
 }

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 export interface FormOwnProps {
     layout?: 'stacked' | 'horizontal';
+    prefixCls?: string;
 }
-export declare type FormProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FormOwnProps>;
-declare const defaultElement = "form";
-export declare function Form<E extends React.ElementType = typeof defaultElement>(props: FormProps<E>): JSX.Element;
-export {};
+export type FormProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FormOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FormOwnProps>;
+export declare const Form: React.MemoExoticComponent<(<E extends React.ElementType<any> = "form">(props: FormProps<E>) => JSX.Element)>;

package/dist/esm/components/Form/Form.js

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+import { ComponentProvider } from '../ComponentProvider';
 const defaultElement = 'form';
-export function Form(props) {
-    const { className, layout, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-form', {
-            [`uk-form-${layout}`]: layout !== undefined,
-        }, className), component: defaultElement, ...restProps }));
-}
+export const Form = React.memo((props) => {
+    const config = useConfig();
+    const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'form'), [config, prefixCls]);
+    return (React.createElement(ComponentProvider, { component: "form", prefixCls: prefixCls || config.prefixCls },
+        React.createElement(Component, { className: classNames(rootCls, {
+                [`${rootCls}-${layout}`]: layout !== undefined,
+            }, className), component: defaultElement, ...restProps })));
+});

package/dist/esm/components/Form/Label.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
-export declare function Label(props: LabelProps): JSX.Element;
-export declare namespace Label {
-    var displayName: string;
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    prefixCls?: string;
 }
+export declare const Label: React.MemoExoticComponent<(props: LabelProps) => JSX.Element>;

package/dist/esm/components/Form/Label.js

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
-export function Label(props) {
-    const { className, htmlFor, ...restProps } = props;
-    return (React.createElement("label", { className: classNames('uk-form-label', className), htmlFor: htmlFor, ...restProps }));
-}
+import { useConfig } from '../ConfrigProvider';
+/* eslint-disable jsx-a11y/label-has-associated-control */
+export const Label = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'form-label'), [config, prefixCls]);
+    return React.createElement("label", { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Label.displayName = 'Form.Label';
 }

package/dist/esm/components/Form/Legend.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type LegendProps = React.HTMLAttributes<HTMLLegendElement>;
-export declare function Legend(props: LegendProps): JSX.Element;
-export declare namespace Legend {
-    var displayName: string;
+export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {
+    prefixCls?: string;
 }
+export declare const Legend: React.MemoExoticComponent<(props: LegendProps) => JSX.Element>;

package/dist/esm/components/Form/Legend.js

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

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { Controls } from './Controls';
-import { ControlsText } from './ControlsText';
-import { Fieldset } from './Fieldset';
-import { Label } from './Label';
-import { Legend } from './Legend';
-import type { FormProps } from './Form';
+import type * as React from 'react';
+import { Controls } from '../Form/Controls';
+import { ControlsText } from '../Form/ControlsText';
+import { Fieldset } from '../Form/Fieldset';
+import { type FormProps } from '../Form/Form';
+import { Label } from '../Form/Label';
+import { Legend } from '../Form/Legend';
 import './index.scss';
 export type { FormProps };
-export interface CompoundedForm extends React.FunctionComponent<FormProps> {
+export interface Form extends React.MemoExoticComponent<React.ForwardRefExoticComponent<FormProps>> {
     Controls: typeof Controls;
     ControlsText: typeof ControlsText;
     Fieldset: typeof Fieldset;
     Label: typeof Label;
     Legend: typeof Legend;
 }
-export declare const Form: CompoundedForm;
+export declare const Form: Form;

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

@@ -1,9 +1,9 @@
-import { Controls } from './Controls';
-import { ControlsText } from './ControlsText';
-import { Fieldset } from './Fieldset';
-import { Form as InternalForm } from './Form';
-import { Label } from './Label';
-import { Legend } from './Legend';
+import { Controls } from '../Form/Controls';
+import { ControlsText } from '../Form/ControlsText';
+import { Fieldset } from '../Form/Fieldset';
+import { Form as InternalForm } from '../Form/Form';
+import { Label } from '../Form/Label';
+import { Legend } from '../Form/Legend';
 import './index.scss';
 export const Form = InternalForm;
 Form.Controls = Controls;

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

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-import type { ChildWidthBreakpointsConfig, ChildWidthSize } from '../Width';
+import { type PolymorphicProps } from '../Component';
+import { type ChildWidthBreakpointsConfig, type ChildWidthSize } from '../Width';
 import './index.scss';
-export declare type GridGap = 'collapse' | 'xsmall' | 'small' | 'medium' | 'large';
-export declare type GridOwnProps = {
+export type GridGap = 'collapse' | 'xsmall' | 'small' | 'medium' | 'large';
+export type GridOwnProps = {
     childWidth?: ChildWidthSize | ChildWidthBreakpointsConfig;
     columnGap?: GridGap;
     divider?: boolean;
     gap?: GridGap;
     margin?: GridGap;
     match?: boolean;
+    prefixCls?: string;
     rowGap?: GridGap;
 };
-export declare type GridProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, GridOwnProps>;
-declare const defaultElement = "div";
-export declare function Grid<E extends React.ElementType = typeof defaultElement>(props: GridProps<E>): JSX.Element;
-export {};
+export type GridProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<GridOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, GridOwnProps>;
+export declare const Grid: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: GridProps<E>) => JSX.Element)>;

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

@@ -1,18 +1,21 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
-import { getChildWidthClassname } from '../Width';
+import { useConfig } from '../ConfrigProvider';
+import { getChildWidthClassname, } from '../Width';
 import './index.scss';
 const defaultElement = 'div';
-export function Grid(props) {
-    const { childWidth, className, columnGap, divider, gap, margin, match, rowGap, ...restProps } = props;
+export const Grid = React.memo((props) => {
+    const config = useConfig();
+    const { childWidth, className, columnGap, divider, gap, margin, match, prefixCls = config.prefixCls, rowGap, ...restProps } = props;
     const childWithClassName = React.useMemo(() => getChildWidthClassname(childWidth), [childWidth]);
-    return (React.createElement(Component, { className: classNames('uk-grid', {
-            [`uk-grid-${gap}`]: gap !== undefined,
-            [`uk-grid-row-${rowGap}`]: rowGap !== undefined,
-            [`uk-grid-column-${columnGap}`]: columnGap !== undefined,
-            [`uk-grid-margin-${margin}`]: margin !== undefined,
-            'uk-grid-divider': divider,
-            'uk-grid-match': match,
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'grid'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${rootCls}-${gap}`]: gap !== undefined,
+            [`${rootCls}-row-${rowGap}`]: rowGap !== undefined,
+            [`${rootCls}-column-${columnGap}`]: columnGap !== undefined,
+            [`${rootCls}-margin-${margin}`]: margin !== undefined,
+            [`${rootCls}-divider`]: divider,
+            [`${rootCls}-match`]: match,
         }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
-}
+});

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type HeadingOwnProps = {
+export type HeadingOwnProps = {
     decoration?: 'bullet' | 'divider' | 'line';
+    prefixCls?: string;
     size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 };
-export declare type HeadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, HeadingOwnProps>;
-declare const defaultElement = "div";
-export declare function Heading<E extends React.ElementType = typeof defaultElement>(props: HeadingProps<E>): JSX.Element;
-export {};
+export type HeadingProps<E extends React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
+export declare const Heading: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: HeadingProps<E>) => JSX.Element)>;

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

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'div';
-export function Heading(props) {
-    const { children, className, size, decoration, ...restProps } = props;
+export const Heading = React.memo((props) => {
+    const config = useConfig();
+    const { children, className, prefixCls = config.prefixCls, size, decoration, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'heading'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames({
-            [`uk-heading-${decoration}`]: decoration !== undefined,
-            [`uk-heading-${size}`]: size !== undefined,
-        }, className), component: defaultElement, ...restProps }, decoration === 'line' ? (React.createElement("span", null, children)) : children));
+            [`${rootCls}-${decoration}`]: decoration !== undefined,
+            [`${rootCls}-${size}`]: size !== undefined,
+        }, className), component: defaultElement, ...restProps }, decoration === 'line' ? React.createElement("span", null, children) : children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Heading.displayName = 'Heading';
 }

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

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

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { Icon } from './Icon';
-export function Button(props) {
-    return (React.createElement(Icon, { component: "button", role: "button", type: "button", ...props }));
-}
+import { Icon } from '../Icon/Icon';
+export const Button = React.memo((props) => (React.createElement(Icon, { ...props, component: "button", role: "button", type: "button" })));
 if (process.env.NODE_ENV !== 'production') {
     Button.displayName = 'Icon.Button';
 }

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

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type IconOwnProps = {
+import { type PolymorphicProps } from '../Component';
+export type IconOwnProps = {
     icon: string;
     material?: boolean;
     mode?: 'button' | 'image' | 'link';
     prefixCls?: string;
     round?: boolean;
 };
-export declare type IconProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, IconOwnProps>;
-declare const defaultElement = "span";
-export declare function Icon<E extends React.ElementType = typeof defaultElement>(props: IconProps<E>): JSX.Element | null;
-export {};
+export type IconProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<IconOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, IconOwnProps>;
+export declare const Icon: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: IconProps<E>) => JSX.Element | null)>;

package/dist/esm/components/Icon/Icon.js

@@ -3,16 +3,17 @@ import classNames from 'classnames';
 import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'span';
-export function Icon(props) {
+export const Icon = React.memo((props) => {
     const config = useConfig();
-    const { children, className, icon, material = true, mode, prefixCls = `${config.prefixCls}-icon`, round, type, ...restProps } = props;
+    const { children, className, icon, material = true, mode, prefixCls = config.prefixCls, round, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'icon'), [config, prefixCls]);
     if (!icon) {
         return null;
     }
-    return (React.createElement(Component, { className: classNames(prefixCls, {
-            [`${prefixCls}-button`]: type === 'button',
-            [`${prefixCls}-material`]: material,
-            [`${prefixCls}-round`]: material && round,
-            [`${prefixCls}-${mode}`]: mode !== undefined,
+    return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${rootCls}-button`]: type === 'button',
+            [`${rootCls}-material`]: material,
+            [`${rootCls}-round`]: material && round,
+            [`${rootCls}-${mode}`]: mode !== undefined,
         }, className), component: defaultElement, ...restProps }, material ? React.createElement("i", null, icon) : children));
-}
+});

package/dist/esm/components/Icon/Link.d.ts

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

package/dist/esm/components/Icon/Link.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { Icon } from './Icon';
-export function Link(props) {
-    return (React.createElement(Icon, { component: "a", ...props, role: "button", type: "link" }));
-}
+import { Icon } from '../Icon/Icon';
+export const Link = React.memo((props) => (React.createElement(Icon, { ...props, component: "a", role: "button", type: "link" })));
 if (process.env.NODE_ENV !== 'production') {
     Link.displayName = 'Icon.Link';
 }

package/dist/esm/components/Icon/default-svg-props.d.ts

@@ -1,4 +1,4 @@
-export declare const defaultProps: {
+export declare const defaultSvgProps: {
     fill: string;
     viewBox: string;
     xmlns: string;

package/dist/esm/components/Icon/default-svg-props.js

@@ -1,4 +1,4 @@
-export const defaultProps = {
+export const defaultSvgProps = {
     fill: 'none',
     viewBox: '0 0 20 20',
     xmlns: 'http://www.w3.org/2000/svg',

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

@@ -1,13 +1,13 @@
-import { Button } from './Button';
-import { Link } from './Link';
-import type { PolymorphicComponent } from '../Component';
-import type { IconOwnProps, IconProps } from './Icon';
+import type * as React from 'react';
+import { Button } from '../Icon/Button';
+import { type IconOwnProps, type IconProps } from '../Icon/Icon';
+import { Link } from '../Icon/Link';
 import './index.scss';
-export * from './default-svg-props';
-export * from './get-size';
+export * from '../Icon/default-svg-props';
+export * from '../Icon/get-size';
 export type { IconProps, IconOwnProps };
-export declare type CompoundedIcon = PolymorphicComponent<IconOwnProps> & {
+export interface Icon extends React.MemoExoticComponent<React.FunctionComponent<IconProps>> {
     Button: typeof Button;
     Link: typeof Link;
-};
-export declare const Icon: CompoundedIcon;
+}
+export declare const Icon: Icon;

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

@@ -1,9 +1,9 @@
-import { Button } from './Button';
-import { Icon as InternalIcon } from './Icon';
-import { Link } from './Link';
+import { Button } from '../Icon/Button';
+import { Icon as InternalIcon } from '../Icon/Icon';
+import { Link } from '../Icon/Link';
 import './index.scss';
-export * from './default-svg-props';
-export * from './get-size';
+export * from '../Icon/default-svg-props';
+export * from '../Icon/get-size';
 export const Icon = InternalIcon;
 Icon.Button = Button;
 Icon.Link = Link;

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

@@ -3,4 +3,4 @@ export interface IconnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     vertical?: boolean;
 }
-export declare function Iconnav(props: IconnavProps): JSX.Element;
+export declare const Iconnav: React.MemoExoticComponent<(props: IconnavProps) => JSX.Element>;

package/dist/esm/components/Iconnav/Iconnav.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Iconnav(props) {
+export const Iconnav = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-iconnav`, vertical, ...restProps } = props;
-    return (React.createElement("ul", { className: classNames(prefixCls, {
-            [`${prefixCls}-vertical`]: vertical,
+    const { className, prefixCls = config.prefixCls, vertical, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'iconnav'), [config, prefixCls]);
+    return (React.createElement("ul", { className: classNames(rootCls, {
+            [`${rootCls}-vertical`]: vertical,
         }, className), ...restProps }));
-}
+});

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

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

package/dist/esm/components/Iconnav/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 { children, className, isActive, ...restProps } = props;
     return (React.createElement("li", { className: classNames({
-            [`${config}-active`]: isActive,
+            [`${config.prefixCls}-active`]: isActive,
         }, className), ...restProps }, children));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Iconnav.Item';
 }

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

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

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

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

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

@@ -5,4 +5,4 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     type?: 'success' | 'warning' | 'danger';
 }
-export declare function Label(props: LabelProps): JSX.Element;
+export declare const Label: React.MemoExoticComponent<(props: LabelProps) => JSX.Element>;

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

@@ -2,11 +2,12 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
 import './index.scss';
-export function Label(props) {
+export const Label = React.memo((props) => {
     const config = useConfig();
-    const { className, large, prefixCls = `${config.prefixCls}-label`, type, ...restProps } = props;
-    return (React.createElement("span", { className: classNames(prefixCls, {
-            [`${prefixCls}-${type}`]: type !== undefined,
-            [`${prefixCls}-large`]: large,
+    const { className, large, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'label'), [config, prefixCls]);
+    return (React.createElement("span", { className: classNames(rootCls, {
+            [`${rootCls}-${type}`]: type !== undefined,
+            [`${rootCls}-large`]: large,
         }, className), ...restProps }));
-}
+});

package/dist/esm/components/Label/index.scss

@@ -25,7 +25,7 @@
     background: var(--label-background);
     border-radius: var(--label-border-radius);
     color: var(--label-color);
-    display: inline-block;
+    display: inline-flex;
     font-size: var(--label-font-size);
     line-height: var(--label-line-height);
     padding: var(--label-padding-vertical) var(--label-padding-horizontal);

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
 export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     prefixCls?: string;
     type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';
 }
-export declare type LinkProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, LinkOwnProps>;
-export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps<React.ElementType<any>>, string | number | symbol> & React.RefAttributes<unknown>>;
+export type LinkProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<LinkOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, LinkOwnProps>;
+export declare const Link: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>>;

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

@@ -4,10 +4,16 @@ import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'a';
-export const Link = React.forwardRef((props, ref) => {
+const ForwardedLink = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, className, prefixCls = `${config.prefixCls}-link`, type, ...restProps } = props;
+    const { children, className, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'link'), [config, prefixCls]);
     return (React.createElement(Component, { ref: ref, className: classNames({
-            [`${prefixCls}-${type}`]: type !== undefined,
+            [`${rootCls}-${type}`]: type !== undefined,
         }, className), component: defaultElement, ...restProps }, children));
 });
+export const Link = React.memo(ForwardedLink);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedLink.displayName = 'Link.Forwarded';
+    Link.displayName = 'Link';
+}

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-declare type Props = React.LiHTMLAttributes<HTMLLIElement>;
-export declare function Item(props: Props): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
-}
+type Props = React.LiHTMLAttributes<HTMLLIElement>;
+export declare const Item: React.MemoExoticComponent<(props: Props) => JSX.Element>;
 export {};

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-export function Item(props) {
-    return React.createElement("li", { ...props });
-}
+export const Item = React.memo((props) => React.createElement("li", { ...props }));
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'List.Item';
 }

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

@@ -5,4 +5,4 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
     size?: 'large' | 'collapse';
     type?: 'bullet' | 'disc' | 'divider' | 'striped' | 'circle' | 'square' | 'decimal' | 'hyphen';
 }
-export declare function List(props: ListProps): JSX.Element;
+export declare const List: React.MemoExoticComponent<(props: ListProps) => JSX.Element>;