@broxus/react-uikit 0.4.6 → 0.4.8

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

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

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

@@ -32,14 +32,15 @@ const rc_collapse_1 = __importDefault(require("rc-collapse"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
-exports.Accordion = React.memo((props) => {
+function Accordion(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { className, 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)({
             [`${rootCls}-rtl`]: direction === 'rtl',
         }, className), openMotion: (0, utils_1.getCollapseMotion)(prefixCls || config.prefixCls), prefixCls: rootCls, ...restProps }));
-});
+}
+exports.Accordion = Accordion;
 if (process.env.NODE_ENV !== 'production') {
-    exports.Accordion.displayName = 'Accordion';
+    Accordion.displayName = 'Accordion';
 }

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

@@ -5,4 +5,7 @@ export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps
  * Use Accordion items props instead
  * @deprecated
  */
-export declare const Item: React.MemoExoticComponent<(props: AccordionItemProps) => React.JSX.Element>;
+export declare function Item(props: AccordionItemProps): React.JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}

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

@@ -31,12 +31,13 @@ const Icon_1 = require("../../components/Icon");
  * Use Accordion items props instead
  * @deprecated
  */
-exports.Item = React.memo((props) => {
+function Item(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;
 if (process.env.NODE_ENV !== 'production') {
-    exports.Item.displayName = 'Accordion.Item';
+    Item.displayName = 'Accordion.Item';
 }

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

@@ -17,4 +17,4 @@ export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<Nati
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
 export type ButtonProps<E extends React.ElementType = any> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
-export declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<ButtonProps<any>, "ref"> & React.RefAttributes<any>>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<any>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/components/Button/Button.js

@@ -33,9 +33,9 @@ const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Link_1 = require("../../components/Link");
 const defaultElement = 'button';
-const ForwardedButton = React.forwardRef((props, ref) => {
+exports.Button = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape, size, type, ...restProps } = props;
+    const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape = config.buttonShape, size = config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -56,8 +56,6 @@ const ForwardedButton = React.forwardRef((props, ref) => {
     }
     return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: defaultElement, 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';
 }

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

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

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

@@ -30,12 +30,13 @@ exports.Group = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-exports.Group = React.memo((props) => {
+function Group(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     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: (0, classnames_1.default)(rootCls, className), ...restProps });
-});
+}
+exports.Group = Group;
 if (process.env.NODE_ENV !== 'production') {
-    exports.Group.displayName = 'Button.Group';
+    Group.displayName = 'Button.Group';
 }

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

@@ -3,7 +3,7 @@ import { type ButtonProps } from '../../components/Button/Button';
 import { Group } from '../../components/Button/Group';
 import './index.scss';
 export type { ButtonProps };
-export interface Button extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps>> {
+export interface Button extends React.ForwardRefExoticComponent<ButtonProps> {
     Group: typeof Group;
 }
 export declare const Button: Button;

package/dist/cjs/components/Button/index.scss

@@ -19,8 +19,7 @@
 //                  `uk-button-xlarge`
 //                  `uk-button-circle`
 //                  `uk-button-round`
-//
-// TODO: Add `ghost` and `dashed` modifiers
+//                  `uk-button-ghost`
 //
 // States:          `uk-active`
 //
@@ -410,6 +409,90 @@
 }
 
 
+/* Ghost modifiers
+ ========================================================================== */
+
+.uk-button-ghost {
+    background-color: transparent;
+    border: var(--button-ghost-border-width) var(--button-ghost-border-style);
+}
+
+.uk-button-default.uk-button-ghost {
+    border-color: var(--button-ghost-default-border);
+    color: var(--button-ghost-default-color);
+}
+
+.uk-button-default.uk-button-ghost:hover,
+.uk-button-default.uk-button-ghost:focus {
+    border-color: var(--button-ghost-default-hover-border);
+}
+
+.uk-button-default.uk-button-ghost:active,
+.uk-button-default.uk-button-ghost.active {
+    border-color: var(--button-ghost-default-active-border);
+}
+
+.uk-button-primary.uk-button-ghost {
+    border-color: var(--button-ghost-primary-border);
+    color: var(--button-ghost-primary-color);
+}
+
+.uk-button-primary.uk-button-ghost:hover,
+.uk-button-primary.uk-button-ghost:focus {
+    border-color: var(--button-ghost-primary-hover-border);
+}
+
+.uk-button-primary.uk-button-ghost:active,
+.uk-button-primary.uk-button-ghost.active {
+    border-color: var(--button-ghost-primary-active-border);
+}
+
+.uk-button-secondary.uk-button-ghost {
+    border-color: var(--button-ghost-secondary-border);
+    color: var(--button-ghost-secondary-color);
+}
+
+.uk-button-secondary.uk-button-ghost:hover,
+.uk-button-secondary.uk-button-ghost:focus {
+    border-color: var(--button-ghost-secondary-hover-border);
+}
+
+.uk-button-secondary.uk-button-ghost:active,
+.uk-button-secondary.uk-button-ghost.active {
+    border-color: var(--button-ghost-secondary-active-border);
+}
+
+.uk-button-tertiary.uk-button-ghost {
+    border-color: var(--button-ghost-tertiary-border);
+    color: var(--button-ghost-tertiary-color);
+}
+
+.uk-button-tertiary.uk-button-ghost:hover,
+.uk-button-tertiary.uk-button-ghost:focus {
+    border-color: var(--button-ghost-tertiary-hover-border);
+}
+
+.uk-button-tertiary.uk-button-ghost:active,
+.uk-button-tertiary.uk-button-ghost.active {
+    border-color: var(--button-ghost-tertiary-active-border);
+}
+
+.uk-button-danger.uk-button-ghost {
+    border-color: var(--button-ghost-danger-border);
+    color: var(--button-ghost-danger-color);
+}
+
+.uk-button-danger.uk-button-ghost:hover,
+.uk-button-danger.uk-button-ghost:focus {
+    border-color: var(--button-ghost-danger-hover-border);
+}
+
+.uk-button-danger.uk-button-ghost:active,
+.uk-button-danger.uk-button-ghost.active {
+    border-color: var(--button-ghost-danger-active-border);
+}
+
+
 /* Shape modifiers
  ========================================================================== */
 
@@ -498,6 +581,28 @@
     --button-danger-hover-color: var(--global-inverse-color);
     --button-danger-active-background: #{$button-danger-active-background};
     --button-danger-active-color: var(--global-inverse-color);
+    --button-ghost-border-width: var(--global-border-width);
+    --button-ghost-border-style: var(--global-border-style);
+    --button-ghost-default-color: var(--button-default-background);
+    --button-ghost-default-border: var(--button-default-background);
+    --button-ghost-default-hover-border: var(--button-default-hover-background);
+    --button-ghost-default-active-border: var(--button-default-active-background);
+    --button-ghost-primary-color: var(--button-primary-background);
+    --button-ghost-primary-border: var(--button-primary-background);
+    --button-ghost-primary-hover-border: var(--button-primary-hover-background);
+    --button-ghost-primary-active-border: var(--button-primary-active-background);
+    --button-ghost-secondary-color: var(--button-secondary-background);
+    --button-ghost-secondary-border: var(--button-secondary-background);
+    --button-ghost-secondary-hover-border: var(--button-secondary-hover-background);
+    --button-ghost-secondary-active-border: var(--button-secondary-active-background);
+    --button-ghost-tertiary-color: var(--button-tertiary-background);
+    --button-ghost-tertiary-border: var(--button-tertiary-background);
+    --button-ghost-tertiary-hover-border: var(--button-tertiary-hover-background);
+    --button-ghost-tertiary-active-border: var(--button-tertiary-active-background);
+    --button-ghost-danger-color: var(--button-danger-background);
+    --button-ghost-danger-border: var(--button-danger-background);
+    --button-ghost-danger-hover-border: var(--button-danger-hover-background);
+    --button-ghost-danger-active-border: var(--button-danger-active-background);
     --button-circle-border-radius: #{$button-circle-border-radius};
     --button-round-border-radius: #{$button-round-border-radius};
     --button-disabled-background: var(--global-muted-background);

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

@@ -10,4 +10,9 @@ export type CardOwnProps = {
     size?: 'small' | 'large';
 };
 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>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): React.JSX.Element;
+export declare namespace Card {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/Card/Card.js

@@ -34,7 +34,7 @@ const Component_1 = require("../../components/Component");
 const ComponentProvider_1 = require("../../components/ComponentProvider");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-exports.Card = React.memo((props) => {
+function Card(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { asBody, className, color, colorMode = color !== 'default' && color !== undefined
         // @ts-ignore
@@ -49,7 +49,8 @@ exports.Card = React.memo((props) => {
                 [`${rootCls}-hover`]: hoverable,
                 [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
             }, className), component: defaultElement, ...restProps })));
-});
+}
+exports.Card = Card;
 if (process.env.NODE_ENV !== 'production') {
-    exports.Card.displayName = 'Card';
+    Card.displayName = 'Card';
 }

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

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

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

