@broxus/react-uikit 0.8.1 → 0.9.1

package/dist/cjs/utils/get-breakpoints-config-classes.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBreakpointsConfigClasses = void 0;
 function getBreakpointsConfigClasses(prefixCls, componentCls, config = {}) {
-    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${componentCls}-${value}${key !== 'default' ? `@${key}` : ''}` : '')).join(' ');
+    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${componentCls}-${value}${key !== 'default' ? `@${key}` : ''}` : '')).join(' ').trim();
 }
 exports.getBreakpointsConfigClasses = getBreakpointsConfigClasses;

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

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type ArticleMetaOwnProps = {
     prefixCls?: string;
 };
-export type ArticleMetaProps<E extends React.ElementType> = React.PropsWithChildren<ArticleMetaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleMetaOwnProps>;
+export type ArticleMetaProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ArticleMetaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleMetaOwnProps>;
 declare const defaultElement = "p";
 export declare function Meta<E extends React.ElementType = typeof defaultElement>(props: ArticleMetaProps<E>): React.JSX.Element;
 export declare namespace Meta {

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

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type ArticleTitleOwnProps = {
     prefixCls?: string;
 };
-export type ArticleTitleProps<E extends React.ElementType> = React.PropsWithChildren<ArticleTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleTitleOwnProps>;
+export type ArticleTitleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ArticleTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleTitleOwnProps>;
 declare const defaultElement = "h1";
 export declare function Title<E extends React.ElementType = typeof defaultElement>(props: ArticleTitleProps<E>): React.JSX.Element;
 export declare namespace Title {

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

@@ -4,7 +4,7 @@ import './index.scss';
 export type BadgeOwnProps = {
     prefixCls?: string;
 };
-export type BadgeProps<E extends React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
+export type BadgeProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
 declare const defaultElement = "span";
 export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: BadgeProps<E>): React.JSX.Element;
 export declare namespace Badge {

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export interface AnchorButtonProps extends Omit<React.AnchorHTMLAttributes<any>, 'onClick'> {
+export interface AnchorButtonProps extends Omit<React.AnchorHTMLAttributes<React.ElementType>, 'onClick'> {
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
 }
-export interface NativeButtonProps extends Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'> {
+export interface NativeButtonProps extends Omit<React.ButtonHTMLAttributes<React.ElementType>, 'type' | 'onClick'> {
     htmlType?: 'button' | 'reset' | 'submit';
     onClick?: React.MouseEventHandler<HTMLElement>;
 }
@@ -16,5 +16,5 @@ export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<Nati
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
-export type ButtonProps<E extends React.ElementType = any> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<any>, "ref"> & React.RefAttributes<any>>;
+export type ButtonProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;

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

@@ -18,7 +18,7 @@ export const Button = React.forwardRef((props, ref) => {
     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}-ghost`]: ghost === true,
         [`${rootCls}-${size}`]: size !== undefined,
         [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);

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

@@ -279,21 +279,22 @@
  * The same for all style modifiers
  */
 
-.uk-button-default:disabled,
-.uk-button-primary:disabled,
-.uk-button-secondary:disabled,
-.uk-button-tertiary:disabled,
-.uk-button-success:disabled,
-.uk-button-warning:disabled,
-.uk-button-danger:disabled {
-    background-color: var(--button-disabled-background);
-    color: var(--button-disabled-color);
-    @if mixin-exists(hook-button-disabled) {
-        @include hook-button-disabled;
+@if $button-disabled-mode == same {
+    .uk-button-default:disabled,
+    .uk-button-primary:disabled,
+    .uk-button-secondary:disabled,
+    .uk-button-tertiary:disabled,
+    .uk-button-success:disabled,
+    .uk-button-warning:disabled,
+    .uk-button-danger:disabled {
+        background-color: var(--button-disabled-background);
+        color: var(--button-disabled-color);
+        @if mixin-exists(hook-button-disabled) {
+            @include hook-button-disabled;
+        }
     }
 }
 
-
 /* Size modifiers
  ========================================================================== */
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type BadgeProps } from '../../components/Badge';
-export type CardBadgeProps<E extends React.ElementType> = BadgeProps<E>;
+export type CardBadgeProps<E extends React.ElementType = React.ElementType> = BadgeProps<E>;
 declare const defaultElement = "span";
 export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: CardBadgeProps<E>): React.JSX.Element;
 export declare namespace Badge {

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

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardBodyOwnProps = {
     prefixCls?: string;
 };
-export type CardBodyProps<E extends React.ElementType> = React.PropsWithChildren<CardBodyOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardBodyOwnProps>;
+export type CardBodyProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardBodyOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardBodyOwnProps>;
 declare const defaultElement = "div";
 export declare function Body<E extends React.ElementType = typeof defaultElement>(props: CardBodyProps<E>): React.JSX.Element;
 export declare namespace Body {

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

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardFooterOwnProps = {
     prefixCls?: string;
 };
-export type CardFooterProps<E extends React.ElementType> = React.PropsWithChildren<CardFooterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardFooterOwnProps>;
+export type CardFooterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardFooterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardFooterOwnProps>;
 declare const defaultElement = "footer";
 export declare function Footer<E extends React.ElementType = typeof defaultElement>(props: CardFooterProps<E>): React.JSX.Element;
 export declare namespace Footer {

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

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardHeaderOwnProps = {
     prefixCls?: string;
 };
-export type CardHeaderProps<E extends React.ElementType> = React.PropsWithChildren<CardHeaderOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardHeaderOwnProps>;
+export type CardHeaderProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardHeaderOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardHeaderOwnProps>;
 declare const defaultElement = "header";
 export declare function Header<E extends React.ElementType = typeof defaultElement>(props: CardHeaderProps<E>): React.JSX.Element;
 export declare namespace Header {

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

@@ -4,7 +4,7 @@ export type CardMediaOwnProps = {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
 };
-export type CardMediaProps<E extends React.ElementType> = React.PropsWithChildren<CardMediaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardMediaOwnProps>;
+export type CardMediaProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardMediaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardMediaOwnProps>;
 declare const defaultElement = "div";
 export declare function Media<E extends React.ElementType = typeof defaultElement>(props: CardMediaProps<E>): React.JSX.Element;
 export declare namespace Media {

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

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardTitleOwnProps = {
     prefixCls?: string;
 };
-export type CardTitleProps<E extends React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
+export type CardTitleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
 declare const defaultElement = "h3";
 export declare function Title<E extends React.ElementType = typeof defaultElement>(props: CardTitleProps<E>): React.JSX.Element;
 export declare namespace Title {

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

@@ -12,5 +12,5 @@ export interface PolymorphicComponent<Component extends React.ElementType = Reac
     defaultProps?: Partial<any>;
     id?: string;
 }
-export declare const Component: React.ForwardRefExoticComponent<Omit<ComponentOwnProp<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Component: React.ForwardRefExoticComponent<Omit<ComponentOwnProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export {};

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

@@ -9,4 +9,4 @@ export interface ContainerOwnProps {
     size?: 'xsmall' | 'small' | 'large' | 'xlarge' | 'expand';
 }
 export type ContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ContainerOwnProps>;
-export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ContainerProps<E>) => React.JSX.Element)>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: ContainerProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Control/Select/index.scss

@@ -538,7 +538,7 @@
 /* Control
  ========================================================================== */
 
-.uk-control-select {
+.uk-control.uk-control-select {
     align-items: unset;
     border: 0 none;
     height: auto;

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

@@ -8,7 +8,7 @@ import './index.scss';
 const defaultPushState = { distance: 180 };
 export const Drawer = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { animation = 'slide', children, className, contentWrapperStyle, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
+    const { animation = 'slide', children, className, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
     const [isShown, setShown] = React.useState(defaultOpen);
     const [internalOpen, setOpen] = React.useState(defaultOpen);
     const mergedOpen = open === undefined ? internalOpen : open;
@@ -101,11 +101,7 @@ export const Drawer = React.forwardRef((props, ref) => {
     React.useEffect(() => cleanup, [cleanup]);
     return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(RcDrawer, { className: className, contentWrapperStyle: {
-                height: undefined,
-                width: undefined,
-                ...contentWrapperStyle,
-            }, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+        React.createElement(RcDrawer, { className: className, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
                 motionName: getMotionName(prefixCls || config.prefixCls, 'drawer-fade'),
             }, motion: mergedMotion, open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, rootStyle: { ...rootStyle, display: (mergedOpen || isShown) ? 'block' : '' }, onClose: onClose, ...restProps }, children)));
 });

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
-export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
-export type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
+export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'start' | 'middle' | 'end';
+export type FlexAlignItems = 'stretch' | 'start' | 'middle' | 'end';
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-export type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
+export type FlexJustifyContent = 'start' | 'center' | 'end' | 'between' | 'around';
 export type FlexBreakpoint = {
     alignContent?: FlexAlignContent;
     alignItems?: FlexAlignItems;

package/dist/esm/components/Flex/Flex.js

@@ -5,13 +5,47 @@ import { useConfig } from '../../components/ConfigProvider';
 import { FlexContext } from '../../components/Flex/context';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'div';
+const alignContentMap = new Map([
+    ['around', 'around'],
+    ['between', 'between'],
+    ['end', 'right'],
+    ['middle', 'middle'],
+    ['start', 'left'],
+    ['stretch', 'stretch'],
+]);
+const alignItemsMap = new Map([
+    ['end', 'bottom'],
+    ['middle', 'middle'],
+    ['start', 'top'],
+    ['stretch', 'stretch'],
+]);
+const justifyContentMap = new Map([
+    ['around', 'around'],
+    ['between', 'between'],
+    ['end', 'right'],
+    ['center', 'center'],
+    ['start', 'left'],
+]);
+function mapJustifyContentBreakpoints(value) {
+    const config = {};
+    for (const key in value) {
+        // @ts-ignore
+        if (justifyContentMap.has(value[key])) {
+            // @ts-ignore
+            config[key] = justifyContentMap.get(value[key]);
+        }
+    }
+    return config;
+}
 export function Flex(props) {
     const config = 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]);
-    const justifyContentCls = React.useMemo(() => (typeof justifyContent === 'string'
-        ? `${rootCls}-${justifyContent}`
-        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', justifyContent)), [config.prefixCls, justifyContent, prefixCls, rootCls]);
+    const justifyContentCls = React.useMemo(
+    // eslint-disable-next-line no-nested-ternary
+    () => (typeof justifyContent === 'string'
+        ? (justifyContentMap.has(justifyContent) ? `${rootCls}-${justifyContentMap.get(justifyContent)}` : '')
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', mapJustifyContentBreakpoints(justifyContent || {}))), [config.prefixCls, justifyContent, prefixCls, rootCls]);
     const context = React.useMemo(() => ({
         getRootCls() {
             return rootCls;
@@ -21,9 +55,9 @@ export function Flex(props) {
         React.createElement(Component, { className: classNames({
                 [rootCls]: !inline,
                 [`${rootCls}-inline`]: inline,
-                [`${rootCls}-${alignItems}`]: alignItems !== undefined,
+                [`${rootCls}-${alignItemsMap.get(alignItems)}`]: alignItems && alignItemsMap.has(alignItems),
                 [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
                 [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
-                [`${rootCls}-wrap-${alignContent}`]: alignContent !== undefined,
+                [`${rootCls}-wrap-${alignContentMap.get(alignContent)}`]: alignContent && alignContentMap.has(alignContent),
             }, justifyContentCls, className), component: defaultElement, ...restProps })));
 }

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

@@ -6,7 +6,7 @@ export type HeadingOwnProps = {
     prefixCls?: string;
     size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 };
-export type HeadingProps<E extends React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
+export type HeadingProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
 declare const defaultElement = "div";
 export declare function Heading<E extends React.ElementType = typeof defaultElement>(props: HeadingProps<E>): React.JSX.Element;
 export declare namespace Heading {

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

@@ -6,4 +6,4 @@ export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
     type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';
 }
 export type LinkProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<LinkOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, LinkOwnProps>;
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;

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

@@ -610,8 +610,7 @@
     margin: 0;
     max-height: 200px;
     outline: none;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
     padding: 0;
     text-align: left;
     @if mixin-exists(hook-tabs-dropdown-menu) {
@@ -769,4 +768,5 @@
     --inverse-tabs-tab-hover-color: var(--inverse-global-color);
     --inverse-tabs-tab-active-color: var(--inverse-global-emphasis-color);
     --inverse-tabs-tab-disabled-color: var(--inverse-global-muted-color);
+    --inverse-tabs-ink-bar-color: var(--inverse-global-primary-background);
 }

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

@@ -5,13 +5,14 @@ export type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;
     className?: string;
-    color?: 'meta' | 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
+    color?: 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
     column?: number | BreakpointsConfig<number>;
     decoration?: 'none';
     dropcap?: boolean;
     italic?: boolean;
+    kind?: 'meta' | 'lead' | 'base';
     prefixCls?: string;
-    size?: 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'lead';
+    size?: 'xsmall' | 'small' | 'large';
     transform?: 'capitalize' | 'uppercase' | 'lowercase';
     verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
     weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';

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

@@ -6,7 +6,7 @@ import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'span';
 export function Text(props) {
     const config = useConfig();
-    const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const { align, className, color, column, decoration, dropcap, italic, kind, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
     const alignClassName = React.useMemo(() => (typeof align === 'string'
         ? `${rootCls}-${align}`
@@ -17,6 +17,7 @@ export function Text(props) {
     return (React.createElement(Component, { className: classNames(columnClassName, alignClassName, {
             [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
             [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${kind}`]: kind !== undefined,
             [`${rootCls}-${size}`]: size !== undefined,
             [`${rootCls}-${transform}`]: transform !== undefined,
             [`${rootCls}-${verticalAlign}`]: verticalAlign !== undefined,