@@ -5,7 +5,7 @@ type ComponentOwnProp<T extends React.ElementType = React.ElementType> = React.C
 type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = {}> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
 export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = {}> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
 export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = {}> {
-    <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): JSX.Element;
+    <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): React.JSX.Element;
     displayName?: string;
     propTypes?: React.WeakValidationMap<any>;
     contextTypes?: React.ValidationMap<any>;

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

@@ -8,4 +8,4 @@ export interface ComponentContextProviderProps extends React.PropsWithChildren<P
 }
 export declare const ComponentContext: React.Context<ComponentContextConsumerProps>;
 export declare function useComponentContext(): ComponentContextConsumerProps;
-export declare function ComponentProvider(props: ComponentContextProviderProps): JSX.Element;
+export declare function ComponentProvider(props: ComponentContextProviderProps): React.JSX.Element;

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { type BreakpointsConfig, type TooltipOptions } from '../../types';
+import { ButtonProps } from "../../components/Button";
 export type ColorMode = 'light' | 'dark';
 export type ConfigContextConsumerProps = {
     breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
+    buttonShape?: ButtonProps['shape'];
+    buttonSize?: ButtonProps['size'];
     cardPrimaryColorMode?: ColorMode;
     cardSecondaryColorMode?: ColorMode;
     cardTertiaryColorMode?: ColorMode;
@@ -24,4 +27,4 @@ export type ConfigContextConsumerProps = {
 export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumerProps>;
 export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
 export declare function useConfig(): ConfigContextConsumerProps;
-export declare const ConfigContextProvider: React.MemoExoticComponent<(props: Partial<ConfigContextProviderProps>) => React.JSX.Element>;
+export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;

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

@@ -72,7 +72,7 @@ function useConfig() {
     return React.useContext(exports.ConfigContext);
 }
 exports.useConfig = useConfig;
-exports.ConfigContextProvider = React.memo((props) => {
+function ConfigContextProvider(props) {
     const initialContext = useConfig();
     const { children, ...restProps } = props;
     const context = React.useMemo(() => {
@@ -86,7 +86,8 @@ exports.ConfigContextProvider = React.memo((props) => {
         return { ...initialContext, direction, ...restProps };
     }, [initialContext, restProps]);
     return React.createElement(exports.ConfigContext.Provider, { value: context }, children);
-});
+}
+exports.ConfigContextProvider = ConfigContextProvider;
 if (process.env.NODE_ENV !== 'production') {
     exports.ConfigContext.displayName = 'ConfigContext';
 }

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

@@ -19,4 +19,6 @@ export interface FlexOwnProps extends FlexBreakpoint, FlexBreakpointsConfig {
     prefixCls?: string;
 }
 export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
-export declare const Flex: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: FlexProps<E>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): React.JSX.Element;
+export {};

package/dist/cjs/components/Flex/Flex.js

@@ -34,7 +34,7 @@ const ComponentProvider_1 = require("../../components/ComponentProvider");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
 const defaultElement = 'div';
-exports.Flex = React.memo((props) => {
+function Flex(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { alignContent, alignItems, className, flexDirection, flexWrap, inline, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
@@ -50,4 +50,5 @@ exports.Flex = React.memo((props) => {
                 [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
                 [`${rootCls}-wrap-${alignContent}`]: alignContent !== undefined,
             }, justifyContentCls, className), component: defaultElement, ...restProps })));
-});
+}
+exports.Flex = Flex;

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

@@ -9,5 +9,6 @@ export interface ItemOwnItem {
     prefixCls?: string;
 }
 export type ItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ItemOwnItem & PolymorphicProps<E>> & PolymorphicProps<E, ItemOwnItem>;
-export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ItemProps<E>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Item<E extends React.ElementType = typeof defaultElement>(props: ItemProps<E>): React.JSX.Element;
 export {};

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

@@ -34,7 +34,7 @@ const ComponentProvider_1 = require("../../components/ComponentProvider");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
 const defaultElement = 'div';
-exports.Item = React.memo((props) => {
+function Item(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
     const { className, itemDimensions, order, prefixCls = getRootCls(), ...restProps } = props;
@@ -44,4 +44,5 @@ exports.Item = React.memo((props) => {
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
             [`${prefixCls}-${itemDimensions}`]: itemDimensions !== undefined,
         }, orderCls, className), component: defaultElement, ...restProps }));
-});
+}
+exports.Item = Item;

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

@@ -3,7 +3,7 @@ import { type FlexAlignContent, type FlexAlignItems, type FlexDirection, type Fl
 import { type ItemProps as FlexItemProps, Item } from '../../components/Flex/Item';
 import './index.scss';
 export type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexJustifyContent, FlexItemProps, FlexProps, FlexWrap };
-export interface Flex extends React.MemoExoticComponent<React.FunctionComponent<FlexProps>> {
+export interface Flex extends React.FunctionComponent<FlexProps> {
     Item: typeof Item;
 }
 export declare const Flex: Flex;

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

@@ -14,4 +14,6 @@ export type GridOwnProps = {
     rowGap?: GridGap;
 };
 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>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Grid<E extends React.ElementType = typeof defaultElement>(props: GridProps<E>): React.JSX.Element;
+export {};

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

@@ -34,7 +34,7 @@ const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Width_1 = require("../../components/Width");
 require("./index.scss");
 const defaultElement = 'div';
-exports.Grid = React.memo((props) => {
+function Grid(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { childWidth, className, columnGap, divider, gap, margin, match, prefixCls = config.prefixCls, rowGap, ...restProps } = props;
     const childWithClassName = React.useMemo(() => (0, Width_1.getChildWidthClassname)(childWidth), [childWidth]);
@@ -47,4 +47,5 @@ exports.Grid = React.memo((props) => {
             [`${rootCls}-divider`]: divider,
             [`${rootCls}-match`]: match,
         }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
-});
+}
+exports.Grid = Grid;

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

@@ -57,4 +57,4 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
         disabled: boolean;
     }) => React.ReactElement;
 }
-export declare const Nav: React.MemoExoticComponent<React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>>;
+export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>;

package/dist/cjs/components/Nav/Nav.js

@@ -49,7 +49,7 @@ const warnUtil_1 = require("../../components/Nav/utils/warnUtil");
 const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const EMPTY_LIST = [];
-const ForwardedNav = React.forwardRef((props, ref) => {
+exports.Nav = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
     const { activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, prefixCls = config.prefixCls, defaultMotions = {
         horizontal: {
@@ -147,6 +147,7 @@ const ForwardedNav = React.forwardRef((props, ref) => {
             : childList.slice(lastVisibleIndex + 1).map(child => child.key));
     }, [lastVisibleIndex, allVisible, refreshOverflowKeys, childList]);
     // ======================== Active ========================
+    // eslint-disable-next-line function-paren-newline
     const [mergedActiveKey, setMergedActiveKey] = (0, useMergedState_1.default)(activeKey || ((defaultActiveFirst && childList[0]?.key)), { value: activeKey });
     const onActive = (0, useMemoCallback_1.useMemoCallback)((key) => {
         setMergedActiveKey(key);
@@ -284,4 +285,3 @@ const ForwardedNav = React.forwardRef((props, ref) => {
                 React.createElement("div", { style: { display: 'none' }, "aria-hidden": true },
                     React.createElement(PathContext_1.PathRegisterContext.Provider, { value: registerPathContext }, childList))))));
 });
-exports.Nav = React.memo(ForwardedNav);

package/dist/cjs/components/Tabs/hooks/useLegacyItems.d.ts

@@ -1,4 +1,4 @@
 import { type Tab } from 'rc-tabs/lib/interface';
 import * as React from 'react';
 import { type TabsProps } from '../../../components/Tabs';
-export default function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode): Tab[];
+export declare function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode): Tab[];

package/dist/cjs/components/Tabs/hooks/useLegacyItems.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLegacyItems = void 0;
 const js_utils_1 = require("@broxus/js-utils");
 const toArray_1 = __importDefault(require("rc-util/lib/Children/toArray"));
 const React = __importStar(require("react"));
@@ -52,4 +53,4 @@ function useLegacyItems(items, children) {
     });
     return filter(childrenItems);
 }
-exports.default = useLegacyItems;
+exports.useLegacyItems = useLegacyItems;

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

@@ -14,4 +14,4 @@ export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
     type?: TabType;
     onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare const Tabs: React.MemoExoticComponent<(props: TabsProps) => React.JSX.Element>;
+export declare function Tabs(props: TabsProps): React.JSX.Element;

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

@@ -35,8 +35,7 @@ const Icon_1 = require("../../components/Icon");
 const hooks_1 = require("../../components/Tabs/hooks");
 const utils_1 = require("../../utils");
 require("./index.scss");
-const useLegacyItems_1 = __importDefault(require("../../components/Tabs/hooks/useLegacyItems"));
-exports.Tabs = React.memo((props) => {
+function Tabs(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { addIcon, animated, centered, children, className, direction, hideAdd, items, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
@@ -52,10 +51,11 @@ exports.Tabs = React.memo((props) => {
             },
         }
         : undefined), [addIcon, hideAdd, onEdit, type]);
-    return (React.createElement(rc_tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: (0, useLegacyItems_1.default)(items, children), moreTransitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: (0, classnames_1.default)({
+    return (React.createElement(rc_tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: (0, hooks_1.useLegacyItems)(items, children), moreTransitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: (0, classnames_1.default)({
             [`${rootCls}-${size}`]: size,
             [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
             [`${rootCls}-editable-card`]: type === 'editable-card',
             [`${rootCls}-centered`]: centered,
         }, className), editable: editable, moreIcon: moreIcon, prefixCls: rootCls }));
-});
+}
+exports.Tabs = Tabs;

package/dist/cjs/styles/margin.scss

@@ -298,6 +298,7 @@
 
 :root {
     --margin: var(--global-margin);
+    --xsmall-margin: var(--global-xsmall-margin);
     --small-margin: var(--global-small-margin);
     --medium-margin: var(--global-medium-margin);
     --large-margin: var(--global-medium-margin);